diff --git a/ui/packages/consul-ui/app/components/tab-nav/README.mdx b/ui/packages/consul-ui/app/components/tab-nav/README.mdx
deleted file mode 100644
index ea353026e9..0000000000
--- a/ui/packages/consul-ui/app/components/tab-nav/README.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
----
-class: ember
-status: needs-love
----
-# TabNav
-
-`<TabNav />` renders a list of items as linked tabs (there is also an option
-to use labels vs anchors for links for radio button based tabs).
-
-Each item in the list should be a hash of `label`, `href` and `selected`.
-
-- `label`: The text to show
-- `href`: a href, probably generated via `href-to`
-- `selected`: whether the item is in the selected state or not, probably
-  generated via `is-href`
-
-**Please note:** This component should probably be rebuilt using contextual
-components and our `Action` component, alternatively this could be hand built
-with native HTML using the same `nav/ul/li/a` pattern and you could just use
-the CSS component to style it. Unless there is a reason to do this, this
-component should be used pending a refactor (please remove this note once
-refactored into contextual components using our `Action` component)
-
-```hbs preview-template
-<figure>
-  <figcaption>A TabNav with a conditional button using `compact` which removes empty values from arrays</figcaption>
-<TabNav @items={{
-  compact
-      (array
-          (hash label="Health Checks" href="#" selected=true)
-          (hash label="Service Instances" href="#" selected=(is-href "docs.something"))
-(if false (hash label="Don't show me" href="#" selected=false) '')
-          (hash label="Lock Sessions" href="#" selected=false)
-          (hash label="Metadata" href="#" selected=false)
-      )
-}}/>
-</figure>
-```
-
-```css
-.tab-nav {
-  @extend %tab-nav;
-}
-```
-
-
diff --git a/ui/packages/consul-ui/app/components/tab-nav/index.scss b/ui/packages/consul-ui/app/components/tab-nav/index.scss
index 079488664b..7364fe4dc7 100644
--- a/ui/packages/consul-ui/app/components/tab-nav/index.scss
+++ b/ui/packages/consul-ui/app/components/tab-nav/index.scss
@@ -13,7 +13,7 @@
 }
 %with-animated-tab-selection ul::after,
 %tab-button-selected {
-  @extend %frame-blue-300;
+  @extend %frame-brand-300;
 }
 %tab-nav li a {
   @extend %tab-button;
diff --git a/ui/packages/consul-ui/app/components/tab-nav/skin.scss b/ui/packages/consul-ui/app/components/tab-nav/skin.scss
index fc1b8c92e8..b9b8ca2113 100644
--- a/ui/packages/consul-ui/app/components/tab-nav/skin.scss
+++ b/ui/packages/consul-ui/app/components/tab-nav/skin.scss
@@ -1,3 +1,7 @@
+%tab-nav {
+  border-top: $decor-border-200;
+  border-color: $gray-200;
+}
 %tab-nav ul {
   list-style-type: none;
 }
@@ -12,28 +16,25 @@
   /* %frame-transparent-something */
   border-bottom: $decor-border-100;
 }
+%tab-nav {
+  /* %frame-transparent-something */
+  border-color: $gray-200;
+}
 %with-animated-tab-selection ul::after,
 %tab-button {
   border-bottom: $decor-border-300;
 }
-%tab-nav {
-  /* %frame-transparent-something */
-  border-color: var(--gray-200);
-}
 %tab-button {
   @extend %with-transition-500;
-  transition-property: background-color, border-color;
-  border-color: var(--transparent);
-  color: var(--gray-500);
+  transition-property: background-color;
+  border-color: $transparent;
+  color: $gray-500;
 }
 %tab-button-intent,
 %tab-button-active {
   /* %frame-gray-something */
-  background-color: var(--gray-100);
-}
-%tab-button-intent {
-  border-color: var(--gray-300);
+  background-color: $gray-100;
 }
 %tab-nav.animatable .selected a {
-  border-color: var(--transparent) !important;
+  border-color: $transparent !important;
 }