diff --git a/src/js/control-view.js b/src/js/control-view.js
index 56c8e94..4cfc727 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -71,7 +71,7 @@ module.exports = {
     },
 
     "state.selected_time": function () {
-      this.loadGCode();
+      this.load();
     },
 
     jog_step: function () {
@@ -237,7 +237,7 @@ module.exports = {
   },
 
   ready: function () {
-    this.loadGCode();
+    this.load();
 
     setInterval(() => {
       this.current_time = new Date().toLocaleTimeString();
@@ -280,7 +280,7 @@ module.exports = {
       this.$dispatch("send", msg);
     },
 
-    loadGCode: function () {
+    load: function () {
       const file_time = this.state.selected_time;
       const file = this.state.selected;
       if (this.last_file == file && this.last_file_time == file_time) {
@@ -357,7 +357,7 @@ module.exports = {
       utils.clickFileInput("gcode-file-input");
     },
 
-    uploadGCode: async function (e) {
+    upload: async function (e) {
       const files = e.target.files || e.dataTransfer.files;
       if (!files.length) {
         return;
@@ -394,7 +394,6 @@ module.exports = {
 
       if (this.config.macrosList.some(obj => obj.file_name == file.name)) {
         console.log("It is also a macros");
-        // this.config.gcodeList.push(file.name);
       }
 
       SvelteComponents.showDialog("Upload", {
@@ -553,7 +552,7 @@ module.exports = {
           this.state.selected = this.config.macros[id].file_name; //TODO :get file
         }
         try {
-          this.loadGCode();
+          this.load();
           this.start_pause();
         } catch (error) {
           console.warn("Error running program: ", error);
diff --git a/src/js/macros.js b/src/js/macros.js
index eea06eb..d74ce67 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -15,32 +15,6 @@ module.exports = {
       deleteGCode: false,
       selectedValues: ["default", "default", "default", "default", "default", "default", "default", "default"],
       newGcode: ["", "", "", "", "", "", "", ""],
-      defaultMacrosList: [
-        {
-          file_name: "",
-        },
-        {
-          file_name: "",
-        },
-        {
-          file_name: "",
-        },
-        {
-          file_name: "",
-        },
-        {
-          file_name: "",
-        },
-        {
-          file_name: "",
-        },
-        {
-          file_name: "",
-        },
-        {
-          file_name: "",
-        },
-      ],
     };
   },
   computed: {
@@ -85,7 +59,7 @@ module.exports = {
       } else {
         this.$set("newGcode[this.tab-1]", "");
       }
-      console.log("newGcode: ", this.newGcode[this.tab - 1]);
+      console.log("loaded GCode: ", this.newGcode[this.tab - 1]);
     },
     uploadMacrosGcode: async function (e) {
       const files = e.target.files || e.dataTransfer.files;
@@ -111,7 +85,7 @@ module.exports = {
         file_name: file.name,
       };
       if (!this.config.macrosList.some(item => item.file_name == file.name)) {
-        console.log("new gcode file");
+        console.log("new gcode file for macros");
         this.config.macrosList.push(gcodeData);
         try {
           await api.put("config/save", this.config);
@@ -163,7 +137,7 @@ module.exports = {
         file_name: filename,
       };
       if (!this.config.macrosList.some(item => item.file_name == filename)) {
-        console.log("new item");
+        console.log("new gcode uploaded for macros");
         this.config.macrosList.push(gcodeData);
 
         try {
@@ -209,10 +183,10 @@ module.exports = {
       } else {
         api.delete(`file/${this.selectedValues[this.tab - 1]}`);
         this.$set("newGcode[this.tab-1]", "");
+        this.$set("this.selectedValues[this.tab - 1]", "default");
         this.config.macrosList = this.config.macrosList.filter(
           item => item.file_name !== this.selectedValues[this.tab - 1],
         );
-        this.$set("this.selectedValues[this.tab - 1]", "default");
         try {
           await api.put("config/save", this.config);
           this.$dispatch("update");
@@ -226,7 +200,7 @@ module.exports = {
     delete_all_macros: async function () {
       const macrosList = this.config.macrosList.map(item => item.file_name).toString();
       api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${macrosList}`);
-      this.config.macrosList = this.defaultMacrosList;
+      this.config.macrosList = [];
       try {
         await api.put("config/save", this.config);
         this.$dispatch("update");
@@ -286,6 +260,7 @@ module.exports = {
         },
       ];
       this.delete_all_macros();
+      this.cancelMacros();
       this.confirmReset = false;
       try {
         await api.put("config/save", this.config);
@@ -302,7 +277,7 @@ module.exports = {
       console.log(this.config);
     },
     resetMacrosList: async function () {
-      this.config.macrosList = this.defaultMacrosList;
+      this.config.macrosList = [];
       try {
         await api.put("config/save", this.config);
         this.$dispatch("update");
diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug
index 2e8f56a..bd880c3 100644
--- a/src/pug/templates/control-view.pug
+++ b/src/pug/templates/control-view.pug
@@ -276,7 +276,7 @@ script#control-view-template(type="text/x-template")
             .fa.fa-folder-open
 
           form.gcode-file-input.file-upload
-            input(type="file", @change="uploadGCode", :disabled="!is_ready",
+            input(type="file", @change="upload", :disabled="!is_ready",
               accept=".nc,.ngc,.gcode,.gc")
 
           a(:disabled="!state.selected", download,
@@ -303,7 +303,7 @@ script#control-view-template(type="text/x-template")
                 |  Selected
 
           select(title="Select previously uploaded GCode programs.",
-            v-model="state.selected", @change="loadGCode", :disabled="!is_ready",
+            v-model="state.selected", @change="load", :disabled="!is_ready",
             style="max-width:100%")
             option(v-for="file in gcodeFiles", :value="file") {{file}}
 
diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug
index b42ec2a..06a86e8 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -29,8 +29,7 @@ script#macros-template(type="text/x-template")
             |  Selected
 
     h1 Macros Configuration
-    button.pure-button(title="Reset Macros", @click="confirmReset=true",
-            style="height:50px;width:170px;font-weight:normal;color:#fff;background-color:#5a9ad7;display:flex;align-items:center;justify-content:space-around") Delete All Macros
+    button.delete-all-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros
             .fa.fa-rotate-right
 
     .tabs
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index b3fd9fc..1581bb2 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -644,6 +644,17 @@ span.unit
     border-radius 10px
     border-color #424242
     border-style solid
+
+  .delete-all-button
+    height 50px
+    margin-bottom 1rem
+    width 190px 
+    font-weight normal
+    color #fff 
+    background-color #5a9ad7 
+    display flex 
+    align-items center 
+    justify-content space-around
   
   .new-gcode
     height 13rem