diff --git a/ui/packages/consul-ui/app/components/app-view/layout.scss b/ui/packages/consul-ui/app/components/app-view/layout.scss
index 461e758e65..725b0cba24 100644
--- a/ui/packages/consul-ui/app/components/app-view/layout.scss
+++ b/ui/packages/consul-ui/app/components/app-view/layout.scss
@@ -4,7 +4,7 @@
   align-items: center;
   white-space: nowrap;
   position: relative;
-  z-index: 4;
+  z-index: 5;
 }
 %app-view-actions {
   display: flex;
diff --git a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
index 1bd551e59d..02228a2e78 100644
--- a/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
+++ b/ui/packages/consul-ui/app/styles/routes/dc/services/index.scss
@@ -8,9 +8,18 @@ html[data-route^='dc.services.instance'] .app-view > header dl {
 html[data-route^='dc.services.instance'] .app-view > header dt {
   font-weight: $typo-weight-bold;
 }
+html[data-route^='dc.services.instance'] .tab-nav {
+  border-top: $decor-border-100;
+}
+html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
+  border-bottom: $decor-border-100;
+}
+html[data-route^='dc.services.instance'] .tab-nav,
+html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
+  border-color: var(--gray-200);
+}
 html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
   padding-bottom: 24px;
-  border-bottom: 1px solid $gray-200;
 }
 html[data-route^='dc.services.instance.metadata'] .tab-section section h2 {
   @extend %h300;