diff --git a/src/js/control-view.js b/src/js/control-view.js
index 341b19f..6374279 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -545,6 +545,7 @@ module.exports = {
       SvelteComponents.showDialog("Probe", { probeType });
     },
     runMacros: function (id) {
+      console.lof("runMAcros",id);
       if (this.config.macros[id].file_name == "") {
         this.showNoGcodeMessage = true;
       } else {
diff --git a/src/js/macros.js b/src/js/macros.js
index 67b9cf7..c1ba49f 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -9,7 +9,7 @@ module.exports = {
 
   data: function () {
     return {
-      tab: "1",
+      tab: "0",
       confirmReset: false,
       confirmSave: false,
       deleteGCode: false,
@@ -41,10 +41,10 @@ module.exports = {
       return this.config.macrosList.map(el => el.file_name);
     },
     getMacrosColor: function () {
-      return this.config.macros[this.tab - 1]["color"];
+      return this.config.macros[this.tab]["color"];
     },
     getMacrosName: function () {
-      return this.config.macros[this.tab - 1]["name"];
+      return this.config.macros[this.tab]["name"];
     },
   },
   methods: {
@@ -52,22 +52,22 @@ module.exports = {
       utils.clickFileInput("gcode-file-input");
     },
     updateNewGcode: function (event) {
-      this.newGcode[this.tab - 1] = event.target.value;
+      this.newGcode[this.tab] = event.target.value;
       this.$dispatch("macros-edited");
     },
     loadMacrosGcode: async function () {
-      const file = this.selectedValues[this.tab - 1];
-      if (this.selectedValues[this.tab - 1] != "default") {
+      const file = this.selectedValues[this.tab];
+      if (this.selectedValues[this.tab] != "default") {
         const response = await fetch(`/api/file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${file}`, {
           cache: "no-cache",
         });
         const text = (await response.text()).split(" ").join("\n");
-        this.$set("newGcode[this.tab-1]", text);
+        this.$set("newGcode[this.tab]", text);
       } else {
-        this.$set("newGcode[this.tab-1]", "");
+        this.$set("newGcode[this.tab]", "");
       }
       this.$dispatch("macros-edited");
-      console.log("loaded GCode: ", this.newGcode[this.tab - 1]);
+      console.log("loaded GCode: ", this.newGcode[this.tab]);
     },
     uploadMacrosGcode: async function (e) {
       const files = e.target.files || e.dataTransfer.files;
@@ -106,7 +106,7 @@ module.exports = {
         console.log("Already exists");
       }
 
-      this.$set("selectedValues[this.tab - 1]", file.name);
+      this.$set("selectedValues[this.tab]", file.name);
       this.$dispatch("macros-edited");
       console.log("file.name", file.name);
       console.log("file.name type: ", typeof file.name);
@@ -160,22 +160,22 @@ module.exports = {
       }
     },
     saveMacros: async function () {
-      var macrosName = document.getElementById(`macros-name-${this.tab - 1}`).value;
-      var macrosColor = document.getElementById(`macros-color-${this.tab - 1}`).value;
+      var macrosName = document.getElementById(`macros-name-${this.tab}`).value;
+      var macrosColor = document.getElementById(`macros-color-${this.tab}`).value;
 
       console.log(" this.state.selected && time: ", this.state.selected, this.state.selected_time);
-      console.log("selectedValues: ", this.selectedValues[this.tab - 1]);
+      console.log("selectedValues: ", this.selectedValues[this.tab]);
 
       var file_name =
-        this.selectedValues[this.tab - 1] == "default" ? macrosName + ".ngc" : this.selectedValues[this.tab - 1];
-      var file = this.newGcode[this.tab - 1];
+        this.selectedValues[this.tab] == "default" ? macrosName + ".ngc" : this.selectedValues[this.tab];
+      var file = this.newGcode[this.tab];
 
       this.uploadGCode(file_name, file);
 
-      this.config.macros[this.tab - 1].name = macrosName;
-      this.config.macros[this.tab - 1].color = macrosColor;
-      this.config.macros[this.tab - 1].file_name = file_name;
-      console.log("config.macros[this.tab - 1].file_name", this.config.macros[this.tab - 1].file_name);
+      this.config.macros[this.tab].name = macrosName;
+      this.config.macros[this.tab].color = macrosColor;
+      this.config.macros[this.tab].file_name = file_name;
+      console.log("config.macros[this.tab - 1].file_name", this.config.macros[this.tab].file_name);
       this.confirmSave = false;
       try {
         await api.put("config/save", this.config);
@@ -188,15 +188,15 @@ module.exports = {
       }
     },
     delete_current: async function () {
-      const filename = this.selectedValues[this.tab - 1];
+      const filename = this.selectedValues[this.tab];
       console.log("delete a gcode");
       if (filename == "default") {
-        this.$set("newGcode[this.tab - 1]", "");
-        this.$set("selectedValues[this.tab - 1]", "default");
+        this.$set("newGcode[this.tab]", "");
+        this.$set("selectedValues[this.tab]", "default");
       } else {
         api.delete(`file/${filename}`);
-        this.$set("newGcode[this.tab - 1]", "");
-        this.$set("selectedValues[this.tab - 1]", "default");
+        this.$set("newGcode[this.tab]", "");
+        this.$set("selectedValues[this.tab]", "default");
         this.config.macrosList = this.config.macrosList.filter(item => item.file_name !== filename);
         try {
           await api.put("config/save", this.config);
@@ -221,12 +221,12 @@ module.exports = {
       }
     },
     cancelMacros: function () {
-      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;
+      const defaultValue = this.config.macros[this.tab];
+      document.getElementById(`macros-name-${this.tab}`).value = defaultValue.name;
+      document.getElementById(`macros-color-${this.tab}`).value = defaultValue.color;
       document.getElementById("gcode-field").value = "";
-      this.$set("newGcode[this.tab - 1]", "");
-      this.$set("selectedValues[this.tab - 1]", "default");
+      this.$set("newGcode[this.tab]", "");
+      this.$set("selectedValues[this.tab]", "default");
     },
     deleteAllMacros: async function () {
       this.config.macros = [
diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug
index 2460aa2..2d248e3 100644
--- a/src/pug/templates/control-view.pug
+++ b/src/pug/templates/control-view.pug
@@ -217,7 +217,7 @@ script#control-view-template(type="text/x-template")
 
     .macros-div(class="present")
        button.macros-button(title="Click to run Macros",v-for="(macros, index) in config.macros",
-          @click="runMacros(index)",:key="index",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}}
+          @click="runMacros(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}}
 
     .tabs
      
diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug
index 37955a8..77deb1d 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -29,46 +29,27 @@ script#macros-template(type="text/x-template")
             |  Selected
 
     h1 Macros Configuration
-    button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros
-            .fa.fa-rotate-right
-    button.config-button(title="Add a Macros", @click="addNewMacros") Add a Macros
-            .fa.fa-plus
+    .flex-row-container
+        button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros
+                .fa.fa-rotate-right
+        button.config-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") Add a Macros
+                .fa.fa-plus
 
     .tabs
-        input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'")
-        label(for="tab1",style="height:50px;width:100px") Macros 1
+        input(type="radio",v-for="(macros,index) in config.macros",:id="tab{{index}}",:key="index",
+                :name="tabs",:checked="index == 0", @click="tab=index",:key="index")
+        label(:for="tab{{index}}",style="height:50px;width:100px",:key="index") Macros {{index+1}}
 
-        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'")
-        label(for="tab3",style="height:50px;width:100px") Macros 3
-
-        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'")
-        label(for="tab5",style="height:50px;width:100px") Macros 5
-
-        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'")
-        label(for="tab7",style="height:50px;width:100px") Macros 7
-
-        input#tab8(type="radio", name="tabs", @click="tab = '8'")
-        label(for="tab8",style="height:50px;width:100px") Macros 8
-
-        section#content1.tab-content
+        section.tab-content(v-for="(macros,index) in config.macros",id="content{index}}",:key="index")
                 .macros-form
                         p.title Name
                         .input-container
-                                input.input-color(type="color",id="macros-color-0",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-0" ,v-model="getMacrosName")
+                                input.input-color(type="color",:id="macros-color-{{index}}",value="#ffffff") 
+                                input.input-name(type="text",minlength='1',maxlength='15',:id="macros-name-{{index}}" ,v-model="getMacrosName")
                         p.title G-Code
-                        .select-upload-gcode                      
-                                select#gcodeSelect-0(title="Select previously uploaded GCode programs.",selected
-                                        v-model="selectedValues[tab - 1]",@change="loadMacrosGcode", :disabled="!is_ready",
+                        .flex-row-container                      
+                                select(:id="gcodeSelect-{{index}},title="Select previously uploaded GCode programs.",selected
+                                        v-model="selectedValues[{{index}}]",@change="loadMacrosGcode", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
                                         option( selected='' value='default')  Create G-Code
                                         option(v-for="file in macrosList", :value="file") {{file}}
@@ -81,207 +62,11 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                                 button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
+                                        :disabled="!selectedValues[{{index}}]=='default'") Delete
                                         .fa.fa-trash
                         br
                         .gcodeContainer
-                                textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode")  
-
-        section#content2.tab-content
-                .macros-form
-                        p.title Name
-                        .input-container
-                                input.input-color(type="color",id="macros-color-1",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-1",v-model="getMacrosName")
-                        p.title G-Code
-                        .select-upload-gcode
-                                select#gcodeSelect-1(title="Select previously uploaded GCode programs.",
-                                        v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
-                                        style="max-width:100%;height:40px;border-radius:5px")
-                                        option(selected='' value='default')  Create G-Code
-                                        option(v-for="file in macrosList", :value="file") {{file}}
-
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
-                                        :disabled="!is_ready") Upload
-                                        .fa.fa-upload
-
-                                form.gcode-file-input.file-upload
-                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
-                                        accept=".nc,.ngc,.gcode,.gc")
-                                button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
-                                        .fa.fa-trash
-                        br
-                        .gcodeContainer
-                                textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode") 
-
-        section#content3.tab-content
-                .macros-form
-                        p.title Name
-                        .input-container
-                                input.input-color(type="color",id="macros-color-2",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-2",v-model="getMacrosName")
-                        p.title G-Code
-                        .select-upload-gcode
-                                select#gcodeSelect-2(title="Select previously uploaded GCode programs.",
-                                        v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
-                                        style="max-width:100%;height:40px;border-radius:5px")
-                                        option(selected='' value='default')  Create G-Code
-                                        option(v-for="file in macrosList", :value="file") {{file}}
-
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
-                                        :disabled="!is_ready") Upload
-                                        .fa.fa-upload
-
-                                form.gcode-file-input.file-upload
-                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
-                                        accept=".nc,.ngc,.gcode,.gc")
-                                button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
-                                        .fa.fa-trash
-                        br
-                        .gcodeContainer
-                                textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode") 
-
-        section#content4.tab-content
-                .macros-form
-                        p.title Name
-                        .input-container
-                                input.input-color(type="color",id="macros-color-3",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-3",v-model="getMacrosName")
-                        p.title G-Code
-                        .select-upload-gcode
-                                select#gcodeSelect-3(title="Select previously uploaded GCode programs.",
-                                        v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
-                                        style="max-width:100%;height:40px;border-radius:5px")
-                                        option(selected='' value='default')  Create G-Code
-                                        option(v-for="file in macrosList", :value="file") {{file}}
-
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
-                                        :disabled="!is_ready") Upload
-                                        .fa.fa-upload
-
-                                form.gcode-file-input.file-upload
-                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
-                                        accept=".nc,.ngc,.gcode,.gc")
-                                button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
-                                        .fa.fa-trash
-                        br
-                        .gcodeContainer
-                                textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode") 
-
-        section#content5.tab-content
-                .macros-form
-                        p.title Name
-                        .input-container
-                                input.input-color(type="color",id="macros-color-4",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-4",v-model="getMacrosName")
-                        p.title G-Code
-                        .select-upload-gcode
-                                select#gcodeSelect-4(title="Select previously uploaded GCode programs.",
-                                        v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
-                                        style="max-width:100%;height:40px;border-radius:5px")
-                                        option(selected='' value='default')  Create G-Code
-                                        option(v-for="file in macrosList", :value="file") {{file}}
-
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
-                                        :disabled="!is_ready") Upload
-                                        .fa.fa-upload
-
-                                form.gcode-file-input.file-upload
-                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
-                                        accept=".nc,.ngc,.gcode,.gc")
-                                button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
-                                        .fa.fa-trash
-                        br
-                        .gcodeContainer
-                                textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode") 
-
-        section#content6.tab-content
-                .macros-form
-                        p.title Name
-                        .input-container
-                                input.input-color(type="color",id="macros-color-5",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-5",v-model="getMacrosName")
-                        p.title G-Code
-                        .select-upload-gcode
-                                select#gcodeSelect-5(title="Select previously uploaded GCode programs.",
-                                        v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
-                                        style="max-width:100%;height:40px;border-radius:5px")
-                                        option(selected='' value='default')  Create G-Code
-                                        option(v-for="file in macrosList", :value="file") {{file}}
-
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
-                                        :disabled="!is_ready") Upload
-                                        .fa.fa-upload
-
-                                form.gcode-file-input.file-upload
-                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
-                                        accept=".nc,.ngc,.gcode,.gc")
-                                button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
-                                        .fa.fa-trash
-                        br
-                        .gcodeContainer
-                                textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode") 
-        
-        section#content7.tab-content
-                .macros-form
-                        p.title Name
-                        .input-container
-                                input.input-color(type="color",id="macros-color-6",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-6",v-model="getMacrosName")
-                        p.title G-Code
-                        .select-upload-gcode                      
-                                select#gcodeSelect-6(title="Select previously uploaded GCode programs.",selected
-                                        v-model="selectedValues[tab - 1]",@change="loadMacrosGcode", :disabled="!is_ready",
-                                        style="max-width:100%;height:40px;border-radius:5px")
-                                        option(selected='' value='default')  Create G-Code
-                                        option(v-for="file in macrosList", :value="file") {{file}}
-
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
-                                        :disabled="!is_ready") Upload
-                                        .fa.fa-upload
-
-                                form.gcode-file-input.file-upload
-                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
-                                        accept=".nc,.ngc,.gcode,.gc")
-                                button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
-                                        .fa.fa-trash
-                        br
-                        .gcodeContainer
-                                textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode") 
-        
-        section#content8.tab-content
-                .macros-form
-                        p.title Name
-                        .input-container
-                                input.input-color(type="color",id="macros-color-7",value="#ffffff") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-7",v-model="getMacrosName")
-                        p.title G-Code
-                        .select-upload-gcode                      
-                                select#gcodeSelect-7(title="Select previously uploaded GCode programs.",selected
-                                        v-model="selectedValues[tab - 1]",@change="loadMacrosGcode", :disabled="!is_ready",
-                                        style="max-width:100%;height:40px;border-radius:5px")
-                                        option(selected='' value='default')  Create G-Code
-                                        option(v-for="file in macrosList", :value="file") {{file}}
-
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
-                                        :disabled="!is_ready") Upload
-                                        .fa.fa-upload
-
-                                form.gcode-file-input.file-upload
-                                        input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
-                                        accept=".nc,.ngc,.gcode,.gc")
-                                button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
-                                        :disabled="!selectedValues[tab-1]=='default'") Delete
-                                        .fa.fa-trash
-                        br
-                        .gcodeContainer
-                                textarea.new-gcode( id="gcode-field",:value='newGcode[tab-1]' @input="updateNewGcode") 
+                                textarea.new-gcode(id="gcode-field", :value="newGcode[{{index}}]" @input="updateNewGcode")
 
         button.submit-macros.button-submit(title="Save Macros",@click="confirmSave=true",:disabled="!edited") Save
         button.submit-macros(title="Cancel Macros",@click="cancelMacros",style="margin-left:5px;background-color:#fafafa;") Cancel
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 9fcf455..9204163 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -623,11 +623,10 @@ span.unit
   .macros-div
     display flex
     justify-content space-around
-    height 60px
     margin 10px
     margin-left 100px
 
-  .macros-buttons:not([disabled])
+  .macros-buttons
     height 60px
     width 140px
     font-weight normal
@@ -666,7 +665,7 @@ span.unit
     border-radius 10px
     padding 20px
 
-  .select-upload-gcode 
+  .flex-row-container
     display flex
     flex-direction row