diff --git a/core/lib/Drupal/Core/Render/Element/StatusReport.php b/core/lib/Drupal/Core/Render/Element/StatusReport.php
index 5aa50ab..520dfb1 100644
--- a/core/lib/Drupal/Core/Render/Element/StatusReport.php
+++ b/core/lib/Drupal/Core/Render/Element/StatusReport.php
@@ -17,7 +17,7 @@ class StatusReport extends RenderElement {
   public function getInfo() {
     $class = get_class($this);
     return [
-      '#theme' => 'status_report',
+      '#theme' => 'status_report_grouped',
       '#priorities' => [
         'error',
         'warning',
@@ -36,11 +36,11 @@ public function getInfo() {
   public static function preRenderGroupRequirements($element) {
     $severities = static::getSeverities();
     $grouped_requirements = [];
-
     foreach ($element['#requirements'] as $key => $requirement) {
       $severity = $severities[REQUIREMENT_INFO];
       if (isset($requirement['severity'])) {
-        $severity = $severities[(int) $requirement['severity']];
+        $requirement_severity = (int) $requirement['severity'] === REQUIREMENT_OK ? REQUIREMENT_INFO : (int) $requirement['severity'];
+        $severity = $severities[$requirement_severity];
       }
       elseif (defined('MAINTENANCE_MODE') && MAINTENANCE_MODE == 'install') {
         $severity = $severities[REQUIREMENT_OK];
diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index 6bfd6f8..10b3ee4 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -204,10 +204,11 @@ small .admin-link:after {
 .system-status-report__status-title {
   position: relative;
   vertical-align: top;
-  width: 25%;
+  width: 100%;
   padding: 10px 6px 10px 40px; /* LTR */
   box-sizing: border-box;
   font-weight: normal;
+  background-color: transparent;
 }
 [dir="rtl"] .system-status-report__status-title {
     padding: 10px 40px 10px 6px;
@@ -232,6 +233,9 @@ small .admin-link:after {
 .system-status-report__status-icon--warning:before {
   background-image: url(../../../misc/icons/e29700/warning.svg);
 }
+.system-status-report__entry__value {
+  padding: 1em .5em;
+}

 /**
  * Appearance page.
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 641a216..36d3c57 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -210,6 +210,12 @@ function system_theme() {
         'requirements' => NULL,
       ),
     ),
+    'status_report_grouped' => array(
+      'variables' => array(
+        'grouped_requirements' => NULL,
+        'requirements' => NULL,
+      ),
+    ),
     'status_report_counter' => array(
       'variables' => array('amount' => NULL, 'text' => NULL, 'severity' => NULL),
     ),
diff --git a/core/modules/system/templates/status-report-grouped.html.twig b/core/modules/system/templates/status-report-grouped.html.twig
new file mode 100644
index 0000000..bd34e5a
--- /dev/null
+++ b/core/modules/system/templates/status-report-grouped.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Default theme implementation of grouped status report requirements.
+ *
+ * - grouped_requirements: Contains grouped requirements.
+ *   Each group contains:
+ *   - title: The title of the group.
+ *   - type: The severity of the group.
+ *   - items: The requirement instances.
+ *     Each requirement item 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.
+ */
+#}
+{{ attach_library('core/drupal.collapse') }}
+
+<div>
+  {% for group in grouped_requirements %}
+    <div>
+      <h3 id="{{ group.type }}">{{ group.title }}</h3>
+      {% for requirement in group.items %}
+        <details class="system-status-report__entry">
+          {%
+            set summary_classes = [
+              'system-status-report__status-title',
+              group.type in ['warning', 'error'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
+            ]
+          %}
+          <summary{{ create_attribute({'class': summary_classes}) }} role="button">
+            {% if requirement.severity_title  %}
+              <span class="visually-hidden">{{ requirement.severity_title }}</span>
+            {% endif %}
+            {{ requirement.title }}
+          </summary>
+          <div class="system-status-report__entry__value">
+            {{ requirement.value }}
+            {% if requirement.description %}
+              <div class="description">{{ requirement.description }}</div>
+            {% endif %}
+          </div>
+        </details>
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>
diff --git a/core/themes/seven/templates/status-report.html.twig b/core/themes/seven/templates/status-report-grouped.html.twig
similarity index 100%
rename from core/themes/seven/templates/status-report.html.twig
rename to core/themes/seven/templates/status-report-grouped.html.twig
diff --git a/core/themes/stable/css/system/system.admin.css b/core/themes/stable/css/system/system.admin.css
index c8e20cf..65ff65a 100644
--- a/core/themes/stable/css/system/system.admin.css
+++ b/core/themes/stable/css/system/system.admin.css
@@ -204,10 +204,11 @@ small .admin-link:after {
 .system-status-report__status-title {
   position: relative;
   vertical-align: top;
-  width: 25%;
+  width: 100%;
   padding: 10px 6px 10px 40px; /* LTR */
   box-sizing: border-box;
   font-weight: normal;
+  background-color: transparent;
 }
 [dir="rtl"] .system-status-report__status-title {
     padding: 10px 40px 10px 6px;
@@ -232,6 +233,9 @@ small .admin-link:after {
 .system-status-report__status-icon--warning:before {
   background-image: url(../../images/core/icons/e29700/warning.svg);
 }
+.system-status-report__entry__value {
+  padding: 1em .5em;
+}

 /**
  * Appearance page.
diff --git a/core/themes/stable/templates/admin/status-report-grouped.html.twig b/core/themes/stable/templates/admin/status-report-grouped.html.twig
new file mode 100644
index 0000000..bbeaa47
--- /dev/null
+++ b/core/themes/stable/templates/admin/status-report-grouped.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Theme override of grouped status report requirements.
+ *
+ * - grouped_requirements: Contains grouped requirements.
+ *   Each group contains:
+ *   - title: The title of the group.
+ *   - type: The severity of the group.
+ *   - items: The requirement instances.
+ *     Each requirement item 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.
+ */
+#}
+{{ attach_library('core/drupal.collapse') }}
+
+<div>
+  {% for group in grouped_requirements %}
+    <div>
+      <h3 id="{{ group.type }}">{{ group.title }}</h3>
+      {% for requirement in group.items %}
+        <details class="system-status-report__entry">
+          {%
+            set summary_classes = [
+              'system-status-report__status-title',
+              group.type in ['warning', 'error'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
+            ]
+          %}
+          <summary{{ create_attribute({'class': summary_classes}) }} role="button">
+            {% if requirement.severity_title  %}
+              <span class="visually-hidden">{{ requirement.severity_title }}</span>
+            {% endif %}
+            {{ requirement.title }}
+          </summary>
+          <div class="system-status-report__entry__value">
+            {{ requirement.value }}
+            {% if requirement.description %}
+              <div class="description">{{ requirement.description }}</div>
+            {% endif %}
+          </div>
+        </details>
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>