diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index b786639c..0a0dd83b 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -238,6 +238,7 @@
                                                 <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.manualBlockedDomains"}}' v-model="manualBlockedDomains"></setting-list-item>
                                                 <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.manualDirectIPs"}}' v-model="manualDirectIPs"></setting-list-item>
                                                 <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.manualDirectDomains"}}' v-model="manualDirectDomains"></setting-list-item>
+                                                <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.manualIPv4Domains"}}' v-model="manualIPv4Domains"></setting-list-item>
                                             </a-collapse-panel>
                                             <a-collapse-panel header='{{ i18n "pages.settings.resetDefaultConfig"}}'>
                                                 <a-space direction="horizontal" style="padding: 0 20px">
@@ -522,30 +523,30 @@
         computed: {
             templateSettings: {
                 get: function () { return this.allSetting.xrayTemplateConfig ? JSON.parse(this.allSetting.xrayTemplateConfig) : null; },
-                set: function (newValue) { this.allSetting.xrayTemplateConfig = JSON.stringify(newValue, null, 2) },
+                set: function (newValue) { this.allSetting.xrayTemplateConfig = JSON.stringify(newValue, null, 2); },
             },
             inboundSettings: {
                 get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; },
                 set: function (newValue) {
                     newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.inbounds = JSON.parse(newValue)
-                    this.templateSettings = newTemplateSettings
+                    newTemplateSettings.inbounds = JSON.parse(newValue);
+                    this.templateSettings = newTemplateSettings;
                 },
             },
             outboundSettings: {
                 get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; },
                 set: function (newValue) {
                     newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.outbounds = JSON.parse(newValue)
-                    this.templateSettings = newTemplateSettings
+                    newTemplateSettings.outbounds = JSON.parse(newValue);
+                    this.templateSettings = newTemplateSettings;
                 },
             },
             routingRuleSettings: {
                 get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; },
                 set: function (newValue) {
                     newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.routing.rules = JSON.parse(newValue)
-                    this.templateSettings = newTemplateSettings
+                    newTemplateSettings.routing.rules = JSON.parse(newValue);
+                    this.templateSettings = newTemplateSettings;
                 },
             },
             freedomStrategy: {
@@ -620,6 +621,15 @@
                     this.syncRulesWithOutbound("direct", this.directSettings);
                 }
             },
+            ipv4Domains: {
+                get: function () {
+                    return this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({ outboundTag: "IPv4", property: "domain", data: newValue });
+                    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)
@@ -636,6 +646,10 @@
                 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);
@@ -689,40 +703,26 @@
             },
             GoogleIPv4Settings: {
                 get: function () {
-                    return doAllItemsExist(this.settingsData.domains.google, this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" }));
+                    return doAllItemsExist(this.settingsData.domains.google, this.ipv4Domains);
                 },
                 set: function (newValue) {
-                    oldData = this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" });
                     if (newValue) {
-                        oldData = [...oldData, ...this.settingsData.domains.google];
+                        this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.google];
                     } else {
-                        oldData = oldData.filter(data => !this.settingsData.domains.google.includes(data))
+                        this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.google.includes(data));
                     }
-                    this.templateRuleSetter({
-                        outboundTag: "IPv4",
-                        property: "domain",
-                        data: oldData
-                    });
-                    this.syncRulesWithOutbound("IPv4", this.ipv4Settings);
                 },
             },
             NetflixIPv4Settings: {
                 get: function () {
-                    return doAllItemsExist(this.settingsData.domains.netflix, this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" }));
+                    return doAllItemsExist(this.settingsData.domains.netflix, this.ipv4Domains);
                 },
                 set: function (newValue) {
-                    oldData = this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" });
                     if (newValue) {
-                        oldData = [...oldData, ...this.settingsData.domains.netflix];
+                        this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.netflix];
                     } else {
-                        oldData = oldData.filter(data => !this.settingsData.domains.netflix.includes(data))
+                        this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.netflix.includes(data));
                     }
-                    this.templateRuleSetter({
-                        outboundTag: "IPv4",
-                        property: "domain",
-                        data: oldData
-                    });
-                    this.syncRulesWithOutbound("IPv4", this.ipv4Settings);
                 },
             },
             IRIpSettings: {