diff --git a/core/modules/media_library/css/media_library.theme.css b/core/modules/media_library/css/media_library.theme.css
index c7055682ec..298eead5e9 100644
--- a/core/modules/media_library/css/media_library.theme.css
+++ b/core/modules/media_library/css/media_library.theme.css
@@ -96,6 +96,10 @@
   margin: 8px 0 0;
 }
 
+.media-library-add-form-description {
+  margin-top: 0;
+}
+
 /* Media add form selection styles. */
 .media-library-add-form-selection {
   margin-top: 1em;
diff --git a/core/modules/media_library/js/media_library.click_to_select.es6.js b/core/modules/media_library/js/media_library.click_to_select.es6.js
index dae8d1380a..536526a6c8 100644
--- a/core/modules/media_library/js/media_library.click_to_select.es6.js
+++ b/core/modules/media_library/js/media_library.click_to_select.es6.js
@@ -27,25 +27,25 @@
 
       $('.js-click-to-select-checkbox input', context)
         .once('media-library-click-to-select')
-        // Adds checked effect to media items.
+        // Adds checked class to the click-to-select element.
         .on('change', ({ currentTarget }) => {
           $(currentTarget)
             .closest('.js-click-to-select')
             .toggleClass('checked', $(currentTarget).prop('checked'));
         })
-        // Adds focus effect to media items.
+        // Adds is-focus class to the click-to-select element.
         .on('focus blur', ({ currentTarget, type }) => {
           $(currentTarget)
-            .closest('.media-library-item')
+            .closest('.js-click-to-select')
             .toggleClass('is-focus', type === 'focus');
         });
 
-      // Adds hover effect to media items.
+      // Adds hover class to the click-to-select element.
       $('.js-click-to-select-trigger, .js-click-to-select-checkbox', context)
-        .once('media-library-item-hover')
+        .once('media-library-click-to-select-hover')
         .on('mouseover mouseout', ({ currentTarget, type }) => {
           $(currentTarget)
-            .closest('.media-library-item')
+            .closest('.js-click-to-select')
             .toggleClass('is-hover', type === 'mouseover');
         });
     },
diff --git a/core/modules/media_library/js/media_library.click_to_select.js b/core/modules/media_library/js/media_library.click_to_select.js
index 155e4c22f6..265ec4531b 100644
--- a/core/modules/media_library/js/media_library.click_to_select.js
+++ b/core/modules/media_library/js/media_library.click_to_select.js
@@ -23,14 +23,14 @@
         var currentTarget = _ref2.currentTarget,
             type = _ref2.type;
 
-        $(currentTarget).closest('.media-library-item').toggleClass('is-focus', type === 'focus');
+        $(currentTarget).closest('.js-click-to-select').toggleClass('is-focus', type === 'focus');
       });
 
-      $('.js-click-to-select-trigger, .js-click-to-select-checkbox', context).once('media-library-item-hover').on('mouseover mouseout', function (_ref3) {
+      $('.js-click-to-select-trigger, .js-click-to-select-checkbox', context).once('media-library-click-to-select-hover').on('mouseover mouseout', function (_ref3) {
         var currentTarget = _ref3.currentTarget,
             type = _ref3.type;
 
-        $(currentTarget).closest('.media-library-item').toggleClass('is-hover', type === 'mouseover');
+        $(currentTarget).closest('.js-click-to-select').toggleClass('is-hover', type === 'mouseover');
       });
     }
   };
diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php
index c3ec671198..7e46ed2591 100644
--- a/core/modules/media_library/src/Form/AddFormBase.php
+++ b/core/modules/media_library/src/Form/AddFormBase.php
@@ -146,20 +146,23 @@ public function buildForm(array $form, FormStateInterface $form_state) {
     else {
       $form['#attributes']['class'][] = 'media-library-add-form--with-input';
 
-      $form['media'] = [
-        '#type' => 'container',
+      $form['description'] = [
+        '#type' => 'html_tag',
+        '#tag' => 'p',
+        '#value' => $this->formatPlural(count($added_media), 'The media item has been created. Fill in any required fields and save to make it available in the media library.', 'The media items have been added. Fill in any required fields and save to make them available in the media library.'),
+        '#attributes' => [
+          'class' => [
+            'media-library-add-form-description',
+          ],
+        ],
       ];
 
+      $form['media'] = ['#type' => 'container'];
       foreach ($added_media as $delta => $media) {
         $form['media'][$delta] = $this->buildEntityFormElement($media, $form, $form_state, $delta);
       }
 
-      $media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
-      if ($media_ids) {
-        $media_items = $this->entityTypeManager->getStorage('media')->loadMultiple($media_ids);
-        $form['selection'] = $this->buildCurrentSelectionArea($media_items, $form, $form_state);
-      }
-
+      $form['selection'] = $this->buildCurrentSelectionArea($form, $form_state);
       $form['actions'] = $this->buildActions($form, $form_state);
     }
 
@@ -285,8 +288,6 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
   /**
    * Returns a render array containing the current selection.
    *
-   * @param \Drupal\media\MediaInterface[] $media_items
-   *   The current selection of media items.
    * @param array $form
    *   The complete form.
    * @param \Drupal\Core\Form\FormStateInterface $form_state
@@ -295,7 +296,13 @@ protected function buildEntityFormElement(MediaInterface $media, array $form, Fo
    * @return array
    *   A render array containing the current selection.
    */
-  protected function buildCurrentSelectionArea($media_items, array $form, FormStateInterface $form_state) {
+  protected function buildCurrentSelectionArea(array $form, FormStateInterface $form_state) {
+    $pre_selected_items = $this->getPreSelectedMediaItems($form_state);
+
+    if (!$pre_selected_items) {
+      return [];
+    }
+
     $selection = [
       '#type' => 'container',
       '#attributes' => [
@@ -304,9 +311,10 @@ protected function buildCurrentSelectionArea($media_items, array $form, FormStat
         ],
       ],
     ];
-    foreach ($media_items as $media_id => $media) {
+    foreach ($pre_selected_items as $media_id => $media) {
       $selection[$media_id] = $this->buildSelectedItemElement($media, $form, $form_state);
     }
+
     return $selection;
   }
 
@@ -563,7 +571,7 @@ public function updateWidget(array &$form, FormStateInterface $form_state) {
     $opener_id = MediaLibraryState::fromRequest($this->getRequest())->getOpenerId();
     if ($field_id = MediaLibraryWidget::getOpenerFieldId($opener_id)) {
       return (new AjaxResponse())
-        ->addCommand(new InvokeCommand("[data-media-library-widget-value=\"$field_id\"]", 'val', [implode(',', $this->getAllSelectedMediaIds($form_state))]))
+        ->addCommand(new InvokeCommand("[data-media-library-widget-value=\"$field_id\"]", 'val', [implode(',', $this->getCurrentMediaItems($form_state))]))
         ->addCommand(new InvokeCommand("[data-media-library-widget-update=\"$field_id\"]", 'trigger', ['mousedown']))
         ->addCommand(new CloseDialogCommand());
     }
@@ -585,21 +593,38 @@ protected function getSourceFieldName(MediaTypeInterface $media_type) {
   }
 
   /**
-   * Get all selected media IDs from the form state.
+   * Get all pre-selected media IDs from the form state.
+   *
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The current form state.
+   *
+   * @return |Drupal\media\MediaInterface[]
+   *   An array containing the pre-selected media IDs.
+   */
+  protected function getPreSelectedMediaItems(FormStateInterface $form_state) {
+    $media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
+    if (!$media_ids) {
+      return [];
+    }
+    return $this->entityTypeManager->getStorage('media')->loadMultiple($media_ids);
+  }
+
+  /**
+   * Get all pre-selected and added media IDs from the form state.
    *
    * @param \Drupal\Core\Form\FormStateInterface $form_state
    *   The current form state.
    *
    * @return int[]
-   *   An array containing the selected media IDs.
+   *   An array containing all pre-selected and added media IDs.
    */
-  protected function getAllSelectedMediaIds(FormStateInterface $form_state) {
-    $selected_media_ids = array_filter(explode(',', $form_state->getValue('current_selection')));
+  protected function getCurrentMediaItems(FormStateInterface $form_state) {
+    $pre_selected_media = $this->getPreSelectedMediaItems($form_state);
     $added_media = $form_state->get('media') ?: [];
-    $added_media_ids = array_map(function (MediaInterface $media) {
+    $all_media = array_merge($pre_selected_media, $added_media);
+    return array_map(function (MediaInterface $media) {
       return $media->id();
-    }, $added_media);
-    return array_merge($selected_media_ids, $added_media_ids);
+    }, $all_media);
   }
 
 }