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
new file mode 100644
index 0000000000..053f235da0
--- /dev/null
+++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.hbs
@@ -0,0 +1,8 @@
+
diff --git a/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss
new file mode 100644
index 0000000000..7ae65f2416
--- /dev/null
+++ b/ui/packages/consul-hcp/app/components/consul/hcp/home/index.scss
@@ -0,0 +1,11 @@
+.consul-hcp-home {
+ position: relative;
+ top: -22px;
+}
+.consul-hcp-home a::before {
+ content: '';
+ --icon-name: icon-arrow-left;
+ --icon-size: icon-300;
+ margin-right: 8px;
+}
+
diff --git a/ui/packages/consul-hcp/vendor/consul-hcp/services.js b/ui/packages/consul-hcp/vendor/consul-hcp/services.js
index 159a7a96ec..27f9d4a742 100644
--- a/ui/packages/consul-hcp/vendor/consul-hcp/services.js
+++ b/ui/packages/consul-hcp/vendor/consul-hcp/services.js
@@ -1,5 +1,7 @@
(services => services({
-
+ 'component:consul/hcp/home': {
+ class: 'consul-ui/components/consul/hcp/home',
+ },
}))(
(json, data = (typeof document !== 'undefined' ? document.currentScript.dataset : module.exports)) => {
data[`services`] = JSON.stringify(json);
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
index 4d7a040ff9..672985310d 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -86,13 +86,14 @@
<:main-nav>
+
-
+
ul > li > a {
+%main-nav-vertical a {
@extend %main-nav-vertical-action;
}
%main-nav-vertical > ul > li.is-active > a {
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
index 20f57edc7a..8f8663c4ca 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
@@ -2,7 +2,7 @@
@import './alert-circle-outline/index.scss';
@import './alert-triangle/index.scss';
// @import './arrow-down/index.scss';
-// @import './arrow-left/index.scss';
+@import './arrow-left/index.scss';
@import './arrow-right/index.scss';
// @import './arrow-up/index.scss';
// @import './bolt/index.scss';
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index f94f14d448..4a7e7b9e05 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -109,3 +109,4 @@
@import 'consul-ui/components/consul/node/peer-info';
@import 'consul-ui/components/consul/peer/info';
@import 'consul-ui/components/consul/peer/form';
+@import 'consul-ui/components/consul/hcp/home';
diff --git a/ui/packages/consul-ui/vendor/consul-ui/services.js b/ui/packages/consul-ui/vendor/consul-ui/services.js
index 13f2f054b3..2b2258d52c 100644
--- a/ui/packages/consul-ui/vendor/consul-ui/services.js
+++ b/ui/packages/consul-ui/vendor/consul-ui/services.js
@@ -18,6 +18,9 @@
'component:consul/peer/selector': {
class: '@glimmer/component',
},
+ 'component:consul/hcp/home': {
+ class: '@glimmer/component',
+ },
}))(
(
json,