diff --git a/core/modules/update/css/update.admin.theme.css b/core/modules/update/css/update.admin.theme.css
index 19b4af2a25..3891e864fc 100644
--- a/core/modules/update/css/update.admin.theme.css
+++ b/core/modules/update/css/update.admin.theme.css
@@ -8,12 +8,10 @@
   font-size: 110%;
 }
 .project-update__status {
-  text-align: right; /* LTR */
   float: right; /* LTR */
   font-size: 110%;
 }
 [dir="rtl"] .project-update__status {
-  text-align: left;
   float: left;
 }
 .project-update__status--not-supported {
@@ -34,9 +32,6 @@
   padding-left: 0;
   padding-right: 0.5em;
 }
-.project-update__status-icon img {
-  vertical-align: top;
-}
 .project-update__details {
   padding: 1em 1em 0.25em 1em;
 }
diff --git a/core/modules/update/templates/update-report.html.twig b/core/modules/update/templates/update-report.html.twig
index 25ccc45238..ae121cc3b4 100644
--- a/core/modules/update/templates/update-report.html.twig
+++ b/core/modules/update/templates/update-report.html.twig
@@ -19,7 +19,7 @@
 
 {% for project_type in project_types %}
   <h3>{{ project_type.label }}</h3>
-  {{ project_type.content }}
+  {{ project_type.table }}
 {% else %}
   <p>{{ no_updates_message }}</p>
 {% endfor %}
diff --git a/core/modules/update/templates/update-version.html.twig b/core/modules/update/templates/update-version.html.twig
index 95ed1bd5a9..9a683e05bb 100644
--- a/core/modules/update/templates/update-version.html.twig
+++ b/core/modules/update/templates/update-version.html.twig
@@ -11,7 +11,8 @@
  *   - date: The date of the release.
  *   - download_link: The URL for the downloadable file.
  *   - release_link: The URL for the release notes.
- * - type: The type of the version, possible values are 'recommended', 'security', 'latest', 'dev', 'also', 'installed'.
+ * - version_type: The type of the version, possible values are 'recommended', 'security', 'latest', 'dev', 'also',
+ *  'installed'.
  *
  * @ingroup themeable
  */
@@ -28,7 +29,7 @@
         {% endtrans %}
       {% endif %}
     </div>
-    {% if type != 'installed' %}
+    {% if version_type != 'installed' %}
       <div class="layout-column layout-column--quarter">
         <ul class="project-update__version-links">
           <li class="project-update__download-link">
diff --git a/core/modules/update/update.module b/core/modules/update/update.module
index 9fbf63907a..07e23b4561 100644
--- a/core/modules/update/update.module
+++ b/core/modules/update/update.module
@@ -246,7 +246,12 @@ function update_theme() {
     // We are using template instead of '#type' => 'table' here to keep markup
     // out of preprocess and allow for easier changes to markup.
     'update_version' => [
-      'variables' => ['version' => NULL, 'title' => NULL, 'attributes' => [], 'type' => NULL],
+      'variables' => [
+        'version' => NULL,
+        'title' => NULL,
+        'attributes' => [],
+        'version_type' => NULL,
+      ],
       'file' => 'update.report.inc',
     ],
   ];
diff --git a/core/modules/update/update.report.inc b/core/modules/update/update.report.inc
index cd262b2a6c..71839ae383 100644
--- a/core/modules/update/update.report.inc
+++ b/core/modules/update/update.report.inc
@@ -58,6 +58,7 @@ function template_preprocess_update_report(&$variables) {
         $class = 'color-error';
         break;
 
+      case UpdateFetcherInterface::NOT_CHECKED:
       case UpdateManagerInterface::NOT_CURRENT:
       default:
         $class = 'color-warning';
@@ -89,7 +90,7 @@ function template_preprocess_update_report(&$variables) {
       ksort($projects[$type_name]);
       $variables['project_types'][] = [
         'label' => $type_label,
-        'content' => $projects[$type_name],
+        'table' => $projects[$type_name],
       ];
     }
   }
