diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index f9c49c7..77aaa43 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -163,6 +163,22 @@ function template_preprocess_status_report(&$variables) {
     $variables['requirements'][$i]['severity_title'] = $severity['title'];
     $variables['requirements'][$i]['severity_status'] = $severity['status'];
   }
+  
+  $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..376918b 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 {
@@ -210,7 +210,7 @@ small .admin-link:after {
   font-weight: normal;
 }
 [dir="rtl"] .system-status-report__status-title {
-    padding: 10px 40px 10px 6px;
+  padding: 10px 40px 10px 6px;
 }
 .system-status-report__status-icon:before {
   content: "";
@@ -232,11 +232,14 @@ small .admin-link:after {
 .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);
+}
 
 /**
  * Appearance page.
  */
-.theme-info__header {
+ .theme-info__header {
   margin-bottom: 0;
   font-weight: normal;
 }
@@ -281,7 +284,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 +317,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 +390,38 @@ small .admin-link:after {
 [dir="rtl"] .system-themes-admin-form {
   clear: right;
 }
+
+/**** css for status report ****/
+.system-status-report-counter {
+  border: 1px solid #e6e4df;
+  margin-right: 10px;
+  border-radius: 5px;
+  height: 85px;
+  vertical-align: middle;
+  line-height: 85px;
+  font-size: 20px;
+  font-weight: bold;
+}
+span.all-exits.system-status-report-counter {
+  width: 32.3%;
+  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;
+}
+.er-wr-detail {
+    display: inline-block;
+    padding: 0px 5px;
+    height: 85px;
+}
\ No newline at end of file
diff --git a/core/themes/stable/templates/admin/status-report.html.twig b/core/themes/stable/templates/admin/status-report.html.twig
index 7f4c600..905e179 100644
--- a/core/themes/stable/templates/admin/status-report.html.twig
+++ b/core/themes/stable/templates/admin/status-report.html.twig
@@ -16,6 +16,29 @@
  */
 #}
 <table class="system-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 %}
   <tbody>
   {% for requirement in requirements %}
     <tr class="system-status-report__entry system-status-report__entry--{{ requirement.severity_status }} color-{{ requirement.severity_status }}">