diff --git a/ui/app/adapters/metrics/activity.js b/ui/app/adapters/metrics/activity.js
new file mode 100644
index 0000000000..250b38cb41
--- /dev/null
+++ b/ui/app/adapters/metrics/activity.js
@@ -0,0 +1,14 @@
+import Application from '../application';
+
+export default Application.extend({
+  queryRecord() {
+    return this.ajax(this.urlForQuery(), 'GET').then(resp => {
+      resp.id = resp.request_id;
+      return resp;
+    });
+  },
+
+  urlForQuery() {
+    return this.buildURL() + '/internal/counters/activity';
+  },
+});
diff --git a/ui/app/adapters/metrics/config.js b/ui/app/adapters/metrics/config.js
new file mode 100644
index 0000000000..f56007b7a5
--- /dev/null
+++ b/ui/app/adapters/metrics/config.js
@@ -0,0 +1,14 @@
+import Application from '../application';
+
+export default Application.extend({
+  queryRecord() {
+    return this.ajax(this.urlForQuery(), 'GET').then(resp => {
+      resp.id = resp.request_id;
+      return resp;
+    });
+  },
+
+  urlForQuery() {
+    return this.buildURL() + '/internal/counters/config';
+  },
+});
diff --git a/ui/app/controllers/vault/cluster/metrics-config.js b/ui/app/controllers/vault/cluster/metrics-config.js
new file mode 100644
index 0000000000..6781994966
--- /dev/null
+++ b/ui/app/controllers/vault/cluster/metrics-config.js
@@ -0,0 +1,24 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+
+export default Controller.extend({
+  infoRows: computed(function() {
+    return [
+      {
+        label: 'Usage data collection',
+        helperText: 'Enable or disable collecting data to track clients.',
+        valueKey: 'enabled',
+      },
+      {
+        label: 'Retention period',
+        helperText: 'The number of months of activity logs to maintain for client tracking.',
+        valueKey: 'retentionMonths',
+      },
+      {
+        label: 'Default display',
+        helperText: 'The number of months we’ll display in the Vault usage dashboard by default.',
+        valueKey: 'defaultReportMonths',
+      },
+    ];
+  }),
+});
diff --git a/ui/app/models/metrics/activity.js b/ui/app/models/metrics/activity.js
new file mode 100644
index 0000000000..68945a7555
--- /dev/null
+++ b/ui/app/models/metrics/activity.js
@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  total: DS.attr('object'),
+  endTime: DS.attr('string'),
+  startTime: DS.attr('string'),
+});
diff --git a/ui/app/models/metrics/config.js b/ui/app/models/metrics/config.js
new file mode 100644
index 0000000000..c0aae28655
--- /dev/null
+++ b/ui/app/models/metrics/config.js
@@ -0,0 +1,10 @@
+import DS from 'ember-data';
+
+const { attr } = DS;
+
+export default DS.Model.extend({
+  queriesAvailable: attr('boolean'),
+  defaultReportMonths: attr('number'),
+  retentionMonths: attr('number'),
+  enabled: attr('string'),
+});
diff --git a/ui/app/router.js b/ui/app/router.js
index b507202879..9bc581a2bd 100644
--- a/ui/app/router.js
+++ b/ui/app/router.js
@@ -15,10 +15,7 @@ Router.map(function() {
       this.route('logout');
       this.mount('open-api-explorer', { path: '/api-explorer' });
       this.route('license');
-      this.route('metrics', function() {
-        this.route('index', { path: '/' });
-        this.route('http-requests');
-      });
+      this.route('metrics');
       this.route('storage', { path: '/storage/raft' });
       this.route('storage-restore', { path: '/storage/raft/restore' });
       this.route('settings', function() {
@@ -137,6 +134,7 @@ Router.map(function() {
       }
 
       this.route('not-found', { path: '/*path' });
+      this.route('metrics-config');
     });
     this.route('not-found', { path: '/*path' });
   });
diff --git a/ui/app/routes/vault/cluster/metrics-config.js b/ui/app/routes/vault/cluster/metrics-config.js
new file mode 100644
index 0000000000..ed1a32d5e4
--- /dev/null
+++ b/ui/app/routes/vault/cluster/metrics-config.js
@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+import ClusterRoute from 'vault/mixins/cluster-route';
+
+export default Route.extend(ClusterRoute, {
+  model() {
+    return this.store.queryRecord('metrics/config', {});
+  },
+});
diff --git a/ui/app/routes/vault/cluster/metrics.js b/ui/app/routes/vault/cluster/metrics.js
index 669017080b..df7cfcb0a6 100644
--- a/ui/app/routes/vault/cluster/metrics.js
+++ b/ui/app/routes/vault/cluster/metrics.js
@@ -1,8 +1,16 @@
 import Route from '@ember/routing/route';
 import ClusterRoute from 'vault/mixins/cluster-route';
+import { hash } from 'rsvp';
 
 export default Route.extend(ClusterRoute, {
   model() {
-    return {};
+    let config = this.store.queryRecord('metrics/config', {});
+
+    let activity = this.store.queryRecord('metrics/activity', {});
+
+    return hash({
+      activity,
+      config,
+    });
   },
 });
diff --git a/ui/app/routes/vault/cluster/metrics/http-requests.js b/ui/app/routes/vault/cluster/metrics/http-requests.js
deleted file mode 100644
index e75905e3c4..0000000000
--- a/ui/app/routes/vault/cluster/metrics/http-requests.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import ClusterRouteBase from '../cluster-route-base';
-
-export default ClusterRouteBase.extend({
-  model() {
-    return this.store.queryRecord('metrics/http-requests', {});
-  },
-});
diff --git a/ui/app/routes/vault/cluster/metrics/index.js b/ui/app/routes/vault/cluster/metrics/index.js
deleted file mode 100644
index 177dc4013a..0000000000
--- a/ui/app/routes/vault/cluster/metrics/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Route from '@ember/routing/route';
-import ClusterRoute from 'vault/mixins/cluster-route';
-import { hash } from 'rsvp';
-
-export default Route.extend(ClusterRoute, {
-  model() {
-    let totalEntities = this.store.queryRecord('metrics/entity', {}).then(response => {
-      return response.entities.total;
-    });
-
-    let httpsRequests = this.store.queryRecord('metrics/http-requests', {}).then(response => {
-      let reverseArray = response.counters.reverse();
-      return reverseArray;
-    });
-
-    let totalTokens = this.store.queryRecord('metrics/token', {}).then(response => {
-      return response.service_tokens.total;
-    });
-
-    return hash({
-      totalEntities,
-      httpsRequests,
-      totalTokens,
-    });
-  },
-});
diff --git a/ui/app/serializers/metrics/activity.js b/ui/app/serializers/metrics/activity.js
new file mode 100644
index 0000000000..8ea3d5fac6
--- /dev/null
+++ b/ui/app/serializers/metrics/activity.js
@@ -0,0 +1,3 @@
+import ApplicationSerializer from '../application';
+
+export default ApplicationSerializer.extend({});
diff --git a/ui/app/serializers/metrics/config.js b/ui/app/serializers/metrics/config.js
new file mode 100644
index 0000000000..0d716b9c65
--- /dev/null
+++ b/ui/app/serializers/metrics/config.js
@@ -0,0 +1,12 @@
+import ApplicationSerializer from '../application';
+
+export default ApplicationSerializer.extend({
+  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
+    const normalizedPayload = {
+      id: payload.id,
+      ...payload.data,
+      enabled: payload.data.enabled.includes('enabled') ? 'On' : 'Off',
+    };
+    return this._super(store, primaryModelClass, normalizedPayload, id, requestType);
+  },
+});
diff --git a/ui/app/templates/vault/cluster/metrics-config.hbs b/ui/app/templates/vault/cluster/metrics-config.hbs
new file mode 100644
index 0000000000..b27882e13a
--- /dev/null
+++ b/ui/app/templates/vault/cluster/metrics-config.hbs
@@ -0,0 +1,48 @@
+
+      Metrics
+    
+  
The active clients metric contributes to billing. It is collected at the end of each month alongside unique entities and direct active tokens.
+