diff --git a/src/js/index.js b/src/js/index.js
index e142f4206..1ae154dad 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -272,6 +272,13 @@ app.filter('prettyMemory', function () {
     };
 });
 
+app.filter('prettyDiskSize', function () {
+    return function (value) {
+        if (value < 1024 * 1024) return (value/1024/1024).toFixed(2) + ' MB';
+        return (value/1024/1024/1024).toFixed(2) + ' GB';
+    };
+});
+
 app.filter('installationActive', function () {
     return function(app) {
         if (app.installationState === ISTATES.ERROR) return false;
diff --git a/src/theme.scss b/src/theme.scss
index f0b525f71..8b1163937 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -896,6 +896,12 @@ footer {
     text-align: center;
 }
 
+.color-indicator {
+    display: inline-block;
+    width: 3px;
+    height: 18px;
+}
+
 // ----------------------------
 // Error and status page classes
 // ----------------------------
diff --git a/src/views/graphs.html b/src/views/graphs.html
index a662342e5..dad8ece18 100644
--- a/src/views/graphs.html
+++ b/src/views/graphs.html
@@ -42,18 +42,16 @@
   <div class="card card-large">
     <div class="row" ng-repeat="disk in disks" style="margin-bottom: 20px;">
       <div class="col-md-12">
-        <h3>{{ disk.filesystem }} <small>mounted at</small> {{ disk.mountpoint }} <span class="badge pull-right">{{ disk.size }} GB</span></h3>
+        <h3>{{ disk.filesystem }} <small>mounted at</small> {{ disk.mountpoint }} <span class="badge pull-right">{{ disk.size | prettyDiskSize }}</span></h3>
         <div class="progress">
-          <div class="progress-bar progress-bar-success" style="width: {{ disk.occupied / disk.size * 100 }}%">
-            {{ disk.occupied }} GB used
-          </div>
+          <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>
         <br/>
         <p>This {{ disk.type }} disk contains:</p>
         <ul>
           <li ng-repeat="content in disk.contains">
-            <span ng-hide="content.app">{{ content.label }} <small class="text-muted">{{ content.usage }}</small></span>
-            <span ng-show="content.app"><b>{{ content.app.manifest.title }}</b> installed at <a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.fqdn }}</a> <small class="text-muted">{{ content.usage }}</small></span>
+            <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"><b>{{ content.app.manifest.title }}</b> installed at <a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.fqdn }}</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/graphs.js b/src/views/graphs.js
index 41fa4c5dd..9f78e10b5 100644
--- a/src/views/graphs.js
+++ b/src/views/graphs.js
@@ -140,26 +140,42 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
                 ], '-1min', {}, function (error, data) {
                     if (error) return console.error(error);
 
-                    disk.size = bytesToGigaBytes(data[2].datapoints[0][0] + data[1].datapoints[0][0] + data[0].datapoints[0][0]);
-                    disk.free = bytesToGigaBytes(data[0].datapoints[0][0]);
-                    disk.occupied = bytesToGigaBytes(data[2].datapoints[0][0] + data[1].datapoints[0][0]);
+                    disk.size = data[2].datapoints[0][0] + data[1].datapoints[0][0] + data[0].datapoints[0][0];
+                    disk.free = data[0].datapoints[0][0];
+                    disk.occupied = data[2].datapoints[0][0] + data[1].datapoints[0][0];
+
+                    disk.contains.forEach(function (content) {
+                        content.color = getRandomColor();
+                    });
 
                     // get disk usage data
                     const graphiteQueries = disk.contains.map(function (content) {
                         return 'absolute(collectd.localhost.du-' + content.id + '.capacity-usage)';
                     });
 
-                    Client.graphs(graphiteQueries, '-2days', { noNullPoints: true }, function (error, data) {
+                    Client.graphs(graphiteQueries, '-1day', { noNullPoints: true }, function (error, data) {
                         if (error) return console.error(error);
 
+                        var usageOther = disk.occupied;
+
                         data.forEach(function (d) {
                             var content = disk.contains.find(function (content) { return d.target.indexOf(content.id) !== -1; });
-                            if (!content) {
-                                content.usage = 'no data available yet';
-                            } else {
-                                var tmp = d.datapoints[d.datapoints.length-1][0];
-                                content.usage = tmp < 1000000 ? (bytesToMegaBytes(tmp) + ' MB') : (bytesToGigaBytes(tmp) + ' GB');
-                            }
+                            if (!content) return; // didn't match any content
+
+                            var tmp = d.datapoints[d.datapoints.length-1][0];
+                            content.usage = tmp;
+
+                            // deduct from overal disk usage to track other
+                            usageOther -= tmp;
+                        });
+
+
+                        // add content container for other non tracked data
+                        disk.contains.push({
+                            label: 'Other',
+                            id: 'other',
+                            color: '#27CE65',
+                            usage: usageOther
                         });
                     });
                 });