diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
index 06eaf9ff3a..be0df77f7f 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -75,7 +75,4 @@
   .details {
     padding: 0 12px 12px 12px;
   }
-  div.stats {
-    border-top: 1px solid $gray-200;
-  }
 }
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs
index 306488fcc0..5d59a82806 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs
@@ -15,7 +15,7 @@
   />
 {{/if}}
 
-<div class="stats">
+<div ...attributes class="topology-metrics-stats" data-test-topology-metrics-stats>
   {{#if hasLoaded }}
     {{#each stats as |stat|}}
     <dl {{tooltip
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
index ac2569d4d6..41436eff11 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
@@ -1,10 +1,11 @@
-.stats {
+.topology-metrics-stats {
   padding: 12px 12px 0 12px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: stretch;
   width: 100%;
+  border-top: 1px solid var(--gray-200);
   dl {
     display: flex;
     padding-bottom: 12px;
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/services/show/topology/stats.feature b/ui/packages/consul-ui/tests/acceptance/dc/services/show/topology/stats.feature
new file mode 100644
index 0000000000..2b3266ad84
--- /dev/null
+++ b/ui/packages/consul-ui/tests/acceptance/dc/services/show/topology/stats.feature
@@ -0,0 +1,36 @@
+@setupApplicationTest
+Feature: dc / services / show / topology / stats
+  Scenario: Given metrics is disabled,the Topology tab should not display metrics
+    Given 1 datacenter model with the value "dc1"
+    And 1 node models
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: service-0
+        ID: service-0-with-id
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    And I see topology on the tabs
+    And I don't see the "[data-test-topology-metrics-stats]" element
+  Scenario: Given metrics is enabled, the Topology tab should display metrics
+    Given 1 datacenter model with the value "dc1"
+    Given a "prometheus" metrics provider
+    And 1 node models
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: service-0
+        ID: service-0-with-id
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    And I see topology on the tabs
+    And I see the "[data-test-topology-metrics-stats]" element
+
diff --git a/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/stats-steps.js b/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/stats-steps.js
new file mode 100644
index 0000000000..f2aad107ec
--- /dev/null
+++ b/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/stats-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui/packages/consul-ui/tests/steps/doubles/model.js b/ui/packages/consul-ui/tests/steps/doubles/model.js
index 44f3d98ce7..875e9060f6 100644
--- a/ui/packages/consul-ui/tests/steps/doubles/model.js
+++ b/ui/packages/consul-ui/tests/steps/doubles/model.js
@@ -32,6 +32,10 @@ export default function(scenario, create, set, win = window, doc = document) {
     .given(['ACLs are disabled'], function() {
       doc.cookie = `CONSUL_ACLS_ENABLE=0`;
     })
+    .given(['a "$value" metrics provider'], function(value) {
+      doc.cookie = `CONSUL_METRICS_PROXY_ENABLE=1`;
+      doc.cookie = `CONSUL_METRICS_PROVIDER=${value}`;
+    })
     .given(['permissions from yaml\n$yaml'], function(data) {
       Object.entries(data).forEach(([key, value]) => {
         const resource = `CONSUL_RESOURCE_${key.toUpperCase()}`;