diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js
index 756a09d..04163f0 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -41,11 +41,11 @@ class DashboardButtonGroup extends React.Component {
       buttons.push(
         <Button key={key++} onClick={this.props.onSave} style={buttonStyle}>
           <Icon icon="info" />
-          <span class="glyphicon glyphicon-floppy-disk"></span> Save
+          <span className="glyphicon glyphicon-floppy-disk"></span> Save
         </Button>,
         <Button key={key++} onClick={this.props.onCancel} style={buttonStyle}>
           <Icon icon="info" />
-          <span class="glyphicon glyphicon-remove" ></span> Cancel
+          <span className="glyphicon glyphicon-remove" ></span> Cancel
         </Button>
       );
     } else {
@@ -77,7 +77,7 @@ class DashboardButtonGroup extends React.Component {
       buttons.push(
         <Button key={key++} onClick={this.props.onEdit} style={buttonStyle}>
           <Icon icon="info" />
-          <span className="glyphicon glyphicon-pencil"></span> Pause
+          <span className="glyphicon glyphicon-pencil"></span> Edit
         </Button>
       );
     }
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index b8ec62e..e45c5ad 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -188,13 +188,13 @@ class Dashboard extends Component {
     }
 
   }
-/*
 
+/*
   componentWillUnmount() {
       //document.removeEventListener('keydown', this.handleKeydown.bind(this));
   }
 
-  /*componentDidUpdate() {
+  componentDidUpdate() {
     if (this.state.dashboard._id !== this.props.match.params.dashboard) {
       this.reloadDashboard();
     }
@@ -224,9 +224,9 @@ class Dashboard extends Component {
         }
       });
     }
-  }*
+  } */
 
-  /*handleKeydown(e) {
+  handleKeydown(e) {
     switch (e.key) {
       case ' ':
       case 'p':
@@ -242,7 +242,7 @@ class Dashboard extends Component {
     }
   }
 
-  }
+  
   /*
   * Adapt the area's height with the position of the new widget.
   * Return true if the height increased, otherwise false.
@@ -293,16 +293,25 @@ class Dashboard extends Component {
   }
 
   handleDrop(widget) {
-    const widgets = this.state.dashboard.get('widgets') || [];
 
-    const widgetKey = this.getNewWidgetKey();
+    widget.dashboardID = this.state.dashboard.id;
+
+    AppDispatcher.dispatch({
+      type: 'widgets/start-add',
+      token: this.state.sessionToken,
+      data: widget
+    });
+    /*let widgets = []; 
+    widgets = this.state.dashboard.get('widgets');
+
+    const widgetKey = Dashboard.getNewWidgetKey();
     widgets[widgetKey] = widget;
 
-    const dashboard = this.state.dashboard.set('widgets');
+    const dashboard = this.state.dashboard.set('widgets',widgets);
 
     // this.increaseHeightWithWidget(widget);
 
-    this.setState({ dashboard });
+    this.setState({ dashboard });*/
   };
 
 
@@ -311,7 +320,7 @@ class Dashboard extends Component {
     this.widgetChange(updated_widget, key, this.saveChanges);
   }
 
