diff --git a/src/js/macros.js b/src/js/macros.js
index 255b0c4..398e38c 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -12,7 +12,7 @@ module.exports = {
       tab: "1",
       confirmReset: false,
       confirmSave: false,
-      newGcode: "",
+      newGcode: ["", "", "", "", "", "", "", ""],
     };
   },
   components: {
@@ -35,7 +35,7 @@ module.exports = {
   },
   methods: {
     updateNewGcode(event) {
-      this.newGcode = event.target.value;
+      this.newGcode[this.tab - 1] = event.target.value;
     },
     open: function () {
       utils.clickFileInput("gcode-file-input");
@@ -45,7 +45,7 @@ module.exports = {
       const file = this.state.selected;
       this.$broadcast("gcode-load", file);
       this.$broadcast("gcode-line", this.state.line);
-      this.newGCode = "";
+      this.newGCode[this.tab-1] = "";
     },
     upload: function (e) {
       const files = e.target.files || e.dataTransfer.files;
@@ -76,19 +76,23 @@ module.exports = {
       });
     },
     saveMacros: async function () {
-      var macrosName = document.getElementById(`macros-name-${this.tab-1}`).value;
+      var macrosName = document.getElementById(
+        `macros-name-${this.tab - 1}`
+      ).value;
       var macrosColor = document.getElementById(
-        `macros-color-${this.tab-1}`
+        `macros-color-${this.tab - 1}`
       ).value;
 
-      console.log(this.tab-1);
+      console.log(this.tab - 1);
+      console.log(macrosColor, macrosName);
 
-      this.config.macros[this.tab-1].name = macrosName;
-      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;
+      this.config.macros[this.tab - 1].name = macrosName;
+      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-1);
+      this.cancelMacros(this.tab - 1);
       this.confirmSave = false;
       try {
         await api.put("config/save", this.config);
@@ -100,9 +104,9 @@ module.exports = {
       }
     },
     cancelMacros: function () {
-      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";
+      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 5f459b1..cbbbb4c 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -93,7 +93,7 @@ script#macros-template(type="text/x-template")
                                 select#gcodeSelect-1(title="Select previously uploaded GCode programs.",
                                         v-model="state.selected", @change="load", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
-                                        option(disabled='' selected='' value='default')  Select an option
+                                        option(selected='' value='default')  Create G-Code
                                         option(v-for="file in state.files", :value="file") {{file}}
 
                                 button.pure-button(title="Upload a new GCode program.", @click="open",
@@ -105,7 +105,8 @@ script#macros-template(type="text/x-template")
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
                         .gcodeContainer
-                                gcode-viewer
+                                textarea.new-gcode( v-if="state.selected=='default'",:value='newGcode[tab-1]' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",
@@ -122,7 +123,7 @@ script#macros-template(type="text/x-template")
                                 select#gcodeSelect-2(title="Select previously uploaded GCode programs.",
                                         v-model="state.selected", @change="load", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
-                                        option(disabled='' selected='' value='default')  Select an option
+                                        option(selected='' value='default')  Create G-Code
                                         option(v-for="file in state.files", :value="file") {{file}}
 
                                 button.pure-button(title="Upload a new GCode program.", @click="open",
@@ -134,7 +135,8 @@ script#macros-template(type="text/x-template")
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
                         .gcodeContainer
-                                gcode-viewer
+                                textarea.new-gcode( v-if="state.selected=='default'",:value='newGcode' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",
@@ -151,7 +153,7 @@ script#macros-template(type="text/x-template")
                                 select#gcodeSelect-3(title="Select previously uploaded GCode programs.",
                                         v-model="state.selected", @change="load", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
-                                        option(disabled='' selected='' value='default')  Select an option
+                                        option(selected='' value='default')  Create G-Code
                                         option(v-for="file in state.files", :value="file") {{file}}
 
                                 button.pure-button(title="Upload a new GCode program.", @click="open",
@@ -163,7 +165,8 @@ script#macros-template(type="text/x-template")
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
                         .gcodeContainer
-                                gcode-viewer
+                                textarea.new-gcode( v-if="state.selected=='default'",:value='newGcode' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",
@@ -180,7 +183,7 @@ script#macros-template(type="text/x-template")
                                 select#gcodeSelect-4(title="Select previously uploaded GCode programs.",
                                         v-model="state.selected", @change="load", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
-                                        option(disabled='' selected='' value='default')  Select an option
+                                        option(selected='' value='default')  Create G-Code
                                         option(v-for="file in state.files", :value="file") {{file}}
 
                                 button.pure-button(title="Upload a new GCode program.", @click="open",
@@ -192,7 +195,8 @@ script#macros-template(type="text/x-template")
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
                         .gcodeContainer
-                                gcode-viewer
+                                textarea.new-gcode( v-if="state.selected=='default'",:value='newGcode' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",
@@ -209,7 +213,7 @@ script#macros-template(type="text/x-template")
                                 select#gcodeSelect-5(title="Select previously uploaded GCode programs.",
                                         v-model="state.selected", @change="load", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
-                                        option(disabled='' selected='' value='default')  Select an option
+                                        option(selected='' value='default')  Create G-Code
                                         option(v-for="file in state.files", :value="file") {{file}}
 
                                 button.pure-button(title="Upload a new GCode program.", @click="open",
@@ -221,7 +225,8 @@ script#macros-template(type="text/x-template")
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
                         .gcodeContainer
-                                gcode-viewer
+                                textarea.new-gcode( v-if="state.selected=='default'",:value='newGcode' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",
@@ -238,7 +243,7 @@ script#macros-template(type="text/x-template")
                                 select#gcodeSelect-6(title="Select previously uploaded GCode programs.",selected
                                         v-model="state.selected",@change="load", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
-                                        option(disabled='' selected='' value='default')  Select an option
+                                        option(selected='' value='default')  Create G-Code
                                         option(v-for="file in state.files", :value="file") {{file}}
 
                                 button.pure-button(title="Upload a new GCode program.", @click="open",
@@ -250,7 +255,8 @@ script#macros-template(type="text/x-template")
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
                         .gcodeContainer
-                                gcode-viewer
+                                textarea.new-gcode( v-if="state.selected=='default'",:value='newGcode' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",
@@ -267,7 +273,7 @@ script#macros-template(type="text/x-template")
                                 select#gcodeSelect-7(title="Select previously uploaded GCode programs.",selected
                                         v-model="state.selected",@change="load", :disabled="!is_ready",
                                         style="max-width:100%;height:40px;border-radius:5px")
-                                        option(disabled='' selected='' value='default')  Select an option
+                                        option(selected='' value='default')  Create G-Code
                                         option(v-for="file in state.files", :value="file") {{file}}
 
                                 button.pure-button(title="Upload a new GCode program.", @click="open",
@@ -279,7 +285,8 @@ script#macros-template(type="text/x-template")
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
                         .gcodeContainer
-                                gcode-viewer
+                                textarea.new-gcode( v-if="state.selected=='default'",:value='newGcode' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",