diff --git a/src/js/macros.js b/src/js/macros.js
index d0a89c7..053d1a3 100644
--- a/src/js/macros.js
+++ b/src/js/macros.js
@@ -1,5 +1,51 @@
 "use strict";
 
+const utils = require("./utils");
+
 module.exports = {
     template: "#macros-template",
+    props: [ "config", "template", "state" ],
+
+    data: function (){
+        return {
+            no_of_macros : 0,
+            toolpath_progress: 0,
+        }
+    },
+    components: {
+        "axis-control": require("./axis-control"),
+        "path-viewer": require("./path-viewer"),
+        "gcode-viewer": require("./gcode-viewer")
+    },
+    computed:{
+        is_ready: function() {
+            return this.mach_state == "READY";
+        },
+    },
+    methods:{
+        print: function(){
+            console.log(this.state);
+        },
+        open: function() {
+            utils.clickFileInput("gcode-file-input");
+        },
+        getMacrosList : function (){
+            return no_of_macros;
+        },
+        load: function() {
+            const file_time = this.state.selected_time;
+            const file = this.state.selected;
+            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);
+        },
+    }
 }
\ No newline at end of file
diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug
index 44ee293..7ed1fcb 100644
--- a/src/pug/templates/macros.pug
+++ b/src/pug/templates/macros.pug
@@ -1,4 +1,20 @@
 script#macros-template(type="text/x-template")
   #macros
-  h1 Macros
-  p Hello, World
+  h2 Macros
+  button.printVariable(title="print Varibale", @click='print',
+            style="height:100px;width:100px;font-weight:normal")
+            .fa.fa-folder-download
+  button.pure-button(title="Upload a new GCode program.", @click="open",
+            :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")
+            .fa.fa-folder-open
+  select(title="Select previously uploaded GCode programs.",
+            v-model="state.selected", @change="load", :disabled="!is_ready",
+            style="max-width:100%")
+            option(v-for="file in state.files", :value="file") {{file}}
+
+          .progress(v-if="toolpath_progress && toolpath_progress < 1",
+            title="Simulating GCode to check for errors, calculate ETA and " +
+              "generate 3D view.  You can run GCode before the simulation " +
+              "finishes.")
+            div(:style="'width:' + (toolpath_progress || 0) * 100 + '%'")
+              label Simulating {{(toolpath_progress || 0) | percent}}