diff --git a/cara/apps/calculator/static/css/report.css b/cara/apps/calculator/static/css/report.css
index be80c21f..a2d86159 100644
--- a/cara/apps/calculator/static/css/report.css
+++ b/cara/apps/calculator/static/css/report.css
@@ -1,85 +1,174 @@
 #body {
-	top: 10px;
-	left: 20px;
-	bottom: 20px;
-	right: 20px;
-	padding: 20px;
+    top: 10px;
+    left: 20px;
+    bottom: 20px;
+    right: 20px;
+    padding: 20px;
 }
 
 h1 {
-	text-align: center;
+    text-align: center;
 }
 
 .subtitle {
-	text-align: center;
-	font-size: 13pt;
-	padding-bottom: 15pt;
+    text-align: center;
+    font-size: 13pt;
+    padding-bottom: 15pt;
 }
 
 p.data_italic {
-	font-style: italic;
+    font-style: italic;
 }
 
 p.data_title {
-	font-weight: bold;
+    font-weight: bold;
 }
 
 p.data_text {
-	padding-left: 30px;
+    padding-left: 30px;
 }
 
 p.data_subtext {
-	padding-left: 60px;
-	margin-left: -3em;
+    padding-left: 60px;
+    margin-left: -3em;
 }
 
 p.result_title {
-	font-weight: bold;
-	font-size: 15pt;
+    font-weight: bold;
+    font-size: 15pt;
 }
 
 p.image {
-	text-align: center;
-	font-size: 13pt;
+    text-align: center;
+    font-size: 13pt;
 }
 
 p.disclaimer {
-	font-size: 12pt;
+    font-size: 12pt;
 }
 
 p.notes {
-	font-size: 10pt;
+    font-size: 10pt;
 }
 
 .red_bkg {
-  color: #000000;
-  background-color: #CD5C5C;
-  text-decoration: none;
+    color: #000000;
+    background-color: #CD5C5C;
+    text-decoration: none;
 }
 
 .yellow_bkg {
-  color: #000000;
-  background-color: #FFFF00;
-  text-decoration: none;
+    color: #000000;
+    background-color: #FFFF00;
+    text-decoration: none;
 }
 
 .green_bkg {
-  color: #000000;
-  background-color: #90EE90;
-  text-decoration: none;
+    color: #000000;
+    background-color: #90EE90;
+    text-decoration: none;
 }
 
 .icon_button {
-	border: none;
-	background: none;
+    border: none;
+    background: none;
 }
 
-.icon_button:focus { outline:0 !important; }
+.icon_button:focus {
+    outline: 0 !important;
+}
 
 .nav-tabs .nav-item .nav-link.active {
-	font-weight: bold;
+    font-weight: bold;
 }
 
