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 d536d9174a..5c1d729364 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
@@ -1,6 +1,6 @@
 angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.Grid.MacroController",
-    function ($scope, $rootScope, $timeout, dialogService, macroResource, macroService,  $routeParams) {
+    function ($scope, $timeout, editorService, macroResource, macroService,  $routeParams) {
 
         $scope.title = "Click to insert macro";
 
@@ -14,31 +14,24 @@ angular.module("umbraco")
                 }
             };
 
-            $scope.macroPickerOverlay = {};
-            $scope.macroPickerOverlay.view = "macropicker";
-            $scope.macroPickerOverlay.dialogData = dialogData;
-            $scope.macroPickerOverlay.show = true;
+            var macroPicker = {
+                dialogData: dialogData,
+                submit: function(model) {
+                    var macroObject = macroService.collectValueData(model.selectedMacro, model.macroParams, dialogData.renderingEngine);
 
-            $scope.macroPickerOverlay.submit = function(model) {
-
-                var macroObject = macroService.collectValueData(model.selectedMacro, model.macroParams, dialogData.renderingEngine);
-
-                $scope.control.value = {
+                    $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($scope.control.value );
+                    editorService.close();
+                },
+                close: function() {
+                    editorService.close();
+                }
+            }
+            editorService.macroPicker(macroPicker);
     	};
 
         $scope.setPreview = function(macro){
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 4aad38a24e..cc581698fc 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
@@ -12,12 +12,5 @@
 			</div>
 		</div>
 	</div>
-
-	<umb-overlay
-		ng-if="macroPickerOverlay.show"
-		model="macroPickerOverlay"
-		view="macroPickerOverlay.view"
-		position="right">
-	</umb-overlay>
-
+	
 </div>