diff --git a/dashboard/src/components/app/Backups.vue b/dashboard/src/components/app/Backups.vue
index 4998c4b50..be141fa69 100644
--- a/dashboard/src/components/app/Backups.vue
+++ b/dashboard/src/components/app/Backups.vue
@@ -262,9 +262,6 @@ onMounted(async () => {
 
     <label>{{ $t('app.backups.auto.title') }}</label>
     <p v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></p>
-    <p class="text-success" v-if="autoBackupsEnabled">{{ $t('app.backups.auto.enabled') }}</p>
-    <p class="text-danger" v-else>{{ $t('app.backups.auto.disabled') }}</p>
-
-    <Switch v-model="autoBackupsEnabled" :label="$t(autoBackupsEnabled ? 'app.backups.auto.disableAction' : 'app.backups.auto.enableAction')"/>
+    <Switch v-model="autoBackupsEnabled" :label="$t(autoBackupsEnabled ? 'app.backups.auto.enabled' : 'app.backups.auto.disabled')"/>
   </div>
 </template>
diff --git a/dashboard/src/components/app/Graphs.vue b/dashboard/src/components/app/Graphs.vue
new file mode 100644
index 000000000..b31cda060
--- /dev/null
+++ b/dashboard/src/components/app/Graphs.vue
@@ -0,0 +1,177 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted } from 'vue';
+import Chart from 'chart.js/auto';
+import { Button, SingleSelect } from 'pankow';
+import AppsModel from '../../models/AppsModel.js';
+
+const { app } = defineProps([ 'app' ]);
+
+const appsModel = AppsModel.create();
+
+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 period = ref(6);
+const busy = ref(false);
+const blockReadTotal = ref(0);
+const blockWriteTotal = ref(0);
+const networkReadTotal = ref(0);
+const networkWriteTotal = ref(0);
+
+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 graphs = {};
+const currentMemoryLimit = app.memoryLimit || app.manifest.memoryLimit || 0;
+const maxGraphMemory = currentMemoryLimit < (512 * 1024 * 1024) ? (512 * 1024 * 1024) : currentMemoryLimit;
+const ioDivisor = 1000 * 1000;
+const borderColors = [ '#2196F3', '#FF6384' ];
+const backgroundColors = [ '#82C4F844', '#FF63844F' ];
+
+function fillGraph(element, contents, chartPropertyName, divisor, max, format, formatDivisor, stepSize) {
+  if (!contents || !contents[0]) return; // no data available yet
+
+  // keep in sync with graphs.js
+  const timePeriod = period.value * 60;
+  const timeBucketSizeMinutes = timePeriod > (24 * 60) ? (6*60) : 5;
+  const steps = Math.floor(timePeriod/timeBucketSizeMinutes);
+
+  const labels = (new Array(steps).fill(0)).map(function (v, index) {
+    const dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSizeMinutes)) * 60 * 1000));
+
+    if (period.value > 24) {
+      return dateTime.toLocaleDateString();
+    } else {
+      return dateTime.toLocaleTimeString();
+    }
+  });
+
+  const datasets = [];
+  contents.forEach((content, index) => {
+    // fill holes with previous value
+    let cur = 0;
+    content.data.forEach(function (d) {
+      if (d[0] === null) d[0] = cur;
+      else cur = d[0];
+    });
+
+    const datapoints = Array(steps).map(function () { return '0'; });
+
+    // walk backwards and fill up the datapoints
+    content.data.reverse().forEach((d, index) => {
+      datapoints[datapoints.length-1-index] = (d[0] / divisor).toFixed(2);
+    });
+
+    datasets.push({
+      label: content.label,
+      backgroundColor: backgroundColors[index],
+      borderColor: borderColors[index],
+      borderWidth: 1,
+      radius: 0,
+      data: datapoints,
+      cubicInterpolationMode: 'monotone',
+      tension: 0.4
+    });
+  });
+
+  const graphData = {
+    labels: labels,
+    datasets: datasets
+  };
+
+  const options = {
+    // responsive: true,
+    // maintainAspectRatio: true,
+    // aspectRatio: 2.5,
+    animation: false,
+    plugins: {
+      legend: {
+        display: false
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'index',
+    },
+    scales: {
+      x: {
+        ticks: { autoSkipPadding: 50, maxRotation: 0 }
+      },
+      y: {
+        ticks: { maxTicksLimit: 6 },
+        min: 0,
+        beginAtZero: true
+      }
+    }
+  };
+
+  if (format) options.scales.y.ticks.callback = (value) => {
+    if (!formatDivisor) return value + ' ' + format;
+    return (value/formatDivisor).toLocaleString('en-US', { maximumFractionDigits: 6 }) + ' ' + format;
+  };
+  if (max) options.scales.y.max = max;
+  if (stepSize) options.scales.y.ticks.stepSize = stepSize;
+
+  if (graphs[chartPropertyName]) graphs[chartPropertyName].destroy();
+  graphs[chartPropertyName] = new Chart(element.getContext('2d'), { type: 'line', data: graphData, options: options });
+}
+
+async function refresh() {
+  busy.value = true;
+
+  const [error,result] = await appsModel.graphs(app.id, period.value * 60);
+  if (error) return console.error(error);
+
+  blockReadTotal.value = (result.blockReadTotal / ioDivisor / 1000).toFixed(2) + ' MB';
+  blockWriteTotal.value = (result.blockWriteTotal / ioDivisor / 1000).toFixed(2) + ' MB';
+  networkReadTotal.value = (result.networkReadTotal / ioDivisor / 1000).toFixed(2) + ' MB';
+  networkWriteTotal.value = (result.networkWriteTotal / ioDivisor / 1000).toFixed(2) + ' MB';
+
+  fillGraph(document.getElementById('graphsMemoryChart'), [{ data: result.memory, label: 'Memory' }], 'memoryChart', 1024 * 1024, maxGraphMemory / 1024 / 1024, 'GiB', 1024, (maxGraphMemory / 1024 / 1024) <= 1024 ? 256 : 512);
+  fillGraph(document.getElementById('graphsCpuChart'), [{ data: result.cpu, label: 'CPU' }], 'cpuChart', 1, result.cpuCount * 100, '%');
+  fillGraph(document.getElementById('graphsDiskChart'), [{ data: result.blockRead, label: 'read' }, { data: result.blockWrite, label: 'write' }], 'diskChart', ioDivisor, null, 'kB/s');
+  fillGraph(document.getElementById('graphsNetworkChart'), [{ data: result.networkRead, label: 'inbound' }, { data: result.networkWrite, label: 'outbound' }], 'networkChart', ioDivisor, null, 'kB/s');
+
+  busy.value = false;
+}
+
+onMounted(async () => {
+  await refresh();
+});
+
+</script>
+
+<template>
+  <div>
+    <div style="display: flex; gap: 6px; flex-direction: row-reverse;">
+      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
+      <Button tool plain secondary @click="refresh()" :loading="busy" :disabled="busy" icon="fa-solid fa-sync-alt"/>
+    </div>
+
+    <label style="margin-top: 10px;">Memory</label>
+    <canvas id="graphsMemoryChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
+    <label style="margin-top: 10px;">CPU</label>
+    <canvas id="graphsCpuChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
+    <label style="margin-top: 10px; display: block;">Disk I/O <span class="pull-right text-small">{{ $t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal }) }}</span></label>
+    <canvas id="graphsDiskChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
+    <label style="margin-top: 10px; display: block;">Network I/O <span class="pull-right text-small">{{ $t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal }) }}</span></label>
+    <canvas id="graphsNetworkChart" style="width: 100%; height: 100px; margin-bottom: 10px;"></canvas>
+  </div>
+</template>
diff --git a/dashboard/src/models/AppsModel.js b/dashboard/src/models/AppsModel.js
index 204f4e6e5..f9ca372e7 100644
--- a/dashboard/src/models/AppsModel.js
+++ b/dashboard/src/models/AppsModel.js
@@ -350,6 +350,17 @@ function create() {
       if (result.status !== 202) return [result];
       return [null];
     },
