diff --git a/sub/sub.go b/sub/sub.go
index dc8e9c5e..87808761 100644
--- a/sub/sub.go
+++ b/sub/sub.go
@@ -92,9 +92,9 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 		SubJsonFragment = ""
 	}
 
-	SubJsonNoise, err := s.settingService.GetSubJsonNoise()
+	SubJsonNoises, err := s.settingService.GetSubJsonNoises()
 	if err != nil {
-		SubJsonNoise = ""
+		SubJsonNoises = ""
 	}
 
 	SubJsonMux, err := s.settingService.GetSubJsonMux()
@@ -111,7 +111,7 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 
 	s.sub = NewSUBController(
 		g, LinksPath, JsonPath, Encrypt, ShowInfo, RemarkModel, SubUpdates,
-		SubJsonFragment, SubJsonNoise, SubJsonMux, SubJsonRules)
+		SubJsonFragment, SubJsonNoises, SubJsonMux, SubJsonRules)
 
 	return engine, nil
 }
diff --git a/sub/subJsonService.go b/sub/subJsonService.go
index 9ffaa4a0..5f994d87 100644
--- a/sub/subJsonService.go
+++ b/sub/subJsonService.go
@@ -21,14 +21,14 @@ type SubJsonService struct {
 	configJson       map[string]interface{}
 	defaultOutbounds []json_util.RawMessage
 	fragment         string
-	noise            string
+	noises           string
 	mux              string
 
 	inboundService service.InboundService
 	SubService     *SubService
 }
 
