diff --git a/src/js/macros.js b/src/js/macros.js
index f8c30a2..d30756c 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -9,10 +9,9 @@ module.exports = {
 
   data: function () {
     return {
-      tab: 1,
+      tab: "1",
       confirmReset: false,
       confirmSave: false,
-      currentTab:1,
       newGcode: ["", "", "", "", "", "", "", ""],
     };
   },
@@ -38,20 +37,17 @@ module.exports = {
   },
   methods: {
     updateNewGcode(event) {
-      this.newGcode[this.tab] = event.target.value;
+      this.newGcode[this.tab-1] = event.target.value;
     },
     open: function () {
       utils.clickFileInput("gcode-file-input");
     },
     load: function () {
       const file_time = this.state.selected_time;
-      console.log(this.state.selected_time, "\n ",file_time);
       const file = this.state.selected;
-      console.log(this.state.selected);
-      console.log(this.state.line);
       this.$broadcast("gcode-load", file);
       this.$broadcast("gcode-line", this.state.line);
-      this.newGcode[this.tab] = "";
+      this.newGcode[this.tab-1] = "";
     },
     upload: function (e) {
       const files = e.target.files || e.dataTransfer.files;
@@ -81,25 +77,34 @@ module.exports = {
       });
     },
     saveMacros: async function () {
-      console.log(this.state.selected);
+      if(this.state.selected =='default'){
+        const file = this.newGcode[this.tab-1];
+        SvelteComponents.showDialog("Upload", {
+          file,
+          onComplete: () => {
+            this.last_file_time = undefined; // Force reload
+            this.$broadcast("gcode-reload", file.name);
+          },
+        });
+      }
       var macrosName = document.getElementById(
-        `macros-name-${this.tab}`
+        `macros-name-${this.tab-1}`
       ).value;
       var macrosColor = document.getElementById(
-        `macros-color-${this.tab}`
+        `macros-color-${this.tab-1}`
       ).value;
 
-      console.log(this.tab);
+      console.log(this.tab-1);
       console.log(macrosColor, macrosName);
 
-      this.config.macros[this.tab].name = macrosName;
-      console.log(this.config.macros[this.tab-1]);
-      this.config.macros[this.tab].color = macrosColor;
-      this.config.macros[this.tab].gcode_file_name = this.state.selected;
-      this.config.macros[this.tab].gcode_file_time =
+      this.config.macros[this.tab-1].name = macrosName;
+      console.log(this.config.macros[this.tab-1].name);
+      this.config.macros[this.tab-1].color = macrosColor;
+      this.config.macros[this.tab-1].gcode_file_name = this.state.selected;
+      this.config.macros[this.tab-1].gcode_file_time =
         this.state.selected_time;
       console.log(this.config.macros);
-      this.cancelMacros(this.tab);
+      this.cancelMacros(this.tab-1);
       this.confirmSave = false;
       try {
         await api.put("config/save", this.config);
@@ -111,9 +116,9 @@ module.exports = {
       }
     },
     cancelMacros: function () {
-      document.getElementById(`macros-name-${this.tab}`).value = "";
-      document.getElementById(`macros-color-${this.tab}`).value = "#ffffff";
-      document.getElementById(`gcodeSelect-${this.tab}`).value = "default";
+      document.getElementById(`macros-name-${this.tab-1}`).value = "";
+      document.getElementById(`macros-color-${this.tab-1}`).value = "#ffffff";
+      document.getElementById(`gcodeSelect-${this.tab-1}`).value = "default";
       this.$broadcast("gcode-clear");
     },
     resetConfig: async function () {
diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug
index c77490c..b9c70aa 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -28,28 +28,28 @@ script#macros-template(type="text/x-template")
                 u  Note:
                 |  Reset the macros to default macros recommended by Onefinity CNC.
     .tabs
-        input#tab1(type="radio", name="tabs",checked="" @click="tab = 1")
+        input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'")
         label(for="tab1",style="height:50px;width:100px") Macros 1
 
-        input#tab2(type="radio", name="tabs", @click="tab = 2")
+        input#tab2(type="radio", name="tabs", @click="tab = '2'")
         label(for="tab2",style="height:50px;width:100px") Macros 2
 
-        input#tab3(type="radio", name="tabs", @click="tab = 3")
+        input#tab3(type="radio", name="tabs", @click="tab = '3'")
         label(for="tab3",style="height:50px;width:100px") Macros 3
 
-        input#tab4(type="radio", name="tabs", @click="tab = 4")
+        input#tab4(type="radio", name="tabs", @click="tab = '4'")
         label(for="tab4",style="height:50px;width:100px") Macros 4
 
-        input#tab5(type="radio", name="tabs", @click="tab = 5")
+        input#tab5(type="radio", name="tabs", @click="tab = '5'")
         label(for="tab5",style="height:50px;width:100px") Macros 5
 
-        input#tab6(type="radio", name="tabs", @click="tab = 6")
+        input#tab6(type="radio", name="tabs", @click="tab = '6'")
         label(for="tab6",style="height:50px;width:100px") Macros 6
 
-        input#tab7(type="radio", name="tabs", @click="tab = 7")
+        input#tab7(type="radio", name="tabs", @click="tab = '7'")
         label(for="tab7",style="height:50px;width:100px") Macros 7
 
-        input#tab8(type="radio", name="tabs", @click="tab = 8")
+        input#tab8(type="radio", name="tabs", @click="tab = '8'")
         label(for="tab8",style="height:50px;width:100px") Macros 8
 
         section#content1.tab-content