diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 930c991ed1..7c2666485b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -58,6 +58,7 @@
      float:right;
  }
  
+
  // general layout components
  // -------------------------
  .usky-grid  .tb {
@@ -124,6 +125,9 @@
      border: 1px dashed rgba(0,0,0,0);
 }
 
+.usky-grid .tb:hover .usky-row{
+    border-bottom:1px dashed rgba(182, 182, 182, 0.3);
+}
 
 /*.usky-grid .selectedRow {
      border: 1px solid rgba(182, 182, 182, 0.3);
@@ -146,8 +150,13 @@
     position: absolute;
     bottom: 0;
     top: 0;
-    left: 0;
     right: 0;
+    width: 150px;
+    opacity: 0.3;
+}
+
+.usky-grid .cell-tools:hover{
+    opacity: 1;
 }
 
 .usky-grid  .cell-tools-add {
@@ -157,36 +166,19 @@
     left: 0;
     right: 0;
     z-index: 500;
+    opacity: 0.3;
 }
 
-.usky-grid .cell-tools-add-single i{
-     font-size: 85px;
-     color: @grayLight;
-     display: block;
-     line-height: 55px;
-     margin-bottom: 10px;
+.usky-grid  .usky-control:hover .cell-tools-add{
+    opacity: 1;
 }
 
-.usky-grid .cell-tools-add-single a:hover i{color: @gray;}
-
-.usky-grid .cell-tools-add-single a{text-decoration:  none;}
-
-.usky-grid .cell-tools-add-single p{
-     display: none;
-}
-
-.usky-grid .single-editor-rte p{
-     display: block;
-}
-.usky-grid .single-editor-rte i, .usky-grid .single-editor-rte div{
-     display: none;
-}
 
 .usky-grid  .cell-tools-remove {
     display:inline-block;
     position: absolute;
-    top: -20px;
-    right: -20px;
+    top: 0px;
+    right: 5px;
     text-align: right;
     z-index: 500;
 }
@@ -199,8 +191,8 @@
 .usky-grid  .cell-tools-move {
     display:inline-block;
     position: absolute;
-    top: 20px;
-    right: -20px;
+    top: 40px;
+    right: 5px;
     z-index: 500;
     cursor: move
 }
@@ -216,17 +208,20 @@
     position:relative;
     display:block;
     
+    /*
     border: 1px dashed rgba(255, 0, 0, .0);     
     border-bottom-width: 1px;
+    */
 
     -webkit-background-clip: padding-box; /* for Safari */
     background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+
+    margin: 10px 0 0 0;
 }
 
 .usky-grid  .usky-control:hover{
     /*border: 1px solid rgba(182, 182, 182, 0.3);*/
-    border-bottom: 1px solid rgba(182, 182, 182, 0.3);
-
+    //border-bottom: 1px solid rgba(182, 182, 182, 0.3);
 }
 
 .usky-grid  .usky-control-placeholder:hover{
@@ -234,15 +229,17 @@
     border-bottom:1px solid rgba(182, 182, 182, 0.0) !important;
 }
 
-.usky-grid .removingControl{
+.usky-grid .warnhighlight{
      border: 1px dashed @red !important;
 }
 
-.usky-grid .movingControl{
+.usky-grid .infohighlight{
      border: 1px dashed @blue !important;
 }
 
-
+.usky-grid .usky-control-inner{
+    min-height: 60px;    
+}
 
 
 
@@ -262,6 +259,7 @@
     border:1px solid rgba(182, 182, 182, 0.3);
     height: 50px;
 }
+
 .usky-grid  .usky-control-placeholder:hover .placeholder{
     border:1px solid rgba(182, 182, 182, 0.8);
 }
@@ -301,7 +299,6 @@
      border: none;
      background: #fff;
      outline: none;
-     width: 98%;
      resize: none;
      color: @gray;
  }
@@ -320,17 +317,6 @@
      resize: none;
      font-style: italic;
 }
-
-
- 
-
- 
- 
- 
-
- 
-
-
  
  .usky-grid  .cellPanelRte {
      min-height:60px;
@@ -501,7 +487,7 @@
  }
 
  .usky-grid .usky-control{
-     margin: 15px 30px 0px 10px;
+     margin: 10px 0 0 0;
      padding: 5px;
  }
  
@@ -509,6 +495,18 @@
      margin-top: 30px;
  }
 
+ .usky-grid .usky-row-inner{
+    margin-right: 45px;
+    border: 1px dashed transparent;
+ }
+
+ .usky-grid .usky-control-inner{
+    padding: 5px;
+    margin-right: 45px;
+    margin-bottom: 10px;
+    border: 1px dashed transparent;
+ }
+
 
  /**************************************************************************************************/
  /* template */