-func NewSubJsonService(fragment string, noise string, mux string, rules string, subService *SubService) *SubJsonService {
+func NewSubJsonService(fragment string, noises string, mux string, rules string, subService *SubService) *SubJsonService {
 	var configJson map[string]interface{}
 	var defaultOutbounds []json_util.RawMessage
 	json.Unmarshal([]byte(defaultJson), &configJson)
@@ -53,15 +53,15 @@ func NewSubJsonService(fragment string, noise string, mux string, rules string,
 		defaultOutbounds = append(defaultOutbounds, json_util.RawMessage(fragment))
 	}
 
-	if noise != "" {
-		defaultOutbounds = append(defaultOutbounds, json_util.RawMessage(noise))
+	if noises != "" {
+		defaultOutbounds = append(defaultOutbounds, json_util.RawMessage(noises))
 	}
 
 	return &SubJsonService{
 		configJson:       configJson,
 		defaultOutbounds: defaultOutbounds,
 		fragment:         fragment,
-		noise:            noise,
+		noises:           noises,
 		mux:              mux,
 		SubService:       subService,
 	}
diff --git a/web/assets/js/model/outbound.js b/web/assets/js/model/outbound.js
index 76487ab7..596ff6c6 100644
--- a/web/assets/js/model/outbound.js
+++ b/web/assets/js/model/outbound.js
@@ -786,13 +786,21 @@ Outbound.FreedomSettings = class extends CommonClass {
         domainStrategy = '',
         redirect = '',
         fragment = {},
-        noise = {}
+        noises = []
     ) {
         super();
         this.domainStrategy = domainStrategy;
         this.redirect = redirect;
         this.fragment = fragment;
-        this.noise = noise;
+        this.noises = noises;
+    }
+
+    addNoise() {
+        this.noises.push(new Outbound.FreedomSettings.Noise());
+    }
+
+    delNoise(index) {
+        this.noises.splice(index, 1);
     }
 
     static fromJson(json = {}) {
@@ -800,7 +808,7 @@ Outbound.FreedomSettings = class extends CommonClass {
             json.domainStrategy,
             json.redirect,
             json.fragment ? Outbound.FreedomSettings.Fragment.fromJson(json.fragment) : undefined,
-            json.noise ? Outbound.FreedomSettings.Noise.fromJson(json.noise) : undefined,
+            json.noises ? json.noises.map(noise => Outbound.FreedomSettings.Noise.fromJson(noise)) : [new Outbound.FreedomSettings.Noise()],
         );
     }
 
@@ -809,10 +817,11 @@ Outbound.FreedomSettings = class extends CommonClass {
             domainStrategy: ObjectUtil.isEmpty(this.domainStrategy) ? undefined : this.domainStrategy,
             redirect: this.redirect,
             fragment: Object.keys(this.fragment).length === 0 ? undefined : this.fragment,
-            noise: Object.keys(this.noise).length === 0 ? undefined : this.noise,
+            noises: Outbound.FreedomSettings.Noise.toJsonArray(this.noises),
         };
     }
 };
+
 Outbound.FreedomSettings.Fragment = class extends CommonClass {
     constructor(packets='1-3',length='',interval=''){
         super();
@@ -829,20 +838,40 @@ Outbound.FreedomSettings.Fragment = class extends CommonClass {
         );
     }
 };
+
 Outbound.FreedomSettings.Noise = class extends CommonClass {
-    constructor(packet = '', delay = '') {
+    constructor(
+        type = 'rand',
+        packet = '10-20',
+        delay = '10-16'
+    ) {
         super();
+        this.type = type;
         this.packet = packet;
         this.delay = delay;
     }
 
     static fromJson(json = {}) {
         return new Outbound.FreedomSettings.Noise(
+            json.type,
             json.packet,
             json.delay,
         );
     }
+
+    toJson() {
+        return {
+            type: this.type,
+            packet: this.packet,
+            delay: this.delay,
+        };
+    }
+
+    static toJsonArray(noises) {
+        return noises.map(noise => noise.toJson());
+    }
 };
+
 Outbound.BlackholeSettings = class extends CommonClass {
     constructor(type) {
         super();
diff --git a/web/assets/js/model/setting.js b/web/assets/js/model/setting.js
index dd7effe2..b1ef55ae 100644
--- a/web/assets/js/model/setting.js
+++ b/web/assets/js/model/setting.js
@@ -34,7 +34,7 @@ class AllSetting {
         this.subURI = "";
         this.subJsonURI = "";
         this.subJsonFragment = "";
-        this.subJsonNoise = "";
+        this.subJsonNoises = "";
         this.subJsonMux = "";
         this.subJsonRules = "";
 
diff --git a/web/entity/entity.go b/web/entity/entity.go
index 8975afd0..e49e3ef9 100644
--- a/web/entity/entity.go
+++ b/web/entity/entity.go
@@ -50,7 +50,7 @@ type AllSetting struct {
 	SubJsonPath      string `json:"subJsonPath" form:"subJsonPath"`
 	SubJsonURI       string `json:"subJsonURI" form:"subJsonURI"`
 	SubJsonFragment  string `json:"subJsonFragment" form:"subJsonFragment"`
-	SubJsonNoise     string `json:"subJsonNoise" form:"subJsonNoise"`
+	SubJsonNoises    string `json:"subJsonNoises" form:"subJsonNoises"`
 	SubJsonMux       string `json:"subJsonMux" form:"subJsonMux"`
 	SubJsonRules     string `json:"subJsonRules" form:"subJsonRules"`
 }
diff --git a/web/html/xui/form/outbound.html b/web/html/xui/form/outbound.html
index e37874bd..0bca0ff6 100644
--- a/web/html/xui/form/outbound.html
+++ b/web/html/xui/form/outbound.html
@@ -18,51 +18,66 @@
 <!-- freedom settings-->
 <template v-if="outbound.protocol === Protocols.Freedom">
     <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-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='Redirect'>
-        <a-input v-model="outbound.settings.redirect"></a-input>
-        </a-form-item>
+      <a-input v-model="outbound.settings.redirect"></a-input>
+    </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-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">
-        <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>
+      <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>
-    <a-form-item label='Noise'>
-        <a-switch
-            :checked="Object.keys(outbound.settings.noise).length >0"
-            @change="checked => outbound.settings.noise = checked ? new Outbound.FreedomSettings.Noise() : {}">
-        </a-switch>
-    </a-form-item>
-    <template v-if="Object.keys(outbound.settings.noise).length >0">
-    <a-form-item label='Packet'>
-        <a-input v-model.trim="outbound.settings.noise.packet"></a-input>
-    </a-form-item>
-    <a-form-item label='Delay'>
-        <a-input v-model.trim="outbound.settings.noise.delay"></a-input>
+
+    <!-- Switch for Noises -->
+    <a-form-item label='Noises'>
+      <a-switch :checked="outbound.settings.noises.length > 0"
+        @change="checked => outbound.settings.noises = checked ? [new Outbound.FreedomSettings.Noise()] : []">
+      </a-switch>
     </a-form-item>
+
+    <!-- Add Noise Button -->
+    <template v-if="outbound.settings.noises.length > 0">
+      <a-form-item label="Noises">
+        <a-button icon="plus" type="primary" size="small" @click="outbound.settings.addNoise()"></a-button>
+      </a-form-item>
+    
+    <!-- Noise Configurations -->
+      <a-form v-for="(noise, index) in outbound.settings.noises" :key="index" :colon="false" :label-col="{ md: {span:8} }"
+        :wrapper-col="{ md: {span:14} }">
+        <a-divider style="margin:0;"> Noise [[ index + 1 ]]
+          <a-icon v-if="outbound.settings.noises.length > 1" type="delete" @click="() => outbound.settings.delNoise(index)"
+            style="color: rgb(255, 77, 79); cursor: pointer;"></a-icon>
+        </a-divider>
+        <a-form-item label='Type'>
+          <a-select v-model="noise.type" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="s in ['rand','base64','str']" :value="s">[[ s ]]</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label='Packet'>
+          <a-input v-model.trim="noise.packet"></a-input>
+        </a-form-item>
+        <a-form-item label='Delay'>
+          <a-input v-model.trim="noise.delay"></a-input>
+        </a-form-item>
+      </a-form>
     </template>
-</template>
+  </template>
 
 <!-- blackhole settings -->
 <template v-if="outbound.protocol === Protocols.Blackhole">
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index acc45fab..b520034c 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -32,544 +32,769 @@
         border-bottom: 2px solid;
     }
 
-    .collapse-title > i {
+    .collapse-title>i {
         color: inherit;
         font-size: 24px;
     }
 </style>
+
 <body>
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-    {{ template "commonSider" . }}
-    <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-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">
-                                <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-col>
-                        </a-row>
-                    </a-card>
-                    <a-tabs default-active-key="1">
-                        <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelConfig"}}'>
-                            <a-list item-layout="horizontal">
-                                <a-list-item>
-                                    <a-row style="padding: 20px">
-                                        <a-col :lg="24" :xl="12">
-                                            <a-list-item-meta title='{{ i18n "pages.settings.remarkModel"}}'>
-                                                <template slot="description">{{ i18n "pages.settings.sampleRemark"}}: <i>#[[ remarkSample ]]</i></template>
-                                            </a-list-item-meta>
-                                        </a-col>
-                                        <a-col :lg="24" :xl="12">
-                                            <a-input-group style="width: 100%;">
-                                                <a-select style="padding-right: .5rem; min-width: 80%; width: auto;"
-                                                    mode="multiple"
-                                                    v-model="remarkModel"
-                                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                                    <a-select-option v-for="(value, key) in remarkModels" :value="key">[[ value ]]</a-select-option>
-                                                </a-select>
-                                                <a-select style="width: 20%;" v-model="remarkSeparator" :dropdown-class-name="themeSwitcher.currentTheme">
-                                                    <a-select-option v-for="key in remarkSeparators" :value="key">[[ key ]]</a-select-option>
-                                                </a-select>
-                                            </a-input-group>
-                                        </a-col>
-                                    </a-row>
-                                </a-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningIP"}}' desc='{{ i18n "pages.settings.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningDomain"}}' desc='{{ i18n "pages.settings.panelListeningDomainDesc"}}' v-model="allSetting.webDomain"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.settings.panelPort"}}' desc='{{ i18n "pages.settings.panelPortDesc"}}' v-model.number="allSetting.webPort"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.publicKeyPath"}}' desc='{{ i18n "pages.settings.publicKeyPathDesc"}}' v-model="allSetting.webCertFile"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.privateKeyPath"}}' desc='{{ i18n "pages.settings.privateKeyPathDesc"}}' v-model="allSetting.webKeyFile"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.panelUrlPath"}}' desc='{{ i18n "pages.settings.panelUrlPathDesc"}}' v-model="allSetting.webBasePath"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.settings.sessionMaxAge" }}' desc='{{ i18n "pages.settings.sessionMaxAgeDesc" }}'  v-model="allSetting.sessionMaxAge" :min="0"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.settings.pageSize" }}' desc='{{ i18n "pages.settings.pageSizeDesc" }}'  v-model="allSetting.pageSize" :min="0" :step="5"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.settings.expireTimeDiff" }}' desc='{{ i18n "pages.settings.expireTimeDiffDesc" }}'  v-model="allSetting.expireDiff" :min="0"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.settings.trafficDiff" }}' desc='{{ i18n "pages.settings.trafficDiffDesc" }}'  v-model="allSetting.trafficDiff" :min="0"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.timeZone"}}' desc='{{ i18n "pages.settings.timeZoneDesc"}}' v-model="allSetting.timeLocation"></setting-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
-                                                        ref="selectLang"
-                                                        v-model="lang"
-                                                        @change="setLang(lang)"
-                                                        style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
-                                                    <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>
-                                                    </a-select-option>
-                                                </a-select>
-                                            </template>
-                                        </a-col>
-                                    </a-row>
-                                </a-list-item>
-                             </a-list>
-                        </a-tab-pane>
-                        <a-tab-pane key="2" tab='{{ i18n "pages.settings.userSettings"}}'>
-                            <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-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>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.telegramToken"}}' desc='{{ i18n "pages.settings.telegramTokenDesc"}}'  v-model="allSetting.tgBotToken"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.telegramChatId"}}' desc='{{ i18n "pages.settings.telegramChatIdDesc"}}'  v-model="allSetting.tgBotChatId"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.telegramNotifyTime"}}' desc='{{ i18n "pages.settings.telegramNotifyTimeDesc"}}'  v-model="allSetting.tgRunTime"></setting-list-item>
-                                <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>
-                                <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"
-                                                    style="width: 100%"
-                                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                                    <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>
-                                                    </a-select-option>
-                                                </a-select>
-                                            </template>
-                                        </a-col>
-                                    </a-row>
-                                </a-list-item>
-                            </a-list>
-                        </a-tab-pane>
-                        <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}'>
-                            <a-list item-layout="horizontal">
-                                <setting-list-item type="switch" title='{{ i18n "pages.settings.subEnable"}}' desc='{{ i18n "pages.settings.subEnableDesc"}}' v-model="allSetting.subEnable"></setting-list-item>
-                                <setting-list-item type="switch" title='{{ i18n "pages.settings.subEncrypt"}}' desc='{{ i18n "pages.settings.subEncryptDesc"}}' v-model="allSetting.subEncrypt"></setting-list-item>
-                                <setting-list-item type="switch" title='{{ i18n "pages.settings.subShowInfo"}}' desc='{{ i18n "pages.settings.subShowInfoDesc"}}' v-model="allSetting.subShowInfo"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.subListen"}}' desc='{{ i18n "pages.settings.subListenDesc"}}' v-model="allSetting.subListen"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.subDomain"}}' desc='{{ i18n "pages.settings.subDomainDesc"}}' v-model="allSetting.subDomain"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.settings.subPort"}}' desc='{{ i18n "pages.settings.subPortDesc"}}' v-model.number="allSetting.subPort"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.subPath"}}' desc='{{ i18n "pages.settings.subPathDesc"}}' v-model="allSetting.subPath"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.subCertPath"}}' desc='{{ i18n "pages.settings.subCertPathDesc"}}' v-model="allSetting.subCertFile"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.subKeyPath"}}' desc='{{ i18n "pages.settings.subKeyPathDesc"}}' v-model="allSetting.subKeyFile"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.settings.subURI"}}' desc='{{ i18n "pages.settings.subURIDesc"}}' v-model="allSetting.subURI" placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
-                                <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>
-                                <setting-list-item type="switch" title='Noise' v-model="enableNoise"></setting-list-item>
-                                <setting-list-item type="switch" title='Mux' v-model="enableMux"></setting-list-item>
-                                <setting-list-item type="switch" title='{{ i18n "pages.xray.directCountryConfigs"}}' desc='{{ i18n "pages.xray.directCountryConfigsDesc"}}' v-model="enableDirect"></setting-list-item>
-                            </a-list>
-                            <a-collapse>
-                                <a-collapse-panel header='{{ i18n "pages.settings.fragment"}}' v-if="fragment">
-                                    <setting-list-item type="text" title='Packets' v-model="fragmentPackets" placeholder="1-1 | 1-3 | tlshello | ..."></setting-list-item>
-                                    <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>
-                                </a-collapse-panel>
-                                <a-collapse-panel header='Noise' v-if="enableNoise">
-                                    <setting-list-item type="text" title='Packet' v-model="noisePacket" placeholder="rand:5-10"></setting-list-item>
-                                    <setting-list-item type="text" title='Delay' v-model="noiseDelay" placeholder="5-10"></setting-list-item>
-                                </a-collapse-panel>
-                                <a-collapse-panel header='Mux' v-if="enableMux">                                    
-                                    <setting-list-item type="number" title='Concurrency' v-model="muxConcurrency" :min="-1" :max="1024"></setting-list-item>
-                                    <setting-list-item type="number" title='xudp Concurrency' v-model="muxXudpConcurrency" :min="-1" :max="1024"></setting-list-item>
-                                    <a-list-item style="padding: 20px">
-                                        <a-row>
+
+    <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+        {{ template "commonSider" . }}
+        <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-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">
+                                    <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-col>
+                            </a-row>
+                        </a-card>
+                        <a-tabs default-active-key="1">
+                            <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelConfig"}}'>
+                                <a-list item-layout="horizontal">
+                                    <a-list-item>
+                                        <a-row style="padding: 20px">
                                             <a-col :lg="24" :xl="12">
