diff --git a/BTCPayServer/Views/Shared/TemplateEditor.cshtml b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
index d5a891cc8..fca2340a0 100644
--- a/BTCPayServer/Views/Shared/TemplateEditor.cshtml
+++ b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
@@ -153,17 +153,11 @@
                 <div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas">
                     <div class="offcanvas-header p-3">
                         <h5 class="offcanvas-title">Edit Item</h5>
-                        <button type="button" class="btn-close" aria-label="Close" v-on:click="hideOffcanvas">
-                            <vc:icon symbol="close" />
-                        </button>
+                        <button type="button" class="btn btn-sm rounded-pill" :class="{ 'btn-primary': itemChanged, 'btn-outline-secondary': !itemChanged }" v-on:click="hideOffcanvas" v-text="itemChanged ? 'Apply' : 'Close'"></button>
                     </div>
                     <div class="offcanvas-body p-3 p-xl-0">
                         <item-editor ref="itemEditor" :item="selectedItem" class="bg-tile w-100 p-xl-4 rounded" />
                     </div>
-                    <div class="offcanvas-header p-3">
-                        <button class="btn btn-primary" type="button" v-on:click="() => { $refs.itemEditor.apply(); hideOffcanvas() }">Apply and close</button>
-                        <button class="btn btn-secondary" type="button" v-on:click="hideOffcanvas">Cancel</button>
-                    </div>
                 </div>
             </div>
         </div>
diff --git a/BTCPayServer/wwwroot/js/template-editor.js b/BTCPayServer/wwwroot/js/template-editor.js
index 9eb1cbf4e..d4aa0131b 100644
--- a/BTCPayServer/wwwroot/js/template-editor.js
+++ b/BTCPayServer/wwwroot/js/template-editor.js
@@ -235,7 +235,8 @@ document.addEventListener('DOMContentLoaded', () => {
             return {
                 items,
                 selectedItem: null,
-                editorOffcanvas: null
+                selectedItemInitial: null,
+                editorOffcanvas: null,
             }
         },
         computed: {
@@ -247,6 +248,19 @@ document.addEventListener('DOMContentLoaded', () => {
                     (item.categories || []).forEach(category => { res.add(category); });
                     return res;
                 }, new Set()));
+            },
+            itemChanged() {
+                return this.selectedItem && this.selectedItemInitial && (
+                    this.selectedItem.id !== this.selectedItemInitial.id ||
+                    this.selectedItem.title !== this.selectedItemInitial.title ||
+                    this.selectedItem.price !== this.selectedItemInitial.price ||
+                    this.selectedItem.image !== this.selectedItemInitial.image ||
+                    this.selectedItem.disabled !== this.selectedItemInitial.disabled ||
+                    this.selectedItem.inventory !== this.selectedItemInitial.inventory ||
+                    this.selectedItem.priceType !== this.selectedItemInitial.priceType ||
+                    this.selectedItem.categories !== this.selectedItemInitial.categories ||
+                    this.selectedItem.description !== this.selectedItemInitial.description
+                )
             }
         },
         methods: {
@@ -254,7 +268,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 const items = parseConfig(event.target.value)
                 if (!items) return
                 this.items = items
-                this.selectedItem = null
+                this.selectedItem = this.selectedItemInitial = null
             },
             addItem(event) {
                 const length = this.items.push({
@@ -268,16 +282,16 @@ document.addEventListener('DOMContentLoaded', () => {
                     inventory: null,
                     disabled: false
                 })
-                this.selectedItem = this.items[length - 1]
-                this.showOffcanvas()
+                this.selectItem(null, length - 1)
             },
             selectItem(event, index) {
                 this.selectedItem = this.items[index]
+                this.selectedItemInitial = { ...this.selectedItem } // pristine copy
                 this.showOffcanvas()
             },
             removeItem(event, index) {
                 this.items.splice(index, 1)
-                this.selectedItem = null
+                this.selectedItem = this.selectedItemInitial = null
             },
             sortItems(event) {
                 const { newIndex, oldIndex } = event