diff --git a/ui/packages/consul-ui/app/components/tab-nav/README.mdx b/ui/packages/consul-ui/app/components/tab-nav/README.mdx
new file mode 100644
index 0000000000..ea353026e9
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/tab-nav/README.mdx
@@ -0,0 +1,46 @@
+---
+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 7364fe4dc7..079488664b 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-brand-300;
+  @extend %frame-blue-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 b9b8ca2113..fc1b8c92e8 100644
--- a/ui/packages/consul-ui/app/components/tab-nav/skin.scss
+++ b/ui/packages/consul-ui/app/components/tab-nav/skin.scss
@@ -1,7 +1,3 @@
-%tab-nav {
-  border-top: $decor-border-200;
-  border-color: $gray-200;
-}
 %tab-nav ul {
   list-style-type: none;
 }
@@ -16,25 +12,28 @@
   /* %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: $transparent;
-  color: $gray-500;
+  transition-property: background-color, border-color;
+  border-color: var(--transparent);
+  color: var(--gray-500);
 }
 %tab-button-intent,
 %tab-button-active {
   /* %frame-gray-something */
-  background-color: $gray-100;
+  background-color: var(--gray-100);
+}
+%tab-button-intent {
+  border-color: var(--gray-300);
 }
 %tab-nav.animatable .selected a {
-  border-color: $transparent !important;
+  border-color: var(--transparent) !important;
 }