diff -u b/core/modules/media/src/MediaSourceBase.php b/core/modules/media/src/MediaSourceBase.php
--- b/core/modules/media/src/MediaSourceBase.php
+++ b/core/modules/media/src/MediaSourceBase.php
@@ -138,7 +138,7 @@
    * {@inheritdoc}
    */
   public function getDefaultThumbnail() {
-    return $this->configFactory->get('media.settings')->get('icon_base_uri') . '/generic.png';
+    return $this->configFactory->get('media.settings')->get('icon_base_uri') . '/generic-file.png';
   }
 
   /**
diff -u b/core/modules/media_library/config/install/views.view.media_library.yml b/core/modules/media_library/config/install/views.view.media_library.yml
--- b/core/modules/media_library/config/install/views.view.media_library.yml
+++ b/core/modules/media_library/config/install/views.view.media_library.yml
@@ -41,7 +41,7 @@
       exposed_form:
         type: basic
         options:
-          submit_button: Apply
+          submit_button: 'Apply Filters'
           reset_button: false
           reset_button_label: Reset
           exposed_sorts_label: 'Sort by'
@@ -271,6 +271,50 @@
           entity_type: media
           entity_field: name
           plugin_id: string
+        bundle:
+          id: bundle
+          table: media_field_data
+          field: bundle
+          relationship: none
+          group_type: group
+          admin_label: ''
+          operator: in
+          value: {  }
+          group: 1
+          exposed: true
+          expose:
+            operator_id: bundle_op
+            label: 'Media type'
+            description: ''
+            use_operator: false
+            operator: bundle_op
+            identifier: type
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+              anonymous: '0'
+              administrator: '0'
+            reduce: false
+          is_grouped: false
+          group_info:
+            label: 'Media type'
+            description: null
+            identifier: bundle
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items:
+              1: {  }
+              2: {  }
+              3: {  }
+          entity_type: media
+          entity_field: bundle
+          plugin_id: bundle
       sorts:
         created:
           id: created
@@ -628,8 +672,23 @@
           plugin_id: rendered_entity
       defaults:
         fields: false
+        header: false
       display_description: ''
       path: admin/media_field_widget
+      header:
+        area:
+          id: area
+          table: views
+          field: area
+          relationship: none
+          group_type: group
+          admin_label: ''
+          empty: false
+          tokenize: false
+          content:
+            value: '<a href="/media/add" class="use-ajax button button-action button--primary button--small" data-dialog-type="modal" >Add New Media</a>'
+            format: full_html
+          plugin_id: text
     cache_metadata:
       max-age: 0
       contexts:
diff -u b/core/modules/media_library/css/media_library.css b/core/modules/media_library/css/media_library.css
--- b/core/modules/media_library/css/media_library.css
+++ b/core/modules/media_library/css/media_library.css
@@ -2,29 +2,54 @@
 * @file media_library.view.css
 */
 
+#views-form-media-library-page, *[id^='views-form-media-library-widget-'], .media-library-selection {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+}
+
+#edit-header, .view-content #edit-actions {
+  display: none;
+  flex-basis: 100%;
+}
+
+#drupal-modal .view-header {
+  margin: 1em 0;
+}
+
 .media-library-item {
-  display: inline-flex;
   justify-content: center;
-  flex-wrap: wrap;
   vertical-align: top;
   position: relative;
-  border: 5px solid #ebebeb;
-  outline: 10px solid transparent;
-  margin: 20px 20px 0 0;
-  width: 160px;
-  height: 160px;
-  overflow: hidden;
+  border: 2px solid #ebebeb;
+  outline: 6px solid transparent;
+  margin: 14px 14px 0 0;
+  width: 180px;
+  height: 230px;
   cursor: pointer;
-  background: #ebebeb;
+  background: #ffffff;
   transition: border-color .2s, outline-color .2s;
 }
 
