diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
index f615c381be..da71d33323 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
@@ -29,9 +29,9 @@
     {{/if}}
     <div class="link">
      {{#if @metricsHref}}
-      <a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer">Open metrics Dashboard</a>
+      <a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer" data-test-dashboard-anchor>Open metrics Dashboard</a>
     {{else}}
-      <a class="settings-link" href={{href-to 'settings'}}>Configure metrics dashboard</a>
+      <a class="config-link" href="{{env 'CONSUL_DOCS_URL'}}/agent/options.html#ui_config" target="_blank" rel="noopener noreferrer">Configure metrics dashboard</a>
     {{/if}}
     </div>
   </div>
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
index 2fb25f5fc2..7fd9589740 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
@@ -82,7 +82,7 @@
     .metrics-link::before {
       @extend %with-exit-mask, %as-pseudo;
     }
-    .settings-link::before {
+    .config-link::before {
       @extend %with-docs-mask, %as-pseudo;
     }
   }
diff --git a/ui/packages/consul-ui/app/routes/dc/services/show.js b/ui/packages/consul-ui/app/routes/dc/services/show.js
index 63e621b35f..8b9a72ca3a 100644
--- a/ui/packages/consul-ui/app/routes/dc/services/show.js
+++ b/ui/packages/consul-ui/app/routes/dc/services/show.js
@@ -5,7 +5,7 @@ import { get } from '@ember/object';
 
 export default Route.extend({
   data: service('data-source/service'),
-  settings: service('settings'),
+  config: service('ui-config'),
   model: function(params, transition) {
     const dc = this.modelFor('dc').dc.Name;
     const nspace = this.modelFor('nspace').nspace.substr(1);
@@ -16,7 +16,7 @@ export default Route.extend({
       items: this.data.source(
         uri => uri`/${nspace}/${dc}/service-instances/for-service/${params.name}`
       ),
-      urls: this.settings.findBySlug('urls'),
+      urls: this.config.get().dashboard_url_template,
       chain: null,
       proxies: [],
       topology: null,
diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
index 2e5edbb2e0..fda0cfbb0c 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
@@ -7,9 +7,9 @@
       @upstreams={{topology.Upstreams}}
       @downstreams={{filter-by 'Datacenter' topology.Datacenter topology.Downstreams}}
       @dc={{topology.Datacenter}}
-      @metricsHref={{render-template urls.service (hash
+      @metricsHref={{render-template urls.services (hash
         Datacenter=dc
-        Service=(hash Name=item.Service.Service)
+        Service=items.firstObject
       )}}
     />
   {{else}}
diff --git a/ui/packages/consul-ui/app/templates/settings.hbs b/ui/packages/consul-ui/app/templates/settings.hbs
index 94e719bedb..0bd92ac6c7 100644
--- a/ui/packages/consul-ui/app/templates/settings.hbs
+++ b/ui/packages/consul-ui/app/templates/settings.hbs
@@ -13,17 +13,6 @@
       </p>
     </div>
     <form>
-      <fieldset>
-        <h2>Dashboard Links</h2>
-        <p>
-          Add a link to the service detail page in the UI to get quick access to a service-wide metrics dashboard. Enter the dashboard URL into the field below. You can use the placeholders <code>{{'{{Datacenter}}'}}</code> and <code>{{'{{Service.Name}}'}}</code> which will be replaced with the name of the datacenter/service currently being viewed.
-        </p>
-        <label class={{concat (if confirming 'confirming') ' type-text'}} id="urls_service">
-          <span>Link template for services</span>
-          <input type="text" name="urls[service]" value={{item.urls.service}} onchange={{action 'change'}} onkeypress={{action 'key'}} onkeydown={{action 'key'}} />
-          <em>e.g. https://grafana.example.com/d/1/consul-service-mesh&amp;orgid=1&amp;datacenter={{'{{Datacenter}}'}}&amp;service-name={{'{{Service.Name}}'}}</em>
-        </label>
-      </fieldset>
     {{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
       <fieldset data-test-blocking-queries>
         <h2>Blocking Queries</h2>
diff --git a/ui/packages/consul-ui/lib/startup/templates/head.html.js b/ui/packages/consul-ui/lib/startup/templates/head.html.js
index 5442607c2b..83c4916d46 100644
--- a/ui/packages/consul-ui/lib/startup/templates/head.html.js
+++ b/ui/packages/consul-ui/lib/startup/templates/head.html.js
@@ -3,7 +3,15 @@ module.exports = ({ appName, environment, rootURL, config }) => `
   <meta name="consul-ui/ui_config" content="${
     environment === 'production'
       ? `{{ jsonEncodeAndEscape .UIConfig }}`
-      : escape(`{"metrics_provider":"prometheus","metrics_proxy_enabled":true}`)
+      : escape(
+          JSON.stringify({
+            metrics_provider: 'prometheus',
+            metrics_proxy_enabled: true,
+            dashboard_url_template: {
+              services: 'https://example.com?{{Service.Name}}&{{Datacenter}}',
+            },
+          })
+        )
   }" />
 
   <link rel="icon" type="image/png" href="${rootURL}assets/favicon-32x32.png" sizes="32x32">
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 47859dcf61..39b298723b 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/services/show.feature
@@ -103,14 +103,9 @@ Feature: dc / services / show: Show Service
     ---
   Scenario: Given a dashboard template has been set
     Given 1 datacenter model with the value "dc1"
-    And settings from yaml
-    ---
-    consul:urls:
-      service: https://consul.io?service-name={{Service.Name}}&dc={{Datacenter}}
-    ---
     When I visit the service page for yaml
     ---
       dc: dc1
       service: service-0
     ---
-    And I see href on the dashboardAnchor like "https://consul.io?service-name=service-0&dc=dc1"
+    And I see href on the dashboardAnchor like "https://example.com?service-0-with-id&dc1"