diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 2fbc259..f3354cc 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -15,7 +15,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import { Container } from 'flux/utils';
 import Fullscreenable from 'react-fullscreenable';
 import classNames from 'classnames';
@@ -38,13 +38,15 @@ import ConfigStore from '../componentconfig/config-store'
 import AppDispatcher from '../common/app-dispatcher';
 
 import 'react-contexify/dist/ReactContexify.min.css';
+import WidgetContainer from '../widget/widget-container';
+import EditableWidgetContainer from '../widget/editable-widget-container';
 
 class Dashboard extends Component {
 
   static lastWidgetKey = 0;
   static webSocketsOpened = false;
   static getStores() {
-    return [ DashboardStore, FileStore, WidgetStore, SignalStore, ConfigStore, ICStore];
+    return [DashboardStore, FileStore, WidgetStore, SignalStore, ConfigStore, ICStore];
   }
 
   static calculateState(prevState, props) {
@@ -55,7 +57,7 @@ class Dashboard extends Component {
     const sessionToken = localStorage.getItem("token");
 
     let dashboard = DashboardStore.getState().find(d => d.id === parseInt(props.match.params.dashboard, 10));
-    if (dashboard == null){
+    if (dashboard == null) {
       AppDispatcher.dispatch({
         type: 'dashboards/start-load',
         data: props.match.params.dashboard,
@@ -68,11 +70,11 @@ class Dashboard extends Component {
 
     // compute max y coordinate
     let maxHeight = null;
-    maxHeight = Object.keys(widgets).reduce( (maxHeightSoFar, widgetKey) => {
+    maxHeight = Object.keys(widgets).reduce((maxHeightSoFar, widgetKey) => {
       let thisWidget = widgets[widgetKey];
       let thisWidgetHeight = thisWidget.y + thisWidget.height;
 
-      return thisWidgetHeight > maxHeightSoFar? thisWidgetHeight : maxHeightSoFar;
+      return thisWidgetHeight > maxHeightSoFar ? thisWidgetHeight : maxHeightSoFar;
     }, 0);
 
 
@@ -82,11 +84,10 @@ class Dashboard extends Component {
     if (dashboard !== undefined) {
       configs = ConfigStore.getState().filter(config => config.scenarioID === dashboard.scenarioID);
       files = FileStore.getState().filter(file => file.scenarioID === dashboard.scenarioID);
-      if(dashboard.height === 0){
+      if (dashboard.height === 0) {
         dashboard.height = 400;
       }
-      else if(maxHeight + 80 > dashboard.height)
-      {
+      else if (maxHeight + 80 > dashboard.height) {
         dashboard.height = maxHeight + 80;
       }
     }
@@ -95,9 +96,9 @@ class Dashboard extends Component {
     let signals = []
     let allSignals = SignalStore.getState();
     let sig, con;
-    for (sig of allSignals){
-      for (con of configs){
-        if (sig.configID === con.id){
+    for (sig of allSignals) {
+      for (con of configs) {
+        if (sig.configID === con.id) {
           signals.push(sig);
         }
       }
@@ -105,11 +106,11 @@ class Dashboard extends Component {
 
     // filter ICs to the ones used by this scenario
     let ics = []
-    if (configs.length > 0){
+    if (configs.length > 0) {
       ics = ICStore.getState().filter(ic => {
         let ICused = false;
-        for (let config of configs){
-          if (ic.id === config.icID){
+        for (let config of configs) {
+          if (ic.id === config.icID) {
             ICused = true;
             break;
           }
@@ -130,13 +131,13 @@ class Dashboard extends Component {
       editing: prevState.editing || false,
       paused: prevState.paused || false,
 
-      editModal:  prevState.editModal || false,
+      editModal: prevState.editModal || false,
       editOutputSignalsModal: prevState.editOutputSignals || false,
       editInputSignalsModal: prevState.editInputSignals || false,
       filesEditModal: prevState.filesEditModal || false,
       filesEditSaveState: prevState.filesEditSaveState || [],
-      modalData:  null,
-      modalIndex:  null,
+      modalData: null,
+      modalIndex: null,
       widgetChangeData: [],
       widgetOrigIDs: prevState.widgetOrigIDs || [],
 
@@ -172,9 +173,9 @@ class Dashboard extends Component {
   }
 
   componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
-      // open web sockets if ICs are already known and sockets are not opened yet
-    if(this.state.ics !== undefined && !Dashboard.webSocketsOpened){
-      if(this.state.ics.length > 0){
+    // open web sockets if ICs are already known and sockets are not opened yet
+    if (this.state.ics !== undefined && !Dashboard.webSocketsOpened) {
+      if (this.state.ics.length > 0) {
         console.log("Starting to open IC websockets:", this.state.ics);
         AppDispatcher.dispatch({
           type: 'ics/open-sockets',
@@ -186,7 +187,7 @@ class Dashboard extends Component {
     }
 
 
-    if(prevState.dashboard === undefined && this.state.dashboard !== undefined){
+    if (prevState.dashboard === undefined && this.state.dashboard !== undefined) {
       // the dashboard was loaded, so that the scenarioID is available
 
       // load configs of scenario
@@ -231,7 +232,7 @@ class Dashboard extends Component {
 
 
   transformToWidgetsList(widgets) {
-    return Object.keys(widgets).map( (key) => widgets[key]);
+    return Object.keys(widgets).map((key) => widgets[key]);
   }
 
   handleDrop(widget) {
@@ -252,35 +253,35 @@ class Dashboard extends Component {
     this.widgetChange(updated_widget, key, this.saveChanges);
   }
 
-  widgetChange(widget, index, callback = null){
+  widgetChange(widget, index, callback = null) {
     let temp = this.state.widgetChangeData;
     temp.push(widget);
-    this.setState({widgetChangeData: temp});
+    this.setState({ widgetChangeData: temp });
 
   }
 
 
 
-  editWidget(widget, index){
+  editWidget(widget, index) {
     this.setState({ editModal: true, modalData: widget, modalIndex: index });
   };
 
-  startEditFiles(){
+  startEditFiles() {
     let tempFiles = [];
-    this.state.files.forEach( file => {
+    this.state.files.forEach(file => {
       tempFiles.push({
         id: file.id,
         name: file.name
       });
     })
-    this.setState({filesEditModal: true, filesEditSaveState: tempFiles});
+    this.setState({ filesEditModal: true, filesEditSaveState: tempFiles });
   }
 
-  closeEditFiles(){
+  closeEditFiles() {
     this.setState({ filesEditModal: false });
   }
 
-  closeEdit(data){
+  closeEdit(data) {
 
     if (data == null) {
 
@@ -315,11 +316,11 @@ class Dashboard extends Component {
   };
 
 
-  startEditing(){
+  startEditing() {
     let originalIDs = [];
-    this.state.widgets.forEach( widget => {
+    this.state.widgets.forEach(widget => {
       originalIDs.push(widget.id);
-      if(widget.type === 'Slider' || widget.type === 'NumberInput' || widget.type === 'Button'){
+      if (widget.type === 'Slider' || widget.type === 'NumberInput' || widget.type === 'Button') {
         AppDispatcher.dispatch({
           type: 'widgets/start-edit',
           token: this.state.sessionToken,
@@ -339,21 +340,21 @@ class Dashboard extends Component {
       token: this.state.sessionToken
     });
 
-    this.state.widgetChangeData.forEach( widget => {
+    this.state.widgetChangeData.forEach(widget => {
       AppDispatcher.dispatch({
         type: 'widgets/start-edit',
         token: this.state.sessionToken,
         data: widget
       });
     });
-    this.setState({ editing: false, widgetChangeData: []});
+    this.setState({ editing: false, widgetChangeData: [] });
   };
 
   saveChanges() {
     // Transform to a list
     const dashboard = Object.assign({}, this.state.dashboard.toJS(), {
-        widgets: this.transformToWidgetsList(this.state.widgets)
-      });
+      widgets: this.transformToWidgetsList(this.state.widgets)
+    });
 
     AppDispatcher.dispatch({
       type: 'dashboards/start-edit',
@@ -364,16 +365,16 @@ class Dashboard extends Component {
 
   cancelEditing() {
     //raw widget has no id -> cannot be deleted in its original form
-      this.state.widgets.forEach(widget => {
-        let tempID = this.state.widgetOrigIDs.find(element => element === widget.id);
-        if(typeof tempID === 'undefined'){
-          AppDispatcher.dispatch({
-            type: 'widgets/start-remove',
-            data: widget,
-            token: this.state.sessionToken
-          });
-        }
-      })
+    this.state.widgets.forEach(widget => {
+      let tempID = this.state.widgetOrigIDs.find(element => element === widget.id);
+      if (typeof tempID === 'undefined') {
+        AppDispatcher.dispatch({
+          type: 'widgets/start-remove',
+          data: widget,
+          token: this.state.sessionToken
+        });
+      }
+    })
 
     AppDispatcher.dispatch({
       type: 'widgets/start-load',
@@ -386,7 +387,7 @@ class Dashboard extends Component {
       data: this.props.match.params.dashboard,
       token: this.state.sessionToken
     });
-    this.setState({ editing: false, widgetChangeData: []});
+    this.setState({ editing: false, widgetChangeData: [] });
 
   };
 
@@ -400,30 +401,30 @@ class Dashboard extends Component {
 
   setDashboardSize(value) {
     const maxHeight = Object.values(this.state.widgets).reduce((currentHeight, widget) => {
-    const absolutHeight = widget.y + widget.height;
+      const absolutHeight = widget.y + widget.height;
 
-    return absolutHeight > currentHeight ? absolutHeight : currentHeight;
+      return absolutHeight > currentHeight ? absolutHeight : currentHeight;
     }, 0);
     let dashboard = this.state.dashboard;
 
-    if(value === -1){
+    if (value === -1) {
 
       let tempHeight = this.state.dashboard.height - 50;
 
-      if(tempHeight >= 400 && tempHeight >= (maxHeight + 80)){
+      if (tempHeight >= 400 && tempHeight >= (maxHeight + 80)) {
         dashboard.height = tempHeight;
-        this.setState({dashboard});
+        this.setState({ dashboard });
       }
     }
-    else{
-      dashboard.height = this.state.dashboard.height +50;
-      this.setState( {dashboard});
+    else {
+      dashboard.height = this.state.dashboard.height + 50;
+      this.setState({ dashboard });
     }
 
     this.forceUpdate();
   }
 
-  pauseData(){
+  pauseData() {
     this.setState({ paused: true });
   };
 
@@ -431,25 +432,25 @@ class Dashboard extends Component {
     this.setState({ paused: false });
   };
 
-  editInputSignals(){
-    this.setState({editInputSignalsModal: true});
+  editInputSignals() {
+    this.setState({ editInputSignalsModal: true });
   };
 
-  editOutputSignals(){
-    this.setState({editOutputSignalsModal: true});
+  editOutputSignals() {
+    this.setState({ editOutputSignalsModal: true });
   };
 
-  closeEditSignalsModal(direction){
-    if( direction === "in") {
-      this.setState({editInputSignalsModal: false});
-    } else if( direction === "out"){
-      this.setState({editOutputSignalsModal: false});
+  closeEditSignalsModal(direction) {
+    if (direction === "in") {
+      this.setState({ editInputSignalsModal: false });
+    } else if (direction === "out") {
+      this.setState({ editOutputSignalsModal: false });
     }
   }
 
 
   render() {
-    if (this.state.dashboard === undefined){
+    if (this.state.dashboard === undefined) {
       return <div className="section-title">  <span>{"Loading Dashboard..."}</span>  </div>
     }
 
@@ -473,55 +474,63 @@ class Dashboard extends Component {
           onFullscreen={this.props.toggleFullscreen}
           onPause={this.pauseData.bind(this)}
           onUnpause={this.unpauseData.bind(this)}
-          onEditFiles = {this.startEditFiles.bind(this)}
-          onEditOutputSignals = {this.editOutputSignals.bind(this)}
-          onEditInputSignals = {this.editInputSignals.bind(this)}
+          onEditFiles={this.startEditFiles.bind(this)}
+          onEditOutputSignals={this.editOutputSignals.bind(this)}
+          onEditInputSignals={this.editInputSignals.bind(this)}
         />
       </div>
 
-      <div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
+      <div className="box box-content" onContextMenu={(e) => e.preventDefault()}>
         {this.state.editing &&
-        <WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} dashboard={this.state.dashboard} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
+          <WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} dashboard={this.state.dashboard} onDashboardSizeChange={this.setDashboardSize.bind(this)} widgets={this.state.widgets} />
         }
-        {!draggable?(
-        <WidgetArea widgets={this.state.widgets} dropZoneHeight = {dropZoneHeight} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
-          {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
-            <WidgetContextMenu
-            key={widgetKey}
-            index={parseInt(widgetKey,10)}
-            widget={this.state.widgets[widgetKey]}
-            onEdit={this.editWidget.bind(this)}
-            onDelete={this.deleteWidget.bind(this)}
-            onChange={this.widgetChange.bind(this)}
+        {!draggable ? (
+          <WidgetArea widgets={this.state.widgets} dropZoneHeight={dropZoneHeight} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
+            {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
+              <WidgetContainer widget={this.state.widgets[widgetKey]}>
+                <WidgetContextMenu
+                  key={widgetKey}
+                  index={parseInt(widgetKey, 10)}
+                  widget={this.state.widgets[widgetKey]}
+                  onEdit={this.editWidget.bind(this)}
+                  onDelete={this.deleteWidget.bind(this)}
+                  onChange={this.widgetChange.bind(this)}
 
-            onWidgetChange={this.widgetChange.bind(this)}
-            onWidgetStatusChange={this.widgetStatusChange.bind(this)}
-            editing={this.state.editing}
-            grid={grid}
-            paused={this.state.paused}
-            />
-
-
-          ))}
-        </WidgetArea>
+                  onWidgetChange={this.widgetChange.bind(this)}
+                  onWidgetStatusChange={this.widgetStatusChange.bind(this)}
+                  editing={this.state.editing}
+                  grid={grid}
+                  paused={this.state.paused}
+                />
+              </WidgetContainer>
+            ))}
+          </WidgetArea>
         ) : (
-          <WidgetArea widgets={this.state.widgets} editing={this.state.editing} dropZoneHeight= {dropZoneHeight} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
-          {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
-            <Widget
-              key={widgetKey}
-              data={this.state.widgets[widgetKey]}
-              onWidgetChange={this.widgetChange.bind(this)}
-              onWidgetStatusChange={this.widgetStatusChange.bind(this)}
-              editing={this.state.editing}
-              index={parseInt(widgetKey,10)}
-              grid={grid}
-              paused={this.state.paused}
-            />
+            <WidgetArea widgets={this.state.widgets} editing={this.state.editing} dropZoneHeight={dropZoneHeight} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
+              {this.state.widgets != null && Object.keys(this.state.widgets).map(widgetKey => (
+                <EditableWidgetContainer
+                  widget={this.state.widgets[widgetKey]}
+                  grid={grid}
+                  index={parseInt(widgetKey, 10)}
+                  onWidgetChange={this.widgetChange.bind(this)}>
+                  <WidgetContextMenu
+                    key={widgetKey}
+                    index={parseInt(widgetKey, 10)}
+                    widget={this.state.widgets[widgetKey]}
+                    onEdit={this.editWidget.bind(this)}
+                    onDelete={this.deleteWidget.bind(this)}
+                    onChange={this.widgetChange.bind(this)}
 
-          ))}
-        </WidgetArea>
+                    onWidgetChange={this.widgetChange.bind(this)}
+                    onWidgetStatusChange={this.widgetStatusChange.bind(this)}
+                    editing={this.state.editing}
+                    paused={this.state.paused}
+                  />
+                </EditableWidgetContainer>
+              ))}
+            </WidgetArea>
 
-        )}
+          )}
 
         <EditWidget
           sessionToken={this.state.sessionToken}
diff --git a/src/widget/widget-context-menu.js b/src/widget/widget-context-menu.js
index 0ce2604..5bb1357 100644
--- a/src/widget/widget-context-menu.js
+++ b/src/widget/widget-context-menu.js
@@ -116,7 +116,6 @@ class WidgetContextMenu extends React.Component {
               onWidgetStatusChange={this.props.onWidgetStatusChange}
               editing={this.props.editing}
               index={this.props.index}
-              grid={this.props.grid}
               paused={this.props.paused}
             />
     </MenuProvider>
diff --git a/src/widget/widget.js b/src/widget/widget.js
index 98b1ce0..fae7af2 100644
--- a/src/widget/widget.js
+++ b/src/widget/widget.js
@@ -44,6 +44,8 @@ import WidgetTopology from './widgets/topology';
 import WidgetLine from './widgets/line';
 //import WidgetHTML from './widgets/html';
 
+import WidgetEditMenu from '../widget/widget-edit-menu';
+
 import '../styles/widgets.css';
 
 class Widget extends React.Component {
@@ -230,20 +232,9 @@ class Widget extends React.Component {
 
     return null;
   }
-  rn
 
   render() {
-    const element = this.createWidget(this.props.data);
-
-    if (this.props.editing) {
-      return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={this.props.index} onWidgetChange={this.props.onWidgetChange}>
-        {element}
-      </EditableWidgetContainer>;
-    }
-
-    return <WidgetContainer widget={this.props.data}>
-      {element}
-    </WidgetContainer>;
+    return this.createWidget(this.props.data);
   }
 }