diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 98c3d40..2fb1596 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -206,10 +206,12 @@ class Dashboard extends Component {
 
   widgetChange(widget, index, callback = null){
 
-    let tempChanges = this.state.widgetChangeData;
-    tempChanges.push(widget);
+    AppDispatcher.dispatch({
+      type: 'widgets/start-edit',
+      token: this.state.sessionToken,
+      data: widget
+    });
 
-    this.setState({ widgetChangeData: tempChanges})
 
   }
 
diff --git a/src/widget/dropzone.js b/src/widget/dropzone.js
index f962719..530ec1e 100644
--- a/src/widget/dropzone.js
+++ b/src/widget/dropzone.js
@@ -28,20 +28,20 @@ const dropzoneTarget = {
     position.y -= dropzoneRect.top;
 
     // Z-Index is one more the top most children
-    let foundZ = props.children.reduce( (maxZ, currentChildren) => {
-      if (currentChildren.props != null) {
+    let foundZ = props.widgets.reduce( (maxZ, currentWidget) => {
+      if (currentWidget != null) {
         // Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
-        let widget = currentChildren.props.data;
-        if (widget && widget.z) {
-          if (widget.z > maxZ) {
-            return widget.z;
+          if (currentWidget.z > maxZ) {
+            return currentWidget.z;
           }
-        }
       }
-
+    
       return maxZ;
-    }, 0);
-    position.z = foundZ >= 100? foundZ : ++foundZ;
+    }, 0)
+    position.z = foundZ >= 100? foundZ : foundZ += 10;
+    if(monitor.getItem().name === "Box"){
+      position.z = 0;
+    }
 
     props.onDrop(monitor.getItem(), position);
   }
diff --git a/src/widget/widget-area.js b/src/widget/widget-area.js
index b4d31f0..0686066 100644
--- a/src/widget/widget-area.js
+++ b/src/widget/widget-area.js
@@ -50,7 +50,7 @@ class WidgetArea extends React.Component {
       return absolutHeight > currentHeight ? absolutHeight : currentHeight;
     }, 0);
 
-    return <Dropzone height={maxHeight + 80} onDrop={this.handleDrop} editing={this.props.editing}>
+    return <Dropzone height={maxHeight + 80} onDrop={this.handleDrop} editing={this.props.editing} widgets={this.props.widgets}>
       {this.props.children}
 
       <Grid size={this.props.grid} disabled={this.props.grid === 1 || this.props.editing !== true} />
diff --git a/src/widget/widget-container.js b/src/widget/widget-container.js
index 31360e2..5b2e064 100644
--- a/src/widget/widget-container.js
+++ b/src/widget/widget-container.js
@@ -26,7 +26,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-context-menu.js b/src/widget/widget-context-menu.js
index bf83fc8..0ce2604 100644
--- a/src/widget/widget-context-menu.js
+++ b/src/widget/widget-context-menu.js
@@ -34,7 +34,7 @@ class WidgetContextMenu extends React.Component {
   };
 
   moveAbove = event => {
-    this.props.widget.z++;
+    this.props.widget.z += 10;
     if (this.props.widget.z > 100) {
       this.props.widget.z = 100;
     }
@@ -53,7 +53,7 @@ class WidgetContextMenu extends React.Component {
   };
 
   moveUnderneath = event => {
-    this.props.widget.z--;
+    this.props.widget.z -= 10;
     if (this.props.widget.z < 0) {
       this.props.widget.z = 0;
     }
@@ -90,7 +90,7 @@ class WidgetContextMenu extends React.Component {
   render() {
     const isLocked = this.props.widget.locked;
     const ContextMenu = () => (
-      <Menu id={'widgetMenu'+ this.props.index}>
+      <Menu id={'widgetMenu'+ this.props.index} style={{zIndex: 1000}}>
       <Item disabled={isLocked} onClick={this.editWidget}>Edit</Item>
       <Item disabled={isLocked} onClick={this.deleteWidget}>Delete</Item>