diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js
index 9a032d569f..5bca761162 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js
@@ -11,7 +11,8 @@ var _umbPropertyEditor = function (umbPropEditorHelper) {
         return {
             scope: {
                 model: "=",
-                isPreValue: "@"
+                isPreValue: "@",
+                preview: "@"
             },
             
             require: "^form",
@@ -38,4 +39,4 @@ var _umbPropertyEditor = function (umbPropEditorHelper) {
 
 //Preffered is the umb-property-editor as its more explicit - but we keep umb-editor for backwards compat
 angular.module("umbraco.directives").directive('umbPropertyEditor', _umbPropertyEditor);
-angular.module("umbraco.directives").directive('umbEditor', _umbPropertyEditor);
\ No newline at end of file
+angular.module("umbraco.directives").directive('umbEditor', _umbPropertyEditor);
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 1400547383..a7335d8314 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -106,6 +106,7 @@
 @import "components/overlays/umb-overlay-backdrop.less";
 @import "components/umb-grid.less";
 @import "components/umb-empty-state.less";
+@import "components/umb-property-editor.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index d61f5dece2..56698c6c9c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -293,14 +293,13 @@ input.umb-group-builder__group-sort-value {
     display:none !important;
 }
 
-.umb-group-builder__property-preview-overlay {
+.umb-group-builder__property-preview-background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 10;
-  border-radius: 10px;
+  z-index: -1;
   background: url("../img/checkered-background.png");
   opacity: 0.2;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less
new file mode 100644
index 0000000000..cbea6987e7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less
@@ -0,0 +1,3 @@
+.umb-property-editor.-not-clickable {
+    pointer-events: none;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/querybuilder.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/querybuilder.controller.js
index 7fd15bd715..6dae664a3d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/querybuilder.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/template/querybuilder.controller.js
@@ -33,7 +33,7 @@ angular.module("umbraco").controller('Umbraco.Dialogs.Template.QueryBuilderContr
 						alias: "",
 						name: "",
 					},
-					direction: "Ascending"
+					direction: "ascending"
 				}
 			};
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html
index 80e854e9c2..bbf70f7a8e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html
@@ -1,2 +1,3 @@
-
+<div class="umb-property-editor" ng-class="{'-not-clickable': preview}">
     <div ng-include="propertyEditorView"></div>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index 06ed26a155..fd169ca86a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -179,8 +179,6 @@
 
                             <div tabindex="-1" class="umb-group-builder__property-preview" ng-click="editPropertyTypeSettings(property, tab)" ng-if="!sortingMode" ng-class="{'-not-clickable': !sortingMode && (property.inherited || property.locked)}">
 
-                                <span class="umb-group-builder__property-preview-overlay"></span>
-
                                 <div class="umb-group-builder__property-tags">
 
                                     <span class="umb-group-builder__property-tag -white">
@@ -223,10 +221,13 @@
                                 <ng-form name="propertyEditorPreviewForm" umb-disable-form-validation>
                                     <umb-property-editor
                                         ng-if="property.view !== undefined"
-                                        model="property">
+                                        model="property"
+                                        preview="true">
                                     </umb-property-editor>
                                 </ng-form>
 
+                                <div class="umb-group-builder__property-preview-background"></div>
+
                             </div>
 
                             <!-- row tools -->