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 1b011d2e19..1c4bf4d583 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
@@ -312,14 +312,7 @@ Use this directive to generate a thumbnail grid of media items.
                     scope.onDetailsHover(item, $event, hover);
                 }
             };
-
-            scope.clickEdit = function(item, $event) {
-                if (scope.onClickEdit) {
-                    scope.onClickEdit({"item": item})
-                    $event.stopPropagation();
-                }
-            };
-
+            
             var unbindItemsWatcher = scope.$watch('items', function(newValue, oldValue) {
                 if (angular.isArray(newValue)) {
                     activate();
@@ -341,8 +334,8 @@ Use this directive to generate a thumbnail grid of media items.
                 onDetailsHover: "=",
                 onClick: '=',
                 onClickName: "=",
-                onClickEdit: "&?",
-                allowOnClickEdit: "@?",
+                allowOpenFolder: "=",
+                allowOpenFile: "=",
                 filterBy: "=",
                 itemMaxWidth: "@",
                 itemMaxHeight: "@",
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
index 0afcfdd1f9..de678f9798 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
@@ -4,6 +4,7 @@
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
+   user-select: none;
 }
 
 .umb-breadcrumbs__ancestor {
@@ -12,10 +13,23 @@
 }
 
 .umb-breadcrumbs__action {
+    position: relative;
     background: transparent;
     border: 0 none;
-    padding: 0;
-    margin-top: -4px;
+    border-radius: 3px;
+    padding: 0 4px;
+    color: @ui-option-type;
+
+    &.--current {
+        font-weight: bold;
+        pointer-events: none;
+    }
+
+    &:hover {
+        color: @ui-option-type-hover;
+        background-color: @white;
+    }
+
 }
 
 .umb-breadcrumbs__ancestor-link,
@@ -26,6 +40,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding: 0 4px;
 }
 
 .umb-breadcrumbs__ancestor-link {
@@ -39,13 +54,13 @@
 .umb-breadcrumbs__separator {
    position: relative;
    top: 1px;
-   margin-left: 5px;
-   margin-right: 5px;
+   margin: 0 1px;
+   margin-top: -3px;
    color: @gray-7;
 }
 
 input.umb-breadcrumbs__add-ancestor {
-    height: 25px;
-    margin: 0 0 0 3px;
+    height: 24px;
+    margin: -2px 0 -2px 3px;
     width: 100px;
 }
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 4feadc272c..5d6b7ad962 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
@@ -40,25 +40,41 @@
     }
 }
 
