diff --git a/src/views/system.html b/src/views/system.html
index cc286ba1e..47697f546 100644
--- a/src/views/system.html
+++ b/src/views/system.html
@@ -38,8 +38,9 @@
               <p>{{ 'system.diskUsage.diskContent' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint } }}:</p>
               <ul>
                 <li ng-repeat="content in disk.contains">
-                  <span ng-hide="content.app">{{ content.label }} <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
-                  <span ng-show="content.app"><a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.label || content.app.fqdn }}</a> <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
+                  <span ng-show="content.type === 'standard'">{{ content.label }} <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
+                  <span ng-show="content.type === 'app'"><a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.label || content.app.fqdn }}</a> <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
+                  <span ng-show="content.type === 'volume'"><a href="/#/volumes">{{ content.volume.name }}</a> <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
                 </li>
               </ul>
             </div>
diff --git a/src/views/system.js b/src/views/system.js
index 36a83918d..b66470092 100644
--- a/src/views/system.js
+++ b/src/views/system.js
@@ -11,6 +11,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
     $scope.config = Client.getConfig();
     $scope.memory = null;
     $scope.activeTab = 0;
+    $scope.volumesById = {};
 
     // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
     function getRandomColor() {
@@ -45,6 +46,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
             // on scaleway, for some reason docker devices are collected as part of collectd
             // until we figure why just hardcode popular disk devices - https://www.mjmwired.net/kernel/Documentation/devices.txt
             Client.disks(function (error, result) {
+                console.dir(result);
                 if (error) return $scope.disks.setError(error);
 
                 // segregate locations into the correct disks based on 'filesystem'
@@ -52,16 +54,22 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                     disk.id = index;
                     disk.contains = [];
 
-                    if (disk.filesystem === result.platformDataDisk) disk.contains.push({ label: 'Platform data', id: 'platformdata', usage: 0 });
-                    if (disk.filesystem === result.boxDataDisk) disk.contains.push({ label: 'Box data', id: 'boxdata', usage: 0 });
-                    if (disk.filesystem === result.dockerDataDisk) disk.contains.push({ label: 'Docker images', id: 'docker', usage: 0 });
-                    if (disk.filesystem === result.mailDataDisk) disk.contains.push({ label: 'Email data', id: 'maildata', usage: 0 });
-                    if (disk.filesystem === result.backupsDisk) disk.contains.push({ label: 'Backup data', id: 'cloudron-backup', usage: 0 });
+                    if (disk.filesystem === result.platformDataDisk) disk.contains.push({ type: 'standard', label: 'Platform data', id: 'platformdata', usage: 0 });
+                    if (disk.filesystem === result.boxDataDisk) disk.contains.push({ type: 'standard', label: 'Box data', id: 'boxdata', usage: 0 });
+                    if (disk.filesystem === result.dockerDataDisk) disk.contains.push({ type: 'standard', label: 'Docker images', id: 'docker', usage: 0 });
+                    if (disk.filesystem === result.mailDataDisk) disk.contains.push({ type: 'standard', label: 'Email data', id: 'maildata', usage: 0 });
+                    if (disk.filesystem === result.backupsDisk) disk.contains.push({ type: 'standard', label: 'Backup data', id: 'cloudron-backup', usage: 0 });
 
                     const apps = Object.keys(result.apps).filter(function (appId) { return result.apps[appId] === disk.filesystem; });
                     apps.forEach(function (appId) {
                         var app = Client.getCachedAppSync(appId);
-                        disk.contains.push({ app: app, label: app.label || app.fqdn, id: appId, usage: 0 });
+                        disk.contains.push({ typeo: 'app', app: app, label: app.label || app.fqdn, id: appId, usage: 0 });
+                    });
+
+                    const volumes = Object.keys(result.volumes).filter(function (volumeId) { return result.volumes[volumeId] === disk.filesystem; });
+                    volumes.forEach(function (volumeId) {
+                        var volume = $scope.volumesById[volumeId];
+                        disk.contains.push({ type: 'volume', volume: volume, label: volume.name, id: volumeId, usage: 0 });
                     });
                 });
 
@@ -116,6 +124,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
 
                             if ($scope.disks.disks[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
                                 disk.contains.push({
+                                    type: 'standard',
                                     label: 'Everything else (Ubuntu, Swap, etc)',
                                     id: 'other',
                                     color: '#27CE65',
@@ -123,6 +132,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                                 });
                             } else {
                                 disk.contains.push({
+                                    type: 'standard',
                                     label: 'Used',
                                     id: 'other',
                                     color: '#27CE65',
@@ -250,13 +260,28 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
         }
     };
 
+    function refreshVolumes(callback) {
+        Client.getVolumes(function (error, results) {
+            if (error) return console.error(error);
+
+            $scope.volumesById = {};
+            results.forEach(function (v) { $scope.volumesById[v.id] = v; });
+
+            callback();
+        });
+    }
+
     Client.onReady(function () {
         Client.memory(function (error, memory) {
             if (error) console.error(error);
 
             $scope.memory = memory;
 
-            $scope.disks.update();
+            refreshVolumes(function (error) {
+                if (error) console.error(error);
+
+                $scope.disks.update();
+            });
         });
     });