-.nav-tabs .nav-item .nav-link{
-	color: black;
+.nav-tabs .nav-item .nav-link {
+    color: black;
+}
+
+
+/* CSS for the animation */
+
+.green-1 {
+    background-color: green!important;
+    background-image: linear-gradient(90deg, #0f9403, #85fd55);
+}
+
+.yellow-2 {
+    background-color: yellow!important;
+    background-image: linear-gradient(90deg, #fdf255, #fffb00);
+}
+
+.orange-3 {
+    background-color: orange!important;
+    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
+}
+
+.red-4 {
+    background-color: #ed184f!important;
+    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
+}
+
+.intro-banner-vdo-play-btn {
+    height: 60px;
+    width: 60px;
+    position: relative;
+    text-align: center;
+    border-radius: 100px;
+    z-index: 1
+}
+
+.intro-banner-vdo-play-btn i {
+    line-height: 56px;
+    font-size: 30px
+}
+
+.intro-banner-vdo-play-btn .ripple {
+    position: absolute;
+    width: 160px;
+    height: 160px;
+    z-index: -1;
+    left: 50%;
+    top: 50%;
+    opacity: 0;
+    margin: -80px 0 0 -80px;
+    border-radius: 100px;
+    -webkit-animation: ripple 1.8s infinite;
+    animation: ripple 1.8s infinite
+}
+
+@-webkit-keyframes ripple {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(0);
+        transform: scale(0)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+}
+
+@keyframes ripple {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(0);
+        transform: scale(0)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+}
+
+.intro-banner-vdo-play-btn .ripple:nth-child(2) {
+    animation-delay: .3s;
+    -webkit-animation-delay: .3s
+}
+
+.intro-banner-vdo-play-btn .ripple:nth-child(3) {
+    animation-delay: .6s;
+    -webkit-animation-delay: .6s
 }
\ No newline at end of file
diff --git a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2 b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
index a4f92a1d..0737ef63 100644
--- a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
+++ b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
@@ -1,6 +1,7 @@
 {% extends "base/calculator.report.html.j2" %}
 
 {% block report_summary %}
+
   <span
     {% if ((prob_inf > 15) or (expected_new_cases >= 1)) %}
       ><div class="alert alert-danger" role="alert">
@@ -20,30 +21,43 @@
     {% endif %}
   </span>
 
-  {% if (prob_inf > 5) %}
-    <div class="d-flex align-self-center">
-    {% if scale_warning.level == "green-1" %}  
-      <div class="alert alert-dark" role="alert" style="height:fit-content">
-        Note: the current CERN COVID Scale is <b>Green - 1</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. Align your risk assessment with the guidance and instructions provided by the HSE Unit.  
+  <div class="d-flex flex-row">
+    {% if (prob_inf > 5) %}
+      <div class="d-flex align-self-center w-75">
+      {% if scale_warning.level == "green-1" %}  
+        <div class="alert alert-dark" role="alert" style="height:fit-content">
+          Note: the current CERN COVID Scale is <b>Green - 1</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. Align your risk assessment with the guidance and instructions provided by the HSE Unit.  
+        </div>
+      {% elif scale_warning.level == "yellow-2" %}
+        <div class="alert alert-dark" role="alert" style="height:fit-content">
+          Note: the current CERN COVID Scale is <b>Yellow - 2</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a reduced chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if this scenario is acceptable.
+        </div>
+      {% elif scale_warning.level == "orange-3" %}
+        <div class="alert alert-dark" role="alert" style="height:fit-content">
+          Warning: the current CERN COVID Scale is <b>Orange - 3</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a slight chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if any additional measures can be applied (ALARA).
+        </div>
+      {% elif scale_warning.level == "red-4" %}
+        <div class="alert alert-dark" role="alert" style="height:fit-content">
+          Warning: the current CERN COVID Scale is <b>Red - 4</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a strong chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. Please reduce the value below the threshold of <b>{{scale_warning.threshold}}</b>.
+        </div>
+      {% else %}
+        <p><b>Note:</b> The CERN COVID Level is not specified.</p>
+      {% endif %}
       </div>
-    {% elif scale_warning.level == "yellow-2" %}
-      <div class="alert alert-dark" role="alert" style="height:fit-content">
-        Note: the current CERN COVID Scale is <b>Yellow - 2</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a reduced chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if this scenario is acceptable.
-      </div>
-    {% elif scale_warning.level == "orange-3" %}
-      <div class="alert alert-dark" role="alert" style="height:fit-content">
-        Warning: the current CERN COVID Scale is <b>Orange - 3</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a slight chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. See with your supervisor if any additional measures can be applied (ALARA).
-      </div>
-    {% elif scale_warning.level == "red-4" %}
-      <div class="alert alert-dark" role="alert" style="height:fit-content">
-        Warning: the current CERN COVID Scale is <b>Red - 4</b>, which means the incidence rate in the local community is <b>{{scale_warning.incidence_rate}}</b>. There is a strong chance that asymptomatic or pre-symptomatic infected individuals circulate within the CERN site which, during this stage, corresponds to an average daily on-site access {{scale_warning.onsite_access}}. Please reduce the value below the threshold of <b>{{scale_warning.threshold}}</b>.
-      </div>
-    {% else %}
-      <p><b>Note:</b> The CERN COVID Level is not specified.</p>
+        
     {% endif %}
+
+    <div class="w-25 align-self-center">
+      <div class="intro-banner-vdo-play-btn {{scale_warning.level}} m-auto">
+        <b style="color: #00000099">{{prob_inf | non_zero_percentage}}</b>
+        <i class="glyphicon glyphicon-play whiteText" aria-hidden="true"></i>
+        <span class="ripple {{scale_warning.level}}"></span>
+        <span class="ripple {{scale_warning.level}}"></span>
+        <span class="ripple {{scale_warning.level}}"></span>
+      </div>
     </div>
-      
-  {% endif %}
+  </div>
+
 
   {% if ((prob_inf > 15) or (expected_new_cases >= 1)) %}
     This exceeds the authorised risk threshold or number of expected new cases.