diff --git a/dashboard/src/components/DiskUsage.vue b/dashboard/src/components/DiskUsage.vue
index 9c7ad0910..ff7dd6d77 100644
--- a/dashboard/src/components/DiskUsage.vue
+++ b/dashboard/src/components/DiskUsage.vue
@@ -1,170 +1,20 @@
 <script setup>
 
 import { ref, onMounted } from 'vue';
-import { Button } from '@cloudron/pankow';
-import { prettyDecimalSize, prettyDate } from '@cloudron/pankow/utils';
-import { TASK_TYPES } from '../constants.js';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
-import AppsModel from '../models/AppsModel.js';
-import VolumesModel from '../models/VolumesModel.js';
-import TasksModel from '../models/TasksModel.js';
+import DiskUsageItem from './DiskUsageItem.vue';
 
 const systemModel = SystemModel.create();
-const appsModel = AppsModel.create();
-const volumesModel = VolumesModel.create();
-const tasksModel = TasksModel.create();
 
-const busy = ref(false);
-const lastUpdated = ref(0);
-const disks = ref([]);
 const ready = ref(false);
-
-async function updateTaskStatus(id) {
-  const [error, result] = await tasksModel.get(id);
-  if (error) return setTimeout(updateTaskStatus.bind(null, id), 5000);
-
-  if (!result.active) return busy.value = false;
-  busy.value = true;
-
-  setTimeout(updateTaskStatus.bind(null, id), 2000);
-}
-
-async function onRescan() {
-  busy.value = true;
-
-  const [error, result] = await systemModel.rescanDiskUsage();
-  if (error) return console.error(error);
-
-  updateTaskStatus(result);
-}
-
-// https://stackoverflow.com/questions/1484506/random-color-generator
-function rainbow(numOfSteps, step) {
-  // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
-  // Adam Cole, 2011-Sept-14
-  // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
-  var r, g, b;
-  var h = step / numOfSteps;
-  var i = ~~(h * 6);
-  var f = h * 6 - i;
-  var q = 1 - f;
-  switch(i % 6){
-  case 0: r = 1; g = f; b = 0; break;
-  case 1: r = q; g = 1; b = 0; break;
-  case 2: r = 0; g = 1; b = f; break;
-  case 3: r = 0; g = q; b = 1; break;
-  case 4: r = f; g = 0; b = 1; break;
-  case 5: r = 1; g = 0; b = q; break;
-  }
-  var c = '#' + ('00' + (~ ~(r * 255)).toString(16)).slice(-2) + ('00' + (~ ~(g * 255)).toString(16)).slice(-2) + ('00' + (~ ~(b * 255)).toString(16)).slice(-2);
-  return (c);
-}
-
-// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
-function shuffle(a) {
-  for (let i = a.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [a[i], a[j]] = [a[j], a[i]];
-  }
-  return a;
-}
-
-let colorIndex = 0;
-let colors = [];
-function resetColors(n) {
-  colorIndex = 0;
-  colors = [];
-  for (let i = 0; i < n; i++) colors.push(rainbow(n, i));
-  shuffle(colors);
-}
-
-function getNextColor() {
-  return colors[colorIndex++];
-}
-
-async function refresh() {
-  let [error, result] = await appsModel.list();
-  if (error) return console.error(error);
-
-  const appsById = {};
-  result.forEach(a => { appsById[a.id] = a; });
-
-  [error, result] = await volumesModel.list();
-  if (error) return console.error(error);
-
-  const volumesById = {};
-  result.forEach(v => { volumesById[v.id] = v; });
-
-  [error, result] = await systemModel.diskUsage();
-  if (error) return console.error(error);
-
-  lastUpdated.value = result.ts;
-
-  // [ { filesystem, type, size, used, available, capacity, mountpoint }]
-  disks.value = Object.keys(result.filesystems).map(k => result.filesystems[k]); // convert object to array...
-
-  disks.value.forEach(disk => {
-    let usageOther = disk.used;
-
-    resetColors(disk.contents.length);
-
-    // if this disk is a volume amend it and remove it from contents
-    disk.contents.forEach(function (content) { if (content.path === disk.mountpoint) disk.volume = volumesById[content.id]; });
-    disk.contents = disk.contents.filter(function (content) { return content.path !== disk.mountpoint; });
-
-    // only show old backups if the size is significant
-    disk.contents = disk.contents.filter(function (content) { return content.id !== 'cloudron-backup-default' || content.usage > 1024*1024*1024; });
-
-    disk.contents.forEach(function (content) {
-      content.color = getNextColor();
-
-      if (content.type === 'app') {
-        content.app = appsById[content.id];
-        if (!content.app) content.uninstalled = true;
-        else content.label = content.app.label || content.app.fqdn;
-      } else if (content.type === 'volume') {
-        content.volume = volumesById[content.id];
-        content.label = content.volume ? content.volume.name : 'Removed volume';
-      }
-
-      // ensure a label for ui
-      content.label = content.label || content.id;
-
-      usageOther -= content.usage;
-    });
-
-    disk.contents.sort((x, y) => { return y.usage - x.usage; }); // sort by usage
-
-    if (disks.value[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
-      disk.contents.push({
-        type: 'standard',
-        label: 'Everything else (Ubuntu, etc)',
-        id: 'other',
-        color: '#555555',
-        usage: usageOther
-      });
-    } else {
-      disk.contents.push({
-        type: 'standard',
-        label: 'Used',
-        id: 'other',
-        color: '#555555',
-        usage: usageOther
-      });
-    }
-  });
-}
+const filesystems = ref([]);
 
 onMounted(async () => {
-  const [error, result] = await tasksModel.getLatestByType(TASK_TYPES.TASK_UPDATE_DISK_USAGE);
-  if (!error && result.active) {
-    busy.value = true;
-    updateTaskStatus(result.id);
-  }
-
-  await refresh();
+  const [error, result] = await systemModel.filesystems();
+  if (error) return console.error(error);
 
+  filesystems.value = Object.values(result);
   ready.value = true;
 });
 
@@ -172,45 +22,24 @@ onMounted(async () => {
 
 <template>
   <Section :title="$t('system.diskUsage.title')">
-    <template #header-buttons>
-      <span class="small" style="margin: auto; margin-right: 10px" v-show="!busy && lastUpdated">Last updated: {{ prettyDate(lastUpdated) }}</span>
-      <Button tool @click="onRescan()" v-if="ready" :disabled="busy" :loading="busy" icon="fa-solid fa-sync-alt" />
-    </template>
-
-    <div v-for="(disk, index) in disks" :key="disk.filesystem">
-      <hr style="margin: 5px 0px;" v-show="index !== 0"/>
-      <div>
-        <div style="display: flex; align-items: baseline; justify-content: space-between;">
-          <h3 class="no-wrap" style="font-size: 20px;" v-html="$t('system.diskUsage.mountedAt', { filesystem: disk.filesystem, mountpoint: disk.mountpoint })"></h3>
-          <div class="text-muted" style="white-space:nowrap;" v-if="disk.available && disk.size" v-html="$t('system.diskUsage.usedInfo', { used: prettyDecimalSize(disk.used), size: prettyDecimalSize(disk.size) })"></div>
-          <div class="text-muted" style="white-space:nowrap;" v-else>{{ $t('system.diskUsage.notAvailableYet') }}</div>
-        </div>
-        <div class="usage-bar">
-          <div class="usage-bar-section" v-for="content in disk.contents" :key="content" :style="{ width: `${content.usage / disk.size * 100}%`, backgroundColor: content.color }" v-tooltip="`${content.label} ${prettyDecimalSize(content.usage)}`"></div>
-          <div class="usage-bar-section-remaining">{{ prettyDecimalSize(disk.available) }}</div>
-        </div>
-        <div class="text-right text-muted" style="margin-top: 10px;" v-show="disk.speed !== -1">{{ $t('system.diskUsage.diskSpeed', { speed: disk.speed }) }}</div>
-        <p v-if="disk.volume" v-html="$t('system.diskUsage.volumeContent', { name: disk.volume.name })"></p>
-        <p v-else>{{ $t('system.diskUsage.diskContent') }}:</p>
-        <div v-for="content in disk.contents" :key="content.id" class="disk-content">
-          <span class="color-indicator" :style="{ backgroundColor: content.color }">&nbsp;</span>
-          <span v-show="content.type === 'cloudron-backup-default'">{{ content.path }} (Old Backups)</span>
-          <span v-show="content.type === 'standard'">{{ content.label }}</span>
-          <span v-show="content.type === 'swap'">{{ content.label }}</span>
-          <span v-show="content.type === 'app'">
-            <a v-if="content.app" :href="`/#/app/${content.app.id}/storage`">{{ content.label }}</a>
-            <span v-else>{{ $t('system.diskUsage.uninstalledApp') }}</span>
-          </span>
-          <span v-show="content.type === 'volume'"><a href="/#/volumes">{{ content.label }}</a></span>
-          <small class="disk-content-size">{{ prettyDecimalSize(content.usage) }}</small>
-        </div>
-      </div>
+    <div class="filesystems-grid">
+      <DiskUsageItem v-for="filesystem in filesystems" :key="filesystem.filesystem" :filesystem="filesystem" />
     </div>
   </Section>
 </template>
 
 <style scoped>
 
+.filesystems-grid {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  transition: 300ms;
+  flex-wrap: wrap;
+  justify-content: start;
+  align-content: start;
+}
+
 .usage-bar {
   display: flex;
   flex-wrap: nowrap;
diff --git a/dashboard/src/components/DiskUsageItem.vue b/dashboard/src/components/DiskUsageItem.vue
new file mode 100644
index 000000000..59617de9f
--- /dev/null
+++ b/dashboard/src/components/DiskUsageItem.vue
@@ -0,0 +1,220 @@
+<script setup>
+
+import { prettyBinarySize, prettyDecimalSize } from '@cloudron/pankow/utils';
+
+const props = defineProps({
+  filesystem: Object
+});
+
+// async function updateTaskStatus(id) {
+//   const [error, result] = await tasksModel.get(id);
+//   if (error) return setTimeout(updateTaskStatus.bind(null, id), 5000);
+
+//   if (!result.active) return busy.value = false;
+//   busy.value = true;
+
+//   setTimeout(updateTaskStatus.bind(null, id), 2000);
+// }
+
+// async function onRescan() {
+//   busy.value = true;
+
+//   const [error, result] = await systemModel.rescanDiskUsage();
+//   if (error) return console.error(error);
+
+//   updateTaskStatus(result);
+// }
+
+// // https://stackoverflow.com/questions/1484506/random-color-generator
+// function rainbow(numOfSteps, step) {
+//   // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
+//   // Adam Cole, 2011-Sept-14
+//   // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
+//   var r, g, b;
+//   var h = step / numOfSteps;
+//   var i = ~~(h * 6);
+//   var f = h * 6 - i;
+//   var q = 1 - f;
+//   switch(i % 6){
+//   case 0: r = 1; g = f; b = 0; break;
+//   case 1: r = q; g = 1; b = 0; break;
+//   case 2: r = 0; g = 1; b = f; break;
+//   case 3: r = 0; g = q; b = 1; break;
+//   case 4: r = f; g = 0; b = 1; break;
+//   case 5: r = 1; g = 0; b = q; break;
+//   }
+//   var c = '#' + ('00' + (~ ~(r * 255)).toString(16)).slice(-2) + ('00' + (~ ~(g * 255)).toString(16)).slice(-2) + ('00' + (~ ~(b * 255)).toString(16)).slice(-2);
+//   return (c);
+// }
+
+// // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
+// function shuffle(a) {
+//   for (let i = a.length - 1; i > 0; i--) {
+//     const j = Math.floor(Math.random() * (i + 1));
+//     [a[i], a[j]] = [a[j], a[i]];
+//   }
+//   return a;
+// }
+
+// let colorIndex = 0;
+// let colors = [];
+// function resetColors(n) {
+//   colorIndex = 0;
+//   colors = [];
+//   for (let i = 0; i < n; i++) colors.push(rainbow(n, i));
+//   shuffle(colors);
+// }
+
+// function getNextColor() {
+//   return colors[colorIndex++];
+// }
+
+// async function refresh() {
+//   let [error, result] = await appsModel.list();
+//   if (error) return console.error(error);
+
+//   const appsById = {};
+//   result.forEach(a => { appsById[a.id] = a; });
+
+//   [error, result] = await volumesModel.list();
+//   if (error) return console.error(error);
+
+//   const volumesById = {};
+//   result.forEach(v => { volumesById[v.id] = v; });
+
+//   [error, result] = await systemModel.diskUsage();
+//   if (error) return console.error(error);
+
+//   lastUpdated.value = result.ts;
+
+//   // [ { filesystem, type, size, used, available, capacity, mountpoint }]
+//   disks.value = Object.keys(result.filesystems).map(k => result.filesystems[k]); // convert object to array...
+
+//   disks.value.forEach(disk => {
+//     let usageOther = disk.used;
+
+//     resetColors(disk.contents.length);
+
+//     // if this disk is a volume amend it and remove it from contents
+//     disk.contents.forEach(function (content) { if (content.path === disk.mountpoint) disk.volume = volumesById[content.id]; });
+//     disk.contents = disk.contents.filter(function (content) { return content.path !== disk.mountpoint; });
+
+//     // only show old backups if the size is significant
+//     disk.contents = disk.contents.filter(function (content) { return content.id !== 'cloudron-backup-default' || content.usage > 1024*1024*1024; });
+
+//     disk.contents.forEach(function (content) {
+//       content.color = getNextColor();
+
+//       if (content.type === 'app') {
+//         content.app = appsById[content.id];
+//         if (!content.app) content.uninstalled = true;
+//         else content.label = content.app.label || content.app.fqdn;
+//       } else if (content.type === 'volume') {
+//         content.volume = volumesById[content.id];
+//         content.label = content.volume ? content.volume.name : 'Removed volume';
+//       }
+
+//       // ensure a label for ui
+//       content.label = content.label || content.id;
+
+//       usageOther -= content.usage;
+//     });
+
+//     disk.contents.sort((x, y) => { return y.usage - x.usage; }); // sort by usage
+
+//     if (disks.value[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
+//       disk.contents.push({
+//         type: 'standard',
+//         label: 'Everything else (Ubuntu, etc)',
+//         id: 'other',
+//         color: '#555555',
+//         usage: usageOther
+//       });
+//     } else {
+//       disk.contents.push({
+//         type: 'standard',
+//         label: 'Used',
+//         id: 'other',
+//         color: '#555555',
+//         usage: usageOther
+//       });
+//     }
+//   });
+// }
+
+
+</script>
+
+<template>
+  <div class="disk-item">
+    <div class="disk-item-title">{{ filesystem.mountpoint }}</div>
+    <div>{{ filesystem.type }}</div>
+    <div class="usage-label">
+      <div>{{ prettyDecimalSize(filesystem.size) }} total</div>
+      <div>{{ prettyDecimalSize(filesystem.available) }} available</div>
+    </div>
+    <div class="disk-size">
+      <div class="disk-used" :style="{ width: parseInt(filesystem.capacity*100) + '%' }"></div>
+    </div>
+    <div v-if="false">
+      <div>Contains:</div>
+      <div v-for="content in filesystem.contents" :key="content.id">
+        <div>{{ content.type }}</div>
+        <div>{{ content.id }}</div>
+        <div>{{ content.path }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.disk-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 10px;
+  max-width: 620px;
+  padding: 10px 16px;
+  overflow: hidden;
+  border-radius: 10px;
+  background-color: var(--card-background);
+  cursor: pointer;
+}
+
+.disk-item:focus,
+.disk-item:hover {
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+  background-color: var(--pankow-color-background-hover) !important;
+  text-decoration: none;
+}
+
+.disk-item > div {
+  margin: 6px 0;
+}
+
+.disk-item-title {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.usage-label {
+  display: flex;
+  justify-content: space-between;
+}
+
+.disk-size {
+  background-color: white;
+  border-radius: calc(var(--pankow-border-radius) / 1.5);
+}
+
+.disk-used {
+  background-color: var(--pankow-color-primary);
+  transition: width 250ms;
+  white-space: nowrap;
+  border-radius: calc(var(--pankow-border-radius) / 1.5);
+  height: 6px;
+}
+
+</style>
diff --git a/dashboard/src/models/SystemModel.js b/dashboard/src/models/SystemModel.js
index 5c4ae0356..dde99ca39 100644
--- a/dashboard/src/models/SystemModel.js
+++ b/dashboard/src/models/SystemModel.js
@@ -39,6 +39,17 @@ function create() {
       if (error || result.status !== 200) return [error || result];
       return [null, result.body.devices];
     },
+    async filesystems() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/system/filesystems`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.filesystems];
+    },
     async info() {
       let error, result;
       try {