diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.controller.js
new file mode 100644
index 0000000000..d2da1c95db
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.controller.js
@@ -0,0 +1,97 @@
+//DO NOT DELETE THIS, this is in use... 
+angular.module('umbraco')
+.controller("Umbraco.PropertyEditors.MacroContainerController",
+	
+	function($scope, dialogService, entityResource, macroService, macroResource){
+		$scope.renderModel = [];
+		
+		if($scope.model.value){
+			var macros = $scope.model.value.split('>');
+			angular.forEach(macros, function(syntax, key){
+
+				if(syntax && syntax.length > 10){
+					//re-add the char we split on
+					syntax = syntax + ">";
+					var parsed = macroService.parseMacroSyntax(syntax);
+					parsed.syntax = syntax;
+					collectDetails(parsed);
+
+					$scope.renderModel.push(parsed);
+				}
+			});
+		}
+
+		
+		function collectDetails(macro){
+			macro.details = "";
+			if(macro.marcoParamsDictionary){
+			
+				angular.forEach((macro.marcoParamsDictionary), function(value, key){
+					macro.details += key + ": " + value + " ";	
+				});	
+			}		
+		}
+
+		function openDialog(index){
+			var dialogData = {};
+
+			if(index){
+				var macro = $scope.renderModel[index];
+				dialogData = {macroData: macro};
+			}
+			
+			dialogService.macroPicker({
+                scope: $scope,
+                dialogData : dialogData,
+                    callback: function(data) {
+
+                    	collectDetails(data);
+
+                        //update the raw syntax and the list...
+                        if(index){
+                        	$scope.renderModel[index] = data;
+                        }else{
+                        	$scope.renderModel.push(data);
+                        }
+                    }
+                });
+		}	
+
+
+
+		$scope.edit =function(index){
+				openDialog(index);
+		};
+
+		$scope.add =function(){
+				openDialog();
+		};
+
+		$scope.remove =function(index){
+			$scope.renderModel.splice(index, 1);
+			$scope.macros.splice(index, 1);
+			$scope.model.value = trim($scope.macros.join(), ",");
+		};
+
+	    $scope.clear = function() {
+	        $scope.model.value = "";
+	        $scope.renderModel = [];
+	        $scope.macros = [];
+	    };
+
+	    $scope.$on("formSubmitting", function (ev, args) {	
+			var syntax = [];
+	    	angular.forEach($scope.renderModel, function(value, key){
+	    		syntax.push(value.syntax);
+	    	});
+
+			$scope.model.value = syntax.join("");
+	    });
+
+
+		function trim(str, chr) {
+			var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^'+chr+'+|'+chr+'+$', 'g');
+			return str.replace(rgxtrim, '');
+		}
+
+});
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.html
new file mode 100644
index 0000000000..13adc94635
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.html
@@ -0,0 +1,28 @@
+<div ng-controller="Umbraco.PropertyEditors.MacroContainerController" class="umb-editor umb-macrocontainer">
+
+    <ul class="unstyled list-icons" 
+		ui-sortable="sortableOptions"
+		ng-model="renderModel">	
+		<li ng-repeat="macro in renderModel" style="max-width: 300px">
+
+			<i class="icon icon-navigation handle"></i>
+
+            <div class="pull-right">
+                <a href ng-click="edit($index)"><i ng-show="macro.details" class="icon icon-edit"></i></a>
+                <i class="icon icon-delete red" ng-click="remove($index)" ></i>
+            </div>
+
+			<a href="#" prevent-default ng-click="edit($index)">{{macro.macroAlias}}</a>
+            <small class="umb-detail">{{macro.details}}</small> 
+        </li>
+	</ul>
+
+	<ul class="unstyled list-icons">	
+		<li>
+            <i class="icon icon-add blue"></i>
+			<a href="#" ng-click="add()" prevent-default>
+				 <localize key="general_add">Add</localize>
+			</a>
+		</li>
+	</ul>
+</div>
\ No newline at end of file