@@ -598,6 +596,69 @@
  }
 
 
+ /**************************************************************************************************/
+ /* overlay */
+ /**************************************************************************************************/
+ .usky-grid  .cell-tools-menu{
+     position: absolute;
+     width: 360px;
+     height: 380px;
+     overflow: auto;
+     border: 1px solid #ccc;
+     margin-top: -190px;
+     margin-left: -150px;
+     background: white;
+     padding: 7px;
+     top: 0;
+     left: 50%;
+
+     z-index: 666;
+     -webkit-box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
+     -moz-box-shadow:    3px 3px 12px 0px rgba(50, 50, 50, 0.45);
+     box-shadow:         3px 3px 12px 0px rgba(50, 50, 50, 0.45);
+ }
+
+
+ .usky-grid .cell-tools-menu h5{
+     border-bottom: 1px solid #d9d9d9;
+     color: #999;
+     padding: 10px;
+     margin-top: 0;
+ }
+
+ .usky-grid .elements{
+     display: block;
+     padding: 0;
+     margin: 0;
+ }
+
+ .usky-grid .elements li{
+     display: inline-block;
+     width: 90px;
+     height: 80px;
+     margin: 5px;
+     padding: 5px;
+     overflow: hidden;
+     font-size: 11px;
+ }
+
+ .usky-grid .elements li:hover, .usky-grid .elements li:hover *{
+     background: #2e8aea;
+     color: white;
+ }
+
+ .usky-grid .elements a{
+     color: #222;
+     text-decoration: none;
+ }
+
+ .usky-grid .elements i{
+     font-size: 30px;
+     line-height: 50px;
+     color: #999;
+     display: block
+ }
+
 
  /**************************************************************************************************/
  /* Configuration specific styles */
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/additem.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/additem.html
new file mode 100644
index 0000000000..1a69ed8e02
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/additem.html
@@ -0,0 +1,17 @@
+<div class="cell-tools-menu" 
+    ng-style="overlayMenu.style"
+    ng-mouseleave="closeItemOverlay()">
+       
+     <h5>Insert control</h5>
+
+     <ul class="elements">
+        <li ng-repeat="editor in area.$allowedEditors">
+            <a ng-click="addControl(editor, overlayMenu.area, overlayMenu.$index)" href>
+                <i class="icon {{editor.icon}}"></i>    
+                {{editor.name}}</a>
+
+                <pre>{{editor}}</pre>
+        </li>
+     </ul>  
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html
index cfc2ec66ed..b16c7f0167 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html
@@ -1,3 +1,6 @@
 <div ng-controller="Umbraco.PropertyEditors.Grid.TextStringController">
-	<textarea class="textstring" id="{{control.uniqueId}}_text" ng-keyup="adjustSize($event)" ng-model="control.value" style="{{control.editor.config.style}}" placeholder="Write here..."></textarea>
+	<textarea 
+		class="textstring input-block-level" id="{{control.uniqueId}}_text" 
+		ng-keyup="adjustSize($event)" ng-model="control.value" 
+		style="{{control.editor.config.style}}" placeholder="Write here..."></textarea>
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index 7a989bdb37..4a8d9ebec1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -111,6 +111,42 @@ angular.module("umbraco")
 
         }
 
+        // *********************************************
+        // Add items overlay menu
+        // *********************************************
+        $scope.overlayMenu = {
+            show: false,
+            style: {},
+            area: undefined,
+            key: undefined
+        };
+
+        $scope.addItemOverlay = function(event, area, index, key){
+            $scope.overlayMenu.area = area;
+            $scope.overlayMenu.index = index;
+            $scope.overlayMenu.style = {};
+            $scope.overlayMenu.key = key;
+
+            //todo calculate position...
+            var offset = $(event.target).offset();
+            var height = $(window).height();
+            var width = $(window).width();
+
+            if((height-offset.top) < 250){
+                $scope.overlayMenu.style.bottom = 0;
+                $scope.overlayMenu.style.top = "initial";
+            }else if(offset.top < 300){
+                $scope.overlayMenu.style.top = 190;
+            }
+
+            $scope.overlayMenu.show = true;
+        };
+
+        $scope.closeItemOverlay = function(){
+            $scope.currentControl = undefined;
+            $scope.overlayMenu.show = false;
+            $scope.overlayMenu.key = undefined;
+        };
 
         // *********************************************
         // Template management functions
