diff --git a/css/serialMonitor.css b/css/serialMonitor.css
index 5fcd784bf2c44fa83bb50742fd041af3a486ddd2..e5b0d44edbdbfa07132c6cf7bd62207e83d4a55b 100644
--- a/css/serialMonitor.css
+++ b/css/serialMonitor.css
@@ -39,7 +39,7 @@ body {
 }
 
 
-.btn {
+#controlPanel .btn {
       padding: 5px 10px;
       margin: 5px 10px;
 }
@@ -81,4 +81,13 @@ span.outgoing {
     background-color: #fdfdfd;
     display: inline-block;
     font-size: 30px;
-}
\ No newline at end of file
+}
+#positionPanel .btn-block {
+    margin-bottom: 15px;
+}
+
+#positionDataError{
+    font-size: 19px;
+    text-align: center;
+    padding-top: 20px;
+}
diff --git a/js/SerialMonitor/PositionControlPanelView.html b/js/SerialMonitor/PositionControlPanelView.html
index 3a26afc04d56479127e0b09460a822ecc26932e8..15f398bb68526c3f332aaf7b88fca03cacf65c04 100644
--- a/js/SerialMonitor/PositionControlPanelView.html
+++ b/js/SerialMonitor/PositionControlPanelView.html
@@ -1,6 +1,5 @@
-X: <%= xAxis %><br/>
-Y: <%= yAxis %><br/>
-Z: <%= zAxis %><br/><br/>
-A: <%= aAxis %><br/>
-B: <%= bAxis %><br/>
-C: <%= cAxis %><br/>
\ No newline at end of file
+<div id="positionData">
+</div><br/>
+<a href="#" id="askForPosition" class="btn btn-block btn-lg btn-default">Refresh</a>
+<a href="#" id="askForPosition" class="btn btn-block btn-lg btn-warning">Pause</a>
+<a href="#" id="stopMachine" class="btn pull-right btn-block btn-lg btn-danger">Stop</a>
\ No newline at end of file
diff --git a/js/SerialMonitor/PositionControlPanelView.js b/js/SerialMonitor/PositionControlPanelView.js
index d2f5742f45ed3db6372a7c0066a7b7fee5bb60c6..511318a5ea387b38415916e1ac2c07af71521ed0 100644
--- a/js/SerialMonitor/PositionControlPanelView.js
+++ b/js/SerialMonitor/PositionControlPanelView.js
@@ -3,7 +3,8 @@
  */
 
 
-define(['jquery', 'underscore', 'backbone', 'text!PositionControlPanelView.html'], function($, _, Backbone, template){
+define(['jquery', 'underscore', 'backbone', 'text!PositionControlPanelView.html', 'text!PositionDataView.html'],
+    function($, _, Backbone, template, positionTemplate){
 
     return Backbone.View.extend({
 
@@ -18,18 +19,26 @@ define(['jquery', 'underscore', 'backbone', 'text!PositionControlPanelView.html'
             this.render();
         },
 
-        _makeTemplateJSON: function(){
-            console.log(this.model);
+        _renderPositionData: function(){
             var machineState = this.model.getMachineState();
-            if (machineState === null) return {};
-            return machineState.toJSON();
+            console.log(machineState);
+            if (machineState === null) {
+                $("#positionData").html("<div id='positionDataError'>no position data available</div>");
+                return;
+            }
+            $("#positionData").html(_.template(positionTemplate)(machineState.toJSON()));
+        },
+
+        _makeTemplateJSON: function(){
+            return {};
         },
 
         render: function(){
             this.$el.html(this.template(this._makeTemplateJSON()));
+            this._renderPositionData();
         },
 
-        template: _.template(template)
+        template: _.template(template),
 
     });
 
diff --git a/js/SerialMonitor/PositionDataView.html b/js/SerialMonitor/PositionDataView.html
new file mode 100644
index 0000000000000000000000000000000000000000..3a26afc04d56479127e0b09460a822ecc26932e8
--- /dev/null
+++ b/js/SerialMonitor/PositionDataView.html
@@ -0,0 +1,6 @@
+X: <%= xAxis %><br/>
+Y: <%= yAxis %><br/>
+Z: <%= zAxis %><br/><br/>
+A: <%= aAxis %><br/>
+B: <%= bAxis %><br/>
+C: <%= cAxis %><br/>
\ No newline at end of file