-                                                <a-list-item-meta title='xudp UDP 443'/>
+                                                <a-list-item-meta title='{{ i18n "pages.settings.remarkModel"}}'>
+                                                    <template slot="description">{{ i18n
+                                                        "pages.settings.sampleRemark"}}: <i>#[[ remarkSample
+                                                            ]]</i></template>
+                                                </a-list-item-meta>
                                             </a-col>
                                             <a-col :lg="24" :xl="12">
-                                                <a-select
-                                                    v-model="muxXudpProxyUDP443"
-                                                    style="width: 100%"
-                                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                                    <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']">
-                                                        [[ p ]]
-                                                    </a-select-option>
-                                                </a-select>
+                                                <a-input-group style="width: 100%;">
+                                                    <a-select style="padding-right: .5rem; min-width: 80%; width: auto;"
+                                                        mode="multiple" v-model="remarkModel"
+                                                        :dropdown-class-name="themeSwitcher.currentTheme">
+                                                        <a-select-option v-for="(value, key) in remarkModels"
+                                                            :value="key">[[ value ]]</a-select-option>
+                                                    </a-select>
+                                                    <a-select style="width: 20%;" v-model="remarkSeparator"
+                                                        :dropdown-class-name="themeSwitcher.currentTheme">
+                                                        <a-select-option v-for="key in remarkSeparators" :value="key">[[
+                                                            key ]]</a-select-option>
+                                                    </a-select>
+                                                </a-input-group>
                                             </a-col>
                                         </a-row>
                                     </a-list-item>
-                                </a-collapse-panel>
-                                <a-collapse-panel header='{{ i18n "pages.xray.directCountryConfigs"}}' v-if="enableDirect">
-                                    <a-list-item style="padding: 20px">
-                                        <a-checkbox-group
-                                        v-model="directCountries"
-                                        name="Countries"
-                                        :options="countryOptions"
-                                      />
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningIP"}}'
+                                        desc='{{ i18n "pages.settings.panelListeningIPDesc"}}'
+                                        v-model="allSetting.webListen"></setting-list-item>
+                                    <setting-list-item type="text"
+                                        title='{{ i18n "pages.settings.panelListeningDomain"}}'
+                                        desc='{{ i18n "pages.settings.panelListeningDomainDesc"}}'
+                                        v-model="allSetting.webDomain"></setting-list-item>
+                                    <setting-list-item type="number" title='{{ i18n "pages.settings.panelPort"}}'
+                                        desc='{{ i18n "pages.settings.panelPortDesc"}}'
+                                        v-model.number="allSetting.webPort"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.publicKeyPath"}}'
+                                        desc='{{ i18n "pages.settings.publicKeyPathDesc"}}'
+                                        v-model="allSetting.webCertFile"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.privateKeyPath"}}'
+                                        desc='{{ i18n "pages.settings.privateKeyPathDesc"}}'
+                                        v-model="allSetting.webKeyFile"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.panelUrlPath"}}'
+                                        desc='{{ i18n "pages.settings.panelUrlPathDesc"}}'
+                                        v-model="allSetting.webBasePath"></setting-list-item>
+                                    <setting-list-item type="number" title='{{ i18n "pages.settings.sessionMaxAge" }}'
+                                        desc='{{ i18n "pages.settings.sessionMaxAgeDesc" }}'
+                                        v-model="allSetting.sessionMaxAge" :min="0"></setting-list-item>
+                                    <setting-list-item type="number" title='{{ i18n "pages.settings.pageSize" }}'
+                                        desc='{{ i18n "pages.settings.pageSizeDesc" }}' v-model="allSetting.pageSize"
+                                        :min="0" :step="5"></setting-list-item>
+                                    <setting-list-item type="number" title='{{ i18n "pages.settings.expireTimeDiff" }}'
+                                        desc='{{ i18n "pages.settings.expireTimeDiffDesc" }}'
+                                        v-model="allSetting.expireDiff" :min="0"></setting-list-item>
+                                    <setting-list-item type="number" title='{{ i18n "pages.settings.trafficDiff" }}'
+                                        desc='{{ i18n "pages.settings.trafficDiffDesc" }}'
+                                        v-model="allSetting.trafficDiff" :min="0"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.timeZone"}}'
+                                        desc='{{ i18n "pages.settings.timeZoneDesc"}}'
+                                        v-model="allSetting.timeLocation"></setting-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 ref="selectLang" v-model="lang" @change="setLang(lang)"
+                                                        style="width: 100%"
+                                                        :dropdown-class-name="themeSwitcher.currentTheme">
+                                                        <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>
+                                                        </a-select-option>
+                                                    </a-select>
+                                                </template>
+                                            </a-col>
+                                        </a-row>
                                     </a-list-item>
