diff --git a/src/js/control-view.js b/src/js/control-view.js
index ef48cda..71013fc 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -280,6 +280,10 @@ module.exports = {
       this.$dispatch("send", msg);
     },
 
+    getMacros: function(){
+      return this.config.macros;
+    },
+
     load: function () {
       const file_time = this.state.selected_time;
       const file = this.state.selected;
diff --git a/src/js/macros.js b/src/js/macros.js
index 9791973..e1a138e 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -40,6 +40,9 @@ module.exports = {
     macrosList: function () {
       return this.config.macrosList.map(el => el.file_name);
     },
+    getMacros: function(){
+      return this.config.macros;
+    },
     getMacrosColor: function () {
       return this.config.macros[this.tab]["color"];
     },
diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug
index 03509da..63517a1 100644
--- a/src/pug/templates/control-view.pug
+++ b/src/pug/templates/control-view.pug
@@ -216,7 +216,7 @@ script#control-view-template(type="text/x-template")
                       .bar(:style="'width:' + (progress || 0) * 100 + '%'")
 
     .macros-div(class="present")
-       button.macros-button(title="Click to run Macros",v-for="(index,macros) in config.macros",
+       button.macros-button(title="Click to run Macros",v-for="(index,macros) in getMacros",
           @click="runMacros(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}}
 
     .tabs
diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug
index 8655bfb..28bcc61 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -36,11 +36,11 @@ script#macros-template(type="text/x-template")
                 .fa.fa-plus
 
     .tabs
-        template(v-for="(index,macros) in config.macros",:key="index")
+        template(v-for="(index,macros) in getMacros",:key="index")
                 input(type="radio",:id="'tab'+index", name="tabs",@click="tab = index.toString()")
                 label(:for="'tab'+index",style="height:50px;width:100px") Macros {{index+1}}
 
-        section.tab-content(v-for="(index,macros) in config.macros",:id="'content'+index" ,v-show="tab == index")
+        section.tab-content(v-for="(index,macros) in config.macros",:id="'content'+index")
                 .macros-form
                         p.title Name
                         .input-container
diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index a5f3147..b0d4f29 100644
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -689,8 +689,9 @@ span.unit
     width 130px
     font-weight normal
     border-radius 5px 
+    border 0
     margin-left 1rem
-    background-color #5a9ad7 
+    background-color ##0078e7
     color #fff 
     display flex 
     align-items center