diff --git a/web/html/modals/xray_rule_modal.html b/web/html/modals/xray_rule_modal.html
index 336a9d81..78a0a706 100644
--- a/web/html/modals/xray_rule_modal.html
+++ b/web/html/modals/xray_rule_modal.html
@@ -1,7 +1,7 @@
 {{define "modals/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 :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='Domain Matcher'>
+    <a-form-item label='{{ i18n "pages.xray.rules.DomainMatcher" }}'>
       <a-select v-model="ruleModal.rule.domainMatcher" :dropdown-class-name="themeSwitcher.currentTheme">
         <a-select-option v-for="dm in ['','hybrid','linear']" :value="dm">[[ dm ]]</a-select-option>
       </a-select>
@@ -11,7 +11,7 @@
         <a-tooltip>
           <template slot="title">
             <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-          </template> Source IPs <a-icon type="question-circle"></a-icon>
+          </template> {{ i18n "pages.xray.rules.SourceIPs" }} <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
       <a-input v-model.trim="ruleModal.rule.source"></a-input>
@@ -21,22 +21,22 @@
         <a-tooltip>
           <template slot="title">
             <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-          </template> Source Port <a-icon type="question-circle"></a-icon>
+          </template> {{ i18n "pages.xray.rules.SourcePort" }} <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
       <a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
     </a-form-item>
-    <a-form-item label='Network'>
+    <a-form-item label='{{ i18n "pages.xray.rules.Network" }}'>
       <a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
         <a-select-option v-for="x in ['','TCP','UDP','TCP,UDP']" :value="x">[[ x ]]</a-select-option>
       </a-select>
     </a-form-item>
-    <a-form-item label='Protocol'>
+    <a-form-item label='{{ i18n "pages.xray.rules.Protocol" }}'>
       <a-select v-model="ruleModal.rule.protocol" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
         <a-select-option v-for="x in ['http','tls','bittorrent','quic']" :value="x">[[ x ]]</a-select-option>
       </a-select>
     </a-form-item>
-    <a-form-item label='Attributes'>
+    <a-form-item label='{{ i18n "pages.xray.rules.Attributes" }}'>
       <a-button icon="plus" size="small" :style="{ marginLeft: '10px' }" @click="ruleModal.rule.attrs.push(['', ''])"></a-button>
     </a-form-item>
     <a-form-item :wrapper-col="{span: 24}">
@@ -64,7 +64,7 @@
         <a-tooltip>
           <template slot="title">
             <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-          </template> Domain <a-icon type="question-circle"></a-icon>
+          </template> {{ i18n "pages.xray.rules.Domain" }} <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
       <a-input v-model.trim="ruleModal.rule.domain"></a-input>
@@ -74,7 +74,7 @@
         <a-tooltip>
           <template slot="title">
             <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-          </template> User <a-icon type="question-circle"></a-icon>
+          </template> {{ i18n "pages.xray.rules.User" }} <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
       <a-input v-model.trim="ruleModal.rule.user"></a-input>
@@ -84,17 +84,17 @@
         <a-tooltip>
           <template slot="title">
             <span>{{ i18n "pages.xray.rules.useComma" }}</span>
-          </template> Port <a-icon type="question-circle"></a-icon>
+          </template> {{ i18n "pages.xray.rules.Port" }} <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
       <a-input v-model.trim="ruleModal.rule.port"></a-input>
     </a-form-item>
-    <a-form-item label='Inbound Tags'>
+    <a-form-item label='{{ i18n "pages.xray.rules.InboundTag" }}'>
       <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
         <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
       </a-select>
     </a-form-item>
-    <a-form-item label='Outbound Tag'>
+    <a-form-item label='{{ i18n "pages.xray.rules.OutboundTag" }}'>
       <a-select v-model="ruleModal.rule.outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
         <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
       </a-select>
@@ -104,7 +104,7 @@
         <a-tooltip>
           <template slot="title">
             <span>{{ i18n "pages.xray.balancer.balancerDesc" }}</span>
-          </template> Balancer Tag <a-icon type="question-circle"></a-icon>
+          </template> {{ i18n "pages.xray.rules.BalancerTag" }} <a-icon type="question-circle"></a-icon>
         </a-tooltip>
       </template>
       <a-select v-model="ruleModal.rule.balancerTag" :dropdown-class-name="themeSwitcher.currentTheme">