diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
index 2626fc7f33..01a127a613 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -100,7 +100,8 @@
 
                var flexStyle = {
                   "flex": flex + " 1 " + imageMinWidth + "px",
-                  "max-width": mediaItem.width + "px"
+                  "max-width": mediaItem.width + "px",
+                  "min-width": "125px"
                };
 
                mediaItem.flexStyle = flexStyle;
@@ -109,16 +110,16 @@
 
          }
 
-         scope.selectItem = function(item, $event, $index) {
-            if(scope.onSelect) {
-               scope.onSelect(item, $event, $index);
-               $event.stopPropagation();
+         scope.clickItem = function(item, $event, $index) {
+            if(scope.onClick) {
+               scope.onClick(item, $event, $index);
             }
          };
 
-         scope.clickItem = function(item) {
-            if(scope.onClick) {
-               scope.onClick(item);
+         scope.clickItemName = function(item, $event, $index) {
+            if(scope.onClickName) {
+                scope.onClickName(item, $event, $index);
+                $event.stopPropagation();
             }
          };
 
@@ -147,8 +148,8 @@
          scope: {
             items: '=',
             onDetailsHover: "=",
-            onSelect: '=',
             onClick: '=',
+            onClickName: "=",
             filterBy: "="
          },
          link: link
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
index 01c1cf5206..d353b7cdca 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
@@ -9,10 +9,25 @@
 }
 
 .umb-media-grid__item {
-   margin: 2px;
+   margin: 10px;
    position: relative;
-   background: @grayLighter;
    overflow: hidden;
+   cursor: pointer;
+   display: flex;
+   align-content: center;
+   align-items: center;
+   align-self: stretch;
+   box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
+   justify-content: center;
+   transition: box-shadow 100ms;
+}
+
+.umb-media-grid__item.-file {
+    background-color: @grayLighter;
+}
+
+.umb-media-grid__item.-selected {
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
 }
 
 .umb-media-grid__item:hover {
@@ -20,20 +35,32 @@
 }
 
 .umb-media-grid__item-image {
-   width: 100%;
    max-width: 100%;
    height: auto;
+   position: relative;
 }
 
-.umb-media-grid__item-image.-faded {
-   opacity: 0.5;
-   transition: opacity 100ms ease-in;
+.umb-media-grid__item-image-placeholder {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    position: relative;
+}
+
+.umb-media-grid__image-background {
+    content: "";
+    background: url("../img/checkered-background.png");
+    background-repeat: repeat;
+    opacity: 0.5;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
 }
 
 .umb-media-grid__item-overlay {
    display: flex;
-   justify-content: center;
-   align-items: center;
    opacity: 0;
    position: absolute;
    right: 0;
@@ -42,19 +69,36 @@
    z-index: 100;
    padding: 5px 10px;
    box-sizing: border-box;
-   font-size: 13px;
+   font-size: 11px;
    overflow: hidden;
    color: white;
    white-space: nowrap;
-   background: rgba(0, 0, 0, 0.4);
-   background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75));
+   background: @blue;
+   transition: opacity 150ms;
+}
+
+.umb-media-grid__item.-file .umb-media-grid__item-overlay {
+    opacity: 1;
+    color: @gray;
+    background: @grayLighter;
+}
+
+.umb-media-grid__item.-file:hover .umb-media-grid__item-overlay,
+.umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay {
+    color: @white;
+    background: @blue;
+}
+
+.umb-media-grid__info {
+    margin-right: 5px;
+}
+
+.umb-media-grid__item-overlay.-locked {
+    opacity: 1;
 }
 
 .umb-media-grid__item:hover .umb-media-grid__item-overlay {
    opacity: 1;
-   animation: fadeIn;
-   animation-duration: 0.2s;
-   animation-timing-function: ease-in-out;
 }
 
 .umb-media-grid__item-name {
@@ -63,76 +107,30 @@
    text-overflow: ellipsis;
 }
 
-.umb-media-grid__item-non-image-name {
-    position: absolute;
-    top: 20px;
-    font-size: 12px;
-    text-align: center;
-    width: 100%;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-
 .umb-media-grid__item-icon {
    color: @gray;
    position: absolute;
-   top: 50%;
+   top: 45%;
    left: 50%;
    font-size: 40px;
    transform: translate(-50%,-50%);
 }
 
-.umb-media-grid__actions {
-   position: absolute;
-   z-index: 2;
-   width: 100%;
-   top: 0;
-   padding: 10px;
-   box-sizing: border-box;
-   display: flex;
-   align-items: center;
-   justify-content: flex-end;
-}
-
-.umb-media-grid__action {
-   opacity: 0;
-   border: 1px solid #ffffff;
-   width: 25px;
-   height: 25px;
-   background: rgba(0, 0, 0, 0.4);
-   border-radius: 50px;
-   box-sizing: border-box;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   color: #ffffff;
-   margin-left: 7px;
-   cursor: pointer;
-}
-
-.umb-media-grid__action.-not-clickable {
-   cursor: default;
-}
-
-.umb-media-grid__action:first-child {
-   margin-left: 0;
-}
-
-.umb-media-grid__action:hover {
-   background: @blue;
-   transition: background 0.1s;
-}
-
-.umb-media-grid__action.-selected {
-   opacity: 1;
-   background: @blue;
-}
-
-.umb-media-grid__item:hover .umb-media-grid__action:not(.-selected),
-.umb-media-grid__folder:hover .umb-media-grid__action:not(.-selected) {
-   opacity: 1;
-   animation: fadeIn;
-   animation-duration: 0.2s;
-   animation-timing-function: ease-in-out;
+.umb-media-grid__checkmark {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    right: 10px;
+    width: 25px;
+    height: 25px;
+    border: 1px solid #ffffff;
+    background: @blue;
+    border-radius: 50px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    margin-left: 7px;
+    transition: background 100ms;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
index 48ac33125c..77114b13ca 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
@@ -71,6 +71,10 @@ angular.module("umbraco")
 
             $scope.gotoFolder = function(folder) {
 
+                if(!$scope.multiPicker) {
+                    deselectAllImages($scope.model.selectedImages);
+                }
+
                 if(!folder){
                     folder = {id: -1, name: "Media", icon: "icon-folder"};
                 }
@@ -125,7 +129,10 @@ angular.module("umbraco")
             $scope.clickHandler = function(image, event, index) {
 
                 if (image.isFolder) {
-                    $scope.gotoFolder(image);
+
+                    eventsService.emit("dialogs.mediaPicker.select", image);
+                    selectImage(image);
+
                 } else {
 
                     eventsService.emit("dialogs.mediaPicker.select", image);
@@ -142,39 +149,33 @@ angular.module("umbraco")
 
             };
 
+            $scope.clickItemName = function(item) {
+                if(item.isFolder) {
+                    $scope.gotoFolder(item);
+                }
+            };
+
             function selectImage(image) {
 
-                if ($scope.model.selectedImages.length > 0) {
+                if(image.selected) {
 
-                    var selectImage = false;
+                    for(var i = 0; $scope.model.selectedImages.length > i; i++) {
 
-                    for (var i = 0; i < $scope.model.selectedImages.length; i++) {
-
-                        var selectedImage = $scope.model.selectedImages[i];
-
-                        if (image.key === selectedImage.key) {
+                        var imageInSelection = $scope.model.selectedImages[i];
+                        if(image.key === imageInSelection.key) {
                             image.selected = false;
                             $scope.model.selectedImages.splice(i, 1);
-                            selectImage = false;
-                        } else {
-                            selectImage = true;
                         }
-
-                    }
-
-                    if (selectImage) {
-
-                        if(!$scope.multiPicker) {
-                            deselectAllImages($scope.model.selectedImages);
-                        }
-
-                        image.selected = true;
-                        $scope.model.selectedImages.push(image);
                     }
 
                 } else {
-                    $scope.model.selectedImages.push(image);
+
+                    if(!$scope.multiPicker) {
+                        deselectAllImages($scope.model.selectedImages);
+                    }
+
                     image.selected = true;
+                    $scope.model.selectedImages.push(image);
                 }
 
             }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
index 68752df784..b4d65167e7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
@@ -70,7 +70,8 @@
       <umb-media-grid
          items="images"
          filter-by="searchTerm"
-         on-click="clickHandler">
+         on-click="clickHandler"
+         on-click-name="clickItemName">
       </umb-media-grid>
 
    </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index bdcf0da482..f5c53a889e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -1,24 +1,20 @@
 <div class="umb-media-grid">
 
-   <a href="" ng-click="clickItem(item)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" class="umb-media-grid__item">
+   <div class="umb-media-grid__item" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle"  ng-class="{'-selected': item.selected, '-file': !item.thumbnail}">
 
-      <div class="umb-media-grid__actions">
-         <i ng-if="onDetailsHover" class="icon-info umb-media-grid__action -not-clickable" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
-         <i ng-if="onSelect" class="icon-check umb-media-grid__action" ng-click="selectItem(item, $event, $index)" ng-class="{'-selected': item.selected}" prevent-default></i>
-         <i ng-show="!onSelect && item.selected" class="icon-check umb-media-grid__action -selected"></i>
-      </div>
+      <i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>
 
-      <div ng-if="item.thumbnail" class="umb-media-grid__item-overlay">
+      <div class="umb-media-grid__item-overlay" ng-class="{'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)">
+          <i ng-if="onDetailsHover" class="icon-info umb-media-grid__info" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
          <div class="umb-media-grid__item-name">{{item.name}}</div>
       </div>
 
-      <div class="umb-media-grid__item-non-image-name" ng-if="!item.thumbnail">{{ item.name }}</div>
-
-      <img class="umb-media-grid__item-image" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" ng-class="{'-faded': item.selected}" />
-      <img class="umb-media-grid__item-image" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" />
+      <div class="umb-media-grid__image-background" ng-if="item.thumbnail"></div>
+      <img class="umb-media-grid__item-image" ng-if="item.thumbnail" ng-src="{{item.thumbnail}}" alt="{{item.name}}" />
+      <img class="umb-media-grid__item-image-placeholder" ng-if="!item.thumbnail" src="assets/img/transparent.png" alt="{{item.name}}" />
 
       <i class="umb-media-grid__item-icon {{ item.icon }}" ng-if="!item.thumbnail"></i>
 
-   </a>
+   </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
index 9e87d95359..7ece9230c4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
@@ -38,15 +38,15 @@
       <umb-folder-grid
          ng-if="folders.length > 0"
          folders="folders"
-         on-click-name="vm.openFolder"
-         on-click="vm.selectFolder">
+         on-select="vm.selectFolder"
+         on-click="vm.clickFolder">
       </umb-folder-grid>
 
       <umb-media-grid
          items="vm.itemsWithoutFolders"
          on-details-hover="vm.hoverMediaItemDetails"
-         on-select="vm.selectItem"
-         on-click="vm.clickItem">
+         on-click="vm.clickItem"
+         on-click-name="vm.clickItemName">
       </umb-media-grid>
 
       <umb-tooltip
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
index 71a7caa345..e2c864cc87 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
@@ -26,9 +26,10 @@
       vm.onUploadComplete = onUploadComplete;
 
       vm.hoverMediaItemDetails = hoverMediaItemDetails;
-      vm.selectItem = selectItem;
+      vm.clickFolder = clickFolder;
       vm.clickItem = clickItem;
       vm.selectFolder = selectFolder;
+      vm.clickItemName = clickItemName;
       vm.openFolder = openFolder;
 
       function activate() {
@@ -87,12 +88,16 @@
 
       }
 
-      function selectItem(selectedItem, $event, index) {
-         listViewHelper.selectHandler(selectedItem, index, vm.itemsWithoutFolders, $scope.selection, $event);
+      function clickFolder(folder) {
+          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + folder.id);
       }
 
-      function clickItem(item) {
-         $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
+      function clickItem(item, $event, $index) {
+          listViewHelper.selectHandler(item, $index, vm.itemsWithoutFolders, $scope.selection, $event);
+      }
+
+      function clickItemName(item, $event, $index) {
+          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
       }
 
       function selectFolder(folder, $event, $index) {
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 0859e70cdd..b77ad15a23 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
@@ -59,35 +59,31 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
 
        $scope.add = function() {
 
-          $scope.mediaPickerOverlay = {};
-          $scope.mediaPickerOverlay.startNodeId = $scope.model.config.startNodeId;
-          $scope.mediaPickerOverlay.multiPicker = multiPicker;
-          $scope.mediaPickerOverlay.view = "mediaPicker";
-          $scope.mediaPickerOverlay.title = "Select media";
-          $scope.mediaPickerOverlay.show = true;
+           $scope.mediaPickerOverlay = {
+               view: "mediapicker",
+               title: "Select media",
+               startNodeId: $scope.model.config.startNodeId,
+               multiPicker: multiPicker,
+               show: true,
+               submit: function(model) {
 
-          $scope.mediaPickerOverlay.submit = function(model) {
+                   _.each(model.selectedImages, function(media, i) {
 
-             _.each(model.selectedImages, function(media, i) {
+                       if (!media.thumbnail) {
+                           media.thumbnail = mediaHelper.resolveFileFromEntity(media, true);
+                       }
 
-                 if (!media.thumbnail) {
-                     media.thumbnail = mediaHelper.resolveFileFromEntity(media, true);
-                 }
+                       $scope.images.push(media);
+                       $scope.ids.push(media.id);
+                   });
 
-                 $scope.images.push(media);
-                 $scope.ids.push(media.id);
-             });
+                   $scope.sync();
 
-             $scope.sync();
+                   $scope.mediaPickerOverlay.show = false;
+                   $scope.mediaPickerOverlay = null;
 
-             $scope.mediaPickerOverlay.show = false;
-             $scope.mediaPickerOverlay = null;
-          };
-
-          $scope.mediaPickerOverlay.close = function(oldModel) {
-             $scope.mediaPickerOverlay.show = false;
-             $scope.mediaPickerOverlay = null;
-          };
+               }
+           };
 
        };