diff --git a/html5/chaos_report.js b/html5/chaos_report.js
index d735380..e9d78fc 100644
--- a/html5/chaos_report.js
+++ b/html5/chaos_report.js
@@ -79,13 +79,15 @@ function checkIfSomeItemIsEmpty(dict, except) {
   return false;
 }
 
+function chaosReportKeepAlive(chaosReportprojectName) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("GET", k8s_url + "/chaos/report/keepalive?project=" + chaosReportprojectName, true);
+  oReq.setRequestHeader("Content-Type", "application/json");
+  oReq.send();
+}
+
 function sendSavedChaosReport() {
-  startGameMode()
-  chaos_report_switch = true;
-  document.getElementById("httpStatsCanvasDiv").style.display = "block";
-  document.getElementById("chartDiv").style.display = "block";
 
-  drawCanvasHTTPStatusCodeStats()
   var presetBodyDict = {
     "chaosReportAuthor": $("#chaosReportAuthor").val(),
     "chaosReportProject": $("#chaosReportProject").val(),
@@ -95,10 +97,21 @@ function sendSavedChaosReport() {
     "chaosReportCheckSiteURLPayload": chaos_report_post_data
   }
 
+  if (!isValidURL(presetBodyDict["chaosReportCheckSiteURL"])) {
+    alert("Invalid URL");
+    return;
+  }
+
   if (chaos_report_start_date == "") {
     chaos_report_start_date = new Date();
   }
 
+  startGameMode()
+  chaos_report_switch = true;
+  document.getElementById("httpStatsCanvasDiv").style.display = "block";
+  document.getElementById("chartDiv").style.display = "block";
+  drawCanvasHTTPStatusCodeStats();
+
   chaosReportprojectName = presetBodyDict["chaosReportProject"];
   $("#chaosReportAuthorDiv").html(presetBodyDict["chaosReportAuthor"]);
   $("#chaosReportProjectDiv").html(presetBodyDict["chaosReportProject"]);
@@ -106,10 +119,6 @@ function sendSavedChaosReport() {
   $("#chaosReportSessionTimeDiv").html(diffBetweenTwoDates(chaos_report_start_date, new Date()) + " seconds");
   $("#chaosReportCheckSiteURLDiv").html(presetBodyDict["chaosReportCheckSiteURL"]);
 
-  if (!isValidURL(presetBodyDict["chaosReportCheckSiteURL"])) {
-    alert("Invalid URL");
-    return;
-  }
 
   if (headerAreLikePythonRequestHeaders(presetBodyDict["chaosReportCheckSiteURLHeaders"]) == false) {
     alert("Invalid headers. Insert them like this: \"Content-Type\": \"application/json; charset=utf-8\";\"Authorization\"");
@@ -149,7 +158,8 @@ function sendSavedChaosReport() {
   if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
     myHTTPElapsedChart.resize();
   }
-
+  document.getElementById("myCanvas").scrollIntoView(true);
+  document.getElementById("flagChaosReport").checked = true;
 }
 
 function readContentOfUploadedFile() {
@@ -176,7 +186,6 @@ function saveChaosReport() {
 }
 
 function updateElapsedTimeArray(projectName) {
-
   $("#chaosReportSessionTimeDiv").html(diffBetweenTwoDates(chaos_report_start_date, new Date()) + " seconds");
   console.log("[SAVE-CHAOS-REPORT-CONF] Diff Between Dates: " + toString(diffBetweenTwoDates(chaos_report_start_date, new Date())));
   console.log("[SAVE-CHAOS-REPORT-CONF] Updating elapsed time array for project: " + projectName);
@@ -195,6 +204,94 @@ function updateElapsedTimeArray(projectName) {
     } 
   };;
 
+  oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
+  oReq.setRequestHeader("Content-Type", "application/json");
+  oReq.send();
+  updateStatusCodePieChart(projectName);
+}
+
+function updateStatusCodePieChart(projectName) {
+  console.log("[SAVE-CHAOS-REPORT-CONF] Updating Status Code Pie Chart for project: " + projectName);
+  
+  var oReq = new XMLHttpRequest();
+  var redis_key = projectName + "_check_url_status_code";
+  console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
+  
+  oReq.onreadystatechange = function () {
+    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+      var status_code = this.responseText.trim();
+      console.log("[SAVE-CHAOS-REPORT-CONF] Status Code Pie Chart received from Redis: |" + status_code + "|");
+
+      chart_status_code_dict[status_code] =  chart_status_code_dict[status_code] + 1
+
+      myHTTPStatusCodeChart.setOption({
+        series: [
+          {
+            type: 'pie',
+            data: [
+              {
+                value: chart_status_code_dict["200"],
+                name: '200',
+                itemStyle: {color: 'green'},
+              },
+              {
+                value: chart_status_code_dict["500"],
+                name: '500',
+                itemStyle: {color: 'red'},
+              },
+              {
+                value: chart_status_code_dict["502"],
+                name: '502',
+                itemStyle: {color: 'red'},
+              },
+              {
+                value: chart_status_code_dict["503"],
+                name: '503',
+                itemStyle: {color: 'red'},
+              },
+              {
+                value: chart_status_code_dict["504"],
+                name: '504',
+                itemStyle: {color: 'red'},
+              },
+              {
+                value: chart_status_code_dict["400"],
+                name: '400',
+                itemStyle: {color: 'yellow'},
+              },
+              {
+                value: chart_status_code_dict["401"],
+                name: '401',
+                itemStyle: {color: 'yellow'},
+              },
+              {
+                value: chart_status_code_dict["403"],
+                name: '403',
+                itemStyle: {color: 'yellow'},
+              },
+              {
+                value: chart_status_code_dict["404"],
+                name: '404',
+                itemStyle: {color: 'yellow'},
+              },
+              {
+                value: chart_status_code_dict["Connection Error"],
+                name: 'Connection Error',
+                itemStyle: {color: 'black'},
+              },
+              {
+                value: chart_status_code_dict["Other"],
+                name: 'Other',
+                itemStyle: {color: 'grey'},
+              },
+            ],
+            roseType: 'area'
+          }
+        ]
+      });
+    } 
+  };;
+
   oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
   oReq.setRequestHeader("Content-Type", "application/json");
   oReq.send();
@@ -416,29 +513,59 @@ option = {
       type: 'pie',
       data: [
         {
-          value: 23,
+          value: chart_status_code_dict["200"],
           name: '200',
           itemStyle: {color: 'green'},
         },
         {
-          value: 34,
+          value: chart_status_code_dict["500"],
           name: '500',
           itemStyle: {color: 'red'},
         },
         {
-          value: 34,
+          value: chart_status_code_dict["502"],
           name: '502',
-          itemStyle: {color: 'grey'},
+          itemStyle: {color: 'red'},
         },
         {
-          value: 34,
+          value: chart_status_code_dict["503"],
+          name: '503',
+          itemStyle: {color: 'red'},
+        },
+        {
+          value: chart_status_code_dict["504"],
           name: '504',
+          itemStyle: {color: 'red'},
+        },
+        {
+          value: chart_status_code_dict["400"],
+          name: '400',
+          itemStyle: {color: 'yellow'},
+        },
+        {
+          value: chart_status_code_dict["401"],
+          name: '401',
+          itemStyle: {color: 'yellow'},
+        },
+        {
+          value: chart_status_code_dict["403"],
+          name: '403',
+          itemStyle: {color: 'yellow'},
+        },
+        {
+          value: chart_status_code_dict["404"],
+          name: '404',
+          itemStyle: {color: 'yellow'},
+        },
+        {
+          value: chart_status_code_dict["Connection Error"],
+          name: 'Connection Error',
           itemStyle: {color: 'black'},
         },
         {
-          value: 34,
-          name: 'other',
-          itemStyle: {color: 'yellow'},
+          value: chart_status_code_dict["Other"],
+          name: 'Other',
+          itemStyle: {color: 'grey'},
         },
       ],
       roseType: 'area'
diff --git a/html5/images/favicon.ico b/html5/images/favicon.ico
index 6409f64..d8e905f 100644
Binary files a/html5/images/favicon.ico and b/html5/images/favicon.ico differ
diff --git a/html5/index.html b/html5/index.html
index 585d0d9..983e727 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -152,11 +152,11 @@
                       <label for="chaosReportHttpEndpointButton" style="margin-top: 1%;">add an http endpoint to be analyzed during the chaos engineering session</label>
                     </div>
                   </div>
-                  <div class="row">
+                  <!-- <div class="row">
                     <div class="col col-xl-10">
                       <button type="button" id="chaosReportHttpEndpointButton" class="btn btn-light-saved" style="margin-top: 1%; margin-bottom: 1%;" onclick="chaosReportHttpEndpointAdd()">Configure Site</button>
                     </div>
-                  </div>
+                  </div> -->
                   <div class="row">
                     <div class="col col-xl-10">
                       <div id="addSiteAreaChaosReport"></div>
@@ -170,7 +170,7 @@
               </div>
               <div class="modal-footer">
                 <button type="button" id="savePresetButton" class="btn btn-light" onclick="saveChaosReport()">Save</button>
-                <button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closePrepareChaosReportModal()">Close</button>
+                <button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closePrepareChaosReportModalAndUncheck()">Close</button>
               </div>
             </form>
           </div>
@@ -212,7 +212,7 @@
               <button type="button" id="gameModeButton" class="btn btn-light btn-green" onclick="startGameMode()">Game Mode</button>
             </div>
             <div class="col text-center" style="margin-bottom: 0%;">
-              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="showPrepareChaosReportModal(this)">
+              <input class="form-check-input" type="checkbox" value="" id="flagChaosReport" onclick="showPrepareChaosReportModal(this)">
               <label class="form-check-label text-kinv" for="flexCheckDefault">
                 Add HTTP check & Chaos Report
               </label>
@@ -268,15 +268,15 @@
         <div class="row text-justify" align="center" id="metricsPresetsRow">
           <div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
 
-              <span style="color: #000000;" class="text-kinv text-wrap" id="currentGameNamespaceLabel">Selected Namespace:&nbsp;&nbsp;<span id="currentGameNamespace" style="color: #3ac961;" class="text-break">NULL</span></span><br>
-              <span style="color: #000000;" class="text-kinv" id="deletedPodsTotalText">Deleted Pods Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #3ac961">0</span></span><br>
-              <span style="color: #000000"  class="text-kinv" id="chaosJobTotalText">Chaos Jobs Total:&nbsp;&nbsp;<span id="chaos_jobs_total" style="color: #3ac961">0</span></span><br>
+              <span style="color: #b2afaf;" class="text-kinv text-wrap" id="currentGameNamespaceLabel">Selected Namespace:&nbsp;&nbsp;<span id="currentGameNamespace" style="color: #3ac961;" class="text-break">NULL</span></span><br>
+              <span style="color: #b2afaf;" class="text-kinv" id="deletedPodsTotalText">Deleted Pods Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #3ac961">0</span></span><br>
+              <span style="color: #b2afaf"  class="text-kinv" id="chaosJobTotalText">Chaos Jobs Total:&nbsp;&nbsp;<span id="chaos_jobs_total" style="color: #3ac961">0</span></span><br>
 
-              <span style="color: #000000" class="text-kinv" id="currentChaosPodsText">Current Chaos Pods:&nbsp;&nbsp;<span id="current_chaos_job_pod" style="color: #3ac961">0</span></span><br>
-              <span style="color: #000000" class="text-kinv" id="podNotRunningText">Not Running Pods:&nbsp;&nbsp;<span id="pods_not_running_on" style="color: #3ac961">0</span></span><br>
+              <span style="color: #b2afaf" class="text-kinv" id="currentChaosPodsText">Current Chaos Pods:&nbsp;&nbsp;<span id="current_chaos_job_pod" style="color: #3ac961">0</span></span><br>
+              <span style="color: #b2afaf" class="text-kinv" id="podNotRunningText">Not Running Pods:&nbsp;&nbsp;<span id="pods_not_running_on" style="color: #3ac961">0</span></span><br>
 
-              <span style="color: #000000" class="text-kinv" id="currentReplicasStateDelayText">Current Replicas State Delay:&nbsp;&nbsp;</span><span id="fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font></span><br>
-              <span style="color: #000000" class="text-kinv" id="latestReplicasStateDelayText">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span><br>
+              <span style="color: #b2afaf" class="text-kinv" id="currentReplicasStateDelayText">Current Replicas State Delay:&nbsp;&nbsp;</span><span id="fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font></span><br>
+              <span style="color: #b2afaf" class="text-kinv" id="latestReplicasStateDelayText">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span><br>
               <div id="mainChaosMetrics" style="width: 50%;height: 50%; margin-top: 1%;"></div>
               
               <!-- <span style="color: #000000" class="text-kinv" id="podsMatchRegexText">PODs match regex:&nbsp;&nbsp;</span><span id="pods_match_regex" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;</font></span> -->
@@ -384,7 +384,7 @@ experiments:
         <div id="game-screen" style="display: none;">
           <div class="row" style="margin-top: 2%; display: none;" id="httpStatsCanvasDiv">
             <div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
-              <table class="table">
+              <table class="table" style="color:#b2afaf;">
                 <thead>
                   <tr>
                     <th scope="col"></th>
@@ -415,10 +415,10 @@ experiments:
               </table>
             </div>
             <div id="chartDiv" style="display: none;">
-              <label for="httpElapsedChart" style="margin-left: 2%; margin-top: 2%">HTTP Elapsed (seconds)</label>
-              <div id="httpElapsedChart" style="width: 100%; height: 400px;" ></div>
+              <label for="httpElapsedChart" style="margin-left: 2%; margin-top: 3%">HTTP Elapsed (seconds)</label>
+              <div id="httpElapsedChart" style="width: 100%; height: 400px; margin-top: 0%;" ></div>
               <label for="httpStatusCodeChart" style="margin-left: 2%;">HTTP Status Code</label>
-              <div id="httpStatusCodeChart" style="width: 50%; height: 200;"></div>
+              <div id="httpStatusCodeChart" style="width: 100%; height: 200px;"></div>
             </div>
           </div>          
           <div class="row" style="margin-top: 2%;">
diff --git a/html5/kubeinvaders.js b/html5/kubeinvaders.js
index 9fb52ca..43df567 100644
--- a/html5/kubeinvaders.js
+++ b/html5/kubeinvaders.js
@@ -108,6 +108,19 @@ var chart_current_chaos_job_pod = 0;
 var chart_pods_not_running_on = 0;
 var chart_fewer_replicas_seconds = 0;
 var chart_latest_fewer_replicas_seconds = 0;
+var chart_status_code_dict = {
+    "200": 0,
+    "500": 0,
+    "502": 0,
+    "503": 0,
+    "504": 0,
+    "400": 0,
+    "401": 0,
+    "403": 0,
+    "404": 0,
+    "Connection Error": 0,
+    "Other": 0
+};
 
 function getCodeName() {
     var oReq = new XMLHttpRequest();
@@ -846,8 +859,20 @@ window.setInterval(function backgroundTasks() {
     
     if (chaos_report_switch) {
         updateElapsedTimeArray(chaosReportprojectName);
-        updateChaosReportStartTime(chaosReportprojectName)
+        updateChaosReportStartTime(chaosReportprojectName);
         drawCanvasHTTPStatusCodeStats();
+        chaosReportKeepAlive(chaosReportprojectName);
+        // if(myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined){
+        //     myHTTPStatusCodeChart.resize();
+        // }
+        
+        // if(myMainChaosMetrics != null && myMainChaosMetrics != undefined){
+        //     myMainChaosMetrics.resize();
+        // }
+        
+        // if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
+        //     myHTTPElapsedChart.resize();
+        // }
     }
 
 }, 2000)
diff --git a/html5/modals.js b/html5/modals.js
index 74acf47..d96aaf5 100644
--- a/html5/modals.js
+++ b/html5/modals.js
@@ -48,6 +48,7 @@ function showPrepareChaosReportModal(checkbox) {
     setCodeNameToTextInput("chaosReportAuthor");
     setCodeNameToTextInput("chaosReportProject");
     setModalState(true);
+    chaosReportHttpEndpointAdd();
     //$("#httpStatsCanvasDiv").style.display = "block";
   } else {
     closePrepareChaosReportModal();
@@ -56,5 +57,12 @@ function showPrepareChaosReportModal(checkbox) {
 
 function closePrepareChaosReportModal() {
   $('#prepareChaosReportModal').modal('hide');
+  document.getElementById("flagChaosReport").checked = false;
+  setModalState(false);
+}
+
+function closePrepareChaosReportModalAndUncheck() {
+  $('#prepareChaosReportModal').modal('hide');
+  document.getElementById("flagChaosReport").checked = false;
   setModalState(false);
 }
\ No newline at end of file