diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index e7f24d08fa1d..6bf8cd612a97 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -128,9 +128,10 @@
     position: relative;
     margin-bottom: 40px;
     padding-top: 10px;
+    border: 1px solid @grayLighter;
 
     &:hover {
-        background-color: @grayLighter;
+        border-color: @grayLight;
     }
 
     &[ng-click],
@@ -161,15 +162,16 @@
 }
 
 .umb-grid .umb-row .umb-cell-placeholder {
-    min-height: 130px;
-    background-color: @gray-10;
-    border-width: 2px;
+    min-height: 88px;
+    border-width: 1px;
     border-style: dashed;
-    border-color: @gray-8;
+    border-color: @ui-action-disgrete-border;
+    color: @ui-action-disgrete-type;
     transition: border-color 100ms linear;
 
     &:hover {
-        border-color: @blueMid;
+        border-color: @ui-action-disgrete-border-hover;
+        color: @ui-action-disgrete-type-hover;
         cursor: pointer;
     }
 }
@@ -207,9 +209,9 @@
 }
 
 .umb-grid .cell-tools-add {
-    color: @ui-action-type;
+    color: @ui-action-disgrete-type;
     &:focus, &:hover {
-        color: @ui-action-type-hover;
+        color: @ui-action-disgrete-type-hover;
         text-decoration: none;
     }
 }
@@ -219,16 +221,18 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    color: @ui-action-type;
+    color: @ui-action-disgrete-type;
 }
 
 .umb-grid .cell-tools-add.-bar {
     display: block;
-    background: @gray-10;
     text-align: center;
     padding: 5px;
-    border: 1px dashed @gray-7;
+    border: 1px dashed @ui-action-disgrete-border;
     margin: 10px;
+    &:focus, &:hover {
+        border-color: @ui-action-disgrete-border-hover;
+    }
 }
 
 
@@ -249,7 +253,6 @@
 
 .umb-grid .cell-tools-edit {
     display: inline-block;
-    color: @white;
 }
 
 .umb-grid .drop-overlay {
@@ -412,12 +415,12 @@
 
 // Row states
 .umb-grid .umb-row.-active {
-    background-color: @ui-action-type;
+    border-color: @ui-action-type;
 
     .umb-row-title-bar {
         cursor: move;
     }
-
+    /*
     .row-tool,
     .umb-row-title {
         color: @white;
@@ -436,12 +439,13 @@
     .umb-cell .umb-cell-content {
         border-color: transparent;
     }
+    */
 }
 
 
 .umb-grid .umb-row.-active-child {
     background-color: @gray-10;
-
+    
     .umb-row-title-bar {
         cursor: inherit;
     }
@@ -449,7 +453,7 @@
     .umb-row-title {
         color: @gray-3;
     }
-
+    /*
     .row-tool {
         color: fade(@black, 23);
     }
@@ -465,6 +469,7 @@
             border-color: fade(@gray, 44);
         }
     }
+    */
 }
 
 
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 b40305f5f5f7..0ea5842612e7 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
@@ -14,11 +14,16 @@ angular.module("umbraco")
         // Grid status variables
         var placeHolder = "";
         var currentForm = angularHelper.getCurrentForm($scope);
-
+        
+        $scope.currentRowWithActiveChild = null;
+        $scope.currentCellWithActiveChild = null;
+        $scope.active = null;
+        
         $scope.currentRow = null;
         $scope.currentCell = null;
         $scope.currentToolsControl = null;
         $scope.currentControl = null;
+        
         $scope.openRTEToolbarId = null;
         $scope.hasSettings = false;
         $scope.showRowConfigurations = true;
@@ -235,10 +240,16 @@ angular.module("umbraco")
                 }, 500, false);
 
                 $scope.$apply(function () {
-
+                    
+                    console.log("$apply function called...")
+                    
                     var cell = $(e.target).scope().area;
-                    cell.hasActiveChild = hasActiveChild(cell, cell.controls);
-                    cell.active = false;
+                    
+                    if(hasActiveChild(cell, cell.controls)) {
+                        $scope.currentCellWithActiveChild = cell;
+                    }
+                    $scope.active = cell;
+                    
                 });
             }
 
@@ -307,12 +318,13 @@ angular.module("umbraco")
         // Row management function
         // *********************************************
 
