diff --git a/src/js/macros.js b/src/js/macros.js
index 029f735..9b64e5d 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -12,7 +12,7 @@ module.exports = {
       tab: "1",
       confirmReset: false,
       confirmSave: false,
-      deleteSelected:false,
+      deleteSelected: false,
       deleteGCode: false,
       edited: false,
       newGcode: ["", "", "", "", "", "", "", ""],
@@ -37,6 +37,9 @@ module.exports = {
     is_ready: function () {
       return this.mach_state == "READY";
     },
+    macrosLength: function () {
+      return this.config.macros.length > 0;
+    },
     macrosList: function () {
       return this.config.macrosList.map(el => el.file_name);
     },
@@ -168,7 +171,9 @@ module.exports = {
       console.log("selectedValues: ", this.config.macros[this.tab - 1].file_name);
 
       var file_name =
-        this.config.macros[this.tab - 1].file_name == "default" ? macrosName + ".ngc" : this.config.macros[this.tab - 1].file_name;
+        this.config.macros[this.tab - 1].file_name == "default"
+          ? macrosName + ".ngc"
+          : this.config.macros[this.tab - 1].file_name;
       var file = this.newGcode[this.tab - 1];
 
       this.uploadGCode(file_name, file);
@@ -216,9 +221,9 @@ module.exports = {
     },
     cancelMacros: async function () {
       console.log("this.tab", this.tab);
-      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;
+      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;
       document.getElementById("gcode-field").value = "";
       this.$set("newGcode[this.tab]", "");
       this.config.macros[this.tab - 1].file_name = "default";
@@ -310,16 +315,15 @@ module.exports = {
         alert("Restore failed");
       }
     },
-    deleteSelectedMacros: async function(){
-      console.log("this.tab: ",this.tab);
-      //this.config.macros.splice(this.tab, 1);
-      // try {
-      //   await api.put("config/save", this.config);
-      //   this.$dispatch("update");
-      // } catch (error) {
-      //   console.error("Restore Failed: ", error);
-      //   alert("Restore failed");
-      // }
-    }
+    deleteSelectedMacros: async function () {
+      this.config.macros.splice(this.tab - 1, 1);
+      try {
+        await api.put("config/save", this.config);
+        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 1c8df1f..3719ae8 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -41,7 +41,7 @@ script#macros-template(type="text/x-template")
     .flex-row-container
         button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All
         button.config-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
-        button.config-button(title="Add a Macros", @click="deleteSelected=true", style="margin-left:5px") Delete Selected
+        button.config-button(title="Add a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
 
     .tabs
         template(v-for="(index,macros) in config.macros",:key="index+1")
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index f0e3305..6ba526e 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -654,7 +654,7 @@ span.unit
   .config-button
     height 45px
     margin-bottom 1rem
-    width 120px 
+    width 135px 
     border-radius 2px
     border 0
     font-weight normal