-                                </a-collapse-panel>
-                            </a-collapse>
-                        </a-tab-pane>
-                    </a-tabs>
-                </a-space>
-            </a-spin>
-        </a-layout-content>
+                                </a-list>
+                            </a-tab-pane>
+                            <a-tab-pane key="2" tab='{{ i18n "pages.settings.userSettings"}}'>
+                                <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-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>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.telegramToken"}}'
+                                        desc='{{ i18n "pages.settings.telegramTokenDesc"}}'
+                                        v-model="allSetting.tgBotToken"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.telegramChatId"}}'
+                                        desc='{{ i18n "pages.settings.telegramChatIdDesc"}}'
+                                        v-model="allSetting.tgBotChatId"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.telegramNotifyTime"}}'
+                                        desc='{{ i18n "pages.settings.telegramNotifyTimeDesc"}}'
+                                        v-model="allSetting.tgRunTime"></setting-list-item>
+                                    <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>
+                                    <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"
+                                                        style="width: 100%"
+                                                        :dropdown-class-name="themeSwitcher.currentTheme">
+                                                        <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>
+                                                        </a-select-option>
+                                                    </a-select>
+                                                </template>
+                                            </a-col>
+                                        </a-row>
+                                    </a-list-item>
+                                </a-list>
+                            </a-tab-pane>
+                            <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}'>
+                                <a-list item-layout="horizontal">
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.subEnable"}}'
+                                        desc='{{ i18n "pages.settings.subEnableDesc"}}'
+                                        v-model="allSetting.subEnable"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.subEncrypt"}}'
+                                        desc='{{ i18n "pages.settings.subEncryptDesc"}}'
+                                        v-model="allSetting.subEncrypt"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.subShowInfo"}}'
+                                        desc='{{ i18n "pages.settings.subShowInfoDesc"}}'
+                                        v-model="allSetting.subShowInfo"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.subListen"}}'
+                                        desc='{{ i18n "pages.settings.subListenDesc"}}'
+                                        v-model="allSetting.subListen"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.subDomain"}}'
+                                        desc='{{ i18n "pages.settings.subDomainDesc"}}'
+                                        v-model="allSetting.subDomain"></setting-list-item>
+                                    <setting-list-item type="number" title='{{ i18n "pages.settings.subPort"}}'
+                                        desc='{{ i18n "pages.settings.subPortDesc"}}'
+                                        v-model.number="allSetting.subPort"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.subPath"}}'
+                                        desc='{{ i18n "pages.settings.subPathDesc"}}'
+                                        v-model="allSetting.subPath"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.subCertPath"}}'
+                                        desc='{{ i18n "pages.settings.subCertPathDesc"}}'
+                                        v-model="allSetting.subCertFile"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.subKeyPath"}}'
+                                        desc='{{ i18n "pages.settings.subKeyPathDesc"}}'
+                                        v-model="allSetting.subKeyFile"></setting-list-item>
+                                    <setting-list-item type="text" title='{{ i18n "pages.settings.subURI"}}'
+                                        desc='{{ i18n "pages.settings.subURIDesc"}}' v-model="allSetting.subURI"
+                                        placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
+                                    <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>
+                                    <a-list-item style="padding: 20px">
+                                        <a-row>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-list-item-meta title='{{ i18n "pages.settings.fragment"}}'>
+                                                    <template slot="description">{{ i18n
+                                                        "pages.settings.fragmentDesc"}}</template>
+                                                </a-list-item-meta>
+                                            </a-col>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-switch v-model="fragment"></a-switch>
+                                            </a-col>
+                                        </a-row>
+                                        <a-collapse v-if="fragment" style="margin-top: 14px;">
+                                            <a-collapse-panel header='{{ i18n "pages.settings.fragmentSett"}}'
+                                                v-if="fragment">
+                                                <setting-list-item style="padding: 10px 20px" type="text"
+                                                    title='Packets' v-model="fragmentPackets"
+                                                    placeholder="1-1 | 1-3 | tlshello | ..."></setting-list-item>
+                                                <setting-list-item style="padding: 10px 20px" type="text" title='Length'
+                                                    v-model="fragmentLength" placeholder="100-200"></setting-list-item>
+                                                <setting-list-item style="padding: 10px 20px" type="text"
+                                                    title='Interval' v-model="fragmentInterval"
+                                                    placeholder="10-20"></setting-list-item>
+                                            </a-collapse-panel>
+                                        </a-collapse>
+                                    </a-list-item>
+                                    <a-list-item style="padding: 20px">
+                                        <a-row>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-list-item-meta title='Noises'>
+                                                    <template slot="description">{{ i18n
+                                                        "pages.settings.noisesDesc"}}</template>
+                                                </a-list-item-meta>
+                                            </a-col>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-switch v-model="noises"></a-switch>
+                                            </a-col>
+                                        </a-row>
+                                        <a-collapse v-if="noises" style="margin-top: 14px;">
+                                            <a-collapse-panel v-for="(noise, index) in noisesArray" :key="index"
+                                                :header="`Noise ${index + 1}`">
+                                                <a-list-item style="padding: 10px 20px">
+                                                    <a-row>
+                                                        <a-col :lg="24" :xl="12">
+                                                            <a-list-item-meta title='Type'></a-list-item-meta>
+                                                        </a-col>
+                                                        <a-col :lg="24" :xl="12">
+                                                            <a-select :value="noise.type" style="width: 100%"
+                                                                :dropdown-class-name="themeSwitcher.currentTheme"
+                                                                @change="(value) => updateNoiseType(index, value)">
+                                                                <a-select-option :value="p" :label="p"
+                                                                    v-for="p in ['rand', 'base64', 'str']" :key="p">
+                                                                    [[ p ]] </a-select-option>
+                                                            </a-select>
+                                                        </a-col>
+                                                    </a-row>
+                                                </a-list-item>
+                                                <setting-list-item style="padding: 10px 20px" type="text" title='Packet'
+                                                    :value="noise.packet"
+                                                    @input="(value) => updateNoisePacket(index, value)"
+                                                    placeholder="5-10"></setting-list-item>
+                                                <setting-list-item style="padding: 10px 20px" type="text"
+                                                    title='Delay (ms)' :value="noise.delay"
+                                                    @input="(value) => updateNoiseDelay(index, value)"
+                                                    placeholder="10-20"></setting-list-item>
+                                                <a-button v-if="noisesArray.length > 1" type="danger"
+                                                    @click="removeNoise(index)">Remove</a-button>
+                                            </a-collapse-panel>
+                                        </a-collapse>
+                                        <a-button v-if="noises" type="primary" @click="addNoise"
+                                            style="margin-top: 10px">Add Noise</a-button>
+                                    </a-list-item>
+                                    <a-list-item style="padding: 20px">
+                                        <a-row>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-list-item-meta title='{{ i18n "pages.settings.mux"}}'>
+                                                    <template slot="description">{{ i18n
+                                                        "pages.settings.muxDesc"}}</template>
+                                                </a-list-item-meta>
+                                            </a-col>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-switch v-model="enableMux"></a-switch>
+                                            </a-col>
+                                        </a-row>
+                                        <a-collapse v-if="enableMux" style="margin-top: 14px;">
+                                            <a-collapse-panel header='{{ i18n "pages.settings.muxSett"}}'>
+                                                <setting-list-item style="padding: 10px 20px" type="number"
+                                                    title='Concurrency' v-model="muxConcurrency" :min="-1"
+                                                    :max="1024"></setting-list-item>
+                                                <setting-list-item style="padding: 10px 20px" type="number"
+                                                    title='xudp Concurrency' v-model="muxXudpConcurrency" :min="-1"
+                                                    :max="1024"></setting-list-item>
+                                                <a-list-item style="padding: 10px 20px">
+                                                    <a-row>
+                                                        <a-col :lg="24" :xl="12">
+                                                            <a-list-item-meta title='xudp UDP 443'></a-list-item-meta>
+                                                        </a-col>
+                                                        <a-col :lg="24" :xl="12">
+                                                            <a-select v-model="muxXudpProxyUDP443" style="width: 100%"
+                                                                :dropdown-class-name="themeSwitcher.currentTheme">
+                                                                <a-select-option :value="p" :label="p"
+                                                                    v-for="p in ['reject', 'allow', 'skip']"> [[ p ]]
+                                                                </a-select-option>
+                                                            </a-select>
+                                                        </a-col>
+                                                    </a-row>
+                                                </a-list-item>
+                                            </a-collapse-panel>
+                                        </a-collapse>
+                                    </a-list-item>
+                                    <a-list-item style="padding: 20px">
+                                        <a-row>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-list-item-meta title='{{ i18n "pages.settings.direct"}}'>
+                                                    <template slot="description">{{ i18n
+                                                        "pages.settings.directDesc"}}</template>
+                                                </a-list-item-meta>
+                                            </a-col>
+                                            <a-col :lg="24" :xl="12">
+                                                <a-switch v-model="enableDirect"></a-switch>
+                                            </a-col>
+                                        </a-row>
+                                        <a-collapse v-if="enableDirect" style="margin-top: 14px;">
+                                            <a-collapse-panel header='{{ i18n "pages.xray.directips"}}'>
+                                                <a-list-item style="padding: 10px 20px">
+                                                    <a-checkbox-group v-model="directIPs"
+                                                        :options="directIPsOptions"></a-checkbox-group>
+                                                </a-list-item>
+                                            </a-collapse-panel>
+                                            <a-collapse-panel header='{{ i18n "pages.xray.directdomains"}}'>
+                                                <a-list-item style="padding: 10px 20px">
+                                                    <a-checkbox-group v-model="directDomains"
+                                                        :options="diretDomainsOptions"></a-checkbox-group>
+                                                </a-list-item>
+                                            </a-collapse-panel>
+                                        </a-collapse>
+                                    </a-list-item>
+                                </a-list>
+                            </a-tab-pane>
+                        </a-tabs>
+                    </a-space>
+                </a-spin>
+            </a-layout-content>
+        </a-layout>
     </a-layout>
