diff --git a/src/js/client.js b/src/js/client.js
index 5e8204dcb..5b4e9fb1e 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -1365,6 +1365,15 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.memory = function (callback) {
+        get('/api/v1/cloudron/memory', null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data);
+        });
+    };
+
     Client.prototype.graphs = function (targets, from, options, callback) {
         var config = {
             params: {
diff --git a/src/views/graphs.js b/src/views/graphs.js
index c0be668ba..54b936ba2 100644
--- a/src/views/graphs.js
+++ b/src/views/graphs.js
@@ -4,6 +4,7 @@
 /* global asyncForEach:false */
 /* global angular:false */
 /* global $:false */
+/* global asyncSeries */
 
 angular.module('Application').controller('GraphsController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
@@ -12,6 +13,7 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
     $scope.memoryUsageApps = [];
     $scope.activeApp = null;
     $scope.disks = [];
+    $scope.memory = null;
 
     $scope.errorMessage = '';
 
@@ -49,7 +51,7 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
         var timeBucketSize = 60;    // in minutes
 
         var target;
-        if (app === 'system') target = 'summarize(collectd.localhost.memory.memory-used, "' + timeBucketSize + 'min", "avg")';
+        if (app === 'system') target = 'summarize(sum(collectd.localhost.memory.memory-used, collectd.localhost.swap.swap-used), "' + timeBucketSize + 'min", "avg")';
         else target = 'summarize(collectd.localhost.table-' + app.id + '-memory.gauge-rss, "' + timeBucketSize + 'min", "avg")';
 
         Client.graphs([target], '-' + timePeriod + 'min', {}, function (error, result) {
@@ -79,7 +81,7 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
 
             var scaleMax = 0;
             if ($scope.activeApp === 'system') {
-                scaleMax = Client.getConfig().memory;
+                scaleMax = $scope.memory.memory + $scope.memory.swap;
             } else {
                 scaleMax = $scope.activeApp.memoryLimit || $scope.activeApp.manifest.memoryLimit || (256 * 1024 * 1024);
             }
@@ -198,13 +200,22 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
         var targetsInfo = [];
 
         targets.push('summarize(collectd.localhost.memory.memory-used, "1min", "avg")');
-        targetsInfo.push({ label: 'System', color: '#2196F3' });
+        targetsInfo.push({ label: 'Memory (RAM)', color: '#2196F3' });
+
+        targets.push('summarize(collectd.localhost.swap.swap-used, "1min", "avg")');
+        targetsInfo.push({ label: 'Swap', color: '#2196A9' });
 
         targets.push('summarize(sum(collectd.localhost.memory.memory-buffered, collectd.localhost.memory.memory-cached), "1min", "avg")');
-        targetsInfo.push({ label: 'Cached', color: '#f0ad4e' });
+        targetsInfo.push({ label: 'Memory (Cached)', color: '#f0ad4e' });
+
+        targets.push('summarize(collectd.localhost.swap.swap-cached, "1min", "avg")');
+        targetsInfo.push({ label: 'Swap (Cached)', color: '#f0cd4e' });
 
         targets.push('summarize(collectd.localhost.memory.memory-free, "1min", "avg")');
-        targetsInfo.push({ label: 'Free', color: '#27CE65' });
+        targetsInfo.push({ label: 'Memory (Free)', color: '#27DD65' });
+
+        targets.push('summarize(collectd.localhost.swap.swap-free, "1min", "avg")');
+        targetsInfo.push({ label: 'Swap (Free)', color: '#27CE65' });
 
         Client.graphs(targets, '-1min', {}, function (error, result) {
             if (error) return $scope.setError('memory', error);
@@ -226,12 +237,15 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
                 labels: result.map(function (data, index) { return targetsInfo[index].label; })
             };
 
-            var ctx = $('#memoryUsageSystemChart').get(0).getContext('2d');
-            new Chart(ctx, { type: 'doughnut', data: tmp, options: { legend: { display: false }}});
-
-            $('#memoryUsageSystemChart').get(0).onclick = function () {
-                $scope.setMemoryApp('system');
+            var options = {
+                onClick: function (/*event, dataset*/) {
+                    $scope.setMemoryApp('system');
+                },
+                legend: { display: false }
             };
+
+            var ctx = $('#memoryUsageSystemChart').get(0).getContext('2d');
+            new Chart(ctx, { type: 'doughnut', data: tmp, options: options });
         });
     };
 
@@ -296,10 +310,24 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
         });
     };
 
-    Client.onReady($scope.updateDiskGraphs);
-    Client.onReady($scope.updateMemorySystemChart);
-    Client.onReady($scope.updateMemoryAppsChart);
-    Client.onReady($scope.setMemoryApp.bind(null, 'system'));
+    function getMemory(callback) {
+        Client.memory(function (error, memory) {
+            if (error) console.error(error);
+
+            $scope.memory = memory;
+
+            callback();
+        });
+    }
+
+    Client.onReady(function () {
+        getMemory(function () {
+            $scope.updateDiskGraphs();
+            $scope.updateMemorySystemChart();
+            $scope.updateMemoryAppsChart();
+            $scope.setMemoryApp('system');
+        });
+    });
 
     $('.modal-backdrop').remove();
 }]);