diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
index 30d0f89e40..ed82eb6523 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
@@ -9,28 +9,29 @@ angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController",
 	//saved value contains a list of images with their coordinates a Dot coordinates
 	//this will be $scope.model.value...
 	var sampleData = [
-		{id: 1234, coordinates: {x:123,y:345}, center: {x:123,y:12}},
-		{id: 2234, coordinates: {x:123,y:345}, center: {x:123,y:12}},
-		{id: 2344, coordinates: {x:123,y:345}, center: {x:123,y:12}},
+		{id: 1143, coordinates: {x:123,y:345}, center: {x:123,y:12}},
+		{id: 1144, coordinates: {x:123,y:345}, center: {x:123,y:12}},
+		{id: 1145, coordinates: {x:123,y:345}, center: {x:123,y:12}},
 	];
 
 	$scope.images = sampleData;
 	$($scope.images).each(function(i,img){
 		mediaResource.getById(img.id).then(function(media){
-			img.media = media;
+			//img.media = media;
 
 			//shortcuts
-			img.file = imageHelper.getImagePropertyVaue({imageModel: media});
-			img.thumbnail = imageHelper.getThumbnailFromPath(img.file}); 
+			//TODO, do something better then this for searching
+			img.src = imageHelper.getImagePropertyVaue({imageModel: media});
+			img.thumbnail = imageHelper.getThumbnailFromPath(img.src); 
 		});
 	});
 
  	//List of crops with name and size			
  	$scope.config = {
  		crops: [
- 		{name: "default", x:300,y:400},
- 		{name: "header", x:23,y:40},
- 		{name: "tiny", x:10,y:10}
+	 		{name: "default", x:300,y:400},
+	 		{name: "header", x:23,y:40},
+	 		{name: "tiny", x:10,y:10}
  		]};
 
 
@@ -38,6 +39,10 @@ angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController",
  			var d = dialogService.mediaPicker({scope: $scope, callback: populate});
  		};
 
+ 		$scope.crop = function(image){
+ 			$scope.currentImage = image;
+ 		};
+
  		function populate(data){
  			$scope.model.value = data.selection;
  		}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
index c06e78ec60..b4930bd3f5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
@@ -4,12 +4,12 @@
 		<div class="umb-image-mask">
 				<i class="icon-screenshot"></i>
 				<i class="icon-circle"></i>
-			<img src="/media/dummy/crop-large.png" alt="">
+			<img ng-src="{{currentImage.src}}" style="max-width: 600px; max-height: 400px" alt="">
 		</div>
 
 		<div class="umb-image-controls clearfix">
 			<i class="icon icon-minus"></i> 
-			<input class="range" type="range" min="0" max="100" step="5" value="35">
+			<input class="range" type="range" min="1" max="200" step="1" value="100">
 			<i class="icon icon-plus"></i> 
 		</div>
 	</div>
@@ -18,7 +18,7 @@
 	<ul class="thumbnails umb-crop-preview">
 		<li class="umb-thumbnail" ng-repeat="image in images">
 			<a href ng-click="crop(image)">
-				<img ng-src="image.src" alt="">
+				<img ng-src="{{image.thumbnail}}" alt="">
 			</a>
 		</li>
 		
@@ -29,4 +29,5 @@
 		</li>
 	</ul>
 
+	{{images | json}}
 </div>
\ No newline at end of file