diff --git a/dashboard/src/components/CpuUsage.vue b/dashboard/src/components/CpuUsage.vue
deleted file mode 100644
index dd49fdbb1..000000000
--- a/dashboard/src/components/CpuUsage.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup>
-
-import { useI18n } from 'vue-i18n';
-const i18n = useI18n();
-const t = i18n.t;
-
-import { ref, onMounted, useTemplateRef } from 'vue';
-import Chart from 'chart.js/auto';
-import moment from 'moment-timezone';
-import { SingleSelect, Spinner } from 'pankow';
-import Section from './Section.vue';
-import SystemModel from '../models/SystemModel.js';
-
-const systemModel = SystemModel.create();
-
-function trKeyFromPeriod(period) {
-  if (period === 0) return 'app.graphs.period.live';
-  if (period === 6) return 'app.graphs.period.6h';
-  if (period === 12) return 'app.graphs.period.12h';
-  if (period === 24) return 'app.graphs.period.24h';
-  if (period === 24*7) return 'app.graphs.period.7d';
-  if (period === 24*30) return 'app.graphs.period.30d';
-
-  return '';
-}
-
-const periods = [
-  { id: 0,     label: t(trKeyFromPeriod(0)) },
-  { id: 6,     label: t(trKeyFromPeriod(6)) },
-  { id: 12,    label: t(trKeyFromPeriod(12)) },
-  { id: 24,    label: t(trKeyFromPeriod(24)) },
-  { id: 24*7,  label: t(trKeyFromPeriod(24*7)) },
-  { id: 24*30, label: t(trKeyFromPeriod(24*30)) },
-];
-
-const graph = useTemplateRef('graph');
-const period = ref(6);
-const busy = ref(true);
-
-let gGraph = null;
-let gMetricStream = null;
-
-async function liveRefresh() {
-  gMetricStream = await systemModel.getMetricStream();
-  gMetricStream.onerror = (error) => console.log('event stream error:', error);
-  gMetricStream.onmessage = (message) => {
-    const data = JSON.parse(message.data);
-    if (!data.cpu[0]) return; // value can be null if no previous value
-    gGraph.data.labels.push(moment(data.cpu[1]*1000).format('hh:mm'));
-    gGraph.data.datasets[0].data.push(data.cpu[0]);
-    gGraph.update('none'); // disables animation
-  };
-}
-
-async function refresh() {
-  busy.value = true;
-
-  const [error, result] = await systemModel.getMetrics({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
-  if (error) return console.error(error);
-
-  const labels = result.cpu.map(v => {
-    return moment(v[1]*1000).format('hh:mm');
-  });
-
-  const data = result.cpu.map(v => v[0]); // already scaled to cpu*100
-
-  if (gMetricStream) {
-    gMetricStream.close();
-    gMetricStream = null;
-  }
-  if (gGraph) gGraph.destroy();
-  gGraph = new Chart(graph.value, {
-    type: 'line',
-    data: {
-      labels,
-      datasets: [{
-        label: 'CPU',
-        data: data,
-        pointRadius: 0,
-        // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-        borderWidth: 1,
-        tension: 0.4,
-        showLine: true,
-        fill: true
-      }]
-    },
-    options: {
-      plugins: {
-        legend: false
-      },
-      scales: {
-        x: {
-          ticks: {
-            autoSkip: true, // skip tick labels as needed
-            autoSkipPadding: 20, // padding between ticks
-            maxRotation: 0, // don't rotate the labels
-            maxTicksLimit: 15 // max tick labels to show
-          }
-        },
-        y: {
-          ticks: {
-            callback: (value) => {
-              return `${value}%`;
-            },
-            maxTicksLimit: 6 // max tick labels to show
-          },
-          min: 0,
-          max: result.cpuCount * 100,
-          beginAtZero: true,
-        }
-      },
-      interaction: {
-        intersect: false,
-        mode: 'nearest',
-        axis: 'x'
-      }
-    }
-  });
-
-  busy.value = false;
-
-  if (period.value === 0) liveRefresh();
-}
-
-onMounted(async () => {
-  await refresh();
-});
-
-</script>
-
-<template>
-  <Section :title="$t('system.cpuUsage.title')">
-    <template #header-buttons>
-      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
-    </template>
-
-    <div style="position: relative; width: 400px; height: 200px;">
-      <div style="text-align: center" v-if="busy"><Spinner/></div>
-      <canvas v-show="!busy" ref="graph"></canvas>
-    </div>
-  </Section>
-</template>
diff --git a/dashboard/src/components/MemoryUsage.vue b/dashboard/src/components/MemoryUsage.vue
deleted file mode 100644
index a29193681..000000000
--- a/dashboard/src/components/MemoryUsage.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script setup>
-
-import { useI18n } from 'vue-i18n';
-const i18n = useI18n();
-const t = i18n.t;
-
-import { ref, onMounted, useTemplateRef } from 'vue';
-import Chart from 'chart.js/auto';
-import moment from 'moment-timezone';
-import { SingleSelect, Spinner } from 'pankow';
-import Section from './Section.vue';
-import SystemModel from '../models/SystemModel.js';
-
-const systemModel = SystemModel.create();
-
-function trKeyFromPeriod(period) {
-  if (period === 6) return 'app.graphs.period.6h';
-  if (period === 12) return 'app.graphs.period.12h';
-  if (period === 24) return 'app.graphs.period.24h';
-  if (period === 24*7) return 'app.graphs.period.7d';
-  if (period === 24*30) return 'app.graphs.period.30d';
-
-  return '';
-}
-
-const periods = [
-  { id: 6,     label: t(trKeyFromPeriod(6)) },
-  { id: 12,    label: t(trKeyFromPeriod(12)) },
-  { id: 24,    label: t(trKeyFromPeriod(24)) },
-  { id: 24*7,  label: t(trKeyFromPeriod(24*7)) },
-  { id: 24*30, label: t(trKeyFromPeriod(24*30)) },
-];
-
-const graph = useTemplateRef('graph');
-const period = ref(6);
-const busy = ref(true);
-
-let systemMemory = {};
-let gGraph = null;
-
-async function refresh() {
-  busy.value = true;
-
-  const [error, result] = await systemModel.getMetrics({ fromSecs: period.value * 60 * 60, intervalSecs: 300 });
-  if (error) return console.error(error);
-
-  const labels = result.memory.map(v => {
-    return moment(v[1]*1000).format('hh:mm');
-  });
-
-  const data = result.memory.map(v => {
-    return (v[0] / 1024 / 1024 / 1024).toFixed(2);
-  });
-
-  const giB = 1024 * 1024 * 1024;
-  const quarterGiB = 0.25 * giB;
-  const roundedMemory = Math.round(systemMemory.memory / quarterGiB) * quarterGiB;
-  const roundedMemoryGiB = (roundedMemory / giB).toFixed(2);
-
-  const graphData = {
-    labels,
-    datasets: [{
-      label: 'Memory',
-      data: data,
-      pointRadius: 0,
-      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      borderWidth: 1,
-      tension: 0.4,
-      showLine: true,
-      fill: true
-    }]
-  };
-  const options = {
-    plugins: {
-      legend: false
-    },
-    scales: {
-      x: {
-        ticks: {
-          autoSkip: true, // skip tick labels as needed
-          autoSkipPadding: 20, // padding between ticks
-          maxRotation: 0 // don't rotate the labels
-        }
-      },
-      y: {
-        ticks: {
-          callback: (value) => {
-            return `${value} GiB`;
-          },
-          maxTicksLimit: 6 // max tick labels to show
-        },
-        min: 0,
-        max: roundedMemoryGiB,
-        beginAtZero: true,
-      }
-    },
-    interaction: {
-      intersect: false,
-      mode: 'nearest',
-      axis: 'x'
-    }
-  };
-
-  if (gGraph) gGraph.destroy();
-  gGraph = new Chart(graph.value, { type: 'line', data: graphData, options: options });
-
-  busy.value = false;
-}
-
-onMounted(async () => {
-  const [error, result] = await systemModel.memory();
-  if (error) return console.error(error);
-  systemMemory = result;
-
-  await refresh();
-});
-
-</script>
-
-<template>
-  <Section :title="$t('system.systemMemory.title')">
-    <template #header-buttons>
-      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
-    </template>
-
-    <div style="position: relative; width: 400px; height: 200px;">
-      <div style="text-align: center" v-if="busy"><Spinner/></div>
-      <canvas v-show="!busy" ref="graph"></canvas>
-    </div>
-  </Section>
-</template>
diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue
new file mode 100644
index 000000000..ebff92a6d
--- /dev/null
+++ b/dashboard/src/components/SystemMetrics.vue
@@ -0,0 +1,243 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import Chart from 'chart.js/auto';
+import moment from 'moment-timezone';
+import { SingleSelect, Spinner } from 'pankow';
+import Section from './Section.vue';
+import SystemModel from '../models/SystemModel.js';
+
+const systemModel = SystemModel.create();
+
+function trKeyFromPeriod(period) {
+  if (period === 0) return 'app.graphs.period.live';
+  if (period === 6) return 'app.graphs.period.6h';
+  if (period === 12) return 'app.graphs.period.12h';
+  if (period === 24) return 'app.graphs.period.24h';
+  if (period === 24*7) return 'app.graphs.period.7d';
+  if (period === 24*30) return 'app.graphs.period.30d';
+
+  return '';
+}
+
+const periods = [
+  { id: 0,     label: t(trKeyFromPeriod(0)) },
+  { id: 6,     label: t(trKeyFromPeriod(6)) },
+  { id: 12,    label: t(trKeyFromPeriod(12)) },
+  { id: 24,    label: t(trKeyFromPeriod(24)) },
+  { id: 24*7,  label: t(trKeyFromPeriod(24*7)) },
+  { id: 24*30, label: t(trKeyFromPeriod(24*30)) },
+];
+
+const busy = ref(false);
+const period = ref(6);
+const cpuGraphNode = useTemplateRef('cpuGraphNode');
+const memoryGraphNode = useTemplateRef('memoryGraphNode');
+
+let systemMemory = {};
+let cpuGraph = null;
+let memoryGraph = null;
+let metricStream = null;
+
+async function liveRefresh() {
+  metricStream = await systemModel.getMetricStream();
+  metricStream.onerror = (error) => console.log('event stream error:', error);
+  metricStream.onmessage = (message) => {
+    const data = JSON.parse(message.data);
+
+    // value can be null if no previous value
+    if (data.cpu[0]) {
+      cpuGraph.data.labels.push(moment(data.cpu[1]*1000).format('hh:mm'));
+      cpuGraph.data.datasets[0].data.push(data.cpu[0]);
+      cpuGraph.update('none');
+    }
+
+    if (data.memory[0]) {
+      memoryGraph.data.labels.push(moment(data.memory[1]*1000).format('hh:mm'));
+      memoryGraph.data.datasets[0].data.push((data.memory[0] / 1024 / 1024 / 1024).toFixed(2));
+      memoryGraph.update('none');
+    }
+  };
+}
+
+async function refresh() {
+  busy.value = true;
+
+  const [error, result] = await systemModel.getMetrics({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
+  if (error) return console.error(error);
+
+  // cpu
+  const cpuLabels = result.cpu.map(v => {
+    return moment(v[1]*1000).format('hh:mm');
+  });
+
+  const cpuData = result.cpu.map(v => v[0]); // already scaled to cpu*100
+
+  const cpuGraphData = {
+    labels: cpuLabels,
+    datasets: [{
+      label: 'CPU',
+      data: cpuData,
+      pointRadius: 0,
+      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      borderWidth: 1,
+      tension: 0.4,
+      showLine: true,
+      fill: true
+    }]
+  };
+
+  const cpuGraphOptions = {
+    plugins: {
+      legend: false
+    },
+    scales: {
+      x: {
+        ticks: {
+          autoSkip: true, // skip tick labels as needed
+          autoSkipPadding: 20, // padding between ticks
+          maxRotation: 0, // don't rotate the labels
+          maxTicksLimit: 15, // max tick labels to show
+        }
+      },
+      y: {
+        ticks: {
+          callback: (value) => {
+            return `${value}%`;
+          },
+          maxTicksLimit: 6 // max tick labels to show
+        },
+        min: 0,
+        max: result.cpuCount * 100,
+        beginAtZero: true,
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'nearest',
+      axis: 'x'
+    }
+  };
+
+  if (cpuGraph) cpuGraph.destroy();
+  cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
+
+  // memory
+  const memoryLabels = result.memory.map(v => {
+    return moment(v[1]*1000).format('hh:mm');
+  });
+
+  const memoryData = result.memory.map(v => {
+    return (v[0] / 1024 / 1024 / 1024).toFixed(2);
+  });
+
+  const giB = 1024 * 1024 * 1024;
+  const quarterGiB = 0.25 * giB;
+  const roundedMemory = Math.round(systemMemory.memory / quarterGiB) * quarterGiB;
+  const roundedMemoryGiB = (roundedMemory / giB).toFixed(2);
+
+  const memoryGraphData = {
+    labels: memoryLabels,
+    datasets: [{
+      label: 'Memory',
+      data: memoryData,
+      pointRadius: 0,
+      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      borderWidth: 1,
+      tension: 0.4,
+      showLine: true,
+      fill: true
+    }]
+  };
+
+  const memoryGraphOptions = {
+    plugins: {
+      legend: false
+    },
+    scales: {
+      x: {
+        ticks: {
+          autoSkip: true, // skip tick labels as needed
+          autoSkipPadding: 20, // padding between ticks
+          maxRotation: 0, // don't rotate the labels
+          maxTicksLimit: 15, // max tick labels to show
+        }
+      },
+      y: {
+        ticks: {
+          callback: (value) => {
+            return `${value} GiB`;
+          },
+          maxTicksLimit: 6 // max tick labels to show
+        },
+        min: 0,
+        max: roundedMemoryGiB,
+        beginAtZero: true,
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'nearest',
+      axis: 'x'
+    }
+  };
+
+  if (memoryGraph) memoryGraph.destroy();
+  memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions });
+
+  busy.value = false;
+
+  if (metricStream) {
+    metricStream.close();
+    metricStream = null;
+  }
+
+  if (period.value === 0) liveRefresh();
+}
+
+onMounted(async () => {
+  const [error, result] = await systemModel.memory();
+  if (error) return console.error(error);
+
+  systemMemory = result;
+
+  await refresh();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('system.graphs.title')">
+    <template #header-buttons>
+      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
+    </template>
+    <div class="graphs">
+      <div style="position: relative; width: 400px; height: 200px;">
+        <label>{{ $t('system.cpuUsage.title') }}</label>
+        <div style="text-align: center" v-if="busy"><Spinner/></div>
+        <canvas v-show="!busy" ref="cpuGraphNode"></canvas>
+      </div>
+
+      <div style="position: relative; width: 400px; height: 200px;">
+        <label>{{ $t('system.systemMemory.title') }}</label>
+        <div style="text-align: center" v-if="busy"><Spinner/></div>
+        <canvas v-show="!busy" ref="memoryGraphNode"></canvas>
+      </div>
+    </div>
+  </Section>
+</template>
+
+<style scoped>
+
+.graphs {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+</style>
diff --git a/dashboard/src/views/SystemView.vue b/dashboard/src/views/SystemView.vue
index 2b68deeb3..4791575ec 100644
--- a/dashboard/src/views/SystemView.vue
+++ b/dashboard/src/views/SystemView.vue
@@ -9,9 +9,8 @@ import { Button, InputDialog } from 'pankow';
 import moment from 'moment-timezone';
 import { prettyDecimalSize, sleep } from 'pankow/utils';
 import Section from '../components/Section.vue';
+import SystemMetrics from '../components/SystemMetrics.vue';
 import DiskUsage from '../components/DiskUsage.vue';
-import MemoryUsage from '../components/MemoryUsage.vue';
-import CpuUsage from '../components/CpuUsage.vue';
 import SystemModel from '../models/SystemModel.js';
 import DashboardModel from '../models/DashboardModel.js';
 
@@ -110,22 +109,8 @@ onMounted(async () => {
       </div>
     </Section>
 
-    <div class="graphs">
-      <MemoryUsage style="flex-grow: 1;" />
-      <CpuUsage style="flex-grow: 1;" />
-    </div>
+    <SystemMetrics/>
 
     <DiskUsage />
   </div>
 </template>
-
-<style scoped>
-
-.graphs {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-</style>