diff --git a/src/js/control-view.js b/src/js/control-view.js
index 9dfad6b..49f24ce 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -205,11 +205,11 @@ module.exports = {
         item => !this.config.macrosList.some(compareItem => compareItem.gcode_file_name == item),
       );
       console.log("filesWithNoMacros: ", filesWithNoMacros);
-      console.log("this.config.gcodeList", config.gcodeList);
+      console.log("this.config.gcodeList", this.config.gcodeList);
       const gcodelist = this.config.gcodeList.map(item => item.gcode_file_name);
       const unionSet = new Set([...filesWithNoMacros, ...gcodelist]);
       const files = [...unionSet];
-      console.log("files: ", files);
+      console.log("final files: ", files);
       return files;
     },
   },
@@ -392,7 +392,7 @@ module.exports = {
       }
 
       if (this.config.macrosList.some(obj => obj.gcode_file_name == file.name)) {
-        console.log("It is a macros, remove it from macrosList");
+        console.log("It is also a macros");
         // this.config.gcodeList.push(file.name);
       }
 
diff --git a/src/js/macros.js b/src/js/macros.js
index f40cb8f..93b8f15 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -225,7 +225,7 @@ module.exports = {
         this.$set("newGcode[this.tab-1]", "");
       } else {
         if (!this.isPresent({ gcode_file_name: this.selectedValues[this.tab - 1] })) {
-          console.log("this is not default  macros");
+          console.log("this is not default macros");
           api.delete(`file/${this.selectedValues[this.tab - 1]}`);
           this.$set("newGcode[this.tab-1]", "");
           this.config.macrosList = this.config.macrosList.filter(
@@ -259,8 +259,9 @@ module.exports = {
       }
     },
     cancelMacros: function () {
-      document.getElementById(`macros-name-${this.tab - 1}`).value = "";
-      document.getElementById(`macros-color-${this.tab - 1}`).value = "#ffffff";
+      const defaultValue = this.config.macros[this.tab-1];
+      document.getElementById(`macros-name-${this.tab - 1}`).value = defaultValue.name;
+      document.getElementById(`macros-color-${this.tab - 1}`).value = defaultValue.color;
       document.getElementById(`gcodeSelect-${this.tab - 1}`).value = "default";
       this.newGcode[this.tab - 1] = "";
     },
diff --git a/src/resources/config-template.json b/src/resources/config-template.json
index 512bd2a..793e1c3 100644
--- a/src/resources/config-template.json
+++ b/src/resources/config-template.json
@@ -652,6 +652,7 @@
       }
     }
   },
+  
   "gcodeList":{
     "type":"list",
     "default":[],