diff --git a/README.md b/README.md
index b719566..c616aa1 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# kubeinvaders :space_invader: aka k-inv :joystick:
+# kubeinvaders (the original) :space_invader: aka k-inv :joystick:
 
 **Gamified Chaos Engineering and Educational Tool for Kubernetes**
 
diff --git a/html/css/style.css b/html/css/style.css
index 4ce55a7..6b035e5 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -220,3 +220,150 @@ body {
     transform: rotate(360deg);
   }
 }
+
+/* ─── Sidebar enhancements ─────────────────────────────── */
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  padding: 14px 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  margin-bottom: 6px;
+}
+
+.sidebar a:hover {
+  background-color: #771996;
+  color: #fff;
+}
+
+/* ─── Metrics table ─────────────────────────────────────── */
+.metrics-table-wrapper {
+  max-width: 620px;
+  margin: 14px auto 0;
+}
+
+.metrics-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid #e3e3e3;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.metrics-table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.metrics-table tbody tr:hover td {
+  background: #fafafa;
+}
+
+.metrics-table td {
+  padding: 10px 16px;
+  vertical-align: middle;
+}
+
+.metrics-table-label {
+  font-size: 11px;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.metrics-table-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #212529;
+  text-align: right;
+}
+
+.metrics-table-value--text {
+  font-size: 14px;
+  color: #6366f1;
+  word-break: break-all;
+}
+
+.metrics-table-unit {
+  font-size: 12px;
+  font-weight: normal;
+  color: #6c757d;
+}
+
+/* Colored dot accent per row */
+.metric-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.metric-dot--ns     { background: #6366f1; }
+.metric-dot--deleted { background: #ef4444; }
+.metric-dot--jobs   { background: #f97316; }
+.metric-dot--chaosp { background: #eab308; }
+.metric-dot--notrn  { background: #f43f5e; }
+.metric-dot--delay  { background: #14b8a6; }
+.metric-dot--ldelay { background: #a855f7; }
+
+/* ─── Programming mode layout ───────────────────────────── */
+.prog-mode-toolbar {
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin-bottom: 10px;
+}
+
+.prog-mode-editor-panel,
+.prog-mode-flow-panel {
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.prog-mode-editor-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #282a36;
+  color: #f8f8f2;
+  padding: 8px 12px;
+}
+
+.prog-mode-editor-title {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.prog-mode-flow-title {
+  background: #282a36;
+  color: #f8f8f2;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.prog-run-btn {
+  background-color: #771996;
+  border-color: #5a1270;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 0.05em;
+}
+
+.prog-run-btn:hover,
+.prog-run-btn:focus {
+  background-color: #5a1270;
+  border-color: #440e56;
+  color: #fff;
+}
+
+/* CodeMirror fills the editor panel */
+.prog-mode-editor-panel .CodeMirror {
+  border-radius: 0;
+  font-size: 13px;
+}
diff --git a/html/index.html b/html/index.html
index ad32b26..e886918 100644
--- a/html/index.html
+++ b/html/index.html
@@ -13,6 +13,9 @@
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js "></script>
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/theme/dracula.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/yaml/yaml.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -180,10 +183,14 @@
     </div>
 
     <div class="sidebar" id="sidebar">
-      <a id="gameModeButton" onclick="saveK8sConnection(); startGameMode()">Enable Game Mode</a>
-      <a id="programmingModeButton"  onclick="saveK8sConnection(); startProgrammingMode()" style="font-weight: normal;">Programming Mode</a>
-      <a href="#" onclick="saveK8sConnection(); showSetCurrentChaosContainer()" style="font-weight: normal;">Chaos Container Editor</a>
-      <a href="#" onclick="saveK8sConnection(); showSpecialKeys()" style="font-weight: normal;">Controls and options</a>
+      <div class="sidebar-brand">
+        <img src="./images/kubeinvaders_spaceship.png" alt="KubeInvaders" style="width: 34px; height: auto; margin-right: 8px; image-rendering: pixelated;">
+        <span style="font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 0.04em;">KubeInvaders</span>
+      </div>
+      <a id="gameModeButton" onclick="saveK8sConnection(); startGameMode()"><i class="fas fa-gamepad me-2"></i>Enable Game Mode</a>
+      <a id="programmingModeButton" onclick="saveK8sConnection(); startProgrammingMode()" style="font-weight: normal;"><i class="fas fa-code me-2"></i>Programming Mode</a>
+      <a href="#" onclick="saveK8sConnection(); showSetCurrentChaosContainer()" style="font-weight: normal;"><i class="fas fa-cube me-2"></i>Chaos Container Editor</a>
+      <a href="#" onclick="saveK8sConnection(); showSpecialKeys()" style="font-weight: normal;"><i class="fas fa-sliders me-2"></i>Controls and Options</a>
     </div>
     
     <!-- Main content -->
@@ -771,103 +778,67 @@ EOF</pre>
             <!-- END GAME MODE BUTTONS -->
   
             <!-- START METRICS ROW -->
-            <div class="row" align="center" id="metricsPresetsRow">
-              <div style="margin-top: 1%;" class="text-justify" id="metricsGroup">
-                <style>
-                  .status-label {
-                    color: #444242; /* Colore per le etichette */
-                    font-weight: bold;
-                    font-size: 14px;
-                  }
-                
-                  .status-value {
-                    color: #000000; /* Colore blu scuro per i valori */
-                    font-weight: normal;
-                    font-size: 14px;
-                  }
-                
-                  .status-unit {
-                    color: #6c757d; /* Colore per le unità */
-                    font-size: 12px;
-                  }
-                
-                  .status-container {
-                    margin-bottom: 8px; /* Spazio tra le righe */
-                  }
-                </style>
-                
-                <div class="status-container">
-                  <span class="status-label">Selected Namespace:&nbsp;</span>
-                  <span id="currentGameNamespace" class="status-value">NULL</span>
+            <div class="row" id="metricsPresetsRow">
+              <div style="margin-top: 1%; width: 100%; display: flex; flex-direction: column; align-items: center;" id="metricsGroup">
+                <div class="metrics-table-wrapper">
+                  <table class="metrics-table">
+                    <tbody>
+                      <tr>
+                        <td class="metrics-table-label"><span class="metric-dot metric-dot--ns"></span><i class="fas fa-layer-group me-2"></i>Selected Namespace</td>
+                        <td id="currentGameNamespace" class="metrics-table-value metrics-table-value--text">NULL</td>
+                      </tr>
+                      <tr>
+                        <td class="metrics-table-label"><span class="metric-dot metric-dot--deleted"></span><i class="fas fa-trash-can me-2"></i>Deleted Pods Total</td>
+                        <td id="deleted_pods_total" class="metrics-table-value">0</td>
+                      </tr>
+                      <tr>
+                        <td class="metrics-table-label"><span class="metric-dot metric-dot--jobs"></span><i class="fas fa-terminal me-2"></i>Chaos Jobs Total</td>
+                        <td id="chaos_jobs_total" class="metrics-table-value">0</td>
+                      </tr>
+                      <tr>
+                        <td class="metrics-table-label"><span class="metric-dot metric-dot--chaosp"></span><i class="fas fa-circle-dot me-2"></i>Current Chaos Pods</td>
+                        <td id="current_chaos_job_pod" class="metrics-table-value">0</td>
+                      </tr>
+                      <tr>
+                        <td class="metrics-table-label"><span class="metric-dot metric-dot--notrn"></span><i class="fas fa-circle-xmark me-2"></i>Not Running Pods</td>
+                        <td id="pods_not_running_on" class="metrics-table-value">0</td>
+                      </tr>
+                      <tr>
+                        <td class="metrics-table-label"><span class="metric-dot metric-dot--delay"></span><i class="fas fa-clock me-2"></i>Current Replicas Delay</td>
+                        <td class="metrics-table-value"><span id="fewer_replicas_seconds">0</span> <span class="metrics-table-unit">sec</span></td>
+                      </tr>
+                      <tr>
+                        <td class="metrics-table-label"><span class="metric-dot metric-dot--ldelay"></span><i class="fas fa-clock-rotate-left me-2"></i>Latest Replicas Delay</td>
+                        <td class="metrics-table-value"><span id="latest_fewer_replicas_seconds">0</span> <span class="metrics-table-unit">sec</span></td>
+                      </tr>
+                    </tbody>
+                  </table>
                 </div>
-                
-                <div class="status-container">
-                  <span class="status-label">Deleted Pods Total:&nbsp;</span>
-                  <span id="deleted_pods_total" class="status-value">0</span>
-                </div>
-                
-                <div class="status-container">
-                  <span class="status-label">Chaos Jobs Total:&nbsp;</span>
-                  <span id="chaos_jobs_total" class="status-value">0</span>
-                </div>
-                
-                <div class="status-container">
-                  <span class="status-label">Current Chaos Pods:&nbsp;</span>
-                  <span id="current_chaos_job_pod" class="status-value">0</span>
-                </div>
-                
-                <div class="status-container">
-                  <span class="status-label">Not Running Pods:&nbsp;</span>
-                  <span id="pods_not_running_on" class="status-value">0</span>
-                </div>
-                
-                <div class="status-container">
-                  <span class="status-label">Current Replicas State Delay:&nbsp;</span>
-                  <span id="fewer_replicas_seconds" class="status-value">0</span>
-                  <span class="status-unit">sec</span>
-                </div>
-                
-                <div class="status-container">
-                  <span class="status-label">Latest Replicas State Delay:&nbsp;</span>
-                  <span id="latest_fewer_replicas_seconds" class="status-value">0</span>
-                  <span class="status-unit">sec</span>
-                </div>
-                
-                <div id="mainChaosMetrics" style="width: 100%; height: 70%; margin-top: 16px;"></div>                                 
+                <div id="mainChaosMetrics" style="width: 100%; align-self: stretch; height: 300px; margin-top: 16px;"></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;">
-                    </div>
+              <div class="prog-mode-toolbar">
+                <div class="btn-group" id="loadButtonGroup" role="group" aria-label="Preset buttons" style="overflow-x: auto; width: 100%; padding-bottom: 6px; padding-top: 6px; scrollbar-color: dark;">
+                </div>
+                <div class="btn-group" id="loadChaosProgramButtonGroup" role="group" aria-label="Saved programs" hidden style="overflow-x: auto; width: 100%; padding-bottom: 4px; padding-top: 4px; scrollbar-color: dark;">
                 </div>
-                <div class="row" hidden="true">
-                  <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: 0,5%;">
-                <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 id="alert_placeholder_programming_mode" style="margin-top: 8px; margin-bottom: 8px;"></div>
+              <div class="row g-3">
+                <div class="col-lg-8">
+                  <div class="prog-mode-editor-panel">
+                    <div class="prog-mode-editor-toolbar">
+                      <span class="prog-mode-editor-title"><i class="fas fa-file-code me-2"></i>Chaos Program</span>
+                      <button type="button" id="runChaosProgramButton" class="btn btn-sm prog-run-btn" onclick="runChaosProgram()">
+                        <i class="fas fa-play me-1"></i>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-weight: normal; font-size: small;">
+                    <form>
+                      <textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-weight: normal; font-size: small;">
 chaos-codename: CODENAME_PLACEHOLDER
 experiments:
   - name: cpu_attack_exp
@@ -893,20 +864,23 @@ k8s_jobs:
     command: "stress-ng"
     args:
       - --version
-                    </textarea>
+                      </textarea>
+                    </form>
                   </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-lg-4">
+                  <div class="prog-mode-flow-panel">
+                    <div class="prog-mode-flow-title"><i class="fas fa-sitemap me-2"></i>Experiment Flow</div>
+                    <div id="chaosProgramFlow" style="padding: 12px; overflow-y: auto; max-height: 840px;">
+                      <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>
             </div>
-            <!-- END CHAOS PROGRAMMING MODE SCREEN --> 
+            <!-- END CHAOS PROGRAMMING MODE SCREEN -->
       
             <!-- START GAME MODE SCREEN -->
             <div id="game-screen" style="display: none;">
diff --git a/html/js/mode_controls.js b/html/js/mode_controls.js
index 3f6c7fd..b4d655b 100644
--- a/html/js/mode_controls.js
+++ b/html/js/mode_controls.js
@@ -19,7 +19,7 @@
 function startGameMode() {
   if (game_mode_switch) {
     game_mode_switch = false;
-    $("#gameModeButton").text("Enable Game Mode");
+    $("#gameModeButton").html('<i class="fas fa-gamepad me-2"></i>Enable Game Mode');
   } else {
     /* TO DO: DO BETTER :D */
     let checkbox = {
@@ -32,8 +32,8 @@ function startGameMode() {
     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");
+    $("#gameModeButton").html('<i class="fas fa-gamepad me-2"></i>Disable Game Mode');
+    $("#programmingModeButton").html('<i class="fas fa-code me-2"></i>Programming Mode');
     programming_mode_switch = false;
   }
   if (game_buttons.style.display === "none") {
@@ -90,10 +90,15 @@ function startProgrammingMode() {
 
   if (editor == null) {
     editor = CodeMirror.fromTextArea(chaosProgramTextArea, {
-      lineNumbers: true, 
+      lineNumbers: true,
       theme: "dracula",
-      mode: "javascript"
+      mode: "yaml",
+      indentUnit: 2,
+      tabSize: 2,
+      indentWithTabs: false,
+      lineWrapping: false,
+      extraKeys: { "Tab": "indentMore", "Shift-Tab": "indentLess" }
     });
-    editor.setSize("100%", "100%");
+    editor.setSize("100%", "820px");
   }
 }
\ No newline at end of file