diff --git a/src/Board.js b/src/Board.js
index 3de574c3ba1236a8cd0eb9011231899c0f030be0..c7a4c1e2f6efe6d9167712850366d33fa9c6bad6 100755
--- a/src/Board.js
+++ b/src/Board.js
@@ -2,7 +2,7 @@ import React from 'react';
 // Tab-based dynamic layout manager
 import FlexLayout from 'flexlayout-react';
 // MobX, a state manager
-import {toJS} from 'mobx'
+import {reaction, toJS} from 'mobx'
 import {observer} from 'mobx-react'
 // The React Components that are going into tabs
 import {VideoStream, DemoVideoStream} from './VideoStream'
@@ -26,6 +26,8 @@ class Board extends React.Component {
         super(props)
         this.state = {model: FlexLayout.Model.fromJson(json)}
 
+        reaction(() => this.props.store.sharedData.get('newTab'), this.addTab.bind(this));
+
         this.refLayout = React.createRef();
     }
 
@@ -77,12 +79,15 @@ class Board extends React.Component {
         }, null);
     }
 
-    onAdd(event) {
-        this.refLayout.current.addTabWithDragAndDropIndirect("Add panel<br>(Drag to location)", {
-            component: "h-gauge",
-            name: "added",
-            config: {value: 0.5}
-        }, null);
+    addTab() {
+        if (this.props.store.sharedData.has('newTab')) {
+            const {component, name} = this.props.store.sharedData.get('newTab');
+            this.refLayout.current.addTabWithDragAndDrop(`Add ${name}<br>(Drag to location)`, {
+                component: component,
+                name: "New tab"
+            }, null);
+            this.props.store.sharedData.delete('newTab')
+        }
     }
 
     /**
diff --git a/src/Menu/index.js b/src/Menu/index.js
index 7cb5bf297de22215ea4f76f13c003807cd16acac..58ebe8cad9aafa3436cbc0d1df49ae6dd3469a58 100644
--- a/src/Menu/index.js
+++ b/src/Menu/index.js
@@ -27,14 +27,12 @@ export function Menu(props) {
           Custom
         </div>
 
-        <NavItem eventKey="demo">
+        <NavItem eventKey="demo" onClick={() => props.drag('h-gauge', "Horizontal Gauge")}>
           <NavIcon>
-            {/* <a href="#"> */}
-              <img className="menu-button"
-                src={window.location.origin + "/images/icons/dashboard-grey.svg"}
-                alt="Demo mode"
-              />
-            {/* </a> */}
+            <img className="menu-button"
+              src={window.location.origin + "/images/icons/dashboard-grey.svg"}
+              alt="Demo mode"
+            />
           </NavIcon>
           <NavText>
             Demo
@@ -167,4 +165,4 @@ export function Menu(props) {
       </SideNav.Nav>
     </SideNav>
   )
-}
+})
diff --git a/src/index.js b/src/index.js
index 7d2c6311c71fd49f4041c843b693b143c9f91121..05796c31917fc211344850267c0f7363f4aa4e6d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,6 +33,7 @@ class ObservableStore {
     this.modal.mode = null;
     this.modal.component = null;
   }
+  dragging = false
 }
 decorate(ObservableStore, {
   components: observable,
@@ -82,10 +83,14 @@ class Main extends React.Component {
       </div>);
     }
 
+    function addTab(component, name) {
+      this.store.sharedData.set('newTab', {component: component, name: name});
+    }
+
     return (
       <div id="level-1">
         <div id="menu">
-          <Menu ros={this.ros}/>
+          <Menu ros={this.ros} store={this.store} drag={addTab.bind(this)}/>
         </div>
         <div id="level-2">
           <div id="header">