diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js
index ac5399cb75..d536d9174a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js
@@ -5,23 +5,40 @@ angular.module("umbraco")
         $scope.title = "Click to insert macro";
 
         $scope.setMacro = function(){
-            dialogService.macroPicker({
-                dialogData: {
-                    richTextEditor: true,  
-                    macroData: $scope.control.value || {
-                        macroAlias: $scope.control.editor.config && $scope.control.editor.config.macroAlias
-                          ? $scope.control.editor.config.macroAlias : ""
-                    }
-                },
-                callback: function (data) {
-                    $scope.control.value = {
-                            macroAlias: data.macroAlias,
-                            macroParamsDictionary: data.macroParamsDictionary
-                    };
 
-                    $scope.setPreview($scope.control.value );
+            var dialogData = {
+                richTextEditor: true,
+                macroData: $scope.control.value || {
+                    macroAlias: $scope.control.editor.config && $scope.control.editor.config.macroAlias
+                      ? $scope.control.editor.config.macroAlias : ""
                 }
-            });
+            };
+
+            $scope.macroPickerOverlay = {};
+            $scope.macroPickerOverlay.view = "macropicker";
+            $scope.macroPickerOverlay.dialogData = dialogData;
+            $scope.macroPickerOverlay.show = true;
+
+            $scope.macroPickerOverlay.submit = function(model) {
+
+                var macroObject = macroService.collectValueData(model.selectedMacro, model.macroParams, dialogData.renderingEngine);
+
+                $scope.control.value = {
+                        macroAlias: macroObject.macroAlias,
+                        macroParamsDictionary: macroObject.macroParamsDictionary
+                };
+
+                $scope.setPreview($scope.control.value );
+
+                $scope.macroPickerOverlay.show = false;
+                $scope.macroPickerOverlay = null;
+            };
+
+            $scope.macroPickerOverlay.close = function(oldModel) {
+                $scope.macroPickerOverlay.show = false;
+                $scope.macroPickerOverlay = null;
+            };
+
     	};
 
         $scope.setPreview = function(macro){
@@ -45,4 +62,3 @@ angular.module("umbraco")
             }
     	}, 200);
 });
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
index 9963a527ce..732b551b52 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
@@ -13,5 +13,11 @@
 		</div>
 	</div>
 
-</div>
+	<umb-overlay
+		ng-if="macroPickerOverlay.show"
+		model="macroPickerOverlay"
+		view="macroPickerOverlay.view"
+		position="right">
+	</umb-overlay>
 
+</div>