-</a-layout>
-{{template "js" .}}
-<script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
-{{template "component/themeSwitcher" .}}
-{{template "component/password" .}}
-{{template "component/setting"}}
-<script>
 
-    const app = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#app',
-        data: {
-            siderDrawer,
-            themeSwitcher,
-            spinning: false,
-            oldAllSetting: new AllSetting(),
-            allSetting: new AllSetting(),
-            saveBtnDisable: true,
-            user: {},
-            lang: getLang(),
-            remarkModels: {i:'Inbound',e:'Email',o:'Other'},
-            remarkSeparators: [' ','-','_','@',':','~','|',',','.','/'],
-            remarkSample: '',
-            defaultFragment: {
-                tag: "fragment",
-                protocol: "freedom",
-                settings: {
-                    domainStrategy: "AsIs",
-                    fragment: {
-                        packets: "tlshello",
-                        length: "100-200",
-                        interval: "10-20"
+    {{template "js" .}}
+    <script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
+    {{template "component/themeSwitcher" .}}
+    {{template "component/password" .}}
+    {{template "component/setting"}}
+
+    <script>
+        const app = new Vue({
+            delimiters: ['[[', ']]'],
+            el: '#app',
+            data: {
+                siderDrawer,
+                themeSwitcher,
+                spinning: false,
+                oldAllSetting: new AllSetting(),
+                allSetting: new AllSetting(),
+                saveBtnDisable: true,
+                user: {},
+                lang: getLang(),
+                remarkModels: { i: 'Inbound', e: 'Email', o: 'Other' },
+                remarkSeparators: [' ', '-', '_', '@', ':', '~', '|', ',', '.', '/'],
+                remarkSample: '',
+                defaultFragment: {
+                    tag: "fragment",
+                    protocol: "freedom",
+                    settings: {
+                        domainStrategy: "AsIs",
+                        fragment: {
+                            packets: "tlshello",
+                            length: "100-200",
+                            interval: "10-20"
+                        }
+                    },
+                    streamSettings: {
+                        sockopt: {
+                            tcpKeepAliveIdle: 100,
+                            tcpNoDelay: true
+                        }
                     }
                 },
-                streamSettings: {
-                    sockopt: {
-                        tcpKeepAliveIdle: 100,
-                        tcpNoDelay: true
-                    }
-                }
-            },
-            defaultNoise: {
-                tag: "noise",
-                protocol: "freedom",
-                settings: {
-                domainStrategy: "AsIs",
-                noise: {
-                    packet: "rand:5-10",
-                    delay: "5-10",
-                }
+                defaultNoises: {
+                    tag: "noises",
+                    protocol: "freedom",
+                    settings: {
+                        domainStrategy: "AsIs",
+                        noises: [
+                            { type: "rand", packet: "10-20", delay: "10-16" },
+                        ],
+                    },
                 },
-            },
-            defaultMux: {
-                enabled: true,
-                concurrency: 8,
-                xudpConcurrency: 16,
-                xudpProxyUDP443: "reject"
-            },
-            defaultRules: [
-                {
-                    type: "field",
-                    outboundTag: "direct",
-                    domain: [
-                        "geosite:category-ir",
-                        "geosite:cn"
-                    ],
-                    "enabled": true
+                defaultMux: {
+                    enabled: true,
+                    concurrency: 8,
+                    xudpConcurrency: 16,
+                    xudpProxyUDP443: "reject"
                 },
-                {
-                    type: "field",
-                    outboundTag: "direct",
-                    ip: [
-                        "geoip:private",
-                        "geoip:ir",
-                        "geoip:cn"
-                    ],
-                    enabled: true
+                defaultRules: [
+                    {
+                        type: "field",
+                        outboundTag: "direct",
+                        domain: [
+                            "geosite:category-ir",
+                            "geosite:cn"
+                        ],
+                        "enabled": true
+                    },
+                    {
+                        type: "field",
+                        outboundTag: "direct",
+                        ip: [
+                            "geoip:private",
+                            "geoip:ir",
+                            "geoip:cn"
+                        ],
+                        enabled: true
+                    },
+                ],
+                directIPsOptions: [
+                    { label: 'Private IP', value: 'private' },
+                    { label: '🇮🇷 Iran', value: 'ir' },
+                    { label: '🇨🇳 China', value: 'cn' },
+                    { label: '🇷🇺 Russia', value: 'ru' },
+                    { label: '🇻🇳 Vietnam', value: 'vn' },
+                    { label: '🇪🇸 Spain', value: 'es' },
+                    { label: '🇮🇩 Indonesia', value: 'id' },
+                    { label: '🇺🇦 Ukraine', value: 'ua' },
+                    { label: '🇹🇷 Türkiye', value: 'tr' },
+                    { label: '🇧🇷 Brazil', value: 'br' },
+                ],
+                diretDomainsOptions: [
+                    { label: '🇮🇷 Iran', value: 'ir' },
+                    { label: '🇨🇳 China', value: 'cn' },
+                    { label: '🇷🇺 Russia', value: 'ru' },
+                    { label: 'Apple', value: 'apple' },
+                    { label: 'Meta', value: 'meta' },
+                    { label: 'Google', value: 'google' },
+                ],
+                get remarkModel() {
+                    rm = this.allSetting.remarkModel;
+                    return rm.length > 1 ? rm.substring(1).split('') : [];
                 },
-            ],
-            countryOptions: [
-                { label: 'Private IP/Domain', value: 'private' },
-                { label: '🇮🇷 Iran', value: 'ir' },
-                { label: '🇨🇳 China', value: 'cn' },
-                { label: '🇷🇺 Russia', value: 'ru' },
-                { label: '🇻🇳 Vietnam', value: 'vn' },
-            ],
-            get remarkModel() {
-                rm = this.allSetting.remarkModel;
-                return rm.length>1 ? rm.substring(1).split('') : [];
-            },
-            set remarkModel(value) {
-                rs = this.allSetting.remarkModel[0];
-                this.allSetting.remarkModel = rs + value.join('');
-                this.changeRemarkSample();
-            },
-            get remarkSeparator() {
-                return this.allSetting.remarkModel.length > 1 ? this.allSetting.remarkModel.charAt(0) : '-';
-            },
-            set remarkSeparator(value) {
-                this.allSetting.remarkModel = value + this.allSetting.remarkModel.substring(1);
-                this.changeRemarkSample();
-            },
-            changeRemarkSample(){
-                sample = []
-                this.remarkModel.forEach(r => sample.push(this.remarkModels[r]));
-                this.remarkSample = sample.length == 0 ? '' : sample.join(this.remarkSeparator);
-            }
-        },
-        methods: {
-            loading(spinning = true) {
-                this.spinning = spinning;
-            },
-            async getAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/all");
-                this.loading(false);
-                if (msg.success) {
-                    this.oldAllSetting = new AllSetting(msg.obj);
-                    this.allSetting = new AllSetting(msg.obj);
-                    app.changeRemarkSample();
-                    this.saveBtnDisable = true;
+                set remarkModel(value) {
+                    rs = this.allSetting.remarkModel[0];
+                    this.allSetting.remarkModel = rs + value.join('');
+                    this.changeRemarkSample();
+                },
+                get remarkSeparator() {
+                    return this.allSetting.remarkModel.length > 1 ? this.allSetting.remarkModel.charAt(0) : '-';
+                },
+                set remarkSeparator(value) {
+                    this.allSetting.remarkModel = value + this.allSetting.remarkModel.substring(1);
+                    this.changeRemarkSample();
+                },
+                changeRemarkSample() {
+                    sample = []
+                    this.remarkModel.forEach(r => sample.push(this.remarkModels[r]));
+                    this.remarkSample = sample.length == 0 ? '' : sample.join(this.remarkSeparator);
                 }
             },
-            async updateAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/update", this.allSetting);
-                this.loading(false);
-                if (msg.success) {
-                    await this.getAllSetting();
-                }
-            },
-            async updateUser() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/updateUser", this.user);
-                this.loading(false);
-                if (msg.success) {
-                    this.user = {};
-                    window.location.replace(basePath + "logout");
-                }
-            },
-            async restartPanel() {
-                await new Promise(resolve => {
-                    this.$confirm({
-                        title: '{{ i18n "pages.settings.restartPanel" }}',
-                        content: '{{ i18n "pages.settings.restartPanelDesc" }}',
-                        class: themeSwitcher.currentTheme,
-                        okText: '{{ i18n "confirm" }}',
-                        cancelText: '{{ i18n "cancel" }}',
-                        onOk: () => resolve(),
-                    });
-                });
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/restartPanel");
-                this.loading(false);
-                if (msg.success) {
+            methods: {
+                loading(spinning = true) {
+                    this.spinning = spinning;
+                },
+                async getAllSetting() {
                     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;
-                    const isTLS = webCertFile !== "" || webKeyFile !== "";
-                    const url = buildURL({ host, port, isTLS, base, path: "xui/settings" });
-                    window.location.replace(url);
-                }
-            }
-        },
-        computed: {
-            fragment: {
-                get: function() { return this.allSetting?.subJsonFragment != ""; },
-                set: function (v) {
-                    this.allSetting.subJsonFragment = v ? JSON.stringify(this.defaultFragment) : "";
-                }
-            },
-            fragmentPackets: {
-                get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.packets : ""; },
-                set: function(v) {
-                    if (v != ""){
-                        newFragment = JSON.parse(this.allSetting.subJsonFragment);
-                        newFragment.settings.fragment.packets = v;
-                        this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+                    const msg = await HttpUtil.post("/xui/setting/all");
+                    this.loading(false);
+                    if (msg.success) {
+                        this.oldAllSetting = new AllSetting(msg.obj);
+                        this.allSetting = new AllSetting(msg.obj);
+                        app.changeRemarkSample();
+                        this.saveBtnDisable = true;
                     }
-                }
-            },
-            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);
-                    }
-                }
-            },
-            enableNoise: {
-                get: function () { return this.allSetting?.subJsonNoise != ""; },
-                set: function (v) {
-                    this.allSetting.subJsonNoise = v ? JSON.stringify(this.defaultNoise) : "";
-                }
-            },
-            noisePacket: {
-                get: function () { return this.enableNoise ? JSON.parse(this.allSetting.subJsonNoise).settings.noise.packet : ""; },
-                set: function (v) {
-                    if (v != "") {
-                        newNoise = JSON.parse(this.allSetting.subJsonNoise);
-                        newNoise.settings.noise.packet = v;
-                        this.allSetting.subJsonNoise = JSON.stringify(newNoise);
-                    }
-                }
-            },
-            noiseDelay: {
-                get: function () { return this.enableNoise ? JSON.parse(this.allSetting.subJsonNoise).settings.noise.delay : ""; },
-                set: function (v) {
-                    if (v != "") {
-                        newNoise = JSON.parse(this.allSetting.subJsonNoise);
-                        newNoise.settings.noise.delay = v;
-                        this.allSetting.subJsonNoise = JSON.stringify(newNoise);
-                    }
-                }
-            },
-            enableMux: {
-                get: function() { return this.allSetting?.subJsonMux != ""; },
-                set: function (v) {
-                    this.allSetting.subJsonMux = v ? JSON.stringify(this.defaultMux) : "";
-                }
-            },
-            muxConcurrency: {
-                get: function() { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).concurrency : -1; },
-                set: function(v) {
-                    newMux = JSON.parse(this.allSetting.subJsonMux);
-                    newMux.concurrency = v;
-                    this.allSetting.subJsonMux = JSON.stringify(newMux);
-                }
-            },
-            muxXudpConcurrency: {
-                get: function() { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpConcurrency : -1; },
-                set: function(v) {
-                    newMux = JSON.parse(this.allSetting.subJsonMux);
-                    newMux.xudpConcurrency = v;
-                    this.allSetting.subJsonMux = JSON.stringify(newMux);
-                }
-            },
-            muxXudpProxyUDP443: {
-                get: function() { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpProxyUDP443 : "reject"; },
-                set: function(v) {
-                    newMux = JSON.parse(this.allSetting.subJsonMux);
-                    newMux.xudpProxyUDP443 = v;
-                    this.allSetting.subJsonMux = JSON.stringify(newMux);
-                }
-            },
-            enableDirect: {
-                get: function() { return this.allSetting?.subJsonRules != ""; },
-                set: function (v) {
-                    this.allSetting.subJsonRules = v ? JSON.stringify(this.defaultRules) : "";
-                }
-            },
-            directCountries: {
-                get: function() {
-                    if (!this.enableDirect) return [];
-                    rules = JSON.parse(this.allSetting.subJsonRules);
-                    return Array.isArray(rules) ? rules[1].ip.map(d => d.replace("geoip:","")) : [];
                 },
-                set: function (v) {
-                    rules = JSON.parse(this.allSetting.subJsonRules);
-                    if (!Array.isArray(rules)) return;
-                    rules[0].domain = [];
-                    rules[1].ip = [];
-                    v.forEach(d => {
-                        category = ["cn","private"].includes(d) ? "" : "category-";
-                        rules[0].domain.push("geosite:"+category+d);
-                        rules[1].ip.push("geoip:"+d);
+                async updateAllSetting() {
+                    this.loading(true);
+                    const msg = await HttpUtil.post("/xui/setting/update", this.allSetting);
+                    this.loading(false);
+                    if (msg.success) {
+                        await this.getAllSetting();
+                    }
+                },
+                async updateUser() {
+                    this.loading(true);
+                    const msg = await HttpUtil.post("/xui/setting/updateUser", this.user);
+                    this.loading(false);
+                    if (msg.success) {
+                        this.user = {};
+                        window.location.replace(basePath + "logout");
+                    }
+                },
+                async restartPanel() {
+                    await new Promise(resolve => {
+                        this.$confirm({
+                            title: '{{ i18n "pages.settings.restartPanel" }}',
+                            content: '{{ i18n "pages.settings.restartPanelDesc" }}',
+                            class: themeSwitcher.currentTheme,
+                            okText: '{{ i18n "confirm" }}',
+                            cancelText: '{{ i18n "cancel" }}',
+                            onOk: () => resolve(),
+                        });
                     });
-                    this.allSetting.subJsonRules = JSON.stringify(rules);
+                    this.loading(true);
+                    const msg = await HttpUtil.post("/xui/setting/restartPanel");
+                    this.loading(false);
+                    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;
+                        const isTLS = webCertFile !== "" || webKeyFile !== "";
+                        const url = buildURL({ host, port, isTLS, base, path: "xui/settings" });
+                        window.location.replace(url);
+                    }
+                },
+                addNoise() {
+                    const newNoise = { type: "rand", packet: "10-20", delay: "10-16" };
+                    this.noisesArray = [...this.noisesArray, newNoise];
+                },
+                removeNoise(index) {
+                    const newNoises = [...this.noisesArray];
+                    newNoises.splice(index, 1);
+                    this.noisesArray = newNoises;
+                },
+                updateNoiseType(index, value) {
+                    const updatedNoises = [...this.noisesArray];
+                    updatedNoises[index] = { ...updatedNoises[index], type: value };
+                    this.noisesArray = updatedNoises;
+                },
+                updateNoisePacket(index, value) {
+                    const updatedNoises = [...this.noisesArray];
+                    updatedNoises[index] = { ...updatedNoises[index], packet: value };
+                    this.noisesArray = updatedNoises;
+                },
+                updateNoiseDelay(index, value) {
+                    const updatedNoises = [...this.noisesArray];
+                    updatedNoises[index] = { ...updatedNoises[index], delay: value };
+                    this.noisesArray = updatedNoises;
+                },
+            },
+            computed: {
+                fragment: {
+                    get: function () { return this.allSetting?.subJsonFragment != ""; },
+                    set: function (v) {
+                        this.allSetting.subJsonFragment = v ? JSON.stringify(this.defaultFragment) : "";
+                    }
+                },
+                fragmentPackets: {
+                    get: function () { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.packets : ""; },
+                    set: function (v) {
+                        if (v != "") {
+                            newFragment = JSON.parse(this.allSetting.subJsonFragment);
+                            newFragment.settings.fragment.packets = v;
+                            this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+                        }
+                    }
+                },
+                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);
+                        }
+                    }
+                },
+                noises: {
+                    get() {
+                        return this.allSetting?.subJsonNoises != "";
+                    },
+                    set(v) {
+                        if (v) {
+                            this.allSetting.subJsonNoises = JSON.stringify(this.defaultNoises);
+                        } else {
+                            this.allSetting.subJsonNoises = "";
+                        }
+                    }
+                },
+                noisesArray: {
+                    get() {
+                        return this.noises ? JSON.parse(this.allSetting.subJsonNoises).settings.noises : [];
+                    },
+                    set(value) {
+                        if (this.noises) {
+                            const newNoises = JSON.parse(this.allSetting.subJsonNoises);
+                            newNoises.settings.noises = value;
+                            this.allSetting.subJsonNoises = JSON.stringify(newNoises);
+                        }
+                    }
+                },
+                enableMux: {
+                    get: function () { return this.allSetting?.subJsonMux != ""; },
+                    set: function (v) {
+                        this.allSetting.subJsonMux = v ? JSON.stringify(this.defaultMux) : "";
+                    }
+                },
+                muxConcurrency: {
+                    get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).concurrency : -1; },
+                    set: function (v) {
+                        newMux = JSON.parse(this.allSetting.subJsonMux);
+                        newMux.concurrency = v;
+                        this.allSetting.subJsonMux = JSON.stringify(newMux);
+                    }
+                },
+                muxXudpConcurrency: {
+                    get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpConcurrency : -1; },
+                    set: function (v) {
+                        newMux = JSON.parse(this.allSetting.subJsonMux);
+                        newMux.xudpConcurrency = v;
+                        this.allSetting.subJsonMux = JSON.stringify(newMux);
+                    }
+                },
+                muxXudpProxyUDP443: {
+                    get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpProxyUDP443 : "reject"; },
+                    set: function (v) {
+                        newMux = JSON.parse(this.allSetting.subJsonMux);
+                        newMux.xudpProxyUDP443 = v;
+                        this.allSetting.subJsonMux = JSON.stringify(newMux);
+                    }
+                },
+                enableDirect: {
+                    get: function () { return this.allSetting?.subJsonRules != ""; },
+                    set: function (v) {
+                        this.allSetting.subJsonRules = v ? JSON.stringify(this.defaultRules) : "";
+                    }
+                },
+                directIPs: {
+                    get: function () {
+                        if (!this.enableDirect) return [];
+                        const rules = JSON.parse(this.allSetting.subJsonRules);
+                        return Array.isArray(rules) ? rules[1].ip.map(d => d.replace("geoip:", "")) : [];
+                    },
+                    set: function (v) {
+                        const rules = JSON.parse(this.allSetting.subJsonRules);
+                        if (!Array.isArray(rules)) return;
+
+                        rules[1].ip = [];
+                        v.forEach(d => {
+                            rules[1].ip.push("geoip:" + d);
+                        });
+                        this.allSetting.subJsonRules = JSON.stringify(rules);
+                    }
+                },
+                directDomains: {
+                    get: function () {
+                        if (!this.enableDirect) return [];
+                        const rules = JSON.parse(this.allSetting.subJsonRules);
+                        return Array.isArray(rules) ?
+                            rules[0].domain.map(d => {
+                                if (d.startsWith("geosite:category-")) {
+                                    return d.replace("geosite:category-", "");
+                                }
+                                return d.replace("geosite:", "");
+                            })
+                            : [];
+                    },
+                    set: function (v) {
+                        const rules = JSON.parse(this.allSetting.subJsonRules);
+                        if (!Array.isArray(rules)) return;
+
+                        rules[0].domain = [];
+                        v.forEach(d => {
+                            let category = '';
+                            if (["cn", "apple", "meta", "google"].includes(d)) {
+                                category = "";
+                            } else if (["ru", "ir"].includes(d)) {
+                                category = "category-";
+                            }
+                            rules[0].domain.push("geosite:" + category + d);
+                        });
+                        this.allSetting.subJsonRules = JSON.stringify(rules);
+                    }
+                },
+                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
+                    }
                 }
             },
