diff --git a/ui/packages/consul-ui/app/models/service-instance.js b/ui/packages/consul-ui/app/models/service-instance.js
index 2be6ece67..0ee81e204 100644
--- a/ui/packages/consul-ui/app/models/service-instance.js
+++ b/ui/packages/consul-ui/app/models/service-instance.js
@@ -19,7 +19,11 @@ export default class ServiceInstance extends Model {
   @attr('number') SyncTime;
   @attr() meta;
 
-  @or('Service.ID', 'Service.Service') Name;
+  // The name is the Name of the Service (the grouping of instances)
+  @alias('Service.Service') Name;
+
+  // If the ID is blank fallback to the Service.Service (the Name)
+  @or('Service.ID', 'Service.Service') ID;
   @or('Service.Address', 'Node.Service') Address;
 
   @alias('Service.Tags') Tags;
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature b/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
index dd068f698..2b5b0399e 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
@@ -112,4 +112,5 @@ Feature: dc / services / show: Show Service
       dc: dc1
       service: service-0
     ---
-    And I see href on the metricsAnchor like "https://example.com?service-0-with-id&dc1"
+    # The Metrics dashboard should use the Service.Name not the ID
+    And I see href on the metricsAnchor like "https://example.com?service-0&dc1"