diff --git a/ui/packages/consul-ui/app/components/peerings/service-count/index.hbs b/ui/packages/consul-ui/app/components/peerings/service-count/index.hbs
deleted file mode 100644
index 1c81bfe21..000000000
--- a/ui/packages/consul-ui/app/components/peerings/service-count/index.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#if this.count}}
-  <div {{tooltip this.tooltipText}}>
-    {{this.text}}
-  </div>
-{{/if}}
diff --git a/ui/packages/consul-ui/app/components/peerings/service-count/index.js b/ui/packages/consul-ui/app/components/peerings/service-count/index.js
deleted file mode 100644
index 4b455cb86..000000000
--- a/ui/packages/consul-ui/app/components/peerings/service-count/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
-
-export default class PeeringsServiceCount extends Component {
-  @service intl;
-
-  get count() {
-    const { peering, kind } = this.args;
-
-    return peering[`${kind.capitalize()}ServiceCount`];
-  }
-
-  get text() {
-    const { kind } = this.args;
-    const { intl, count } = this;
-
-    return intl.t(`routes.dc.peers.index.detail.${kind}.count`, { count });
-  }
-
-  get tooltipText() {
-    const {
-      kind,
-      peering: { name },
-    } = this.args;
-    const { intl } = this;
-
-    return intl.t(`routes.dc.peers.index.detail.${kind}.tooltip`, { name });
-  }
-}
diff --git a/ui/packages/consul-ui/app/templates/dc/peers/index.hbs b/ui/packages/consul-ui/app/templates/dc/peers/index.hbs
index c648d8fbe..9b040c12f 100644
--- a/ui/packages/consul-ui/app/templates/dc/peers/index.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/peers/index.hbs
@@ -77,8 +77,31 @@ as |sort filters items|}}
             <BlockSlot @name="details">
               <div class="peers__list__peer-detail">
                 <Peerings::Badge @peering={{item}} />
-                <Peerings::ServiceCount @peering={{item}} @kind="imported"/>
-                <Peerings::ServiceCount @peering={{item}} @kind="exported"/>
+
+                <div
+                  {{tooltip
+                    (t 'routes.dc.peers.index.detail.imported.tooltip'
+                      name=item.Name
+                    )
+                  }}
+                >
+                  {{t 'routes.dc.peers.index.detail.imported.count'
+                    count=(format-number item.ImportedServiceCount)
+                  }}
+                </div>
+
+                <div
+                  {{tooltip
+                    (t 'routes.dc.peers.index.detail.exported.tooltip'
+                      name=item.Name
+                    )
+                  }}
+                >
+                  {{t 'routes.dc.peers.index.detail.exported.count'
+                    count=(format-number item.ExportedServiceCount)
+                  }}
+                </div>
+
               </div>
             </BlockSlot>
             <BlockSlot @name="actions" as |Actions|>