diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index f8aa2d7e..41269915 100755
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -24,6 +24,8 @@ $box-shadow:	    0 2px 10px rgba($text-colour, 0.5);
 @import "components/highlights";
 @import "components/table-multiselect";
 @import "components/confirm-pages";
+@import "components/tabs-horizontal";
+@import "components/tabs";
 
 // Patterns
 @import "patterns/case";
@@ -31,8 +33,6 @@ $box-shadow:	    0 2px 10px rgba($text-colour, 0.5);
 @import "patterns/flashcard";
 @import "patterns/modal";
 @import "patterns/navigation";
-@import "patterns/tabs-horizontal";
-@import "patterns/tabs";
 @import "patterns/tasks";
 @import "patterns/timeline";
 @import "patterns/help";
diff --git a/app/assets/sass/patterns/_tabs-horizontal.scss b/app/assets/sass/components/_tabs-horizontal.scss
similarity index 100%
rename from app/assets/sass/patterns/_tabs-horizontal.scss
rename to app/assets/sass/components/_tabs-horizontal.scss
diff --git a/app/assets/sass/patterns/_tabs.scss b/app/assets/sass/components/_tabs.scss
similarity index 100%
rename from app/assets/sass/patterns/_tabs.scss
rename to app/assets/sass/components/_tabs.scss
diff --git a/app/views/components/index.html b/app/views/components/index.html
index 4468bce9..ff852ecc 100644
--- a/app/views/components/index.html
+++ b/app/views/components/index.html
@@ -22,6 +22,12 @@ <h1 class="heading-section">Components</h1>
           label: "experimental",
           desc: "used when a user needs to take an action, submit data, or make a change to the page"
         },
+        {
+          name: "Tabs",
+          link: "/components/tabs",
+          label: "experimental",
+          desc: "switch between views of grouped content or hide content that doesn't always need to be shown"
+        },
         {
           name: "Confirmation pages",
           link: "/components/confirm-pages",
@@ -97,7 +103,7 @@ <h1 class="heading-section">Components</h1>
               </tr>
             {% endif %}
           {% endfor %}
-          {% for component in components|sort(attribute='label') %}
+          {% for component in components|sort(attribute='label')|sort(attribute='name') %}
             {% if component.label|lower == 'experimental' %}
               <tr>
                 <td><a href="{{ component.link }}">{{ component.name|capitalize  }}</a></td>
diff --git a/app/views/patterns/tabs.html b/app/views/components/tabs.html
similarity index 90%
rename from app/views/patterns/tabs.html
rename to app/views/components/tabs.html
index 7397b282..50325920 100644
--- a/app/views/patterns/tabs.html
+++ b/app/views/components/tabs.html
@@ -26,27 +26,27 @@ <h1 class="heading-section">In-page tabs</h1>
 
       <div class="example example-images" id="example-component">
         <div class="grid-row">
-          {% include "includes/patterns/tabs-list.html" %}
+          {% include "includes/components/tabs-list.html" %}
         </div>
       </div>
       <details>
         <summary>Show code snippet</summary>
-        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs-list.html" %}{% endfilter %}</code></pre>
+        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/components/tabs-list.html" %}{% endfilter %}</code></pre>
       </details>
 
       <h2 class="heading-medium" id="example-component">Horizontal tab</h2>
       <div class="example example-images">
         <div class="grid-row">
-          {% include "includes/patterns/tabs.html" %}
+          {% include "includes/components/tabs.html" %}
         </div>
       </div>
       <details>
         <summary>Show HTML snippet</summary>
-        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/patterns/tabs.html" %}{% endfilter %}</code></pre>
+        <pre class="language-markup"><code class="language-markup">{% filter escape %}{% include "includes/components/tabs.html" %}{% endfilter %}</code></pre>
       </details>
       <details>
         <summary>Show SCSS snippet</summary>
-        <pre class="language-markup"><code class="language-markup">{{'./app/assets/sass/patterns/_tabs-horizontal.scss' | fileInclude }}</code></pre>
+        <pre class="language-markup"><code class="language-markup">{{'./app/assets/sass/components/_tabs-horizontal.scss' | fileInclude }}</code></pre>
       </details>
 
 
diff --git a/app/views/includes/patterns/tabs-list.html b/app/views/includes/components/tabs-list.html
similarity index 100%
rename from app/views/includes/patterns/tabs-list.html
rename to app/views/includes/components/tabs-list.html
diff --git a/app/views/includes/patterns/tabs.html b/app/views/includes/components/tabs.html
similarity index 100%
rename from app/views/includes/patterns/tabs.html
rename to app/views/includes/components/tabs.html
diff --git a/app/views/patterns/index.html b/app/views/patterns/index.html
index 5cb44a61..f577d806 100644
--- a/app/views/patterns/index.html
+++ b/app/views/patterns/index.html
@@ -58,12 +58,6 @@ <h1 class="heading-section">Patterns</h1>
           label: "experimental",
           desc: "creates focus on a single interaction"
         },
-        {
-          name: "In-page tabs",
-          link: "/patterns/tabs",
-          label: "experimental",
-          desc: "switch between views of grouped content or hide content that doesn't always need to be shown"
-        },
         {
           name: "Service header",
           link: "/patterns/header",