diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs
index 053f235da0..1ab14457df 100644
--- a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs
+++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs
@@ -2,7 +2,7 @@
   class="consul-hcp-home"
   ...attributes
 >
-  <a href={{env 'CONSUL_HCP_URL'}}>
+  <a href={{env 'CONSUL_HCP_URL'}} data-native-href="true">
     Back to HCP
   </a>
 </div>
diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.test.js b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.test.js
new file mode 100644
index 0000000000..84779d8250
--- /dev/null
+++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.test.js
@@ -0,0 +1,38 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+import ConsulHcpHome from 'consul-ui/components/consul/hcp/home';
+
+module('Integration | Component | consul hcp home', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it prints the value of CONSUL_HCP_URL', async function(assert) {
+    // temporary registration until we are running as separate applications
+    this.owner.register(
+      'component:consul/hcp/home',
+      ConsulHcpHome
+    );
+    //
+
+    const Helper = this.owner.resolveRegistration('helper:env');
+    this.owner.register(
+      'helper:env',
+      class extends Helper {
+        compute([name, def]) {
+          switch(name) {
+            case 'CONSUL_HCP_URL':
+              return 'http://hcp';
+          }
+          return super.compute(...arguments);
+        }
+      }
+    );
+
+    await render(hbs`<Consul::Hcp::Home />`);
+
+    assert.dom('a').hasAttribute('href', 'http://hcp');
+
+  });
+});
diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js
index 9fabe8b7ac..4a42660c05 100644
--- a/ui/packages/consul-ui/app/utils/get-environment.js
+++ b/ui/packages/consul-ui/app/utils/get-environment.js
@@ -138,6 +138,8 @@ export default function(config = {}, win = window, doc = document) {
         // make and API request so this specific variable should never be be
         // retrived via an API request
         return operatorConfig.APIPrefix;
+      case 'CONSUL_HCP_URL':
+        return operatorConfig.HCPURL;
       case 'CONSUL_UI_CONFIG':
         dashboards = {
           service: undefined,
@@ -253,6 +255,7 @@ export default function(config = {}, win = window, doc = document) {
       case 'CONSUL_DATACENTER_LOCAL':
       case 'CONSUL_DATACENTER_PRIMARY':
       case 'CONSUL_API_PREFIX':
+      case 'CONSUL_HCP_URL':
       case 'CONSUL_ACLS_ENABLED':
       case 'CONSUL_NSPACES_ENABLED':
       case 'CONSUL_PEERINGS_ENABLED':
diff --git a/ui/packages/consul-ui/tests/integration/components/consul/hcp/home-test.js b/ui/packages/consul-ui/tests/integration/components/consul/hcp/home-test.js
new file mode 100644
index 0000000000..a43496860e
--- /dev/null
+++ b/ui/packages/consul-ui/tests/integration/components/consul/hcp/home-test.js
@@ -0,0 +1,2 @@
+// temporary import until we are running as separate applications
+import 'consul-ui/components/consul/hcp/home/index.test';