diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.controller.js
index 922370a032..b26c6f8549 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.controller.js
@@ -22,7 +22,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
             crop.editMode = true;
 	    };
 
-	    $scope.addNewCrop = function (evt) {
+        $scope.addNewCrop = function (evt) {
             evt.preventDefault();
 
             var crop = {};
@@ -30,7 +30,8 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
 
             $scope.model.value.push(crop);
             $scope.validate(crop);
-        }
+        };
+
         $scope.setChanges = function (crop) {
             $scope.validate(crop);
             if(
@@ -42,22 +43,31 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
                 window.dispatchEvent(new Event('resize.umbImageGravity'));
             }
         };
+
+        $scope.isEmpty = function (crop) {
+            return !crop.label && !crop.alias && !crop.width && !crop.height;
+        };
+
         $scope.useForAlias = function (crop) {
             if (crop.alias == null || crop.alias === "") {
                 crop.alias = (crop.label || "").toCamelCase();
             }
         };
-        $scope.validate = function(crop) {
+
+        $scope.validate = function (crop) {
             $scope.validateWidth(crop);
             $scope.validateHeight(crop);
             $scope.validateAlias(crop);
-        }
+        };
+
         $scope.validateWidth = function (crop) {
             crop.hasWidthError = !(Utilities.isNumber(crop.width) && crop.width > 0);
         };
+
         $scope.validateHeight = function (crop) {
             crop.hasHeightError = !(Utilities.isNumber(crop.height) && crop.height > 0);
         };
+
         $scope.validateAlias = function (crop, $event) {
             var exists = $scope.model.value.find( x => crop !== x && crop.alias === x.alias);
             if (exists !== undefined || crop.alias === "") {
@@ -67,7 +77,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
                 // everything was good:
                 crop.hasAliasError = false;
             }
-
         };
 
         $scope.confirmChanges = function (crop, event) {
@@ -76,6 +85,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
                 event.preventDefault();
             }
         };
+
         $scope.focusNextField = function (event) {
             if (event.keyCode == 13) {
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.html
index 46b9ddb15f..de7e7b1767 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.html
@@ -20,7 +20,7 @@
                 </div>
             </div>
         </div>
-        <div ui-sortable="sortableOptions" class="umb-table-body" ng-model="model.value">
+        <div class="umb-table-body" ui-sortable="sortableOptions" ng-model="model.value">
 
             <div class="umb-table-row" ng-repeat="crop in model.value">
 
@@ -33,7 +33,6 @@
                     <button type="button" class="btn-reset umb-outline umb-outline--surrounding" ng-click="remove(crop, $event)"><localize key="general_remove">Remove</localize></button>
                 </div>
 
-
                 <div ng-if="crop.editMode === true" class="umb-table-cell not-fixed">
                     <input type="text"
                         ng-model="crop.label"
@@ -83,6 +82,7 @@
                 </div>
                 <div ng-if="crop.editMode === true" class="umb-table-cell">
                     <button type="button" class="btn-reset umb-outline umb-outline--surrounding" ng-click="setChanges(crop, $event)"><localize key="general_submit">Submit</localize></button>
+                    <button type="button" class="btn-reset umb-outline umb-outline--surrounding" ng-click="remove(crop, $event)" ng-if="isEmpty(crop)"><localize key="general_cancel">Cancel</localize></button>
                 </div>
 
             </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
index 675381d46e..96f3126288 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
@@ -40,8 +40,13 @@
 
         vm.loading = true;
 
+        vm.activeMediaEntry = null;
         vm.supportCopy = clipboardService.isSupported();
 
+        vm.addMediaAt = addMediaAt;
+        vm.editMedia = editMedia;
+        vm.removeMedia = removeMedia;
+        vm.copyMedia = copyMedia;
 
         vm.labels = {};
 
@@ -121,7 +126,6 @@
             }
         }
 
-        vm.addMediaAt = addMediaAt;
         function addMediaAt(createIndex, $event) {
             var mediaPicker = {
                 startNodeId: vm.model.config.startNodeId,
@@ -164,7 +168,7 @@
                 }
             }
 
