diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html
index 37e15a3e..543d3c71 100755
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@@ -40,8 +40,15 @@
   <!-- Bootstrap Toggle -->
   <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
   <script defer src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
+    integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
+    integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js"
+    integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
   <!-- End Bootstrap Toggle -->
 
diff --git a/app/frontend/templates/panel/server_metrics.html b/app/frontend/templates/panel/server_metrics.html
index 812a81de..3b65e9d7 100644
--- a/app/frontend/templates/panel/server_metrics.html
+++ b/app/frontend/templates/panel/server_metrics.html
@@ -41,11 +41,7 @@
 
 
           <canvas id="lineChart"></canvas>
-          <div class="text-center">
-            <button class="btn btn-outline-info" onclick="toggle_players()">PLAYERS</button>&nbsp;
-            <button class="btn btn-outline-primary" onclick="toggle_mem()">MEM</button>&nbsp;
-            <button class="btn btn-outline-warning" onclick="toggle_cpu()">CPU</button>&nbsp;
-          </div>
+
         </div>
       </div>
     </div>
@@ -80,7 +76,8 @@
         borderColor: [
           'rgba(136, 98, 224, .5)',
         ],
-        borderWidth: 2
+        borderWidth: 2,
+        tension: 0
       },
       {
         label: "MEM",
@@ -88,7 +85,8 @@
         borderColor: [
           'rgba(33, 150, 243, .5)',
         ],
-        borderWidth: 2
+        borderWidth: 2,
+        tension: 0
       },
       {
         label: "CPU",
@@ -96,86 +94,55 @@
         borderColor: [
           'rgba(255, 175, 0, .5)',
         ],
-        borderWidth: 2
+        borderWidth: 2,
+        tension: 0
       },
       ]
     },
     options: {
+      plugins: {
+        zoom: {
+          zoom: {
+            wheel: {
+              enabled: true,
+            },
+            drag: {
+              enabled: true,
+              modifierKey: "shift"
+            },
+            pinch: {
+              enabled: true
+            },
+            mode: 'x',
+            modifierKey: 'shift',
+          },
+        },
+        pan: {
+          enabled: true,
+          mode: "xy",
+          threshhold: 1,
+          pan: {
+            enabled: true,
+            mode: "xy",
+            threshhold: 1,
+          }
+
+        }
+      },
       fill: false,
       lineTension: 5,
       responsive: true,
       scales: {
-        yAxes: [{
-          ticks: {
-            min: 0,
-            max: Math.max.apply(this, max_nums) + 5
-          }
-        }]
+        y: {
+          min: 0,
+        },
+        x: {
+          position: 'right',
+          min: -500,
+        }
       }
     }
   });
-
-  var mem_hidden = false;
-  var cpu_hidden = false;
-  var players_hidden = false;
-
-  function toggle_mem() {
-    if (!mem_hidden) {
-      hist_chart.data.datasets = hist_chart.data.datasets.filter(function (obj) { return obj.label != "MEM" });
-      mem_hidden = true;
-      // Repaint
-    } else {
-      hist_chart.data.datasets.splice(1, 0, {
-        label: "MEM",
-        data: ram,
-        borderColor: [
-          'rgba(33, 150, 243, .5)',
-        ],
-        borderWidth: 2
-      });
-      mem_hidden = false;
-    }
-    hist_chart.update();
-
-  }
-  function toggle_cpu() {
-    if (!cpu_hidden) {
-      hist_chart.data.datasets = hist_chart.data.datasets.filter(function (obj) { return obj.label != "CPU" });
-      cpu_hidden = true;
-      // Repaint
-    } else {
-      hist_chart.data.datasets.push({
-        label: "CPU",
-        data: cpu,
-        borderColor: [
-          'rgba(255, 175, 0, .5)',
-        ],
-        borderWidth: 2
-      });
-      cpu_hidden = false;
-    }
-    hist_chart.update();
-
-  }
-  function toggle_players() {
-    if (!players_hidden) {
-      hist_chart.data.datasets = hist_chart.data.datasets.filter(function (obj) { return obj.label != "Players" });
-      players_hidden = true;
-      // Repaint
-    } else {
-      hist_chart.data.datasets.splice(0, 0, {
-        label: "Players",
-        data: players,
-        borderColor: [
-          'rgba(136, 98, 224, .5)',
-        ],
-        borderWidth: 2
-      });
-      players_hidden = false;
-    }
-    hist_chart.update();
-
-  }
 </script>
 
 {% end %}
\ No newline at end of file