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-counter.css b/core/themes/seven/css/components/system-status-counter.css
new file mode 100644
index 0000000..89fdef3
--- /dev/null
+++ b/core/themes/seven/css/components/system-status-counter.css
@@ -0,0 +1,70 @@
+/**
+ * @file
+ * Styles for the system status counter component.
+ */
+
+.system-status-counter {
+  border: 1px solid #e6e4df;
+  border-radius: 5px;
+  height: 85px;
+  vertical-align: middle;
+  line-height: 85px;
+  font-size: 20px;
+  font-weight: bold;
+  display: inline-block;
+  width: 100%;
+}
+
+.system-status-counter__status-title {
+  position: relative;
+  vertical-align: top;
+  width: 25%;
+  padding: 10px 6px;
+  box-sizing: border-box;
+  font-weight: normal;
+}
+
+.system-status-counter__status-icon {
+  display: inline-block;
+  height: 85px;
+  border-right: 1px solid #e6e4df; /* LTR */
+  border-left: 0; /* LTR */
+}
+[dir="rtl"] .system-status-counter__status-icon {
+  border-right: 0;
+  border-left: 1px solid #e6e4df;
+}
+.system-status-counter__status-icon:before {
+  content: "";
+  background-size: 35px;
+  background-position: 50% center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  display: block;
+  float: left; /* LTR */
+}
+[dir="rtl"] .system-status-counter__status-icon:before  {
+  float: right;
+}
+.system-status-counter__status-icon:before {
+  margin-right: 10px; /* LTR */
+}
+[dir="rtl"] .system-status-counter__status-icon:before {
+  margin-left: 10px;
+}
+.system-status-counter__status-icon--error:before {
+  background-image: url(../../../stable/images/core/icons/e32700/error.svg);
+}
+.system-status-counter__status-icon--warning:before {
+  background-image: url(../../../stable/images/core/icons/e29700/warning.svg);
+}
+.system-status-counter__status-icon--checked:before {
+  background-image: url(../../../stable/images/core/icons/73b355/check.svg);
+}
+
+.system-status-counter__details {
+  display: inline-block;
+  padding: 0 5px;
+  height: 85px;
+}
diff --git a/core/themes/seven/css/components/system-status-report-counters.css b/core/themes/seven/css/components/system-status-report-counters.css
new file mode 100644
index 0000000..6826a53
--- /dev/null
+++ b/core/themes/seven/css/components/system-status-report-counters.css
@@ -0,0 +1,31 @@
+/**
+ * @file
+ * Styles for the system status report counters.
+ */
+
+.system-status-report-counters {
+  display: flex;
+  justify-content: space-between;
+}
+
+.system-status-report-counters__item {
+  margin: 10px 0 20px 0;
+  width: 100%;
+}
+.system-status-report-counters__item--half-width {
+  width: 49%;
+}
+.system-status-report-counters__item--third-width {
+  width: 32%;
+}
+
+@media screen and (max-width: 48em) {
+  .system-status-report-counters {
+    display: block;
+  }
+  .system-status-report-counters__item {
+    margin: 10px 0;
+    width: 100%;
+  }
+}
+
diff --git a/core/themes/seven/css/components/system-status-report.css b/core/themes/seven/css/components/system-status-report.css
index aeac1d3..b1b57b9 100644
--- a/core/themes/seven/css/components/system-status-report.css
+++ b/core/themes/seven/css/components/system-status-report.css
@@ -13,3 +13,17 @@
 .system-status-report__entry:last-child {
   border-bottom: 1px solid #bebfb9;
 }