@@ -122,7 +123,6 @@ function template_preprocess_update_project_status(&$variables) {
   $versions_inner = [];
   $security_class = [];
   $version_class = [];
-
   if (isset($project['recommended'])) {
     if ($project['status'] != UPDATE_CURRENT || $project['existing_version'] !== $project['recommended']) {
 
@@ -157,7 +157,7 @@ function template_preprocess_update_project_status(&$variables) {
           '#version' => $project['releases'][$project['recommended']],
           '#title' => t('Recommended update:'),
           '#attributes' => ['class' => $version_class],
-          '#type' => 'recommended',
+          '#version_type' => 'recommended',
         ];
       }
 
@@ -170,7 +170,7 @@ function template_preprocess_update_project_status(&$variables) {
             '#version' => $security_update,
             '#title' => t('Security update:'),
             '#attributes' => ['class' => $security_class],
-            '#type' => 'security',
+            '#version_type' => 'security',
           ];
         }
       }
@@ -182,7 +182,7 @@ function template_preprocess_update_project_status(&$variables) {
         '#version' => $project['releases'][$project['latest_version']],
         '#title' => t('Latest version:'),
         '#attributes' => ['class' => ['version-latest']],
-        '#type' => 'latest',
+        '#version_type' => 'latest',
       ];
     }
     if ($project['install_type'] == 'dev'
@@ -194,7 +194,7 @@ function template_preprocess_update_project_status(&$variables) {
         '#version' => $project['releases'][$project['dev_version']],
         '#title' => t('Development version:'),
         '#attributes' => ['class' => ['version-latest']],
-        '#type' => 'dev',
+        '#version_type' => 'dev',
       ];
     }
   }
@@ -206,7 +206,7 @@ function template_preprocess_update_project_status(&$variables) {
         '#version' => $project['releases'][$also],
         '#title' => t('Also available:'),
         '#attributes' => ['class' => ['version-also-available']],
-        '#type' => 'also',
+        '#version_type' => 'also',
       ];
     }
   }
@@ -218,7 +218,7 @@ function template_preprocess_update_project_status(&$variables) {
       '#version' => $project['releases'][$project['version_normalized']],
       '#title' => t('Installed version:'),
       '#attributes' => ['class' => ['project-update__version--installed']],
-      '#type' => 'installed',
+      '#version_type' => 'installed',
     ];
   }
 
diff --git a/core/themes/seven/css/components/update.admin.theme.css b/core/themes/seven/css/components/update.admin.theme.css
new file mode 100644
index 0000000000..3891e864fc
--- /dev/null
+++ b/core/themes/seven/css/components/update.admin.theme.css
@@ -0,0 +1,66 @@
+/**
+ * @file
+ * Styles used by the Update Manager module.
+ */
+
+.project-update__title {
+  font-weight: bold;
+  font-size: 110%;
+}
+.project-update__status {
+  float: right; /* LTR */
+  font-size: 110%;
+}
+[dir="rtl"] .project-update__status {
+  float: left;
+}
+.project-update__status--not-supported {
+  float: left; /* LTR */
+}
+[dir="rtl"] .project-update__status--not-supported {
+  float: right;
+}
+.project-update__status--security-error {
+  font-weight: bold;
+  color: #970f00;
+}
+
+.project-update__status-icon {
+  padding-left: 0.5em; /* LTR */
+}
+[dir="rtl"] .project-update__status-icon {
+  padding-left: 0;
+  padding-right: 0.5em;
+}
+.project-update__details {
+  padding: 1em 1em 0.25em 1em;
+}
+
+.project-update__version {
+  border-bottom: 1px solid #bfbfbf;
+  padding: 0.5em 0;
+}
+.project-update__version--installed {
+  border-bottom: none;
+}
+.project-update__version-date {
+  white-space: nowrap;
+}
+.project-update__version-details {
+  padding-right: 0.5em; /* LTR */
+}
+[dir="rtl"] .project-update__version-details {
+  padding-left: 0.5em;
+  direction: ltr; /* Version numbers should always be LTR. */
+}
+.project-update__version-links {
+  text-align: right; /* LTR */
+  list-style-type: none;
+}
+[dir="rtl"] .project-update__version-links {
+  text-align: left;
+}
+.project-update__version--recommended-strong .project-update__version-title,
+.version-security .project-update__version-title {
+  font-weight: bold;
+}
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 3f0e43c025..559a06160c 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -42,6 +42,8 @@ libraries-override:
         assets/vendor/jquery.ui/themes/base/dialog.css: false
   classy/dialog:
     seven/seven.drupal.dialog
