diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js
index cf81d1cda6..be9a24fbb7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js
@@ -3,7 +3,7 @@
 angular.module('umbraco')
 .controller("Umbraco.PrevalueEditors.TreePickerController",
 	
-	function($scope, dialogService, entityResource, $log, iconHelper){
+	function($scope, dialogService, entityResource, $log, iconHelper, miniEditorHelper){
 		$scope.renderModel = [];
 		$scope.ids = [];
 
@@ -45,6 +45,11 @@ angular.module('umbraco')
 					populate(model.selection[0]);
 				}
 
+				console.log(model);
+				/* entityResource.getUrl(updatedNode.id, entityType).then(function(data){
+						node.url = data;
+					}); */
+
 				$scope.treePickerOverlay.show = false;
 				$scope.treePickerOverlay = null;
 			};
@@ -55,7 +60,10 @@ angular.module('umbraco')
 			};
 
 		}
+		
 
+		
+	
 		$scope.remove =function(index){
 			$scope.renderModel.splice(index, 1);
 			$scope.ids.splice(index, 1);
@@ -74,10 +82,12 @@ angular.module('umbraco')
 
             if ($scope.ids.indexOf(itemId) < 0){
 				item.icon = iconHelper.convertFromLegacyIcon(item.icon);
-
-                $scope.ids.push(itemId);
-				$scope.renderModel.push({name: item.name, id: item.id, icon: item.icon, udi: item.udi});
-				$scope.model.value = trim($scope.ids.join(), ",");
+				entityResource.getUrl(item.id, "Document").then(function(data){
+					item.path = data;		
+					$scope.ids.push(itemId);
+					$scope.renderModel.push({name: item.name, path: item.path, id: item.id, icon: item.icon, udi: item.udi});
+					$scope.model.value = trim($scope.ids.join(), ",");
+				});                 
 			}	
 		};
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
index 5ec114fc19..dd527bbbbf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
@@ -1,5 +1,5 @@
 <div ng-controller="Umbraco.PrevalueEditors.TreePickerController" class="umb-editor umb-contentpicker">
-
+	<!--
 	<ul class="unstyled list-icons" 
 		ng-model="renderModel">	
 		<li ng-repeat="node in renderModel">
@@ -10,7 +10,26 @@
 			<a href prevent-default ng-click="openContentPicker()" >{{node.name}}</a>
 		</li>
 	</ul>
+	-->
 
+	<div ui-sortable="sortableOptions" ng-model="renderModel">
+		<umb-node-preview
+			ng-repeat="node in renderModel"
+			icon="node.icon"
+			name="node.name"
+			published="node.published"
+			description="node.path"
+			sortable="!sortableOptions.disabled"
+			allow-remove="remove"
+			allow-open="model.config.showOpenButton && allowOpenButton && !dialogEditor"
+			allow-edit=""
+			on-remove="remove($index)"
+			on-open="openMiniEditor(node)"
+			on-edit="openContentPicker()">
+		</umb-node-preview>
+	</div>
+
+	<!--
 	<ul class="unstyled list-icons" ng-show="multipicker || renderModel.length === 0">	
 		<li>
 			<i class="icon icon-add turquoise"></i>
@@ -19,6 +38,15 @@
 			</a>
 		</li>
 	</ul>
+	-->
+
+	<a ng-show="model.config.multiPicker === true || renderModel.length === 0"
+		class="umb-node-preview-add"
+		href=""
+		ng-click="openContentPicker()"
+		prevent-default>
+		<localize key="general_add">Add</localize>
+	</a>
 
 	<umb-overlay
 		ng-if="treePickerOverlay.show"