@@ -254,6 +290,8 @@ angular.module("umbraco")
         })();
 
         $scope.addControl = function (editor, cell, index){
+            $scope.closeItemOverlay();
+
             var newControl = {
                 value: null,
                 editor: editor
@@ -386,6 +424,7 @@ angular.module("umbraco")
 
                     //set width
                     area.$percentage = $scope.percentage(area.grid);
+                    area.$uniqueId = $scope.setUniqueId();
 
                     //set editor permissions
                     if(!area.allowed || area.allowAll === true){
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index deb1b0c04a..9cb1371b87 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -43,18 +43,17 @@
                          class="usky-row"
                          ng-mouseover="setCurrentRow(row)"
                          ng-mouseleave="disableCurrentRow()"
-                         ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMovedRow == row, selectedRow:currentRow == row && currentControl === null}">
+                         ng-class="{'selectedControl':currentRow == row && currentControl === null}">
 
                         <!-- Row tool -->
-                        <div class="row-tools" ng-animate="'fade'"
-                             ng-if="currentRow == row && currentControl === null">
+                        <div class="row-tools" ng-animate="'fade'" ng-if="currentRow == row && currentControl === null">
 
                             <!-- delete row -->
                             <div class="cell-tools-remove">
                                 <div class="iconBox"
                                      ng-click="deletePrompt = true"
                                      ng-mouseover="setCurrentRemoveControl(row)"
-                                     ng-mouseleave="disableCurrentRemoveControl(row)">
+                                     ng-mouseover="disableCurrentRemoveControl(row)">
 
                                     <span ng-if="deletePrompt">
                                         Are you sure?
@@ -75,9 +74,8 @@
                         </div>
 
                         <!-- row container -->
-                        <div ng-class="{last:$index==model.value.length-1,first:$first}"
-                             class="{{row.cssClass}} mainContainer">
-
+                        <div class="{{row.cssClass}} mainContainer usky-row-inner"
+                             ng-class="{last:$last,first:$first,warnhighlight:currentRemoveControl == row, infohighlight:currentMovedRow == row}">
                             <div class="mainTb">
                                 <div class="tb">
                                     <div class="tr">
@@ -96,65 +94,55 @@
                                                      ng-init="singleEditor = area.$allowedEditors[0]"
                                                      class="cell-tools-add-single single-editor-{{singleEditor.alias}}">
 
-                                                    <a href ng-click="addControl(singleEditor, area)">
-                                                        <i class="icon {{singleEditor.icon}}"></i>
-                                                        <div class="help-text">{{singleEditor.name}}</div>
-                                                    </a>
+                                                     <div class="help-text" style="margin-bottom: 15px">
+                                                            To start, click the <i class=" icon {{singleEditor.icon}} blue">
+                                                        </i> below and add your first {{singleEditor.name}}
+                                                     </div><br/>
 
-                                                    <p class="placeholder" ng-if="area.$allowsRTE" ng-click="addControl(singleEditor, area)">
-                                                        Start writing here...
-                                                    </p>
+                                                     <div class="iconBox">
+                                                        <a href ng-click="addControl(singleEditor, area)">
+                                                            <i class="icon {{singleEditor.icon}}"></i>
+                                                        </a>
+                                                    </div>
                                                 </div>
 
+
                                                 <div ng-if="!area.allowed || area.allowed.length > 1">
 
-                                                    <p class="placeholder" ng-if="area.$allowsRTE" ng-click="addTinyMce(area)">
-                                                        Start writing here...
-                                                    </p>
+                                                    <div class="help-text" style="margin-bottom: 15px">
+                                                           To start, click the <i class=" icon icon-add blue">
+                                                       </i> below and add your first element
+                                                    </div><br/>
 
-                                                    <div class="cell-tools-add">
-                                                        <div class="iconBox"
-                                                             ng-repeat="editor in area.$allowedEditors track by editor.alias"
-                                                             ng-click="addControl(editor,area)">
-                                                            <i class="icon {{editor.icon}}"></i>
+
+                                                    <div class="cell-tools-add" 
+                                                        ng-if="!currentToolsControl" 
+                                                        ng-animate="'fade'">
+                                                        
+                                                        <div class="iconBox">
+                                                            <a href ng-click="addItemOverlay($event, area, 0, area.$uniqueId);">
+                                                                <i class=" icon icon-add"></i>
+                                                            </a>
                                                         </div>
+
+                                                        <div ng-if="overlayMenu.show && overlayMenu.key == area.$uniqueId" ng-include="'views/propertyeditors/grid/dialogs/additem.html'"></div>
+
                                                     </div>
                                                 </div>
+
                                             </div>
 
                                             <!-- Controls in cell -->
                                             <div ng-repeat="control in area.controls"
-                                                 ng-class="{last:$last,
-                                                            movingControl:currentMovedControl == control,
-                                                            removingControl:currentRemoveControl == control,
-                                                            toolsControl:currentToolsControl == control,
-                                                            selectedControl:currentControl == control}"
                                                  ng-mouseover="setCurrentControl(control)"
                                                  ng-mouseleave="disableCurrentControl(control)"
+                                                 ng-animate="'fade'"
                                                  class="usky-control">
 
                                                 <!-- Filled cell tools -->
                                                 <div class="cell-tools"
                                                      ng-animate="'fade'"
-                                                     ng-if="control && ( currentControl == control)">
-
-                                                    <div class="cell-tools-add"
-                                                         ng-if="area.max === undefined || area.max < area.controls.length"
-                                                         ng-mouseover="setCurrentToolsControl(control)"
-                                                         ng-mouseleave="disableCurrentToolsControl(control)">
-
-                                                        <div class="iconBox"
-                                                             ng-repeat="editor in area.$allowedEditors"
-                                                             ng-click="addControl(editor,area, control.$index)"
-                                                             ng-show="(currentToolsControl == control)">
-                                                            <i class="icon {{editor.icon}}"></i>
-                                                        </div>
-
-                                                        <div class="iconBox"
-                                                             ng-if="currentToolsControl != control">
-                                                            <i class=" icon icon-add"></i>
-                                                        </div>
-                                                    </div>
+                                                     ng-show="control && (currentControl == control)">
 
                                                     <!-- delete cell -->
                                                     <div class="cell-tools-remove">
@@ -163,14 +151,12 @@
                                                              ng-mouseover="setCurrentRemoveControl(control)"
                                                              ng-mouseleave="disableCurrentRemoveControl(control)">
 
-                                                            <span ng-if="deletePrompt">
-                                                                Are you sure?
-                                                                <a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a>
-                                                            </span>
-
-
-                                                            <i ng-if="!deletePrompt" class="icon icon-trash"></i>
+                                                                <span ng-show="deletePrompt">
+                                                                    Are you sure?
+                                                                    <a href style="text-decoration: underline" ng-click="removeControl(area, $index)">Yes</a>
+                                                                </span>
 
+                                                                <i ng-show="!deletePrompt" class="icon icon-trash"></i>
                                                         </div>
                                                     </div>
 
@@ -185,10 +171,29 @@
 
                                                 </div>
 
-                                                <!-- Redering the editor for specific control -->
-                                                <div ng-if="control && control.$editorPath"
-                                                     ng-include="control.$editorPath"
-                                                     class="usky-cell usky-cell-{{control.editor.view}}">
+                                                <div class="usky-control-inner" ng-class="{last:$last,
+                                                               infohighlight:currentMovedControl == control,
+                                                               warnhighlight:currentRemoveControl == control,
+                                                               selectedControl:currentControl == control}">
+                                                    <!-- Redering the editor for specific control -->
+                                                    <div ng-if="control && control.$editorPath"
+                                                         ng-include="control.$editorPath"
+                                                         class="usky-cell usky-cell-{{control.editor.view}}">
+                                                    </div>
+                                                </div>
+
+                                                <!-- add stuff -->
+                                                <div class="cell-tools-add" 
+                                                    ng-if="!currentToolsControl && control===currentControl && (area.max === undefined || area.max < area.controls.length)" 
+                                                    ng-animate="'fade'">
+                                                    
+                                                    <div class="iconBox">
+                                                        <a href ng-click="addItemOverlay($event, area, control.$index, control.$uniqueId)">
+                                                            <i class=" icon icon-add"></i>
+                                                        </a>
+                                                    </div>
+
+                                                    <div ng-if="overlayMenu.show && overlayMenu.key == control.$uniqueId" ng-include="'views/propertyeditors/grid/dialogs/additem.html'"></div>
                                                 </div>
 
                                             </div>
diff --git a/src/Umbraco.Web.UI/config/grid.editors.config.js b/src/Umbraco.Web.UI/config/grid.editors.config.js
index c624ec5c9e..7686de5270 100644
--- a/src/Umbraco.Web.UI/config/grid.editors.config.js
+++ b/src/Umbraco.Web.UI/config/grid.editors.config.js
@@ -6,7 +6,7 @@
 	    "icon": "icon-article"
 	},
 	{
-	    "name": "Media",
+	    "name": "Image",
 	    "alias": "media",
 	    "view": "media",
 	    "icon": "icon-picture"
@@ -29,7 +29,7 @@
         "view": "textstring",
         "icon": "icon-coin",
         "config": {
-            "style": "font-size: 36px; font-weight: bold",
+            "style": "font-size: 36px; line-height: 45px; font-weight: bold",
             "markup": "<h1>#value#</h1>"
         }
     },