-.media-library-item.media-library-item-in-widget {
+.media-library-item .field {
+  display: none;
+}
+
+.media-library-item .field--name-thumbnail {
+  display: block;
+}
+
+.media-library-item .field--name-thumbnail img {
+  width: 100%;
+  height: auto;
+}
+
+.media-library-item.media-library-item-in-widget, .media-library-item.is-hover.media-library-item-in-widget {
   cursor: move;
 }
 
 .media-library-item.checked {
-  outline-color: #cfddfd;
+  outline-color: #c7eaff;
 }
 
 .media-library-item::after {
@@ -35,42 +60,102 @@
   position: absolute;
   top: 0;
   right: 0;
-  background: url('../icons/checkbox.svg') no-repeat;
-  background-size: cover;
+  background: url('../../../misc/icons/787878/check.svg') #ffffff center no-repeat;
+  background-size: 16px 16px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
   margin: 5px 5px 0 0;
   opacity: 0;
-  transition: opacity .2s;
+  transition: opacity .2s, background 1s;
 }
 
-.media-library-item:hover {
-  border-color: #5792fb;
+.media-library-item.is-hover {
+  border-color: #40b6ff;
+  cursor: pointer;
 }
 
 .media-library-item-checkbox {
    display: none;
 }
 
-.media-library-item-attributes {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  bottom: 0;
-  padding: 5px;
-  user-select: none;
-  background: rgba(87, 146, 251, 0.5);
-  color: black;
-  opacity: 0;
-  transition: opacity .2s;
-}
-
 .media-library-item:hover .media-library-item-attributes,
 .media-library-item.checked::after,
 .media-library-item:hover .media-library-item-remove {
   opacity: 1;
 }
 
+.media-library-item-attributes {
+  width: 140px;
+  margin: 10px 30px 15px 10px;
+}
+
+.media-library-item-attributes > div {
+  width: 100%;
+}
+
+.media-library-item-toggle {
+  display: block;
+  width: 25px;
+  height: 25px;
+  content: "";
+  cursor: pointer;
+  position: absolute;
+  top: 184px;
+  right: 0;
+  background: url('../../../misc/icons/bebebe/chevron-disc-right.svg') transparent center no-repeat;
+  background-size: 20px;
+  margin: 5px 5px 0 0;
+  transition: all 0.25s ease;
+}
+
+.expanded .media-library-item-toggle {
+    transform: rotate(90deg);
+}
+
+.media-library-item.expanded {
+  height: auto;
+  min-height: 270px;
+}
+
+.media-library-item.expanded .media-library-item-created,
+.media-library-item.expanded .media-library-item-type {
+  font-size: 12px;
+  line-height: 1.25em;
+  display: inline-block;
+}
+
+.media-library-item .field--name-thumbnail {
+  background-color: #989898;
+  border-bottom: 2px solid #ebebeb;
+  height: 180px;
+  width: 180px;
+  overflow: hidden;
+}
+
+.media-library-item .field--name-thumbnail img {
+  height: auto;
+  min-height: 180px;
+  min-width: 180px;
+  width: auto;
+}
+
 .media-library-item-name {
-  font-size: 16px;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-bottom: 0.25em;
+  white-space: nowrap;
+}
+
+.expanded .media-library-item-name {
+  white-space: normal;
+}
+
+.media-library-item-created,
+.media-library-item-type {
+  font-size: 12px;
+  line-height: 1.25em;
+  display: none;
 }
 
 .media-library-item .media-library-item-remove {
@@ -81,33 +166,27 @@
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   margin: 5px;
   padding: 0;
-  background: url('../../../misc/icons/e32700/error.svg') no-repeat;
-  background-size: cover;
+  background: url('../../../misc/icons/787878/ex.svg') #ffffff center no-repeat;
+  background-size: 16px 16px;
+  border: 1px solid #ccc;
+  border-radius: 20px;
   color: transparent;
   text-shadow: none;
-  border: none;
   opacity: 0;
   transition: opacity .2s;
 }
 
 .media-library-item .media-library-item-remove:hover,
-.media-library-item .media-library-item-remove:focus{
-  background: url('../../../misc/icons/e32700/error.svg') no-repeat;
-  background-size: cover;
+.media-library-item .media-library-item-remove:focus,
+.media-library-item .media-library-item-remove.button:disabled {
+  background: url('../../../misc/icons/787878/ex.svg') #ffffff center no-repeat;
+  background-size: 16px 16px;
   color: transparent;
+  opacity: 1;
   text-shadow: none;
 }
 
 .media-library-open-button {
   margin-top: 10px;
 }
-
-.media-library-mask {
-  position: absolute;
-  background: transparent;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
reverted:
--- b/core/modules/media_library/icons/checkbox.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg fill="#91b6f9" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-</svg>
\ No newline at end of file
diff -u b/core/modules/media_library/js/media_library.view.js b/core/modules/media_library/js/media_library.view.js
--- b/core/modules/media_library/js/media_library.view.js
+++ b/core/modules/media_library/js/media_library.view.js
@@ -19,24 +19,65 @@
    */
   Drupal.behaviors.MediaLibraryCheckboxes = {
     attach: function (context) {
-      $('.media-library-item', context).once('media-library-checkbox').on('click', function (event) {
+      $('.media-library-item .field--name-thumbnail', context).once('media-library-checkbox').on('click', function (event) {
         // Links inside the rendered media item should not be click-able.
         event.preventDefault();
         // Click the hidden checkbox when the media item is clicked.
-        var $input = $(this).find('.media-library-item-checkbox input');
+        var $input = $(this).parents('.media-library-item').find('.media-library-item-checkbox input');
         $input.prop('checked', !$input.prop('checked'));
         if ($input.prop('checked')) {
-          $(this).addClass('checked');
+          $(this).parents('.media-library-item').addClass('checked');
         }
         else {
-          $(this).removeClass('checked');
+          $(this).parents('.media-library-item').removeClass('checked');
         }
+
+        if ($('.media-library-item.checked').length) {
+          $('#edit-header').show();
+          $('.view-content #edit-actions').show();
+        }
+        else {
+          $('#edit-header').hide();
+          $('.view-content #edit-actions').hide();
+        }
+
         $input.trigger('change');
       });
     }
   };
 
   /**
+   * Allows users to toggle metadata on media items.
+   */
+  Drupal.behaviors.MediaLibraryMetadataToggle = {
+    attach: function (context) {
+      // Add the toggle when javascript is available
+      $('.media-library-item-attributes', context).after('<span class="media-library-item-toggle"></span>');
+      $('.media-library-item-toggle').on('click', function () {
+        if ($(this).parents('.media-library-item').hasClass('expanded')) {
+          $(this).parents('.media-library-item').removeClass('expanded');
+        }
+        else {
+          $(this).parents('.media-library-item').addClass('expanded');
+        }
+      });
+    }
+  };
+
+  /**
+   * Adds hover effect to media items.
+   */
+  Drupal.behaviors.MediaLibraryHover = {
+    attach: function (context) {
+      $('.media-library-item .field--name-thumbnail', context).once('media-library-item').on('mouseover', function (){
+        $(this).parents('.media-library-item').addClass('is-hover');
+      }).on('mouseout', function(){
+        $(this).parents('.media-library-item').removeClass('is-hover');
+      });
+    }
+  };
+
+  /**
    * Persists bulk and select form selections across AJAX View re-renders.
    */
   Drupal.behaviors.MediaLibraryPersistentSelection = {
diff -u b/core/modules/media_library/media_library.links.action.yml b/core/modules/media_library/media_library.links.action.yml
--- b/core/modules/media_library/media_library.links.action.yml
+++ b/core/modules/media_library/media_library.links.action.yml
@@ -6 +5,0 @@
-    - view.media_library.bundle_page
reverted:
--- b/core/modules/media_library/media_library.links.task.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-media_library.local_tasks:
-  deriver: 'Drupal\media_library\Plugin\Derivative\MediaLibraryLocalTasks'
-  weight: 1
-
-media_library.local_tasks.all:
-  title: 'All categories'
-  route_name: view.media_library.page
-  parent_id: views_view:view.media_library.page
reverted:
--- b/core/modules/media_library/src/Plugin/Derivative/MediaLibraryLocalTasks.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<?php
-
-namespace Drupal\media_library\Plugin\Derivative;
-
-use Drupal\Component\Plugin\Derivative\DeriverBase;
-use Drupal\media\Entity\MediaType;
-
-/**
- * Defines dynamic local tasks for the Media Library module.
- */
-class MediaLibraryLocalTasks extends DeriverBase {
-
-  /**
-   * {@inheritdoc}
-   */
-  public function getDerivativeDefinitions($base_plugin_definition) {
-    $weight = 0;
-    foreach (MediaType::loadMultiple() as $id => $bundle) {
-      $this->derivatives[$id] = $base_plugin_definition;
-      $this->derivatives[$id]['title'] = $bundle->label();
-      $this->derivatives[$id]['route_name'] = 'view.media_library.bundle_page';
-      $this->derivatives[$id]['parent_id'] = 'views_view:view.media_library.page';
-      $this->derivatives[$id]['weight'] = ++$weight;
-      $this->derivatives[$id]['route_parameters'] = ['bundle' => $id];
-    }
-    return $this->derivatives;
-  }
-
-}
diff -u b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php
--- b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php
+++ b/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php
@@ -196,8 +196,8 @@
           'class' => ['button', 'use-ajax', 'media-library-open-button'],
           'data-dialog-type' => 'modal',
           'data-dialog-options' => json_encode([
-            'height' => '500',
-            'width' => '70%',
+            'height' => '75%',
+            'width' => '75%',
             'title' => $this->t('Media library'),
           ]),
         ],
diff -u b/core/modules/media_library/templates/media--media-library.html.twig b/core/modules/media_library/templates/media--media-library.html.twig
--- b/core/modules/media_library/templates/media--media-library.html.twig
+++ b/core/modules/media_library/templates/media--media-library.html.twig
@@ -45,8 +45,6 @@
       <div class="media-library-item-name">{{ name }}</div>
       <div class="media-library-item-created">{{ created_ago }}</div>
-      <div class="media-library-item-author">{{ author_info }}</div>
+      <div class="media-library-item-type">{{ media.bundle()|title }}</div>
     </div>
-    {# This is used to prevent dragging nested elements in the widget. #}
-    <div class="media-library-mask"></div>
   {% endif %}
 </article>
only in patch2:
unchanged:
--- /dev/null
+++ b/core/misc/icons/787878/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px">
+<path fill="#787878" d="M6.464,13.676c-0.194,0.194-0.513,0.194-0.707,0l-4.96-4.955c-0.194-0.193-0.194-0.513,0-0.707l1.405-1.407 c0.194-0.195,0.512-0.195,0.707,0l2.849,2.848c0.194,0.193,0.513,0.193,0.707,0l6.629-6.626c0.195-0.194,0.514-0.194,0.707,0 l1.404,1.404c0.193,0.194,0.193,0.513,0,0.707L6.464,13.676z"/>
+</svg>
only in patch2:
unchanged:
--- /dev/null
+++ b/core/modules/media/images/icons/generic-file.png
@@ -0,0 +1,5 @@
+‰PNG
+
+
IHDR´´
+ötEXtSoftwareAdobe ImageReadyqÉe<PLTEÌÌÍôõõ}^œfçIDATxÚìØ1
+
Aßÿ?�ö)-ÃèÃvö<7ÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÐÿŠž×® g¾Õs�-�RgK‡ÔáÒuºtD/�PçKÔ…ÒûêFéuu¥ô¶ºSzY]*½«n•^U×Joª‹è�N¡O^.çÐsýc'Ñ














ý\ü{












































½»�
)yeïùIEND®B`‚
\ No newline at end of file