diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
index cfeaaa4ac3..ffbe2224d9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -257,6 +257,7 @@ body.touch .umb-tree {
     > .umb-tree-item__inner > i.icon,
     > .umb-tree-item__inner > a {
         cursor: not-allowed;
+        opacity: 0.4;
     }
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
index 4d43c2df51..522301d76f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
@@ -28,9 +28,8 @@
                                     </div>
                                 </div>
 
-                                <div class="umb-control-group">
+                                <div class="umb-control-group" ng-if="vm.enableSearh">
                                     <umb-tree-search-box
-                                        ng-if="vm.enableSearh"
                                         hide-search-callback="vm.hideSearch"
                                         search-callback="vm.onSearchResults"
                                         search-from-id="{{vm.searchInfo.searchFromId}}"
@@ -96,6 +95,15 @@
                         action="vm.close()">
                     </umb-button>
 
+                    <umb-button
+                        ng-if="model.extraActions"
+                        ng-repeat="action in model.extraActions track by $index"
+                        type="button"
+                        button-style="{{action.style || 'link'}}"
+                        label-key="{{action.labelKey}}"
+                        action="action.action()">
+                    </umb-button>
+
                     <umb-button
                         ng-if="vm.multiPicker"
                         type="button"
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
index 95e11613c0..5e73755593 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
@@ -16,7 +16,7 @@
         }
     }
 
-    function BlockConfigurationController($scope, elementTypeResource, overlayService, localizationService, editorService, eventsService) {
+    function BlockConfigurationController($scope, elementTypeResource, overlayService, localizationService, editorService, eventsService, udiService) {
 
         var unsubscribe = [];
 
@@ -95,47 +95,50 @@
             }
         };
 
