diff --git a/src/assets/main.css b/src/assets/main.css
index db8e33a..c5bd8f5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -10,4 +10,27 @@ a {
   @apply text-pink-500;
 }
 
+.written > h1 {
+    @apply text-2xl mb-4;
+}
+.written > p:not(:last-child) {
+    @apply mb-4;
+}
+
+.image-left-side:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, rgba(42, 67, 101, 0.85), rgba(42, 67, 101, 0.25));
+    border-radius: 0.375rem;
+}
+@media screen and (min-width: 768px) {
+    .image-left-side:after {
+        background: linear-gradient(45deg, rgba(42, 67, 101, 0.85), rgba(42, 67, 101, 0));
+    }
+}
+
 @tailwind utilities;
diff --git a/src/router.js b/src/router.js
index 271de2b..e339778 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,80 +3,159 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
-const router = new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  scrollBehavior: () => ({ y: 0 }),
-  routes: [
+// Base routes.
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () =>
+      import(/* webpackChunkName: "Home" */ './views/home/Index'),
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: () =>
+      import(/* webpackChunkName: "About" */ './views/about/Index'),
+  },
+  {
+    path: '/storybook-alike',
+    name: 'StorybookAlike',
+    component: () =>
+      import(/* webpackChunkName: "StorybookAlike" */ './views/storybookalike/Index'),
+  },
+  {
+    path: '/tags',
+    name: 'TagIndex',
+    component: () =>
+      import(/* webpackChunkName: "TagIndex" */ './views/tags/Index'),
+  },
+  {
+    path: '/tags/:tagSlug',
+    name: 'TagShow',
+    component: () =>
+      import(/* webpackChunkName: "TagShow" */ './views/tags/Show'),
+  },
+  {
+    path: '/categories',
+    name: 'CategoryIndex',
+    component: () =>
+      import(/* webpackChunkName: "CategoryIndex" */ './views/categories/Index'),
+  },
+  {
+    path: '/search',
+    name: 'SearchIndex',
+    component: () =>
+      import(/* webpackChunkName: "SearchIndex" */ './views/search/Index'),
+  },
+  {
+    path: '/search/:searchTerm',
+    name: 'SearchQuery',
+    component: () =>
+      import(/* webpackChunkName: "SearchQuery" */ './views/search/Query'),
+  },
+];
+
+
+// Array of information for all categories in the API.
+let categories = [
+    {
+        id: '207559a4-fe66-4c3d-bc6c-4f721f9562a4',
+        slug: 'carbon-reduction'
+    },
     {
-      path: '/',
-      name: 'Home',
-      component: () =>
-        import(/* webpackChunkName: "Home" */ './views/home/Index'),
+        id: 'f92ca585-ad4d-43bc-9430-43c2fad14aa1',
+        slug: 'clothing'
     },
     {
-      path: '/about',
-      name: 'About',
-      component: () =>
-        import(/* webpackChunkName: "About" */ './views/about/Index'),
+        id: 'a68b7a57-c0a5-4b27-81d2-93a19f2787a1',
+        slug: 'consumer-products'
     },
     {
-      path: '/storybook-alike',
-      name: 'StorybookAlike',
-      component: () =>
-        import(/* webpackChunkName: "StorybookAlike" */ './views/storybookalike/Index'),
+        id: 'e71796f8-4b3d-4f40-a1a8-527fb0fdf854',
+        slug: 'cooking'
     },
     {
-      path: '/tags',
-      name: 'TagIndex',
-      component: () =>
-        import(/* webpackChunkName: "TagIndex" */ './views/tags/Index'),
+        id: '49f0ae64-b03a-4d50-bbdc-edd765ef4500',
+        slug: 'documentaries'
     },
     {
-      path: '/tags/:tagSlug',
-      name: 'TagShow',
-      component: () =>
-        import(/* webpackChunkName: "TagShow" */ './views/tags/Show'),
+        id: '1e06ea25-373d-440c-9abd-408710b475d0',
+        slug: 'food'
     },
     {
-      path: '/actions',
-      name: 'ActionIndex',
-      component: () =>
-        import(/* webpackChunkName: "ActionIndex" */ './views/actions/Index'),
+        id: '681bffaf-a44c-4449-ae96-bf780506c862',
+        slug: 'footprint-calculators'
     },
     {
-      path: '/actions/:actionSlug',
-      name: 'ActionShow',
-      component: () =>
-        import(/* webpackChunkName: "ActionShow" */ './views/actions/Show'),
+        id: '6ad9cfc5-eac0-455e-9ad0-f537896373ba',
+        slug: 'home-improvements'
     },
     {
-      path: '/categories',
-      name: 'CategoryIndex',
-      component: () =>
-        import(/* webpackChunkName: "CategoryIndex" */ './views/categories/Index'),
+        id: '7adab10c-985b-42e2-ab8c-eee35b5a8817',
+        slug: 'hygiene'
     },
     {
-      path: '/categories/:categorySlug',
-      name: 'CategoryShow',
-      component: () =>
-        import(/* webpackChunkName: "CategoryShow" */ './views/categories/Show'),
+        id: '1fcc2840-32ba-44fb-9b99-efe4d1397ff4',
+        slug: 'jobs'
     },
     {
-      path: '/search',
-      name: 'SearchIndex',
-      component: () =>
-        import(/* webpackChunkName: "SearchIndex" */ './views/search/Index'),
+        id: '411e32f8-59bc-4fbb-ac7f-3d2a908b039e',
+        slug: 'land-management'
     },
     {
-      path: '/search/:searchTerm',
-      name: 'SearchQuery',
-      component: () =>
-        import(/* webpackChunkName: "SearchQuery" */ './views/search/Query'),
+        id: '0ec6e5b5-0a80-4c8d-b45f-b78c99492d8d',
+        slug: 'news'
     },
-  ],
+    {
+        id: '3d78ba9a-4f85-464b-a330-1cfb5c137328',
+        slug: 'politics'
+    },
+    {
+        id: '63a7cfb3-7cd5-4282-af9d-e5ed41572d1b',
+        slug: 'reforestation'
+    },
+    {
+        id: 'f9b2c5ee-8da3-446b-b865-0d716debed30',
+        slug: 'renewable-energy'
+    },
+    {
+        id: '0a32cb28-6330-4881-8671-824476ed5859',
+        slug: 'transportation'
+    },
+    {
+        id: '97826809-ed97-424c-9c46-cedba824add8',
+        slug: 'travel'
+    },
+    {
+        id: 'ee42a632-ac6a-4f89-802a-8111cf674d4c',
+        slug: 'volunteering'
+    },
+    {
+        id: 'a1a4ac88-627d-4bc7-a5b5-d3dcdc10cc43',
+        slug: 'waste'
+    }
+];
+
+// Create router objects for each category.
+categories = categories.map(function(category) {
+    return {
+        path: '/' + category.slug,
+        name: 'SingleCategoryIndex',
+        component: () => import(/* webpackChunkName: "SingleCategoryIndex" */ './views/category/Index'),
+        props: { category: category }
+    };
+});
+
+
+const router = new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  scrollBehavior: () => ({ y: 0 }),
+  // Merge base routes and category routes.
+  routes: routes.concat(categories)
 })
 
