diff --git a/pages/admin/categories.spec.js b/pages/admin/categories.spec.js
new file mode 100644
index 000000000..a3b44de0d
--- /dev/null
+++ b/pages/admin/categories.spec.js
@@ -0,0 +1,67 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import Categories from './categories.vue'
+
+const someCategories = [
+  {
+    id: 'cat1',
+    name: 'Just For Fun',
+    slug: 'justforfun',
+    icon: 'smile',
+    postCount: 5
+  },
+  {
+    id: 'cat2',
+    name: 'Happyness & Values',
+    slug: 'happyness-values',
+    icon: 'heart-o',
+    postCount: 2
+  },
+  {
+    id: 'cat3',
+    name: 'Health & Wellbeing',
+    slug: 'health-wellbeing',
+    icon: 'medkit',
+    postCount: 1
+  },
+  {
+    id: 'cat4',
+    name: 'Environment & Nature',
+    slug: 'environment-nature',
+    icon: 'tree',
+    postCount: 1
+  },
+  {
+    id: 'cat5',
+    name: 'Animal Protection',
+    slug: 'animalprotection',
+    icon: 'paw',
+    postCount: 1
+  }
+]
+
+describe('Categories.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Categories, {})
+  })
+
+  it('renders', () => {
+    expect(wrapper.is('div')).toBe(true)
+  })
+
+  describe('given some categories', () => {
+    beforeEach(() => {
+      wrapper = mount(Categories, {
+        propsData: {
+          Categories: someCategories
+        }
+      })
+    })
+
+    it('renders a row for each category', () => {
+      console.log(wrapper.html())
+      expect(wrapper.findAll('tr')).toHaveLength(5)
+    })
+  })
+})
diff --git a/pages/admin/categories.vue b/pages/admin/categories.vue
index e09db79c0..ddd5f72f8 100644
--- a/pages/admin/categories.vue
+++ b/pages/admin/categories.vue
@@ -20,8 +20,16 @@
 
 <script>
 import gql from 'graphql-tag'
+import DsCard from '@@/components/typography/Heading/Heading.vue'
+import DsHeading from '@@/components/layout/Card/Card.vue'
+import DsTable from '@@/components/data-display/Table/Table.vue'
 
 export default {
+  components: {
+    'ds-card': DsCard,
+    'ds-heading': DsHeading,
+    'ds-table': DsTable
+  },
   data() {
     return {
       Category: []
diff --git a/styleguide/src/system/components/data-display/Table/Table.vue b/styleguide/src/system/components/data-display/Table/Table.vue
index 3d21532de..1d3a28d44 100644
--- a/styleguide/src/system/components/data-display/Table/Table.vue
+++ b/styleguide/src/system/components/data-display/Table/Table.vue
@@ -49,12 +49,16 @@
 
 <script>
 import startCase from 'lodash/startCase'
+import DsTableHeadCol from './TableHeadCol.vue'
 
 /**
  * Used in combination with the table row to create data tables.
  * @version 1.0.0
  */
 export default {
+  components: {
+    'ds-table-head-col': DsTableHeadCol
+  },
   name: 'DsTable',
   provide() {
     return {