-        vm.openAddDialog = function ($event, entry) {
+        vm.openAddDialog = function () {
 
-            //we have to add the 'alias' property to the objects, to meet the data requirements of itempicker.
-            var selectedItems = Utilities.copy($scope.model.value).forEach((obj) => {
-                var elementType = vm.getElementTypeByKey(obj.contentElementTypeKey);
-                if(elementType) {
-                    obj.alias = elementType.alias;
-                    return obj;
-                }
-            });
+            localizationService.localize("blockEditor_headlineCreateBlock").then(function(localizedTitle) {
 
-            var availableItems = vm.getAvailableElementTypes()
-
-            localizationService.localizeMany(["blockEditor_headlineCreateBlock", "blockEditor_labelcreateNewElementType"]).then(function(localized) {
-
-                var elemTypeSelectorOverlay = {
-                    view: "itempicker",
-                    title: localized[0],
-                    availableItems: availableItems,
-                    selectedItems: selectedItems,
-                    createNewItem: {
-                        action: function() {
-                            overlayService.close();
-                            vm.createElementTypeAndCallback(vm.addBlockFromElementTypeKey);
-                        },
-                        icon: "icon-add",
-                        name: localized[1]
+                const contentTypePicker = {
+                    title: localizedTitle,
+                    section: "settings",
+                    treeAlias: "documentTypes",
+                    entityType: "documentType",
+                    isDialog: true,
+                    filter: function (node) {
+                        if (node.metaData.isElement === true) {
+                            var key = udiService.getKey(node.udi);
+                            // If a Block with this ElementType as content already exists, we will emit it as a posible option.
+                            return $scope.model.value.find(function (entry) {
+                                return key === entry.contentElementTypeKey;
+                            });
+                        }
+                        return true;
                     },
-                    position: "target",
-                    event: $event,
-                    size: availableItems.length < 7 ? "small" : "medium",
-                    submit: function (overlay) {
-                        vm.addBlockFromElementTypeKey(overlay.selectedItem.key);
-                        overlayService.close();
+                    filterCssClass: "not-allowed",
+                    select: function (node) {
+                        vm.addBlockFromElementTypeKey(udiService.getKey(node.udi));
+                        editorService.close();
                     },
                     close: function () {
-                        overlayService.close();
-                    }
-                };
+                        editorService.close();
+                    },
+                    extraActions: [
+                        {
+                            style: "primary",
+                            labelKey: "blockEditor_labelcreateNewElementType",
+                            action: function () {
+                                vm.createElementTypeAndCallback((documentTypeKey) => {
+                                    vm.addBlockFromElementTypeKey(documentTypeKey);
 
-                overlayService.open(elemTypeSelectorOverlay);
+                                    // At this point we will close the contentTypePicker.
+                                    editorService.close();
+                                });
+                            }
+                        }
+                    ]
+                };
+                editorService.treePicker(contentTypePicker);
 
             });
         };
@@ -146,6 +149,7 @@
                 infiniteMode: true,
                 noTemplate: true,
                 isElement: true,
+                noTemplate: true,
                 submit: function (model) {
                     loadElementTypes().then( function () {
                         callback(model.documentTypeKey);
@@ -161,7 +165,7 @@
 
         vm.addBlockFromElementTypeKey = function(key) {
 
-            var entry = {
+            var blockType = {
                 "contentElementTypeKey": key,
                 "settingsElementTypeKey": null,
                 "labelTemplate": "",
@@ -173,7 +177,10 @@
                 "thumbnail": null
             };
 
-            $scope.model.value.push(entry);
+            $scope.model.value.push(blockType);
+
+            vm.openBlockOverlay(blockType);
+
         };
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
index dac8f2c6ff..fb49e11aa9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
@@ -10,7 +10,7 @@
 (function () {
     "use strict";
 
-    function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService) {
+    function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService, udiService) {
 
         var unsubscribe = [];
 
@@ -56,6 +56,7 @@
                 create: true,
                 infiniteMode: true,
                 isElement: true,
+                noTemplate: true,
                 submit: function (model) {
                     callback(model.documentTypeKey);
                     editorService.close();
@@ -69,35 +70,45 @@
 
         vm.addSettingsForBlock = function($event, block) {
 
-            localizationService.localizeMany(["blockEditor_headlineAddSettingsElementType", "blockEditor_labelcreateNewElementType"]).then(function(localized) {
+            localizationService.localize("blockEditor_headlineAddSettingsElementType").then(function(localizedTitle) {
 
-                var elemTypeSelectorOverlay = {
-                    view: "itempicker",
-                    title: localized[0],
-                    availableItems: vm.elementTypes,
-                    position: "target",
-                    event: $event,
-                    size: vm.elementTypes.length < 7 ? "small" : "medium",
-                    createNewItem: {
-                        action: function() {
-                            overlayService.close();
-                            vm.createElementTypeAndCallback((key) => {
-                                vm.applySettingsToBlock(block, key);
-                            });
-                        },
-                        icon: "icon-add",
-                        name: localized[1]
+                const settingsTypePicker = {
+                    title: localizedTitle,
+                    section: "settings",
+                    treeAlias: "documentTypes",
+                    entityType: "documentType",
+                    isDialog: true,
+                    filter: function (node) {
+                        if (node.metaData.isElement === true) {
+                            return false;
+                        }
+                        return true;
                     },
-                    submit: function (overlay) {
-                        vm.applySettingsToBlock(block, overlay.selectedItem.key);
-                        overlayService.close();
+                    filterCssClass: "not-allowed",
+                    select: function (node) {
+                        vm.applySettingsToBlock(block, udiService.getKey(node.udi));
+                        editorService.close();
                     },
                     close: function () {
-                        overlayService.close();
-                    }
-                };
+                        editorService.close();
+                    },
+                    extraActions: [
+                        {
+                            style: "primary",
+                            labelKey: "blockEditor_labelcreateNewElementType",
+                            action: function () {
+                                vm.createElementTypeAndCallback((key) => {
+                                    vm.applySettingsToBlock(block, key);
+
+                                    // At this point we will close the contentTypePicker.
+                                    editorService.close();
+                                });
+                            }
+                        }
+                    ]
+                };
+                editorService.treePicker(settingsTypePicker);
 
-                overlayService.open(elemTypeSelectorOverlay);
             });
         };
 
@@ -160,6 +171,7 @@
                     filter: function (i) {
                         return !(i.name.indexOf(".html") !== -1);
                     },
+                    filterCssClass: "not-allowed",
                     select: function (node) {
                         const filepath = decodeURIComponent(node.id.replace(/\+/g, " "));
                         block.view = "~/" + filepath;
@@ -206,6 +218,7 @@
                     filter: function (i) {
                         return !(i.name.indexOf(".css") !== -1);
                     },
+                    filterCssClass: "not-allowed",
                     select: function (node) {
                         const filepath = decodeURIComponent(node.id.replace(/\+/g, " "));
                         block.stylesheet = "~/" + filepath;
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 573e673026..d7597d2c87 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1825,12 +1825,12 @@ Mange hilsner fra Umbraco robotten
     <key alias="tooltipForPropertyActionsMenu">Åben egenskabshandlinger</key>
   </area>
   <area alias="blockEditor">
-    <key alias="headlineCreateBlock">Opret ny blok</key>
-    <key alias="headlineAddSettingsElementType">Tilføj en indstillings afsnit</key>
+    <key alias="headlineCreateBlock">Vælg elementtype</key>
+    <key alias="headlineAddSettingsElementType">Tilføj en indstillings elementtype</key>
     <key alias="headlineAddCustomView">Tilføj visning</key>
     <key alias="headlineAddCustomStylesheet">Tilføj stylesheet</key>
     <key alias="headlineAddThumbnail">Vælg billede</key>
-    <key alias="labelcreateNewElementType">Opret ny</key>
+    <key alias="labelcreateNewElementType">Opret ny elementtype</key>
     <key alias="labelCustomStylesheet">Overskriv stylesheet</key>
     <key alias="addCustomStylesheet">Tilføj stylesheet</key>
     <key alias="headlineEditorAppearance">Redigerings udseende</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 638f99e421..a7f4e6f3f9 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2467,12 +2467,12 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="formsDescription">Create forms using an intuitive drag and drop interface. From simple contact forms that sends e-mails to advanced questionaires that integrate with CRM systems. Your clients will love it!</key>
   </area>
   <area alias="blockEditor">
-    <key alias="headlineCreateBlock">Create new block</key>
-    <key alias="headlineAddSettingsElementType">Attach a settings section</key>
+    <key alias="headlineCreateBlock">Pick Element Type</key>
+    <key alias="headlineAddSettingsElementType">Attach a settings Element Type</key>
     <key alias="headlineAddCustomView">Select view</key>
     <key alias="headlineAddCustomStylesheet">Select stylesheet</key>
     <key alias="headlineAddThumbnail">Choose thumbnail</key>
-    <key alias="labelcreateNewElementType">Create new</key>
+    <key alias="labelcreateNewElementType">Create new Element Type</key>
     <key alias="labelCustomStylesheet">Custom stylesheet</key>
     <key alias="addCustomStylesheet">Add stylesheet</key>
     <key alias="headlineEditorAppearance">Editor apperance</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index c870ef89cf..93a4879739 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2489,12 +2489,12 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="formsDescription">Create forms using an intuitive drag and drop interface. From simple contact forms that sends e-mails to advanced questionaires that integrate with CRM systems. Your clients will love it!</key>
   </area>
   <area alias="blockEditor">
-    <key alias="headlineCreateBlock">Create new block</key>
-    <key alias="headlineAddSettingsElementType">Attach a settings section</key>
+    <key alias="headlineCreateBlock">Pick Element Type</key>
+    <key alias="headlineAddSettingsElementType">Attach a settings Element Type</key>
     <key alias="headlineAddCustomView">Select view</key>
     <key alias="headlineAddCustomStylesheet">Select stylesheet</key>
     <key alias="headlineAddThumbnail">Choose thumbnail</key>
-    <key alias="labelcreateNewElementType">Create new</key>
+    <key alias="labelcreateNewElementType">Create new Element Type</key>
     <key alias="labelCustomStylesheet">Custom stylesheet</key>
     <key alias="addCustomStylesheet">Add stylesheet</key>
     <key alias="headlineEditorAppearance">Editor apperance</key>