diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue
index 5c13065f9..f616ef7fd 100644
--- a/dashboard/src/components/SystemMetrics.vue
+++ b/dashboard/src/components/SystemMetrics.vue
@@ -14,13 +14,13 @@ import GraphItem from './GraphItem.vue';
 const systemModel = SystemModel.create();
 
 const periods = [
-  { hours: 0,     label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' },
-  { hours: 1,     label: t('app.graphs.period.1h'), format: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' },
-  { hours: 6,     label: t('app.graphs.period.6h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
-  { hours: 12,    label: t('app.graphs.period.12h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
-  { hours: 24,    label: t('app.graphs.period.24h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
-  { hours: 24*7,  label: t('app.graphs.period.7d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
-  { hours: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
+  { hours: 0,                       label: t('app.graphs.period.live'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' },
+  { hours: 1,     intervalSecs:  20, label: t('app.graphs.period.1h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' }, // 180 points
+  { hours: 6,     intervalSecs:  60, label: t('app.graphs.period.6h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { hours: 12,    intervalSecs: 240, label: t('app.graphs.period.12h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { hours: 24,    intervalSecs: 480, label: t('app.graphs.period.24h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { hours: 24*7,  intervalSecs: 960, label: t('app.graphs.period.7d'), tickFormat: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
+  { hours: 24*30, intervalSecs: 960, label: t('app.graphs.period.30d'), tickFormat: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' }, // 2700 points
 ];
 
 const busy = ref(true);
@@ -68,7 +68,7 @@ async function onPeriodChange() {
 
   if (period.value.hours === 0) return await liveRefresh();
 
-  const [error, metrics] = await systemModel.getMetrics({ fromSecs: period.value.hours * 60 * 60, intervalSecs: 300 });
+  const [error, metrics] = await systemModel.getMetrics({ fromSecs: period.value.hours * 60 * 60, intervalSecs: period.value.intervalSecs });
   if (error) return console.error(error);
 
   cpuGraphItem.value.setData(metrics.cpu);
diff --git a/dashboard/src/components/app/Graphs.vue b/dashboard/src/components/app/Graphs.vue
index 8968a52cb..ed2241127 100644
--- a/dashboard/src/components/app/Graphs.vue
+++ b/dashboard/src/components/app/Graphs.vue
@@ -17,13 +17,13 @@ const appsModel = AppsModel.create();
 const systemModel = SystemModel.create();
 
 const periods = [
-  { hours: 0,     label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' },
-  { hours: 1,     label: t('app.graphs.period.1h'), format: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' },
-  { hours: 6,     label: t('app.graphs.period.6h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
-  { hours: 12,    label: t('app.graphs.period.12h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
-  { hours: 24,    label: t('app.graphs.period.24h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
-  { hours: 24*7,  label: t('app.graphs.period.7d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
-  { hours: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
+  { hours: 0,                       label: t('app.graphs.period.live'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' },
+  { hours: 1,     intervalSecs:  20, label: t('app.graphs.period.1h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm:ss A' }, // 180 points
+  { hours: 6,     intervalSecs:  60, label: t('app.graphs.period.6h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { hours: 12,    intervalSecs: 240, label: t('app.graphs.period.12h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { hours: 24,    intervalSecs: 480, label: t('app.graphs.period.24h'), tickFormat: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { hours: 24*7,  intervalSecs: 960, label: t('app.graphs.period.7d'), tickFormat: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
+  { hours: 24*30, intervalSecs: 960, label: t('app.graphs.period.30d'), tickFormat: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' }, // 2700 points
 ];
 
 const busy = ref(true);
@@ -69,7 +69,7 @@ async function onPeriodChange() {
 
   if (period.value.hours === 0) return await liveRefresh();
 
-  const [error, metrics] = await appsModel.getMetrics(app.id, { fromSecs: period.value.hours * 60 * 60, intervalSecs: 300 });
+  const [error, metrics] = await appsModel.getMetrics(app.id, { fromSecs: period.value.hours * 60 * 60, intervalSecs: period.value.intervalSecs });
   if (error) return console.error(error);
 
   cpuGraphItem.value.setData(metrics.cpu);