diff --git a/src/js/macros.js b/src/js/macros.js
index 1edeee7..65238b1 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -4,152 +4,155 @@ const api = require("./api");
 const utils = require("./utils");
 
 module.exports = {
-    template: "#macros-template",
-    props: [ "config", "template", "state" ],
+  template: "#macros-template",
+  props: ["config", "template", "state"],
 
-    data: function (){
-        return {
-            tab: "1",
-        }
+  data: function () {
+    return {
+      tab: "1",
+    };
+  },
+  components: {
+    "axis-control": require("./axis-control"),
+    "path-viewer": require("./path-viewer"),
+    "gcode-viewer": require("./gcode-viewer"),
+  },
+  computed: {
+    mach_state: function () {
+      const cycle = this.state.cycle;
+      const state = this.state.xx;
+
+      if (state != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
+        return cycle.toUpperCase();
+      }
+
+      return state || "";
     },
-    components: {
-        "axis-control": require("./axis-control"),
-        "path-viewer": require("./path-viewer"),
-        "gcode-viewer": require("./gcode-viewer")
+    is_ready: function () {
+      return this.mach_state == "READY";
     },
-    computed:{
-        mach_state: function() {
-            const cycle = this.state.cycle;
-            const state = this.state.xx;
-
-            if (state != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
-                return cycle.toUpperCase();
-            }
-            
-            return state || "";
-        },
-        is_ready: function() {
-            return this.mach_state == "READY";
-        },
+  },
+  methods: {
+    open: function () {
+      utils.clickFileInput("gcode-file-input");
     },
-    methods:{
-        open: function() {
-            utils.clickFileInput("gcode-file-input");
+    load: function () {
+      const file_time = this.state.selected_time;
+      console.log("file_time", file_time);
+      const file = this.state.selected;
+      console.log("file: ", file);
+      console.log("last_file: ",this.last_file);
+      console.log("last_file_time: ",this.last_file_time);
+      // if (this.last_file == file && this.last_file_time == file_time) {
+      //     return;
+      // }
+
+    //   this.last_file = file;
+    //   this.last_file_time = file_time;
+
+      // this.$broadcast("gcode-load", file);
+      // this.$broadcast("gcode-line", this.state.line);
+      // this.toolpath_progress = 0;
+      // this.load_toolpath(file, file_time);
+    },
+    upload: function (e) {
+      const files = e.target.files || e.dataTransfer.files;
+      if (!files.length) {
+        return;
+      }
+
+      const file = files[0];
+      const extension = file.name.split(".").pop();
+      switch (extension.toLowerCase()) {
+        case "nc":
+        case "ngc":
+        case "gcode":
+        case "gc":
+          break;
+
+        default:
+          alert(`Unsupported file type: ${extension}`);
+          return;
+      }
+
+      SvelteComponents.showDialog("Upload", {
+        file,
+        onComplete: () => {
+          this.last_file_time = undefined; // Force reload
+          this.$broadcast("gcode-reload", file.name);
         },
-        load: function() {
-            const file_time = this.state.selected_time;
-            console.log('file_time',file_time);
-            const file = this.state.selected;
-            console.log("file: ",file);
-            // if (this.last_file == file && this.last_file_time == file_time) {
-            //     return;
-            // }
+      });
+    },
+    saveMacros: async function (id) {
+      var macrosName = document.getElementById(`macros-name-${id}`).value;
+      var macrosColor = document.getElementById(`macros-color-${id}`).value;
 
-            // this.last_file = file;
-            // this.last_file_time = file_time;
+      this.config.macros[id].name = macrosName;
+      this.config.macros[id].color = macrosColor;
+      this.config.macros[id].gcode_file_name = this.state.selected;
+      this.config.macros[id].gcode_file_time = this.state.selected_time;
 
-            // this.$broadcast("gcode-load", file);
-            // this.$broadcast("gcode-line", this.state.line);
-            // this.toolpath_progress = 0;
-            // this.load_toolpath(file, file_time);
+      console.log(this.config.macros);
+      try {
+        await api.put("config/save", this.config);
+        console.log("Successfully saved");
+        this.$dispatch("update");
+      } catch (error) {
+        console.error("Restore Failed: ", error);
+        alert("Restore failed");
+      }
+    },
+    cancelMacros: function (id) {
+        document.getElementById(`macros-name-${id}`).value = '';
+        document.getElementById(`macros-color-${id}`).value = '';
+    },
+    resetConfig: async function () {
+      this.config.macros = [
+        {
+          name: " ",
+          color: "#efefef",
+          gcode_file_name: " ",
+          gcode_file_time: 0,
         },
-        upload: function(e) {
-            const files = e.target.files || e.dataTransfer.files;
-            if (!files.length) {
-                return;
-            }
-
-            const file = files[0];
-            const extension = file.name.split(".").pop();
-            switch (extension.toLowerCase()) {
-                case "nc":
-                case "ngc":
-                case "gcode":
-                case "gc":
-                    break;
-
-                default:
-                    alert(`Unsupported file type: ${extension}`);
-                    return;
-            }
-
-            SvelteComponents.showDialog("Upload", {
-                file,
-                onComplete: () => {
-                    this.last_file_time = undefined; // Force reload
-                    this.$broadcast("gcode-reload", file.name);
-                }
-            });
+        {
+          name: " ",
+          color: "#efefef",
+          gcode_file_name: " ",
+          gcode_file_time: 0,
         },
-        saveMacros: async function(id){
-            var macrosName = document.getElementById(`macros-name-${id}`).value;
-            var macrosColor = document.getElementById(`macros-color-${id}`).value;
-
-            this.config.macros[id].name=macrosName;
-            this.config.macros[id].color=macrosColor;
-            this.config.macros[id].gcode_file_name=this.state.selected;
-            this.config.macros[id].gcode_file_time=this.state.selected_time;
-
-            console.log(this.config.macros);
-            try {
-                await api.put("config/save",this.config);
-                console.log("Successfully saved");
-                this.$dispatch("update");
-            } catch (error) {
-                console.error("Restore Failed: ",error);
-                alert("Restore failed");
-            }
+        {
+          name: " ",
+          color: "#efefef",
+          gcode_file_name: " ",
+          gcode_file_time: 0,
         },
-        printConfig: function(){
-            console.log(this.config);
+        {
+          name: " ",
+          color: "#efefef",
+          gcode_file_name: " ",
+          gcode_file_time: 0,
         },
-        flushConfig: async function(){
-            this.config.macros=[
-                {
-                   name:"Macros 1",
-                   color: "#efefef",
-                   gcode_file_name: " ",
-                   gcode_file_time: 0
-                },
-                {
-                    name:"Macros 2",
-                    color: "#efefef",
-                    gcode_file_name: " ",
-                    gcode_file_time: 0
-                 },
-                 {
-                    name:"Macros 3",
-                    color: "#efefef",
-                    gcode_file_name: " ",
-                    gcode_file_time: 0
-                 },
-                 {
-                    name:"Macros 4",
-                    color: "#efefef",
-                    gcode_file_name: " ",
-                    gcode_file_time: 0
-                 },
-                 {
-                    name:"Macros 5",
-                    color: "#efefef",
-                    gcode_file_name: " ",
-                    gcode_file_time: 0
-                 },
-                 {
-                    name:"Macros 6",
-                    color: "#efefef",
-                    gcode_file_name: " ",
-                    gcode_file_time: 0
-                 },
-            ]
-            try {
-                await api.put("config/save",this.config);
-                console.log("Successfully flushed");
-                this.$dispatch("update");
-            } catch (error) {
-                console.error("Restore Failed: ",error);
-                alert("Restore failed");
-            }
-        }
-    }
-}
\ No newline at end of file
+        {
+          name: " ",
+          color: "#efefef",
+          gcode_file_name: " ",
+          gcode_file_time: 0,
+        },
+        {
+          name: " ",
+          color: "#efefef",
+          gcode_file_name: " ",
+          gcode_file_time: 0,
+        },
+      ];
+      try {
+        await api.put("config/save", this.config);
+        console.log("Successfully flushed");
+        this.$dispatch("update");
+      } catch (error) {
+        console.error("Restore Failed: ", error);
+        alert("Restore failed");
+      }
+    },
+  },
+};
diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug
index b4d8984..decf882 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -1,6 +1,12 @@
 script#macros-template(type="text/x-template")
   #macros
     h1 Macros Configuration
+    button.pure-button(title="Print config.", @click="resetConfig",
+        style="height:50px;width:120px;font-weight:normal;padding-vertical:5px;background-color:#5a9ad7") Reset Macros
+    .warning-box
+        p
+        u  Note:
+        | Reset the macros to default macros recommended by Onefinity CNC.
     .tabs
         input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'")
         label(for="tab1",style="height:50px;width:100px") Macros 1
@@ -22,11 +28,11 @@ script#macros-template(type="text/x-template")
 
         section#content1.tab-content
                 .macros-form
-                        p.title Enter Macros Name
+                        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")
-                        p.title Select/Upload G-Code
+                        p.title G-Code
                         select(title="Select previously uploaded GCode programs.",
                                 v-model="state.selected", @change="load", :disabled="!is_ready",
                                 style="max-width:100%;height:40px;border-radius:5px")
@@ -39,16 +45,19 @@ script#macros-template(type="text/x-template")
                                 input(type="file", @change="upload", :disabled="!is_ready",
                                 accept=".nc,.ngc,.gcode,.gc")
                         br
+                        gcode-viewer
                         button.submit-macros(title="Save Macros",@click="saveMacros(0)",
-                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save Macros
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
+                        button.submit-macros(title="Save Macros",@click="cancelMacros(0)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#f6f6f6;color:#000;border:0;margin-top:30px") Cancel
 
         section#content2.tab-content
                 .macros-form
-                        p.title Enter Macros Name
+                        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")
-                        p.title Select/Upload G-Code
+                        p.title G-Code
                         select(title="Select previously uploaded GCode programs.",
                                 v-model="state.selected", @change="load", :disabled="!is_ready",
                                 style="max-width:100%;height:40px;border-radius:5px")
@@ -61,16 +70,19 @@ script#macros-template(type="text/x-template")
                                 input(type="file", @change="upload", :disabled="!is_ready",
                                 accept=".nc,.ngc,.gcode,.gc")
                         br
+                        gcode-viewer
                         button.submit-macros(title="Save Macros",@click="saveMacros(1)",
-                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save Macros
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
+                        button.submit-macros(title="Save Macros",@click="cancelMacros(1)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#f6f6f6;color:#000;border:0;margin-top:30px") Cancel
 
         section#content3.tab-content
                 .macros-form
-                        p.title Enter Macros Name
+                        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")
-                        p.title Select/Upload G-Code
+                        p.title G-Code
                         select(title="Select previously uploaded GCode programs.",
                                 v-model="state.selected", @change="load", :disabled="!is_ready",
                                 style="max-width:100%;height:40px;border-radius:5px")
@@ -83,16 +95,19 @@ script#macros-template(type="text/x-template")
                                 input(type="file", @change="upload", :disabled="!is_ready",
                                 accept=".nc,.ngc,.gcode,.gc")
                         br
+                        gcode-viewer
                         button.submit-macros(title="Save Macros",@click="saveMacros(2)",
-                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save Macros
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
+                        button.submit-macros(title="Save Macros",@click="cancelMacros(2)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#f6f6f6;color:#000;border:0;margin-top:30px") Cancel
 
         section#content4.tab-content
                 .macros-form
-                        p.title Enter Macros Name
+                        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")
-                        p.title Select/Upload G-Code
+                        p.title G-Code
                         select(title="Select previously uploaded GCode programs.",
                                 v-model="state.selected", @change="load", :disabled="!is_ready",
                                 style="max-width:100%;height:40px;border-radius:5px")
@@ -105,16 +120,19 @@ script#macros-template(type="text/x-template")
                                 input(type="file", @change="upload", :disabled="!is_ready",
                                 accept=".nc,.ngc,.gcode,.gc")
                         br
+                        gcode-viewer
                         button.submit-macros(title="Save Macros",@click="saveMacros(3)",
-                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save Macros
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
+                        button.submit-macros(title="Save Macros",@click="cancelMacros(3)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#f6f6f6;color:#000;border:0;margin-top:30px") Cancel
 
         section#content5.tab-content
                 .macros-form
-                        p.title Enter Macros Name
+                        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")
-                        p.title Select/Upload G-Code
+                        p.title G-Code
                         select(title="Select previously uploaded GCode programs.",
                                 v-model="state.selected", @change="load", :disabled="!is_ready",
                                 style="max-width:100%;height:40px;border-radius:5px")
@@ -127,16 +145,19 @@ script#macros-template(type="text/x-template")
                                 input(type="file", @change="upload", :disabled="!is_ready",
                                 accept=".nc,.ngc,.gcode,.gc")
                         br
+                        gcode-viewer
                         button.submit-macros(title="Save Macros",@click="saveMacros(4)",
-                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save Macros
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
+                        button.submit-macros(title="Save Macros",@click="cancelMacros(4)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#f6f6f6;color:#000;border:0;margin-top:30px") Cancel
 
         section#content6.tab-content
                 .macros-form
-                        p.title Enter Macros Name
+                        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")
-                        p.title Select/Upload G-Code
+                        p.title G-Code
                         select(title="Select previously uploaded GCode programs.",
                                 v-model="state.selected", @change="load", :disabled="!is_ready",
                                 style="max-width:100%;height:40px;border-radius:5px")
@@ -149,11 +170,8 @@ script#macros-template(type="text/x-template")
                                 input(type="file", @change="upload", :disabled="!is_ready",
                                 accept=".nc,.ngc,.gcode,.gc")
                         br
+                        gcode-viewer
                         button.submit-macros(title="Save Macros",@click="saveMacros(5)",
-                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save Macros
-        
-        //- button.pure-button(title="Print config.", @click="printConfig",
-        //-                         style="height:50px;width:120px;font-weight:normal;padding-top:5px") print Config
-        //- button.pure-button(title="Print config.", @click="flushConfig",
-        //-                         style="height:50px;width:120px;font-weight:normal;padding-top:5px") Flush Config
-
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
+                        button.submit-macros(title="Save Macros",@click="cancelMacros(5)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#f6f6f6;color:#000;border:0;margin-top:30px") Cancel
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 35c3208..1c23ee7 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -631,6 +631,12 @@ span.unit
   .macros
     width 90%
 
+    .warning-box
+      background-color #f9ff17
+      border-radius 10px
+      border 0
+      padding 4px
+
     .tabs
       margin-top 5px