diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index f9c49c7..db5c1e2 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -163,6 +163,21 @@ function template_preprocess_status_report(&$variables) {
     $variables['requirements'][$i]['severity_title'] = $severity['title'];
     $variables['requirements'][$i]['severity_status'] = $severity['status'];
   }
+  // Foreach for count the error,warning and checked modules.
+  $variables['error'] = 0;
+  $variables['warning'] = 0;
+  $variables['checked'] = 0;
+  foreach( $variables['requirements'] as $i => $requirement) {
+    if ($variables['requirements'][$i]['severity_status'] == 'error' ) {
+      $variables['error'] = $variables['error'] + 1;
+    }
+    if ($variables['requirements'][$i]['severity_status'] == 'warning' ) {
+      $variables['warning'] = $variables['warning'] + 1;
+    }
+    if ($variables['requirements'][$i]['severity_status'] == 'info' ) {
+      $variables['checked'] = $variables['checked'] + 1;
+    }
+  }
 }
 
 /**
diff --git a/core/themes/stable/css/system/system.admin.css b/core/themes/stable/css/system/system.admin.css
index c8e20cf..34cf79f 100644
--- a/core/themes/stable/css/system/system.admin.css
+++ b/core/themes/stable/css/system/system.admin.css
@@ -6,7 +6,7 @@
 /**
  * Reusable layout styles.
  */
