diff --git a/core/modules/system/src/SystemManager.php b/core/modules/system/src/SystemManager.php
index e5d3a18..4504f05 100644
--- a/core/modules/system/src/SystemManager.php
+++ b/core/modules/system/src/SystemManager.php
@@ -110,7 +110,7 @@ public function listRequirements() {
 
     // Check run-time requirements and status information.
     $requirements = $this->moduleHandler->invokeAll('requirements', array('runtime'));
-    usort($requirements, function($a, $b) {
+    uasort($requirements, function ($a, $b) {
       if (!isset($a['weight'])) {
         if (!isset($b['weight'])) {
           return strcasecmp($a['title'], $b['title']);
diff --git a/core/modules/system/src/Tests/System/CronRunTest.php b/core/modules/system/src/Tests/System/CronRunTest.php
index ec35b72..26a56a3 100644
--- a/core/modules/system/src/Tests/System/CronRunTest.php
+++ b/core/modules/system/src/Tests/System/CronRunTest.php
@@ -121,7 +121,7 @@ public function testManualCron() {
     $this->assertResponse(403);
 
     $this->drupalGet('admin/reports/status');
-    $this->clickLink(t('run cron manually'));
+    $this->clickLink(t('Run cron'));
     $this->assertResponse(200);
     $this->assertText(t('Cron ran successfully.'));
   }
diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index f9c49c7..16d605d 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -146,7 +146,7 @@ function template_preprocess_status_report(&$variables) {
     ),
   );
 
-  foreach ($variables['requirements'] as $i => $requirement) {
+  foreach ($variables['requirements'] as $key => $requirement) {
     // Always use the explicit requirement severity, if defined. Otherwise,
     // default to REQUIREMENT_OK in the installer to visually confirm that
     // installation requirements are met. And default to REQUIREMENT_INFO to
@@ -160,8 +160,8 @@ function template_preprocess_status_report(&$variables) {
     else {
       $severity = $severities[REQUIREMENT_INFO];
     }
-    $variables['requirements'][$i]['severity_title'] = $severity['title'];
-    $variables['requirements'][$i]['severity_status'] = $severity['status'];
+    $variables['requirements'][$key]['severity_title'] = $severity['title'];
+    $variables['requirements'][$key]['severity_status'] = $severity['status'];
   }
 }
 
diff --git a/core/modules/system/system.install b/core/modules/system/system.install
index 8ab78ff..f235359 100644
--- a/core/modules/system/system.install
+++ b/core/modules/system/system.install
@@ -497,14 +497,19 @@ function system_requirements($phase) {
         ],
       ];
     }
-    $cron_url = \Drupal::url('system.cron', ['key' => \Drupal::state()->get('system.cron_key'), ['absolute' => TRUE]]);
     $requirements['cron']['description'][] = [
       [
-        '#markup' => t('You can <a href=":cron">run cron manually</a>.', [':cron' => \Drupal::url('system.run_cron')]),
+        '#type' => 'link',
+        '#prefix' => '(',
+        '#title' => t('more information'),
+        '#suffix' => ')',
+        '#url' => Url::fromRoute('system.cron_settings'),
       ],
       [
-        '#prefix' => '<br />',
-        '#markup' => t('To run cron from outside the site, go to <a href=":url">@cron</a>', [':url' => $cron_url, '@cron' => $cron_url]),
+        '#prefix' => '<br>',
+        '#type' => 'link',
+        '#title' => t('Run cron'),
+        '#url' => Url::fromRoute('system.run_cron'),
       ],
     ];
   }
diff --git a/core/themes/seven/css/components/colors.css b/core/themes/seven/css/components/colors.css
index 54358d8..a602adc 100644
--- a/core/themes/seven/css/components/colors.css
+++ b/core/themes/seven/css/components/colors.css
@@ -3,14 +3,11 @@
  */
 .color-success {
   color: #325e1c;
-  background-color: #f3faef;
 }
 .color-warning {
   color: #734c00;
-  background-color: #fdf8ed;
 }
 .color-error {
   color: #a51b00;
-  background-color: #fcf4f2;
 }
 
diff --git a/core/themes/seven/css/components/system-status-report.css b/core/themes/seven/css/components/system-status-report.css
index aeac1d3..c5f209e 100644
--- a/core/themes/seven/css/components/system-status-report.css
+++ b/core/themes/seven/css/components/system-status-report.css
@@ -3,13 +3,259 @@
  * Seven styles for the System Status Report.
  */
 
-.system-status-report__entry {
+.system-status-general-info {
+  border: 1px solid #ccc;
+}
+.system-status-general-info__header {
+  background-color: #f5f5f2;
+  padding: 10px;
+  margin: 0;
+  overflow: hidden;
+}
+
+.system-status-general-info__item {
   border-top: 1px solid #ccc;
-  border-bottom: inherit;
+  padding: 10px 10px 20px;
+  box-sizing: border-box;
+  overflow-x: auto;
+}
+
+.system-status-general-info__item-icon {
+  display: inline-block;
+  height: 45px;
+  width: 45px;
+  vertical-align: top;
+}
+.system-status-general-info__item-icon:before {
+  content: "";
+  background-size: 35px;
+  background-position: 50% center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
-.system-status-report__entry:first-child {
-  border-top: 1px solid #bebfb9;
+.system-status-general-info__item-icon--d8:before {
+  background-image: url(../../../stable/images/core/icons/cccccc/d8-logo.svg);
+}
+.system-status-general-info__item-icon--clock:before {
+  background-image: url(../../../stable/images/core/icons/cccccc/clock.svg);
+}
+.system-status-general-info__item-icon--server:before {
+  background-image: url(../../../stable/images/core/icons/cccccc/server.svg);
+}
+.system-status-general-info__item-icon--php:before {
+  background-image: url(../../../stable/images/core/icons/cccccc/php-logo.svg);
+  background-size: 45px;
+}
+.system-status-general-info__item-icon--database:before {
+  background-image: url(../../../stable/images/core/icons/cccccc/database.svg);
+  background-size: 30px;
+}
+
+.system-status-general-info__item-details {
+  box-sizing: border-box;
+  display: inline-block;
+  width: calc(100% - 60px);
+  padding-left: 10px; /* LTR */
+  position: relative;
+}
+[dir="rtl"] .system-status-general-info__item-details {
+  padding-right: 10px;
+  padding-left: 0;
+}
+.system-status-general-info__item-title {
+  margin-bottom: 0;
+}
+.system-status-general-info__run-cron {
+  position: inherit;
+  margin-top: .5em;
+}
+@media screen and (min-width: 48em) {
+  .system-status-general-info__items {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .system-status-general-info__item {
+    flex: 1;
+    flex-basis: 33%;
+    width: 33%;
+  }
+  .system-status-general-info__item:nth-child(2) {
+    flex: 2;
+    flex-basis: 66%;
+  }
+  .system-status-general-info__item:nth-child(2),
+  .system-status-general-info__item:nth-child(4),
+  .system-status-general-info__item:nth-child(5) {
+    border-left: 1px solid #ccc; /* LTR */
+  }
+  [dir="rtl"] .system-status-general-info__item:nth-child(1),
+  [dir="rtl"] .system-status-general-info__item:nth-child(3) {
+    border-left: 1px solid #ccc;
+  }
+  [dir="rtl"] .system-status-general-info__item:nth-child(2),
+  [dir="rtl"] .system-status-general-info__item:nth-child(5) {
+    border-left: 0;
+  }
+  .system-status-general-info__run-cron {
+    position: absolute;
+    top: 1em;
+    right: 1em; /* LTR */
+    margin-top: 0;
+  }
+  [dir="rtl"] .system-status-general-info__run-cron {
+    left: 1em;
+    right: auto;
+  }
+}
+
+@media screen and (min-width: 48em) and (max-width: 60em) {
+  .toolbar-tray-open.toolbar-vertical .system-status-general-info__run-cron {
+    position: relative;
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (min-width: 60em) {
+  .system-status-general-info__item-icon {
+    width: 55px;
+    height: 55px;
+  }
+  .system-status-general-info__item-icon:before {
+    background-size: 35px;
+  }
+  .system-status-general-info__item-icon--php:before {
+    background-size: 55px;
+  }
+}
+
+.system-status-report__entry {
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 0;
 }
-.system-status-report__entry:last-child {
+.system-status-report__entry:last-of-type {
   border-bottom: 1px solid #bebfb9;
 }
+/* Account for native and poly-filled details element */
+.system-status-report__status-title {
+  position: relative;
+  padding: 1em 1em 1em 3em; /* LTR */
+  box-sizing: border-box;
+}
+.system-status-report__status-title .details-title {
+  color: inherit;
+  text-transform: none;
+}
+html:not(.details) .system-status-report__status-title {
+  padding-left: 0;
+}
+.system-status-report__status-title .details-title {
+  padding-left: 3em; /* LTR */
+}
+[dir="rtl"] .system-status-report__status-title .details-title {
+  padding-right: 3em;
+  padding-left: 0;
+}
+[dir="rtl"].details  .system-status-report__status-title {
+  padding: 1em 3em 1em 1em;
+}
+.collapse-processed > .system-status-report__status-title:before {
+  float: right; /* LTR */
+}
+.system-status-report__status-title::-webkit-details-marker {
+  float: right; /* LTR */
+}
+[dir="rtl"] .collapse-processed > .system-status-report__status-title:before {
+  float: left;
+}
+[dir="rtl"] .system-status-report__status-title::-webkit-details-marker {
+  float: left;
+}
+
+/* Make poly-filled details and summary elements behave correctly. */
+.system-status-report summary:first-child ~ * {
+  display: none;
+}
+.system-status-report details[open] > *,
+.system-status-report details > summary:first-child {
+  display: block;
+}
+
+.system-status-report__status-title .details-title:before,
+.details .system-status-report__status-icon:before {
+  content: "";
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: top center;
+  height: 16px;
+  width: 16px;
+  position: absolute;
+  left: 10px; /* LTR */
+  top: 1em;
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px; /* LTR */
+}
+[dir="rtl"] .system-status-report__status-title .details-title:before,
+[dir="rtl"].details .system-status-report__status-title:before {
+  left: auto;
+  right: 10px;
+  margin-right: 0;
+}
+.system-status-report__status-icon--error .details-title:before,
+.details .system-status-report__status-icon--error:before {
+  background-image: url(../../../stable/images/core/icons/e32700/error.svg);
+}
+.system-status-report__status-icon--warning .details-title:before,
+.details .system-status-report__status-icon--warning:before {
+  background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
+}
+
+.system-status-report__entry__value {
+  box-sizing: border-box;
+  padding: 0 1em 1em 3em; /* LTR */
+}
+[dir="rtl"] .system-status-report__entry__value {
+  padding-right: 3em;
+  padding-left: 1em;
+}
+
+@media screen and (max-width: 48em) {
+  .system-status-report {
+    word-wrap: break-word;
+  }
+}
+
+@media screen and (min-width: 48em) {
+  .system-status-report__entry::after {
+    display: table;
+    content: '';
+    clear: both;
+  }
+  .system-status-report details > summary:first-child {
+    width: 18rem;
+    float: left; /* LTR */
+  }
+  [dir="rtl"] .system-status-report details > summary:first-child {
+    float: right;
+  }
+  .collapse-processed > .system-status-report__status-title:before {
+    display: none;
+  }
+  .system-status-report__status-title::-webkit-details-marker {
+    display: none;
+  }
+  .system-status-report__entry__value {
+    width: calc(100% - 23em);
+    float: right;
+    display: block;
+    padding-left: 0; /* LTR */
+    padding-top: 1em;
+  }
+  [dir="rtl"] .system-status-report__entry__value {
+    padding-left: 0;
+    padding-right: 3em;
+  }
+}
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
index 913e21a..4fbafba 100644
--- a/core/themes/seven/css/components/tables.css
+++ b/core/themes/seven/css/components/tables.css
@@ -39,15 +39,6 @@ tbody tr:focus {
   background: #f7fcff;
 }
 
-/* See colors.css */
-tbody tr.color-warning:hover,
-tbody tr.color-warning:focus {
-  background: #fdf8ed;
-}
-tbody tr.color-error:hover,
-tbody tr.color-error:focus {
-  background: #fcf4f2;
-}
 td,
 th {
   vertical-align: middle;
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 369515e..4d8824a 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -22,6 +22,10 @@ core: 8.x
 libraries:
  - seven/global-styling
 libraries-override:
+  system/admin:
+    css:
+      theme:
+        /core/themes/stable/css/system/system.admin.css: css/components/system.admin.css
   core/drupal.vertical-tabs:
     css:
       component:
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index e68b75a..d78a103 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -28,6 +28,8 @@ global-styling:
       css/components/search-admin-settings.css: {}
       css/components/tablesort-indicator.css: {}
       css/components/system-status-report.css: {}
+      css/components/system-status-report-counters.css: {}
+      css/components/system-status-counter.css: {}
       css/components/tabs.css: {}
       css/components/views-ui.css: {}
     layout:
@@ -75,6 +77,16 @@ drupal.nav-tabs:
     - core/jquery.once
     - core/drupal.debounce
 
+drupal.responsive-detail:
+  version: VERSION
+  js:
+    js/responsive-details.js: {}
+  dependencies:
+    - core/matchmedia
+    - core/jquery
+    - core/jquery.once
+    - core/drupal.debounce
+
 vertical-tabs:
   version: VERSION
   css:
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 5ace6b8..6dd5e32 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -145,6 +145,97 @@ function seven_preprocess_maintenance_page(&$variables) {
 }
 
 /**
+ * Implements hook_preprocess_status_report().
+ */
+function seven_preprocess_status_report(&$variables) {
+
+  $severities = [
+    REQUIREMENT_INFO => [
+      'title' => t('Info'),
+      'status' => 'info',
+    ],
+    REQUIREMENT_OK => [
+      'title' => t('OK'),
+      'status' => 'ok',
+    ],
+    REQUIREMENT_WARNING => [
+      'title' => t('Warning'),
+      'status' => 'warning',
+    ],
+    REQUIREMENT_ERROR => [
+      'title' => t('Error'),
+      'status' => 'error',
+    ],
+  ];
+
+  // Count number of items with different severity for summary.
+  $counters = ['error', 'warning', 'info'];
+  foreach ($counters as $counter) {
+    $variables[$counter] = 0;
+  }
+
+  $grouped_requirements = [];
+
+  // Loop through requirements and pull out items.
+  foreach ($variables['requirements'] as $key => &$requirement) {
+    switch ($key) {
+      case 'cron':
+        foreach ($requirement['description'] as &$description_elements) {
+          foreach ($description_elements as &$description_element) {
+            if (isset($description_element['#url']) && $description_element['#url']->getRouteName() == 'system.run_cron') {
+              $description_element['#attributes']['class'][] = 'button';
+              $description_element['#attributes']['class'][] = 'button--small';
+              $description_element['#attributes']['class'][] = 'button--primary';
+              $description_element['#attributes']['class'][] = 'system-status-general-info__run-cron';
+            }
+          }
+        }
+        $variables[$key] = $requirement;
+        unset($variables['requirements'][$key]);
+        break;
+
+      case 'drupal':
+      case 'webserver':
+      case 'database_system':
+      case 'database_system_version':
+      case 'php':
+      case 'php_memory_limit':
+        $variables[$key] = $requirement;
+        unset($variables['requirements'][$key]);
+        break;
+    }
+
+    if (isset($requirement['severity'])) {
+      $severity = $severities[(int) $requirement['severity']];
+    }
+    elseif (defined('MAINTENANCE_MODE') && MAINTENANCE_MODE == 'install') {
+      $severity = $severities[REQUIREMENT_OK];
+    }
+    else {
+      $severity = $severities[REQUIREMENT_INFO];
+    }
+    if (in_array($severity['status'], $counters)) {
+      $variables[$severity['status']]++;
+    }
+
+    // If the requirement is still set, add it to its group.
+    if (isset($variables['requirements'][$key])) {
+      $grouped_requirements[$severity['status']]['title'] = $severity['title'];
+      $grouped_requirements[$severity['status']]['type'] = $severity['status'];
+      $grouped_requirements[$severity['status']]['items'][] = $requirement;
+    }
+  }
+  // Order the grouped requirements by the counter keys. Add 'ok' to put that
+  // status on the bottom.
+  $counters[] = 'ok';
+  $counter_keys = array_flip($counters);
+  uksort($grouped_requirements, function ($a, $b) use ($counter_keys) {
+    return $counter_keys[$a] > $counter_keys[$b];
+  });
+  $variables['grouped_requirements'] = $grouped_requirements;
+}
+
+/**
  * Implements hook_form_BASE_FORM_ID_alter() for \Drupal\node\NodeForm.
  *
  * Changes vertical tabs to container and adds meta information.