diff --git a/src/views/system.js b/src/views/system.js
index a5fea703e..90cbcc8ac 100644
--- a/src/views/system.js
+++ b/src/views/system.js
@@ -33,15 +33,26 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
         return (c);
     }
 
-    function getRandomColor() {
-        return rainbow(50, Math.random() * 50);
+    // 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;
     }
 
     var colorIndex = 0;
-    var colors = [ '#2196F3', '#3995b1', '#f0ad4e', '#ff4c4c' ];
+    var colors = [];
+    function resetColors(n) {
+        colorIndex = 0;
+        colors = [];
+        for (var i = 0; i < n; i++) colors.push(rainbow(n, i));
+        shuffle(colors);
+    }
+
     function getNextColor() {
-        if (colors[colorIndex+1]) return colors[colorIndex++];
-        return getRandomColor();
+        return colors[colorIndex++];
     }
 
     $scope.disks = {
@@ -67,7 +78,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                 $scope.disks.disks.forEach(function (disk) {
                     var usageOther = disk.used;
 
-                    colorIndex = 0;
+                    resetColors(disk.contents.length);
                     disk.contents.forEach(function (content) {
                         content.color = getNextColor();
 
@@ -84,7 +95,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                             type: 'standard',
                             label: 'Everything else (Ubuntu, Swap, etc)',
                             id: 'other',
-                            color: '#27CE65',
+                            color: '#555555',
                             usage: usageOther
                         });
                     } else {
@@ -92,7 +103,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                             type: 'standard',
                             label: 'Used',
                             id: 'other',
-                            color: '#27CE65',
+                            color: '#555555',
                             usage: usageOther
                         });
                     }
@@ -152,13 +163,12 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                     }
                 });
 
-                var colors = [ '#2196F3', '#FF6384' ];
-
                 function fillGraph(canvasId, contents, chartPropertyName, divisor, max, format, formatDivisor) {
                     if (!contents || !contents[0]) return; // no data available yet
 
                     var datasets = [];
 
+                    resetColors(contents.length);
                     contents.forEach(function (content, index) {
 
                         // fill holes with previous value
@@ -173,10 +183,9 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
                         // walk backwards and fill up the datapoints
                         content.data.datapoints.reverse().forEach(function (d, index) {
                             datapoints[datapoints.length-1-index] = (d[0] / divisor).toFixed(2);
-                            // return parseInt((d[0] / divisor).toFixed(2));
                         });
 
-                        var color = index > 2 ? getRandomColor() : colors[index];
+                        var color = index === 0 ? '#2196F3' : getNextColor();
                         datasets.push({
                             label: content.label,
                             backgroundColor: color + '4F',