diff --git a/src/articles/ssp-editoria.md b/src/articles/ssp-editoria.md
index cfaa15ff4e82a658d25c56f9c00f54efd9616963..872b26bb3739453aef44b47417dfb9e04cf7e938 100644
--- a/src/articles/ssp-editoria.md
+++ b/src/articles/ssp-editoria.md
@@ -3,7 +3,7 @@ title: "Single Source Publishing Case Study: Editoria (Books)"
 subtitle: "An invesitgation of how Editoria achieves Single Source Publishing for books."
 author: Adam Hyde
 date: "2021-09-13"
-category: "cs-wp"
+category: "study-paper"
 ---
 <p>note: we are still migrating this article here and some videos are yet to be added.</p>
    <p class="paragraph"><em>This article is a case study of a </em><a
diff --git a/src/articles/ssp-kotahi.md b/src/articles/ssp-kotahi.md
index 369fea18fb6ce89605618fc6629d75cf2a1e8e12..8d02003713186625bb4587d5eeec3fecade17fc1 100644
--- a/src/articles/ssp-kotahi.md
+++ b/src/articles/ssp-kotahi.md
@@ -3,7 +3,7 @@ title: "White Paper: Kotahi Current State"
 subtitle: "An overview of the current state of Kotahi. Last updated Sept 2021."
 date: "2021-09-15"
 author: Adam Hyde
-category: "cs-wp"
+category: "study-paper"
 ---
 <p>note: we are still migrating this article here and some videos are yet to be added.</p>
 <p>The Kotahi workflow is very configurable and can support very linear, to very concurrent,
diff --git a/src/layouts/articles-index.njk b/src/layouts/articles-index.njk
index 82b77a938c9cd8132428c9f311503aa90413b431..b7e0e27a12bdd97d98f16b9a868992ff2bf104a7 100644
--- a/src/layouts/articles-index.njk
+++ b/src/layouts/articles-index.njk
@@ -1,30 +1,69 @@
 {% extends "base.njk" %}
 {% block content %}
   {{content | safe}}
-  {% set sections = {"Articles": "article", "Case Studies & White Papers": "cs-wp", "Thought pieces": "thoughts"} %}
-  {% for key, value in sections %}   
-    <h2>{{key}}</h2>
+  {% set categories = {"article": "Articles",  "study-paper": "Case Studies & White Papers", "thoughts": "Thought pieces"} %}
+   {# create the UI #}
+     <ul class="filter">
+          {% for key, value in categories %}
+               <li>
+                    <button data-tag="{{key | slugify}}" class="trigger-category">{{value}}</button>
+               </li>
+          {% endfor %}
+          <li>
+               <button data-tag="all" class="trigger-category">all</button>
+          </li>
+     </ul>
     {% for item in collections.articles | reverse -%}
-      {% if item.data.category === value %} 
-        <div class="posts grid-item {{item.data.class}}">
-          <p class="meta">
-            <time datetime="{{item.date}}">{{item.data.date}}</time>
-          {# <figure><a href="{{item.url}}"> #}
-          </p>
-            {# <img src="{{item.data.icon}}" alt="{{item.data.title}}"></a> #}
-          {# </figure> #}
-          <h3 id="{{item.data.title | slug}}"><a href="{{item.url}}">
-            {% if item.data.part %} <span>{{item.data.part}}</span> {% endif %}
-            {{item.data.title}}
-          </a></h3>
-            {% if item.data.subtitle %}
-                <span>{{item.data.subtitle}}</span>
-            {% endif %}
-            {# {{ item.data.intro | safe }} #}
-        </div>
-      {% endif %}
-    {%- endfor %}
-  {% endfor %}
+      <div class="posts grid-item {{item.data.class}} {{item.data.category | slugify}}">
+        <p class="meta">
+          <time datetime="{{item.date}}">{{item.data.date}}</time>
+          <span class="category">{{categories[item.data.category]}}</span>
+        {# <figure><a href="{{item.url}}"> #}
+        </p>
+          {# <img src="{{item.data.icon}}" alt="{{item.data.title}}"></a> #}
+        {# </figure> #}
+        <h3 id="{{item.data.title | slug}}"><a href="{{item.url}}">
+          {% if item.data.part %} <span>{{item.data.part}}</span> {% endif %}
+          {{item.data.title}}
+        </a></h3>
+          {% if item.data.subtitle %}
+              <span>{{item.data.subtitle}}</span>
+          {% endif %}
+          {# {{ item.data.intro | safe }} #}
+      </div>
+    {%- endfor %} 
+    
 {% endblock %} 
 
+{% block customScripts %}
+  {# super will keep all the other custom scripts needed to make one single script #}
+  {{ super() }}
+  <script>
+    let list = document.querySelectorAll('.grid-item');
+
+    document
+    .querySelectorAll('.trigger-category')
+    .forEach(button => {
+      button.addEventListener('click', function () {
+        filterClass(list, this.dataset.tag);
+      });
+    })
+    function filterClass(list, filter) {
+      if (filter == "all") {
+        for (item of list) {
+          item.style.display = "block";
+        }
+      } 
+      else {
+        for (item of list) {
+          if (!item.classList.contains(filter)) {
+            item.style.display = "none";
+          } else {
+            item.style.display = "block"
+          }
+        }
+      }
+    }
+  </script>
+{% endblock %}