diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index ec6c9ce7..a5544fbb 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -65,16 +65,129 @@
         "time_of_day"
       ]
     },
-    "data": [{
-      "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
-      "id": "agg-cpu-usage"
-    }, {
-      "uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
-      "id": "mem-res-set-size"
-    }, {
-      "uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
-      "id": "apache-http-reqs"
-    }]
+    "data": {
+      "types": [{
+        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
+        "id": "agg-cpu-usage"
+      }, {
+        "uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
+        "id": "mem-res-set-size"
+      }, {
+        "uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
+        "id": "apache-http-reqs"
+      }, {
+        "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "name": "Memory",
+        "id": "memory"
+      }],
+      "datasets": [{
+        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+        "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "data": [{
+          "firstQuartile": 15,
+          "thirdQuartile": 15,
+          "median": 15,
+          "max": 15,
+          "min": 15
+        }, {
+          "firstQuartile": 26,
+          "thirdQuartile": 26,
+          "median": 26,
+          "max": 26,
+          "min": 26
+        }, {
+          "firstQuartile": 17,
+          "thirdQuartile": 17,
+          "median": 17,
+          "max": 17,
+          "min": 17
+        }, {
+          "firstQuartile": 15,
+          "thirdQuartile": 25,
+          "median": 19,
+          "max": 19,
+          "min": 20
+        }, {
+          "firstQuartile": 19,
+          "thirdQuartile": 25,
+          "median": 21,
+          "max": 20,
+          "min": 25
+        }, {
+          "firstQuartile": 24,
+          "thirdQuartile": 30,
+          "median": 25,
+          "max": 26,
+          "min": 27
+        }, {
+          "firstQuartile": 28,
+          "thirdQuartile": 34,
+          "median": 30,
+          "max": 30,
+          "min": 30
+        }, {
+          "firstQuartile": 30,
+          "thirdQuartile": 45,
+          "median": 35,
+          "max": 40,
+          "min": 40
+        }, {
+          "firstQuartile": 20,
+          "thirdQuartile": 55,
+          "median": 45,
+          "max": 44,
+          "min": 44
+        }, {
+          "firstQuartile": 55,
+          "thirdQuartile": 55,
+          "median": 55,
+          "max": 55,
+          "min": 55
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 56,
+          "median": 57,
+          "max": 58,
+          "min": 57
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 56,
+          "median": 56,
+          "max": 56,
+          "min": 56
+        }, {
+          "firstQuartile": 60,
+          "thirdQuartile": 56,
+          "median": 60,
+          "max": 60,
+          "min": 60
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 57,
+          "median": 57,
+          "max": 57,
+          "min": 57
+        }, {
+          "firstQuartile": 57,
+          "thirdQuartile": 55,
+          "median": 55,
+          "max": 55,
+          "min": 55
+        }, {
+          "firstQuartile": 20,
+          "thirdQuartile": 45,
+          "median": 45,
+          "max": 45,
+          "min": 45
+        }, {
+          "firstQuartile": 15,
+          "thirdQuartile": 40,
+          "median": 30,
+          "max": 49,
+          "min": 30
+        }]
+      }]
+    }
   },
   "orgs": {
     "ui": {
@@ -177,51 +290,91 @@
       "id": "nginx",
       "name": "Nginx",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
       "id": "wordpress",
       "name": "Wordpress",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
       "id": "nfs",
       "name": "NFS",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
       "id": "memcached",
       "name": "Memcached",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "id": "percona",
       "name": "Percona",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 5
+      "instances": 5,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
       "id": "primary",
       "name": "Primary",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
       "id": "secondaries",
       "name": "Secondaries",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 4
+      "instances": 4,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }, {
       "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
       "id": "consul",
       "name": "Consul",
       "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1
+      "instances": 1,
+      "metrics": [
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+        "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+      ]
     }]
   },
   "instances": {
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index f9da01c7..0e2d9225 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -17,6 +17,7 @@ const projects = (state) => get(state, 'projects.data', []);
 const services = (state) => get(state, 'services.data', []);
 const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
 const instances = (state) => get(state, 'instances.data', []);
+const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
 
 const projectById = (projectId) => createSelector(
   projects,
@@ -46,22 +47,33 @@ const orgSections = (orgId) => createSelector(
 );
 
 const servicesByProjectId = (projectId) => createSelector(
-  [services, projectById(projectId), collapsedServices],
-  (services, project, collapsed) =>
+  [services, projectById(projectId), collapsedServices, metricDatasets],
+  (services, project, collapsed, metrics) =>
     services.filter((s) => s.project === project.uuid)
     .map((service) => ({
       ...service,
       services: services.filter((s) => s.parent === service.uuid)
     }))
     .filter((s) => !s.parent)
-    .map((service) => ({
-      ...service,
-      collapsed: collapsed.indexOf(service.uuid) >= 0,
-      services: service.services.map((service) => ({
+    .map((service) => {
+      const isCollapsed = (uuid) => collapsed.indexOf(uuid) >= 0;
+
+      const datasets = (uuids) => uuids.map((uuid) => find(metrics, [
+        'uuid',
+        uuid
+      ]));
+
+      return {
         ...service,
-        collapsed: collapsed.indexOf(service.uuid) >= 0
-      }))
-    }))
+        metrics: datasets(service.metrics),
+        collapsed: isCollapsed(service.uuid),
+        services: service.services.map((service) => ({
+          ...service,
+          metrics: datasets(service.metrics),
+          collapsed: isCollapsed(service.uuid)
+        }))
+      };
+    })
 );
 
 const instancesByServiceId = (serviceId) => createSelector(