diff --git a/src/js/client.js b/src/js/client.js
index 4677673c9..757bd6c01 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -1300,6 +1300,21 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.waitForTask = function (taskId, callback) {
+        var that = this;
+
+        function checkTask() {
+            that.getTask(taskId, function (error, result) {
+                if (error) return callback(error);
+                if (result.pending || result.active) return setTimeout(checkTask, 1000);
+
+                callback(result.error, result.result);
+            });
+        }
+
+        checkTask();
+    };
+
     Client.prototype.getTask = function (taskId, callback) {
         get('/api/v1/tasks/' + taskId, null, function (error, data, status) {
             if (error) return callback(error);
@@ -1930,6 +1945,26 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.diskUsage = function (callback) {
+        get('/api/v1/cloudron/disk_usage', null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data);
+        });
+    };
+
+    Client.prototype.refreshDiskUsage = function (callback) {
+        var that = this;
+
+        post('/api/v1/cloudron/disk_usage', {}, null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 201) return callback(new ClientError(status, data));
+
+            that.waitForTask(data.taskId, callback);
+        });
+    };
+
     Client.prototype.memory = function (callback) {
         get('/api/v1/cloudron/memory', null, function (error, data, status) {
             if (error) return callback(error);
diff --git a/src/views/system.html b/src/views/system.html
index 9b69368f1..e4d085267 100644
--- a/src/views/system.html
+++ b/src/views/system.html
@@ -69,12 +69,12 @@
                 <span class="pull-right small" ng-hide="disk.available && disk.size">{{ 'system.diskUsage.notAvailableYet' | tr }}</span>
               </h3>
               <div class="progress">
-                <div class="progress-bar" ng-repeat="content in disk.contains" style="width: {{ content.usage / disk.size * 100 }}%; background-color: {{ content.color }};" uib-tooltip="{{ content.label + ' ' + (content.usage | prettyDiskSize) }}"></div>
+                <div class="progress-bar" ng-repeat="content in disk.contents" style="width: {{ content.usage / disk.size * 100 }}%; background-color: {{ content.color }};" uib-tooltip="{{ content.label + ' ' + (content.usage | prettyDiskSize) }}"></div>
               </div>
               <br/>
               <p>{{ 'system.diskUsage.diskContent' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint } }}:</p>
               <ul>
-                <li ng-repeat="content in disk.contains">
+                <li ng-repeat="content in disk.contents">
                   <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>
diff --git a/src/views/system.js b/src/views/system.js
index 4a6347ca7..522b386e8 100644
--- a/src/views/system.js
+++ b/src/views/system.js
@@ -35,44 +35,48 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
         refresh: function () {
             $scope.disks.busy = true;
 
-            var result;
-            $scope.disks.disks = result.disks; // [ { filesystem, type, size, used, available, capacity, mountpoint }]
+            Client.refreshDiskUsage(function (error, result) {
+                if (error) return console.error('Failed to refresh disk usage.', error);
 
-            $scope.disks.disks.forEach(function (disk) {
-                var usageOther = disk.occupied;
+                // [ { filesystem, type, size, used, available, capacity, mountpoint }]
+                $scope.disks.disks = Object.keys(result).map(function (k) { return result[k]; });
 
-                colorIndex = 0;
-                disk.contains.forEach(function (content) {
-                    content.color = getNextColor();
+                $scope.disks.disks.forEach(function (disk) {
+                    var usageOther = disk.occupied;
 
-                    if (content.type === 'app') content.app = Client.getInstalledAppsByAppId()[content.id];
-                    if (content.type === 'volume') content.volume = $scope.volumesById(content.id);
+                    colorIndex = 0;
+                    disk.contents.forEach(function (content) {
+                        content.color = getNextColor();
 
-                    usageOther -= content.usage;
+                        if (content.type === 'app') content.app = Client.getInstalledAppsByAppId()[content.id];
+                        if (content.type === 'volume') content.volume = $scope.volumesById[content.id];
+
+                        usageOther -= content.usage;
+                    });
+
+                    disk.contents.sort(function (x, y) { return y.usage - x.usage; }); // sort by usage
+
+                    if ($scope.disks.disks[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, Swap, etc)',
+                            id: 'other',
+                            color: '#27CE65',
+                            usage: usageOther
+                        });
+                    } else {
+                        disk.contents.push({
+                            type: 'standard',
+                            label: 'Used',
+                            id: 'other',
+                            color: '#27CE65',
+                            usage: usageOther
+                        });
+                    }
                 });
 
-                disk.contains.sort(function (x, y) { return y.usage - x.usage; }); // sort by usage
-
-                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',
-                        usage: usageOther
-                    });
-                } else {
-                    disk.contains.push({
-                        type: 'standard',
-                        label: 'Used',
-                        id: 'other',
-                        color: '#27CE65',
-                        usage: usageOther
-                    });
-                }
+                $scope.disks.busy = false;
             });
-
-            $scope.disks.busy = false;
         }
     };
 
@@ -220,7 +224,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                 volumes.forEach(function (v) { $scope.volumesById[v.id] = v; });
 
                 $scope.graphs.refresh();
-                // $scope.disks.refresh();
+                $scope.disks.refresh();
             });
         });
     });