-            if(vm.model.config.filter) {
+            if (vm.model.config.filter) {
                 mediaPicker.filter = vm.model.config.filter;
             }
 
@@ -182,6 +186,7 @@
 
         // To be used by infinite editor. (defined here cause we need configuration from property editor)
         function changeMediaFor(mediaEntry, onSuccess) {
+
             var mediaPicker = {
                 startNodeId: vm.model.config.startNodeId,
                 startNodeIsVirtual: vm.model.config.startNodeIsVirtual,
@@ -199,16 +204,16 @@
                     mediaEntry.focalPoint = null;
                     updateMediaEntryData(mediaEntry);
 
-                    if(onSuccess) {
+                    if (onSuccess) {
                         onSuccess();
                     }
                 },
                 close: function () {
                     editorService.close();
                 }
-            }
+            };
 
-            if(vm.model.config.filter) {
+            if (vm.model.config.filter) {
                 mediaPicker.filter = vm.model.config.filter;
             }
 
@@ -238,26 +243,23 @@
                 }
             });
             mediaEntry.crops = newCrops;
-
         }
 
-        vm.removeMedia = removeMedia;
         function removeMedia(media) {
             var index = vm.model.value.indexOf(media);
-            if(index !== -1) {
+            if (index !== -1) {
                 vm.model.value.splice(index, 1);
             }
         }
+
         function deleteAllMedias() {
             vm.model.value = [];
         }
 
-        vm.activeMediaEntry = null;
         function setActiveMedia(mediaEntryOrNull) {
             vm.activeMediaEntry = mediaEntryOrNull;
         }
-
-        vm.editMedia = editMedia;
+        
         function editMedia(mediaEntry, options, $event) {
 
             if($event)
@@ -304,13 +306,13 @@
             editorService.open(mediaEditorModel);
         }
 
-        var getDocumentNameAndIcon = function() {
+        var getDocumentNameAndIcon = function () {
             // get node name
             var contentNodeName = "?";
             var contentNodeIcon = null;
-            if(vm.umbVariantContent) {
+            if (vm.umbVariantContent) {
                 contentNodeName = vm.umbVariantContent.editor.content.name;
-                if(vm.umbVariantContentEditors) {
+                if (vm.umbVariantContentEditors) {
                     contentNodeIcon = vm.umbVariantContentEditors.content.icon.split(" ")[0];
                 } else if (vm.umbElementEditorContent) {
                     contentNodeIcon = vm.umbElementEditorContent.model.documentType.icon.split(" ")[0];
@@ -324,9 +326,9 @@
                 name: contentNodeName,
                 icon: contentNodeIcon
             }
-        }
+        };
 
-        var requestCopyAllMedias = function() {
+        var requestCopyAllMedias = function () {
             var mediaKeys = vm.model.value.map(x => x.mediaKey)
             entityResource.getByIds(mediaKeys, "Media").then(function (entities) {
 
@@ -338,18 +340,18 @@
 
                 var documentInfo = getDocumentNameAndIcon();
 
-                localizationService.localize("clipboard_labelForArrayOfItemsFrom", [vm.model.label, documentInfo.name]).then(function(localizedLabel) {
+                localizationService.localize("clipboard_labelForArrayOfItemsFrom", [vm.model.label, documentInfo.name]).then(function (localizedLabel) {
                     clipboardService.copyArray(clipboardService.TYPES.MEDIA, aliases, vm.model.value, localizedLabel, documentInfo.icon || "icon-thumbnail-list", vm.model.id);
                 });
             });
-        }
+        };
 
-        vm.copyMedia = copyMedia;
         function copyMedia(mediaEntry) {
             entityResource.getById(mediaEntry.mediaKey, "Media").then(function (mediaEntity) {
                 clipboardService.copy(clipboardService.TYPES.MEDIA, mediaEntity.metaData.ContentTypeAlias, mediaEntry, mediaEntity.name, mediaEntity.icon, mediaEntry.key);
             });
         }
+
         function requestPasteFromClipboard(createIndex, pasteEntry, pasteType) {
 
             if (pasteEntry === undefined) {
@@ -362,9 +364,7 @@
             updateMediaEntryData(pasteEntry);
             vm.model.value.splice(createIndex, 0, pasteEntry);
 
-
             return true;
-
         }
 
         function requestRemoveAllMedia() {
@@ -383,7 +383,6 @@
             });
         }
 
-
         vm.sortableOptions = {
             cursor: "grabbing",
             handle: "umb-media-card",
@@ -397,7 +396,6 @@
             }
         };
 
-
         function onAmountOfMediaChanged() {
 
             // enable/disable property actions