+
 // Bootstrap Analytics
 // Set in .env
 // https://github.com/MatteoGabriele/vue-analytics
diff --git a/src/views/category/Index.vue b/src/views/category/Index.vue
new file mode 100644
index 0000000..ba52a9f
--- /dev/null
+++ b/src/views/category/Index.vue
@@ -0,0 +1,154 @@
+<template>
+    <div class="text-gray-800 antialiased">
+
+        <navigation/>
+
+        <section class="flex items-center relative pt-32 pb-20" v-hidden v-if="cat">
+
+            <div class="absolute top-0 left-0 w-1/2 h-full bg-blue-900"></div>
+            <div class="absolute top-0 right-0 w-1/2 h-full bg-gray-100"></div>
+
+            <div class="relative w-full max-w-screen-lg px-5 mx-auto">
+
+                <div class="relative">
+
+                    <div class="relative z-10 w-full py-20 md:w-3/4 lg:w-3/5">
+                        <h1
+                            class="leading-tight text-white text-4xl font-bold mb-4 md:text-5xl lg:text-6xl"
+                            v-text="cat.title"
+                        ></h1>
+                        <p class="text-white text-lg font-light mb-6" v-html="cat.intro"></p>
+                    </div>
+
+                    <div
+                        class="image-left-side absolute top-0 right-0 w-3/4 h-full bg-cover bg-center background-gray-300 rounded-md shadow-lg"
+                        :style="{backgroundImage: 'url(\'' + (cat.image ? cat.image.permalink : '') + '\')'}"
+                        role="img"
+                        aria-label=""
+                    ></div>
+
+                </div>
+
+            </div>
+
+        </section>
+
+        <div class="bg-white py-20" v-hidden v-if="cat">
+            <div class="container relative w-full max-w-screen-md px-5 mx-auto">
+                <div class="written" v-html="cat.content"></div>
+            </div>
+        </div>
+
+        <!-- <div class="featured-actions" v-hidden v-show="featured">
+            <div class="featured-action" v-for="action in featured" :key="action.id">
+            </div>
+        </div> -->
+
+        <div class="bg-gray-100 py-20" v-hidden v-show="actions">
+            <div class="container relative w-full max-w-screen-md px-5 mx-auto">
+                <div class="mb-6" v-for="action in actions" :key="action.id">
+                    <a
+                        :href="action.action_url"
+                        class="text-gray-800"
+                    >
+                        <h3
+                            v-text="action.title"
+                            class="text-xl mb-2 hover:text-pink-600"
+                        ></h3>
+                        <p
+                            v-html="action.description"
+                            class="mb-4"
+                        ></p>
+                    </a>
+                    <div class="sm:flex items-center justify-between flex-row-reverse pb-4 border-b-2 border-gray-200">
+                        <a
+                            :href="action.action_url"
+                            class="inline-block text-pink-600 px-4 py-2 mb-4 sm:mb-0 border-2 border-pink-600 rounded-full hover:bg-pink-600 hover:text-white"
+                        >Take Action</a>
+
+                        <div class="flex items-center">
+                            <p class="mr-3">Share</p>
+                            <a
+                                :href="'https://www.facebook.com/sharer/sharer.php?t=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'')) + '&u=' + action.action_url"
+                                class="block text-pink-600 mr-4 hover:text-pink-800"
+                            ><i class="fab fa-facebook-f"></i></a>
+                            <a
+                                :href="'https://twitter.com/intent/tweet?text=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'') + ' via @_ProtectEarth') + '&url=' + action.action_url"
+                                class="block text-pink-600 mr-4 hover:text-pink-800"
+                            ><i class="fab fa-twitter"></i></a>
+                            <a
+                                :href="'mailto:?subject=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'')) + '&body=' + action.action_url"
+                                class="block text-pink-600 mr-6 hover:text-pink-800"
+                            ><i class="fas fa-envelope"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white py-20" v-hidden v-if="cat">
+            <div class="container relative w-full max-w-screen-md px-5 mx-auto">
+                <div class="written text-center">Green "Want to help? Great!" section here</div>
+            </div>
+        </div>
+
+        <page-footer/>
+
+    </div>
+</template>
+
+<script>
+
+import api from './../../services/api.js';
+
+export default {
+    name: 'SingleCategoryIndex',
+
+    props: {
+        category: {
+            type: Object,
+            required: true
+        }
+    },
+
+    components: {
+        Navigation: () => import('./../../components/Navigation'),
+        //Action: () => import('./../../components/listing/Action'),
+        PageFooter: () => import('./../../components/Footer')
+    },
+
+    data() {
+        return {
+            cat: null,
+            featured: null,
+            actions: null
+        };
+    },
+
+    mounted() {
+        var self = this;
+
+        // Load category information.
+        api.showCategoryWithSlug(this.category.slug)
+        .then(function(response) {
+            self.cat = response;
+        });
+
+
+        // Load all actions for this category.
+        api.getActionsWithCategory(this.category.id)
+        .then(function(response) {
+            // Split actions into featured/regular.
+            self.featured = response.data.filter(function(action) {
+                return action.featured;
+            });
+            self.actions = response.data.filter(function(action) {
+              return !action.featured;
+            });
+        });
+    },
+
+    methods: {
+    }
+}
+</script>