diff --git a/ui/packages/consul-ui/app/styles/base/components/tabs/index.scss b/ui/packages/consul-ui/app/components/tab-nav/index.scss
similarity index 70%
rename from ui/packages/consul-ui/app/styles/base/components/tabs/index.scss
rename to ui/packages/consul-ui/app/components/tab-nav/index.scss
index 72aad691df..7364fe4dc7 100644
--- a/ui/packages/consul-ui/app/styles/base/components/tabs/index.scss
+++ b/ui/packages/consul-ui/app/components/tab-nav/index.scss
@@ -1,5 +1,16 @@
 @import './skin';
 @import './layout';
+.tab-nav {
+  @extend %tab-nav;
+}
+%tab-nav.animatable {
+  @extend %with-animated-tab-selection;
+}
+.tab-section {
+  @extend %tab-section;
+  /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
+  margin-top: 0 !important;
+}
 %with-animated-tab-selection ul::after,
 %tab-button-selected {
   @extend %frame-brand-300;
diff --git a/ui/packages/consul-ui/app/styles/base/components/tabs/layout.scss b/ui/packages/consul-ui/app/components/tab-nav/layout.scss
similarity index 96%
rename from ui/packages/consul-ui/app/styles/base/components/tabs/layout.scss
rename to ui/packages/consul-ui/app/components/tab-nav/layout.scss
index 8a8096efc9..e0d1938f38 100644
--- a/ui/packages/consul-ui/app/styles/base/components/tabs/layout.scss
+++ b/ui/packages/consul-ui/app/components/tab-nav/layout.scss
@@ -1,5 +1,6 @@
 %tab-nav {
   clear: both;
+  overflow: scroll;
 }
 %tab-nav ul {
   display: inline-flex;
diff --git a/ui/packages/consul-ui/app/styles/base/components/tabs/skin.scss b/ui/packages/consul-ui/app/components/tab-nav/skin.scss
similarity index 100%
rename from ui/packages/consul-ui/app/styles/base/components/tabs/skin.scss
rename to ui/packages/consul-ui/app/components/tab-nav/skin.scss
diff --git a/ui/packages/consul-ui/app/components/tab-section/index.hbs b/ui/packages/consul-ui/app/components/tab-section/index.hbs
deleted file mode 100644
index 2313b7673f..0000000000
--- a/ui/packages/consul-ui/app/components/tab-section/index.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<input onchange={{action onchange}} type="radio" name="radiogroup_{{name}}" id="radiogroup_{{name}}_{{slugify id}}" value={{id}} checked={{if selected 'checked'}} />
-<div role="tabpanel" id="radiogroup_{{name}}_{{id}}_panel">
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/tab-section/index.js b/ui/packages/consul-ui/app/components/tab-section/index.js
deleted file mode 100644
index 5c022689a0..0000000000
--- a/ui/packages/consul-ui/app/components/tab-section/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-
-export default Component.extend({
-  classNames: ['tab-section'],
-  'data-test-radiobutton': computed('name,id', function() {
-    return `${this.name}_${this.id}`;
-  }),
-  name: 'tab',
-  onchange: function() {},
-});
diff --git a/ui/packages/consul-ui/app/styles/base/components/index.scss b/ui/packages/consul-ui/app/styles/base/components/index.scss
index 4b9905d68b..61474d7184 100644
--- a/ui/packages/consul-ui/app/styles/base/components/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/components/index.scss
@@ -11,5 +11,4 @@
 @import './radio-group/index';
 @import './sliding-toggle/index';
 @import './table/index';
-@import './tabs/index';
 @import './toggle-button/index';
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index 2dc01e99f0..73c3037189 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -14,7 +14,6 @@
 @import './components/buttons';
 @import './components/composite-row';
 @import './components/secret-button';
-@import './components/tabs';
 @import './components/pill';
 @import './components/table';
 @import './components/tag-list';
@@ -53,6 +52,7 @@
 @import 'consul-ui/components/filter-bar';
 @import 'consul-ui/components/freetext-filter';
 @import 'consul-ui/components/informed-action';
+@import 'consul-ui/components/tab-nav';
 
 @import 'consul-ui/components/consul/tomography/graph';
 @import 'consul-ui/components/consul/discovery-chain';
diff --git a/ui/packages/consul-ui/app/styles/components/tabs.scss b/ui/packages/consul-ui/app/styles/components/tabs.scss
deleted file mode 100644
index 608a1dfa81..0000000000
--- a/ui/packages/consul-ui/app/styles/components/tabs.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.tab-nav {
-  @extend %tab-nav;
-}
-%tab-nav.animatable {
-  @extend %with-animated-tab-selection;
-}
-.tab-section {
-  @extend %tab-section;
-  /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
-  margin-top: 0 !important;
-}
diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
index 99eb63a47d..e44d6d8128 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
@@ -1,4 +1,4 @@
-<div id="tags" class="tab-section">
+<div id="topology" class="tab-section">
   <div role="tabpanel">
   {{#if topology.FilteredByACLs}}
     <TopologyMetrics::Notice::LimitedAccess />
diff --git a/ui/packages/consul-ui/tests/integration/components/tab-section-test.js b/ui/packages/consul-ui/tests/integration/components/tab-section-test.js
deleted file mode 100644
index d244780c5a..0000000000
--- a/ui/packages/consul-ui/tests/integration/components/tab-section-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | tab section', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.on('myAction', function(val) { ... });
-
-    await render(hbs`{{tab-section}}`);
-
-    assert.dom('*').hasText('');
-
-    // Template block usage:
-    await render(hbs`
-      {{#tab-section}}
-        template block text
-      {{/tab-section}}
-    `);
-
-    assert.dom('*').hasText('template block text');
-  });
-});