+    async graphs(id, fromMinutes) {
+      let result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/apps/${id}/graphs`, { fromMinutes, access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 200) return [result];
+      return [null, result.body];
+    },
   };
 }
 
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
index 64776bdf2..c2bc7e2c6 100644
--- a/dashboard/src/views/AppConfigureView.vue
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -12,6 +12,7 @@ import Cron from '../components/app/Cron.vue';
 import Display from '../components/app/Display.vue';
 import Email from '../components/app/Email.vue';
 import Eventlog from '../components/app/Eventlog.vue';
+import Graphs from '../components/app/Graphs.vue';
 import Info from '../components/app/Info.vue';
 import Location from '../components/app/Location.vue';
 import Resources from '../components/app/Resources.vue';
@@ -220,7 +221,7 @@ onBeforeUnmount(() => {
             <Resources v-else-if="view === 'resources'" :app="app"/>
             <Services v-else-if="view === 'services'" :app="app"/>
             <Storage v-else-if="view === 'storage'" :app="app"/>
-            <div v-else-if="view === 'graphs'"></div>
+            <Graphs v-else-if="view === 'graphs'" :app="app"/>
             <Security v-else-if="view === 'security'" :app="app"/>
             <Email v-else-if="view === 'email'" :app="app"/>
             <Cron v-else-if="view === 'cron'" :app="app"/>