diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
index a022657e7c..288a63f534 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
@@ -17,6 +17,7 @@ angular.module("umbraco")
             vm.changeSearch = changeSearch;
             vm.submitFolder = submitFolder;
             vm.enterSubmitFolder = enterSubmitFolder;
+            vm.focalPointChanged = focalPointChanged;
             vm.changePagination = changePagination;
 
             vm.clickHandler = clickHandler;
@@ -241,7 +242,7 @@ angular.module("umbraco")
 
                 return getChildren(folder.id);
             }
-            
+
             function toggleListView() {
                 vm.showMediaList = !vm.showMediaList;
             }
@@ -370,7 +371,7 @@ angular.module("umbraco")
             }
 
             function openDetailsDialog() {
-                
+
                 const dialog = {
                     view: "views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html",
                     size: "small",
@@ -378,7 +379,7 @@ angular.module("umbraco")
                     target: $scope.target,
                     disableFocalPoint: $scope.disableFocalPoint,
                     submit: function (model) {
-                        
+
                         $scope.model.selection.push($scope.target);
                         $scope.model.submit($scope.model);
 
@@ -546,6 +547,19 @@ angular.module("umbraco")
                 }
             }
 
+            /**
+             * Called when the umbImageGravity component updates the focal point value
+             * @param {any} left
+             * @param {any} top
+             */
+            function focalPointChanged(left, top) {
+                // update the model focalpoint value
+                $scope.target.focalPoint = {
+                    left: left,
+                    top: top
+                };
+            }
+
             function submit() {
                 if ($scope.model && $scope.model.submit) {
                     $scope.model.submit($scope.model);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.controller.js
index 851a209ba9..1c7b2a7520 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.controller.js
@@ -8,6 +8,14 @@
             vm.close = close;
             vm.hasCrops = cropSet() === true;
 
+            vm.disableFocalPoint = false;
+            if(typeof $scope.model.disableFocalPoint === "boolean") {
+                vm.disableFocalPoint = $scope.model.disableFocalPoint
+            }
+            else {
+                vm.disableFocalPoint = ($scope.model.disableFocalPoint !== undefined && $scope.model.disableFocalPoint !== "0") ? true : false;
+            }
+
             if (!$scope.model.target.coordinates && !$scope.model.target.focalPoint) {
                 $scope.model.target.focalPoint = { left: .5, top: .5 };
             }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html
index 3f75e25a05..da6e3f439c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html
@@ -25,7 +25,7 @@
             </div>
 
             <div class="umb-control-group" ng-if="model.target">
-                <div ng-if="vm.hasCrops === false">
+                <div ng-if="vm.hasCrops === false && vm.disableFocalPoint">
                     <h5>
                         <localize key="general_preview">Preview</localize>
                     </h5>
@@ -33,6 +33,19 @@
                     <img ng-src="{{model.target.thumbnail}}" alt="{{model.target.name}}" />
                 </div>
 
+                <div ng-if="vm.hasCrops === false && vm.disableFocalPoint == false">
+                    <h5>
+                        <localize key="@general_focalPoint">Focal point</localize>
+                    </h5>
+
+                    <div ng-if="model.target.image">
+                        <umb-image-gravity src="model.target.image"
+                                           center="model.target.focalPoint"
+                                           on-value-changed="vm.focalPointChanged(left, top)">
+                        </umb-image-gravity>
+                    </div>
+                </div>
+
                 <div ng-if="vm.hasCrops">
                     <h5>
                         <localize key="@general_cropSection">Crop section</localize>