diff --git a/client/src/blocks/index.js b/client/src/blocks/index.js
new file mode 100644
index 0000000..901eefd
--- /dev/null
+++ b/client/src/blocks/index.js
@@ -0,0 +1,4 @@
+module.exports = {
+  input: require("./input.js"),
+  output: require("./output.js")
+}
diff --git a/client/src/blocks/input.js b/client/src/blocks/input.js
new file mode 100644
index 0000000..99a9e3d
--- /dev/null
+++ b/client/src/blocks/input.js
@@ -0,0 +1,13 @@
+module.exports =  {
+  name: "Input",
+  inputs: {
+  },
+  output: true,
+  execute: function({}, block){
+    block.find("input[name='input']").val();
+  },
+  pageBlock: {
+    html: "<input type='text' name='input'></input>",
+    js: function(){}
+  }
+}
diff --git a/client/src/blocks/output.js b/client/src/blocks/output.js
new file mode 100644
index 0000000..c860dff
--- /dev/null
+++ b/client/src/blocks/output.js
@@ -0,0 +1,14 @@
+module.exports =  {
+  name: "Output",
+  inputs: {
+    input: "Input"
+  },
+  output: false,
+  execute: function({input}, block){
+    $(elem).find("div.output").html(input1);
+  },
+  pageBlock: {
+    html: "<span class='output'></span>",
+    js: function(){}
+  }
+}
diff --git a/client/src/blocks/template.js b/client/src/blocks/template.js
new file mode 100644
index 0000000..d99312c
--- /dev/null
+++ b/client/src/blocks/template.js
@@ -0,0 +1,15 @@
+module.exports =  {
+  name: "Example Block",
+  inputs: {
+    input1: "Input 1"
+  },
+  output: true,
+  execute: function({input1}, elem){
+    $(elem).find("div.input1").html(input1);
+    return (output = parseInt(input1) + 1).toString();
+  },
+  pageBlock: {
+    html: "<div class='input1'></div>",
+    js: function(){}
+  }
+}
diff --git a/client/src/document.js b/client/src/document.js
new file mode 100644
index 0000000..f053ebf
--- /dev/null
+++ b/client/src/document.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/client/src/index.html b/client/src/index.html
index 8fda86b..781d609 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -7,38 +7,8 @@
       Header will go here
     </div>
     <div id="blocks">
-      <div class="block">
-        <div class="inputs">
-          <div id="input1">Input 1</div>
-          <div id="input2">Input 2</div>
-        </div>
-        <div class="main">
-          <div>
-            <div class="title">Test Block</div>
-            <div class="content">Custom code will go here</div>
-          </div>
-        </div>
-        <div class="output">
-          Output
-        </div>
-      </div>
     </div>
     <div id="workspace">
-      <div class="block">
-        <div class="inputs">
-          <div id="input1">Input 1</div>
-          <div id="input2">Input 2</div>
-        </div>
-        <div class="main">
-          <div>
-            <div class="title">Test Block</div>
-            <div class="content">Custom code will go here</div>
-          </div>
-        </div>
-        <div class="output">
-          Output
-        </div>
-      </div>
     </div>
   </body>
 </html>
diff --git a/client/src/index.js b/client/src/index.js
index da440c3..3fc198f 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1 +1,2 @@
 require("./styles.scss");
+require("./pageInteraction");
diff --git a/client/src/pageInteraction/block.hbs b/client/src/pageInteraction/block.hbs
new file mode 100644
index 0000000..d7a4c17
--- /dev/null
+++ b/client/src/pageInteraction/block.hbs
@@ -0,0 +1,18 @@
+<div class="block">
+  <div class="inputs">
+    {{#each inputs as |desc name|}}
+      <div id="{{name}}">{{desc}}</div>
+    {{/each}}
+  </div>
+  <div class="main">
+    <div>
+      <div class="title">{{name}}</div>
+      {{{pageBlock.html}}}
+    </div>
+  </div>
+  {{#if output}}
+    <div class="output">
+      Output
+    </div>
+  {{/if}}
+</div>
diff --git a/client/src/pageInteraction/dragDrop.js b/client/src/pageInteraction/dragDrop.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/pageInteraction/index.js b/client/src/pageInteraction/index.js
new file mode 100644
index 0000000..8b7db60
--- /dev/null
+++ b/client/src/pageInteraction/index.js
@@ -0,0 +1 @@
+require("./setupBlocks.js");
diff --git a/client/src/pageInteraction/setupBlocks.js b/client/src/pageInteraction/setupBlocks.js
new file mode 100644
index 0000000..235f00c
--- /dev/null
+++ b/client/src/pageInteraction/setupBlocks.js
@@ -0,0 +1,5 @@
+var $ = require("jquery");
+var blocks = require("../blocks");
+for(var block of Object.keys(blocks)){
+  $("#blocks").append(require("./block.hbs")(blocks[block]));
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index beda52c..f14a36d 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -9,6 +9,14 @@ body{
   flex-direction: column;
 }
 
+#blocks{
+  display: flex;
+  flex-direction: row;
+  .block{
+    margin: 10px;
+  }
+}
+
 .block{
   width: 200px;
   height: 200px;
@@ -19,6 +27,7 @@ body{
     display: flex;
     flex-direction: row;
     >div{
+      font-weight: bold;
       border: 1px solid black;
       flex-grow: 1;
       text-align: center;
@@ -37,6 +46,7 @@ body{
     }
   }
   >.output{
+    font-weight: bold;
     border: 1px solid black;
     text-align: center;
     padding-top: 5px;
@@ -48,7 +58,5 @@ body{
   position: relative;
   .block{
     position: absolute;
-    top: 40px;
-    left: 40px;
   }
 }
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 532a575..9e6aef1 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -24,6 +24,14 @@ module.exports = {
         }, {
           loader: "sass-loader"
         }]
+      },
+      {
+        test: /\.hbs$/,
+        use: [
+          {
+            loader: "handlebars-loader"
+          }
+        ]
       }
     ]
   }
diff --git a/package.json b/package.json
index 2b18a07..3d7843d 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,10 @@
   "homepage": "https://github.com/TimStallard/CryptoAssist#readme",
   "devDependencies": {
     "css-loader": "^0.26.1",
+    "handlebars": "^4.0.6",
+    "handlebars-loader": "^1.4.0",
     "html-webpack-plugin": "^2.28.0",
+    "jquery": "^3.1.1",
     "node-sass": "^4.5.0",
     "sass-loader": "^6.0.1",
     "style-loader": "^0.13.1",