diff --git a/core/themes/claro/templates/media-library/details--media-library-add-form-selected-media.html.twig b/core/themes/claro/templates/media-library/details--media-library-add-form-selected-media.html.twig
new file mode 100644
index 0000000000..6d62c3fced
--- /dev/null
+++ b/core/themes/claro/templates/media-library/details--media-library-add-form-selected-media.html.twig
@@ -0,0 +1,20 @@
+{% extends "details.html.twig" %}
+{#
+/**
+ * @file
+ * Theme override for the "Additional selected media" area of the modal media
+ * library dialog.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
+ * - title: (optional) The title of the element, may not be set.
+ * - summary_attributes: A list of HTML attributes for the summary element.
+ * - description: (optional) The description of the element, may not be set.
+ * - children: (optional) The children of the element, may not be set.
+ * - value: (optional) The value of the element, may not be set.
+ *
+ * @see template_preprocess_details()
+ */
+#}
+{% set attributes = attributes.addClass('media-library-add-form__selected-media seven-details') %}
diff --git a/core/themes/claro/templates/media-library/fieldset--media-library-widget.html.twig b/core/themes/claro/templates/media-library/fieldset--media-library-widget.html.twig
new file mode 100644
index 0000000000..cd7044c969
--- /dev/null
+++ b/core/themes/claro/templates/media-library/fieldset--media-library-widget.html.twig
@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Theme override for the media library widget.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the fieldset element.
+ * - errors: (optional) Any errors for this fieldset element, may not be set.
+ * - required: Boolean indicating whether the fieldeset element is required.
+ * - legend: The legend element containing the following properties:
+ *   - title: Title of the fieldset, intended for use as the text of the legend.
+ *   - attributes: HTML attributes to apply to the legend.
+ * - description: The description element containing the following properties:
+ *   - content: The description content of the fieldset.
+ *   - attributes: HTML attributes to apply to the description container.
+ * - children: The rendered child elements of the fieldset.
+ * - prefix: The content to add before the fieldset children.
+ * - suffix: The content to add after the fieldset children.
+ *
+ * @see seven_preprocess_fieldset__media_library_widget()
+ * @see template_preprocess_fieldset()
+ */
+#}
+{%
+  set classes = [
+    'js-form-item',
+    'form-item',
+    'js-form-wrapper',
+    'form-wrapper',
+    'media-library-widget',
+  ]
+%}
+<fieldset{{ attributes.addClass(classes) }}>
+  {%
+    set legend_span_classes = [
+      'fieldset-legend',
+      required ? 'js-form-required',
+      required ? 'form-required',
+    ]
+  %}
+  {#  Always wrap fieldset legends in a <span> for CSS positioning. #}
+  <legend{{ legend.attributes }}>
+    <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
+  </legend>
+  <div class="fieldset-wrapper">
+    {% if errors %}
+      <div class="form-item--error-message">
+        <strong>{{ errors }}</strong>
+      </div>
+    {% endif %}
+    {% if prefix.empty_selection %}
+      <p class="media-library-widget-empty-text">{{ prefix.empty_selection }}</p>
+    {% elseif prefix.weight_toggle %}
+      {{ prefix.weight_toggle }}
+    {% endif %}
+    {{ children }}
+    {% if suffix %}
+      <span class="field-suffix">{{ suffix }}</span>
+    {% endif %}
+    {% if description.content %}
+      <div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
+    {% endif %}
+  </div>
+</fieldset>
diff --git a/core/themes/claro/templates/media-library/item-list--media-library-add-form-media-list.html.twig b/core/themes/claro/templates/media-library/item-list--media-library-add-form-media-list.html.twig
new file mode 100644
index 0000000000..27cfe2bd26
--- /dev/null
+++ b/core/themes/claro/templates/media-library/item-list--media-library-add-form-media-list.html.twig
@@ -0,0 +1,33 @@
+{#
+/**
+ * @file
+ * Theme override for a list of new, unsaved media items being added in the
+ * modal media library dialog.
+ *
+ * Available variables:
+ * - items: A list of items. Each item contains:
+ *   - attributes: HTML attributes to be applied to each list item.
+ *   - value: The content of the list element.
+ * - title: The title of the list.
+ * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
+ * - attributes: HTML attributes to be applied to the list.
+ * - empty: A message to display when there are no items. Allowed value is a
+ *   string or render array.
+ * - context: A list of contextual data associated with the list. May contain:
+ *   - list_style: The custom list style.
+ *
+ * @see seven_preprocess_item_list__media_library_add_form_media_list()
+ * @see template_preprocess_item_list()
+ */
+#}
+{% if items -%}
+  {%- if title is not empty -%}
+    <h3>{{ title }}</h3>
+  {%- endif -%}
+  <{{ list_type }}{{ attributes.addClass('media-library-add-form__added-media') }}>
+  {%- for item in items -%}
+    <li{{ item.attributes.addClass('media-library-add-form__media') }}>{{ item.value }}</li>
+  {%- endfor -%}
+  </{{ list_type }}>
+{%- endif %}
diff --git a/core/themes/claro/templates/media-library/views-view--media_library.html.twig b/core/themes/claro/templates/media-library/views-view--media_library.html.twig
new file mode 100644
index 0000000000..b3fde507eb
--- /dev/null
+++ b/core/themes/claro/templates/media-library/views-view--media_library.html.twig
@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Theme override for the media_library view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A css-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ */
+#}
+{%
+  set classes = [
+    'view',
+    'view-' ~ id|clean_class,
+    'view-id-' ~ id,
+    'view-display-id-' ~ display_id,
+    dom_id ? 'js-view-dom-id-' ~ dom_id,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if title %}
+    {{ title }}
+  {% endif %}
+  {{ title_suffix }}
+  {% if exposed %}
+    <div class="view-filters">
+      {{ exposed }}
+    </div>
+  {% endif %}
+  {% if header %}
+    <div class="view-header">
+      {{ header }}
+    </div>
+  {% endif %}
+  {% if attachment_before %}
+    <div class="attachment attachment-before">
+      {{ attachment_before }}
+    </div>
+  {% endif %}
+
+  {% if rows %}
+    <div class="view-content">
+      {{ rows }}
+    </div>
+  {% elseif empty %}
+    <div class="view-empty">
+      {{ empty }}
+    </div>
+  {% endif %}
+
+  {% if pager %}
+    {{ pager }}
+  {% endif %}
+  {% if attachment_after %}
+    <div class="attachment attachment-after">
+      {{ attachment_after }}
+    </div>
+  {% endif %}
+  {% if more %}
+    {{ more }}
+  {% endif %}
+  {% if footer %}
+    <div class="view-footer">
+      {{ footer }}
+    </div>
+  {% endif %}
+  {% if feed_icons %}
+    <div class="feed-icons">
+      {{ feed_icons }}
+    </div>
+  {% endif %}
+</div>
diff --git a/core/themes/claro/templates/media-library/views-view-unformatted--media-library.html.twig b/core/themes/claro/templates/media-library/views-view-unformatted--media-library.html.twig
new file mode 100644
index 0000000000..4bc33e0e86
--- /dev/null
+++ b/core/themes/claro/templates/media-library/views-view-unformatted--media-library.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override for the media_library display of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ */
+#}
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+<div class="media-library-views-form__rows">
+  {% for row in rows %}
+    {%
+      set row_classes = [
+        default_row_class ? 'views-row',
+        'media-library-item',
+        'media-library-item--grid',
+      ]
+    %}
+    <div{{ row.attributes.addClass(row_classes) }}>
+      {{- row.content -}}
+    </div>
+  {% endfor %}
+</div>