diff --git a/dashboard/package.json b/dashboard/package.json
index 911adb710..f8b68b4a5 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -7,7 +7,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@cloudron/pankow": "^3.4.0",
+    "@cloudron/pankow": "^3.4.1",
     "@fontsource/inter": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.0.1",
     "@vitejs/plugin-vue": "^6.0.1",
diff --git a/dashboard/src/components/GraphItem.vue b/dashboard/src/components/GraphItem.vue
index 35a71eb52..fd356cd81 100644
--- a/dashboard/src/components/GraphItem.vue
+++ b/dashboard/src/components/GraphItem.vue
@@ -1,7 +1,6 @@
 
 <script setup>
 
-import moment from 'moment-timezone';
 import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 import Chart from 'chart.js/auto';
 import { prettyDecimalSize, formatDate } from '@cloudron/pankow/utils';
@@ -144,7 +143,7 @@ function createGraphOptions({ yscale, period, highMark }) {
           maxRotation: 0, // don't rotate the labels
           callback: function (value) {
             if (period.hours === 0) return `${5-(value-this.min)/60000}min`;
-            return moment(value).format(period.tickFormat);
+            return formatDate(period.tickFormat, value);
           },
           count, // ignored when stepSize is set
           stepSize // for realtime graph, generate steps of 1min and appropriate tick text
diff --git a/dashboard/src/components/SystemGraphs.vue b/dashboard/src/components/SystemGraphs.vue
index 74ac469e4..6a8199a22 100644
--- a/dashboard/src/components/SystemGraphs.vue
+++ b/dashboard/src/components/SystemGraphs.vue
@@ -16,13 +16,13 @@ const systemModel = SystemModel.create();
 const appsModel = AppsModel.create();
 
 const periods = [
-  { hours: 0,                       label: t('app.graphs.period.live'), tickFormat: 'hh:mm A', tooltipFormat: 'short' },
-  { hours: 1,     intervalSecs:  20, label: t('app.graphs.period.1h'), tickFormat: 'hh:mm A', tooltipFormat: 'short' }, // 180 points
-  { hours: 6,     intervalSecs:  60, label: t('app.graphs.period.6h'), tickFormat: 'hh:mm A', tooltipFormat: 'short' },
-  { hours: 12,    intervalSecs: 240, label: t('app.graphs.period.12h'), tickFormat: 'hh:mm A', tooltipFormat: 'short' },
-  { hours: 24,    intervalSecs: 480, label: t('app.graphs.period.24h'), tickFormat: 'hh:mm A', tooltipFormat: 'short' },
-  { hours: 24*7,  intervalSecs: 960, label: t('app.graphs.period.7d'), tickFormat: 'DD MMM', tooltipFormat: 'long' },
-  { hours: 24*30, intervalSecs: 960, label: t('app.graphs.period.30d'), tickFormat: 'DD MMM', tooltipFormat: 'long' }, // 2700 points
+  { 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);
diff --git a/dashboard/src/components/app/Graphs.vue b/dashboard/src/components/app/Graphs.vue
index c3ee1e2a1..be7292ead 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'), 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
+  { 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);