diff --git a/src/js/macros.js b/src/js/macros.js
index 03c8ee5..74f55bf 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -41,10 +41,10 @@ module.exports = {
       return this.mach_state == "READY";
     },
     macrosLength: function () {
-      return this.config.macros.length > 8;
+      return this.tab > 8;
     },
     macrosGCodeList: function () {
-      return this.config.macrosList.map(el => el.file_name);
+      return this.config.macrosList.map(el => el.file_name).sort();
     },
     macrosList: function () {
       return this.config.macros.map(item => item.name);
@@ -64,6 +64,18 @@ module.exports = {
       this.newGcode = event.target.value;
       this.$dispatch("macros-edited");
     },
+    showDialogAsync: function (title, file) {
+      return new Promise((resolve, reject) => {
+        SvelteComponents.showDialog(title, {
+          file,
+          onComplete: () => {
+            this.last_file_time = undefined; // Force reload
+            resolve(true);
+          },
+          onerror: () => reject(false),
+        });
+      });
+    },
     loadMacrosGcode: async function () {
       const file = this.fileName;
       if (file != "default") {
@@ -123,13 +135,12 @@ module.exports = {
       }
       this.$dispatch("macros-edited");
       console.log("file.name", file.name);
-      SvelteComponents.showDialog("Upload", {
-        file,
-        onComplete: () => {
-          this.last_file_time = undefined; // Force reload
-        },
-      });
-      this.loadMacrosGcode();
+      try {
+        await this.showDialogAsync("Upload", file);
+        this.loadMacrosGcode();
+      } catch (error) {
+        console.error("Error uploading: ", error);
+      }
     },
     uploadGCode: async function (filename, file) {
       const xhr = new XMLHttpRequest();
@@ -227,15 +238,17 @@ module.exports = {
       this.config.macrosList = [];
     },
     clearMacros: async function () {
-      console.log("this.tab", this.tab - 1);
-      console.log("macros-name: ", document.getElementById("macros-name").value);
-      console.log("macros-color: ", document.getElementById("macros-color").value);
-      const defaultValue = this.config.macros[this.tab - 1];
-      console.log("DefaultValue: ", defaultValue);
-      document.getElementById("macros-name").value = defaultValue.name;
-      document.getElementById("macros-color").value = defaultValue.color;
+      if (this.tab == 0) {
+        document.getElementById("macros-name").value = "";
+        document.getElementById("macros-color").value = "";
+      } else {
+        const defaultValue = this.config.macros[this.tab - 1];
+        document.getElementById("macros-name").value = defaultValue.name;
+        document.getElementById("macros-color").value = defaultValue.color;
+      }
       this.newGcode = "";
       this.fileName = "default";
+      this.edited = false;
     },
     deleteAllMacros: async function () {
       this.config.macros = [
@@ -282,7 +295,7 @@ module.exports = {
       ];
       this.delete_all_macros();
       this.clearMacros();
-      console.log("tab in delete all:", this.tab);
+      this.edited = false;
       this.confirmReset = false;
       try {
         await api.put("config/save", this.config);
@@ -330,6 +343,10 @@ module.exports = {
       }
     },
     deleteSelectedMacros: async function () {
+      if (tab == 0) {
+        this.clearMacros();
+        return;
+      }
       this.config.macros.splice(this.tab - 1, 1);
       this.clearMacros();
       try {
@@ -342,15 +359,19 @@ module.exports = {
       this.deleteSelected = false;
     },
     loadMacrosSettings: function () {
-      console.log("selected : ", this.tab);
-      const macros = this.config.macros[this.tab - 1];
-      console.log("macros-name: ", document.getElementById("macros-name").value);
-      console.log("macros-color: ", document.getElementById("macros-color").value);
-      document.getElementById("macros-name").value = macros.name;
-      document.getElementById("macros-color").value = macros.color;
-      // document.getElementById("gcode-field").value = "";
-      this.newGcode = "";
-      this.$set("fileName", macros.name);
+      if (this.tab == 0) {
+        document.getElementById("macros-name").value = "";
+        document.getElementById("macros-color").value = "";
+        this.newGcode = "";
+        this.filename = "default";
+      } else {
+        const macros = this.config.macros[this.tab - 1];
+        document.getElementById("macros-name").value = macros.name;
+        document.getElementById("macros-color").value = macros.color;
+        this.newGcode = "";
+        this.filename = "default";
+      }
+      this.edited = false;
     },
   },
 };
diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug
index 648cf6c..1842507 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -46,9 +46,9 @@ script#macros-template(type="text/x-template")
 
     h1 Macros Configuration
     .flex-row-container
-        button.blue-button(title="Reset Macros", @click="confirmReset=true") Delete All
-        button.blue-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
-        button.blue-button(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
+        button.config-button.button-blue(title="Reset Macros", @click="confirmReset=true") Delete All
+        button.config-button.button-blue(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
+        button.config-button.button-blue(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
 
     .warning-box
         p
@@ -62,7 +62,7 @@ script#macros-template(type="text/x-template")
                                                 v-model="tab",@change="loadMacrosSettings",
                                                 style="width:250px;height:50px;border-radius:10px;padding-left:15px;font-weight:bold;margin-left:30px")
                                                 option( selected='' value='0')  Select a Macros
-                                                option(v-for="(index,file) in macrosList", :value="index+1") Macros {{index+1}}
+                                                option(v-for="(index,file) in macrosList", :value="index+1") {{file}}
         .macros-form
                         p.title Macros Name
                         .input-container
@@ -76,14 +76,14 @@ script#macros-template(type="text/x-template")
                                         option( selected='' value='default')  Create G-Code
                                         option(v-for="file in macrosGCodeList", :value="file") {{file}}
 
-                                button.blue-button(title="Upload a new GCode program.", @click="open",
+                                button.config-button.button-blue(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",
+                                button.config-button.button-blue(title="Delete Macros GCode",@click="deleteGCode = true",
                                         :disabled="!fileName =='default'") Delete
                                         .fa.fa-trash
                         br
@@ -91,7 +91,7 @@ script#macros-template(type="text/x-template")
                                 textarea.new-gcode(id="gcode-field", :value="newGcode" @input="updateNewGcode")
 
         button.submit-macros.button-submit(title="Save Macros",@click="confirmSave=true",:disabled="!edited") Save
-        button.submit-macros(title="Cancel Macros",@click="clearMacros",style="margin-left:5px;background-color:#fafafa;") Cancel
+        button.submit-macros(title="Cancel Macros",@click="clearMacros",style="margin-left:5px;background-color:#fafafa;":disabled="tab==0") Cancel
 
         button.submit-macros(title="Cancel Macros",@click="printState",style="margin-left:5px") Print State
         button.submit-macros(title="Cancel Macros",@click="printConfig",style="margin-left:5px") Print Config
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 3f09a58..79e1572 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -28,6 +28,11 @@ tt
   background-color #add1ad
   color #fff
 
+.button-blue:not([disabled])
+  background-color #0078e7
+  color #fff
+
+
 .header, .content
   padding 0
 
@@ -656,6 +661,7 @@ span.unit
     border-radius 5px
     border 0
     margin-bottom 10px
+    margin-right 200px
     margin-top 10px
     align-items center
     justify-content center
@@ -670,7 +676,7 @@ span.unit
   .flex-row-container
     display flex
     flex-direction row
-    width 440px
+    width 500px
     margin-bottom 1rem
 
   .tabs
@@ -689,15 +695,13 @@ span.unit
   .macros-form
     padding-left 30px
   
-  .blue-button
+  .config-button
     height 40px 
     width 135px
     font-weight normal
     border-radius 3px 
     border 0
     margin-left 1rem
-    background-color #0078e7
-    color #fff 
     display flex 
     align-items center
     justify-content space-around