diff --git a/core/modules/system/templates/status-report-summary.html.twig b/core/modules/system/templates/status-report-summary.html.twig
deleted file mode 100644
index a1510f8..0000000
--- a/core/modules/system/templates/status-report-summary.html.twig
+++ /dev/null
@@ -1,77 +0,0 @@
-{#
-/**
- * @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 != 0 and warning != 0 and info != 0 %}
-  {% set element_width_class = ' system-status-report-counters__item--third-width' %}
-{% elseif error != 0 or warning != 0 %}
-  {% 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="counter counter--error">
-        <span class="counter__status-title counter__status-icon counter__status-icon--error"></span>
-        <span class='counter__details'>
-          {{ error }} {{'error'|t }}
-        </span>
-      </span>
-    </div>
-  {% endif %}
-  {% if warning %}
-    <div class="system-status-report-counters__item{{ element_width_class }}">
-      <span class="counter counter--warning">
-        <span class="counter__status-title counter__status-icon counter__status-icon--warning"></span>
-        <span class='counter__details'>
-          {{ warning }} {{ 'warning'|t }}
-        </span>
-      </span>
-    </div>
-  {% endif %}
-  <div class="system-status-report-counters__item{{ element_width_class }}">
-    <span class="counter counter--checked">
-    <span class="counter__status-title counter__status-icon counter__status-icon--checked"></span>
-      <span class="counter__details">
-        {{ info }} {{ 'checked'|t }}
-      </span>
-    </span>
-  </div>
-</div>
-<table class="system-status-report">
-  <tbody>
-  {% for requirement in requirements %}
-    <tr class="system-status-report__entry system-status-report__entry--{{ requirement.severity_status }} color-{{ requirement.severity_status }}">
-      {% if requirement.severity_status in ['warning', 'error'] %}
-        <th class="system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}">
-          <span class="visually-hidden">{{ requirement.severity_title }}</span>
-      {% else %}
-        <th class="system-status-report__status-title">
-      {% endif %}
-        {{ requirement.title }}
-      </th>
-      <td>
-        {{ requirement.value }}
-        {% if requirement.description %}
-          <div class="description">{{ requirement.description }}</div>
-        {% endif %}
-      </td>
-    </tr>
-  {% endfor %}
-  </tbody>
-</table>
diff --git a/core/modules/system/templates/status-report.html.twig b/core/modules/system/templates/status-report.html.twig
index 86fe0b5..32dae05 100644
--- a/core/modules/system/templates/status-report.html.twig
+++ b/core/modules/system/templates/status-report.html.twig
@@ -1,7 +1,7 @@
 {#
 /**
  * @file
- * Default theme implementation for the status report.
+ * Theme override for the status report.
  *
  * Available variables:
  * - requirements: Contains multiple requirement instances.
@@ -16,10 +16,43 @@
  * - info: The number of items which are neither errors nor warnings.
  *
  * @see template_preprocess_status_report()
- *
- * @ingroup themeable
  */
 #}
+{% if error != 0 and warning != 0 and info != 0 %}
+  {% set element_width_class = ' system-status-report-counters__item--third-width' %}
+{% elseif error != 0 or warning != 0 %}
+  {% 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>
 <table class="system-status-report">
   <tbody>
   {% for requirement in requirements %}
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/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 8d14442..c7f40e1 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -11,7 +11,6 @@ global-styling:
       css/components/breadcrumb.css: {}
       css/components/buttons.css: {}
       css/components/colors.css: {}
-      css/components/counter.css: {}
       css/components/messages.css: {}
       css/components/dropbutton.component.css: {}
       css/components/entity-meta.css: {}
@@ -30,6 +29,7 @@ global-styling:
       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/stable/templates/admin/status-report-summary.html.twig b/core/themes/stable/templates/admin/status-report-summary.html.twig
deleted file mode 100644
index a1510f8..0000000
--- a/core/themes/stable/templates/admin/status-report-summary.html.twig
+++ /dev/null
@@ -1,77 +0,0 @@
-{#
-/**
- * @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 != 0 and warning != 0 and info != 0 %}
-  {% set element_width_class = ' system-status-report-counters__item--third-width' %}
-{% elseif error != 0 or warning != 0 %}
-  {% 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="counter counter--error">
-        <span class="counter__status-title counter__status-icon counter__status-icon--error"></span>
-        <span class='counter__details'>
-          {{ error }} {{'error'|t }}
-        </span>
-      </span>
-    </div>
-  {% endif %}
-  {% if warning %}
-    <div class="system-status-report-counters__item{{ element_width_class }}">
-      <span class="counter counter--warning">
-        <span class="counter__status-title counter__status-icon counter__status-icon--warning"></span>
-        <span class='counter__details'>
-          {{ warning }} {{ 'warning'|t }}
-        </span>
-      </span>
-    </div>
-  {% endif %}
-  <div class="system-status-report-counters__item{{ element_width_class }}">
-    <span class="counter counter--checked">
-    <span class="counter__status-title counter__status-icon counter__status-icon--checked"></span>
-      <span class="counter__details">
-        {{ info }} {{ 'checked'|t }}
-      </span>
-    </span>
-  </div>
-</div>
-<table class="system-status-report">
-  <tbody>
-  {% for requirement in requirements %}
-    <tr class="system-status-report__entry system-status-report__entry--{{ requirement.severity_status }} color-{{ requirement.severity_status }}">
-      {% if requirement.severity_status in ['warning', 'error'] %}
-        <th class="system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}">
-          <span class="visually-hidden">{{ requirement.severity_title }}</span>
-      {% else %}
-        <th class="system-status-report__status-title">
-      {% endif %}
-        {{ requirement.title }}
-      </th>
-      <td>
-        {{ requirement.value }}
-        {% if requirement.description %}
-          <div class="description">{{ requirement.description }}</div>
-        {% endif %}
-      </td>
-    </tr>
-  {% endfor %}
-  </tbody>
-</table>
diff --git a/core/themes/stable/templates/admin/status-report.html.twig b/core/themes/stable/templates/admin/status-report.html.twig
index a7746ba..cdd444a 100644
--- a/core/themes/stable/templates/admin/status-report.html.twig
+++ b/core/themes/stable/templates/admin/status-report.html.twig
@@ -18,6 +18,41 @@
  * @see template_preprocess_status_report()
  */
 #}
+{% if error != 0 and warning != 0 and info != 0 %}
+  {% set element_width_class = ' system-status-report-counters__item--third-width' %}
+{% elseif error != 0 or warning != 0 %}
+  {% 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>
 <table class="system-status-report">
   <tbody>
   {% for requirement in requirements %}