+  update/drupal.update.admin:
+    seven/drupal.update.admin
 libraries-extend:
   core/ckeditor:
     - seven/ckeditor-dialog
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 508c0fe497..de1d1e048d 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -93,6 +93,12 @@ drupal.responsive-detail:
     - core/jquery.once
     - core/collapse
 
+drupal.update.admin:
+  version: VERSION
+  css:
+    theme:
+      css/components/update.admin.theme.css: {}
+
 vertical-tabs:
   version: VERSION
   css:
diff --git a/core/themes/seven/templates/update-project-status.html.twig b/core/themes/seven/templates/update-project-status.html.twig
new file mode 100644
index 0000000000..894379e785
--- /dev/null
+++ b/core/themes/seven/templates/update-project-status.html.twig
@@ -0,0 +1,103 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the project status report.
+ *
+ * Available variables:
+ * - title: The project title.
+ * - url: The project url.
+ * - status: The project status.
+ *   - label: The project status label.
+ *   - attributes: HTML attributes for the project status.
+ *   - reason: The reason you should update the project.
+ *   - icon: The project status version indicator icon.
+ * - existing_version: The version of the installed project.
+ * - versions: The available versions of the project.
+ * - install_type: The type of project (e.g., dev).
+ * - datestamp: The date/time of a project version's release.
+ * - extras: HTML attributes and additional information about the project.
+ *   - attributes: HTML attributes for the extra item.
+ *   - label: The label for an extra item.
+ *   - data: The data about an extra item.
+ * - includes: The projects within the project.
+ * - disabled: The currently disabled projects in the project.
+ *
+ * @see template_preprocess_update_project_status()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set status_classes = [
+    project.status == constant('UPDATE_NOT_SECURE') ? 'project-update__status--security-error',
+    project.status == constant('UPDATE_REVOKED') ? 'project-update__status--revoked',
+    project.status == constant('UPDATE_NOT_SUPPORTED') ? 'project-update__status--not-supported',
+    project.status == constant('UPDATE_NOT_CURRENT') ? 'project-update__status--not-current',
+    project.status == constant('UPDATE_CURRENT') ? 'project-update__status--current',
+  ]
+%}
+<div{{ status.attributes.addClass('project-update__status', status_classes) }}>
+  {%- if status.label -%}
+    <span>{{ status.label }}</span>
+  {%- else -%}
+    {{ status.reason }}
+  {%- endif %}
+  <span class="project-update__status-icon">
+    {{ status.icon }}
+  </span>
+</div>
+
+<div class="project-update__title clearfix">
+  {%- if url -%}
+    <a href="{{ url }}">{{ title }}</a>
+  {%- else -%}
+    {{ title }}
+  {%- endif %}
+</div>
+
+{%
+  set extra_classes = [
+    project.status == constant('UPDATE_NOT_SECURE') ? 'project-not-secure',
+    project.status == constant('UPDATE_REVOKED') ? 'project-revoked',
+    project.status == constant('UPDATE_NOT_SUPPORTED') ? 'project-not-supported',
+  ]
+%}
+<div class="project-updates__details">
+  {% if extras %}
+    <div class="extra">
+      {% for extra in extras %}
+        <div{{ extra.attributes.addClass(extra_classes) }}>
+          {{ extra.label }}: {{ extra.data }}
+        </div>
+      {% endfor %}
+    </div>
+  {% endif %}
+  {% set includes = includes|join(', ') %}
+</div>
+
+{% if versions %}
+  {% for version in versions %}
+    {{ version }}
+  {% endfor %}
+{% endif %}
+
+{% if disabled %}
+  {{ 'Includes:'|t }}
+  <ul>
+    <li>
+      {% trans %}
+        Enabled: {{ includes|placeholder }}
+      {% endtrans %}
+    </li>
+    <li>
+      {% set disabled = disabled|join(', ') %}
+      {% trans %}
+        Disabled: {{ disabled|placeholder }}
+      {% endtrans %}
+    </li>
+  </ul>
+{% else %}
+  {% trans %}
+    Includes: {{ includes|placeholder }}
+  {% endtrans %}
+{% endif %}
diff --git a/core/themes/seven/templates/update-version.html.twig b/core/themes/seven/templates/update-version.html.twig
new file mode 100644
index 0000000000..9a683e05bb
--- /dev/null
+++ b/core/themes/seven/templates/update-version.html.twig
@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the version display of a project.
+ *
+ * Available variables:
+ * - attributes: HTML attributes suitable for a container element.
+ * - title: The title of the project.
+ * - version:  A list of data about the latest released version, containing:
+ *   - version: The version number.
+ *   - date: The date of the release.
+ *   - download_link: The URL for the downloadable file.
+ *   - release_link: The URL for the release notes.
+ * - version_type: The type of the version, possible values are 'recommended', 'security', 'latest', 'dev', 'also',
+ *  'installed'.
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
+  <div class="clearfix">
+    <div class="project-update__version-title">{{ title }}</div>
+    <div class="project-update__version-details layout-column layout-column--three-quarter">
+      <a href="{{ version.release_link }}">{{ version.version }}</a>
+      <span class="project-update__version-date">({{ version.date|date('Y-M-d') }})</span>
+      {% if version.security_covered %}
+        {% trans %}
+          <small>Covered by Drupal’s <a href="https://www.drupal.org/security-advisory-policy">security advisory policy</a></small>
+        {% endtrans %}
+      {% endif %}
+    </div>
+    {% if version_type != 'installed' %}
+      <div class="layout-column layout-column--quarter">
+        <ul class="project-update__version-links">
+          <li class="project-update__download-link">
+            <a href="{{ version.release_link }}">{{ 'Download'|t }}</a>
+          </li>
+        </ul>
+      </div>
+    {% endif %}
+  </div>
+</div>
diff --git a/core/themes/stable/css/update/update.admin.theme.css b/core/themes/stable/css/update/update.admin.theme.css
index 19b4af2a25..abf0a88243 100644
--- a/core/themes/stable/css/update/update.admin.theme.css
+++ b/core/themes/stable/css/update/update.admin.theme.css
@@ -8,12 +8,10 @@
   font-size: 110%;
 }
 .project-update__status {
-  text-align: right; /* LTR */
   float: right; /* LTR */
   font-size: 110%;
 }
 [dir="rtl"] .project-update__status {
-  text-align: left;
   float: left;
 }
 .project-update__status--not-supported {
@@ -34,19 +32,12 @@
   padding-left: 0;
   padding-right: 0.5em;
 }
