diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx
index dd87ee7b410430be051a84b481a60ba143843d29..4a16a9129082cfcfdefa95440e53866e3eebeca6 100644
--- a/src/components/monitor-list/monitor-list.jsx
+++ b/src/components/monitor-list/monitor-list.jsx
@@ -16,10 +16,13 @@ const MonitorList = props => (
             <Monitor
                 id={monitorData.id}
                 key={monitorData.id}
+                mode={monitorData.mode}
                 opcode={monitorData.opcode}
                 params={monitorData.params}
                 spriteName={monitorData.spriteName}
                 value={monitorData.value}
+                x={monitorData.x}
+                y={monitorData.y}
                 onDragEnd={props.onMonitorChange}
             />
         ))}
diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index 807a33c4b90e7a9bab933e3838894308da3cbdc2..3e75f9ae167dc7fea201f8018cf8c74d2c609b9f 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -19,9 +19,9 @@ class Monitor extends React.Component {
             'setElement'
         ]);
 
-        // @todo this eventually will be stored in the VM
+        // @todo consume from VM, but need to store until there are APIs to update vm
         this.state = {
-            type: 'default'
+            type: props.mode
         };
     }
     componentDidMount () {
@@ -101,6 +101,7 @@ class Monitor extends React.Component {
 Monitor.propTypes = {
     addMonitorRect: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
+    mode: PropTypes.oneOf(['default', 'slider', 'large', 'list']),
     monitorLayout: PropTypes.shape({
         monitors: PropTypes.object,
         savedMonitorPositions: PropTypes.object