diff --git a/README.md b/README.md
index 88bfedd..0acd160 100644
--- a/README.md
+++ b/README.md
@@ -288,7 +288,35 @@ spec:
   tls:
     termination: Edge
 ```
-
+## Add simple nginx Deployment for Pods to shot at
+```bash
+cat >deployment.yaml <<EOF
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: nginx-deployment
+spec:
+  selector:
+    matchLabels:
+      app: nginx
+  replicas: 20 # tells deployment to run 20 pods matching the template
+  template:
+    metadata:
+      labels:
+        app: nginx
+    spec:
+      containers:
+      - name: nginx
+        image: nginx:1.24.0
+        ports:
+        - containerPort: 81
+EOF
+```
+Apply Nginx Deployment in namespace1 and namespace2
+```bash
+sudo kubectl apply -f deployment.yaml -n namespace1
+sudo kubectl apply -f deployment.yaml -n namespace2
+```
 ## Usage
 
 At the top you will find some metrics as described below:
@@ -301,10 +329,6 @@ This is a control-plane you can use to switch off & on various features.
 
 ![Alt Text](./doc_images/control-plane.png)
 
-### YouTube HowTo
-
-[Video How To of version v1.9](https://www.youtube.com/watch?v=wD7ngPlNEjY)
-
 ### Start The Chaos Experiment
 
 Press the "Start" button to initiate the automatic pilot (the button changes to "Stop" to disable this feature).
diff --git a/html5/chaos_report.js b/html5/chaos_report.js
index ee5126c..efeae4d 100644
--- a/html5/chaos_report.js
+++ b/html5/chaos_report.js
@@ -1,5 +1,5 @@
 function setChaosReportURL(select) {
-  var selectedValue = select.options[select.selectedIndex].value; 
+  var selectedValue = select.options[select.selectedIndex].value;
   document.getElementById("chaosReportCheckSiteURL").value = selectedValue;
 }
 
@@ -26,24 +26,24 @@ function parseIngressListJSON(ingressList) {
 }
 
 function resizeCharts() {
-  if(myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined){
+  if (myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined) {
     myHTTPStatusCodeChart.resize();
   }
-  if(myMainChaosMetrics != null && myMainChaosMetrics != undefined){
+  if (myMainChaosMetrics != null && myMainChaosMetrics != undefined) {
     myMainChaosMetrics.resize();
   }
-  if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
+  if (myHTTPElapsedChart != null && myHTTPElapsedChart != undefined) {
     myHTTPElapsedChart.resize();
   }
 }
 
 function getIngressLists() {
-  var oReq = new XMLHttpRequest();  
+  var oReq = new XMLHttpRequest();
   oReq.onreadystatechange = function () {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       console.log("[SAVE-CHAOS-REPORT-INGRESS-LISTS]" + JSON.parse(this.responseText));
       parseIngressListJSON(JSON.parse(this.responseText));
-    } 
+    }
   };;
   oReq.open("GET", k8s_url + "/kube/ingress/get?namespace=" + namespace, true);
   oReq.setRequestHeader("Content-Type", "application/json");
@@ -108,8 +108,8 @@ function chaosReportHttpEndpointAdd() {
     </div>
   </div>
   `);
-  
-  if(is_demo_mode()) {
+
+  if (is_demo_mode()) {
     document.getElementById("chaosReportCheckSiteURL").readOnly = true;
   }
 }
@@ -121,7 +121,7 @@ function isValidURL(string) {
     return false;
   }
   return true;
-} 
+}
 
 function headerAreLikePythonRequestHeaders(headers) {
   var headersDict = {};
@@ -210,7 +210,7 @@ function sendSavedChaosReport() {
   oReq.setRequestHeader("Content-Type", "application/json");
   // console.log("[SAVE-CHAOS-REPORT-CONF] Sending configuration to Nginx: " + JSON.stringify(presetBodyDict));
   oReq.send(JSON.stringify(presetBodyDict));
-  closePrepareChaosReportModal();  
+  closePrepareChaosReportModal();
   resizeCharts();
   document.getElementById("myCanvas").scrollIntoView(true);
   document.getElementById("flagChaosReport").checked = true;
@@ -244,11 +244,11 @@ 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);
-  
+
   var oReq = new XMLHttpRequest();
   var redis_key = projectName + "_check_url_elapsed_time";
   // console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
-  
+
   oReq.onreadystatechange = function () {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       // console.log("[SAVE-CHAOS-REPORT-CONF] Elapsed time array received from Redis: " + parseFloat(this.responseText));
@@ -256,7 +256,7 @@ function updateElapsedTimeArray(projectName) {
       while (chaos_report_http_elapsed_time_array.length > 40) {
         chaos_report_http_elapsed_time_array.shift();
       }
-    } 
+    }
   };;
 
   oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -267,17 +267,17 @@ function updateElapsedTimeArray(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
+      chart_status_code_dict[status_code] = chart_status_code_dict[status_code] + 1
 
       myHTTPStatusCodeChart.setOption({
         series: [
@@ -287,64 +287,64 @@ function updateStatusCodePieChart(projectName) {
               {
                 value: chart_status_code_dict["200"],
                 name: '200',
-                itemStyle: {color: 'green'},
+                itemStyle: { color: 'green' },
               },
               {
                 value: chart_status_code_dict["500"],
                 name: '500',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["502"],
                 name: '502',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["503"],
                 name: '503',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["504"],
                 name: '504',
-                itemStyle: {color: 'red'},
+                itemStyle: { color: 'red' },
               },
               {
                 value: chart_status_code_dict["400"],
                 name: '400',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["401"],
                 name: '401',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["403"],
                 name: '403',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["404"],
                 name: '404',
-                itemStyle: {color: 'yellow'},
+                itemStyle: { color: 'yellow' },
               },
               {
                 value: chart_status_code_dict["Connection Error"],
                 name: 'Connection Error',
-                itemStyle: {color: 'black'},
+                itemStyle: { color: 'black' },
               },
               {
                 value: chart_status_code_dict["Other"],
                 name: 'Other',
-                itemStyle: {color: 'grey'},
+                itemStyle: { color: 'grey' },
               },
             ],
             roseType: 'area'
           }
         ]
       });
-    } 
+    }
   };;
 
   oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -354,15 +354,15 @@ function updateStatusCodePieChart(projectName) {
 
 function updateChaosReportStartTime(projectName) {
   // console.log("[SAVE-CHAOS-REPORT-CONF] Updating Start Time for project: " + projectName);
-  
+
   var oReq = new XMLHttpRequest();
   var redis_key = projectName + "_check_url_start_time";
   // console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
-  
+
   oReq.onreadystatechange = function () {
     if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
       $("#chaosReportDateDiv").html(this.responseText);
-    } 
+    }
   };;
 
   oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -391,11 +391,11 @@ function updateMainMetricsChart() {
             name: 'Not Running Pods'
           },
           {
-            value:  Number(chart_fewer_replicas_seconds),
+            value: Number(chart_fewer_replicas_seconds),
             name: 'Current Replicas State Delay'
           },
           {
-            value:  Number(chart_latest_fewer_replicas_seconds),
+            value: Number(chart_latest_fewer_replicas_seconds),
             name: 'Latest Replicas State Delay'
           }
         ],
