diff --git a/src/Umbraco.Core/Constants-PropertyEditors.cs b/src/Umbraco.Core/Constants-PropertyEditors.cs
index f9b298e586..0c2e246721 100644
--- a/src/Umbraco.Core/Constants-PropertyEditors.cs
+++ b/src/Umbraco.Core/Constants-PropertyEditors.cs
@@ -19,11 +19,6 @@ namespace Umbraco.Core
             /// </summary>
             public static class Aliases
             {
-                /// <summary>
-                /// Block Editor.
-                /// </summary>
-                public const string BlockEditor = "Umbraco.BlockEditor";
-
                 /// <summary>
                 /// CheckBox List.
                 /// </summary>
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditor.directive.js
new file mode 100644
index 0000000000..79463d1d24
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditor.directive.js
@@ -0,0 +1,20 @@
+angular.module("umbraco.directives").directive('umbBlockEditor', [
+    function () {
+        var link = function (scope, el, attr, ctrl) {
+            scope.view = attr.view || "views/propertyeditors/blockeditor/blockeditor.simplelist.html";
+        };
+
+        return {
+            restrict: "E",
+            templateUrl: "views/propertyeditors/blockeditor/blockeditor.directive.html",
+            scope: {
+                config: "=",
+                view: "=?",
+                blocks: "="
+            },
+            controller: "Umbraco.PropertyEditors.BlockEditor.DirectiveController",
+            controllerAs: "vm",
+            link: link
+        };
+    }
+]);
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblock.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblock.directive.js
index ee042eac35..b1afa5f0f4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblock.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblock.directive.js
@@ -1,12 +1,12 @@
 angular.module("umbraco.directives").directive('umbBlockEditorBlock', [
     function () {
         var link = function (scope, el, attr, ctrl) {
+            scope.view = attr.view || "views/propertyeditors/blockeditor/blockeditor.block.html";
         };
 
         return {
             restrict: "E",
-            replace: true,
-            templateUrl: "views/propertyeditors/blockeditor/blockeditor.block.html",
+            template: "<div ng-include='view'></div>",
             link: link
         };
     }
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblocks.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblocks.directive.js
deleted file mode 100644
index 9c67e134ea..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbblockeditorblocks.directive.js
+++ /dev/null
@@ -1,13 +0,0 @@
-angular.module("umbraco.directives").directive('umbBlockEditorBlocks', [
-    function () {
-        var link = function (scope, el, attr, ctrl) {
-        };
-
-        return {
-            restrict: "E",
-            replace: true,
-            templateUrl: "views/propertyeditors/blockeditor/blockeditor.blocks.html",
-            link: link
-        };
-    }
-]);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.block.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.block.html
index 68c30065ab..b27f08e060 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.block.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.block.html
@@ -1,14 +1,13 @@
-<div class="umb-node-preview umb-node-preview--sortable">
-    <i ng-if="icon" class="umb-node-preview__icon {{ icon }}"></i>
-    <div class="umb-node-preview__content">
-        
-        <div class="umb-node-preview__name" ng-attr-title="{{alias}}">A name for block to identify it</div>
-        <div class="umb-node-preview__description" ng-if="description">{{ description }}</div>
-
+<div>
+    <div>
+        <div style="cursor:pointer" ng-click="vm.editSettings(block)" class="di">
+            <i class="icon icon-settings"></i>
+        </div>
+        <div style="cursor:pointer" ng-click="vm.remove(block)" class="di">
+            <i class="icon icon-trash"></i>
+        </div>
     </div>
-    <div class="umb-node-preview__actions">
-        <a class="umb-node-preview__action" title="Edit" href="" ng-click="vm.editContent(block)"><localize key="general_edit">Edit</localize></a>
-        <a class="umb-node-preview__action" title="Settings" href="" ng-click="vm.editSettings(block)"><localize key="general_settings">Settings</localize></a>
-        <a class="umb-node-preview__action umb-node-preview__action--red" title="Remove" ng-href="" ng-click="vm.remove(block)"><localize key="general_remove">Remove</localize></a>
+    <div style="cursor:pointer" ng-click="vm.editContent(block)">
+        Eventually a block identifier will go here (e.g. element type icon)
     </div>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.blocks.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.blocks.html
deleted file mode 100644
index dc3afb5823..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.blocks.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div ui-sortable="vm.sortableOptions" ng-model="model.value">
-    <umb-block-editor-block ng-repeat="block in model.value"></umb-block-editor-block>
-</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.directive.controller.js
similarity index 82%
rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.directive.controller.js
index acbee4ed0f..6ea6010e57 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.directive.controller.js
@@ -1,15 +1,9 @@
-function BlockEditorPropertyEditorController($scope, contentResource, editorService, iconHelper, clipboardService) {
+function BlockEditorDirectiveController($scope, contentResource, editorService) {
+function BlockEditorPropertyEditorController($scope, contentResource, editorService, iconHelper, clipboardService) {
     var vm = this;
 
     vm.scaffolds = [];
     vm.loading = true;
-    vm.sortableOptions = {
-        axis: "y",
-        cursor: "move",
-        handle: ".handle",
-        tolerance: 'pointer'
-    };
-
     vm.add = add;
     vm.editContent = editContent;
     vm.editSettings = editSettings;
@@ -23,12 +17,15 @@
     var scaffoldsLoaded = 0;
 
     function init() {
-        $scope.model.value = $scope.model.value || [];
-        _.each($scope.model.config.blocks, function (blockConfig) {
-            contentResource.getScaffoldByUdi(-20, blockConfig.elementType).then(function (scaffold) {
+        if (!$scope.blocks) {
+            $scope.blocks = [];
+        }
+        
+        _.each($scope.config, function (config) {
+            contentResource.getScaffoldByUdi(-20, config.elementType).then(function (scaffold) {
                 if (scaffold.isElement) {
                     // the scaffold udi is not the same as the element type udi, but we need it to be for comparison
-                    scaffold.udi = blockConfig.elementType;
+                    scaffold.udi = config.elementType;
                     // shift this up to be consistent with other entities
                     scaffold.thumbnail = scaffold.documentType.thumbnail;
                     vm.scaffolds.push(scaffold);
@@ -44,12 +41,18 @@
 
     function initIfAllScaffoldsHaveLoaded() {
         // Initialize when all scaffolds have loaded
-        if ($scope.model.config.blocks.length === scaffoldsLoaded) {
+        if ($scope.config.length === scaffoldsLoaded) {
             vm.scaffolds = _.sortBy(vm.scaffolds, function (scaffold) {
-                return _.findIndex($scope.model.config.blocks, function (blockConfig) {
+                return _.findIndex($scope.config, function (blockConfig) {
                     return blockConfig.elementType === scaffold.udi;
                 });
             });
+
+            _.each($scope.blocks, function (block) {
+                applyFakeSettings(block);
+            });
+
+
             
             allowedElements = vm.scaffolds.map(x => x.contentTypeAlias);
             
@@ -172,9 +175,9 @@
                         block.content[property.alias] = property.value;
                     });
                 });
-                            
-                if ($scope.model.value.indexOf(block) < 0) {
-                    $scope.model.value.push(block);
+                if ($scope.blocks.indexOf(block) < 0) {
+                    $scope.blocks.push(block);
+                    applyFakeSettings(block);
                 }
                 
                 editorService.close();
@@ -192,8 +195,8 @@
             title: "TODO: Edit settings title here",
             view: "views/propertyeditors/blockeditor/blockeditor.editsettings.html",
             size: "medium",
-            submit: function (model) {
-                console.log("TODO: something with block settings", model)
+            submit: function(model) {
+                applyFakeSettings(block);
                 editorService.close();
             },
             close: function () {
@@ -204,11 +207,18 @@
     }
 
     function remove(block) {
+        // this should be replaced by a custom dialog (pending some PRs)
         if (confirm("TODO: Are you sure?")) {
-            $scope.model.value.splice($scope.model.value.indexOf(block), 1);
+            $scope.blocks.splice($scope.blocks.indexOf(block), 1);
         }
     }
 
     init();
+
+    // TODO: remove this (only for testing)
+    function applyFakeSettings(block) {
+        block.settings["cols"] = 1 + Math.floor(Math.random() * 3);
+        block.settings["rows"] = 1 + Math.floor(Math.random() * 2);
+    }
 }
-angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.PropertyEditorController", BlockEditorPropertyEditorController);
+angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.DirectiveController", BlockEditorDirectiveController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.directive.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.directive.html
new file mode 100644
index 0000000000..98ae7a79fd
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.directive.html
@@ -0,0 +1,7 @@
+<div>
+    <div style="position:relative" ng-if="vm.loading">
+        <umb-load-indicator />
+    </div>
+
+    <div ng-if="!vm.loading" ng-include="view"></div>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.html
deleted file mode 100644
index 930294f755..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div ng-controller="Umbraco.PropertyEditors.BlockEditor.PropertyEditorController as vm">
-    <div style="position:relative" ng-if="vm.loading">
-        <umb-load-indicator />
-    </div>
-
-    <div ng-if="!vm.loading">
-        <umb-block-editor-blocks></umb-block-editor-blocks> 
-
-        <div class="umb-nested-content__footer-bar">
-            <a href class="umb-nested-content__add-content" ng-class="{ '--disabled': !vm.scaffolds.length }" ng-click="vm.openNodeTypePicker($event)" prevent-default>
-                <localize key="grid_addElement" ng-if="vm.scaffolds.length > 1"></localize>
-                <span ng-if="vm.scaffolds.length === 1">
-                    <localize key="general_add"></localize> {{ vm.scaffolds[0].contentTypeName }}
-                </span>
-            </a>
-        </div>
-    </div>
-    
-    <umb-overlay
-        ng-if="vm.overlayMenu.show"
-        position="target"
-        size="vm.overlayMenu.size"
-        view="vm.overlayMenu.view"
-        model="vm.overlayMenu">
-    </umb-overlay>
-</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.controller.js
index 26ffcb23c3..5f65fdc007 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.controller.js
@@ -32,6 +32,10 @@
                 openSettingsPicker(block);
             };
 
+            $scope.$on("formSubmitting", function () {
+                $scope.model.value = $scope.blocks;
+            });
+
             function openElementPicker(block) {
 
                 var pickerOptions = {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.html
index c91e900942..29e2978724 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.settings.html
@@ -1,23 +1,20 @@
 <div ng-controller="Umbraco.PropertyEditors.BlockEditor.SettingsController">
 
-    <pre>{{model.value | json}}</pre>
-
-    <div ng-repeat="block in model.value">
-        <strong>
-            {{block.elementType}}
-        </strong>
-
-        <a href="" ng-click="editSettings(block)">
-            <localize key="general_settings">Settings</localize>
-        </a>
-
-        <a href="" ng-click="removeBlock($index)">
-            <localize key="general_remove">Remove</localize>
-        </a>
-    </div>
+    <umb-node-preview ng-repeat="block in blocks"
+                      name="getBlockName(block)"
+                      alias="block.elementType"
+                      icon="icon-folder"
+                      allow-edit="true"
+                      on-edit="editSettings(block)"
+                      allow-remove="true"
+                      on-remove="removeBlock($index)">
+    </umb-node-preview>
 
     <a href="" class="umb-node-preview-add" ng-click="addBlock()">
         <localize key="general_add">Add</localize>
     </a>
 
+    <hr />
+    <pre>{{model.value | json}}</pre>
+
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.simplelist.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.simplelist.controller.js
new file mode 100644
index 0000000000..b98eb2cd6d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.simplelist.controller.js
@@ -0,0 +1,9 @@
+function BlockEditorSimpleListController($scope, contentResource, editorService) {
+    $scope.sortableOptions = {
+        axis: "y",
+        cursor: "move",
+        handle: ".handle",
+        tolerance: 'pointer'
+    };
+}
+angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.SimpleListController", BlockEditorSimpleListController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.simplelist.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.simplelist.html
new file mode 100644
index 0000000000..ff4809da77
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockeditor/blockeditor.simplelist.html
@@ -0,0 +1,16 @@
+<div ng-controller="Umbraco.PropertyEditors.BlockEditor.SimpleListController">
+    <ul class="unstyled" ui-sortable="sortableOptions" ng-model="blocks">
+        <li ng-repeat="block in blocks" style="border: 1px solid silver; margin-bottom: 4px; padding: 4px;">
+            <div class="handle">
+                <umb-block-editor-block></umb-block-editor-block>
+            </div>
+        </li>
+    </ul>
+
+    <div>
+        Add:
+        <div style="cursor:pointer" ng-click="vm.add(scaffold)" ng-repeat="scaffold in vm.scaffolds" class="di">
+            <i class="icon {{scaffold.documentType.icon}}"></i>
+        </div>
+    </div>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/simplegrid/simplegrid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/simplegrid/simplegrid.html
new file mode 100644
index 0000000000..3c95c536f3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/simplegrid/simplegrid.html
@@ -0,0 +1 @@
+<umb-block-editor blocks="model.value" config="model.config.blocks"></umb-block-editor>
diff --git a/src/Umbraco.Web/PropertyEditors/BlockEditorConfiguration.cs b/src/Umbraco.Web/PropertyEditors/BlockEditorConfiguration.cs
index b91c6b37bf..c96c901861 100644
--- a/src/Umbraco.Web/PropertyEditors/BlockEditorConfiguration.cs
+++ b/src/Umbraco.Web/PropertyEditors/BlockEditorConfiguration.cs
@@ -4,7 +4,7 @@ using Umbraco.Core.PropertyEditors;
 
 namespace Umbraco.Web.PropertyEditors
 {
-    public class BlockEditorConfiguration
+    public abstract class BlockEditorConfiguration
     {
         [ConfigurationField("blocks", "Blocks", "views/propertyeditors/blockeditor/blockeditor.settings.html")]
         public Block[] Blocks { get; set; }
diff --git a/src/Umbraco.Web/PropertyEditors/BlockEditorConfigurationEditor.cs b/src/Umbraco.Web/PropertyEditors/BlockEditorConfigurationEditor.cs
deleted file mode 100644
index cd68108f16..0000000000
--- a/src/Umbraco.Web/PropertyEditors/BlockEditorConfigurationEditor.cs
+++ /dev/null
@@ -1,9 +0,0 @@
-using Umbraco.Core.PropertyEditors;
-
-namespace Umbraco.Web.PropertyEditors
-{
-    internal class BlockEditorConfigurationEditor : ConfigurationEditor<BlockEditorConfiguration>
-    {
-
-    }
-}
diff --git a/src/Umbraco.Web/PropertyEditors/BlockEditorPropertyEditor.cs b/src/Umbraco.Web/PropertyEditors/BlockEditorPropertyEditor.cs
deleted file mode 100644
index f486af4c3d..0000000000
--- a/src/Umbraco.Web/PropertyEditors/BlockEditorPropertyEditor.cs
+++ /dev/null
@@ -1,18 +0,0 @@
-using Umbraco.Core;
-using Umbraco.Core.Logging;
-using Umbraco.Core.PropertyEditors;
-
-namespace Umbraco.Web.PropertyEditors
-{
-    [DataEditor(Constants.PropertyEditors.Aliases.BlockEditor, EditorType.PropertyValue , "Block Editor", "blockeditor", ValueType = ValueTypes.Json, Group="rich content", Icon="icon-application-window-alt")]
-    public class BlockEditorPropertyEditor : DataEditor
-    {
-        public BlockEditorPropertyEditor(ILogger logger)
-            : base(logger)
-        { }
-
-        protected override IConfigurationEditor CreateConfigurationEditor() => new BlockEditorConfigurationEditor();
-
-        protected override IDataValueEditor CreateValueEditor() => base.CreateValueEditor();
-    }
-}
diff --git a/src/Umbraco.Web/PropertyEditors/SimpleGridConfiguration.cs b/src/Umbraco.Web/PropertyEditors/SimpleGridConfiguration.cs
new file mode 100644
index 0000000000..8664c3b40c
--- /dev/null
+++ b/src/Umbraco.Web/PropertyEditors/SimpleGridConfiguration.cs
@@ -0,0 +1,6 @@
+namespace Umbraco.Web.PropertyEditors
+{
+    public class SimpleGridConfiguration : BlockEditorConfiguration
+    {
+    }
+}
diff --git a/src/Umbraco.Web/PropertyEditors/SimpleGridConfigurationEditor.cs b/src/Umbraco.Web/PropertyEditors/SimpleGridConfigurationEditor.cs
new file mode 100644
index 0000000000..eaa054ff7e
--- /dev/null
+++ b/src/Umbraco.Web/PropertyEditors/SimpleGridConfigurationEditor.cs
@@ -0,0 +1,9 @@
+using Umbraco.Core.PropertyEditors;
+
+namespace Umbraco.Web.PropertyEditors
+{
+    internal class SimpleGridConfigurationEditor : ConfigurationEditor<SimpleGridConfiguration>
+    {
+
+    }
+}
diff --git a/src/Umbraco.Web/PropertyEditors/SimpleGridPropertyEditor.cs b/src/Umbraco.Web/PropertyEditors/SimpleGridPropertyEditor.cs
new file mode 100644
index 0000000000..eb20a177ea
--- /dev/null
+++ b/src/Umbraco.Web/PropertyEditors/SimpleGridPropertyEditor.cs
@@ -0,0 +1,17 @@
+using Umbraco.Core.Logging;
+using Umbraco.Core.PropertyEditors;
+
+namespace Umbraco.Web.PropertyEditors
+{
+    [DataEditor("Umbraco.SimpleGrid", EditorType.PropertyValue , "Simple Grid", "simplegrid", ValueType = ValueTypes.Json, Group="rich content", Icon="icon-application-window-alt")]
+    public class SimpleGridPropertyEditor : DataEditor
+    {
+        public SimpleGridPropertyEditor(ILogger logger)
+            : base(logger)
+        { }
+
+        protected override IConfigurationEditor CreateConfigurationEditor() => new SimpleGridConfigurationEditor();
+
+        protected override IDataValueEditor CreateValueEditor() => base.CreateValueEditor();
+    }
+}
diff --git a/src/Umbraco.Web/Umbraco.Web.csproj b/src/Umbraco.Web/Umbraco.Web.csproj
index 4860559e00..57e2c722a5 100755
--- a/src/Umbraco.Web/Umbraco.Web.csproj
+++ b/src/Umbraco.Web/Umbraco.Web.csproj
@@ -212,8 +212,9 @@
     <Compile Include="Models\TemplateQuery\QueryConditionExtensions.cs" />
     <Compile Include="Mvc\SurfaceControllerTypeCollectionBuilder.cs" />
     <Compile Include="PropertyEditors\BlockEditorConfiguration.cs" />
-    <Compile Include="PropertyEditors\BlockEditorConfigurationEditor.cs" />
-    <Compile Include="PropertyEditors\BlockEditorPropertyEditor.cs" />
+    <Compile Include="PropertyEditors\SimpleGridConfiguration.cs" />
+    <Compile Include="PropertyEditors\SimpleGridConfigurationEditor.cs" />
+    <Compile Include="PropertyEditors\SimpleGridPropertyEditor.cs" />
     <Compile Include="PublishedCache\NuCache\Snap\GenObj.cs" />
     <Compile Include="PublishedCache\NuCache\Snap\GenRef.cs" />
     <Compile Include="PublishedCache\NuCache\Snap\LinkedNode.cs" />