+.system-status-report summary:first-child ~ * {
+  display: none;
+}
+.system-status-report details[open] > *,
+.system-status-report details > summary:first-child {
+  display: block;
+}
+
+@media screen and (max-width: 48em) {
+  .system-status-report {
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+}
diff --git a/core/themes/seven/css/components/system.admin.css b/core/themes/seven/css/components/system.admin.css
new file mode 100644
index 0000000..e6d57ae
--- /dev/null
+++ b/core/themes/seven/css/components/system.admin.css
@@ -0,0 +1,356 @@
+/**
+ * @file
+ * Styles for administration pages.
+ */
+
+/**
+ * Reusable layout styles.
+ */
+.layout-container {
+  margin: 0 1.5em;
+}
+.layout-container:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media screen and (min-width: 38em) {
+  .layout-container {
+    margin: 0 2.5em;
+  }
+  .layout-column {
+    float: left;  /* LTR */
+    box-sizing: border-box;
+  }
+  [dir="rtl"] .layout-column {
+    float: right;
+  }
+  .layout-column + .layout-column {
+    padding-left: 10px; /* LTR */
+  }
+  [dir="rtl"] .layout-column + .layout-column {
+    padding-right: 10px;
+    padding-left: 0;
+  }
+  .layout-column--half {
+    width: 50%;
+  }
+  .layout-column--quarter {
+    width: 25%;
+  }
+  .layout-column--three-quarter {
+    width: 75%;
+  }
+}
+
+/**
+ * Panel.
+ * Used to visually group items together.
+ */
+.panel {
+  padding: 5px 5px 15px;
+}
+.panel__description {
+  margin: 0 0 3px;
+  padding: 2px 0 3px 0;
+}
+
+/**
+ * System compact link: to toggle the display of description text.
+ */
+.compact-link {
+  margin: 0 0 0.5em 0;
+}
+
+/**
+ * Quick inline admin links.
+ */
+small .admin-link:before {
+  content: ' [';
+}
+small .admin-link:after {
+  content: ']';
+}
+
+/**
+ * Modules page.
+ */
+.system-modules thead > tr {
+  border: 0;
+}
+.system-modules div.incompatible {
+  font-weight: bold;
+}
+.system-modules td.checkbox {
+  min-width: 25px;
+  width: 4%;
+}
+.system-modules td.module {
+  width: 25%;
+}
+.system-modules td {
+  vertical-align: top;
+}
+.system-modules label,
+.system-modules-uninstall label {
+  color: #1d1d1d;
+  font-size: 1.15em;
+}
+.system-modules details {
+  color: #5c5c5b;
+  line-height: 20px;
+  overflow: hidden; /* truncates descriptions if too long */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.system-modules details[open] {
+  height: auto;
+  overflow: visible;
+  white-space: normal;
+}
+.system-modules details[open] summary .text {
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  text-transform: none;
+}
+.system-modules td details a {
+  color: #5C5C5B;
+  border: 0px;
+}
+.system-modules td details {
+  border: 0;
+  margin: 0;
+  height: 20px;
+}
+.system-modules td details summary {
+  padding: 0;
+  text-transform: none;
+  font-weight: normal;
+  cursor: default;
+}
+.system-modules td {
+  padding-left: 0; /* LTR */
+}
+[dir="rtl"] .system-modules td {
+  padding-left: 12px;
+  padding-right: 0;
+}
+
+@media screen and (max-width: 40em) {
+  .system-modules td.name {
+    width: 20%;
+  }
+  .system-modules td.description {
+    width: 40%;
+  }
+}
+.system-modules .requirements {
+  padding: 5px 0;
+  max-width: 490px;
+}
+.system-modules .links {
+  overflow: hidden; /* prevents collapse */
+}
+.system-modules .checkbox {
+  margin: 0 5px;
+}
+.system-modules .checkbox .form-item {
+  margin-bottom: 0;
+}
+.admin-requirements,
+.admin-required {
+  font-size: 0.9em;
+  color: #666;
+}
+.admin-enabled {
+  color: #080;
+}
+.admin-missing {
+  color: #f00;
+}
+.module-link {
+  display: block;
+  padding: 2px 20px;
+  white-space: nowrap;
+  margin-top: 2px;
+  float: left; /* LTR */
+}
+[dir="rtl"] .module-link {
+  float: right;
+}
+.module-link-help {
+  background: url(../../images/core/icons/787878/questionmark-disc.svg) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .module-link-help {
+  background-position: top 50% right 0;
+}
+.module-link-permissions {
+  background: url(../../images/core/icons/787878/key.svg) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .module-link-permissions {
+  background-position: top 50% right 0;
+}
+.module-link-configure {
+  background: url(../../images/core/icons/787878/cog.svg) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .module-link-configure {
+  background-position: top 50% right 0;
+}
+
+/**
+ * Appearance page.
+ */
+.theme-info__header {
+  margin-bottom: 0;
+  font-weight: normal;
+}
+.theme-default .theme-info__header {
+  font-weight: bold;
+}
+.theme-info__description {
+  margin-top: 0;
+}
+.system-themes-list {
+  margin-bottom: 20px;
+}
+.system-themes-list-uninstalled {
+  border-top: 1px solid #cdcdcd;
+  padding-top: 20px;
+}
+.system-themes-list__header {
+  margin: 0;
+}
+
+.theme-selector {
+  padding-top: 20px;
+}
+.theme-selector .screenshot,
+.theme-selector .no-screenshot {
+  border: 1px solid #e0e0d8;
+  padding: 2px;
+  vertical-align: bottom;
+  max-width: 100%;
+  height: auto;
+  text-align: center;
+}
+.theme-default .screenshot {
+  border: 1px solid #aaa;
+}
+.system-themes-list-uninstalled .screenshot,
+.system-themes-list-uninstalled .no-screenshot {
+  max-width: 194px;
+  height: auto;
+}
+
+/**
+ * Theme display without vertical toolbar.
+ */
+@media screen and (min-width: 45em) {
+  body:not(.toolbar-vertical) .system-themes-list-installed .screenshot,
+  body:not(.toolbar-vertical) .system-themes-list-installed .no-screenshot {
+    float: left; /* LTR */
+    margin: 0 20px 0 0; /* LTR */
+    width: 294px;
+  }
+  [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-installed .screenshot,
+  [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-installed .no-screenshot {
+    float: right;
+    margin: 0 0 0 20px;
+  }
+  body:not(.toolbar-vertical) .system-themes-list-installed .system-themes-list__header {
+    margin-top: 0;
+  }
+  body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-selector {
+    box-sizing: border-box;
+    width: 31.25%;
+    float: left; /* LTR */
+    padding: 20px 20px 20px 0; /* LTR */
+  }
+  [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-selector {
+    float: right;
+    padding: 20px 0 20px 20px;
+  }
+  body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-info {
+    min-height: 170px;
+  }
+}
+
+/**
+ * Theme display with vertical toolbar.
+ */
+@media screen and (min-width: 60em) {
+  .toolbar-vertical .system-themes-list-installed .screenshot,
+  .toolbar-vertical .system-themes-list-installed .no-screenshot {
+    float: left; /* LTR */
+    margin: 0 20px 0 0; /* LTR */
+    width: 294px;
+  }
+  [dir="rtl"] .toolbar-vertical .system-themes-list-installed .screenshot,
+  [dir="rtl"] .toolbar-vertical .system-themes-list-installed .no-screenshot {
+    float: right;
+    margin: 0 0 0 20px;
+  }
+  .toolbar-vertical .system-themes-list-installed .theme-info__header {
+    margin-top: 0;
+  }
+  .toolbar-vertical .system-themes-list-uninstalled .theme-selector {
+    box-sizing: border-box;
+    width: 31.25%;
+    float: left; /* LTR */
+    padding: 20px 20px 20px 0; /* LTR */
+  }
+  [dir="rtl"] .toolbar-vertical .system-themes-list-uninstalled .theme-selector {
+    float: right;
+    padding: 20px 0 20px 20px;
+  }
+  .toolbar-vertical .system-themes-list-uninstalled .theme-info {
+    min-height: 170px;
+  }
+}
+.system-themes-list-installed .theme-info {
+  max-width: 940px;
+}
+
+.theme-selector .incompatible {
+  margin-top: 10px;
+  font-weight: bold;
+}
+.theme-selector .operations {
+  margin: 10px 0 0 0;
+  padding: 0;
+}
+.theme-selector .operations li {
+  float: left; /* LTR */
+  margin: 0;
+  padding: 0 0.7em;
+  list-style-type: none;
+  border-right: 1px solid #cdcdcd;  /* LTR */
+}
+[dir="rtl"] .theme-selector .operations li {
+  float: right;
+  border-left: 1px solid #cdcdcd;
+  border-right: none;
+}
+.theme-selector .operations li:last-child {
+  padding: 0 0 0 0.7em; /* LTR */
+  border-right: none; /* LTR */
+}
+[dir="rtl"] .theme-selector .operations li:last-child {
+  padding: 0 0.7em 0 0;
+  border-left: none;
+}
+.theme-selector .operations li:first-child {
+  padding: 0 0.7em 0 0; /* LTR */
+}
+[dir="rtl"] .theme-selector .operations li:first-child {
+  padding: 0 0 0 0.7em;
+}
+.system-themes-admin-form {
+  clear: left; /* LTR */
+}
+[dir="rtl"] .system-themes-admin-form {
+  clear: right;
+}
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..c7f40e1 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:
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 5ace6b8..65a7847 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -145,6 +145,107 @@ 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 $i => &$requirement) {
+    /** @var Drupal\Core\StringTranslation\TranslatableMarkup $title */
+    $title = $requirement['title'];
+    $title = $title->getUntranslatedString();
+    switch ($title) {
+      case 'Drupal':
+        $variables['version'] = $requirement;
+        unset($variables['requirements'][$i]);
+        break;
+
+      case 'Cron maintenance tasks':
+        $variables['cron'] = $requirement;
+        unset($variables['requirements'][$i]);
+        break;
+
+      case 'Web server':
+        $variables['webserver'] = $requirement;
+        unset($variables['requirements'][$i]);
+        break;
+
+      case 'Database system':
+        $variables['database_system'] = $requirement;
+        unset($variables['requirements'][$i]);
+        break;
+
+      case 'Database system version':
+        $variables['database_system_version'] = $requirement;
+        unset($variables['requirements'][$i]);
+        break;
+
+      case 'PHP':
+        $variables['php'] = $requirement;
+        unset($variables['requirements'][$i]);
+        break;
+
+      case 'PHP memory limit':
+        $variables['php_memory_limit'] = $requirement;
+        unset($variables['requirements'][$i]);
+        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'][$i])) {
+      $grouped_requirements[$severity['status']]['title'] = $severity['title'];
+      $grouped_requirements[$severity['status']]['items'][] = $requirement;
+    }
+  }
+  // Order the grouped requirements by the counter keys.
+  $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.
diff --git a/core/themes/seven/templates/status-report.html.twig b/core/themes/seven/templates/status-report.html.twig
new file mode 100644
index 0000000..2dcbdd4
--- /dev/null
+++ b/core/themes/seven/templates/status-report.html.twig
@@ -0,0 +1,111 @@
+{#
+/**
+ * @file
+ * Theme override for the status report.
+ *
+ * Available variables:
+ * - requirements: Contains multiple requirement instances.
+ *   Each requirement contains:
+ *   - title: The title of the requirement.
+ *   - value: (optional) The requirement's status.
+ *   - description: (optional) The requirement's description.
+ *   - severity_title: The title of the severity.
+ *   - severity_status: Indicates the severity status.
+ * - error: The number of errors found.
+ * - warning: The number of warnings found.
+ * - info: The number of items which are neither errors nor warnings.
+ *
+ * @see template_preprocess_status_report()
+ */
+#}
+{% if error and warning and info %}
+  {% set element_width_class = ' system-status-report-counters__item--third-width' %}
+{% elseif error or warning %}
+  {% set element_width_class = ' system-status-report-counters__item--half-width' %}
+{% endif %}
+<div class="system-status-report-counters">
+  {% if error %}
+    <div class="system-status-report-counters__item{{ element_width_class }}">
+      <span class="system-status-counter system-status-counter--error">
+        <span class="system-status-counter__status-title system-status-counter__status-icon system-status-counter__status-icon--error"></span>
+        <span class='system-status-counter__details'>
+          {{ error }} {{ 'Error'|t }}
+        </span>
+      </span>
+    </div>
+  {% endif %}
+  {% if warning %}
+    <div class="system-status-report-counters__item{{ element_width_class }}">
+      <span class="system-status-counter system-status-counter--warning">
+        <span class="system-status-counter__status-title system-status-counter__status-icon system-status-counter__status-icon--warning"></span>
+        <span class='system-status-counter__details'>
+          {{ warning }} {{ 'Warning'|t }}
+        </span>
+      </span>
+    </div>
+  {% endif %}
+  <div class="system-status-report-counters__item{{ element_width_class }}">
+    <span class="system-status-counter system-status-counter--checked">
+    <span class="system-status-counter__status-title system-status-counter__status-icon system-status-counter__status-icon--checked"></span>
+      <span class="system-status-counter__details">
+        {{ info }} {{ 'Checked'|t }}
+      </span>
+    </span>
+  </div>
+</div>
+
+<div class="system-status-general-info">
+
+  <h2>{{ 'General System Information'|t }}</h2>
+
+  <div>
+    <h3>Drupal Version</h3>
+    {{ version.value }}
+  </div>
+  <div>
+    <h3>Last Cron Run Version</h3>
+    {{ cron.value }}
+  </div>
+  <div>
+    <h3>Web Server</h3>
+    {{ webserver.value }}
+  </div>
+  <div>
+    <h3>PHP</h3>
+    <strong>{{ 'Version'|t }}</strong><br>{{ php.value }}<br>
+    <strong>{{ 'Memory'|t }}</strong><br>{{ php_memory_limit.value }}
+  </div>
+  <div>
+    <h3>Database</h3>
+    <strong>{{ 'Version'|t }}</strong><br>{{ database_system_version.value }}<br>
+    <strong>{{ 'System'|t }}</strong><br>{{ database_system.value }}
+  </div>
+</div>
+
+{{ attach_library('core/drupal.collapse') }}
+
+<div class="system-status-report">
+  {% for group in grouped_requirements %}
+    <h3>{{ group.title }}</h3>
+    {% for requirement in group.items %}
+      <details class="system-status-report__entry system-status-report__entry--{{ requirement.severity_status }} color-{{ requirement.severity_status }}">
+        {% if requirement.severity_status in ['warning', 'error'] %}
+          {% set summary_classes = ' system-status-report__status-icon system-status-report__status-icon--' ~ requirement.severity_status %}
+        {% endif %}
+        <summary role="button" class="system-status-report__status-title{{ summary_classes ? ' ' ~ summary_classes }}">
+          {% if requirement.severity_title  %}
+            <span class="visually-hidden">{{ requirement.severity_title }}</span>
+          {% endif %}
+          {{ requirement.title }}
+        </summary>
+
+        <div>
+          {{ requirement.value }}
+          {% if requirement.description %}
+            <div class="description">{{ requirement.description }}</div>
+          {% endif %}
+        </div>
+      </details>
+    {% endfor %}
+  {% endfor %}
+</div>