diff --git a/src/main/resources/public/css/conference.css b/src/main/resources/public/css/conference.css
index 8572b08..5a50b65 100644
--- a/src/main/resources/public/css/conference.css
+++ b/src/main/resources/public/css/conference.css
@@ -163,6 +163,22 @@ body {
     float: right;
 }
 
+.note-1 {
+    background-color: #bfffce;
+}
+
+.note-2 {
+    background-color: #eaffb4;
+}
+
+.note-3 {
+    background-color: #fff69f;
+}
+
+.note-4 {
+    background-color: #ff9973;
+}
+
 @media (max-width: 1199px) and (min-width: 768px){
     .paper-control {
         display: block!important;
diff --git a/src/main/resources/templates/conferences/fragments/confDashboardFragment.html b/src/main/resources/templates/conferences/fragments/confDashboardFragment.html
index 17f4aa6..5aabef2 100644
--- a/src/main/resources/templates/conferences/fragments/confDashboardFragment.html
+++ b/src/main/resources/templates/conferences/fragments/confDashboardFragment.html
@@ -4,12 +4,13 @@
     <meta charset="UTF-8"/>
 </head>
 <body>
-<div th:fragment="confDashboard (conference)" class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 dashboard-card">
+<div th:fragment="confDashboard (conference)" th:class="@{'col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 dashboard-card ' +
+                                                        ${conference.ping == 0 ? '' :
+                                                        conference.ping &lt; 5 ? 'note-1' :
+                                                        conference.ping &lt; 10 ? 'note-2' :
+                                                        conference.ping &lt; 15 ? 'note-3' : 'note-4'} + ''}">
     <div class="row">
-        <div class="col-2">
-
-        </div>
-        <div class="col col-10 text-right">
+        <div class="col text-right">
             <p th:if="${conference.url!=null and conference.url!=''}"><a target="_blank" th:href="${conference.url}"><i
                     class="fa fa-external-link fa-1x"
                     aria-hidden="true"></i></a></p>
