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 000000000..053f235da
--- /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 000000000..7ae65f241
--- /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 159a7a96e..27f9d4a74 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 4d7a040ff..672985310 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 20f57edc7..8f8663c4c 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 f94f14d44..4a7e7b9e0 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 13f2f054b..2b2258d52 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,