-        $scope.clickRow = function(index, rows) {
-            rows[index].active = true;
-        };
-
-        $scope.clickOutsideRow = function(index, rows) {
-            rows[index].active = false;
+        $scope.clickRow = function(index, rows, $event) {
+            console.log("clickRow")
+            //rows[index].active = true;
+            $scope.currentRowWithActiveChild = null;
+            $scope.active = rows[index];
+            
+            $event.stopPropagation();
         };
 
         function getAllowedLayouts(section) {
@@ -359,6 +371,7 @@ angular.module("umbraco")
             if (section.rows.length > 0) {
                 section.rows.splice($index, 1);
                 $scope.currentRow = null;
+                $scope.currentRowWithActiveChild = null;
                 $scope.openRTEToolbarId = null;
                 currentForm.$setDirty();
             }
@@ -513,14 +526,13 @@ angular.module("umbraco")
         // Area management functions
         // *********************************************
 
-        $scope.clickCell = function(index, cells, row) {
-            cells[index].active = true;
-            row.hasActiveChild = true;
-        };
-
-        $scope.clickOutsideCell = function(index, cells, row) {
-            cells[index].active = false;
-            row.hasActiveChild = hasActiveChild(row, cells);
+        $scope.clickCell = function(index, cells, row, $event) {
+            
+            $scope.currentCellWithActiveChild = null;
+            
+            $scope.active = cells[index];
+            $scope.currentRowWithActiveChild = row;
+            $event.stopPropagation();
         };
 
         $scope.cellPreview = function (cell) {
@@ -536,14 +548,14 @@ angular.module("umbraco")
         // *********************************************
         // Control management functions
         // *********************************************
-        $scope.clickControl = function (index, controls, cell) {
-            controls[index].active = true;
-            cell.hasActiveChild = true;
-        };
-
-        $scope.clickOutsideControl = function (index, controls, cell) {
-            controls[index].active = false;
-            cell.hasActiveChild = hasActiveChild(cell, controls);
+        $scope.clickControl = function (index, controls, cell, $event) {
+            
+            console.log("clickControl");
+            
+            $scope.active = controls[index];
+            $scope.currentCellWithActiveChild = cell;
+            
+            $event.stopPropagation();
         };
 
         function hasActiveChild(item, children) {
@@ -594,8 +606,8 @@ angular.module("umbraco")
             if (index === undefined) {
                 index = cell.controls.length;
             }
-
-            newControl.active = true;
+            
+            $scope.active = newControl;
 
             //populate control
             $scope.initControl(newControl, index + 1);
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 22e72daff900..eeb70718f9b9 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
@@ -69,13 +69,13 @@
                         <!-- ng-mouseleave="disableCurrentRow()"  -->
                         <div class="umb-row"
                              ng-repeat="row in section.rows"
-                             ng-click="clickRow($index, section.rows)"
+                             ng-click="clickRow($index, section.rows, $event)"
                              ng-class="{
                                      '-has-config': row.hasConfig,
-                                     '-active': row.active,
-                                     '-active-child': row.hasActiveChild}"
-                             on-outside-click="clickOutsideRow($index, section.rows)"
-                             bind-click-on="{{row.active}}"
+                                     '-active': row === active,
+                                     '-active-child': row === currentRowWithActiveChild}"
+
+                             bind-click-on="{{row === active || row === currentRowWithActiveChild}}"
                              data-rowid="{{row.$uniqueId}}">
 
                             <div class="umb-row-title-bar">
@@ -89,7 +89,7 @@
                                 </div>
 
                                <!-- Row tool -->
-                               <div class="umb-tools row-tools" ng-show="row.active && !sortMode">
+                               <div class="umb-tools row-tools" ng-show="(row === active || row === currentRowWithActiveChild) && !sortMode">
 
                                    <div class="cell-tools-edit row-tool" ng-if="hasSettings">
                                        <i class="icon icon-settings" title="@grid_settings" localize="title" ng-click="editGridItemSettings(row, 'row')"></i>
@@ -123,17 +123,17 @@
                                                  ng-style="{width: area.$percentage + '%'}"
                                                  ng-class="{
                                                     '-has-config': area.hasConfig,
-                                                    '-active': area.active,
-                                                    '-active-child': area.hasActiveChild}"
+                                                    '-active': area === active,
+                                                    '-active-child': area === currentCellWithActiveChild}"
                                                  ng-model="area.controls"
-                                                 ng-click="clickCell($index, row.areas, row)"
-                                                 on-outside-click="clickOutsideCell($index, row.areas, row)"
-                                                 bind-click-on="{{area.active}}">
+                                                 ng-click="clickCell($index, row.areas, row, $event)"
+
+                                                 bind-click-on="{{area === active}}">
 
                                                  <!-- Cell -->
                                                  <div class="umb-cell-content"
                                                       ng-class="
-                                                        {'-active': area.active,
+                                                        {'-active': area === active,
                                                         '-has-editors': area.controls.length > 0,
                                                         '-collapsed': sortMode}">
 
@@ -153,7 +153,7 @@
                                                          <localize key="grid_settingsApplied" />
                                                       </div>
 
-                                                      <div class="cell-tools" ng-if="area.active && !sortMode">
+                                                      <div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
                                                          <div class="cell-tool" ng-click="editGridItemSettings(area, 'cell')">
                                                             <i class="icon-settings"></i>
                                                          </div>
@@ -172,14 +172,14 @@
                                                           <!-- for each control in areas -->
                                                           <div class="umb-control"
                                                               ng-repeat="control in area.controls"
-                                                              ng-click="clickControl($index, area.controls, area)"
-                                                              ng-class="{'-active': control.active}"
-                                                              on-outside-click="clickOutsideControl($index, area.controls, area)"
-                                                              bind-click-on="{{control.active}}"
+                                                              ng-click="clickControl($index, area.controls, area, $event)"
+                                                              ng-class="{'-active': control === active}"
+
+                                                              bind-click-on="{{control === active}}"
                                                               umb-set-dirty-on-change="{{control.value}}"
                                                               data-itemid="{{control.$uniqueId}}">
 
-                                                              <div class="umb-control-click-overlay" ng-show="!control.active && !sortMode"></div>
+                                                              <div class="umb-control-click-overlay" ng-show="control !== active && !sortMode"></div>
 
                                                               <div class="umb-control-collapsed umb-control-handle" ng-show="sortMode">
                                                                   {{control.editor.name}}
@@ -189,11 +189,11 @@
 
                                                                    <div class="umb-control-bar umb-control-handle">
 
-                                                                      <div class="umb-control-title" ng-if="control.active">
+                                                                      <div class="umb-control-title" ng-if="control === active">
                                                                          {{control.editor.name}}
                                                                       </div>
 
-                                                                      <div class="umb-tools" ng-if="control.active">
+                                                                      <div class="umb-tools" ng-if="control === active">
 
                                                                           <div class="umb-control-tool" ng-if="control.editor.config.settings">
                                                                               <i class="umb-control-tool-icon icon-settings" ng-click="editGridItemSettings(control, 'control')"></i>