diff --git a/web/controller/xraySetting.go b/web/controller/xraySetting.go
index d244d030..a4c8b600 100644
--- a/web/controller/xraySetting.go
+++ b/web/controller/xraySetting.go
@@ -9,6 +9,7 @@ import (
 type XraySettingController struct {
 	XraySettingService service.XraySettingService
 	SettingService     service.SettingService
+	InboundService     service.InboundService
 }
 
 func NewXraySettingController(g *gin.RouterGroup) *XraySettingController {
@@ -31,7 +32,13 @@ func (a *XraySettingController) getXraySetting(c *gin.Context) {
 		jsonMsg(c, I18nWeb(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
-	jsonObj(c, xraySetting, nil)
+	inboundTags, err := a.InboundService.GetInboundTags()
+	if err != nil {
+		jsonMsg(c, I18nWeb(c, "pages.settings.toasts.getSettings"), err)
+		return
+	}
+	xrayResponse := "{ \"xraySetting\": " + xraySetting + ", \"inboundTags\": " + inboundTags + " }"
+	jsonObj(c, xrayResponse, nil)
 }
 
 func (a *XraySettingController) updateSetting(c *gin.Context) {
diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index a6b562ab..39990922 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -88,7 +88,7 @@
                             </a-col>
                         </a-row>
                     </a-card>
-                    <a-tabs default-active-key="1" @change="(activeKey) => { if(activeKey == 'tpl-2') this.changeCode(); }">
+                    <a-tabs default-active-key="1" @change="(activeKey) => { if(activeKey == 'tpl-3') this.changeCode(); }">
                         <a-tab-pane key="tpl-1" tab='{{ i18n "pages.xray.basicTemplate"}}' style="padding-top: 20px;">
                             <a-collapse>
                                 <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
@@ -201,7 +201,116 @@
                                 </a-collapse-panel>
                             </a-collapse>
                         </a-tab-pane>
-                        <a-tab-pane key="tpl-2" tab='{{ i18n "pages.xray.advancedTemplate"}}' style="padding-top: 20px;" force-render="true">
+                        <a-tab-pane key="tpl-2" tab='{{ i18n "pages.xray.Routings"}}' style="padding-top: 20px;">
+                            <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
+                            message='{{ i18n "pages.xray.RoutingsDesc"}}' show-icon></a-alert>
+                            <a-button type="primary" icon="plus" @click="addRule">{{ i18n "pages.xray.rules.add" }}</a-button>
+                            <a-table :columns="isMobile ? rulesMobileColumns : rulesColumns" bordered
+                                :row-key="rule => rule.key"
+                                :data-source="routingRuleData"
+                                :scroll="isMobile ? {} : { x: 1000 }"
+                                :pagination="false"
+                                :indent-size="0"
+                                :style="isMobile ? 'padding: 5px 0' : 'margin-top: 10px;'">
+                                <template slot="action" slot-scope="text, rule, index">
+                                    [[ index+1 ]]
+                                    <a-dropdown :trigger="['click']">
+                                        <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 16px; text-decoration: bold;"></a-icon>
+                                        <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
+                                            <a-menu-item v-if="index>0" @click="replaceRule(index,0)">
+                                                <a-icon type="vertical-align-top"></a-icon>
+                                                {{ i18n "pages.xray.rules.first"}}
+                                            </a-menu-item>
+                                            <a-menu-item v-if="index>0" @click="replaceRule(index,index-1)">
+                                                <a-icon type="arrow-up"></a-icon>
+                                                {{ i18n "pages.xray.rules.up"}}
+                                            </a-menu-item>
+                                            <a-menu-item v-if="index<routingRuleData.length-1" @click="replaceRule(index,index+1)">
+                                                <a-icon type="arrow-down"></a-icon>
+                                                {{ i18n "pages.xray.rules.down"}}
+                                            </a-menu-item>
+                                            <a-menu-item v-if="index<routingRuleData.length-1" @click="replaceRule(index,routingRuleData.length-1)">
+                                                <a-icon type="vertical-align-bottom"></a-icon>
+                                                {{ i18n "pages.xray.rules.last"}}
+                                            </a-menu-item>
+                                            <a-menu-item @click="editRule(index)">
+                                                <a-icon type="edit"></a-icon>
+                                                {{ i18n "edit" }}
+                                            </a-menu-item>
+                                            <a-menu-item @click="deleteRule(index)">
+                                                <span style="color: #FF4D4F">
+                                                    <a-icon type="delete"></a-icon> {{ i18n "delete"}}
+                                                </span>
+                                            </a-menu-item>
+                                        </a-menu>
+                                    </a-dropdown>
+                                </template>
+                                <template slot="inbound" slot-scope="text, rule, index">
+                                    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template slot="content">
+                                            <p v-if="rule.inboundTag">Inbound Tag: [[ rule.inboundTag ]]</p>
+                                            <p v-if="rule.user">User email: [[ rule.user ]]</p>
+                                        </template>
+                                        [[ [rule.inboundTag,rule.user].join('\n') ]]
+                                    </a-popover>
+                                </template>
+                                <template slot="outbound" slot-scope="text, rule, index">
+                                    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template slot="content">
+                                            <p v-if="rule.outboundTag">Outbound Tag: [[ rule.outboundTag ]]</p>
+                                        </template>
+                                        [[ rule.outboundTag ]]
+                                    </a-popover>
+                                </template>
+                                <template slot="info" slot-scope="text, rule, index">
+                                    <a-popover placement="bottomRight"
+                                        v-if="(rule.source+rule.sourcePort+rule.network+rule.protocol+rule.attrs+rule.ip+rule.domain+rule.port).length>0"
+                                        :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
+                                        <template slot="content">
+                                            <table cellpadding="2" style="max-width: 300px;">
+                                                <tr v-if="rule.source">
+                                                    <td>Source</td>
+                                                    <td><a-tag color="blue" v-for="r in rule.source.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                                <tr v-if="rule.sourcePort">
+                                                    <td>Source Port</td>
+                                                    <td><a-tag color="green" v-for="r in rule.sourcePort.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                                <tr v-if="rule.network">
+                                                    <td>Network</td>
+                                                    <td><a-tag color="blue" v-for="r in rule.network.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                                <tr v-if="rule.protocol">
+                                                    <td>Protocol</td>
+                                                    <td><a-tag color="green" v-for="r in rule.protocol.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                                <tr v-if="rule.attrs">
+                                                    <td>Attrs</td>
+                                                    <td><a-tag color="blue" v-for="r in rule.attrs.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                                <tr v-if="rule.ip">
+                                                    <td>IP</td>
+                                                    <td><a-tag color="green" v-for="r in rule.ip.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                                <tr v-if="rule.domain">
+                                                    <td>Domain</td>
+                                                    <td><a-tag color="blue" v-for="r in rule.domain.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                                <tr v-if="rule.port">
+                                                    <td>Port</td>
+                                                    <td><a-tag color="green" v-for="r in rule.port.split(',')">[[ r ]]</a-tag></td>
+                                                </tr>
+                                            </table>
+                                        </template>
+                                        <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;">
+                                            <a-icon type="info"></a-icon>
+                                        </a-button>
+                                    </a-popover>
+                                </template>
+                            </a-table>
+                        </a-tab-pane>
+                        <a-tab-pane key="tpl-3" tab='{{ i18n "pages.xray.Outbounds"}}' style="padding-top: 20px;" force-render="true"></a-tab-pane>
+                        <a-tab-pane key="tpl-4" tab='{{ i18n "pages.xray.advancedTemplate"}}' style="padding-top: 20px;" force-render="true">
                             <a-list-item-meta title='{{ i18n "pages.xray.Template"}}' description='{{ i18n "pages.xray.TemplateDesc"}}'></a-list-item-meta>
                             <a-radio-group v-model="advSettings" @change="changeCode" button-style="solid" style="margin: 10px 0;" :size="isMobile ? 'small' : ''">
                                 <a-radio-button value="xraySetting">{{ i18n "pages.xray.completeTemplate"}}</a-radio-button>
@@ -220,7 +329,33 @@
 {{template "js" .}}
 {{template "component/themeSwitcher" .}}
 {{template "component/setting"}}
+{{template "ruleModal"}}
 <script>
+    const rulesColumns = [
+        { title: "#", align: 'center', width: 10, scopedSlots: { customRender: 'action' } },
+        { title: '{{ i18n "pages.xray.rules.source"}}', children: [
+            { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true },
+            { title: 'port', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true } ]},
+        { title: '{{ i18n "pages.inbounds.network"}}', children: [
+            { title: 'L4', dataIndex: 'network', align: 'center', width: 10 },
+            { title: 'Protocol', dataIndex: 'protocol', align: 'center', width: 10, ellipsis: true },
+            { title: 'Attrs', dataIndex: 'attrs', align: 'center', width: 20, ellipsis: true } ]}, 
+        { title: '{{ i18n "pages.xray.rules.dest"}}', children: [
+            { title: 'IP', dataIndex: 'ip', align: 'center', width: 20, ellipsis: true },
+            { title: 'Domain', dataIndex: 'domain', align: 'center', width: 20, ellipsis: true },
+            { title: 'Port', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]},
+        { title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
+            { title: 'Inbound Tag', dataIndex: 'inboundTag', align: 'center', width: 20, ellipsis: true },
+            { title: 'User email', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
+        { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 20 },
+    ];
+
+    const rulesMobileColumns = [
+        { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
+        { title: '{{ i18n "pages.xray.rules.inbound"}}', align: 'center', width: 30, ellipsis: true, scopedSlots: { customRender: 'inbound' } },
+        { title: '{{ i18n "pages.xray.rules.outbound"}}', align: 'center', width: 30, ellipsis: true, scopedSlots: { customRender: 'outbound' } },
+        { title: '{{ i18n "pages.xray.rules.info"}}', align: 'center', width: 20, ellipsis: true, scopedSlots: { customRender: 'info' } },
+    ];
 
     const app = new Vue({
         delimiters: ['[[', ']]'],
@@ -232,6 +367,7 @@
             spinning: false,
             oldXraySetting: '',
             xraySetting: '',
+            inboundTags: [],
             saveBtnDisable: true,
             showAlert: false,
             isMobile: window.innerWidth <= 768,
@@ -323,8 +459,11 @@
                 const msg = await HttpUtil.post("/xui/xray/");
                 this.loading(false);
                 if (msg.success) {
-                    this.oldXraySetting = msg.obj;
-                    this.xraySetting = msg.obj;
+                    result = JSON.parse(msg.obj);
+                    xs = JSON.stringify(result.xraySetting, null, 2);
+                    this.oldXraySetting = xs;
+                    this.xraySetting = xs;
+                    this.inboundTags = result.inboundTags;
                     this.saveBtnDisable = true;
                 }
             },
@@ -449,6 +588,47 @@
                     return false;
                 }
                 return true;
+            },
+            addRule(){
+                ruleModal.show({
+                    title: '{{ i18n "pages.xray.rules.add"}}',
+                    okText: '{{ i18n "pages.xray.rules.add" }}',
+                    confirm: (rule) => {
+                        ruleModal.loading();
+                        if(JSON.stringify(rule).length > 3){
+                            this.templateSettings.routing.rules.push(rule);
+                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+                        }
+                        ruleModal.close();
+                    },
+                    isEdit: false
+                });
+            },
+            editRule(index){
+                ruleModal.show({
+                    title: '{{ i18n "pages.xray.rules.edit"}} ' + (index+1),
+                    rule: app.templateSettings.routing.rules[index],
+                    confirm: (rule) => {
+                        ruleModal.loading();
+                        if(JSON.stringify(rule).length > 3){
+                            this.templateSettings.routing.rules[index] = rule;
+                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+                        }
+                        ruleModal.close();
+                    },
+                    isEdit: true
+                });
+            },
+            replaceRule(old_index,new_index){
+                rules = this.templateSettings.routing.rules;
+                if (new_index >= rules.length) rules.push(undefined);
+                rules.splice(new_index, 0, rules.splice(old_index, 1)[0]);
+                this.routingRuleSettings = JSON.stringify(rules);
+            },
+            deleteRule(index){
+                rules = this.templateSettings.routing.rules;
+                rules.splice(index,1);
+                this.routingRuleSettings = JSON.stringify(rules);
             }
         },
         async mounted() {
@@ -490,6 +670,27 @@
                     this.templateSettings = newTemplateSettings;
                 },
             },
+            routingRuleData: {
+                get: function () {
+                    data = [];
+                    if (this.templateSettings != null) {
+                        this.templateSettings.routing.rules.forEach((r, index) => {
+                            data.push({'key': index, ...r});
+                        });
+                        // Make rules readable
+                        data.forEach(r => {
+                            if(r.domain) r.domain = r.domain.join(',')
+                            if(r.ip) r.ip = r.ip.join(',')
+                            if(r.source) r.source = r.source.join(',');
+                            if(r.user) r.user = r.user.join(',')
+                            if(r.inboundTag) r.inboundTag = r.inboundTag.join(',')
+                            if(r.protocol) r.protocol = r.protocol.join(',')
+                            if(r.attrs) r.attrs = JSON.stringify(r.attrs, null, 2)
+                        });
+                    }
+                    return data;
+                }
+            },
             freedomStrategy: {
                 get: function () {
                     if (!this.templateSettings) return "AsIs";
@@ -571,26 +772,6 @@
                     this.syncRulesWithOutbound("IPv4", this.ipv4Settings);
                 }
             },
-            manualBlockedIPs: {
-                get: function () { return JSON.stringify(this.blockedIPs, null, 2); },
-                set: debounce(function (value) { this.blockedIPs = JSON.parse(value); }, 1000)
-            },
-            manualBlockedDomains: {
-                get: function () { return JSON.stringify(this.blockedDomains, null, 2); },
-                set: debounce(function (value) { this.blockedDomains = JSON.parse(value); }, 1000)
-            },
-            manualDirectIPs: {
-                get: function () { return JSON.stringify(this.directIPs, null, 2); },
-                set: debounce(function (value) { this.directIPs = JSON.parse(value); }, 1000)
-            },
-            manualDirectDomains: {
-                get: function () { return JSON.stringify(this.directDomains, null, 2); },
-                set: debounce(function (value) { this.directDomains = JSON.parse(value); }, 1000)
-            },
-            manualIPv4Domains: {
-                get: function () { return JSON.stringify(this.ipv4Domains, null, 2); },
-                set: debounce(function (value) { this.ipv4Domains = JSON.parse(value); }, 1000)
-            },
             torrentSettings: {
                 get: function () {
                     return doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
diff --git a/web/html/xui/xray_rule_modal.html b/web/html/xui/xray_rule_modal.html
new file mode 100644
index 00000000..6f136f25
--- /dev/null
+++ b/web/html/xui/xray_rule_modal.html
@@ -0,0 +1,273 @@
+{{define "ruleModal"}}
+<a-modal id="rule-modal" v-model="ruleModal.visible" :title="ruleModal.title" @ok="ruleModal.ok"
+         :confirm-loading="ruleModal.confirmLoading" :closable="true" :mask-closable="false"
+         :ok-text="ruleModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
+    <a-form layout="inline">
+    <table width="100%" class="ant-table-tbody">
+        <tr>
+            <td>Domain Matcher</td>
+            <td>
+                <a-form-item>
+                    <a-select v-model="ruleModal.rule.domainMatcher" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option v-for="dm in ['','hybrid','linear']" :value="dm">[[ dm ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Source IPs
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="ruleModal.rule.source" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Source Port
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="ruleModal.rule.sourcePort" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Network</td>
+            <td>
+                <a-form-item>
+                    <a-select v-model="ruleModal.rule.network" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option v-for="x in ['','tcp','tdp','tcp,udp']" :value="x">[[ x ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Protocol</td>
+            <td>
+                <a-form-item>
+                    <a-select v-model="ruleModal.rule.protocol" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option v-for="x in ['','http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <a-form-item>
+                    <span>Attributes</span>
+                    <a-button size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])">+</a-button>
+                    <a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
+                        <a-input style="width: 50%" v-model="attr[0]" placeholder='{{ i18n "pages.inbounds.stream.general.name" }}'>
+                            <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+                        </a-input>
+                        <a-input style="width: 50%" v-model="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+                            <a-button slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)">-</a-button>
+                        </a-input>
+                    </a-input-group>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>IP
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="ruleModal.rule.ip" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Domain
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="ruleModal.rule.domain" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Port
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </td>
+            <td>
+                <a-form-item>
+                    <a-input v-model.trim="ruleModal.rule.port" style="width: 250px"></a-input>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Inbound Tags</td>
+            <td>
+                <a-form-item>
+                    <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+        <tr>
+            <td>Outbound Tag</td>
+            <td>
+                <a-form-item>
+                    <a-select v-model="ruleModal.rule.outboundTag" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+            </td>
+        </tr>
+    </table>
+    </a-form>
+</a-modal>
+<script>
+
+    const ruleModal = {
+        title: '',
+        visible: false,
+        confirmLoading: false,
+        okText: '{{ i18n "sure" }}',
+        isEdit: false,
+        confirm: null,
+        rule: {
+            domainMatcher: "",
+            domain: "",
+            ip: "",
+            port: "",
+            sourcePort: "",
+            network: "",
+            source: "",
+            user: "",
+            inboundTag: [],
+            protocol: [],
+            attrs: [],
+            outboundTag: "",
+        },
+        inboundTags: [],
+        outboundTags: [],
+        users: [],
+        balancerTag: [],
+        ok() {
+            newRule = ruleModal.getResult();
+            ObjectUtil.execute(ruleModal.confirm, newRule);
+        },
+        show({ title='', okText='{{ i18n "sure" }}', rule, confirm=(rule)=>{}, isEdit=false  }) {
+            this.title = title;
+            this.okText = okText;
+            this.confirm = confirm;
+            this.visible = true;
+            if(isEdit) {
+                this.rule.domainMatcher = rule.domainMatcher;
+                this.rule.domain = rule.domain ? rule.domain.join(',') : [];
+                this.rule.ip = rule.ip ? rule.ip.join(',') : [];
+                this.rule.port = rule.port;
+                this.rule.sourcePort = rule.sourcePort;
+                this.rule.network = rule.network;
+                this.rule.source = rule.source ? rule.source.join(',') : [];
+                this.rule.user = rule.user ? rule.user.join(',') : [];
+                this.rule.inboundTag = rule.inboundTag;
+                this.rule.protocol = rule.protocol;
+                this.rule.attrs = rule.attrs ? Object.entries(rule.attrs) : [];
+                this.rule.outboundTag = rule.outboundTag;
+            } else {
+                this.rule = {
+                    domainMatcher: "",
+                    domain: "",
+                    ip: "",
+                    port: "",
+                    sourcePort: "",
+                    network: "",
+                    source: "",
+                    user: "",
+                    inboundTag: [],
+                    protocol: [],
+                    attrs: [],
+                    outboundTag: "",
+                }
+            }
+            this.isEdit = isEdit;
+            this.inboundTags = app.templateSettings.inbounds.map(obj => obj.tag);
+            this.inboundTags.push(...app.inboundTags);
+            this.outboundTags = app.templateSettings.outbounds.map(obj => obj.tag);
+        },
+        close() {
+            ruleModal.visible = false;
+            ruleModal.loading(false);
+        },
+        loading(loading) {
+            ruleModal.confirmLoading = loading;
+        },
+        getResult() {
+            value = ruleModal.rule;
+            rule = {};
+            newRule = {};
+            rule.domainMatcher = value.domainMatcher;
+            rule.domain = value.domain.length>0 ? value.domain.split(',') : [];
+            rule.ip = value.ip.length>0 ? value.ip.split(',') : [];
+            rule.port = value.port;
+            rule.sourcePort = value.sourcePort;
+            rule.network = value.network;
+            rule.source = value.source.length>0 ? value.source.split(',') : [];
+            rule.user = value.user.length>0 ? value.user.split(',') : [];
+            rule.inboundTag = value.inboundTag;
+            rule.protocol = value.protocol;
+            rule.attrs = Object.fromEntries(value.attrs);
+            rule.outboundTag = value.outboundTag;
+
+            for (const [key, value] of Object.entries(rule)) {
+                if (
+                value !== null &&
+                value !== undefined &&
+                !(Array.isArray(value) && value.length === 0) &&
+                !(typeof value === 'object' && Object.keys(value).length === 0) &&
+                value !== ''
+                ) {
+                    newRule[key] = value;
+                }
+            }
+            return newRule;
+        }
+    };
+
+    new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#rule-modal',
+        data: {
+            ruleModal: ruleModal,
+        },
+        methods: {
+        },
+        computed: {
+        },
+    });
+
+</script>
+{{end}}
diff --git a/web/service/inbound.go b/web/service/inbound.go
index ca8bf7ff..76a8ce5e 100644
--- a/web/service/inbound.go
+++ b/web/service/inbound.go
@@ -1289,6 +1289,16 @@ func (s *InboundService) SearchInbounds(query string) ([]*model.Inbound, error)
 	return inbounds, nil
 }
 
+func (s *InboundService) GetInboundTags() (string, error) {
+	db := database.GetDB()
+	var inboundTags []string
+	err := db.Model(model.Inbound{}).Select("tag").Find(&inboundTags).Error
+	if err != nil && err != gorm.ErrRecordNotFound {
+		return "", err
+	}
+	return "[\"" + strings.Join(inboundTags, "\", \"") + "\"]", nil
+}
+
 func (s *InboundService) MigrationRequirements() {
 	db := database.GetDB()
 	tx := db.Begin()
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index ffa4588c..80d192cd 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -279,6 +279,13 @@
 "subShowInfo" = "Show usage info"
 "subShowInfoDesc" = "Show remianed traffic and date after config name"
 
+[pages.settings.toasts]
+"modifySettings" = "Modify Settings "
+"getSettings" = "Get Settings "
+"modifyUser" = "Modify User "
+"originalUserPassIncorrect" = "Incorrect original username or password"
+"userPassMustBeNotEmpty" = "New username and new password cannot be empty"
+
 [pages.xray]
 "title" = "Xray Settings"
 "basicTemplate" = "Basic Template"
@@ -339,13 +346,21 @@
 "Inbounds" = "Inbounds"
 "Outbounds" = "Outbounds"
 "Routings" = "Routing rules"
+"RoutingsDesc" = "The priority of each rule is important!"
 
-[pages.settings.toasts]
-"modifySettings" = "Modify Settings "
-"getSettings" = "Get Settings "
-"modifyUser" = "Modify User "
-"originalUserPassIncorrect" = "Incorrect original username or password"
-"userPassMustBeNotEmpty" = "New username and new password cannot be empty"
+[pages.xray.rules]
+"first" = "First"
+"last" = "Last"
+"up" = "Up"
+"down" = "Down"
+"source" = "Source"
+"dest" = "Destination"
+"inbound" = "Inbound"
+"outbound" = "Outbound"
+"info" = "Info"
+"add" = "Add Rule"
+"edit" = "Edit Rule"
+"useComma" = "Comma separated items"
 
 [tgbot]
 "noResult" = "❗ No result!"
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index 01e57643..61ff33d0 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -278,6 +278,13 @@
 "subShowInfo" = "نمایش اطلاعات مصرف"
 "subShowInfoDesc" = "ترافیک و زمان باقیمانده را در هر کانفیگ نمایش میدهد"
 
+[pages.settings.toasts]
+"modifySettings" = "ویرایش تنظیمات"
+"getSettings" = "دریافت تنظیمات"
+"modifyUser" = "ویرایش کاربر"
+"originalUserPassIncorrect" = "نام کاربری و رمز عبور فعلی اشتباه می باشد "
+"userPassMustBeNotEmpty" = "نام کاربری و رمز عبور جدید نمیتواند خالی باشد "
+
 [pages.xray]
 "title" = "تنظیمات Xray"
 "basicTemplate" = "بخش الگو پایه"
@@ -335,16 +342,24 @@
 "NetflixIPv4" = "استفاده از آیپی ورژن 4 برای اتصال به نتفلیکس"
 "NetflixIPv4Desc" = "مسیردهی جدید برای اتصال به نتفلیکس با آیپی ورژن 4 اضافه میکند"
 "completeTemplate" = "کامل"
-"Inbounds" = "ورودی"
-"Outbounds" = "خروجی"
+"Inbounds" = "ورودی‌ها"
+"Outbounds" = "خروجی‌ها"
 "Routings" = "قوانین مسیریابی"
+"RoutingsDesc" = "اولویت هر قانون مهم است!"
 
-[pages.settings.toasts]
-"modifySettings" = "ویرایش تنظیمات"
-"getSettings" = "دریافت تنظیمات"
-"modifyUser" = "ویرایش کاربر"
-"originalUserPassIncorrect" = "نام کاربری و رمز عبور فعلی اشتباه می باشد "
-"userPassMustBeNotEmpty" = "نام کاربری و رمز عبور جدید نمیتواند خالی باشد "
+[pages.xray.rules]
+"first" = "اولین"
+"last" = "آخرین"
+"up" = "بالا"
+"down" = "پایین"
+"source" = "مبدا"
+"dest" = "مقصد"
+"inbound" = "ورودی"
+"outbound" = "خروجی"
+"info" = "اطلاعات"
+"add" = "افزودن قانون"
+"edit" = "ویرایش قانون"
+"useComma" = "موارد جدا شده با کاما"
 
 [tgbot]
 "noResult" = "❗ نتیجه‌ای یافت نشد!"
diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index c2ac9061..08e43296 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -279,6 +279,13 @@
 "subShowInfo" = "Показать информацию об использовании"
 "subShowInfoDesc" = "Показывать восстановленный трафик и дату после имени конфигурации"
 
+[pages.settings.toasts]
+"modifySettings" = "Изменение настроек"
+"getSettings" = "Просмотр настроек"
+"modifyUser" = "Изменение пользователя "
+"originalUserPassIncorrect" = "Неверное имя пользователя или пароль"
+"userPassMustBeNotEmpty" = "Новое имя пользователя и новый пароль должны быть заполнены"
+
 [pages.xray]
 "title" = "Xray Настройки"
 "basicTemplate" = "Базовые шаблоны"
@@ -339,13 +346,21 @@
 "Inbounds" = "Входящие"
 "Outbounds" = "Исходящие"
 "Routings" = "Правила маршрутизации"
+"RoutingsDesc" = "Важен приоритет каждого правила!"
 
-[pages.settings.toasts]
-"modifySettings" = "Изменение настроек"
-"getSettings" = "Просмотр настроек"
-"modifyUser" = "Изменение пользователя "
-"originalUserPassIncorrect" = "Неверное имя пользователя или пароль"
-"userPassMustBeNotEmpty" = "Новое имя пользователя и новый пароль должны быть заполнены"
+[pages.xray.rules]
+"first" = "Первый"
+"last" = "Последний"
+"up" = "Вверх"
+"down" = "Вниз"
+"source" = "Источник"
+"dest" = "Пункт назначения"
+"inbound" = "Входящий"
+"outboun" = "Исходящий"
+"info" = "Информация"
+"add" = "Добавить правило"
+"edit" = "Редактировать правило"
+"useComma" = "Элементы, разделенные запятыми"
 
 [tgbot]
 "noResult" = "❗ Нет результатов!"
diff --git a/web/translation/translate.zh_Hans.toml b/web/translation/translate.zh_Hans.toml
index 91497f7d..2b3cfef0 100644
--- a/web/translation/translate.zh_Hans.toml
+++ b/web/translation/translate.zh_Hans.toml
@@ -279,6 +279,13 @@
 "subShowInfo" = "显示使用信息"
 "subShowInfoDesc" = "在配置名称后显示剩余流量和日期"
 
+[pages.settings.toasts]
+"modifySettings" = "修改设置"
+"getSettings" = "获取设置"
+"modifyUser" = "修改用户"
+"originalUserPassIncorrect" = "原用户名或原密码错误"
+"userPassMustBeNotEmpty" = "新用户名和新密码不能为空"
+
 [pages.xray]
 "title" = "Xray 设置"
 "basicTemplate" = "基本模板"
@@ -339,13 +346,21 @@
 "Inbounds" = "界内"
 "Outbounds" = "出站"
 "Routings" = "路由规则"
+"RoutingsDesc" = "每条规则的优先级都很重要"
 
-[pages.settings.toasts]
-"modifySettings" = "修改设置"
-"getSettings" = "获取设置"
-"modifyUser" = "修改用户"
-"originalUserPassIncorrect" = "原用户名或原密码错误"
-"userPassMustBeNotEmpty" = "新用户名和新密码不能为空"
+[pages.xray.rules]
+"firsto" = "第一个"
+"last" = "最后"
+"up" = "向上"
+"down" = "向下"
+"source" = "来源"
+"dest" = "目的地"
+"inbound" = "入站"
+"outbound" = "出站"
+"info" = "信息"
+"add" = "添加规则"
+"edit" = "编辑规则"
+"useComma" = "逗号分隔的项目"
 
 [tgbot]
 "noResult" = "❗ 没有结果！"