-.umb-media-grid__item.-selectable {
+.umb-media-grid__item.-selectable, 
+.umb-media-grid__item.-folder {// If folders isnt selectable, they opens if clicked, therefor...
     cursor: pointer;
-
-    .tabbing-active &:focus {
-        outline: 2px solid @inputBorderTabFocus;
-    }
 }
 
 .umb-media-grid__item.-file {
     background-color: @white;
 }
 
+.umb-media-grid__item.-folder {
+
+    &.-selectable {
+        .media-grid-item-edit:hover .umb-media-grid__item-name,
+        .media-grid-item-edit:focus .umb-media-grid__item-name {
+            text-decoration: underline;
+        }
+    }
+
+    &.-unselectable {
+        &:hover, &:focus {
+            .umb-media-grid__item-name {
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+
 .umb-media-grid__item.-selected {
     color:@ui-selected-type;
     .umb-media-grid__item-overlay {
         color: @ui-selected-type;
     }
 }
-.umb-media-grid__item.-selected,
+.umb-media-grid__item.-selected, 
 .umb-media-grid__item.-selectable:hover {
     &::before {
         content: "";
@@ -139,10 +155,10 @@
    background: fade(@white, 92%);
    transition: opacity 150ms;
 
-   &:hover {
+   &.-can-open:hover {
        text-decoration: underline;
    }
-
+   
    .tabbing-active &:focus {
        opacity: 1;
    }
@@ -190,7 +206,7 @@
     align-items: center;
     color: @black;
     transition: opacity 150ms;
-
+    
     &:hover {
         color: @ui-action-discreet-type-hover;
     }
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 d3961cbba0..112f94572d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -249,7 +249,7 @@
 
     transition: all 150ms ease-in-out;
 
-    &:focus,
+    &:active,
     &:hover {
         color: @ui-action-discreet-type-hover;
         border-color: @ui-action-discreet-type-hover;
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 bb7ce6f727..01f61a16ae 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
@@ -1,7 +1,7 @@
 //used for the media picker dialog
 angular.module("umbraco")
     .controller("Umbraco.Editors.MediaPickerController",
-        function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService) {
+        function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService) {
 
             var vm = this;
             
@@ -22,7 +22,6 @@ angular.module("umbraco")
 
             vm.clickHandler = clickHandler;
             vm.clickItemName = clickItemName;
-            vm.editMediaItem = editMediaItem;
             vm.gotoFolder = gotoFolder;
 
             var dialogOptions = $scope.model;
@@ -37,8 +36,7 @@ angular.module("umbraco")
             $scope.cropSize = dialogOptions.cropSize;
             $scope.lastOpenedNode = localStorageService.get("umbLastOpenedMediaNodeId");
             $scope.lockedFolder = true;
-            $scope.allowMediaEdit = dialogOptions.allowMediaEdit ? dialogOptions.allowMediaEdit : false;
-            
+
             var userStartNodes = [];
 
             var umbracoSettings = Umbraco.Sys.ServerVariables.umbracoSettings;
@@ -132,7 +130,7 @@ angular.module("umbraco")
                     
                     // ID of a UDI or legacy int ID still could be null/undefinied here
                     // As user may dragged in an image that has not been saved to media section yet
-                    if(id){
+                    if (id) {
                         entityResource.getById(id, "Media")
                         .then(function (node) {
                             $scope.target = node;
@@ -144,8 +142,7 @@ angular.module("umbraco")
                                 openDetailsDialog();
                             }
                         }, gotoStartNode);
-                    }
-                    else {
+                    } else {
                         // No ID set - then this is going to be a tmpimg that has not been uploaded
                         // User editing this will want to be changing the ALT text
                         openDetailsDialog();
@@ -254,11 +251,14 @@ angular.module("umbraco")
                 }
             }
 
-            function clickItemName(item) {
+            function clickItemName(item, event, index) {
                 if (item.isFolder) {
                     gotoFolder(item);
                 }
-            }
+                else {
+                    $scope.clickHandler(item, event, index);
+                }
+            };
 
             function selectMedia(media) {
                 if (!media.selectable) {
@@ -510,30 +510,6 @@ angular.module("umbraco")
                 }
             }
 
-            function editMediaItem(item) {
-                var mediaEditor = {
-                    id: item.id,
-                    submit: function (model) {
-                        editorService.close()
-                        // update the media picker item in the picker so it matched the saved media item
-                        // the media picker is using media entities so we get the 
-                        // entity so we easily can format it for use in the media grid
-                        if (model && model.mediaNode) {
-                            entityResource.getById(model.mediaNode.id, "media")
-                                .then(function (mediaEntity) {
-                                    angular.extend(item, mediaEntity);
-                                    setMediaMetaData(item);
-                                    setUpdatedMediaNodes(item);
-                                });
-                        }
-                    },
-                    close: function (model) {
-                        setUpdatedMediaNodes(item);
-                        editorService.close();
-                    }
-                };
-                editorService.mediaEditor(mediaEditor);
-            };
 
             /**
              * Called when the umbImageGravity component updates the focal point value
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html
index 373dfbcba7..917010dbb6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html
@@ -56,19 +56,19 @@
                     <div class="row umb-control-group" ng-show="!vm.searchOptions.filter">
                         <ul class="umb-breadcrumbs">
                             <li ng-hide="startNodeId != -1" class="umb-breadcrumbs__ancestor">
-                            <button type="button" class="umb-breadcrumbs__action" ng-click="vm.gotoFolder()">
+                            <button type="button" class="umb-breadcrumbs__action umb-outline umb-outline--surronding" ng-click="vm.gotoFolder()" ng-class="{'--current':path.length === 0}">
                                 <localize key="treeHeaders_media">Media</localize>
                             </button>
                             <span class="umb-breadcrumbs__separator" aria-hidden="true">&#47;</span>
                             </li>
 
                             <li ng-repeat="item in path" class="umb-breadcrumbs__ancestor">
-                            <button type="button" class="umb-breadcrumbs__action" ng-click="vm.gotoFolder(item)">{{item.name}}</button>
+                            <button type="button" class="umb-breadcrumbs__action umb-outline umb-outline--surronding" ng-click="vm.gotoFolder(item)" ng-class="{'--current':$last}">{{item.name}}</button>
                             <span class="umb-breadcrumbs__separator" aria-hidden="true">&#47;</span>
                             </li>
 
                             <li class="umb-breadcrumbs__ancestor" ng-show="!lockedFolder">
-                            <button type="button" class="umb-breadcrumbs__action" ng-hide="model.showFolderInput" ng-click="model.showFolderInput = true">
+                            <button type="button" class="umb-breadcrumbs__action umb-outline umb-outline--surronding" ng-hide="model.showFolderInput" ng-click="model.showFolderInput = true">
                                 <i class="icon icon-add small" aria-hidden="true"></i>
                                 <span class="sr-only">
                                     <localize key="visuallyHiddenTexts_createNewFolder">Create new folder</localize>
@@ -105,8 +105,6 @@
                             items="images"
                             on-click="vm.clickHandler"
                             on-click-name="vm.clickItemName"
-                            on-click-edit="vm.editMediaItem(item)"
-                            allow-on-click-edit="{{allowMediaEdit}}"
                             item-max-width="150"
                             item-max-height="150"
                             item-min-width="100"
@@ -115,7 +113,8 @@
                             only-images={{onlyImages}}
                             only-folders={{onlyFolders}}
                             include-sub-folders={{showChilds}}
-                            current-folder-id="{{currentFolder.id}}">
+                            current-folder-id="{{currentFolder.id}}"
+                            allow-open-folder="!disableFolderSelect">
                     </umb-media-grid>
 
 
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 0aa953635e..d347fecb2d 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,13 +1,23 @@
 <div data-element="media-grid" class="umb-media-grid">
-    <div data-element="media-grid-item-{{$index}}" class="umb-media-grid__item" title="{{item.name}}" 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, '-svg': item.extension == 'svg', '-selectable': item.selectable, '-unselectable': !item.selectable}">
+    <div data-element="media-grid-item-{{$index}}"
+        class="umb-media-grid__item umb-outline umb-outline--surrounding"
+        title="{{item.name}}"
+        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, '-folder': item.isFolder, '-svg': item.extension == 'svg', '-selectable': item.selectable, '-unselectable': !item.selectable}"
+    >
         <div>
             <!--<i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>-->
-            <a ng-if="allowOnClickEdit === 'true'" ng-click="clickEdit(item, $event)" ng-href="" class="icon-edit umb-media-grid__edit"></a>
-
-            <button data-element="media-grid-item-edit" class="umb-media-grid__item-overlay btn-reset" ng-class="{'-locked': item.selected || !item.file || !item.thumbnail}" ng-click="clickItemName(item, $event, $index)" type="button">
+            <div data-element="media-grid-item-edit"
+                class="umb-media-grid__item-overlay umb-outline"
+                ng-class="{'-locked': item.selected || !item.file || !item.thumbnail, '-can-open': (item.isFolder ? allowOpenFolder : allowOpenFile)}"
+                ng-click="clickItemName(item, $event, $index)"
+                tabindex="{{item.isFolder && item.selectable ? '0' : '-1'}}"
+            >
                 <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>
-            </button>
+            </div>
 
             <!-- Check backgrund -->
             <div class="umb-media-grid__image-background" ng-if="item.thumbnail || item.extension === 'svg'"></div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
index 87ccf08d62..5d93c59f5e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
@@ -27,7 +27,7 @@
             </li>
 
             <li style="border: none;" class="add-wrapper unsortable" ng-hide="model.value">
-                <button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square btn-reset" ng-click="add()" prevent-default>
+                <button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square btn-reset umb-outline umb-outline--surrounding" ng-click="add()" prevent-default>
                     <i class="icon icon-add large" aria-hidden="true"></i>
                 </button>
             </li>
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 6c7a9c7f06..07d5215793 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
@@ -52,7 +52,9 @@
         <umb-media-grid items="vm.itemsWithoutFolders"
                         on-details-hover="vm.hoverMediaItemDetails"
                         on-click="vm.selectItem"
-                        on-click-name="vm.goToItem">
+                        on-click-name="vm.goToItem"
+                        allow-open-folder="true"
+                        allow-open-file="true">
         </umb-media-grid>
 
         <umb-tooltip ng-if="vm.mediaDetailsTooltip.show"
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 c9d4caf312..8c6194d638 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
@@ -205,7 +205,7 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
                 multiPicker: multiPicker,
                 onlyImages: onlyImages,
                 disableFolderSelect: disableFolderSelect,
-                allowMediaEdit: true,
+
                 submit: function (model) {
 
                     editorService.close();
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 1f9bd4e3c0..b17906272d 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
@@ -45,7 +45,7 @@
                 </div>
             </li>
             <li style="border: none;" class="add-wrapper unsortable" ng-if="vm.showAdd() && allowAddMedia">
-                <button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link btn-reset" ng-click="vm.add()" ng-class="{'add-link-square': (mediaItems.length === 0 || isMultiPicker)}" prevent-default>
+                <button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link btn-reset umb-outline umb-outline--surrounding" ng-click="vm.add()" ng-class="{'add-link-square': (mediaItems.length === 0 || isMultiPicker)}" prevent-default>
                     <i class="icon icon-add large" aria-hidden="true"></i>
                 </button>
             </li>