diff --git a/core/themes/seven/css/components/system-status-counter.css b/core/themes/seven/css/components/system-status-counter.css
index 89fdef3..7fb257b 100644
--- a/core/themes/seven/css/components/system-status-counter.css
+++ b/core/themes/seven/css/components/system-status-counter.css
@@ -5,28 +5,16 @@
 
 .system-status-counter {
   border: 1px solid #e6e4df;
-  border-radius: 5px;
-  height: 85px;
-  vertical-align: middle;
-  line-height: 85px;
-  font-size: 20px;
-  font-weight: bold;
+  border-radius: 3px;
   display: inline-block;
   width: 100%;
+  white-space: nowrap;
 }
-
-.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;
+  height: 45px;
+  width: 45px;
+  vertical-align: middle;
   border-right: 1px solid #e6e4df; /* LTR */
   border-left: 0; /* LTR */
 }
@@ -36,16 +24,12 @@
 }
 .system-status-counter__status-icon:before {
   content: "";
-  background-size: 35px;
+  background-size: 25px;
   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 */
@@ -63,8 +47,36 @@
   background-image: url(../../../stable/images/core/icons/73b355/check.svg);
 }
 
-.system-status-counter__details {
+.system-status-counter__status-title {
   display: inline-block;
-  padding: 0 5px;
-  height: 85px;
+  vertical-align: middle;
+  text-transform: uppercase;
+  padding: 5px;
+  font-size: 16px;
+  line-height: 1em;
+  font-weight: bold;
+}
+.system-status-counter__details {
+  font-size: 12px;
+  font-weight: normal;
+  text-transform: none;
+}
+
+@media screen and (min-width: 60em) {
+  .system-status-counter__status-icon,
+  .system-status-counter  {
+    height: 85px;
+  }
+  .system-status-counter__status-icon {
+    width: 85px;
+  }
+  .system-status-counter__status-title {
+    font-size: 20px;
+  }
+  .system-status-counter__status-title {
+    padding: 10px 6px;
+  }
+  .system-status-counter__status-icon:before {
+    background-size: 35px;
+  }
 }
diff --git a/core/themes/seven/css/components/system-status-report-counters.css b/core/themes/seven/css/components/system-status-report-counters.css
index 6826a53..2c165f1 100644
--- a/core/themes/seven/css/components/system-status-report-counters.css
+++ b/core/themes/seven/css/components/system-status-report-counters.css
@@ -3,29 +3,25 @@
  * 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;
+  margin: 10px 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) {
+@media screen and (min-width: 60em) {
+  .system-status-report-counters__item {
+    margin: 10px 0 20px 0;
+  }
   .system-status-report-counters {
-    display: block;
+    flex-wrap: wrap;
+    display: flex;
+    justify-content: space-between;
   }
-  .system-status-report-counters__item {
-    margin: 10px 0;
-    width: 100%;
+
+  .system-status-report-counters__item--half-width {
+    width: 49%;
+  }
+  .system-status-report-counters__item--third-width {
+    width: 32%;
   }
 }
-
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 65a7847..65d8940 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -234,10 +234,13 @@ function seven_preprocess_status_report(&$variables) {
     // 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']]['type'] = $severity['status'];
       $grouped_requirements[$severity['status']]['items'][] = $requirement;
     }
   }
-  // Order the grouped requirements by the counter keys.
+  // 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];
diff --git a/core/themes/seven/templates/status-report.html.twig b/core/themes/seven/templates/status-report.html.twig
index 2dcbdd4..9d18bca 100644
--- a/core/themes/seven/templates/status-report.html.twig
+++ b/core/themes/seven/templates/status-report.html.twig
@@ -27,9 +27,10 @@
   {% 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 class="system-status-counter__status-icon system-status-counter__status-icon--error"></span>
+        <span class="system-status-counter__status-title">
+          {{ error }} {{ 'Error'|t }}<br>
+          <a href="#error" class="system-status-counter__details">Details</a>
         </span>
       </span>
     </div>
@@ -37,18 +38,20 @@
   {% 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 class="system-status-counter__status-icon system-status-counter__status-icon--warning"></span>
+        <span class="system-status-counter__status-title">
+          {{ warning }} {{ 'Warning'|t }}<br>
+          <a href="#warning" class="system-status-counter__details">Details</a>
         </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 class="system-status-counter__status-icon system-status-counter__status-icon--checked"></span>
+      <span class="system-status-counter__status-title">
+        {{ info }} {{ 'Checked'|t }}<br>
+        <a href="#info" class="system-status-counter__details">Details</a>
       </span>
     </span>
   </div>
@@ -86,7 +89,7 @@
 
 <div class="system-status-report">
   {% for group in grouped_requirements %}
-    <h3>{{ group.title }}</h3>
+    <h3 id="{{ group.type }}">{{ 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'] %}