@@ -407,7 +407,7 @@ function updateMainMetricsChart() {
 
 function drawCanvasHTTPStatusCodeStats() {
   // // console.log("[SAVE-CHAOS-REPORT-CONF] Updating chart");
-  
+
   myHTTPElapsedChart.setOption({
     xAxis: {},
     yAxis: {
@@ -491,57 +491,57 @@ option = {
         {
           value: chart_status_code_dict["200"],
           name: '200',
-          itemStyle: {color: 'green'},
+          itemStyle: { color: 'green' },
         },
         {
           value: chart_status_code_dict["500"],
           name: '500',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["502"],
           name: '502',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["503"],
           name: '503',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["504"],
           name: '504',
-          itemStyle: {color: 'red'},
+          itemStyle: { color: 'red' },
         },
         {
           value: chart_status_code_dict["400"],
           name: '400',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["401"],
           name: '401',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["403"],
           name: '403',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["404"],
           name: '404',
-          itemStyle: {color: 'yellow'},
+          itemStyle: { color: 'yellow' },
         },
         {
           value: chart_status_code_dict["Connection Error"],
           name: 'Connection Error',
-          itemStyle: {color: 'black'},
+          itemStyle: { color: 'black' },
         },
         {
           value: chart_status_code_dict["Other"],
           name: 'Other',
-          itemStyle: {color: 'grey'},
+          itemStyle: { color: 'grey' },
         },
       ],
       roseType: 'area'
@@ -551,6 +551,6 @@ option = {
 
 myHTTPStatusCodeChart.setOption(option);
 
-$(window).on('resize', function(){
+$(window).on('resize', function () {
   resizeCharts();
 });
\ No newline at end of file
diff --git a/html5/game_console.js b/html5/game_console.js
index baec0f3..46a92e6 100644
--- a/html5/game_console.js
+++ b/html5/game_console.js
@@ -3,7 +3,7 @@ function zoomIn() {
   document.getElementById("gameContainer").style.width = "100%"
   document.getElementById("gameContainer").style.height = "100%";
   document.getElementById("zoomInGameScreenInput").disabled = true;
-  document.getElementById("zoomOutGameScreenInput").disabled = false; 
+  document.getElementById("zoomOutGameScreenInput").disabled = false;
   document.getElementById("zoomInGameScreenInput2").disabled = true;
   document.getElementById("zoomOutGameScreenInput2").disabled = false;
   document.getElementById("loadButtonGroup").style.width = "1200px";
@@ -14,10 +14,10 @@ function zoomOut() {
   var gameContainerHeight = document.getElementById("gameContainer").style.height;
   document.getElementById("gameContainer").style.width = "50%"
   document.getElementById("gameContainer").style.height = "50%"
-  document.getElementById("zoomInGameScreenInput").disabled = false; 
+  document.getElementById("zoomInGameScreenInput").disabled = false;
   document.getElementById("zoomOutGameScreenInput").disabled = true;
-  document.getElementById("zoomInGameScreenInput2").disabled = false; 
-  document.getElementById("zoomOutGameScreenInput2").disabled = true; 
+  document.getElementById("zoomInGameScreenInput2").disabled = false;
+  document.getElementById("zoomOutGameScreenInput2").disabled = true;
   document.getElementById("loadButtonGroup").style.width = "900px";
 }
 
@@ -52,17 +52,17 @@ function switchColorMode() {
     bodyElement.style.backgroundColor = "#0a0a0a";
     current_color_mode = "dark";
 
-    for (var i = 0; i < buttonsLightElement.length; i++) { 
+    for (var i = 0; i < buttonsLightElement.length; i++) {
       console.log("[COLOR-MODE-BUTTONS] Change color of " + buttonsLightElement[i].id);
       document.getElementById(buttonsLightElement[i].id).style.backgroundColor = "#1ed931";
     }
 
-    for (var i = 0; i < textkinv.length; i++) { 
+    for (var i = 0; i < textkinv.length; i++) {
       console.log("[COLOR-MODE-TEXT-KINV] Change color of " + textkinv[i].id);
       document.getElementById(textkinv[i].id).style.color = "#1ed931";
     }
 
-    for (var i = 0; i < alertkinv.length; i++) { 
+    for (var i = 0; i < alertkinv.length; i++) {
       console.log("[COLOR-MODE-ALERT-KINV] Change color of " + alertkinv[i].id);
       document.getElementById(alertkinv[i].id).style.color = "#1ed931";
       document.getElementById(alertkinv[i].id).style.backgroundColor = "#0a0a0a";
@@ -83,17 +83,17 @@ function switchColorMode() {
     bodyElement.style.backgroundColor = "#ffffff";
     current_color_mode = "light";
 
-    for (var i = 0; i < buttonsLightElement.length; i++) { 
+    for (var i = 0; i < buttonsLightElement.length; i++) {
       console.log("[COLOR-MODE-BUTTONS] Change color of " + buttonsLightElement[i].id);
       document.getElementById(buttonsLightElement[i].id).style.backgroundColor = "";
     }
 
-    for (var i = 0; i < textkinv.length; i++) { 
+    for (var i = 0; i < textkinv.length; i++) {
       console.log("[COLOR-MODE-TEXT-KINV] Change color of " + textkinv[i].id);
       document.getElementById(textkinv[i].id).style.color = "";
     }
 
-    for (var i = 0; i < alertkinv.length; i++) { 
+    for (var i = 0; i < alertkinv.length; i++) {
       console.log("[COLOR-MODE-ALERT-KINV] Change color of " + alertkinv[i].id);
       document.getElementById(alertkinv[i].id).style.color = "";
       document.getElementById(alertkinv[i].id).style.backgroundColor = "";
@@ -112,11 +112,11 @@ function switchColorMode() {
 }
 
 function switchNamespace() {
-  if (namespaces_index < namespaces.length-1) {
-      namespaces_index +=1 ;
+  if (namespaces_index < namespaces.length - 1) {
+    namespaces_index += 1;
   }
   else {
-      namespaces_index = 0;
+    namespaces_index = 0;
   }
   namespace = namespaces[namespaces_index];
   $('#currentGameNamespace').text(namespace);
@@ -134,18 +134,18 @@ function createChaosProgramButton(name, lang) {
   btn.name = "load" + capitalizedName;
   btn.id = "load" + capitalizedName;
   if (document.getElementById("load" + capitalizedName)) {
-      return;
+    return;
   }
   btn.style = "padding: 0% 2%;"
   btn.classList = "btn btn-light btn-sm";
-  btn.addEventListener("click", function(){ loadPreset(name, lang); });
-  document.getElementById("loadButtonGroup").appendChild(btn); 
+  btn.addEventListener("click", function () { loadPreset(name, lang); });
+  document.getElementById("loadButtonGroup").appendChild(btn);
   document.getElementById("loadButtonGroup").scrollLeft = document.getElementById("loadButtonGroup").scrollWidth;
 }
 
 function deleteChaosProgramButton(name) {
   let capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
-  document.getElementById("loadButtonGroup").removeChild(document.getElementById("load" + capitalizedName)); 
+  document.getElementById("loadButtonGroup").removeChild(document.getElementById("load" + capitalizedName));
 }
 
 function setLogConsole() {
diff --git a/html5/index.html b/html5/index.html
index bfd89b5..7710ca5 100644
--- a/html5/index.html
+++ b/html5/index.html
@@ -7,532 +7,619 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="./bootstrap-5.0.0-dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+      /* Adjust styling for sidebar */
+      *, button, div, canvas,a,p,h1,h2,h3,h4,h5 {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-weight: bold;
+      }
+      #mainChaosMetrics > div > canvas {
+        width: 100% !important;
+      }
+      #mainChaosMetrics > div {
+        width: 100% !important;
+
+      }
+      .sidebar {
+        height: 100%;
+        width: 250px;
+        position: fixed;
+        top: 0;
+        left: 0; /* Initially hide sidebar */
+        background-color: black; /* Dark color */
+        padding-top: 60px; /* Adjust according to your navbar height */
+        transition: left 0.3s ease; /* Smooth transition */
+      }
+      
+      .sidebar a {
+        padding: 10px 15px;
+        text-decoration: none;
+        font-size: 18px;
+        color: #ffffff;
+        display: block;
+      }
+
+      .sidebar #gameModeButton{
+        padding: 10px 15px;
+        text-decoration: none;
+        font-size: 18px;
+        color: #ffffff;
+        display: block;
+      }
+
+      .sidebar #programmingModeButton{
+        padding: 10px 15px;
+        text-decoration: none;
+        font-size: 18px;
+        color: #ffffff;
+        display: block;
+      }
+      
+      .sidebar a:hover {
+        background-color: #495057; /* Darker color on hover */
+      }
+      
+      /* Adjust styling for main content */
+      .main-content {
+        margin-left: 0; /* Initially no margin */
+        padding: 20px;
+        transition: margin-left 0.3s ease; /* Smooth transition */
+      }
+      
+      /* Adjust styling for toggler icon */
+      .toggler-icon {
+        color: #ffffff;
+        cursor: pointer;
+        position: fixed;
+        top: 20px;
+        left: 10px;
+        z-index: 999; /* Ensure it's above other elements */
+      }
+    </style>
   </head>
   <body id="kinvBody">  
     <div id="splash-screen">
         <img src="./images/kubeinvaders_spaceship.png" alt="Logo" class="splash-screen-img">
     </div>
-    <div id="main-game-div" style="display: block;">
-      <nav class="navbar navbar-expand-lg navbar-li bg-dark navbar-collapse">
-        <div class="container-fluid">
-          <span class="navbar-toggler navbar-toggler-icon" style="border-color: transparent; border-width: 1px;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
-          </span>
-          <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
-            <ul class="navbar-nav mr-auto">
-              <li class="nav-item" style="margin-top: 0.2%;">
-                <a class="nav-link" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  <font style="color: #ffffff;">Menu</font>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarDarkDropdownMenuLink">
-                  <li><a class="dropdown-item" href="#" onclick="showSpecialKeys()">Show Special Keys</a></li>
-                  <li><a class="dropdown-item" href="#" onclick="showCurrentChaosContainer()">Show Current Chaos Container for nodes</a></li>
-                  <li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Set Custom Chaos Container for nodes</a></li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#" onclick="switchColorMode()" id="switchColorModeLink">
-                  <svg xmlns="http://www.w3.org/2000/svg" style="color: #ffffff;" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
-                    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
-                  </svg>            
-                </a>
-              </li>
-            </ul>            
-          </div>
-        </div>
-      </nav>
-      <!-- Modal -->
-      <div class="modal fade" id="currentChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-body">
-              <pre id="currentChaosContainerYaml"></pre> 
-            </div>
-            <div class="modal-footer">
-              <button type="button" id="closeButton1" class="btn btn-light" data-dismiss="modal" onclick="closeCurrentChaosJobModal()">Close</button>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <!-- Modal -->
-      <div class="modal" id="kubeLinterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
-            <div class="modal-body">
-              <p id="currentKubeLinterResult"></hp> 
-            </div>
-            <div class="modal-footer">
-              <button type="button" id="closeButton2" class="btn btn-light" data-dismiss="modal" onclick="closeKubeLinterModal()">Close</button>
-            </div>
-        </div>
-      </div>
-
-      <!-- Modal -->
-      <div class="modal fade" id="setChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-body">
-              <form>
-                <div class="form-group">
-                  <label for="exampleFormControlTextarea1" style="margin-bottom: 3%;">Chaos Container Definition</label>
-                  <textarea class="form-control" id="currentChaosContainerJsonTextArea" rows="20"></textarea>
-                </div>
-                <div class="form-group">
-                  <p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" id="saveButton" class="btn btn-light" onclick="setChaosContainer()">Save</button>
-                  <button type="button" id="closeButton3" class="btn btn-dark" data-dismiss="modal" onclick="closeSetChaosContainerModal()">Close</button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Modal -->
-      <div class="modal fade" id="setLoadTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-        <div class="modal-dialog modal-xl" role="document">
-          <div class="modal-content">
-            <div class="modal-body">
-              <form>
-                <div class="form-group">
-                  
-                  <label for="exampleFormControlTextarea1" style="margin-bottom: 1%;">Load Test Code</label><br>
-
-                  <label for="presetName">Name</label>
-                  <input type="text" id="presetName" value="foobar" readonly="true" style="margin-bottom: 1%;"><br>
-
-                  <label for="presetLangText">Programming Language</label>
-                  <input type="text" id="presetLang" value="Python3" readonly="true" style="margin-bottom: 1%;">
-
-                  <textarea class="form-control" id="currentLoadTest" rows="20" style="color: #161616; font-family: 'Courier New', Courier, monospace;"></textarea>
-
-                </div>
-                <div class="form-group">
-                  <p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" id="saveAndApplyButton" class="btn btn-light" onclick="savePreset('apply')">Save and apply</button>
-                  <button type="button" id="savePresetButton" class="btn btn-light" onclick="savePreset('save')">Save</button>
-                  <button type="button" id="resetToDefaultButton" class="btn btn-light-saved" onclick="resetPreset('preset')">Reset to default</button>
-                  <button type="button" id="deleteChaosProgramButton" class="btn btn-dark" onclick="resetPreset('k-inv')">Delete</button>
-                  <button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closeSetLoadTestModal()">Close</button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div class="sidebar" id="sidebar">
+      <a id="gameModeButton" onclick="startGameMode()">Game Mode</a>
+      <a id="programmingModeButton"  onclick="startProgrammingMode()">Programming Mode</a>
+      <a href="#" onclick="showSpecialKeys()">Show Special Keys</a>
+      <a href="#" onclick="showCurrentChaosContainer()">Show Current Chaos Container for nodes</a>
+      <a href="#" onclick="showSetCurrentChaosContainer()">Set Custom Chaos Container for nodes</a>
+    </div>
     
-      <!-- Modal -->
-      <div class="modal fade" id="prepareChaosReportModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-        <div class="modal-dialog modal-xl" role="document">
-          <div class="modal-content">
-            <div class="modal-body">
-              <form>
-                <div class="form-group row">
-                  <div class="col col-xl-10">
-                    <label for="" style="margin-bottom: 1%;" id="chaosReportHeader"></label>
-                    <div class="row">
-                      <div class="col col-xl-10">
-                        <label for="chaosReportProject">Project</label>
-                        <input type="text" id="chaosReportProject" value="" style="margin-bottom: 1%; width: 50%;">
-                      </div>
-                    </div>
-                    <div class="row">
-                      <div class="col col-xl-10">
-                        <label for="chaosReportAuthor">Author</label>
-                        <input type="text" id="chaosReportAuthor" value="" style="margin-bottom: 1%; width: 50%;">
-                      </div>
-                    </div>
-                    <!-- <div class="row">
-                      <div class="col col-xl-10">
-                        <label for="chaosReportDate">Date</label>
-                        <input type="text" id="chaosReportDate" value="" style="margin-bottom: 1%; width: 30%;">
-                      </div>
-                    </div> -->
-                    <div class="row">
-                      <div class="col col-xl-10">
-                        <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="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 class="row">
-                      <div class="col col-xl-10">
-                        <div id="addSiteAreaChaosReport"></div>
-                      </div>
-                    </div>
-                    <!-- <textarea class="form-control" id="chaosReportTextArea" rows="20" style="color: #161616; font-family: 'Courier New', Courier, monospace;"></textarea> -->
-                  </div>
-                </div>
-                <div class="form-group">
-                  <p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 1%;"></p>
-                </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="closePrepareChaosReportModalAndUncheck()">Close</button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Modal -->
-      <div class="modal fade" id="showSpecialKeysModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-body">
-              <div class="card">
-                <div class="card-header">
-                  Special Keys
-                </div>
-                <div class="card-body">
-                  <p class="card-text">
-                    h => Activate or deactivate help<br>
-                    s => Activate or deactivate shuffle for aliens<br>
-                    n => Change namespace<br>
-                    p => Activate or deactivate chaos engineering against pods<br>
-                    c => Activate or deactivate chaos engineering against nodes
-                  </p>
-                </div>
+    <!-- Main content -->
+    <div class="main-content">
+      <!-- Navbar -->
+  
+          <span style="color:white" class="toggler-icon" onclick="toggleSidebar()">
+            <i class="fas fa-bars"></i>
+          </span>
+    
+      
+      <div id="main-game-div" style="display: block;">
+        <!-- Modal -->
+        <div class="modal fade" id="currentChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-body">
+                <pre id="currentChaosContainerYaml"></pre> 
               </div>
               <div class="modal-footer">
-                <button type="button" id="closeButton5" class="btn btn-secondary" data-dismiss="modal" onclick="closeSpecialKeysModal()">Close</button>
+                <button type="button" id="closeButton1" class="btn btn-light" data-dismiss="modal" onclick="closeCurrentChaosJobModal()">Close</button>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="container" id="gameContainer" style="width: 50%; height: 50%;">
-          <!-- START FIRST ROW -->
-          <div class="row custom-btn-group" style="margin-top: 2%;">
-            <!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
-            <div class="row" style="margin-bottom: 2%;">
-              <div class="col text-center" style="margin-bottom: 2%;">
-                <button type="button" id="gameModeButton" class="btn btn-light btn-green" onclick="startGameMode()">Game Mode</button>
+  
+        <!-- Modal -->
+        <div class="modal" id="kubeLinterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
+              <div class="modal-body">
+                <p id="currentKubeLinterResult"></hp> 
               </div>
-              <div class="col text-center" style="margin-bottom: 0%;">
-                <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>
+              <div class="modal-footer">
+                <button type="button" id="closeButton2" class="btn btn-light" data-dismiss="modal" onclick="closeKubeLinterModal()">Close</button>
               </div>
-              <div class="col text-center" style="margin-bottom: 2%;">
-                <button type="button" id="programmingModeButton" class="btn btn-light btn-green" onclick="startProgrammingMode()">Programming Mode</button>
-              </div>
-            </div>
-
-
-            <div class="accordion" id="guide" style="margin-top: 2%; margin-bottom: 2%;">
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="guide-headingThree">
-                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                    k-inv guide - chaos mode controls and metrics
-                  </button>
-                </h2>
-                <div id="guide-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
-                  <div class="accordion-body">
-Dear user, thank you for installing kubeinvaders!<br>
-<br>
-This is a chaos engineering tool written by luckysideburn and friends from https://platformengineering.it for the community of kubernetes users, software developers, and admins.<br>
-It was born in 2019 as a gamified chaos engineering tool, and we are evolving it into a more serious instrument :d <br>
-here's how it works<br> 
-
-For reports, bugs, ideas you can open issue on the project github repo https://github.com/lucky-sideburn/kubeinvaders or write to luckysideburn [at] gmail [dot] com <br>
-
-<br>
-<font color="blue">[[game mode button]]</font><br>
-Enabling the game console allows you to kill pods and launch workloads to stress cluster nodes (check "show keys and options" to understand how to do it). You can also jump between namespace and many other things.<br>
-<br>
-<font color="blue">[[add http check & chaos report checkbox]]</font><br>
-Use it to activate the monitoring of an ingress and generate real-time reporting. it's very useful to know what happens to your applications during chaos sessions. for now, we monitor the elapsed time of http calls and status codes. also, you have some very useful default metrics:<br>
-<br>
-<font color="gren">Selected namespace</font> => indicates the current namespace focused on by the tool. you can jump between selected namespaces during installation.<br>
-<br>
-<font color="gren">>Deleted pods total</font> => total number of killed pods.<br>
-<br>
-<font color="gren">Current chaos pods</font> => when the node stress test mode is activated, this metric indicates the number of jobs stressing your cluster.<br>
-<br>
-<font color="gren">Current replicas state delay</font> => a very important metric, indicates how long your cluster takes to return to the desired state that was before the chaos engineering session.<br>
-<br>
-<font color="blue">[[enable prog. mode button (under development)]]</font><br>
-Through yaml programming, you can define your own chaos engineering experiments and execute them. we have preloaded some presets for various open-source tools to stress test (this feature is still in development, so contributions are welcome).<br>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <!-- END SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
-
-            <!-- START CHAOS PROGRAM BUTTONS -->
-            <div id="programming-mode-buttons" style="display: none;">
-              <div class="row">
-                <div class="col text-center">
-                </div>
-                <div class="col text-center">
-                </div>
-                <div class="col text-center">
-                </div>
-              </div>
-            <!-- END CHAOS PROGRAMM BUTTONS -->
           </div>
-          <!-- END FIRST ROW -->
-
-          <!-- START GAME MODE BUTTONS -->
-          <div id="game-buttons" style="display: none;">
-            <div class="row container">
-              <div class="col text-center">
-                <button type="button" id="controlAutoPilotButton" class="btn btn-dark" onclick="controlAutoPilot()">Start</button>
-              </div>
-              <div class="col">
-              </div>
-              <div class="col">
-                <input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
-                <label for="randomFactorInput" class="text-kinv" id="randomFactorText">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
+        </div>
+  
+        <!-- Modal -->
+        <div class="modal fade" id="setChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-body">
+                <form>
+                  <div class="form-group">
+                    <label for="exampleFormControlTextarea1" style="margin-bottom: 3%;">Chaos Container Definition</label>
+                    <textarea class="form-control" id="currentChaosContainerJsonTextArea" rows="20"></textarea>
+                  </div>
+                  <div class="form-group">
+                    <p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" id="saveButton" class="btn btn-light" onclick="setChaosContainer()">Save</button>
+                    <button type="button" id="closeButton3" class="btn btn-dark" data-dismiss="modal" onclick="closeSetChaosContainerModal()">Close</button>
+                  </div>
+                </form>
               </div>
             </div>
-            <div class="row container" style="margin-top: 1%;">
-              <div class="col text-center">
-                <button style="margin-bottom: 2%" type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
+          </div>
+        </div>
+  
+        <!-- Modal -->
+        <div class="modal fade" id="setLoadTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog modal-xl" role="document">
+            <div class="modal-content">
+              <div class="modal-body">
+                <form>
+                  <div class="form-group">
+                    
+                    <label for="exampleFormControlTextarea1" style="margin-bottom: 1%;">Load Test Code</label><br>
+  
+                    <label for="presetName">Name</label>
+                    <input type="text" id="presetName" value="foobar" readonly="true" style="margin-bottom: 1%;"><br>
+  
+                    <label for="presetLangText">Programming Language</label>
+                    <input type="text" id="presetLang" value="Python3" readonly="true" style="margin-bottom: 1%;">
+  
+                    <textarea class="form-control" id="currentLoadTest" rows="20" style="color: #161616; font-family: 'Courier New', Courier, monospace;"></textarea>
+  
+                  </div>
+                  <div class="form-group">
+                    <p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" id="saveAndApplyButton" class="btn btn-light" onclick="savePreset('apply')">Save and apply</button>
+                    <button type="button" id="savePresetButton" class="btn btn-light" onclick="savePreset('save')">Save</button>
+                    <button type="button" id="resetToDefaultButton" class="btn btn-light-saved" onclick="resetPreset('preset')">Reset to default</button>
+                    <button type="button" id="deleteChaosProgramButton" class="btn btn-dark" onclick="resetPreset('k-inv')">Delete</button>
+                    <button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closeSetLoadTestModal()">Close</button>
+                  </div>
+                </form>
               </div>
-              <div class="col text-center">
-                <button style="margin-bottom: 2%" type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
+            </div>
+          </div>
+        </div>
+      
+        <!-- Modal -->
+        <div class="modal fade" id="prepareChaosReportModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog modal-xl" role="document">
+            <div class="modal-content">
+              <div class="modal-body">
+                <form>
+                  <div class="form-group row">
+                    <div class="col col-xl-10">
+                      <label for="" style="margin-bottom: 1%;" id="chaosReportHeader"></label>
+                      <div class="row">
+                        <div class="col col-xl-10">
+                          <label for="chaosReportProject">Project</label>
+                          <input type="text" id="chaosReportProject" value="" style="margin-bottom: 1%;">
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col col-xl-10">
+                          <label for="chaosReportAuthor">Author</label>
+                          <input type="text" id="chaosReportAuthor" value="" style="margin-bottom: 1%; width: 100%;">
+                        </div>
+                      </div>
+                      <!-- <div class="row">
+                        <div class="col col-xl-10">
+                          <label for="chaosReportDate">Date</label>
+                          <input type="text" id="chaosReportDate" value="" style="margin-bottom: 1%; width: 30%;">
+                        </div>
+                      </div> -->
+                      <div class="row">
+                        <div class="col col-xl-10">
+                          <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="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 class="row">
+                        <div class="col col-xl-10">
+                          <div id="addSiteAreaChaosReport"></div>
+                        </div>
+                      </div>
+                      <!-- <textarea class="form-control" id="chaosReportTextArea" rows="20" style="color: #161616; font-family: 'Courier New', Courier, monospace;"></textarea> -->
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 1%;"></p>
+                  </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="closePrepareChaosReportModalAndUncheck()">Close</button>
+                  </div>
+                </form>
               </div>
-              <div class="col text-center">
-                <button style="margin-bottom: 2%" type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
-              </div>
-
-              <div class="accordion" id="specialkeys" style="margin-top: 2%; margin-bottom: 2%;">
-                <div class="accordion-item">
-                  <h2 class="accordion-header" id="specialkeys-headingThree">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#specialkeys-collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                      show keys and options
-                    </button>
-                  </h2>
-                  <div id="specialkeys-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
-                    <div class="accordion-body">
+            </div>
+          </div>
+        </div>
+        <!-- Modal -->
+        <div class="modal fade" id="showSpecialKeysModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-body">
+                <div class="card">
+                  <div class="card-header">
+                    Special Keys
+                  </div>
+                  <div class="card-body">
+                    <p class="card-text">
                       h => Activate or deactivate help<br>
                       s => Activate or deactivate shuffle for aliens<br>
                       n => Change namespace<br>
                       p => Activate or deactivate chaos engineering against pods<br>
                       c => Activate or deactivate chaos engineering against nodes
+                    </p>
+                  </div>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" id="closeButton5" class="btn btn-secondary" data-dismiss="modal" onclick="closeSpecialKeysModal()">Close</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="container" id="gameContainer">
+            <!-- START FIRST ROW -->
+            <div class="row custom-btn-group" style="margin-top: 2%;">
+              <!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
+              <div class="row" style="margin-bottom: 2%;">
+                
+                <div class="col text-center" style="margin-bottom: 0%;">
+                  <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>
+                </div>
+                
+              </div>
+  
+  
+              <div class="accordion" id="guide" style="margin-top: 2%; margin-bottom: 2%;">
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="guide-headingThree">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#guide-collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                      k-inv guide - chaos mode controls and metrics
+                    </button>
+                  </h2>
+                  <div id="guide-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                    <div class="accordion-body">
+  Dear user, thank you for installing kubeinvaders!<br>
+  <br>
+  This is a chaos engineering tool written by luckysideburn and friends from https://platformengineering.it for the community of kubernetes users, software developers, and admins.<br>
+  It was born in 2019 as a gamified chaos engineering tool, and we are evolving it into a more serious instrument :d <br>
+  here's how it works<br> 
+  
+  For reports, bugs, ideas you can open issue on the project github repo https://github.com/lucky-sideburn/kubeinvaders or write to luckysideburn [at] gmail [dot] com <br>
+  
+  <br>
+  <font color="blue">[[game mode button]]</font><br>
+  Enabling the game console allows you to kill pods and launch workloads to stress cluster nodes (check "show keys and options" to understand how to do it). You can also jump between namespace and many other things.<br>
+  <br>
+  <font color="blue">[[add http check & chaos report checkbox]]</font><br>
+  Use it to activate the monitoring of an ingress and generate real-time reporting. it's very useful to know what happens to your applications during chaos sessions. for now, we monitor the elapsed time of http calls and status codes. also, you have some very useful default metrics:<br>
+  <br>
+  <font color="gren">Selected namespace</font> => indicates the current namespace focused on by the tool. you can jump between selected namespaces during installation.<br>
+  <br>
+  <font color="gren">>Deleted pods total</font> => total number of killed pods.<br>
+  <br>
+  <font color="gren">Current chaos pods</font> => when the node stress test mode is activated, this metric indicates the number of jobs stressing your cluster.<br>
+  <br>
+  <font color="gren">Current replicas state delay</font> => a very important metric, indicates how long your cluster takes to return to the desired state that was before the chaos engineering session.<br>
+  <br>
+  <font color="blue">[[enable prog. mode button (under development)]]</font><br>
+  Through yaml programming, you can define your own chaos engineering experiments and execute them. we have preloaded some presets for various open-source tools to stress test (this feature is still in development, so contributions are welcome).<br>
                     </div>
                   </div>
                 </div>
               </div>
-
-
+              <!-- END SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
+  
+              <!-- START CHAOS PROGRAM BUTTONS -->
+              <div id="programming-mode-buttons" style="display: none;">
+                <div class="row">
+                  <div class="col text-center">
+                  </div>
+                  <div class="col text-center">
+                  </div>
+                  <div class="col text-center">
+                  </div>
+                </div>
+              <!-- END CHAOS PROGRAMM BUTTONS -->
             </div>
-          </div>
-          <!-- END GAME MODE BUTTONS -->
-
-          <!-- START METRICS ROW -->
-          <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: #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: #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: #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: 70%;height: 70%; margin-top: 1%;"></div>
+            <!-- END FIRST ROW -->
+  
+            <!-- START GAME MODE BUTTONS -->
+            <div id="game-buttons" style="display: none;">
+              <div class="row container" style="width: 100%;">
+                <div class="col text-center">
+                  <button type="button" id="controlAutoPilotButton" class="btn btn-dark" onclick="controlAutoPilot()">Start</button>
+                </div>
+                <div class="col">
+                </div>
+                <div class="col">
+                  <input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
+                  <label for="randomFactorInput" class="text-kinv" id="randomFactorText">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
+                </div>
+              </div>
+              <div class="row container" style="margin-top: 1%; width: 100%;">
+                <div class="col text-center">
+                  <button style="margin-bottom: 2%" type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
+                </div>
+                <div class="col text-center">
+                  <button style="margin-bottom: 2%" type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
+                </div>
+                <div class="col text-center">
+                  <button style="margin-bottom: 2%" type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
+                </div>
+  
+                <div class="accordion" id="specialkeys" style="margin-top: 2%; margin-bottom: 2%;">
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="specialkeys-headingThree">
+                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#specialkeys-collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                        show keys and options
+                      </button>
+                    </h2>
+                    <div id="specialkeys-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                      <div class="accordion-body">
+                        h => Activate or deactivate help<br>
+                        s => Activate or deactivate shuffle for aliens<br>
+                        n => Change namespace<br>
+                        p => Activate or deactivate chaos engineering against pods<br>
+                        c => Activate or deactivate chaos engineering against nodes
+                      </div>
+                    </div>
+                  </div>
+                </div>
+  
+  
+              </div>
+            </div>
+            <!-- END GAME MODE BUTTONS -->
+  
+            <!-- START METRICS ROW -->
+            <div class="row text-justify" align="center" id="metricsPresetsRow">
+              <div style="margin-top: 1%;" class="text-justify" id="metricsGroup">
+  
+                  <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: #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: #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: 100%;height: 70%; 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> -->
+              </div>
+              <!-- <div class="progress" style="margin-top: 1%;">
+                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
+              </div> -->
+            </div>
+            <!-- END METRICS ROW -->
+  
+            <!-- START CHAOS PROGRAMMING MODE SCREEN -->
+            <div id="chaos-program-screen" style="display: none;">
+              <div class="">
+                <div class="row" style="margin-top: 2%;">
+                  <font size="2" class="text-kinv" id="loadTestingPresetsText">Load Testing Presets & Chaos Programs</font>
+                </div>
+                <div class="row">
+                    <div class="btn-group" id="loadButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2%; padding-top: 2%; scrollbar-color: dark;">
+                      <button type="button" id="loadDefault" class="btn btn-light btn-md" onclick="loadPreset('default', 'k-inv')">Default</button>
+                      <button type="button" id="loadCassandra" class="btn btn-light btn-md" onclick="loadPreset('cassandra', 'python')">Cassandra</button>
+                      <button type="button" id="loadConsul" class="btn btn-light btn-md" onclick="loadPreset('consul', 'python')">Consul</button>
+                      <button type="button" id="loadElasticsearch" class="btn btn-light btn-md" onclick="loadPreset('elasticsearch', 'python')">Elasticsearch</button>
+                      <button type="button" id="loadEtcd3" class="btn btn-light btn-md" onclick="loadPreset('etcd3', 'python')">Etcd3</button>
+                      <button type="button" id="loadGitlab" class="btn btn-light btn-md" onclick="loadPreset('gitlab', 'python')">Gitlab</button>
+                      <button type="button" id="loadHttp" class="btn btn-light btn-md" onclick="loadPreset('http', 'python')">Http</button>
+                      <button type="button" id="loadJira" class="btn btn-light btn-md" onclick="loadPreset('jira', 'python')">Jira</button>
+                      <button type="button" id="loadKafka" class="btn btn-light btn-md" onclick="loadPreset('kafka', 'python')">Kafka</button>
+                      <button type="button" id="loadKubernetes" class="btn btn-light btn-md" onclick="loadPreset('kubernetes', 'python')">Kubernetes</button>
+                      <button type="button" id="loadMongodb" class="btn btn-light btn-md" onclick="loadPreset('mongodb', 'python')">Mongodb</button>
+                      <button type="button" id="loadMysql" class="btn btn-light btn-md" onclick="loadPreset('mysql', 'python')">Mysql</button>
+                      <button type="button" id="loadNomad" class="btn btn-light btn-md" onclick="loadPreset('nomad', 'python')">Nomad</button>
+                      <button type="button" id="loadPostgresql" class="btn btn-light btn-md" onclick="loadPreset('postgresql', 'python')">Postgresql</button>
+                      <button type="button" id="loadPrometheus" class="btn btn-light btn-md" onclick="loadPreset('prometheus', 'python')">Prometheus</button>
+                      <button type="button" id="loadRabbit" class="btn btn-light btn-md" onclick="loadPreset('rabbit', 'python')">Rabbit</button>
+                      <button type="button" id="loadSSH" class="btn btn-light btn-md" onclick="loadPreset('SSH', 'python')">SSH</button>
+                      <button type="button" id="loadVault" class="btn btn-light btn-md" onclick="loadPreset('vault', 'python')">Vault</button>
+                    </div>
+                </div>
+                <div class="row">
+                  <div class="btn-group" id="loadChaosProgramButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2.0%; padding-top: 0.5%; scrollbar-color: dark;">
+                  </div>
+              </div>
+              </div>
+              <div class="row" style="margin-top: 1%;">
+                <div id="alert_placeholder_programming_mode" style="margin-top: 1%; margin-bottom: 1%;"></div>
+                <div class="col">
+                  <div class="row" width="10px">
+                    <div class="col text-center">
+                      <button type="button" id="saveChaosProgramButton" class="btn btn-light" onclick="savePreset('save-chaos-program')">SAVE</button>
+                    </div>
+                    <div class="col text-center">
+                      <button type="button" id="runChaosProgramButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
+                    </div>
+                  </div>
+                  <form>
+                  <div class="form-group">
+                    <label for="chaosProgramTextArea"></label>
+                    <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-family: Courier, monospace;">
+    chaos-codename: CODENAME_PLACEHOLDER
+    jobs:
+      cpu-attack-job:
+        additional-labels:
+          chaos-controller: kubeinvaders
+          chaos-type: stress-ng
+          chaos-codename: CODENAME_PLACEHOLDER
+        image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
+        command: "stress-ng"
+        args:
+          - --version
+  
+      mem-attack-job:
+        additional-labels:
+          chaos-controller: kubeinvaders
+          chaos-type: stress-ng
+          chaos-codename: CODENAME_PLACEHOLDER
+        image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
+        command: "stress-ng"
+        args:
+          - --version
+  
+    experiments:
+      - name: cpu-attack-exp
+        job: cpu-attack-job
+        loop: 5
+  
+      - name: mem-attack-exp
+        job: mem-attack-job
+        loop: 5
+                    </textarea>
+                  </div>
+                  </form>
+                </div>
+                <div class="col" style="margin-top: 4%; overflow-y: scroll;  height:900px;">
+                  <div id="chaosProgramFlow">
+                    <div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert1" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 1</div></div>
+                    <img src="images/down-arrow.png" width="30" height="30" style="margin-bottom: 2%;">
+                    <div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert2" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 2</div></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- END CHAOS PROGRAMMING MODE SCREEN --> 
+      
+            <!-- START GAME MODE SCREEN -->
+            <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" style="width: 100%;">
+                  <div class="table-responsive">
+                    <table class="table" style="color:#b2afaf;">
+                      <thead>
+                        <tr>
+                          <th scope="col"></th>
+                          <th scope="col"></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td class="td-grey">PROJECT</td>
+                          <td><p id="chaosReportProjectDiv"></p></td>
+                        </tr>
+                        <tr>
+                          <td class="td-grey">AUTHOR</td>
+                          <td><p id="chaosReportAuthorDiv" class="text-kinv"></p></td>
+                        </tr>
+                          <td class="td-grey">Chaos session date</td>
+                          <td><p id="chaosReportDateDiv" class="text-kinv"></p></td>
+                        <tr>
+                          <td class="td-grey">Chaos session time</td>
+                          <td><p id="chaosReportSessionTimeDiv" class="text-kinv"></p></td>
+                        </tr>
+                        <tr>
+                          <td class="td-grey">Checked URL</td>
+                          <td><p id="chaosReportCheckSiteURLDiv" class="text-kinv"></p></td>   
+                        </tr>   
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </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> -->
-            </div>
-            <!-- <div class="progress" style="margin-top: 1%;">
-              <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
-            </div> -->
-          </div>
-          <!-- END METRICS ROW -->
-
-          <!-- START CHAOS PROGRAMMING MODE SCREEN -->
-          <div id="chaos-program-screen" style="display: none;">
-            <div class="">
-              <div class="row" style="margin-top: 2%;">
-                <font size="2" class="text-kinv" id="loadTestingPresetsText">Load Testing Presets & Chaos Programs</font>
+                <div id="chartDiv" style="display: none; width: 100%; text-align: center; margin: auto;">
+                  <label for="httpElapsedChart">HTTP Elapse d (seconds)</label>
+                  <div id="httpElapsedChart"  ></div>
+                  <label for="httpStatusCodeChart">HTTP Status Code</label>
+                  <div id="httpStatusCodeChart"></div>
+                </div>
+              </div>          
+              <div class="row" style="margin-top: 2%; text-align: center; margin: auto;">
+                <canvas id="myCanvas" width="720" height="480" class="game-canvas"></canvas>
               </div>
               <div class="row">
-                  <div class="btn-group" id="loadButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2%; padding-top: 2%; scrollbar-color: dark;">
-                    <button type="button" id="loadDefault" class="btn btn-light btn-md" onclick="loadPreset('default', 'k-inv')">Default</button>
-                    <button type="button" id="loadCassandra" class="btn btn-light btn-md" onclick="loadPreset('cassandra', 'python')">Cassandra</button>
-                    <button type="button" id="loadConsul" class="btn btn-light btn-md" onclick="loadPreset('consul', 'python')">Consul</button>
-                    <button type="button" id="loadElasticsearch" class="btn btn-light btn-md" onclick="loadPreset('elasticsearch', 'python')">Elasticsearch</button>
-                    <button type="button" id="loadEtcd3" class="btn btn-light btn-md" onclick="loadPreset('etcd3', 'python')">Etcd3</button>
-                    <button type="button" id="loadGitlab" class="btn btn-light btn-md" onclick="loadPreset('gitlab', 'python')">Gitlab</button>
-                    <button type="button" id="loadHttp" class="btn btn-light btn-md" onclick="loadPreset('http', 'python')">Http</button>
-                    <button type="button" id="loadJira" class="btn btn-light btn-md" onclick="loadPreset('jira', 'python')">Jira</button>
-                    <button type="button" id="loadKafka" class="btn btn-light btn-md" onclick="loadPreset('kafka', 'python')">Kafka</button>
-                    <button type="button" id="loadKubernetes" class="btn btn-light btn-md" onclick="loadPreset('kubernetes', 'python')">Kubernetes</button>
-                    <button type="button" id="loadMongodb" class="btn btn-light btn-md" onclick="loadPreset('mongodb', 'python')">Mongodb</button>
-                    <button type="button" id="loadMysql" class="btn btn-light btn-md" onclick="loadPreset('mysql', 'python')">Mysql</button>
-                    <button type="button" id="loadNomad" class="btn btn-light btn-md" onclick="loadPreset('nomad', 'python')">Nomad</button>
-                    <button type="button" id="loadPostgresql" class="btn btn-light btn-md" onclick="loadPreset('postgresql', 'python')">Postgresql</button>
-                    <button type="button" id="loadPrometheus" class="btn btn-light btn-md" onclick="loadPreset('prometheus', 'python')">Prometheus</button>
-                    <button type="button" id="loadRabbit" class="btn btn-light btn-md" onclick="loadPreset('rabbit', 'python')">Rabbit</button>
-                    <button type="button" id="loadSSH" class="btn btn-light btn-md" onclick="loadPreset('SSH', 'python')">SSH</button>
-                    <button type="button" id="loadVault" class="btn btn-light btn-md" onclick="loadPreset('vault', 'python')">Vault</button>
-                  </div>
-              </div>
-              <div class="row">
-                <div class="btn-group" id="loadChaosProgramButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2.0%; padding-top: 0.5%; scrollbar-color: dark;">
+                <div class="col text-center">
                 </div>
-            </div>
-            </div>
-            <div class="row" style="margin-top: 1%;">
-              <div id="alert_placeholder_programming_mode" style="margin-top: 1%; margin-bottom: 1%;"></div>
-              <div class="col">
-                <div class="row" width="10px">
-                  <div class="col text-center">
-                    <button type="button" id="saveChaosProgramButton" class="btn btn-light" onclick="savePreset('save-chaos-program')">SAVE</button>
-                  </div>
-                  <div class="col text-center">
-                    <button type="button" id="runChaosProgramButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
-                  </div>
+                <div class="col text-center">
+                  <input type="button" id="zoomInButton" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
+                  <input type="button" id="zoomOutButton" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
                 </div>
-                <form>
-                <div class="form-group">
-                  <label for="chaosProgramTextArea"></label>
-                  <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-family: Courier, monospace;">
-  chaos-codename: CODENAME_PLACEHOLDER
-  jobs:
-    cpu-attack-job:
-      additional-labels:
-        chaos-controller: kubeinvaders
-        chaos-type: stress-ng
-        chaos-codename: CODENAME_PLACEHOLDER
-      image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
-      command: "stress-ng"
-      args:
-        - --version
-
-    mem-attack-job:
-      additional-labels:
-        chaos-controller: kubeinvaders
-        chaos-type: stress-ng
-        chaos-codename: CODENAME_PLACEHOLDER
-      image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
-      command: "stress-ng"
-      args:
-        - --version
-
-  experiments:
-    - name: cpu-attack-exp
-      job: cpu-attack-job
-      loop: 5
-
-    - name: mem-attack-exp
-      job: mem-attack-job
-      loop: 5
-                  </textarea>
-                </div>
-                </form>
-              </div>
-              <div class="col" style="margin-top: 4%; overflow-y: scroll;  height:900px;">
-                <div id="chaosProgramFlow">
-                  <div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert1" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 1</div></div>
-                  <img src="images/down-arrow.png" width="30" height="30" style="margin-bottom: 2%;">
-                  <div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert2" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 2</div></div>
+                <div class="col text-center">
                 </div>
               </div>
             </div>
-          </div>
-          <!-- END CHAOS PROGRAMMING MODE SCREEN --> 
-    
-          <!-- START GAME MODE SCREEN -->
-          <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">
-                <div class="table-responsive">
-                  <table class="table" style="color:#b2afaf;">
-                    <thead>
-                      <tr>
-                        <th scope="col"></th>
-                        <th scope="col"></th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td class="td-grey">PROJECT</td>
-                        <td><p id="chaosReportProjectDiv"></p></td>
-                      </tr>
-                      <tr>
-                        <td class="td-grey">AUTHOR</td>
-                        <td><p id="chaosReportAuthorDiv" class="text-kinv"></p></td>
-                      </tr>
-                        <td class="td-grey">Chaos session date</td>
-                        <td><p id="chaosReportDateDiv" class="text-kinv"></p></td>
-                      <tr>
-                        <td class="td-grey">Chaos session time</td>
-                        <td><p id="chaosReportSessionTimeDiv" class="text-kinv"></p></td>
-                      </tr>
-                      <tr>
-                        <td class="td-grey">Checked URL</td>
-                        <td><p id="chaosReportCheckSiteURLDiv" class="text-kinv"></p></td>   
-                      </tr>   
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div id="chartDiv" style="display: none;">
-                <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: 100%; height: 200px;"></div>
-              </div>
-            </div>          
-            <div class="row" style="margin-top: 2%;">
-              <canvas id="myCanvas" width="720" height="480" class="game-canvas custom-btn-group"></canvas>
-            </div>
+            <!-- END GAME MODE SCREEN -->
+      
+            <!-- HELPER ALERT -->
             <div class="row">
-              <div class="col text-center">
-              </div>
-              <div class="col text-center">
-                <input type="button" id="zoomInButton" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
-                <input type="button" id="zoomOutButton" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
-              </div>
-              <div class="col text-center">
-              </div>
+              <div id="alert_placeholder" style="margin-top: 3%;"></div>
+              <div id="alert_placeholder3" style="margin-top: 3%;"></div>
             </div>
-          </div>
-          <!-- END GAME MODE SCREEN -->
-    
-          <!-- HELPER ALERT -->
-          <div class="row">
-            <div id="alert_placeholder" style="margin-top: 3%;"></div>
-            <div id="alert_placeholder3" style="margin-top: 3%;"></div>
-          </div>
-      </div>
-
-      <div id="footer" style="margin-top: 5%;">
-        <div class="container text-center">
-          <div class="container text-center" style="margin-top: 20%;">
-            <div>
-              <img style="scale: 60%" src="images/kubeinvaders_spaceship2.png" id="spaceShip">
-              <p class="text-muted credit" style="color:#fff;">version: v1.9.6</p>
+        </div>
+  
+        <div id="footer" style="margin-top: 5%;">
+          <div class="container text-center">
+            <div class="container text-center" style="margin-top: 20%;">
+              <div>
+                <img style="scale: 60%" src="images/kubeinvaders_spaceship2.png" id="spaceShip">
+                <p class="text-muted credit" style="color:#fff;">version: v1.9.6</p>
+              </div>
             </div>
           </div>
         </div>
+        <script src="./utils.js"></script>
+        <script src="./programming_mode.js"></script>
+        <script src="./modals.js"></script>
+        <script src="./mode_controls.js"></script>
+        <script src="./game_console.js"></script>
+        <script src="./bootstrap-5.0.0-dist/js/bootstrap.min.js"></script>
+        <script src="./js/jquery-3.6.0.min.js"></script>
+        <script src="./js/popper.min.js"></script>
+        <script src="./kubeinvaders.js"></script>
+        <script src="./echarts/echarts.min.js"></script>
+        <script src="./chaos_report.js"></script>
+        <script>
+          // Function to toggle sidebar
+          
+          const sidebar = document.getElementById('sidebar');
+          const mainContent = document.querySelector('.main-content');
+          sidebar.style.left = '0px';
+          mainContent.style.marginLeft = '250px';
+          $('.toggler-icon').css({"color": "white"});
+
+          function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            const mainContent = document.querySelector('.main-content');
+            if (sidebar && mainContent) {
+              if (sidebar.style.left == '-250px') {
+                $('.toggler-icon').css({"color": "white"});
+                sidebar.style.left = '0';
+                mainContent.style.marginLeft = '250px';
+              } else {
+                $('.toggler-icon').css({"color": "black"});
+
+                sidebar.style.left = '-250px';
+                mainContent.style.marginLeft = '0';
+              }
+            }
+          }
+        </script>
+      </div>
       </div>
-      <script src="./utils.js"></script>
-      <script src="./programming_mode.js"></script>
-      <script src="./modals.js"></script>
-      <script src="./mode_controls.js"></script>
-      <script src="./game_console.js"></script>
-      <script src="./bootstrap-5.0.0-dist/js/bootstrap.min.js"></script>
-      <script src="./js/jquery-3.6.0.min.js"></script>
-      <script src="./js/popper.min.js"></script>
-      <script src="./kubeinvaders.js"></script>
-      <script src="./echarts/echarts.min.js"></script>
-      <script src="./chaos_report.js"></script>
-    </div>
     </div>
+
+  
   </body>
 </html>
diff --git a/html5/mode_controls.js b/html5/mode_controls.js
index 6384b29..857a593 100644
--- a/html5/mode_controls.js
+++ b/html5/mode_controls.js
@@ -6,8 +6,8 @@ function startGameMode() {
     $("#gameModeButton").text("Enable Game Mode");
   } else {
     game_mode_switch = true;
-    document.getElementById("gameContainer").style.width = "50%";
-    document.getElementById("gameContainer").style.height = "50%";
+    document.getElementById("gameContainer").style.width = "100%";
+    document.getElementById("gameContainer").style.height = "100%";
     //document.getElementById("loadButtonGroup").style.width = "650px";
     $("#gameModeButton").text("Disable Game Mode");
     $("#programmingModeButton").text("Enable Prog. Mode");
@@ -54,7 +54,7 @@ function startProgrammingMode() {
     chaos_program_screen.style.display = "none";
   }
   if (programming_mode_buttons.style.display === "none") {
-      programming_mode_buttons.style.display = "block";
+    programming_mode_buttons.style.display = "block";
   } else {
     programming_mode_buttons.style.display = "none";
   }
diff --git a/html5/style.css b/html5/style.css
index fb00468..9dbc0af 100644
--- a/html5/style.css
+++ b/html5/style.css
@@ -8,36 +8,35 @@
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0; /* Opacità iniziale */
-    }
-    to {
-        opacity: 1; /* Opacità finale */
-    }
+  from {
+    opacity: 0; /* Opacità iniziale */
+  }
+  to {
+    opacity: 1; /* Opacità finale */
+  }
 }
 
 /* #kinvBody {
   display: none;
 } */
 
-input[type="text"]
-{
-  font-family: 'Courier New', Courier, monospace;
+input[type="text"] {
+  font-family: "Courier New", Courier, monospace;
 }
 
 .transition {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 0s, opacity 1.0s linear;
+  transition: visibility 0s, opacity 1s linear;
 }
 
 .navbar-toggler-icon {
-  background-image: url("./images/sprite_invader_ready.png")
+  background-image: url("./images/sprite_invader_ready.png");
 }
 
 .navbar-toggler {
   border-color: rgb(255, 255, 255);
-} 
+}
 
 hr {
   margin-top: 1rem;
@@ -49,38 +48,37 @@ hr {
 .alert-logs-namespace {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .alert-logs-pod {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .alert-logs-container {
   background-color: #7116d8;
   color: #ffffff;
-  border-color: #FFF;
+  border-color: #fff;
   border-radius: 1px;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
 }
 
 .custom-btn-group {
   margin-top: 2%;
-  border: 5px solid #b2afaf;
   border-radius: 5px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .logtail-group {
@@ -90,7 +88,7 @@ hr {
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .chaos-prog-area {
@@ -102,11 +100,15 @@ hr {
   border-image-slice: 5;
 }
 
-.btn-light  {
+.btn-light {
   border-color: #000000;
 }
 
-.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active, .open .dropdown-toggle.btn-default {
+.btn-light:hover,
+.btn-light:focus,
+.btn-light:active,
+.btn-light.active,
+.open .dropdown-toggle.btn-default {
   background-color: #b0b3b1;
   color: #000000;
   border-color: #000000;
@@ -129,14 +131,14 @@ hr {
 
 .log-row {
   color: #4fa80b;
-  font-size: 14px; 
+  font-size: 14px;
   font-family: Courier New, Courier, monospace;
   margin-top: 0.5%;
 }
 
 .log-title {
   color: #7c737f;
-  font-size: 12px; 
+  font-size: 12px;
 }
 
 .btn-green {
@@ -147,7 +149,7 @@ hr {
 
 @font-face {
   font-family: pixel;
-  src: url('./fonts/pixel.otf');
+  src: url("./fonts/pixel.otf");
   font-size-adjust: inherit;
 }
 
@@ -171,7 +173,11 @@ div {
   font-family: pixel;
 }
 
-.game-canvas { background: #161616 ; display: block; margin: 0 auto; }
+.game-canvas {
+  background: #161616;
+  display: block;
+  margin: 0 auto;
+}
 
 .http-stats-code-canvas {
   margin-top: 2%;
@@ -180,7 +186,7 @@ div {
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 5px;
-  border-image-slice: 5;    
+  border-image-slice: 5;
 }
 
 .td-grey {
@@ -208,6 +214,10 @@ div {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
\ No newline at end of file
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}