diff --git a/src/theme.scss b/src/theme.scss
index 948859ae4..fd5b43071 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -566,7 +566,7 @@ multiselect {
     }
 
     .card {
-        min-height: 383px;
+        min-height: 418px;
     }
 
     @media(min-width:768px) {
diff --git a/src/views/app.html b/src/views/app.html
index 93bf2b5e1..21fed25ae 100644
--- a/src/views/app.html
+++ b/src/views/app.html
@@ -464,6 +464,7 @@
         <div ng-click="setView('location')" ng-class="{ 'active': view === 'location' }">Location</div>
         <div ng-click="setView('access')" ng-class="{ 'active': view === 'access' }">Access Control</div>
         <div ng-click="setView('resources')" ng-class="{ 'active': view === 'resources' }">Resources</div>
+        <div ng-click="setView('graphs')" ng-class="{ 'active': view === 'graphs' }">Graphs</div>
         <div ng-click="setView('security')" ng-class="{ 'active': view === 'security' }">Security</div>
         <div ng-click="setView('email')" ng-class="{ 'active': view === 'email' }" ng-show="app.manifest.addons.sendmail || app.manifest.addons.recvmail">Email</div>
         <div ng-click="setView('updates')" ng-class="{ 'active': view === 'updates' }">Updates</div>
@@ -805,6 +806,29 @@
         </div>
       </div>
 
+      <div class="card" ng-show="view === 'graphs'">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="dropdown pull-right">
+              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
+                Select Period {{ graphs.periodLabel }}
+                <span class="caret"></span>
+              </button>
+              <ul class="dropdown-menu">
+                <li><a href="" ng-click="graphs.setPeriod(6, '6 hours')">6 hours</a></li>
+                <li><a href="" ng-click="graphs.setPeriod(24, '24 hours')">24 hours</a></li>
+                <li><a href="" ng-click="graphs.setPeriod(24*7, '7 days')">7 days</a></li>
+                <li><a href="" ng-click="graphs.setPeriod(24*30, '30 days')">30 days</a></li>
+              </ul>
+            </div>
+            <label>Memory Usage</label>
+            <canvas id="graphsMemoryChart" style="width: 100%; height: 200px;"></canvas>
+            <label>Disk Usage</label>
+            <canvas id="graphsDiskChart" style="width: 100%; height: 200px;"></canvas>
+          </div>
+        </div>
+      </div>
+
       <div class="card" ng-show="view === 'email'">
         <div class="row">
           <div class="col-md-12">
diff --git a/src/views/app.js b/src/views/app.js
index a8e985194..aee589983 100644
--- a/src/views/app.js
+++ b/src/views/app.js
@@ -8,6 +8,7 @@
 /* global ISTATES */
 /* global ERROR */
 /* global moment */
+/* global Chart */
 
 angular.module('Application').controller('AppController', ['$scope', '$location', '$timeout', '$interval', '$route', '$routeParams', 'Client', function ($scope, $location, $timeout, $interval, $route, $routeParams, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().isAtLeastAdmin) $location.path('/'); });
@@ -586,6 +587,82 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         }
     };
 
+    $scope.graphs = {
+        error: {},
+
+        period: 6,
+        periodLabel: '6 hours',
+        memoryChart: null,
+        diskChart: null,
+
+        setPeriod: function (hours, label) {
+            $scope.graphs.period = hours;
+            $scope.graphs.periodLabel = label;
+            $scope.graphs.show();
+        },
+
+        show: function () {
+            var timePeriod = $scope.graphs.period * 60;  // in minutes
+            var timeBucketSize = 60;                     // in minutes
+
+            function fillGraph(canvasId, data, label, chartPropertyName) {
+                // translate the data from bytes to MB
+                var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / 1024 / 1024).toFixed(2)); });
+                var labels = datapoints.map(function (d, index) {
+                    var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSize)) * 60 *1000));
+                    return ('0' + dateTime.getHours()).slice(-2) + ':00';
+                });
+
+                var data = {
+                    labels: labels,
+                    datasets: [{
+                        label: label,
+                        backgroundColor: '#82C4F8',
+                        borderColor: '#2196F3',
+                        borderWidth: 2,
+                        pointBackgroundColor: 'rgba(151,187,205,1)',
+                        pointBorderColor: '#2196F3',
+                        pointHoverBackgroundColor: '#82C4F8',
+                        pointHoverBorderColor: '#82C4F8',
+                        data: datapoints
+                    }]
+                };
+
+                var options = {
+                    legend: {
+                        display: false
+                    },
+                    tooltips: {
+                        intersect: false
+                    },
+                    scales: {
+                        yAxes: [{
+                            ticks: {
+                                min: 0,
+                                beginAtZero: true
+                            }
+                        }]
+                    }
+                };
+
+                var ctx = $(canvasId).get(0).getContext('2d');
+
+                if ($scope.graphs[chartPropertyName]) $scope.graphs[chartPropertyName].destroy();
+                $scope.graphs[chartPropertyName] = new Chart(ctx, { type: 'line', data: data, options: options });
+            }
+
+            var memoryQuery = 'summarize(collectd.localhost.table-' + appId + '-memory.gauge-rss, "' + timeBucketSize + 'min", "avg")';
+            var diskQuery = 'absolute(collectd.localhost.du-' + appId + '.capacity-usage)';
+
+            Client.graphs([memoryQuery, diskQuery], '-' + timePeriod + 'min', {}, function (error, result) {
+                if (error) return console.error(error);
+
+                fillGraph('#graphsMemoryChart', result[0], 'Memory', 'memoryChart');
+                fillGraph('#graphsDiskChart', result[1], 'Disk', 'diskChart');
+            });
+        }
+    };
+
     $scope.email = {
         busy: false,
         error: {},