-  widgetChange = (widget, index, callback = null) => {
+  widgetChange(widget, index, callback = null){
     const widgets = this.state.dashboard.get('widgets');
     widgets[index] = widget;
 
@@ -352,18 +361,21 @@ class Dashboard extends Component {
 
 
   closeEdit(data){
+    console.log("dashboard close edit was called: ");
+    console.log(data);
     if (data == null) {
       this.setState({ editModal: false });
 
       return;
     }
 
-    const widgets = this.state.dashboard.get('widgets');
-    widgets[this.state.modalIndex] = data;
+    AppDispatcher.dispatch({
+      type: 'widgets/start-edit',
+      token: this.state.sessionToken,
+      data: data
+    });
 
-    const dashboard = this.state.dashboard.set('widgets', widgets);
-
-    this.setState({ editModal: false, dashboard });
+    this.setState({ editModal: false });
   };
 
 
@@ -390,7 +402,7 @@ class Dashboard extends Component {
   saveEditing() {
     // Provide the callback so it can be called when state change is applied
     // TODO: Check if callback is needed
-    this.setState({ editing: false }, this.saveChanges );
+    this.setState({ editing: false });
   };
 
   saveChanges() {
@@ -407,9 +419,8 @@ class Dashboard extends Component {
   }
 
   cancelEditing() {
-    this.setState({ editing: false, dasboard: {} });
+    this.setState({ editing: false });
 
-    this.reloadDashboard();
   };
 
   setGrid(value) {
@@ -440,29 +451,30 @@ class Dashboard extends Component {
 
         <DashboardButtonGroup
           editing={this.state.editing}
+          onEdit={this.startEditing.bind(this)}
           fullscreen={this.props.isFullscreen}
           paused={this.state.paused}
-          onSave={this.saveEditing}
-          onCancel={this.cancelEditing}
+          onSave={this.saveEditing.bind(this)}
+          onCancel={this.cancelEditing.bind(this)}
           onFullscreen={this.props.toggleFullscreen}
-          onPause={this.pauseData}
-          onUnpause={this.unpauseData}
+          onPause={this.pauseData.bind(this)}
+          onUnpause={this.unpauseData.bind(this)}
         />
       </div>
 
       <div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
         {this.state.editing &&
-        <WidgetToolbox grid={grid} onGridChange={this.setGrid} widgets={widgets} />
+        <WidgetToolbox grid={grid} onGridChange={this.setGrid.bind(this)} widgets={widgets} />
         }
 
-        <WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop}>
+        <WidgetArea widgets={widgets} editing={this.state.editing} grid={grid} onWidgetAdded={this.handleDrop.bind(this)}>
           {widgets != null && Object.keys(widgets).map(widgetKey => (
             <Widget
               key={widgetKey}
               data={widgets[widgetKey]}
               simulation={this.state.simulation}
-              onWidgetChange={(w, k) => this.widgetChange(w, k)}
-              onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
+              onWidgetChange={this.widgetChange.bind(this)}
+              onWidgetStatusChange={this.widgetStatusChange.bind(this)}
               editing={this.state.editing}
               index={widgetKey}
               grid={grid}
@@ -480,16 +492,20 @@ class Dashboard extends Component {
             widget={widgets[widgetKey]} 
             onEdit={this.editWidget.bind(this)}
             onDelete={this.deleteWidget.bind(this)} 
-            onChange={this.widgetChange} />
+            onChange={this.widgetChange.bind(this)} />
         ))}
         
-        <EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
+        <EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={this.closeEdit.bind(this)} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
 
 
       </div>
     </div>;
   }
 }
+/*
+onWidgetChange={(w, k) => this.widgetChange(w, k)}
+onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
+*/
 
 let fluxContainerConverter = require('../common/FluxContainerConverter');
 export default Fullscreenable()(Container.create(fluxContainerConverter.convert(Dashboard), { withProps: true }));
diff --git a/src/widget/edit-widget-min-max-control.js b/src/widget/edit-widget-min-max-control.js
index a09ae77..c717f55 100644
--- a/src/widget/edit-widget-min-max-control.js
+++ b/src/widget/edit-widget-min-max-control.js
@@ -41,6 +41,8 @@ class EditWidgetMinMaxControl extends React.Component {
   }
 
   render() {
+    console.log("in minmax control, widget: ");
+    console.log(this.state.widget);
     return <FormGroup>
       <FormLabel>{this.props.label}</FormLabel>
       <FormCheck id={this.props.controlId + "UseMinMax"} checked={this.state.widget[this.props.controlId + "UseMinMax"] || ''} onChange={e => this.props.handleChange(e)}>Enable min-max</FormCheck>
diff --git a/src/widget/edit-widget-number-control.js b/src/widget/edit-widget-number-control.js
index 378d724..0328333 100644
--- a/src/widget/edit-widget-number-control.js
+++ b/src/widget/edit-widget-number-control.js
@@ -40,7 +40,7 @@ class EditWidgetNumberControl extends Component {
     return (
         <FormGroup controlId={this.props.controlId}>
           <FormLabel>{this.props.label}</FormLabel>
-          <FormControl type="number" step="any" defaultValue={this.props.defaultValue} value={this.state.widget[this.props.controlId] || 0} onChange={e => this.props.handleChange(e)} />
+          <FormControl type="number" step="any" value={this.state.widget[this.props.controlId] || 0} onChange={e => this.props.handleChange(e)} />
         </FormGroup>
     );
   }
diff --git a/src/widget/edit-widget-signal-control.js b/src/widget/edit-widget-signal-control.js
index 9591470..18a180f 100644
--- a/src/widget/edit-widget-signal-control.js
+++ b/src/widget/edit-widget-signal-control.js
@@ -54,7 +54,7 @@ class EditWidgetSignalControl extends Component {
     return (
         <FormGroup controlId="signal">
           <FormLabel>Signal</FormLabel>
-          <FormControl className="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
+          <FormControl as="select" placeholder="Select signal" value={this.state.widget.signal} onChange={(e) => this.props.handleChange(e)}>
             {
               signalsToRender.length === 0 ? (
                 <option disabled value style={{ display: 'none' }}>No signals available.</option>
diff --git a/src/widget/edit-widget-simulation-control.js b/src/widget/edit-widget-simulation-control.js
index a988b39..e6d88ee 100644
--- a/src/widget/edit-widget-simulation-control.js
+++ b/src/widget/edit-widget-simulation-control.js
@@ -39,10 +39,12 @@ class EditWidgetSimulationControl extends Component {
   }
 
   render() {
+    console.log("editwidgetsimulationcontrol was called");
+    console.log(this.state.widget);
     return (
         <FormGroup controlId="simulationModel">
             <FormLabel>Simulation Model</FormLabel>
-            <FormControl className="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
+            <FormControl as="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
             {
               this.props.simulationModels.length === 0 ? (
               <option disabled value style={{ display: 'none' }}> No simulation models available. </option>
diff --git a/src/widget/edit-widget.js b/src/widget/edit-widget.js
index d78069d..8b19af0 100644
--- a/src/widget/edit-widget.js
+++ b/src/widget/edit-widget.js
@@ -42,7 +42,11 @@ class EditWidgetDialog extends React.Component {
     };
   }
 
+  
+
   onClose(canceled) {
+    console.log("in editWidget. the temporal state: ");
+    console.log(this.state.temporal);
     if (canceled === false) {
       if (this.valid) {
         this.props.onClose(this.state.temporal);
@@ -66,8 +70,11 @@ class EditWidgetDialog extends React.Component {
   handleChange(e) {
     if (e.constructor === Array) {
       // Every property in the array will be updated
+      console.log("####its an array!");
       let changes = e.reduce( (changesObject, event) => {
         changesObject[event.target.id] = event.target.value;
+        console.log("hier ist changes object: ");
+        console.log(changesObject);
 
         return changesObject;
       }, {});
@@ -96,8 +103,20 @@ class EditWidgetDialog extends React.Component {
         } else {
           changeObject[e.target.id] = e.target.value;
         }
+        console.log("this.state.temporal is: ");
+        console.log(this.state.temporal);
+        console.log("the event target id: " + e.target.id);
+        console.log("the value is: " + e.target.value)
+        console.log("change Object is: ");
+        console.log(changeObject);
 
-        this.setState({ temporal: Object.assign({}, this.state.temporal, changeObject ) });
+        let finalChange = this.state.temporal;
+        
+        finalChange.customProperties[e.target.id] = changeObject[e.target.id];
+      
+        
+
+        this.setState({ temporal: finalChange});
     }
   }
 
diff --git a/src/widget/editable-widget-container.js b/src/widget/editable-widget-container.js
index 94944b2..3fcddf0 100644
--- a/src/widget/editable-widget-container.js
+++ b/src/widget/editable-widget-container.js
@@ -23,7 +23,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Rnd } from 'react-rnd';
-import { contextMenu } from 'react-contexify';
+import { Menu } from 'react-contexify';
 
 class EditableWidgetContainer extends React.Component {
   constructor(props) {
@@ -122,13 +122,13 @@ class EditableWidgetContainer extends React.Component {
       onDragStop={this.dragStop}
       dragGrid={gridArray}
       resizeGrid={gridArray}
-      zIndex={widget.z}
+      zindex={widget.z}
       enableResizing={resizing}
       disableDragging={widget.locked}
     >
-      <contextMenu id={'widgetMenu' + this.props.index}>
+      <Menu id={'widgetMenu' + this.props.index}>
         {this.props.children}
-      </contextMenu>
+      </Menu>
     </Rnd>;
   }
 }
diff --git a/src/widget/widget-container.js b/src/widget/widget-container.js
index 4aa62a5..b5258ff 100644
--- a/src/widget/widget-container.js
+++ b/src/widget/widget-container.js
@@ -29,7 +29,7 @@ class WidgetContainer extends React.Component {
       height: Number(this.props.widget.height),
       left: Number(this.props.widget.x),
       top: Number(this.props.widget.y),
-      zIndex: Number(this.props.widget.z),
+      zindex: Number(this.props.widget.z),
       position: 'absolute'
     };
 
diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js
index 4ab6731..b131e2d 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -35,13 +35,14 @@ class WidgetFactory {
             x: position.x,
             y: position.y,
             z: position.z,
-            locked: false
+            locked: false,
+            customProperties: {}
         };
 
         // set type specific properties
         switch(type) {
             case 'CustomAction':
-                widget.actions = [
+                widget.customProperties.actions = [
                   {
                     action: 'stop'
                   },
@@ -56,51 +57,51 @@ class WidgetFactory {
                   }
                 ];
                 widget.name = 'Action';
-                widget.icon = 'star';
+                widget.customProperties.icon = 'star';
                 widget.width = 100;
                 widget.height = 50;
-                widget.simulationModel = defaultSimulationModel;
+                widget.customProperties.simulationModel = defaultSimulationModel;
                 break;
             case 'Action':
-                widget.simulationModel = defaultSimulationModel;
+                widget.customProperties.simulationModel = defaultSimulationModel;
                 break;
             case 'Lamp':
-                widget.simulationModel = defaultSimulationModel;
-                widget.signal = 0;
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.signal = 0;
                 widget.minWidth = 5;
                 widget.minHeight = 5;
                 widget.width = 20;
                 widget.height = 20;
-                widget.on_color = 6;
-                widget.off_color = 8;
-                widget.threshold = 0.5;
+                widget.customProperties.on_color = 6;
+                widget.customProperties.off_color = 8;
+                widget.customProperties.threshold = 0.5;
                 break;
             case 'Value':
-                widget.simulationModel = defaultSimulationModel;
-                widget.signal = 0;
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.signal = 0;
                 widget.minWidth = 70;
                 widget.minHeight = 20;
                 widget.width = 120;
                 widget.height = 30;
-                widget.textSize = 16;
+                widget.customProperties.textSize = 16;
                 widget.name = 'Value';
-                widget.showUnit = false;
+                widget.customProperties.showUnit = false;
                 break;
             case 'Plot':
-                widget.simulationModel = defaultSimulationModel;
-                widget.signals = [ 0 ];
-                widget.ylabel = '';
-                widget.time = 60;
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.signals = [ 0 ];
+                widget.customProperties.ylabel = '';
+                widget.customProperties.time = 60;
                 widget.minWidth = 400;
                 widget.minHeight = 200;
                 widget.width = 400;
                 widget.height = 200;
-                widget.yMin = 0;
-                widget.yMax = 10;
-                widget.yUseMinMax = false;
+                widget.customProperties.yMin = 0;
+                widget.customProperties.yMax = 10;
+                widget.customProperties.yUseMinMax = false;
                 break;
             case 'Table':
-                widget.simulationModel = defaultSimulationModel;
+                widget.customProperties.simulationModel = defaultSimulationModel;
                 widget.minWidth = 200;
                 widget.width = 300;
                 widget.height = 200;
@@ -111,80 +112,80 @@ class WidgetFactory {
                 widget.width = 100;
                 widget.height = 35;
                 widget.name = 'Label';
-                widget.textSize = 32;
-                widget.fontColor = 0;
+                widget.customProperties.textSize = 32;
+                widget.customProperties.fontColor = 0;
                 break;
             case 'PlotTable':
-                widget.simulationModel = defaultSimulationModel;
-                widget.preselectedSignals = [];
-                widget.signals = []; // initialize selected signals
-                widget.ylabel = '';
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.preselectedSignals = [];
+                widget.customProperties.signals = []; // initialize selected signals
+                widget.customProperties.ylabel = '';
                 widget.minWidth = 200;
                 widget.minHeight = 100;
                 widget.width = 600;
                 widget.height = 300;
-                widget.time = 60;
-                widget.yMin = 0;
-                widget.yMax = 10;
-                widget.yUseMinMax = false;
+                widget.customProperties.time = 60;
+                widget.customProperties.yMin = 0;
+                widget.customProperties.yMax = 10;
+                widget.customProperties.yUseMinMax = false;
                 break;
             case 'Image':
                 widget.minWidth = 20;
                 widget.minHeight = 20;
                 widget.width = 200;
                 widget.height = 200;
-                widget.lockAspect = true;
+                widget.customProperties.lockAspect = true;
                 break;
             case 'Button':
                 widget.minWidth = 100;
                 widget.minHeight = 50;
                 widget.width = 100;
                 widget.height = 100;
-                widget.background_color = 1;
-                widget.font_color = 0;
-                widget.simulationModel = defaultSimulationModel;
-                widget.signal = 0;
+                widget.customProperties.background_color = 1;
+                widget.customProperties.font_color = 0;
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.signal = 0;
                 break;
             case 'Input':
                 widget.minWidth = 200;
                 widget.minHeight = 50;
                 widget.width = 200;
                 widget.height = 50;
-                widget.simulationModel = defaultSimulationModel;
-                widget.signal = 0;
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.signal = 0;
                 break;
             case 'Slider':
                 widget.minWidth = 380;
                 widget.minHeight = 30;
                 widget.width = 400;
                 widget.height = 50;
-                widget.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation
-                widget.simulationModel = defaultSimulationModel;
-                widget.signal = 0;
+                widget.customProperties.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.signal = 0;
                 break;
             case 'Gauge':
-                widget.simulationModel = defaultSimulationModel;
-                widget.signal = 0;
+                widget.customProperties.simulationModel = defaultSimulationModel;
+                widget.customProperties.signal = 0;
                 widget.minWidth = 100;
                 widget.minHeight = 150;
                 widget.width = 150;
                 widget.height = 150;
-                widget.colorZones = false;
-                widget.zones = [];
-                widget.valueMin = 0;
-                widget.valueMax = 1;
-                widget.valueUseMinMax = false;
+                widget.customProperties.colorZones = false;
+                widget.customProperties.zones = [];
+                widget.customProperties.valueMin = 0;
+                widget.customProperties.valueMax = 1;
+                widget.customProperties.valueUseMinMax = false;
                 break;
             case 'Box':
                 widget.minWidth = 50;
                 widget.minHeight = 50;
                 widget.width = 100;
                 widget.height = 100;
-                widget.border_color = 0;
+                widget.customProperties.border_color = 0;
                 widget.z = 0;
                 break;
             case 'HTML':
-                widget.content = '<i>Hello World</i>';
+                widget.customProperties.content = '<i>Hello World</i>';
                 break;
             case 'Topology':
                 widget.width = 600;
diff --git a/src/widget/widget.js b/src/widget/widget.js
index f6b7f92..e9c3f2c 100644
--- a/src/widget/widget.js
+++ b/src/widget/widget.js
@@ -168,7 +168,7 @@ class Widget extends React.Component {
     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}>
+      return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={parseInt(this.props.index,10)}>
         {element}
       </EditableWidgetContainer>;
     }
diff --git a/src/widget/widgets/box.js b/src/widget/widgets/box.js
index 69539ab..db06848 100644
--- a/src/widget/widgets/box.js
+++ b/src/widget/widgets/box.js
@@ -30,9 +30,9 @@ class WidgetBox extends Component {
     let colors = EditWidgetColorControl.ColorPalette;
 
     let colorStyle = {
-      borderColor: colors[this.props.widget.border_color],
-      backgroundColor: colors[this.props.widget.background_color],
-      opacity: this.props.widget.background_color_opacity
+      borderColor: colors[this.props.widget.customProperties.border_color],
+      backgroundColor: colors[this.props.widget.customProperties.background_color],
+      opacity: this.props.widget.customProperties.background_color_opacity
     }
 
     return (
diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js
index c9cafdf..68a2ee0 100644
--- a/src/widget/widgets/label.js
+++ b/src/widget/widgets/label.js
@@ -25,6 +25,8 @@ import EditWidgetColorControl from '../edit-widget-color-control';
 
 class WidgetLabel extends Component {
   render() {
+    console.log("here is the label; ");
+    console.log(this.props.widget);
     const style = {
       fontSize: this.props.widget.customProperties.textSize + 'px',
       color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]