-.layout-container {
+ .layout-container {
   margin: 0 1.5em;
 }
 .layout-container:after {
@@ -48,7 +48,7 @@
  * Panel.
  * Used to visually group items together.
  */
-.panel {
+ .panel {
   padding: 5px 5px 15px;
 }
 .panel__description {
@@ -59,14 +59,14 @@
 /**
  * System compact link: to toggle the display of description text.
  */
-.compact-link {
+ .compact-link {
   margin: 0 0 0.5em 0;
 }
 
 /**
  * Quick inline admin links.
  */
-small .admin-link:before {
+ small .admin-link:before {
   content: ' [';
 }
 small .admin-link:after {
@@ -76,7 +76,7 @@ small .admin-link:after {
 /**
  * Modules page.
  */
-.system-modules thead > tr {
+ .system-modules thead > tr {
   border: 0;
 }
 .system-modules div.incompatible {
@@ -200,43 +200,10 @@ small .admin-link:after {
   background-position: top 50% right 0;
 }
 
-/* Status report. */
-.system-status-report__status-title {
-  position: relative;
-  vertical-align: top;
-  width: 25%;
-  padding: 10px 6px 10px 40px; /* LTR */
-  box-sizing: border-box;
-  font-weight: normal;
-}
-[dir="rtl"] .system-status-report__status-title {
-    padding: 10px 40px 10px 6px;
-}
-.system-status-report__status-icon:before {
-  content: "";
-  background-repeat: no-repeat;
-  height: 16px;
-  width: 16px;
-  display: block;
-  position: absolute;
-  left: 12px; /* LTR */
-  top: 12px;
-}
-[dir="rtl"] .system-status-report__status-icon:before  {
-  left: auto;
-  right: 12px;
-}
-.system-status-report__status-icon--error:before {
-  background-image: url(../../images/core/icons/e32700/error.svg);
-}
-.system-status-report__status-icon--warning:before {
-  background-image: url(../../images/core/icons/e29700/warning.svg);
-}
-
 /**
  * Appearance page.
  */
-.theme-info__header {
+ .theme-info__header {
   margin-bottom: 0;
   font-weight: normal;
 }
@@ -281,7 +248,7 @@ small .admin-link:after {
 /**
  * Theme display without vertical toolbar.
  */
-@media screen and (min-width: 45em) {
+ @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 */
@@ -314,7 +281,7 @@ small .admin-link:after {
 /**
  * Theme display with vertical toolbar.
  */
-@media screen and (min-width: 60em) {
+ @media screen and (min-width: 60em) {
   .toolbar-vertical .system-themes-list-installed .screenshot,
   .toolbar-vertical .system-themes-list-installed .no-screenshot {
     float: left; /* LTR */
@@ -387,3 +354,102 @@ small .admin-link:after {
 [dir="rtl"] .system-themes-admin-form {
   clear: right;
 }
+
+/**
+ * Status report. 
+ */
+.system-status-report__status-title {
+  position: relative;
+  vertical-align: top;
+  width: 25%;
+  padding: 10px 6px;
+  box-sizing: border-box;
+  font-weight: normal;
+}
+.system-status-report__status-icon:before {
+  content: "";
+  background-repeat: no-repeat;
+  height: 16px;
+  width: 16px;
+  display: block;
+  float: left; /* LTR */
+}
+[dir="rtl"] .system-status-report__status-icon:before  {
+  float: right;
+}
+.system-status-report .system-status-report__status-icon:before {
+  margin-right: 10px; /* LTR */
+}
+[dir="rtl"] .system-status-report .system-status-report__status-icon:before {
+  margin-left: 10px;
+}  
+.system-status-report__status-icon--error:before {
+  background-image: url(../../images/core/icons/e32700/error.svg);
+}
+.system-status-report__status-icon--warning:before {
+  background-image: url(../../images/core/icons/e29700/warning.svg);
+}
+.system-status-report__status-icon--checked:before {
+  background-image: url(../../images/core/icons/73b355/check.svg);
+}
+.system-status-report-counter {
+  border: 1px solid #e6e4df;
+  margin: 10px 15px 20px 0;
+  border-radius: 5px;
+  height: 85px;
+  vertical-align: middle;
+  line-height: 85px;
+  font-size: 20px;
+  font-weight: bold;
+}
+[dir="ltr"] .system-status-report-counter:nth-child(3) {
+  margin-right: 0;
+}
+[dir="rtl"] .system-status-report-counter:nth-child(1) {
+  margin-right: 0;
+}  
+span.all-exits.system-status-report-counter {
+  width: 32.1%;
+  display: inline-block;
+}
+.system-status-report-counter .system-status-report__status-icon:before {
+  background-size: 35px;
+  background-position: 50% center;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.system-status-report-counter .system-status-report__status-icon {
+  display: inline-block;
+  height: 85px;
+  border-right: 1px solid #e6e4df;
+  border-left: 0;
+}
+[dir="rtl"] .system-status-report-counter .system-status-report__status-icon {
+  border-right: 0;
+  border-left: 1px solid #e6e4df;
+}
+.er-wr-detail {
+  display: inline-block;
+  padding: 0 5px;
+  height: 85px;
+}
+/**
+ * Status report for mobile.
+ */
+@media screen and (max-width: 48em) {
+  [dir="rtl"] .system-status-report__status-icon:before  {
+    right: 0;
+  }
+  span.all-exits.system-status-report-counter {
+    width: 100%;
+  }
+  .system-status-report-counter {
+    margin: 10px 0;
+  }
+  .system-status-report {
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+}
diff --git a/core/themes/stable/templates/admin/status-report.html.twig b/core/themes/stable/templates/admin/status-report.html.twig
index 7f4c600..a63f8e3 100644
--- a/core/themes/stable/templates/admin/status-report.html.twig
+++ b/core/themes/stable/templates/admin/status-report.html.twig
@@ -15,6 +15,44 @@
  * @see template_preprocess_status_report()
  */
 #}
+{% if error != 0 or warning != 0 or checked != 0 %}
+  <span class="all-exits system-status-report-counter">
+    <span class=" system-status-report__status-title all-same system-status-report__status-icon system-status-report__status-icon--error"></span>
+    <span class='error er-wr-detail'>
+      {{ error }} {{'error'|t }}
+    </span>
+  </span>
+  <span class="all-exits system-status-report-counter">
+    <span class="system-status-report__status-title all-same  system-status-report__status-icon system-status-report__status-icon--warning"></span>
+    <span class='warning er-wr-detail'>
+      {{ warning }} {{ 'warning'|t }}
+    </span>
+  </span>
+  <span class="all-exits system-status-report-counter">
+    <span class="system-status-report__status-title all-same system-status-report__status-icon system-status-report__status-icon--checked"></span>
+    <span class="checked er-wr-detail">
+      {{ checked }} {{ 'checked'|t }}
+    </span>
+  </span>
+  {% elseif error != 0 or checked != 0 %}
+    <span class=" half-width system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--error">
+      {{ error }} {{'error'|t }}
+    </span>
+    <span class=" half-width system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--checked">
+      {{ checked }} {{ 'checked'|t }}
+    </span>
+  {% elseif warning != 0 or checked != 0 %}
+    <span class=" half-width system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--warning">
+      {{ warning }} {{ 'warning'|t }}
+    </span>
+    <span class="system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--checked">
+      {{ checked }} {{ 'checked'|t }}
+    </span>
+  {% else %}
+    <span class="full-width test system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--checked">
+      {{ checked }} {{ 'checked'|t }}
+    </span>
+{% endif %}
 <table class="system-status-report">
   <tbody>
   {% for requirement in requirements %}
