diff --git a/ui-v2/app/components/topology-metrics/card.hbs b/ui-v2/app/components/topology-metrics/card.hbs
index 861f049f9c..a8adcfbbd9 100644
--- a/ui-v2/app/components/topology-metrics/card.hbs
+++ b/ui-v2/app/components/topology-metrics/card.hbs
@@ -1,6 +1,6 @@
 {{#each @items as |item|}}
-<div
-  class="card"
+<a class="card"
+  href={{href-to "dc.services.show.index" item.Name}}
   data-permission={{service/intention-permissions item}}
   id="{{item.Namespace}}{{item.Name}}"
 >
@@ -52,5 +52,5 @@
       <TopologyMetrics::Stats @endpoint='downstream-summary-for-service' @service={{@service}} @item={{item.Name}} />
     {{/if}}
   {{/if}}
-</div>
+</a>
 {{/each}}
\ No newline at end of file
diff --git a/ui-v2/app/components/topology-metrics/layout.scss b/ui-v2/app/components/topology-metrics/layout.scss
index ab408af3db..341712754f 100644
--- a/ui-v2/app/components/topology-metrics/layout.scss
+++ b/ui-v2/app/components/topology-metrics/layout.scss
@@ -53,8 +53,9 @@
 }
 #upstream-container .card,
 #downstream-container .card {
-  display: flex;
-  flex-direction: column;
+  display: block;
+  color: $gray-700;
+  overflow: hidden;
   p {
     padding: 12px 12px 0 12px;
     font-size: 16px;
diff --git a/ui-v2/app/components/topology-metrics/stats/index.scss b/ui-v2/app/components/topology-metrics/stats/index.scss
index 17277802a8..e2bdf6702f 100644
--- a/ui-v2/app/components/topology-metrics/stats/index.scss
+++ b/ui-v2/app/components/topology-metrics/stats/index.scss
@@ -5,8 +5,8 @@
   justify-content: space-between;
   align-items: stretch;
   width: 100%;
-  overflow: hidden;
   height: 46px;
+  overflow: hidden;
   dl {
     display:flex;
     margin-bottom: 50px; // pushes wrapped metrics well out of the bounding box to hide them.