diff --git a/lark.theme b/lark.theme
index c54d978..432e2ba 100644
--- a/lark.theme
+++ b/lark.theme
@@ -245,3 +245,18 @@ function lark_forms_attach_views_display_id(&$form, $views_display_id) {
     lark_forms_attach_views_display_id($form[$child], $views_display_id);
   }
 }
+
+/**
+ * Views media_library preprocess hook.
+ *
+ * @param $variables
+ */
+function lark_preprocess_views_view__media_library(&$variables) {
+  // Make header classes BEM compatible by adding a new class 'views-display-link-widget__table'.
+  if (isset($variables['header']['display_link_table']['#options']['attributes']['class'])) {
+    $table_classes = $variables['header']['display_link_table']['#options']['attributes']['class'];
+    if (in_array('views-display-link-widget_table', $table_classes)) {
+      $variables['header']['display_link_table']['#options']['attributes']['class'] = array_merge($table_classes, array_diff(['views-display-link-widget__table'], $table_classes));
+    }
+  }
+}
diff --git a/scss/components/_media-library.scss b/scss/components/_media-library.scss
new file mode 100644
index 0000000..b38b9cc
--- /dev/null
+++ b/scss/components/_media-library.scss
@@ -0,0 +1,1042 @@
+/**
+ * @file media-library.css
+
+ * Styling for Media Library.
+ */
+
+.media-library-wrapper {
+  display: flex;
+  margin: -1em;
+
+  .view-header {
+    text-align: left;
+  }
+
+  .views-display-link {
+    padding-right: 22px;
+    padding-left: 0;
+  }
+
+  .views-display-link-widget {
+    background-position: right 0;
+  }
+
+  .views-display-link-widget__table {
+    background-position: right 0;
+  }
+
+
+  .media-library-view {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .view-content {
+      flex: 0 0 100%;
+    }
+
+  }
+
+  .view-header {
+    align-self: flex-end;
+    margin: 1em 0;
+    text-align: right;
+  }
+
+  .views-display-link {
+    margin: 0;
+    padding-left: 22px;
+    line-height: 16px;
+    color: #333333;
+    font-size: 15px;
+  }
+
+  .views-display-link {
+
+    .is-active {
+      font-weight: bold;
+    }
+
+  }
+
+  .views-display-link-widget {
+    margin-right: 15px;
+    background: url('/core/misc/icons/333333/grid.svg') left 0 no-repeat;
+  }
+
+  .views-display-link-widget__table {
+    background: url('/core/misc/icons/333333/table.svg') left 0 no-repeat;
+  }
+
+}
+
+/**
+ * @todo Reuse or build on vertical tabs styling for the media library menu.
+ *   https://www.drupal.org/project/drupal/issues/3023767
+ */
+.media-library-menu {
+  display: block;
+  margin: 0;
+  border-bottom: 1px solid #cccccc;
+  background-color: #e6e5e1;
+  padding: 0;
+  width: 600px;
+  max-width: 20%;
+  line-height: 1;
+
+  li {
+    display: block;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+/* Generic media library view styles. */
+.media-library-menu__link {
+  display: block;
+  position: relative;
+  border-bottom: 1px solid #b3b2ad;
+  background-color: #f2f2f0;
+  padding: 15px;
+  text-decoration: none;
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  box-sizing: border-box;
+
+  &:active {
+    outline: none;
+    background: #fcfcfa;
+    text-shadow: none;
+  }
+
+  &:hover {
+    background: #fcfcfa;
+    text-shadow: none;
+  }
+
+  &:focus {
+    outline: none;
+    background: #fcfcfa;
+    text-shadow: none;
+  }
+
+  .active {
+    z-index: 1;
+    margin-right: -1px;
+    border-right: 1px solid #fcfcfa;
+    border-bottom: 1px solid #b3b2ad;
+    box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
+    background-color: #ffffff;
+    color: #000000;
+  }
+
+}
+
+[dir='rtl'] {
+
+  .media-library-menu {
+    margin: 0;
+  }
+
+  .media-library-menu__link {
+
+    .active {
+      margin-right: 0;
+      margin-left: -1px;
+      border-right: 0;
+      border-left: 1px solid #fcfcfa;
+    }
+
+  }
+
+  .media-library-content {
+    border-right: 1px solid #b3b2ad;
+    border-left: 0;
+  }
+
+  .media-library-select-all {
+
+    input {
+      margin-left: 10px;
+    }
+
+  }
+
+  .media-library-item__status {
+    right: 5px;
+    left: auto;
+  }
+
+  .media-library-item__click-to-select-checkbox {
+    right: 16px;
+    left: auto;
+  }
+
+}
+
+.media-library-content {
+  outline: none;
+  border-left: 1px solid #b3b2ad;
+  padding: 1em;
+  width: 100%;
+}
+
+.media-library-add-form--without-input {
+
+  .form-item {
+    margin: 0 0 1em;
+  }
+
+}
+
+/**
+ * Remove outline from added media list.
+ *
+ * The added media list receives focus after adding new media, but since it is
+ * not an interactive element, it does not need an outline.
+ */
+.media-library-add-form__added-media {
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+.media-library-add-form__input-wrapper {
+  border: 1px solid #bfbfbf;
+  border-radius: 2px;
+  background: #fcfcfa;
+  padding: 16px;
+}
+
+.media-library-add-form--upload {
+
+  .media-library-add-form--without-input {
+    .form-item-upload {
+      margin-bottom: 0;
+    }
+  }
+
+}
+
+.media-library-add-form {
+
+  .file-upload-help {
+    margin: 8px 0 0;
+  }
+
+}
+
+.media-library-add-form--oembed {
+
+  .media-library-add-form__input-wrapper {
+    display: flex;
+  }
+
+  .media-library-add-form--without-input {
+
+    .form-item-url {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.media-library-add-form-oembed-url {
+  width: 100%;
+}
+
+.button {
+
+  .media-library-add-form-oembed-submit {
+    align-self: center;
+  }
+
+  .media-library-open-button {
+    margin-bottom: 1em;
+    margin-left: 0;
+  }
+
+}
+
+.media-library-add-form__selected-media {
+  margin-top: 1em;
+
+  .details-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px 1em;
+  }
+
+  .media-library-item {
+
+    .field--name-thumbnail {
+
+      img {
+        height: 100px;
+      }
+
+    }
+
+  }
+
+  .media-library-item--small {
+    width: 33.3%;
+  }
+
+}
+
+.media-library-select-all {
+  flex-basis: 100%;
+  margin: 10px 8px;
+  width: 100%;
+
+  input {
+    margin-right: 10px;
+  }
+
+}
+
+.media-library-views-form {
+  display: flex;
+  flex-wrap: wrap;
+
+  >.form-actions {
+    flex-basis: 100%;
+  }
+
+}
+
+.media-library-selection {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.media-library-view {
+
+  .form--inline {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+}
+
+.media-library-views-form__rows {
+  display: flex;
+  flex-basis: 100%;
+  margin: 0 -8px;
+
+  .form-item {
+    margin-right: 8px;
+  }
+
+}
+
+@media screen and (max-width: 37.5em) {
+
+  .media-library-add-form--oembed {
+
+    .media-library-add-form__input-wrapper {
+      display: block;
+    }
+
+  }
+
+}
+
+.media-library-views-form__rows {
+  display: flex;
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+}
+
+.media-library-views-form__header {
+
+  .form-item {
+    margin-right: 8px;
+  }
+
+}
+
+
+.media-library-view {
+
+  .form-actions {
+    align-self: flex-end;
+    margin: 0.75em 0;
+  }
+
+}
+
+@media screen and (max-width: 600px) {
+
+  .media-library-view {
+
+    .form-actions {
+      flex-basis: 100%;
+    }
+
+  }
+
+}
+
+.media-library-view {
+
+  .media-library-view--form-actions {
+    align-self: flex-end;
+    clear: left;
+    margin: 0.75em 0;
+  }
+
+}
+
+/**
+ * Override the table display of the visually hidden labels.
+ *
+ * The width, height and overflow properties in the styles for the
+ * .visually-hidden class do not work correctly if the element has a table
+ * display.
+ */
+/* Media library widget view styles. */
+/**
+ * Style the media library grid items.
+ */
+/**
+* The media library item container receives screen reader focus when items are
+* removed. Since it is not an interactive element, it does not need an
+* outline.
+*/
+/* Media library widget weight field styles. */
+/* The selected items in the add form should be shown a bit smaller. */
+/**
+ * By default, the dialog is too narrow to be usable.
+ * @see Drupal.ckeditor.openDialog()
+ */
+/* Change the width for the modal and widget since there is less space. */
+/* The selected items in the add form should be shown a bit smaller. */
+/* Change the width for the modal and widget since there is less space. */
+/* The selected items in the add form should be shown a bit smaller. */
+.media-library-item {
+
+  label {
+    display: inline-block;
+  }
+
+  position: relative;
+}
+
+.media-library-item--grid {
+  justify-content: center;
+  outline: none;
+  background: #ffffff;
+  padding: 8px;
+  width: 50%;
+  vertical-align: top;
+  box-sizing: border-box;
+
+  &:before {
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    transition: border-color 0.2s, color 0.2s, background 0.2s;
+    border: 1px solid #dbdbdb;
+    width: calc(100% - 16px);
+    height: calc(100% - 16px);
+    content: '';
+    pointer-events: none;
+  }
+
+  &.is-hover {
+
+    &:before {
+      top: 5px;
+      left: 5px;
+      border-width: 3px;
+      border-radius: 3px;
+      border-color: #40b6ff;
+    }
+
+  }
+
+  &.checked {
+
+    &:before {
+      top: 5px;
+      left: 5px;
+      border-width: 3px;
+      border-radius: 3px;
+      border-color: #40b6ff;
+    }
+
+  }
+
+  &.is-focus {
+
+    &:before {
+      top: 5px;
+      left: 5px;
+      border-width: 3px;
+      border-radius: 3px;
+      border-color: #40b6ff;
+    }
+
+  }
+
+  .form-item {
+    margin: 0.75em;
+  }
+
+  .field--name-thumbnail {
+    overflow: hidden;
+    text-align: center;
+
+    img {
+      height: 180px;
+      object-fit: contain;
+      object-position: center center;
+    }
+
+  }
+
+  .media-library-item__name {
+    white-space: normal;
+  }
+
+}
+
+.media-library-widget-modal {
+
+  .ui-dialog-buttonpane {
+    display: flex;
+    align-items: center;
+
+    .form-actions {
+      flex: 1;
+    }
+
+  }
+
+}
+
+.ui-dialog--narrow {
+
+  .media-library-widget-modal {
+    max-width: 75%;
+  }
+
+}
+
+@media screen and (min-width: 45em) {
+
+  .media-library-item--grid {
+    width: 33.3%;
+  }
+
+  .media-library-widget-modal {
+
+    .media-library-item--grid {
+      width: 50%;
+    }
+
+  }
+
+  .media-library-selection {
+
+    .media-library-item--grid {
+      width: 50%;
+    }
+
+  }
+
+  .media-library-add-form__selected-media {
+
+    .media-library-item--small {
+      width: 25%;
+    }
+
+  }
+
+}
+
+@media screen and (min-width: 60em) {
+
+  .media-library-item--grid {
+    width: 25%;
+  }
+
+  .media-library-widget-modal {
+
+    .media-library-item--grid {
+      width: 33.3%;
+    }
+
+  }
+
+  .media-library-selection {
+
+    .media-library-item--grid {
+      width: 33.3%;
+    }
+
+  }
+
+  .media-library-add-form__selected-media {
+
+    .media-library-item--small {
+      width: 16.6%;
+    }
+
+  }
+
+}
+
+@media screen and (min-width: 77em) {
+
+  .media-library-item--grid {
+    width: 16.6%;
+  }
+
+  .media-library-widget-modal {
+
+    .media-library-item--grid {
+      width: 25%;
+    }
+
+  }
+
+  .media-library-selection {
+
+    .media-library-item--grid {
+      width: 25%;
+    }
+
+  }
+
+  .media-library-add-form__selected-media {
+
+    .media-library-item--small {
+      width: 16.6%;
+    }
+
+  }
+
+}
+
+.media-library-item__click-to-select-checkbox {
+  display: block;
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 1;
+
+  input {
+    width: 20px;
+    height: 20px;
+  }
+
+  .form-item {
+    margin: 0;
+  }
+
+}
+
+.media-library-item__click-to-select-trigger {
+  cursor: pointer;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Media library item table styles. */
+/* Media library entity view display styles. */
+.media-library-item--table {
+  img {
+    max-width: 100px;
+    height: auto;
+  }
+}
+
+.media-library-item__preview {
+  padding-bottom: 34px;
+}
+
+.field--widget-media-library-widget {
+
+  .media-library-item__preview {
+    cursor: move;
+  }
+
+  .js-media-library-item {
+    &:only-child {
+
+      .media-library-item__preview {
+        cursor: inherit;
+      }
+
+    }
+  }
+}
+
+.media-library-item__status {
+  position: absolute;
+  top: 40px;
+  left: 5px;
+  background: #666666;
+  padding: 5px 10px;
+  color: #e4e4e4;
+  font-size: 12px;
+  font-style: italic;
+  pointer-events: none;
+}
+
+.media-library-item__name {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 5px 10px;
+  width: 100%;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #ffffff;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+
+@media screen and (min-width: 77em) {
+  .media-library-item--grid {
+    width: 16.6%;
+  }
+
+  /* Change the width for the modal and widget since there is less space. */
+  .media-library-widget-modal {
+
+    .media-library-item--grid,
+    .media-library-selection {
+
+      .media-library-item--grid {
+        width: 25%;
+      }
+
+    }
+
+  }
+
+  /* The selected items in the add form should be shown a bit smaller. */
+  .media-library-add-form__selected-media {
+
+    .media-library-item--small {
+      width: 16.6%;
+    }
+
+  }
+}
+
+.media-library-item__click-to-select-checkbox {
+  display: block;
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 1;
+
+  input {
+    width: 20px;
+    height: 20px;
+  }
+
+  .form-item {
+    margin: 0;
+  }
+
+}
+
+.media-library-item--table {
+
+  img {
+    max-width: 100px;
+    height: auto;
+  }
+
+}
+
+.media-library-item__preview {
+  padding-bottom: 34px;
+}
+
+.field--widget-media-library-widget {
+
+  .media-library-item__preview {
+    cursor: move;
+  }
+
+  .js-media-library-item {
+
+    &:only-child {
+
+      .media-library-item__preview {
+        cursor: inherit;
+      }
+
+    }
+
+  }
+
+}
+
+.media-library-item__status {
+  position: absolute;
+  top: 40px;
+  left: 5px;
+  background: #666666;
+  padding: 5px 10px;
+  color: #e4e4e4;
+  font-size: 12px;
+  font-style: italic;
+  pointer-events: none;
+}
+
+.media-library-item__attributes {
+  display: block;
+  bottom: 0;
+  background: #ffffff;
+  max-width: calc(100% - 10px);
+  max-height: calc(100% - 50px);
+  overflow: hidden;
+
+  &:hover {
+
+    .media-library-item__name {
+      white-space: normal;
+    }
+
+  }
+
+}
+
+.media-library-item__type {
+  color: #696969;
+  font-size: 12px;
+}
+
+.media-library-item--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.media-library-widget {
+  position: relative;
+}
+
+.media-library-widget__toggle-weight {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.media-library-selection {
+  margin: 1em -8px;
+}
+
+.media-library-item__edit {
+  position: absolute;
+  top: 10px;
+  right: 40px;
+  transition: 0.2s border-color;
+  z-index: 1;
+  margin: 5px;
+  border: 2px solid #cccccc;
+  border-radius: 20px;
+  background: url('/core/misc/icons/787878/pencil.svg') #ffffff center no-repeat;
+  background-size: 13px;
+  padding: 0;
+  width: 21px;
+  height: 21px;
+  overflow: hidden;
+  text-shadow: none;
+  color: transparent;
+  font-size: 0;
+
+  &:hover {
+    border: 2px solid #40b6ff;
+  }
+
+  &:focus {
+    border: 2px solid #40b6ff;
+  }
+
+}
+
+
+.media-library-item__remove {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  transition: 0.2s border-color;
+  z-index: 1;
+  margin: 5px;
+  border: 2px solid #cccccc;
+  border-radius: 20px;
+  background: url('/core/misc/icons/787878/ex.svg') #ffffff center no-repeat;
+  background-size: 13px;
+  padding: 0;
+  width: 21px;
+  height: 21px;
+  overflow: hidden;
+  text-shadow: none;
+  color: transparent;
+  font-size: 0;
+
+  &:hover {
+    border: 2px solid #40b6ff;
+  }
+
+  &:focus {
+    border: 2px solid #40b6ff;
+  }
+
+}
+
+.media-library-item__remove {
+
+  .button {
+    position: absolute;
+    top: 10px;
+    transition: 0.2s border-color;
+    z-index: 1;
+    margin: 5px;
+    border: 2px solid #cccccc;
+    border-radius: 20px;
+    background: url('/core/misc/icons/787878/ex.svg') #ffffff center no-repeat;
+    background-size: 13px;
+    padding: 0;
+    width: 21px;
+    height: 21px;
+    overflow: hidden;
+    text-shadow: none;
+    color: transparent;
+    font-size: 0;
+
+    &:active {
+      border: 2px solid #40b6ff;
+    }
+
+    &:hover {
+      border: 2px solid #40b6ff;
+    }
+
+    &:focus {
+      border: 2px solid #40b6ff;
+    }
+
+  }
+
+}
+
+.media-library-add-form__media {
+  display: flex;
+  position: relative;
+  outline: none;
+  border-bottom: 1px solid #c0c0c0;
+  padding: 1em 0;
+
+  &:first-child {
+    padding-top: 0;
+
+    .media-library-add-form__remove-button {
+
+      &[type='submit'] {
+        top: 5px;
+      }
+
+    }
+
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+  }
+
+}
+
+.media-library-add-form__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+  background: #ebebeb;
+  width: 220px;
+}
+
+.media-library-add-form__remove-button {
+
+  &[type='submit'] {
+    position: absolute;
+    top: 25px;
+    right: 6px; /* LTR */
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent url('/core/misc/icons/787878/ex.svg') right 2px no-repeat; /* LTR */
+    padding: 2px 20px 2px 2px; /* LTR */
+    width: auto;
+    text-transform: lowercase;
+    line-height: 16px;
+    color: transparent;
+    font-weight: normal;
+  }
+
+  &:focus {
+    border: 0;
+    background: transparent url('/core/misc/icons/787878/ex.svg') right 2px no-repeat;
+    color: #787878;
+  }
+
+  &:hover {
+    border: 0;
+    box-shadow: none;
+    background: transparent url('/core/misc/icons/ee0000/ex.svg') right 2px no-repeat;
+    color: #ee0000;
+  }
+
+}
+
+.media-library-add-form__remove-button {
+
+  .button {
+    border: 0;
+    background: transparent url('/core/misc/icons/787878/ex.svg') right 2px no-repeat;
+    color: #787878;
+
+    &:hover {
+      box-shadow: none;
+      background: transparent url('/core/misc/icons/ee0000/ex.svg') right 2px no-repeat;
+      color: #ee0000;
+    }
+
+  }
+
+}
+
+.views-live-preview {
+
+  .media-library-view {
+
+    .views-row {
+
+      + {
+
+        .views-row {
+          margin-top: 0;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
diff --git a/scss/main.scss b/scss/main.scss
index 2e4cc52..f36f112 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -27,6 +27,7 @@
 @import './components/drupal-tabs';
 @import './components/entity_browser';
 @import './components/exposed-form';
+@import './components/media-library';
 @import './components/message';
 @import './components/shortcuts';
 @import './components/sidebar-menu';
diff --git a/templates/field/field--comment.html.twig b/templates/field/field--comment.html.twig
new file mode 100644
index 0000000..1ec3ee6
--- /dev/null
+++ b/templates/field/field--comment.html.twig
@@ -0,0 +1,57 @@
+{#
+/**
+ * @file
+ * Theme override for comment fields.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional title output populated by modules, intended to
+ *   be displayed after the main title tag that appears in the template.
+ * - comments: List of comments rendered through comment.html.twig.
+ * - comment_form: The 'Add new comment' form.
+ * - comment_display_mode: Is the comments are threaded.
+ * - comment_type: The comment type bundle ID for the comment field.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ * @see comment_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    'comment-wrapper',
+  ]
+%}
+{%
+  set title_classes = [
+    'title',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<section{{ attributes.addClass(classes) }}>
+  {% if comments and not label_hidden %}
+    {{ title_prefix }}
+    <h2{{ title_attributes.addClass(title_classes) }}>{{ label }}</h2>
+    {{ title_suffix }}
+  {% endif %}
+
+  {{ comments }}
+
+  {% if comment_form %}
+    <h2 class="title comment-form__title">{{ 'Add new comment'|t }}</h2>
+    {{ comment_form }}
+  {% endif %}
+
+</section>
diff --git a/templates/field/field--node--created.html.twig b/templates/field/field--node--created.html.twig
new file mode 100644
index 0000000..72d5d67
--- /dev/null
+++ b/templates/field/field--node--created.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override for the node created field.
+ *
+ * This is an override of field.html.twig for the node created field. See that
+ * template for documentation about its details and overrides.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing span element.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see field.html.twig
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
+  {%- for item in items -%}
+    {{ item.content }}
+  {%- endfor -%}
+</span>
diff --git a/templates/field/field--node--title.html.twig b/templates/field/field--node--title.html.twig
new file mode 100644
index 0000000..33b105f
--- /dev/null
+++ b/templates/field/field--node--title.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override for the node title field.
+ *
+ * This is an override of field.html.twig for the node title field. See that
+ * template for documentation about its details and overrides.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing span element.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see field.html.twig
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
+  {%- for item in items -%}
+    {{ item.content }}
+  {%- endfor -%}
+</span>
diff --git a/templates/field/field--node--uid.html.twig b/templates/field/field--node--uid.html.twig
new file mode 100644
index 0000000..9afc591
--- /dev/null
+++ b/templates/field/field--node--uid.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override for the node user field.
+ *
+ * This is an override of field.html.twig for the node user field. See that
+ * template for documentation about its details and overrides.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing span element.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see field.html.twig
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+  ]
+%}
+<span{{ attributes.addClass(classes) }}>
+  {%- for item in items -%}
+    {{ item.content }}
+  {%- endfor -%}
+</span>
diff --git a/templates/field/field--text-long.html.twig b/templates/field/field--text-long.html.twig
new file mode 100644
index 0000000..07ce721
--- /dev/null
+++ b/templates/field/field--text-long.html.twig
@@ -0,0 +1 @@
+{% extends "field--text.html.twig" %}
diff --git a/templates/field/field--text-with-summary.html.twig b/templates/field/field--text-with-summary.html.twig
new file mode 100644
index 0000000..07ce721
--- /dev/null
+++ b/templates/field/field--text-with-summary.html.twig
@@ -0,0 +1 @@
+{% extends "field--text.html.twig" %}
diff --git a/templates/field/field--text.html.twig b/templates/field/field--text.html.twig
new file mode 100644
index 0000000..5d1690c
--- /dev/null
+++ b/templates/field/field--text.html.twig
@@ -0,0 +1,28 @@
+{% extends "field.html.twig" %}
+{#
+/**
+ * @file
+ * Default theme implementation for a text field.
+ *
+ * A 'clearfix' class is added, because 'text' fields have a 'format' property
+ * that allows a Text Format to be associated with the entered text, which then
+ * applies filtering on output. A common use case is to align images to the left
+ * or right, and without this 'clearfix' class, such aligned images may be
+ * rendered outside of the 'text' field formatter's boundaries, and hence
+ * overlap with other fields. By setting the 'clearfix' class on all 'text'
+ * fields, we prevent that.
+ *
+ * @see https://www.drupal.org/node/2358529
+ *
+ * A 'text-formatted' class is added to assist with default styling of base
+ * elements such as paragraphs and lists that may not have classes assigned to
+ * them. This allows user entered content to have default styling without
+ * interfering with the styles of other UI components such as system generated
+ * lists or other dynamic content.
+ *
+ * @see https://www.drupal.org/node/2539860
+ *
+ * @ingroup themeable
+ */
+#}
+{% set attributes = attributes.addClass('clearfix', 'text-formatted') %}
diff --git a/templates/field/field.html.twig b/templates/field/field.html.twig
new file mode 100644
index 0000000..1cfbd65
--- /dev/null
+++ b/templates/field/field.html.twig
@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/templates/field/file-audio.html.twig b/templates/field/file-audio.html.twig
new file mode 100644
index 0000000..60ac095
--- /dev/null
+++ b/templates/field/file-audio.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as an audio tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   audio tag.
+* - files: And array of files to be added as sources for the audio tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+{{ attach_library('seven/classy.file') }}
+<audio {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</audio>
diff --git a/templates/field/file-video.html.twig b/templates/field/file-video.html.twig
new file mode 100644
index 0000000..4ed6794
--- /dev/null
+++ b/templates/field/file-video.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+* @file
+* Default theme implementation to display the file entity as a video tag.
+*
+* Available variables:
+* - attributes: An array of HTML attributes, intended to be added to the
+*   video tag.
+* - files: And array of files to be added as sources for the video tag. Each
+*   element is an array with the following elements:
+*   - file: The full file object.
+*   - source_attributes: An array of HTML attributes for to be added to the
+*     source tag.
+*
+* @ingroup themeable
+*/
+#}
+{{ attach_library('seven/classy.file') }}
+<video {{ attributes }}>
+  {% for file in files %}
+    <source {{ file.source_attributes }} />
+  {% endfor %}
+</video>
diff --git a/templates/field/image.html.twig b/templates/field/image.html.twig
new file mode 100644
index 0000000..31f782b
--- /dev/null
+++ b/templates/field/image.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override of an image.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
+ *
+ * @see template_preprocess_image()
+ */
+#}
+{%
+set classes = [
+  style_name ? 'image-style-' ~ style_name|clean_class,
+]
+%}
+<img{{ attributes.addClass(classes) }} />
diff --git a/templates/field/link-formatter-link-separate.html.twig b/templates/field/link-formatter-link-separate.html.twig
new file mode 100644
index 0000000..52c8d29
--- /dev/null
+++ b/templates/field/link-formatter-link-separate.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override of a link with separate title and URL elements.
+ *
+ * Available variables:
+ * - link: The link that has already been formatted by l().
+ * - title: (optional) A descriptive or alternate title for the link, which may
+ *   be different than the actual link text.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_link_formatter_link_separate()
+ */
+#}
+{% apply spaceless %}
+  <div class="link-item">
+    {% if title %}
+      <div class="link-title">{{ title }}</div>
+    {% endif %}
+    <div class="link-url">{{ link }}</div>
+  </div>
+{% endapply %}
diff --git a/templates/field/time.html.twig b/templates/field/time.html.twig
new file mode 100644
index 0000000..f2912b7
--- /dev/null
+++ b/templates/field/time.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override for a date / time element.
+ *
+ * Available variables
+ * - timestamp: (optional) A UNIX timestamp for the datetime attribute. If the
+ *   datetime cannot be represented as a UNIX timestamp, use a valid datetime
+ *   attribute value in attributes.datetime.
+ * - text: (optional) The content to display within the <time> element.
+ *   Defaults to a human-readable representation of the timestamp value or the
+ *   datetime attribute value using DateFormatter::format().
+ * - attributes: (optional) HTML attributes to apply to the <time> element.
+ *   A datetime attribute in 'attributes' overrides the 'timestamp'. To
+ *   create a valid datetime attribute value from a UNIX timestamp, use
+ *   DateFormatter::format() with one of the predefined 'html_*' formats.
+ *
+ * @see template_preprocess_time()
+ * @see http://www.w3.org/TR/html5-author/the-time-element.html#attr-time-datetime
+ */
+#}
+<time{{ attributes.addClass('datetime') }}>{{ text }}</time>
diff --git a/templates/media-library/container--media-library-content.html.twig b/templates/media-library/container--media-library-content.html.twig
new file mode 100644
index 0000000..7c930e2
--- /dev/null
+++ b/templates/media-library/container--media-library-content.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Theme implementation the content area of the modal media library dialog.
+ *
+ * The content area is everything that is not the menu of available media
+ * types. This includes the form to add new media items, if available, and
+ * the view of available media to select.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+     containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'media-library-content',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>
diff --git a/templates/media-library/container--media-library-widget-selection.html.twig b/templates/media-library/container--media-library-widget-selection.html.twig
new file mode 100644
index 0000000..7c0af44
--- /dev/null
+++ b/templates/media-library/container--media-library-widget-selection.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Theme implementation of a wrapper for selected media items.
+ *
+ * This is used to wrap around the set of media items that are currently
+ * selected in the media library widget (not the modal dialog), which may
+ * be used for entity reference fields that target media.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - children: The rendered child elements of the container.
+ * - has_parent: A flag to indicate that the container has one or more parent
+     containers.
+ *
+ * @see template_preprocess_container()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    has_parent ? 'js-form-wrapper',
+    has_parent ? 'form-wrapper',
+    'media-library-selection',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>{{ children }}</div>
diff --git a/templates/media-library/fieldset--media-library-widget.html.twig b/templates/media-library/fieldset--media-library-widget.html.twig
new file mode 100644
index 0000000..93d7267
--- /dev/null
+++ b/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 fieldset 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/templates/media-library/item-list--media-library-add-form-media-list.html.twig b/templates/media-library/item-list--media-library-add-form-media-list.html.twig
new file mode 100644
index 0000000..27cfe2b
--- /dev/null
+++ b/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/templates/media-library/links--media-library-menu.html.twig b/templates/media-library/links--media-library-menu.html.twig
new file mode 100644
index 0000000..b236157
--- /dev/null
+++ b/templates/media-library/links--media-library-menu.html.twig
@@ -0,0 +1,36 @@
+{% extends "links.html.twig" %}
+{#
+/**
+ * @file
+ * Theme implementation of the media type menu in the media library dialog.
+ *
+ * Available variables:
+ * - attributes: Attributes for the UL containing the list of links.
+ * - links: Links to be output.
+ *   Each link will have the following elements:
+ *   - link: (optional) A render array that returns a link. See
+ *     template_preprocess_links() for details how it is generated.
+ *   - text: The link text.
+ *   - attributes: HTML attributes for the list item element.
+ *   - text_attributes: (optional) HTML attributes for the span element if no
+ *     'url' was supplied.
+ * - heading: (optional) A heading to precede the links.
+ *   - text: The heading text.
+ *   - level: The heading level (e.g. 'h2', 'h3').
+ *   - attributes: (optional) A keyed list of attributes for the heading.
+ *   If the heading is a string, it will be used as the text of the heading and
+ *   the level will default to 'h2'.
+ *
+ *   Headings should be used on navigation menus and any list of links that
+ *   consistently appears on multiple pages. To make the heading invisible use
+ *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   removes it from screen readers and assistive technology. Headings allow
+ *   screen reader and keyboard only users to navigate to or skip the links.
+ *   See http://juicystudio.com/article/screen-readers-display-none.php and
+ *   http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @see classy_preprocess_links__media_library_menu()
+ * @see template_preprocess_links()
+ */
+#}
+{% set attributes = attributes.addClass('media-library-menu') %}
diff --git a/templates/media-library/media--media-library.html.twig b/templates/media-library/media--media-library.html.twig
new file mode 100644
index 0000000..e886354
--- /dev/null
+++ b/templates/media-library/media--media-library.html.twig
@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Theme override of a media item in the media library.
+ *
+ * This is used for media that the user can select from the grid of media
+ * items. It is not used for items that have already been selected in the
+ * corresponding field widget, or for items that have been previously selected
+ * before adding new media to the library.
+ *
+ * Available variables:
+ * - media: The entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - entity.getEntityTypeId() will return the entity type ID.
+ *   - entity.hasField('field_example') returns TRUE if the entity includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   Calling other methods, such as entity.delete(), will result in an exception.
+ *   See \Drupal\Core\Entity\EntityInterface for a full list of methods.
+ * - name: Name of the media.
+ * - content: Media content.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - attributes: HTML attributes for the containing element.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - url: Direct URL of the media.
+ * - preview_attributes: HTML attributes for the preview wrapper.
+ * - metadata_attributes: HTML attributes for the expandable metadata area.
+ * - status: Whether or not the Media is published.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+<article{{ attributes }}>
+  {% if content %}
+    <div{{ preview_attributes.addClass('media-library-item__preview js-media-library-item-preview') }}>
+      {{ content|without('name') }}
+    </div>
+    {% if not status %}
+      <div class="media-library-item__status">{{ "unpublished" | t }}</div>
+    {% endif %}
+    <div{{ metadata_attributes.addClass('media-library-item__attributes') }}>
+      <div class="media-library-item__name">
+        {{ name }}
+      </div>
+    </div>
+  {% endif %}
+</article>
diff --git a/templates/media-library/media-library-item--small.html.twig b/templates/media-library/media-library-item--small.html.twig
new file mode 100644
index 0000000..ba03858
--- /dev/null
+++ b/templates/media-library/media-library-item--small.html.twig
@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a media library item.
+ *
+ * This is used when displaying selected media items, either in the field
+ * widget or in the "Additional selected media" area when adding new
+ * media items in the media library modal dialog.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - content: The content of the media library item, plus any additional
+ *   fields or elements surrounding it.
+ *
+ * @see seven_preprocess_media_library_item__small()
+ * @see seven_preprocess_media_library_item__widget()
+ * @see template_preprocess_media_library_item()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'media-library-item',
+    'media-library-item--grid',
+    'media-library-item--small',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ content }}
+</div>
diff --git a/templates/media-library/media-library-item.html.twig b/templates/media-library/media-library-item.html.twig
new file mode 100644
index 0000000..297780e
--- /dev/null
+++ b/templates/media-library/media-library-item.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a media library item.
+ *
+ * This is used when displaying selected media items, either in the field
+ * widget or in the "Additional selected media" area when adding new
+ * media items in the media library modal dialog.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - content: The content of the media library item, plus any additional
+ *   fields or elements surrounding it.
+ *
+ * @see template_preprocess_media_library_item()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'media-library-item',
+    'media-library-item--grid',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ content }}
+</div>
diff --git a/templates/media-library/media-library-wrapper.html.twig b/templates/media-library/media-library-wrapper.html.twig
new file mode 100644
index 0000000..4d5458a
--- /dev/null
+++ b/templates/media-library/media-library-wrapper.html.twig
@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override of a container used to wrap the media library's modal dialog
+ * interface.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - menu: The menu of available media types to choose from.
+ * - content: The form to add new media items, followed by the grid or table of
+ *   existing media items to choose from.
+ *
+ * @see template_preprocess_media_library_wrapper()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes.addClass('media-library-wrapper') }}>
+  {{ menu }}
+  {{ content }}
+</div>
diff --git a/templates/views/views-view--media_library.html.twig b/templates/views/views-view--media_library.html.twig
new file mode 100644
index 0000000..b1d5331
--- /dev/null
+++ b/templates/views/views-view--media_library.html.twig
@@ -0,0 +1,97 @@
+{#
+/**
+ * @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,
+  ]
+%}
+{% if header.display_link_table %}
+{% endif %}
+<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/templates/views/views-view-unformatted--media-library.html.twig b/templates/views/views-view-unformatted--media-library.html.twig
new file mode 100644
index 0000000..4bc33e0
--- /dev/null
+++ b/templates/views/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>
diff --git a/templates/views/views-view.html.twig b/templates/views/views-view.html.twig
new file mode 100644
index 0000000..769a868
--- /dev/null
+++ b/templates/views/views-view.html.twig
@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Theme override for a main 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 header %}
+    <div class="view-header">
+      {{ header }}
+    </div>
+  {% endif %}
+  {% if exposed %}
+    <div class="view-filters">
+      {{ exposed }}
+    </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>