-            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(1000);
+                    this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
                 }
             }
-        }, 
-        async mounted() {
-            await this.getAllSetting();
-            while (true) {
-                await PromiseUtil.sleep(1000);
-                this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
-            }
-        }
-    });
-</script>
+        });
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/web/service/setting.go b/web/service/setting.go
index 5e447554..eee59ed4 100644
--- a/web/service/setting.go
+++ b/web/service/setting.go
@@ -59,7 +59,7 @@ var defaultValueMap = map[string]string{
 	"subJsonPath":        "/json/",
 	"subJsonURI":         "",
 	"subJsonFragment":    "",
-	"subJsonNoise":       "",
+	"subJsonNoises":      "",
 	"subJsonMux":         "",
 	"subJsonRules":       "",
 	"warp":               "",
@@ -424,8 +424,8 @@ func (s *SettingService) GetSubJsonFragment() (string, error) {
 	return s.getString("subJsonFragment")
 }
 
-func (s *SettingService) GetSubJsonNoise() (string, error) {
-	return s.getString("subJsonNoise")
+func (s *SettingService) GetSubJsonNoises() (string, error) {
+	return s.getString("subJsonNoises")
 }
 
 func (s *SettingService) GetSubJsonMux() (string, error) {
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index 92495370..ae124080 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -298,6 +298,14 @@
 "subURIDesc" = "The subscription service will use the URI that has been set up behind reverse proxies."
 "fragment" = "Fragmentation"
 "fragmentDesc" = "Enable fragmentation for TLS hello packet"
+"fragmentSett" = "Fragmentation Settings"
+"noisesDesc" = "Enable Noises."
+"noisesSett" = "Noises Settings"
+"mux" = "Mux"
+"muxDesc" = "Transmit multiple independent data streams within an established data stream."
+"muxSett" = "Mux Settings"
+"direct" = "Direct Connection"
+"directDesc" = "Directly establishes connections with domains or IP ranges of a specific country."
 
 [pages.settings.toasts]
 "modifySettings" = "Modify Settings"
@@ -322,6 +330,10 @@
 "blockCountryConfigsDesc" = "These options will block traffic based on the specific requested country."
 "directCountryConfigs" = "Direct Country"
 "directCountryConfigsDesc" = "These options will directly forward traffic based on the specific requested country."
+"blockips" = "Block IPs"
+"blockdomains" = "Block Domains"
+"directips" = "Direct IPs"
+"directdomains" = "Direct Domains"
 "ipv4Configs" = "IPv4 Routing"
 "ipv4ConfigsDesc" = "These options will route traffic based on specific requested destination via server's IPv4."
 "warpConfigs" = "WARP Config"
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index ab27147b..b7872e81 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -297,6 +297,14 @@
 "subURIDesc" = "سابسکریپشن از لینکی که در پشت پراکسی‌های معکوس تنظیم شده‌، استفاده خواهدکرد"
 "fragment" = "تکه‌تکه شدن"
 "fragmentDesc" = "فعال کردن تکه تکه شدن برای بسته نخست تی‌ال‌اس"
+"fragmentSett" = "تنظیمات فرگمنت"
+"noisesDesc" = "فعال کردن Noises."
+"noisesSett" = "تنظیمات Noises"
+"mux" = "ماکس"
+"muxDesc" = "چندین جریان داده مستقل را در یک جریان داده ثابت منتقل می کند"
+"muxSett" = "تنظیمات ماکس"
+"direct" = "اتصال مستقیم"
+"directDesc" = "به طور مستقیم با دامنه ها یا محدوده آی‌پی یک کشور خاص ارتباط برقرار می کند"
 
 [pages.settings.toasts]
 "modifySettings" = "ویرایش تنظیمات"
@@ -321,6 +329,10 @@
 "blockCountryConfigsDesc" = "این گزینه‌ها ترافیک را بر اساس کشور درخواستی خاص مسدود می‌کند"
 "directCountryConfigs" = "اتصال مستقیم کشور"
 "directCountryConfigsDesc" = "این گزینه‌ها ترافیک را بر اساس کشور درخواستی خاص بصورت مستقیم ارسال می‌کند"
+"blockips" = "مسدود کردن آی‌پی‌ها"
+"blockdomains" = "مسدود کردن دامنه‌ها"
+"directips" = "آی‌پی‌های مستقیم"
+"directdomains" = "دامنه‌های مستقیم"
 "ipv4Configs" = "IPv4 مسیریابی"
 "ipv4ConfigsDesc" = "این گزینه‌ها ترافیک را از طریق آی‌پی نسخه4 سرور، به مقصد هدایت می‌کند"
 "warpConfigs" = "WARP تنظمیات"
diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index fb2dea09..422f76f0 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -298,6 +298,14 @@
 "subURIDesc" = "Изменить базовый URI URL-адреса подписки для использования за прокси-серверами"
 "fragment" = "Фрагментация"
 "fragmentDesc" = "Включить фрагментацию для пакета приветствия TLS"
+"fragmentSett" = "Настройки фрагментации"
+"noisesDesc" = "Включить Noises."
+"noisesSett" = "Настройки Noises"
+"mux" = "Mux"
+"muxDesc" = "Передача нескольких независимых потоков данных в рамках установленного потока данных."
+"muxSett" = "Mux Настройки"
+"direct" = "Прямая связь"
+"directDesc" = "Напрямую устанавливает соединения с доменами или диапазонами IP конкретной страны."
 
 [pages.settings.toasts]
 "modifySettings" = "Изменение настроек"
@@ -322,6 +330,10 @@
 "blockCountryConfigsDesc" = "Эти параметры не позволят пользователям подключаться к доменам определенной страны."
 "directCountryConfigs" = "Прямые настройки стран"
 "directCountryConfigsDesc" = "Эти параметры будут подключать пользователей напрямую к доменам определенной страны."
+"blockips" = "Блокировать IP"
+"blockdomains" = "Блокировать домены"
+"directips" = "Прямые IP"
+"directdomains" = "Прямые домены"
 "ipv4Configs" = "Настройки IPv4"
 "ipv4ConfigsDesc" = "Эти параметры будут маршрутизироваться к целевым доменам только через IPv4"
 "warpConfigs" = "Настройки WARP"
diff --git a/web/translation/translate.vi_VN.toml b/web/translation/translate.vi_VN.toml
index 2ad27001..29f5108e 100644
--- a/web/translation/translate.vi_VN.toml
+++ b/web/translation/translate.vi_VN.toml
@@ -298,6 +298,14 @@
 "subURIDesc" = "Thay đổi URI cơ sở của URL đăng ký để sử dụng ở phía sau proxy"
 "fragment" = "Sự phân mảnh"
 "fragmentDesc" = "Kích hoạt phân mảnh cho gói TLS hello"
+"fragmentSett" = "Cài đặt phân mảnh"
+"noisesDesc" = "Bật Noises."
+"noisesSett" = "Cài đặt Noises"
+"mux" = "Mux"
+"muxDesc" = "Truyền nhiều luồng dữ liệu độc lập trong luồng dữ liệu đã thiết lập."
+"muxSett" = "Mux Cài đặt"
+"direct" = "Kết nối trực tiếp"
+"directDesc" = "Trực tiếp thiết lập kết nối với tên miền hoặc dải IP của một quốc gia cụ thể."
 
 [pages.settings.toasts]
 "modifySettings" = "Sửa đổi cài đặt"
@@ -322,6 +330,10 @@
 "blockCountryConfigsDesc" = "Những tùy chọn này sẽ ngăn người dùng kết nối đến các tên miền quốc gia cụ thể."
 "directCountryConfigs" = "Cấu hình Kết nối Trực tiếp Quốc gia"
 "directCountryConfigsDesc" = "Những tùy chọn này sẽ kết nối người dùng trực tiếp đến các tên miền quốc gia cụ thể."
+"blockips" = "Chặn IP"
+"blockdomains" = "Chặn Tên Miền"
+"directips" = "IP Trực Tiếp"
+"directdomains" = "Tên Miền Trực Tiếp"
 "ipv4Configs" = "Cấu hình IPv4"
 "ipv4ConfigsDesc" = "Những tùy chọn này sẽ chỉ định kết nối đến các tên miền mục tiêu qua IPv4."
 "warpConfigs" = "Cấu hình WARP"
diff --git a/web/translation/translate.zh_Hans.toml b/web/translation/translate.zh_Hans.toml
index e5a1ef89..0d8ad4e1 100644
--- a/web/translation/translate.zh_Hans.toml
+++ b/web/translation/translate.zh_Hans.toml
@@ -298,6 +298,14 @@
 "subURIDesc" = "更改订阅 URL 的基本 URI 以在代理后面使用"
 "fragment" = "碎片"
 "fragmentDesc" = "启用 TLS hello 数据包分段"
+"fragmentSett" = "设置"
+"noisesDesc" = "启用 Noises."
+"noisesSett" = "Noises 设置"
+"mux" = "多路复用器"
+"muxDesc" = "在已建立的数据流内传输多个独立的数据流"
+"muxSett" = "复用器设置"
+"direct" = "直接连接"
+"directDesc" = "直接与特定国家的域或IP范围建立连接"
 
 [pages.settings.toasts]
 "modifySettings" = "修改设置"
@@ -322,6 +330,10 @@
 "blockCountryConfigsDesc" = "这些选项将禁止用户连接到特定国家/地区的域。"
 "directCountryConfigs" = "直连国家配置"
 "directCountryConfigsDesc" = "这些选项会将用户直接连接到特定国家/地区的域。"
+"blockips" = "阻止IP"
+"blockdomains" = "阻止域名"
+"directips" = "直接IP"
+"directdomains" = "直接域名"
 "ipv4Configs" = "IPv4 配置"
 "ipv4ConfigsDesc" = "此选项将仅通过 IPv4 路由到目标域"
 "warpConfigs" = "WARP 配置"