-.project-update__status-icon img {
-  vertical-align: top;
-}
 .project-update__details {
   padding: 1em 1em 0.25em 1em;
 }
 
 .project-update__version {
-  border-bottom: 1px solid #bfbfbf;
-  padding: 0.5em 0;
-}
-.project-update__version--installed {
-  border-bottom: none;
+  padding: 1em 0;
 }
 .project-update__version-date {
   white-space: nowrap;
@@ -60,12 +51,13 @@
 }
 .project-update__version-links {
   text-align: right; /* LTR */
+  padding-right: 1em; /* LTR */
   list-style-type: none;
 }
 [dir="rtl"] .project-update__version-links {
   text-align: left;
+  padding-left: 1em;
 }
-.project-update__version--recommended-strong .project-update__version-title,
-.version-security .project-update__version-title {
+.project-update__version--recommended-strong .project-update__version-title {
   font-weight: bold;
 }
diff --git a/core/themes/stable/templates/admin/update-project-status.html.twig b/core/themes/stable/templates/admin/update-project-status.html.twig
index 2c3308afd0..5a6d2ecea7 100644
--- a/core/themes/stable/templates/admin/update-project-status.html.twig
+++ b/core/themes/stable/templates/admin/update-project-status.html.twig
@@ -45,14 +45,24 @@
   </span>
 </div>
 
-<div class="project-update__title clearfix">
+<div class="project-update__title">
   {%- if url -%}
     <a href="{{ url }}">{{ title }}</a>
   {%- else -%}
     {{ title }}
   {%- endif %}
+  {{ existing_version }}
+  {% if install_type == 'dev' and datestamp %}
+    <span class="project-update__version-date">({{ datestamp }})</span>
+  {% endif %}
 </div>
 
+{% if versions %}
+  {% for version in versions %}
+    {{ version }}
+  {% endfor %}
+{% endif %}
+
 {%
   set extra_classes = [
     project.status == constant('UPDATE_NOT_SECURE') ? 'project-not-secure',
@@ -71,31 +81,24 @@
     </div>
   {% endif %}
   {% set includes = includes|join(', ') %}
+  {% if disabled %}
+    {{ 'Includes:'|t }}
+    <ul>
+      <li>
+        {% trans %}
+          Enabled: {{ includes|placeholder }}
+        {% endtrans %}
+      </li>
+      <li>
+        {% set disabled = disabled|join(', ') %}
+        {% trans %}
+          Disabled: {{ disabled|placeholder }}
+        {% endtrans %}
+      </li>
+    </ul>
+  {% else %}
+    {% trans %}
+      Includes: {{ includes|placeholder }}
+    {% endtrans %}
+  {% endif %}
 </div>
-
-{% if versions %}
-  {% for version in versions %}
-    {{ version }}
-  {% endfor %}
-{% endif %}
-
-{% if disabled %}
-  {{ 'Includes:'|t }}
-  <ul>
-    <li>
-      {% trans %}
-        Enabled: {{ includes|placeholder }}
-      {% endtrans %}
-    </li>
-    <li>
-      {% set disabled = disabled|join(', ') %}
-      {% trans %}
-        Disabled: {{ disabled|placeholder }}
-      {% endtrans %}
-    </li>
-  </ul>
-{% else %}
-  {% trans %}
-    Includes: {{ includes|placeholder }}
-  {% endtrans %}
-{% endif %}
diff --git a/core/themes/stable/templates/admin/update-report.html.twig b/core/themes/stable/templates/admin/update-report.html.twig
index 648d31ea98..9efebc06ae 100644
--- a/core/themes/stable/templates/admin/update-report.html.twig
+++ b/core/themes/stable/templates/admin/update-report.html.twig
@@ -17,7 +17,7 @@
 
 {% for project_type in project_types %}
   <h3>{{ project_type.label }}</h3>
-  {{ project_type.content }}
+  {{ project_type.table }}
 {% else %}
   <p>{{ no_updates_message }}</p>
 {% endfor %}
diff --git a/core/themes/stable/templates/admin/update-version.html.twig b/core/themes/stable/templates/admin/update-version.html.twig
index d8c2c61821..6c23584a68 100644
--- a/core/themes/stable/templates/admin/update-version.html.twig
+++ b/core/themes/stable/templates/admin/update-version.html.twig
@@ -11,29 +11,24 @@
  *   - date: The date of the release.
  *   - download_link: The URL for the downloadable file.
  *   - release_link: The URL for the release notes.
- * - type: The type of the version, possible values are 'recommended', 'security', 'latest', 'dev', 'also', 'installed'.
  */
 #}
 <div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
   <div class="clearfix">
-    <div class="project-update__version-title">{{ title }}</div>
-    <div class="project-update__version-details layout-column layout-column--three-quarter">
+    <div class="project-update__version-title layout-column layout-column--quarter">{{ title }}</div>
+    <div class="project-update__version-details layout-column layout-column--quarter">
       <a href="{{ version.release_link }}">{{ version.version }}</a>
       <span class="project-update__version-date">({{ version.date|date('Y-M-d') }})</span>
-      {% if version.security_covered %}
-        {% trans %}
-          <small>Covered by Drupal’s <a href="https://www.drupal.org/security-advisory-policy">security advisory policy</a></small>
-        {% endtrans %}
-      {% endif %}
     </div>
-    {% if type != 'installed' %}
-      <div class="layout-column layout-column--quarter">
-        <ul class="project-update__version-links">
-          <li class="project-update__download-link">
-            <a href="{{ version.release_link }}">{{ 'Download'|t }}</a>
-          </li>
-        </ul>
-      </div>
-    {% endif %}
+    <div class="layout-column layout-column--half">
+      <ul class="project-update__version-links">
+        <li class="project-update__download-link">
+          <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
+        </li>
+        <li class="project-update__release-notes-link">
+          <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>