diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index 5a11403bb3..df8977a2bf 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -209,26 +209,6 @@
     width: 99%;
 }
 
-.usky-grid.umb-nested-content__node-type-picker {
-    .cell-tools-menu {
-        position: relative;
-        transform: translate(-50%, -25%);
-    }
-
-    .elements li {
-        &:hover {
-            i {
-                color: @white !important;
-            }
-        }
-
-        i {
-            // make sure the item icons shown are in the correct color according to their doc type icon instead of the grid editor item color
-            color: unset;
-        }
-    }
-}
-
 // this resolves the layout issue introduced in nested content in 7.12 with the addition of the input for link anchors
 // the attribute selector ensures the change only applies to the linkpicker overlay
 .form-horizontal .umb-nested-content--narrow [ng-controller*="Umbraco.Overlays.LinkPickerController"] .controls-row {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
index b77fe56564..9c3553e1ab 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
@@ -116,12 +116,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
         $scope.showIcons = $scope.model.config.showIcons || true;
         $scope.wideMode = $scope.model.config.hideLabel == "1";
 
-        $scope.overlayMenu = {
-            show: false,
-            style: {},
-            showFilter: false
-        };
-
         // helper to force the current form into the dirty state
         $scope.setDirty = function () {
             if ($scope.propertyForm) {
@@ -140,26 +134,46 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
             $scope.closeNodeTypePicker();
         };
 
-        $scope.openNodeTypePicker = function (event) {
+        $scope.openNodeTypePicker = function ($event) {
             if ($scope.nodes.length >= $scope.maxItems) {
                 return;
             }
 
+            $scope.overlayMenu = {
+                title: localizationService.localize('grid_insertControl'),
+                show: false,
+                style: {},
+                filter: $scope.scaffolds.length > 15 ? true : false,
+                view: "itempicker",
+                event: $event,
+                submit: function(model) {                    
+                    if(model && model.selectedItem) {
+                        $scope.addNode(model.selectedItem.alias);
+                    }
+                    $scope.overlayMenu.show = false;
+                    $scope.overlayMenu = null;
+                },
+                close: function() {
+                    $scope.overlayMenu.show = false;
+                    $scope.overlayMenu = null;
+                }
+            };
+
             // this could be used for future limiting on node types
-            $scope.overlayMenu.scaffolds = [];
+            $scope.overlayMenu.availableItems = [];
             _.each($scope.scaffolds, function (scaffold) {
-                $scope.overlayMenu.scaffolds.push({
+                $scope.overlayMenu.availableItems.push({
                     alias: scaffold.contentTypeAlias,
                     name: scaffold.contentTypeName,
                     icon: iconHelper.convertFromLegacyIcon(scaffold.icon)
                 });
             });
 
-            if ($scope.overlayMenu.scaffolds.length == 0) {
+            if ($scope.overlayMenu.availableItems.length === 0) {
                 return;
             }
 
-            if ($scope.overlayMenu.scaffolds.length == 1) {
+            if ($scope.overlayMenu.availableItems.length === 1) {
                 // only one scaffold type - no need to display the picker
                 $scope.addNode($scope.scaffolds[0].contentTypeAlias);
                 return;
@@ -168,10 +182,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
             $scope.overlayMenu.show = true;
         };
 
-        $scope.closeNodeTypePicker = function () {
-            $scope.overlayMenu.show = false;
-        };
-
         $scope.editNode = function (idx) {
             if ($scope.currentNode && $scope.currentNode.key == $scope.nodes[idx].key) {
                 $scope.currentNode = undefined;
@@ -358,8 +368,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
                     $scope.currentNode = $scope.nodes[0];
                 }
 
-                $scope.overlayMenu.showFilter = $scope.scaffolds.length > 15;
-
                 inited = true;
             }
         }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
index 9a5d75ae92..0117bac92d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
@@ -42,33 +42,13 @@
             </a>
         </div>
 
-        <div class="usky-grid umb-nested-content__node-type-picker" ng-if="overlayMenu.show">
-            <div class="cell-tools-menu" ng-style="overlayMenu.style" style="margin: 0;" delayed-mouseleave="closeNodeTypePicker()" on-delayed-mouseleave="closeNodeTypePicker()">
-                <h5>
-                    <localize key="grid_insertControl" />
-                </h5>
-
-                <div class="form-search" ng-hide="overlayMenu.showFilter === false" style="margin-bottom: 15px;">
-                    <i class="icon-search"></i>
-                    <input type="text"
-                           ng-model="searchTerm"
-                           class="umb-search-field search-query input-block-level -full-width-input"
-                           localize="placeholder"
-                           placeholder="@placeholders_filter"
-                           umb-auto-focus
-                           no-dirty-check />
-                </div>
-
-                <ul class="elements">
-                    <li ng-repeat="scaffold in overlayMenu.scaffolds | filter:searchTerm">
-                        <a ng-click="addNode(scaffold.alias)" href>
-                            <i class="icon {{scaffold.icon}}"></i>
-                            {{scaffold.name}}
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-
     </ng-form>
+
+    <umb-overlay
+        ng-if="overlayMenu.show"
+        position="target"
+        view="overlayMenu.view"
+        model="overlayMenu">
+    </umb-overlay>
+
 </div>