diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index e06a45771b..3953ad1fc7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -294,7 +294,90 @@ ul.color-picker li a  {
    margin-top: 7px;
    width: 320px;
 }
+   .umb-cropper-gravity .viewport, .umb-cropper-gravity, .umb-cropper-imageholder {
+        display: inline-block;
+    }
 
+    .umb-cropper-imageholder {
+        float: left;
+    }
+
+    .cropList {
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+    }
+
+    .gravity-container .viewport {
+        width: 494px;
+    }
+
+    .imagecropper .umb-sortable-thumbnails {
+        border-left: 2px solid #f8f8f8;
+        margin-left: 4px;
+        padding-left: 2px;
+        float: left;
+        width: 100px;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li {
+        display: block;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li.current a, .imagecropper .umb-sortable-thumbnails li.current a:hover {
+        background: #eeeeee;
+        text-decoration: none;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li:first-of-type {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li .crop-name, .imagecropper .umb-sortable-thumbnails li .crop-size {
+        display: block;
+        text-align: left;
+        font-size: 11px;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li .crop-size {
+        font-size: 10px;
+        font-style: italic;
+        color: #666;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li a {
+        display: block;
+        padding: 5px;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li a:hover {
+        background: #f8f8f8;
+        text-decoration: none;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li a:hover .crop-text {
+        text-decoration: none;
+    }
+
+    .btn-crop-delete {
+        display: block;
+        text-align: left;
+    }
+
+    .imagecropper .umb-sortable-thumbnails.many {
+        width: 210px;
+    }
+
+    .imagecropper .umb-sortable-thumbnails.many li {
+        width: 85px;
+        float: left;
+    }
+
+    .imagecropper .umb-sortable-thumbnails.many li:nth-child(2) {
+        margin-top: 0;
+        padding-top: 0;
+    }
 
 //
 // folder-browser
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
index 34b976e078..29148b32eb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
@@ -1,63 +1,65 @@
-<div class="umb-editor umb-mediapicker" 
-	ng-controller="Umbraco.PropertyEditors.ImageCropperController">
+<div class="umb-editor umb-mediapicker"
+     ng-controller="Umbraco.PropertyEditors.ImageCropperController">
 
 
-	<span class="fileinput-button umb-upload-button-big"
-	    style="margin-bottom: 5px;"
-	    ng-hide="imageSrc">
-	    <i class="icon icon-page-up"></i>
-	    <p><localize key="media_clickToUpload">Click to upload</localize></p>
-	    <umb-single-file-upload></umb-single-file-upload>
-	</span>
-	
+    <span class="fileinput-button umb-upload-button-big"
+          style="margin-bottom: 5px;"
+          ng-hide="imageSrc">
+        <i class="icon icon-page-up"></i>
+        <p><localize key="media_clickToUpload">Click to upload</localize></p>
+        <umb-single-file-upload></umb-single-file-upload>
+    </span>
 
-	<div ng-if="imageSrc">
-			<div ng-if="currentCrop">
-				<div style="position: relative; margin-bottom: 10px; width: 492px; border: 1px solid #f8f8f8;">
 
-					<i ng-click="done()" style="opacity: 0.5; position: absolute; top: 3px; right: 3px" class="icon icon-delete btn-round"></i>
+    <div ng-if="imageSrc">
 
-					<div>
-						<umb-image-crop
-						 height="{{currentCrop.height}}"
-						 width= "{{currentCrop.width}}" 
-						 crop="currentCrop.coordinates"
-						 center="model.value.focalPoint"
-						 max-size="450"
-						 src="imageSrc" />
-					</div>
 
-					 <a href style="margin:auto; text-align: center; font-size: 11px;" class="btn btn-link red"
-					 		ng-click="currentCrop.coordinates = undefined; done()">
-                            <localize key="imagecropper_reset">Reset</localize>
-					 </a>
-				</div>
-			</div>
+        <div class="imagecropper clearfix">
 
-			<div ng-if="!currentCrop">
-				<div>
-					<umb-image-gravity 
-						src="imageSrc" 
-						center="model.value.focalPoint" />
-				</div>
+            <div ng-if="currentCrop" style="float:left;" class="clearfix">
+                <div style="position: relative; margin-bottom: 10px; width: 492px; border: 1px solid #f8f8f8;">
 
-				<hr />
+                    <i ng-click="done()" style="opacity: 0.5; position: absolute; top: 3px; right: 3px" class="icon icon-delete btn-round"></i>
 
-				<ul class="umb-sortable-thumbnails" >
-					<li ng-repeat="(key,value) in model.value.crops">
-						<a href title="{{value.alias}}: {{value.width}}px x {{value.height}}px" ng-click="crop(value)">
-							<umb-image-thumbnail
-								center="model.value.focalPoint"
-								crop="value.coordinates"
-								src="imageSrc"
-								height="{{value.height}}"
-								width="{{value.width}}"
-								max-size="40"/>
-						</a>
-					</li>
-				</ul>
+                    <div>
+                        <umb-image-crop height="{{currentCrop.height}}"
+                                        width="{{currentCrop.width}}"
+                                        crop="currentCrop.coordinates"
+                                        center="model.value.focalPoint"
+                                        max-size="450"
+                                        src="imageSrc" />
+                    </div>
 
-				<a href class="btn btn-link" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
-			</div>
-	</div>
+                    <a href style="margin:auto; text-align: center; font-size: 11px;" class="btn btn-link red"
+                       ng-click="currentCrop.coordinates = undefined; done()">
+                        <localize key="imagecropper_reset">Reset</localize>
+                    </a>
+                </div>
+            </div>
+            <div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
+                <umb-image-gravity src="imageSrc"
+                                   center="model.value.focalPoint" />
+            </div>
+
+            <ul class="umb-sortable-thumbnails cropList clearfix" ng-class="{'many':model.value.crops.length >= 4}">
+                <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}">
+                    <a href title="{{value.alias}}: {{value.width}}px x {{value.height}}px" ng-click="crop(value)">
+                        <umb-image-thumbnail center="model.value.focalPoint"
+                                             crop="value.coordinates"
+                                             src="imageSrc"
+                                             height="{{value.height}}"
+                                             width="{{value.width}}"
+                                             max-size="75"></umb-image-thumbnail>
+                        <span class="crop-name crop-text">{{value.alias}}</span>
+                        <span class="crop-size crop-text">{{value.width}}px x {{value.height}}px</span>
+
+                    </a>
+                </li>
+            </ul>
+
+
+        </div>
+        <a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
+
+    </div>
 </div>
\ No newline at end of file