diff --git a/src/js/app.js b/src/js/app.js
index 961ae2c..b05ff75 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -114,7 +114,7 @@ module.exports = new Vue({
             full_version: "<loading>",
             ip: "<>",
             wifiName: "not connected",
-            macros:[]
+            macros:[{},{},{}]
           },
           state: {
             messages: [],
diff --git a/src/js/control-view.js b/src/js/control-view.js
index 464bdd7..700bdc8 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -496,24 +496,6 @@ module.exports = {
 
         showProbeDialog: function(probeType) {
             SvelteComponents.showDialog("Probe", { probeType });
-        },
-        
-        runMacros: function(id){
-            if(id==null || id == undefined ){
-                console.log("id null/undefined");
-                return;
-            }
-            if(this.config.macros!=undefined && this.config.macros.length!=0){
-                this.config.macros.find(el=>{
-                    if(el.id==id){
-                        console.log(el);
-                    }else{
-                        console.log("error in finding macros");
-                    }
-                })
-            }else{
-                console.log("No macros found");
-            }
         }
     },
 
diff --git a/src/js/macros.js b/src/js/macros.js
index 128308d..873cde7 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -1,5 +1,6 @@
 "use strict";
 
+const api = require("./api");
 const utils = require("./utils");
 
 module.exports = {
@@ -80,22 +81,29 @@ module.exports = {
                 }
             });
         },
-        saveMacros: function(){
+        saveMacros: async function(){
             var macrosName = document.getElementById("macros-name").value;
             var macrosColor = document.getElementById("macros-color").value;
             if(this.config.macros == undefined) {
                 console.log("macros is undefined");
                 this.config.macros=[];
-                return;
+            }else{
+                this.config.macros.push({
+                    id:Math.round(Math.random()*100000),
+                    name:macrosName,
+                    color:macrosColor,
+                    gcode:this.state.selected,
+                })
             }
-            this.config.macros.push({
-                id:Math.round(Math.random()*100000),
-                name:macrosName,
-                color:macrosColor,
-                gcode:this.state.selected,
-            })
-            console.log("Successfully saved");
             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");
+            }
         },
         printConfig: function(){
             console.log(this.config);
diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug
index 843861a..8f233ee 100644
--- a/src/pug/templates/control-view.pug
+++ b/src/pug/templates/control-view.pug
@@ -208,9 +208,9 @@ script#control-view-template(type="text/x-template")
                       .bar(:style="'width:' + (progress || 0) * 100 + '%'")
 
     .macros-div
-      .macros-buttons(class="present",v-if=" typeof config.macros != 'undefined'")
+      .macros-buttons(class="present",v-if="isMacrosPresent")
         p there is a active macro
-      .macros-buttons(class ="absent",v-if="typeof config.macros == 'undefined'")
+      .macros-buttons(class ="absent",v-if="!isMacrosPresent")
         p there is No macro
 
 
diff --git a/src/resources/config-template.json b/src/resources/config-template.json
index dc3ee61..2fd5e78 100644
--- a/src/resources/config-template.json
+++ b/src/resources/config-template.json
@@ -584,6 +584,22 @@
     }
   },
 
+  "macros": {
+    "type":"list",
+    "index":"123",
+    "default":[
+      { "name" : "Macros 1"},
+      { "name" : "Macros 2"},
+      { "name" : "Macros 3"}
+    ],
+    "template": {
+      "name": {
+        "type": "text",
+        "default": "New Macro"
+      }
+    }
+  },
+
   "admin": {
     "auto-check-upgrade": {
       "type": "bool",
diff --git a/src/resources/macros_config.json b/src/resources/macros_config.json
new file mode 100644
index 0000000..8e52202
--- /dev/null
+++ b/src/resources/macros_config.json
@@ -0,0 +1,11 @@
+[
+    {
+        
+    },
+    {
+
+    },
+    {
+
+    }
+]
\ No newline at end of file