diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 85b4f76a..e071e9ee 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -342,6 +342,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="save"
         @close="isShowFormulaModal = false"
       />
     </Teleport>
@@ -354,6 +355,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="save"
         @close="isShowFontModal = false"
       />
     </Teleport>
@@ -365,6 +367,7 @@
         :item="field"
         :build-default-name="buildDefaultName"
         :default-field="defaultField"
+        @save="save"
         @close="isShowConditionsModal = false"
       />
     </Teleport>
@@ -377,6 +380,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="save"
         @close="isShowDescriptionModal = false"
       />
     </Teleport>
diff --git a/app/javascript/template_builder/conditions_modal.vue b/app/javascript/template_builder/conditions_modal.vue
index 6dc06e99..3c7abf29 100644
--- a/app/javascript/template_builder/conditions_modal.vue
+++ b/app/javascript/template_builder/conditions_modal.vue
@@ -154,7 +154,7 @@
 <script>
 export default {
   name: 'ConditionModal',
-  inject: ['t', 'save', 'template', 'withConditions'],
+  inject: ['t', 'template', 'withConditions'],
   props: {
     item: {
       type: Object,
@@ -169,18 +169,13 @@ export default {
       type: Function,
       required: true
     },
-    withClickSaveEvent: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     excludeFieldUuids: {
       type: Array,
       required: false,
       default: () => []
     }
   },
-  emits: ['close', 'click-save'],
+  emits: ['close', 'save'],
   data () {
     return {
       conditions: this.item.conditions?.[0] ? JSON.parse(JSON.stringify(this.item.conditions)) : [{}]
@@ -244,12 +239,7 @@ export default {
         delete this.item.conditions
       }
 
-      if (this.withClickSaveEvent) {
-        this.$emit('click-save')
-      } else {
-        this.save()
-      }
-
+      this.$emit('save')
       this.$emit('close')
     }
   }
diff --git a/app/javascript/template_builder/custom_field.vue b/app/javascript/template_builder/custom_field.vue
index ee60ca3e..21317261 100644
--- a/app/javascript/template_builder/custom_field.vue
+++ b/app/javascript/template_builder/custom_field.vue
@@ -125,6 +125,7 @@
         :field="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFormulaModal = false"
       />
     </Teleport>
@@ -136,6 +137,7 @@
         :field="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFontModal = false"
       />
     </Teleport>
@@ -147,6 +149,7 @@
         :field="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowDescriptionModal = false"
       />
     </Teleport>
diff --git a/app/javascript/template_builder/description_modal.vue b/app/javascript/template_builder/description_modal.vue
index f8ce7194..b387733f 100644
--- a/app/javascript/template_builder/description_modal.vue
+++ b/app/javascript/template_builder/description_modal.vue
@@ -67,7 +67,7 @@
 <script>
 export default {
   name: 'DescriptionModal',
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'template'],
   props: {
     field: {
       type: Object,
@@ -88,7 +88,7 @@ export default {
       required: true
     }
   },
-  emits: ['close'],
+  emits: ['close', 'save'],
   data () {
     return {
       description: this.field.description,
@@ -103,7 +103,7 @@ export default {
       this.field.description = this.description
       this.field.title = this.title
 
-      this.save()
+      this.$emit('save')
       this.$emit('close')
     },
     resizeTextarea () {
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 532d08e9..d7e04166 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -269,6 +269,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFormulaModal = false"
       />
     </Teleport>
@@ -281,6 +282,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowFontModal = false"
       />
     </Teleport>
@@ -292,6 +294,7 @@
         :item="field"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowConditionsModal = false"
       />
     </Teleport>
@@ -304,6 +307,7 @@
         :editable="editable && !defaultField"
         :default-field="defaultField"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="isShowDescriptionModal = false"
       />
     </Teleport>
diff --git a/app/javascript/template_builder/field_context_menu.vue b/app/javascript/template_builder/field_context_menu.vue
index 9dda498e..26384fa7 100644
--- a/app/javascript/template_builder/field_context_menu.vue
+++ b/app/javascript/template_builder/field_context_menu.vue
@@ -265,6 +265,7 @@
         :field="field"
         :editable="editable"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="closeModal"
       />
     </Teleport>
@@ -277,6 +278,7 @@
         :area="contextMenu.area"
         :editable="editable"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="closeModal"
       />
     </Teleport>
@@ -287,6 +289,7 @@
       <ConditionsModal
         :item="field"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="closeModal"
       />
     </Teleport>
@@ -298,6 +301,7 @@
         :field="field"
         :editable="editable"
         :build-default-name="buildDefaultName"
+        @save="$emit('save')"
         @close="closeModal"
       />
     </Teleport>
diff --git a/app/javascript/template_builder/font_modal.vue b/app/javascript/template_builder/font_modal.vue
index dc03be50..aca5b4ba 100644
--- a/app/javascript/template_builder/font_modal.vue
+++ b/app/javascript/template_builder/font_modal.vue
@@ -196,7 +196,7 @@ export default {
   components: {
     IconChevronDown
   },
-  inject: ['t', 'save', 'template'],
+  inject: ['t', 'template'],
   props: {
     field: {
       type: Object,
@@ -212,17 +212,12 @@ export default {
       required: false,
       default: true
     },
-    withClickSaveEvent: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     buildDefaultName: {
       type: Function,
       required: true
     }
   },
-  emits: ['close', 'click-save'],
+  emits: ['close', 'save'],
   data () {
     return {
       preferences: {}
@@ -327,12 +322,7 @@ export default {
 
       Object.assign(this.field.preferences, this.preferences)
 
-      if (this.withClickSaveEvent) {
-        this.$emit('click-save')
-      } else {
-        this.save()
-      }
-
+      this.$emit('save')
       this.$emit('close')
     }
   }
diff --git a/app/javascript/template_builder/formula_modal.vue b/app/javascript/template_builder/formula_modal.vue
index 893dced0..a731519b 100644
--- a/app/javascript/template_builder/formula_modal.vue
+++ b/app/javascript/template_builder/formula_modal.vue
@@ -131,7 +131,7 @@ export default {
     IconCodePlus,
     IconMathFunction
   },
-  inject: ['t', 'save', 'template', 'withFormula'],
+  inject: ['t', 'template', 'withFormula'],
   props: {
     field: {
       type: Object,
@@ -152,7 +152,7 @@ export default {
       required: true
     }
   },
-  emits: ['close'],
+  emits: ['close', 'save'],
   data () {
     return {
       formula: ''
@@ -219,7 +219,7 @@ export default {
           this.field.readonly = !!normalizedFormula
         }
 
-        this.save()
+        this.$emit('save')
 
         this.$emit('close')
       }
diff --git a/app/javascript/template_builder/preview.vue b/app/javascript/template_builder/preview.vue
index 1a76a134..025ad692 100644
--- a/app/javascript/template_builder/preview.vue
+++ b/app/javascript/template_builder/preview.vue
@@ -119,6 +119,7 @@
       <ConditionsModal
         :item="item"
         :build-default-name="buildDefaultName"
+        @save="$emit('change')"
         @close="isShowConditionsModal = false"
       />
     </Teleport>
diff --git a/app/javascript/template_builder/selection_context_menu.vue b/app/javascript/template_builder/selection_context_menu.vue
index f5bf6a00..4649e011 100644
--- a/app/javascript/template_builder/selection_context_menu.vue
+++ b/app/javascript/template_builder/selection_context_menu.vue
@@ -112,8 +112,7 @@
         :area="contextMenu.area"
         :editable="editable"
         :build-default-name="buildDefaultName"
-        :with-click-save-event="true"
-        @click-save="handleSaveMultiSelectFontModal"
+        @save="handleSaveMultiSelectFontModal"
         @close="closeModal"
       />
     </Teleport>
@@ -125,8 +124,7 @@
         :item="multiSelectField"
         :build-default-name="buildDefaultName"
         :exclude-field-uuids="selectedFields.map(f => f.uuid)"
-        :with-click-save-event="true"
-        @click-save="handleSaveMultiSelectConditionsModal"
+        @save="handleSaveMultiSelectConditionsModal"
         @close="closeModal"
       />
     </Teleport>