diff --git a/.babelrc b/.babelrc
index 934375b6..fde4c1ad 100644
--- a/.babelrc
+++ b/.babelrc
@@ -18,13 +18,16 @@
         "backpack-core/babel"
       ],
       "plugins": [
-        ["module-resolver", {
-          "root": ["./"],
-          "alias": {
-            "~": ".",
-            "@": "."
+        [
+          "module-resolver",
+          {
+            "root": ["./"],
+            "alias": {
+              "~": ".",
+              "@": "."
+            }
           }
-        }]
+        ]
       ]
     }
   }
diff --git a/.travis.yml b/.travis.yml
index 0b51cdc3..32785285 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,20 +4,19 @@ language: node_js
 node_js:
 - '8'
 before_install:
-# Remove hte line below once node 9 moves to LTS (and so does this repo)
+# Remove the line below once node 9 moves to LTS (and npm 5 is standard)
 - npm install -g npm@5
 - npm install -g greenkeeper-lockfile@1
-# Deploy key used to push to the server
-- openssl aes-256-cbc -K $encrypted_1cd83addbd20_key -iv $encrypted_1cd83addbd20_iv
-  -in deploy-key.enc -out deploy-key -d
 install:
 - npm install
 before_script:
-- greenkeeper-lockfile-upload
+- greenkeeper-lockfile-update
 script:
+- cp local.config.js.tmpl local.config.js
+- npm run build
 - npm run test
-after_success:
-- bash bin/deploy.sh
+after_script:
+- greenkeeper-lockfile-upload
 env:
   global:
     # GH_TOKEN used for greenkeeper-lockfile
diff --git a/README.md b/README.md
index a2454f3d..d6b9ad73 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ $ npm install
 $ npm run dev
 
 # build for production and launch server
+$ npm run build
 $ npm start
 ```
 
diff --git a/assets/style/partials/_cards.scss b/assets/style/partials/_cards.scss
index ee5dafe5..651e9cbf 100644
--- a/assets/style/partials/_cards.scss
+++ b/assets/style/partials/_cards.scss
@@ -7,4 +7,20 @@
   .tab-content.card-body {
     padding: 0;
   }
+
+  &.options-card {
+    font-size: $font-size-sm;
+    margin-top: 0;
+
+    .card-header {
+      background-color: $gray-100;
+      text-align: center;
+      padding: $list-group-item-padding-y $list-group-item-padding-x;
+    }
+  }
+
+  .search-control {
+    border-radius: 100px;
+    padding: 0.5rem 0.75rem;
+  }
 }
diff --git a/assets/style/partials/_tables.scss b/assets/style/partials/_tables.scss
index 332e37e9..2cbd2c65 100644
--- a/assets/style/partials/_tables.scss
+++ b/assets/style/partials/_tables.scss
@@ -1,10 +1,10 @@
 .table {
   display: table;
+  width: 100%;
   font-size: $font-size-sm;
   margin-bottom: 0;
   background-color: $white;
   border: $table-border-width solid $table-border-color;
-  overflow-y: auto;
 
   th {
     font-weight: 400;
@@ -16,19 +16,4 @@
   td {
     vertical-align: middle;
   }
-
-  .markdown {
-    h1, h2, h3, h4, h5, h6 {
-      font-family: $font-family-base;
-      margin-bottom: 5px;
-      font-size: $font-size-sm;
-      text-transform: uppercase;
-      font-weight: 600;
-    }
-
-    p {
-      margin: 0;
-      margin-bottom: 5px;
-    }
-  }
 }
\ No newline at end of file
diff --git a/assets/style/partials/_transitions.scss b/assets/style/partials/_transitions.scss
index 8b7185cf..7338f98d 100644
--- a/assets/style/partials/_transitions.scss
+++ b/assets/style/partials/_transitions.scss
@@ -8,12 +8,9 @@
   opacity: 0;
 }
 
-.fade-up-enter-active {
-  transition: all .3s ease;
-}
-
+.fade-up-enter-active,
 .fade-up-leave-active {
-  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  transition: all .3s ease;
 }
 
 .fade-up-enter,
diff --git a/bin/README.md b/bin/README.md
deleted file mode 100644
index c59a4713..00000000
--- a/bin/README.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# Deployments
-
-We're running a continuous deployment process to push LibCrowds
-updates out to all specified servers.
-
-Here are some notes to help configure a new server:
-
-``` bash
-# install node and npm
-sudo apt-get install python-software-properties
-curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
-sudo apt-get install nodejs
-
-# install nginx
-sudo apt-get install nginx
-
-# remove default nginx config
-sudo rm /etc/nginx/sites-available/default
-
-# create nginx config (copy /contrib/frontend)
-vim /etc/nginx/sites-available/frontend
-
-# enable nginx config
-sudo ln -s /etc/nginx/sites-available/frontend /etc/nginx/sites-enabled/frontend
-
-# restart nginx
-sudo service nginx restart
-
-# create an empty repo
-mkdir -p /var/www/deployment/.git
-cd /var/www/deployment/.git
-git init --bare
-
-# create an empty directory for deployments
-mkdir /var/www/frontend
-
-# create a post-receive hook (copy /contrib/post-receive)
-cd hooks
-vim post-receive
-
-# make the script executable
-chmod +x /var/www/deployment/.git/hooks/post-receive
-
-# create a user with restricted access
-adduser deploy
-
-# give that user ownership
-chown -R deploy:deploy /var/www/deployment/.git
-chown -R deploy:deploy /var/www/frontend
-
-# switch to that user
-su - deploy
-
-# create the public key (copy /contrib/deploy-key.pub)
-mkdir ~/.ssh
-vim ~/.ssh/authorized_keys
-
-# restrict permissions
-chmod 700 .ssh
-chmod 600 .ssh/authorized_keys
-```
-
-You can now exit the server and modify [/bin/deploy.sh](/bin/deploy.sh) accordingly.
diff --git a/bin/configure.sh b/bin/configure.sh
deleted file mode 100755
index 1d0519e9..00000000
--- a/bin/configure.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/usr/bin/env bash
-
-SETTINGS="https://github.com/LibCrowds/libcrowds-frontend-settings"
-
-# Configure site
-rm local.config.js
-rm -rf custom/*/
-git clone $SETTINGS custom/settings
-echo "module.exports = require('./custom/settings/siteConfig.js')" >> local.config.js
diff --git a/bin/deploy.sh b/bin/deploy.sh
deleted file mode 100644
index 1989f5cb..00000000
--- a/bin/deploy.sh
+++ /dev/null
@@ -1,45 +0,0 @@
-#!/usr/bin/env bash
-
-MASTER='www.libcrowds.com'
-STAGING='dev.libcrowds.com'
-
-if [ "${TRAVIS_BRANCH}" == "master" -a "$TRAVIS_PULL_REQUEST" = "false" ] || [ "${TRAVIS_BRANCH}" == "dev" -a "$TRAVIS_PULL_REQUEST" = "false" ] ; then
-
-  # Build
-  npm run build
-
-  # Clear git info
-  rm -rf .git
-  rm -rf .gitignore
-
-  # Set up package for sending
-  git init
-
-  if [ "${TRAVIS_BRANCH}" == "master" ] ; then
-    git remote add deploy "deploy@$MASTER:/var/www/deployment"
-  else
-    git remote add deploy "deploy@$STAGING:/var/www/deployment"
-  fi
-
-  git config user.name "Alex Mendes"
-  git config user.email "alexanderhmendes@gmail.com"
-  git add .nuxt/dist/*
-  git commit -m "Deployment"
-
-  # Set up permissions
-  if [ "${TRAVIS_BRANCH}" == "master" ] ; then
-    echo -e "Host $MASTER\n\tStrictHostKeyChecking no" >> ~/.ssh/config
-  else
-    echo -e "Host $STAGING\n\tStrictHostKeyChecking no" >> ~/.ssh/config
-  fi
-
-  openssl aes-256-cbc -K $encrypted_1cd83addbd20_key -iv $encrypted_1cd83addbd20_iv -in deploy-key.enc -out deploy-key -d
-  eval "$(ssh-agent -s)"
-  chmod 600 deploy-key
-  ssh-add deploy-key
-
-  # Deploy
-  git push -f deploy master
-else
-  echo "Not deploying as this is not the master or development branch"
-fi
diff --git a/components/InfiniteLoad.vue b/components/InfiniteLoad.vue
index 9e89522b..c77662f5 100644
--- a/components/InfiniteLoad.vue
+++ b/components/InfiniteLoad.vue
@@ -15,7 +15,6 @@
 </template>
 
 <script>
-import orderBy from 'lodash/orderBy'
 import merge from 'lodash/merge'
 
 export default {
@@ -40,11 +39,6 @@ export default {
         offset: this.value.length
       })
 
-      if (this.domainObject === 'project') {
-        this.infiniteLoadOrderedProjects($state, params)
-        return
-      }
-
       try {
         // Get the data
         let data = await this.$axios.$get(`/api/${this.domainObject}`, {
@@ -65,79 +59,24 @@ export default {
     },
 
     /**
-     * Handler to infinitely load projects.
-     *
-     * We have to deal with ordered projects slightly differently from other
-     * domain objects as the project stats are stored in a different table. So,
-     * we request all filtered projects and then sort. Not as efficient but it
-     * is a solution for now.
-     * @param {Object} $state
-     *   The vue-inifinite-loading state.
-     * @param {Object} params
-     *   The query params.
+     * Reset the loaded items.
      */
-    async infiniteLoadOrderedProjects ($state, params) {
-      params.limit = 100
-
-      // Pull out order params
-      const orderby = params.orderby || 'created'
-      const order = params.desc ? 'desc' : 'asc'
-      delete params.orderby
-      delete params.desc
-
-      let items = []
-
-      // Load all items
-      while (true) {
-        try {
-          const data = await this.$axios.$get(`/api/${this.domainObject}`, {
-            params: merge(params, {
-              offset: items.length ? items[items.length - 1].id : 0
-            })
-          })
-
-          if (!data.length) {
-            break
-          }
-
-          const statsData = await this.$axios.$get('/api/projectstats', {
-            params: {
-              project_id: data.map(project => project.id).toString()
-            }
-          })
-
-          const enrichedData = data.map((project, idx) => {
-            return merge(statsData[idx], project)
-          })
-
-          items = items.concat(enrichedData)
-        } catch (err) {
-          this.$nuxt.error(err)
-          break
-        }
-      }
-
-      // Sort
-      const sorted = orderBy(items, [ orderby ], [ order ])
-
-      this.$emit('input', sorted)
-      if (sorted.length) {
-        $state.loaded()
-      }
-      $state.complete()
+    reset () {
+      this.$emit('input', [])
+      this.$nextTick(() => {
+        this.page = 1
+        this.$refs.infiniteload.$emit('$InfiniteLoading:reset')
+      })
     },
 
     /**
-     * Reset the loaded domain objects.
+     * Trigger a manual load.
      */
-    reset () {
+    load () {
       this.$nextTick(() => {
-        this.$emit('input', [])
-        this.$refs.infiniteload.$emit('$InfiniteLoading:reset')
-        this.$refs.infiniteload.$emit(
-          '$InfiniteLoading:infinite',
-          this.$refs.stateChanger
-        )
+        if (!this.$refs.infiniteload.isLoading) {
+          this.$refs.infiniteload.attemptLoad()
+        }
       })
     }
   },
diff --git a/components/InfiniteLoadProjects.vue b/components/InfiniteLoadProjects.vue
new file mode 100644
index 00000000..cdae6297
--- /dev/null
+++ b/components/InfiniteLoadProjects.vue
@@ -0,0 +1,123 @@
+<template>
+  <no-ssr>
+    <infinite-loading
+      ref="infiniteload"
+      class="infinite-loading"
+      @infinite="infiniteLoadProjects">
+      <span slot="no-results">
+        <span v-if="noResults">{{ noResults }}</span>
+      </span>
+      <span slot="no-more">
+        <span v-if="noMoreResults">{{ noMoreResults }}</span>
+      </span>
+    </infinite-loading>
+  </no-ssr>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      page: 1
+    }
+  },
+
+  methods: {
+    /**
+     * Handler to infinitely load projects for a collection.
+     *
+     * We have to deal with ordered projects slightly differently from other
+     * domain objects as the project stats are stored in a different table.
+     * @param {Object} $state
+     *   The vue-inifinite-loading state.
+     */
+    async infiniteLoadProjects ($state) {
+      const params = {}
+      if (this.orderby) {
+        params.orderby = this.orderby
+      }
+
+      // Only include if true
+      if (this.desc) {
+        params.desc = this.desc
+      }
+
+      let endpoint = `/project/category/${this.collection.short_name}`
+      if (this.value.length) {
+        this.page += 1
+        endpoint += `/page/${this.page}`
+      }
+
+      try {
+        let data = await this.$axios.$get(endpoint, { params: params })
+
+        if (!data.projects.length) {
+          $state.complete()
+          return
+        }
+
+        this.$emit('input', this.value.concat(data.projects))
+        $state.loaded()
+      } catch (err) {
+        this.$nuxt.error(err)
+      }
+    },
+
+    /**
+     * Reset the loaded items.
+     *
+     * If the items are displayed using a transition the wait paramter should be
+     * used with a time longer than that transition to ensure the the reload
+     * is triggered, otherwise we might not be at the scroll distance when the
+     * reset happens.
+     * @param {Number} wait
+     *   A number of milliseconds to wait before reloading.
+     */
+    reset (wait = 0) {
+      this.$emit('input', [])
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.page = 1
+          this.$refs.infiniteload.$emit('$InfiniteLoading:reset')
+        }, wait)
+      })
+    }
+  },
+
+  props: {
+    value: {
+      type: Array,
+      required: true
+    },
+    collection: {
+      type: Object,
+      required: true
+    },
+    orderby: {
+      type: String,
+      default: null
+    },
+    desc: {
+      type: Boolean,
+      default: false
+    },
+    noResults: {
+      type: String,
+      default: 'No results'
+    },
+    noMoreResults: {
+      type: String,
+      default: 'No more results'
+    }
+  },
+
+  watch: {
+    orderby (val, oldVal) {
+      this.reset()
+    },
+    desc (val, oldVal) {
+      this.reset()
+    }
+  }
+}
+</script>
diff --git a/components/buttons/ProjectContrib.vue b/components/buttons/ProjectContrib.vue
index 0009a39a..97c8b812 100644
--- a/components/buttons/ProjectContrib.vue
+++ b/components/buttons/ProjectContrib.vue
@@ -43,8 +43,7 @@ export default {
 
   computed: {
     disabled () {
-      const progress = this.project.overall_progress
-      return progress && progress === 100
+      return Number(this.project.overall_progress) >= 100
     }
   }
 }
diff --git a/components/buttons/SocialMedia.vue b/components/buttons/SocialMedia.vue
index 697ef31f..f4c5665a 100644
--- a/components/buttons/SocialMedia.vue
+++ b/components/buttons/SocialMedia.vue
@@ -6,7 +6,7 @@
         title="Share on Facebook"
         variant="facebook"
         :size="size"
-        @click="share(facebookUrl, 980, 620)">
+        @click="share('Facebook', facebookUrl, 980, 620)">
         <icon name="facebook"></icon>
       </b-btn>
 
@@ -15,7 +15,7 @@
         title="Share on Twitter"
         variant="twitter"
         :size="size"
-        @click="share(twitterUrl, 450, 550)">
+        @click="share('Twitter', twitterUrl, 450, 550)">
         <icon name="twitter"></icon>
       </b-btn>
 
@@ -24,7 +24,7 @@
         title="Share on Google Plus"
         variant="googleplus"
         :size="size"
-        @click="share(googleplusUrl, 510, 725)">
+        @click="share('Google Plus', googleplusUrl, 510, 725)">
         <icon name="google-plus"></icon>
       </b-btn>
 
@@ -33,7 +33,7 @@
         title="Share on LinkedIn"
         variant="linkedin"
         :size="size"
-        @click="share(linkedinUrl, 510, 520)">
+        @click="share('LinkedIn', linkedinUrl, 510, 520)">
         <icon name="linkedin"></icon>
       </b-btn>
 
@@ -75,7 +75,13 @@ export default {
   },
 
   methods: {
-    share (url, width, height) {
+    /**
+     * Open a new window to share the url on the chosen platform.
+     */
+    share (platform, url, width, height) {
+      if (this.$ga) {
+        this.$ga.social(platform, 'Share', this.shareUrl)
+      }
       const specs = `scrollbars=yes,width=${width},height=${height}`
       const popup = window.open(url, 'Share', specs)
       popup.focus()
diff --git a/components/cards/Announcement.vue b/components/cards/Announcement.vue
index 2b7d270f..3e8a0ed6 100644
--- a/components/cards/Announcement.vue
+++ b/components/cards/Announcement.vue
@@ -20,7 +20,8 @@
       </div>
 
       <div class="p-1 flex-grow">
-        <div class="card-title mb-0" v-html="content"></div>
+        <div class="card-title mb-0" v-html="title"></div>
+        <div class="card-text mb-0" v-html="body"></div>
       </div>
 
       <div class="p-1">
@@ -47,7 +48,8 @@ export default {
   data () {
     return {
       imgSrc: localConfig.pybossa.host + this.announcement.media_url,
-      content: marked(this.announcement.title)
+      title: marked(this.announcement.title),
+      body: marked(this.announcement.body)
     }
   },
 
@@ -63,7 +65,7 @@ export default {
      * Handle navigation when the card is clicked.
      */
     onClick () {
-      const url = this.announcement.body
+      const url = this.announcement.info.url
       const parser = document.createElement('a')
       const internal = this.isInternal(url)
       if (internal) {
@@ -128,6 +130,7 @@ export default {
   }
 
   .card-title {
+    font-weight: 400;
     font-size: $font-size-sm;
   }
 
diff --git a/components/cards/Base.vue b/components/cards/Base.vue
new file mode 100644
index 00000000..97d7af31
--- /dev/null
+++ b/components/cards/Base.vue
@@ -0,0 +1,43 @@
+<template>
+  <b-card class="card-base" no-body>
+    <b-row
+      slot="header"
+      class="mb-0 d-flex align-items-center">
+      <b-col xs="12" md="6">
+        <h6 class="mb-0">{{ title }}</h6>
+        <p class="text-muted mb-0">
+          <small>
+            {{ help }}
+          </small>
+        </p>
+      </b-col>
+      <b-col class="my-1 my-md-0">
+        <slot name="controls"></slot>
+      </b-col>
+    </b-row>
+
+    <slot></slot>
+
+  </b-card>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    help: {
+      type: String,
+      default: null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-base {
+  overflow-x: auto;
+}
+</style>
\ No newline at end of file
diff --git a/components/cards/Project.vue b/components/cards/Project.vue
index 9f4fc171..e9742c4b 100644
--- a/components/cards/Project.vue
+++ b/components/cards/Project.vue
@@ -1,9 +1,7 @@
 <template>
-  <b-card
-    no-body
-    class="project-card">
+  <b-card no-body class="project-card">
     <nuxt-link
-      :event="linkEvent"
+      v-if="projectIncomplete"
       :to="{
         name: 'collection-short_name-projects-id-presenter',
         params: {
@@ -18,11 +16,16 @@
         </project-avatar>
       </div>
     </nuxt-link>
+    <div v-else class="avatar-wrapper">
+      <project-avatar
+        :project="project">
+      </project-avatar>
+    </div>
 
     <div class="card-body project-details p-0">
       <div class="card-title mb-0">
         <nuxt-link
-          :event="linkEvent"
+          v-if="projectIncomplete"
           :to="{
             name: 'collection-short_name-projects-id-presenter',
             params: {
@@ -35,6 +38,9 @@
             {{ project.name }}
           </h4>
         </nuxt-link>
+        <h4 v-else class="card-title mb-1 px-2 pt-2">
+          {{ project.name }}
+        </h4>
         <div>
           <b-btn
             v-b-modal="statsModalId"
@@ -48,6 +54,13 @@
       <p class="card-text project-description mb-0 px-2 pb-1">
         {{ project.description }}
       </p>
+      <div class="mb-0 px-2 pt-1">
+        <project-tags-list
+          :project="project"
+          :collection="collection"
+          @tag-click="onTagClick">
+        </project-tags-list>
+      </div>
 
       <div class="progress-container" :id="progressBarId"></div>
 
@@ -97,6 +110,7 @@ import ProgressBar from 'progressbar.js'
 import ProjectAvatar from '@/components/avatars/Project'
 import ProjectContribButton from '@/components/buttons/ProjectContrib'
 import ProjectStatsModal from '@/components/modals/ProjectStats'
+import ProjectTagsList from '@/components/lists/ProjectTags'
 
 export default {
   data () {
@@ -120,12 +134,22 @@ export default {
   components: {
     ProjectStatsModal,
     ProjectContribButton,
-    ProjectAvatar
+    ProjectAvatar,
+    ProjectTagsList
   },
 
   computed: {
-    linkEvent () {
-      return this.project.overall_progress < 100 ? 'click' : null
+    projectIncomplete () {
+      return Number(this.project.overall_progress) < 100
+    }
+  },
+
+  methods: {
+    /**
+     * Handle a tag click.
+     */
+    onTagClick (type, value) {
+      this.$emit('tagclick', type, value)
     }
   },
 
@@ -176,6 +200,7 @@ export default {
 
     .card-title {
       display: flex;
+      font-size: $font-size-lg;
 
       a {
         width: 100%;
diff --git a/components/cards/ProjectSorting.vue b/components/cards/ProjectSorting.vue
index 6b81b441..2637c28d 100644
--- a/components/cards/ProjectSorting.vue
+++ b/components/cards/ProjectSorting.vue
@@ -1,21 +1,17 @@
 <template>
-  <b-card
-    id="project-sorting-options"
-    header="Sorting Options">
+  <b-card id="project-filters-card" header="Sorting Options">
 
     <div
-      v-for="(tag, index) in tags"
-      :key="index"
+      v-for="(value, tag) in collection.info.tags"
+      :key="tag"
       class="mb-2">
-      <label>{{ tag.type }}</label>
+      <label>{{ tag }}</label>
       <multiselect
-        label="name"
-        track-by="name"
-        :id="tag.key"
-        :placeholder="`Filter by ${tag.type.toLowerCase()}`"
+        :id="tag"
+        :placeholder="`Filter by ${tag.toLowerCase()}`"
         :show-labels="false"
-        :options="tag.options"
-        @input="onTagChange">
+        :options="value.options"
+        @input="onFilterChange">
       </multiselect>
     </div>
 
@@ -24,6 +20,7 @@
       <multiselect
         label="name"
         track-by="name"
+        v-model="mergedSortModel"
         placeholder="Sort projects by"
         :show-labels="false"
         :options="sortOptions"
@@ -36,115 +33,109 @@
 
 <script>
 import merge from 'lodash/merge'
-import { computeTags } from '@/mixins/computeTags'
 
 export default {
-  mixins: [ computeTags ],
-
   data () {
     return {
       sortOptions: [
         {
           name: 'Most Tasks',
-          orderby: 'n_tasks',
-          desc: true
+          sortBy: 'n_tasks',
+          sortDesc: true
         },
         {
           name: 'Least Tasks',
-          orderby: 'n_tasks',
-          desc: false
+          sortBy: 'n_tasks',
+          sortDesc: false
         },
         {
           name: 'Most Popular',
-          orderby: 'n_volunteers',
-          desc: true
+          sortBy: 'n_volunteers',
+          sortDesc: true
         },
         {
           name: 'Least Popular',
-          orderby: 'n_volunteers',
-          desc: false
+          sortBy: 'n_volunteers',
+          sortDesc: false
         },
         {
           name: 'Most Complete',
-          orderby: 'overall_progress',
-          desc: true
+          sortBy: 'overall_progress',
+          sortDesc: true
         },
         {
           name: 'Least Complete',
-          orderby: 'overall_progress',
-          desc: false
+          sortBy: 'overall_progress',
+          sortDesc: false
         }
       ],
-      sortParams: {},
-      tagParams: {}
+      initialSortModel: {
+        name: 'Least Complete',
+        sortBy: 'overall_progress',
+        sortDesc: false
+      },
+      initialFilterModel: {}
     }
   },
 
   props: {
-    value: {
+    sortModel: {
+      type: Object,
+      default: () => ({})
+    },
+    filterModel: {
+      type: Object,
+      default: () => ({})
+    },
+    projects: {
+      type: Array,
+      required: true
+    },
+    collection: {
       type: Object,
       required: true
     }
   },
 
-  methods: {
-    /**
-     * Handle a tag being selected or removed.
-     * @param {Object} tag
-     *   The tag.
-     * @param {Object} key
-     *   The component ID (which should be the tag key).
-     */
-    onTagChange (tag, key) {
-      const params = JSON.parse(JSON.stringify(this.value))
-      params.info = params.info || ''
-      params.info = this.stripTag(params.info, key)
-      if (tag) {
-        if (params.info.length) {
-          params.info += '|'
-        }
-        params.info += `${key}::${tag.name}`
-      } else if (!params.info.length) {
-        delete params.info
+  computed: {
+    mergedSortModel: {
+      get () {
+        return merge({}, this.initialSortModel, this.sortModel)
+      },
+      set (newValue) {
+        this.initialSortModel = newValue
       }
-      this.tagParams = params
-      this.update()
     },
 
+    mergedFilterModel: {
+      get () {
+        return merge({}, this.initialFilterModel, this.filterModel)
+      },
+      set (newValue) {
+        this.initialFilterModel = newValue
+      }
+    }
+  },
+
+  methods: {
     /**
-     * Strip a tag.
-     * @param {Object} info
-     *   The info data (where tags are stored).
-     * @param {String} tagKey
-     *   The tag key to be stripped.
+     * Handle a tag being selected or removed.
+     * @param {Object} name
+     *   The tag name.
+     * @param {Object} type
+     *   The tag type (which comes from the multiselect component ID).
      */
-    stripTag (info, tagKey) {
-      const infoParams = info.split('|')
-      const stripped = infoParams.filter(param => {
-        return param.split('::')[0] !== tagKey
-      })
-      return stripped.join('|')
+    onFilterChange (name, type) {
+      this.$emit('filter-change', name, type)
     },
 
     /**
      * Handle sort change.
+     * @param {Object} value
+     *   The sorting option.
      */
     onSortChange (value) {
-      if (!value) {
-        this.sortParams = {}
-      } else {
-        delete value.name
-        this.sortParams = value
-      }
-      this.update()
-    },
-
-    /**
-     * Emit the new params.
-     */
-    update () {
-      const searchParams = merge({}, this.tagParams, this.sortParams)
-      this.$emit('input', searchParams)
+      this.$emit('sort-change', value)
     }
   }
 }
@@ -153,7 +144,7 @@ export default {
 <style lang="scss">
 @import '~assets/style/settings';
 
-#project-sorting-options {
+#project-filters-card {
   font-size: $font-size-sm;
   margin-top: 0;
 
@@ -162,15 +153,5 @@ export default {
     text-align: center;
     padding: $list-group-item-padding-y $list-group-item-padding-x;
   }
-
-  #show-completed {
-    label {
-      margin: 0 5px 0 0;
-    }
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
 }
 </style>
\ No newline at end of file
diff --git a/components/data/FilterProjects.vue b/components/data/FilterProjects.vue
new file mode 100644
index 00000000..001c01b6
--- /dev/null
+++ b/components/data/FilterProjects.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="filter-projects-data">
+    <div
+      v-for="(tag, key) in collection.info.tags"
+      :key="key"
+      class="mb-2">
+      <label v-if="!hideLabel">{{ key }}</label>
+      <multiselect
+        :id="key"
+        v-model="model[key]"
+        :placeholder="`Filter by ${key.toLowerCase()}`"
+        :show-labels="false"
+        :options="tag.options"
+        @input="onInput"
+        @select="onSelect">
+      </multiselect>
+    </div>
+  </div>
+</template>
+
+<script>
+import pickBy from 'lodash/pickBy'
+import identity from 'lodash/identity'
+
+export default {
+  data () {
+    return {
+      model: this.value
+    }
+  },
+
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    collection: {
+      type: Object,
+      required: true
+    },
+    hideLabel: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    /**
+     * Handle a tag being selected or removed.
+     * @param {String} name
+     *   The tag name.
+     * @param {String} type
+     *   The tag type (which comes from the multiselect component ID).
+     */
+    onInput (name, type) {
+      this.model[type] = name
+      // Emit with null values removed
+      this.$emit('input', pickBy(this.model, identity))
+    },
+
+    /**
+     * Handle a tag being selected.
+     * @param {String} name
+     *   The tag name.
+     * @param {String} type
+     *   The tag type (which comes from the multiselect component ID).
+     */
+    onSelect (name, type) {
+      this.$emit('select', name, type)
+    }
+  },
+
+  watch: {
+    value (val) {
+      this.model = val
+    }
+  }
+}
+</script>
diff --git a/components/data/SortProjects.vue b/components/data/SortProjects.vue
new file mode 100644
index 00000000..9fe26181
--- /dev/null
+++ b/components/data/SortProjects.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <label v-if="!hideLabel">Sort by</label>
+    <multiselect
+      label="name"
+      track-by="name"
+      v-model="model"
+      placeholder="Sort projects by"
+      :show-labels="false"
+      :options="sortOptions"
+      @input="onInput"
+      @select="onSelect">
+    </multiselect>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      sortOptions: [
+        {
+          name: 'Most Tasks',
+          orderby: 'n_tasks',
+          desc: true
+        },
+        {
+          name: 'Least Tasks',
+          orderby: 'n_tasks',
+          desc: false
+        },
+        {
+          name: 'Most Popular',
+          orderby: 'n_volunteers',
+          desc: true
+        },
+        {
+          name: 'Least Popular',
+          orderby: 'n_volunteers',
+          desc: false
+        },
+        {
+          name: 'Most Complete',
+          orderby: 'overall_progress',
+          desc: true
+        },
+        {
+          name: 'Least Complete',
+          orderby: 'overall_progress',
+          desc: false
+        }
+      ],
+      model: this.value
+    }
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+    hideLabel: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    /**
+     * Handle sorting change.
+     * @param {String} value
+     *   The sorting option.
+     */
+    onInput (value) {
+      this.$emit('input', value)
+    },
+
+    /**
+     * Handle an option being selected.
+     * @param {String} value
+     *   The sorting option.
+     */
+    onSelect (value) {
+      this.$emit('select', value)
+    }
+  },
+
+  watch: {
+    value (val, oldVal) {
+      this.model = val
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/components/data/ToggleCompleted.vue b/components/data/ToggleCompleted.vue
new file mode 100644
index 00000000..9c92f897
--- /dev/null
+++ b/components/data/ToggleCompleted.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="d-flex align-items-center justify-content-between">
+    <label class="mr-1 mb-0 toggle-label">
+      Show Completed
+    </label>
+    <toggle-button
+      :value="value"
+      :sync="true"
+      :labels="true"
+      class="mb-0"
+      @change="onChange">
+    </toggle-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    /**
+     * Handle the toggle change.
+     */
+    onChange (change) {
+      this.$emit('input', change.value)
+    }
+  },
+
+  beforeMount () {
+    this.$emit('input', false)
+  }
+}
+</script>
diff --git a/components/forms/Base.vue b/components/forms/Base.vue
index 3036cf08..3fd49f8d 100644
--- a/components/forms/Base.vue
+++ b/components/forms/Base.vue
@@ -10,7 +10,7 @@
 
     <template slot="footer">
       <span>
-        <slot name="footer-left"></slot>
+        <slot name="footer-base-left"></slot>
       </span>
       <span>
         <b-btn
diff --git a/components/forms/ImageUpload.vue b/components/forms/ImageUpload.vue
index 5abf8942..7781b199 100644
--- a/components/forms/ImageUpload.vue
+++ b/components/forms/ImageUpload.vue
@@ -140,10 +140,8 @@ export default {
         },
         withCredentials: true
       }).then(data => {
-        this.notify({
-          title: 'Success',
-          message: 'The image should be refreshed in a few minutes',
-          type: 'success'
+        this.notifySuccess({
+          message: 'The image should be refreshed in a few minutes'
         })
       }).catch(err => {
         this.$nuxt.error(err)
diff --git a/components/forms/PybossaForm.vue b/components/forms/PybossaForm.vue
index 6384c9f6..4fb4d709 100644
--- a/components/forms/PybossaForm.vue
+++ b/components/forms/PybossaForm.vue
@@ -34,6 +34,10 @@
 
     <slot name="bottom"></slot>
 
+    <template slot="footer-base-left">
+      <slot name="footer-left"></slot>
+    </template>
+
   </form-base>
 </template>
 
@@ -153,11 +157,7 @@ export default {
       if (!valid) {
         this.alert = 'Please correct the errors'
         this.status = 'error'
-        this.notify({
-          type: 'warn',
-          title: 'Invalid form data',
-          message: this.alert
-        })
+        this.notifyInvalidForm()
       }
       return valid
     },
@@ -190,29 +190,15 @@ export default {
         if (r.data.status === 'error') {
           this.alert = r.data.flash
           this.status = r.data.status
-          this.notify({
-            type: 'warn',
-            title: 'Invalid form data',
-            message: r.data.flash
-          })
+          this.notifyInvalidForm()
           this.injectErrors(r.data.form.errors)
           return
-        } else if (r.data.status === 'success') {
+        } else if (r.data.status === 'success' || !r.data.status) {
           this.handleSuccess(r.data)
-        } else if (typeof r.data.status === 'undefined') {
-          this.notify({
-            type: 'success',
-            title: 'Success',
-            message: ''
-          })
         }
         this.flash(r.data)
       }).catch(err => {
-        this.notify({
-          type: 'error',
-          title: 'Error',
-          message: err.message || 'Server Error'
-        })
+        this.notifyError({ message: err.message || 'Server Error' })
       }).then(() => {
         this.processing = false
       })
diff --git a/components/lists/Announcements.vue b/components/lists/Announcements.vue
index 8e1fcceb..9c310dc4 100644
--- a/components/lists/Announcements.vue
+++ b/components/lists/Announcements.vue
@@ -137,6 +137,7 @@ export default {
 #announcements-list {
   font-size: $font-size-sm;
   display: flex;
+  justify-content: center;
   padding-right: 0;
   position: relative;
   text-transform: none;
diff --git a/components/lists/ProjectTags.vue b/components/lists/ProjectTags.vue
new file mode 100644
index 00000000..93ec58a0
--- /dev/null
+++ b/components/lists/ProjectTags.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="project-tags-list">
+    <b-badge
+      v-for="(value, type) in project.info.tags"
+      :key="type"
+      :style="getTagStyle(type)"
+      @click.prevent="handleClick(type, value)">
+      {{ type }}: {{ value }}
+    </b-badge>
+  </div>
+</template>
+
+<script>
+import isEmpty from 'lodash/isEmpty'
+
+export default {
+  props: {
+    project: {
+      type: Object,
+      required: true
+    },
+    collection: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    enabled () {
+      return !isEmpty(this.collection)
+    }
+  },
+
+  methods: {
+    /**
+     * Return the colour of the tag, if it still exists.
+     * @param {String} type
+     *   The tag type
+     */
+    getTagStyle (type) {
+      let color = '#909090'
+      if (!isEmpty(this.collection) && this.collection.info.tags[type]) {
+        color = this.collection.info.tags[type].color
+      }
+      return {
+        backgroundColor: color,
+        cursor: this.enabled ? 'pointer' : 'default'
+      }
+    },
+
+    /**
+     * Handle click.
+     * @param {String} type
+     *   The tag type.
+     * @param {String} name
+     *   The tag name.
+     */
+    handleClick (type, name) {
+      if (this.enabled) {
+        this.$emit('tag-click', type, name)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.project-tags-list {
+  .badge {
+    letter-spacing: 0.2px;
+    font-weight: 400;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/modals/AddTag.vue b/components/modals/AddTag.vue
new file mode 100644
index 00000000..fb21176d
--- /dev/null
+++ b/components/modals/AddTag.vue
@@ -0,0 +1,173 @@
+<template>
+  <b-modal
+    ref="modal"
+    :id="modalId"
+    title="Add a tag"
+    @ok="handleOk"
+    @hidden="reset">
+
+    <form @submit="handleOk" class="px-2 pt-2">
+      <b-form-group
+        id="type"
+        label="Type"
+        :state="getState('type')"
+        :feedback="this.errors['type']"
+        horizontal>
+        <multiselect
+          tag-placeholder="Press enter to create a type"
+          :taggable="true"
+          :options="availableTypes"
+          v-model="tag.type"
+          @tag="addType">
+          <span slot="noResult">
+            No tags found, try changing the search query
+          </span>
+        </multiselect>
+      </b-form-group>
+
+      <b-form-group id="color" label="Colour" horizontal>
+        <b-form-input v-model="tag.color" type="color"></b-form-input>
+      </b-form-group>
+
+      <b-form-group
+        id="name"
+        label="Name"
+        :state="getState('name')"
+        :feedback="this.errors['name']"
+        horizontal>
+        <b-form-input v-model="tag.name" type="text"></b-form-input>
+      </b-form-group>
+    </form>
+
+  </b-modal>
+</template>
+
+<script>
+import capitalize from 'capitalize'
+import isEmpty from 'lodash/isEmpty'
+import { notifications } from '@/mixins/notifications'
+
+export default {
+  mixins: [ notifications ],
+
+  data () {
+    return {
+      tag: {
+        name: '',
+        type: '',
+        color: '#2589BD'
+      },
+      newType: null,
+      processing: false,
+      errors: {}
+    }
+  },
+
+  props: {
+    modalId: {
+      type: String,
+      required: true
+    },
+    collection: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    availableTypes () {
+      const types = Object.keys(this.collection.info.tags)
+      if (this.newType) {
+        types.push(this.newType)
+      }
+      return types
+    }
+  },
+
+  methods: {
+    /**
+     * Add a new Type
+     * @param {String} newType
+     *   The new type.
+     */
+    addType (newType) {
+      this.newType = capitalize(newType)
+      this.tag.type = this.newType
+    },
+
+    /**
+     * Validate and submit on OK click.
+     */
+    handleOk (evt) {
+      evt.preventDefault()
+
+      // Validate
+      this.errors = {}
+      if (!this.tag.type) {
+        this.errors['type'] = 'Please choose a type'
+      }
+      if (!this.tag.name) {
+        this.errors['name'] = 'Please enter a name'
+      }
+
+      // Submit
+      if (isEmpty(this.errors)) {
+        this.addTag()
+      } else {
+        this.notifyInvalidForm()
+      }
+    },
+
+    /**
+     * Add the tag.
+     */
+    addTag () {
+      this.processing = true
+      const newTag = this.collection.info.tags[this.tag.type] || {}
+      newTag.options = newTag.options || []
+
+      // Optional as the modal can also be used for editing
+      if (newTag.options.indexOf(this.tag.name) < 0) {
+        newTag.options.push(this.tag.name)
+      }
+
+      newTag.color = this.tag.color
+      this.collection.info.tags[this.tag.type] = newTag
+      return this.$axios.$put(`/api/category/${this.collection.id}`, {
+        info: this.collection.info
+      }).then(data => {
+        this.$refs.modal.hide()
+        this.notifySuccess({ message: 'Tag added' })
+        this.processing = false
+        this.$emit('update', this.tag)
+      })
+    },
+
+    /**
+     * Get the state for a form field.
+     * @param {String} field
+     *   The form field.
+     */
+    getState (field) {
+      return this.errors.hasOwnProperty(field) ? 'invalid' : 'valid'
+    },
+
+    /**
+     * Reset the form.
+     */
+    reset () {
+      this.errors = {}
+      this.newType = null
+      this.tag = {
+        name: '',
+        type: '',
+        color: '#2589BD'
+      }
+    },
+
+    show () {
+      this.$refs.modal.show()
+    }
+  }
+}
+</script>
diff --git a/components/modals/Data.vue b/components/modals/Data.vue
index 456c6338..e2e38f78 100644
--- a/components/modals/Data.vue
+++ b/components/modals/Data.vue
@@ -21,9 +21,11 @@
 </template>
 
 <script>
-import exportFile from '@/utils/exportFile'
+import { exportFile } from '@/mixins/exportFile'
 
 export default {
+  mixins: [ exportFile ],
+
   data () {
     return {
       fields: {
@@ -64,6 +66,12 @@ export default {
     }
   },
 
+  computed: {
+    currentUser () {
+      return this.$store.state.currentUser
+    }
+  },
+
   methods: {
     /**
      * Download the data.
@@ -74,6 +82,14 @@ export default {
      */
     download (type, format) {
       const sn = this.project.short_name
+      if (this.$ga) {
+        this.$ga.event({
+          eventCategory: 'Downloads',
+          eventAction: `${type}_${format}`,
+          eventLabel: this.project.name,
+          eventValue: 1
+        })
+      }
       this.$axios.$get(`/project/${sn}/tasks/export`, {
         responseType: 'arraybuffer',
         params: {
@@ -81,7 +97,7 @@ export default {
           format: format
         }
       }).then(data => {
-        exportFile(data, `${this.project.short_name}_${type}`, 'zip')
+        this.exportFile(data, `${this.project.short_name}_${type}`, 'zip')
       }).catch(err => {
         this.$nuxt.error(err)
       })
diff --git a/components/modals/ProjectStats.vue b/components/modals/ProjectStats.vue
index d810a273..eec24202 100644
--- a/components/modals/ProjectStats.vue
+++ b/components/modals/ProjectStats.vue
@@ -97,6 +97,14 @@ export default {
       }).then(data => {
         this.userStats = data.userStats || {}
         this.projectStats = data.projectStats || {}
+        if (this.$ga) {
+          this.$ga.event({
+            eventCategory: 'Statistics',
+            eventAction: 'view',
+            eventLabel: this.project.name,
+            eventValue: 1
+          })
+        }
       }).catch(err => {
         this.$nuxt.error(err)
       })
@@ -104,6 +112,10 @@ export default {
   },
 
   computed: {
+    currentUser () {
+      return this.$store.state.currentUser
+    },
+
     dailyContributionsData () {
       return {
         labels: this.projectStats.dayStats[0].values.map(value => {
@@ -114,6 +126,7 @@ export default {
         ]
       }
     },
+
     hourlyContributionsData () {
       let d = {
         labels: this.projectStats.hourStats[0].values.map(value => value[0]),
@@ -123,6 +136,7 @@ export default {
       }
       return d
     },
+
     topUsersData () {
       return {
         labels: this.userStats.authenticated.top5.map(stat => stat.name),
@@ -131,6 +145,7 @@ export default {
         ]
       }
     },
+
     proportionAuthData () {
       return {
         labels: [
@@ -149,14 +164,17 @@ export default {
         ]
       }
     },
+
     dailyContributionsHeader () {
       const taskrun = pluralize(this.collection.info.terminology.taskrun)
       return `Daily ${taskrun} over the past 2 weeks`
     },
+
     hourlyContributionsHeader () {
       const taskrun = pluralize(this.collection.info.terminology.taskrun)
       return `Hourly ${taskrun} over the past 2 weeks`
     },
+
     proportionAuthHeader () {
       return 'Proportion of authenticated users over the past 2 weeks'
     }
diff --git a/components/navbars/Collection.vue b/components/navbars/Collection.vue
index 2943e452..687c9ce9 100644
--- a/components/navbars/Collection.vue
+++ b/components/navbars/Collection.vue
@@ -61,7 +61,7 @@
               }
             }"
             @click="toggleCollapsibleSidebar">
-            Contribute
+            Take Part
           </b-nav-item>
           <b-nav-item
             exact
@@ -382,7 +382,8 @@ export default {
 @import '~hamburgers/_sass/hamburgers/hamburgers';
 
 #collection-navbar {
-  padding: 0;
+  padding-right: ($grid-gutter-width / 2);
+  padding-left: ($grid-gutter-width / 2);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -393,15 +394,6 @@ export default {
   justify-content: center;
   transition: background-color 200ms;
 
-  .container {
-    margin: 0;
-
-    @include media-breakpoint-down(xs) {
-      margin: 0;
-      flex: 1 1 auto;
-    }
-  }
-
   .navbar-brand {
     font-family: $headings-font-family;
     font-weight: 300;
diff --git a/components/tables/InfiniteLoading.vue b/components/tables/InfiniteLoading.vue
index da6a83a4..f95714e2 100644
--- a/components/tables/InfiniteLoading.vue
+++ b/components/tables/InfiniteLoading.vue
@@ -4,13 +4,13 @@
       hover
       striped
       show-empty
-      :items="items"
+      :items="filteredItems"
       :fields="tableFields"
       :style="tableStyle"
       @sort-changed="onSortChange">
 
-      <template slot="overall_progress" scope="data">
-        {{ data.item.overall_progress }}%
+      <template slot="nTags" scope="data">
+        {{ Object.keys(data.item.info.tags || {}).length }}
       </template>
 
       <template slot="created" scope="data">
@@ -36,7 +36,6 @@
       :domain-object="domainObject"
       v-model="items"
       :search-params="mergedParams"
-      :no-results="null"
       no-more-results="No more results">
     </infinite-load>
 
@@ -68,6 +67,14 @@ export default {
       type: Object,
       default: () => ({})
     },
+    filter: {
+      type: String,
+      default: null
+    },
+    filterBy: {
+      type: String,
+      default: null
+    },
     fields: {
       type: Object,
       default: () => ({})
@@ -101,6 +108,18 @@ export default {
 
     mergedParams () {
       return merge({}, this.searchParams, this.sortParams)
+    },
+
+    filteredItems () {
+      if (!this.filter || !this.filterBy) {
+        return this.items
+      }
+
+      return this.items.filter(item => {
+        const value = this.filter.toUpperCase()
+        const cell = item[this.filterBy]
+        return JSON.stringify(cell).toUpperCase().indexOf(value) > -1
+      })
     }
   },
 
@@ -121,6 +140,14 @@ export default {
     reset () {
       this.$refs.infiniteload.reset()
     }
+  },
+
+  watch: {
+    filteredItems (val) {
+      if (val.length !== this.items.length) {
+        this.$refs.infiniteload.load()
+      }
+    }
   }
 }
 </script>
diff --git a/components/tables/Projects.vue b/components/tables/Projects.vue
new file mode 100644
index 00000000..3551491e
--- /dev/null
+++ b/components/tables/Projects.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="projects-table">
+    <b-table
+      hover
+      striped
+      show-empty
+      responsive
+      :items="filteredItems"
+      :fields="mergedFields"
+      :style="tableStyle"
+      @sort-changed="onSortChange">
+
+      <template slot="name" scope="project">
+        {{ project.item.name }}
+      </template>
+
+      <template slot="overall_progress" scope="project">
+        {{ project.item.overall_progress }}%
+      </template>
+
+      <template slot="created" scope="project">
+        {{ project.item.created | moment('calendar') }}
+      </template>
+
+      <template slot="updated" scope="project">
+        {{ project.item.updated | moment('calendar') }}
+      </template>
+
+      <template slot="last_activity" scope="project">
+        {{ project.item.updated | moment('calendar') }}
+      </template>
+
+      <template slot="actions" scope="project">
+        <slot name="action" :item="project.item"></slot>
+      </template>
+
+    </b-table>
+
+    <infinite-load-projects
+      :collection="collection"
+      :orderby="sortModel.orderby"
+      :desc="sortModel.desc"
+      v-model="items">
+    </infinite-load-projects>
+
+  </div>
+</template>
+
+<script>
+import merge from 'lodash/merge'
+import InfiniteLoadProjects from '@/components/InfiniteLoadProjects'
+
+export default {
+  data () {
+    return {
+      items: [],
+      sortModel: {},
+      defaultFields: {
+        name: {
+          label: 'Name'
+        },
+        overall_progress: {
+          label: 'Progress',
+          class: 'text-center d-none d-md-table-cell',
+          sortable: true
+        },
+        n_tasks: {
+          label: 'Tasks',
+          class: 'text-center d-none d-xl-table-cell',
+          sortable: true
+        },
+        created: {
+          label: 'Created',
+          class: 'text-center d-none d-xl-table-cell',
+          sortable: true
+        }
+      }
+    }
+  },
+
+  components: {
+    InfiniteLoadProjects
+  },
+
+  props: {
+    collection: {
+      type: Object,
+      required: true
+    },
+    fields: {
+      type: Object,
+      default: () => ({})
+    },
+    noBorder: {
+      type: Boolean,
+      default: false
+    },
+    filter: {
+      type: String,
+      default: null
+    },
+    filterBy: {
+      type: String,
+      default: null
+    }
+  },
+
+  computed: {
+    tableStyle () {
+      if (this.noBorder) {
+        return {
+          borderLeft: 'none',
+          borderRight: 'none'
+        }
+      }
+    },
+
+    mergedFields () {
+      const fieldsCopy = merge({}, this.defaultFields, this.fields)
+      if (this.$scopedSlots.action) {
+        fieldsCopy.actions = {
+          label: 'Actions',
+          class: 'text-center'
+        }
+      }
+      return fieldsCopy
+    },
+
+    filteredItems () {
+      if (!this.filter || !this.filterBy) {
+        return this.items
+      }
+
+      return this.items.filter(item => {
+        const value = this.filter.toUpperCase()
+        const cell = item[this.filterBy]
+        return JSON.stringify(cell).toUpperCase().indexOf(value) > -1
+      })
+    }
+  },
+
+  methods: {
+    /**
+     * Handle sort change.
+     */
+    onSortChange (value) {
+      this.sortModel = {
+        orderby: value.sortBy,
+        desc: value.sortDesc
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.projects-table {
+  width: 100%;
+}
+</style>
diff --git a/deploy-key.enc b/deploy-key.enc
deleted file mode 100644
index 9f52705a..00000000
Binary files a/deploy-key.enc and /dev/null differ
diff --git a/docs/admin/collection.md b/docs/admin/collection.md
index 47914a1d..236b5f25 100644
--- a/docs/admin/collection.md
+++ b/docs/admin/collection.md
@@ -35,12 +35,21 @@ are explained below.
 
 ## Content
 
-A set of markdown editors are provided here for modifying content across the
-collection microsite, such as that which appears on the About, Contribute and
-Data pages.
+A set of markdown editors are provided here for modifying content for the About,
+Projects and Data pages. Changes are made in real-time, although you may have
+to refresh your browser to see them.
 
-Changes are made in real-time, although you may have to refresh your browser
-to see them.
+For the About page, navigation items will be generated from each level two
+header, created in Markdown by using the ## tag, for example:
+
+```
+## Contact
+
+This is the contact details section.
+```
+
+These navigation items can be clicked to scroll the users window to the top
+of that section.
 
 For more guidance on the GitHub flavoured markdown used, see this
 [GitHub Guide](https://guides.github.com/features/mastering-markdown/).
@@ -53,14 +62,25 @@ to objective, or task run to contribution.
 
 ## Tags
 
-The tags available for projects within the collection can be specified here.
-For each tag type created a new filter will be automatically added to the
-microsite's Contribute page (among others) so that users can more easily locate
-particular types of project.
+Tags are used to help users more easily location the types of project within a
+collection that they're interested in. For each tag type created via this
+admin section a new filter will be added to the microsite's Contribute
+page (among others).
+
+![Collection Admin - Tags](../assets/admin-collection-tags.png?raw=true)
+
+To add a new tag click the 'Add tag' button at the top of the table. You
+will then be given options to choose a tag type (e.g. Location), a tag name
+(e.g. London) and a colour. Note that the colour applies to all tags of the
+same type.
 
 Once tags are created they can be added to individual projects via the
 [Project Admin](admin/project.md) section.
 
+Tags can be edited or removed by locating them in the table and clicking the
+corresponding buttons. If you want to edit the color for a particular tag type
+just click edit on any tags of that type.
+
 ## Featured
 
 Here you can set the projects that appear on the Featured Projects section of
diff --git a/docs/admin/project.md b/docs/admin/project.md
index b78735be..201a2cae 100644
--- a/docs/admin/project.md
+++ b/docs/admin/project.md
@@ -1 +1,42 @@
-# Project Admin
\ No newline at end of file
+# Project Admin
+
+Users with author or administrator rights can generate and manage projects via
+this interface.
+
+## Open Project
+
+To select the project that you wish to manage locate it in the table and click
+'Open'.
+
+## Settings
+
+The following core settings for a project can be edited here.
+
+| Setting                      | Description
+|------------------------------|-----------------------------------------------------------------------------------|
+| Name                         | The name of the project.                                                          |
+| Short name                   | Used as an identifier and to form URLs and filenames for data downloads.          |
+| Description                  | Appears underneath the title on project cards.                                    |
+| Webhook URL                  | URL to which a payload can be sent every time a task is completed.                |
+| Password                     | An optional password for the project.                                             |
+| Require a password           | Projects that require a password will be hidden from the microsites public pages. |
+| Allow anonymous contributors | When switched off, only authenticated users will be able to contribute.           |
+
+## Tags
+
+Tags are used to help users more easily location the types of project within a
+collection that they're interested in. You can choose one tag for each tag type.
+Contact an administrator if you need a tag that is not available.
+
+After choosing your tags and clicking 'Update' they will be added to project
+cards, tables and sorting options.
+
+## Collection
+
+Choose the collection microsite to which this project belongs by locating it
+in the table and clicking 'Select'
+
+## Thumbnail
+
+Use the file input to select an image to crop and use as a thumbnail on project
+cards.
diff --git a/docs/admin/site.md b/docs/admin/site.md
index d22f53ea..22119cc0 100644
--- a/docs/admin/site.md
+++ b/docs/admin/site.md
@@ -1,3 +1,45 @@
 # Site Admin
 
-The settings are only available to administrators
\ No newline at end of file
+The site admin section comprises a set of pages where administrators can
+monitor activity on the platform, make global announements and manage users.
+
+## Dashboard
+
+The dashboard provides an overview of activity on the platform over the
+preceeding week. The charts include information about:
+
+- New, returning and active users;
+- New tasks and contributions;
+- Projects created, published and updated.
+
+Statistics are updated every 24 hours, but if you want to see the most recent
+data you can click the 'Refresh' button.
+
+## Users
+
+This is the section for managing all user related data. The toolbar at the top
+of the table provides options to search by name, or filter by various other
+attributes such as user permissions.
+
+To view and edit data for a particular user, for instance, to set permissions or
+checking by what method they signed up, locate them in the table and click
+'Open'.
+
+To export all registered users to CSV click the export button.
+
+## Announcements
+
+Here you can deliver global announcements to all users, which will be shown on
+the main navigation bars throughout the platform.
+
+The make an announcment click 'New', write the content (keep it short) and
+enter an internal or external URL. After clicking 'Submit' you will be taken
+to the update page where you can choose a thumbnail and publish the
+announcement.
+
+## Background Tasks
+
+The platform runs a range of sceduled tasks in the background for things such
+as email delivery, updating statistics and building data files. The interface
+provided here can be useful for diagnosing issues if any of these things don't
+appear to be working correctly (check the failed tasks list).
diff --git a/docs/administration.md b/docs/administration.md
deleted file mode 100644
index a90ac336..00000000
--- a/docs/administration.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Administration
-
-Administrators can access these settings via the main navigation bar.
-
-## Featured Projects
-
-Featured projects will appear on the homepage of the microsite that they belong to, as well as in the categories menu on the contribute page.
-
-To feature or un-feature a project locate it by category and click the **Add to featured** or **Remove from featured** buttons.
-
-![Admin - Featured Projects](./assets/admin-featured.png?raw=true)
-
-The page also provides a list of currently featured projects.
-
-## Collections
-
-Categories for all microsites are created via the **New Category** section and edited or deleted via the **Current Categories** section.
-
-### Tags
-
-Tags are used to organise projects and filter projects by multiple criteria. For
-example, a project can be tagged with the location *London* and task type
-*Transcription*, allowing user's to filter all projects that contain
-transcription tasks related to London.
-
-Each tag is given a **name** and a **type**. For each unique type, a
-multi-select sorting field will be made available alongside the lists of
-projects presented to users.
-
-## Users
-
-To manage user administrator rights, search for the user by name and click the **Grant admin rights** or **Revoke admin rights** buttons.
-
-To download all user data click the **Export to CSV** or **Export to JSON** buttons.
-
-![Admin - Manage Users](./assets/admin-users.png?raw=true)
-
-The page also provides a list of current administrators.
-
-## Announcements
-
-This section can make global announcements to all users, for example, when you want to draw attention to a new project.
-
-## Background Tasks
-
-All background tasks currently running on the server can be monitored via this page.
-
-![Admin - Background Tasks](./assets/admin-background-jobs.png?raw=true)
diff --git a/docs/assets/admin-background-jobs.png b/docs/assets/admin-background-jobs.png
deleted file mode 100644
index 13b1a649..00000000
Binary files a/docs/assets/admin-background-jobs.png and /dev/null differ
diff --git a/docs/assets/admin-categories.png b/docs/assets/admin-categories.png
deleted file mode 100644
index 22db96e8..00000000
Binary files a/docs/assets/admin-categories.png and /dev/null differ
diff --git a/docs/assets/admin-collection-featured.jpg b/docs/assets/admin-collection-featured.jpg
deleted file mode 100644
index 86727c75..00000000
Binary files a/docs/assets/admin-collection-featured.jpg and /dev/null differ
diff --git a/docs/assets/admin-collection-tags.png b/docs/assets/admin-collection-tags.png
new file mode 100644
index 00000000..e0f31d17
Binary files /dev/null and b/docs/assets/admin-collection-tags.png differ
diff --git a/docs/assets/admin-edit-categories-success.png b/docs/assets/admin-edit-categories-success.png
deleted file mode 100644
index a655293a..00000000
Binary files a/docs/assets/admin-edit-categories-success.png and /dev/null differ
diff --git a/docs/assets/admin-edit-categories.png b/docs/assets/admin-edit-categories.png
deleted file mode 100644
index 2d904277..00000000
Binary files a/docs/assets/admin-edit-categories.png and /dev/null differ
diff --git a/docs/assets/admin-featured.png b/docs/assets/admin-featured.png
deleted file mode 100644
index 1bfc0efc..00000000
Binary files a/docs/assets/admin-featured.png and /dev/null differ
diff --git a/docs/assets/admin-menu.png b/docs/assets/admin-menu.png
deleted file mode 100644
index 62866372..00000000
Binary files a/docs/assets/admin-menu.png and /dev/null differ
diff --git a/docs/assets/admin-users.png b/docs/assets/admin-users.png
deleted file mode 100644
index 12ea5246..00000000
Binary files a/docs/assets/admin-users.png and /dev/null differ
diff --git a/docs/configuration.md b/docs/configuration.md
index 9f673de5..01aa41c8 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -39,6 +39,11 @@ USER_INFO_PUBLIC_FIELDS = [
   'announcements'
 ]
 
+# Additional project fields
+PROJECT_INFO_PUBLIC_FIELDS = [
+  'tags'
+]
+
 # Avoid 404 errors when accessing URLs with or without a trailing slash
 STRICT_SLASHES = False
 
@@ -64,7 +69,8 @@ cp local.config.js.tmpl local.config.js
 
 ### analytics
 
-Add [Google Analytics](https://analytics.google.com).
+Add [Google Analytics](https://analytics.google.com) to the platform by
+providing your tracking ID.
 
 ```js
 config.analytics = {
@@ -72,6 +78,29 @@ config.analytics = {
 }
 ```
 
+[Event tracking](https://developers.google.com/analytics/devguides/collection/analyticsjs/events)
+will be enabled for the following:
+
+| Category      | Action          | Label           | Description                 |
+|---------------|-----------------|-----------------|-----------------------------|
+| Downloads     | {type}_{format} | Project name    | Data file is downloaded     |
+| Statistics    | view            | Project name    | Project statistics viewed   |
+| Contributions | {project name}  | Collection name | Answer submitted            |
+| Sorts         | {sort value}    | Collection name | Main projects list sorted   |
+| Filters       | {filter value}  | Collection name | Main projects list filtered |
+
+Tracking these events can help to determine the content that your users are most
+interested in. For example, monitoring the filters most used for a microsite can
+help determine the types of project that should be prioritised for release at
+any given time.
+
+[Social interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions)
+will be tracked using the social media 'Share' buttons present on the site.
+However, note that this reports button clicks and does not guarantee that the
+user actually then went ahead and shared the page.
+
+User IDs are used to track all registered and authenticated users.
+
 ### brand
 
 Establish the brand.
diff --git a/docs/development.md b/docs/development.md
index e1b00019..74edd8f8 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -43,6 +43,9 @@ For cookies to be read properly you must access the website at http://127.0.0.1:
 ## Testing
 
 ``` bash
+# build (required for testing with nuxt components)
+npm run build
+
 # run lint
 npm lint
 
diff --git a/layouts/account-dashboard.vue b/layouts/account-dashboard.vue
index 731b88d0..c08dcddc 100644
--- a/layouts/account-dashboard.vue
+++ b/layouts/account-dashboard.vue
@@ -9,6 +9,8 @@ import localConfig from '@/local.config'
 import DashboardBase from '@/layouts/bases/Dashboard'
 
 export default {
+  middleware: 'is-current-or-admin',
+
   components: {
     DashboardBase
   },
diff --git a/layouts/admin-collection-dashboard.vue b/layouts/admin-collection-dashboard.vue
index 2bcc476e..135598d4 100644
--- a/layouts/admin-collection-dashboard.vue
+++ b/layouts/admin-collection-dashboard.vue
@@ -10,6 +10,8 @@ import localConfig from '@/local.config'
 import DashboardBase from '@/layouts/bases/Dashboard'
 
 export default {
+  middleware: 'is-admin',
+
   data () {
     return {
       rootNavItems: [
diff --git a/layouts/admin-project-dashboard.vue b/layouts/admin-project-dashboard.vue
index 110ea0ac..7abac5e0 100644
--- a/layouts/admin-project-dashboard.vue
+++ b/layouts/admin-project-dashboard.vue
@@ -10,6 +10,8 @@ import localConfig from '@/local.config'
 import DashboardBase from '@/layouts/bases/Dashboard'
 
 export default {
+  middleware: 'is-admin',
+
   data () {
     return {
       rootNavItems: [
diff --git a/layouts/admin-site-dashboard.vue b/layouts/admin-site-dashboard.vue
index 4c736df6..b4ef3207 100644
--- a/layouts/admin-site-dashboard.vue
+++ b/layouts/admin-site-dashboard.vue
@@ -9,6 +9,8 @@ import localConfig from '@/local.config'
 import DashboardBase from '@/layouts/bases/Dashboard'
 
 export default {
+  middleware: 'is-admin',
+
   data () {
     return {
       navItems: [
diff --git a/middleware/auth.js b/middleware/auth.js
index 8393aa9b..e9baf0da 100644
--- a/middleware/auth.js
+++ b/middleware/auth.js
@@ -16,6 +16,6 @@ export default function ({ isClient, store, req, app }) {
   }
 
   if (update && app.hasOwnProperty('$axios')) {
-    store.dispatch('UPDATE_CURRENT_USER', app.$axios)
+    store.dispatch('UPDATE_CURRENT_USER', app.$axios, app.$ga)
   }
 }
diff --git a/middleware/is-admin.js b/middleware/is-admin.js
index beef5f0b..8059847f 100644
--- a/middleware/is-admin.js
+++ b/middleware/is-admin.js
@@ -5,10 +5,10 @@ import isEmpty from 'lodash/isEmpty'
  * @param {Object} context
  *   The nuxt context.
  */
-export default function ({ app, store, route, redirect, error }) {
+export default function ({ store, redirect, error }) {
   const currentUser = store.state.currentUser
-  if (isEmpty(currentUser)) {
-    redirect(`/account/signin?next=${route.path}`)
+  if (!currentUser || isEmpty(currentUser)) {
+    redirect(`/account/signin`)
   } else if (!currentUser.admin) {
     error({
       message: 'Forbidden',
diff --git a/middleware/is-current-or-admin.js b/middleware/is-current-or-admin.js
new file mode 100644
index 00000000..e2fdce6e
--- /dev/null
+++ b/middleware/is-current-or-admin.js
@@ -0,0 +1,19 @@
+import isEmpty from 'lodash/isEmpty'
+
+/**
+ * Middleware to check if the current user is admin or the owner of a page.
+ * @param {Object} context
+ *   The nuxt context.
+ */
+export default function ({ store, route, redirect, error }) {
+  const name = route.params.name
+  const currentUser = store.state.currentUser
+  if (isEmpty(currentUser)) {
+    redirect(`/account/signin?next=${route.path}`)
+  } else if (!currentUser.admin && !currentUser.name === name) {
+    error({
+      message: 'Forbidden',
+      statusCode: 403
+    })
+  }
+}
diff --git a/mixins/computeNext.js b/mixins/computeNext.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/mixins/computeTags.js b/mixins/computeTags.js
deleted file mode 100644
index 91bb3641..00000000
--- a/mixins/computeTags.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Method to batch tags for the current collection by type.
- *
- * Adds a key by which the tag can later be identified.
- */
-export const computeTags = {
-  computed: {
-    tags () {
-      const batches = []
-      const tags = this.$store.state.currentCollection.info.tags
-      const uniqueTypes = [...new Set(tags.map(tag => tag.type))]
-      for (let type of uniqueTypes) {
-        batches.push({
-          type: type,
-          key: `tag:${encodeURI(type.replace(/\s+/g, '_').toLowerCase())}`,
-          options: tags.filter(tag => {
-            return tag.type === type
-          })
-        })
-      }
-      return batches
-    }
-  }
-}
diff --git a/mixins/deleteDomainObject.js b/mixins/deleteDomainObject.js
index aebe3638..44e014cd 100644
--- a/mixins/deleteDomainObject.js
+++ b/mixins/deleteDomainObject.js
@@ -15,11 +15,7 @@ export const deleteDomainObject = {
           return this.$axios.$delete(`/api/${type}/${id}`)
         }
       }).then(data => {
-        this.notify({
-          type: 'success',
-          title: 'Success',
-          message: `${capitalize(terminology)} deleted`
-        })
+        this.notifySuccess({ message: `${capitalize(terminology)} deleted` })
         callback()
       }, (dismiss) => {
         this.$swal.close()
diff --git a/mixins/exportFile.js b/mixins/exportFile.js
new file mode 100644
index 00000000..46a30703
--- /dev/null
+++ b/mixins/exportFile.js
@@ -0,0 +1,25 @@
+import FileSaver from 'file-saver'
+
+export const exportFile = {
+  methods: {
+    /**
+     * Export data as a zip file.
+     * @param {data} data
+     *   The data.
+     * @param {String} prefix
+     *   The filename prefix.
+     * @param {String} format
+     *   The data format.
+     */
+    exportFile (data, prefix, format) {
+      const types = {
+        'zip': 'application/zip',
+        'csv': 'text/csv',
+        'json': 'application/json'
+      }
+      const blob = new Blob([data], { type: types[format] })
+      const fn = `${prefix}.${format}`
+      return FileSaver.saveAs(blob, fn)
+    }
+  }
+}
diff --git a/mixins/filterProjects.js b/mixins/filterProjects.js
new file mode 100644
index 00000000..bf7eb745
--- /dev/null
+++ b/mixins/filterProjects.js
@@ -0,0 +1,54 @@
+/**
+ * A mixin for filtering projects.
+ */
+export const filterProjects = {
+  data () {
+    return {
+      showCompleted: true,
+      tagModel: {}
+    }
+  },
+
+  computed: {
+    filteredProjects () {
+      // Check tags
+      let filtered = this.projects.filter(project => {
+        for (let key of Object.keys(this.tagModel)) {
+          project.info.tags = project.info.tags || {}
+          if (project.info.tags[key] !== this.tagModel[key]) {
+            return false
+          }
+        }
+        return true
+      })
+
+      if (this.showCompleted) {
+        return filtered
+      }
+
+      // Filter completed
+      return filtered.filter(project => {
+        return project.overall_progress < 100
+      })
+    }
+  },
+
+  methods: {
+    /**
+     * Set a tag type in the tag model.
+     * @param {String} type
+     *   The type.
+     * @param {String} value
+     *   The value.
+     */
+    updateTagModel (type, value) {
+      this.tagModel[type] = value
+      // Create a new object to trigger changes
+      this.tagModel = Object.assign({}, this.tagModel)
+    },
+
+    clearFilters () {
+      this.tagModel = Object.assign({})
+    }
+  }
+}
diff --git a/mixins/licenses.js b/mixins/licenses.js
new file mode 100644
index 00000000..909196d7
--- /dev/null
+++ b/mixins/licenses.js
@@ -0,0 +1,43 @@
+/**
+ * A mixin for the available licenses for data reuse, and their URLs.
+ */
+export const licenses = {
+  data () {
+    const baseUrl = 'https://creativecommons.org/licenses'
+    const version = '4.0'
+    return {
+      dataLicenses: {
+        CC0: {
+          id: 'CC0',
+          name: 'CC0',
+          url: 'https://creativecommons.org/publicdomain/zero/1.0/'
+        },
+        CC_BY: {
+          name: 'CC0',
+          url: `${baseUrl}/by/${version}/`
+        },
+        CC_BY_SA: {
+          name: 'CC BY-SA',
+          url: `${baseUrl}/by-sa/${version}/`
+        },
+        CC_BY_ND: {
+          name: 'CC BY-ND',
+          url: `${baseUrl}/by-nd/${version}/`
+        },
+        CC_BY_NC: {
+          name: 'CC BY-NC',
+          url: `${baseUrl}/by-nc/${version}/`
+        },
+
+        CC_BY_NC_SA: {
+          name: 'CC BY-NC-SA',
+          url: `${baseUrl}/by-nc-sa/${version}/`
+        },
+        CC_BY_NC_ND: {
+          name: 'CC_BY-NC-ND',
+          url: `${baseUrl}/by-nc-nd/${version}/`
+        }
+      }
+    }
+  }
+}
diff --git a/mixins/loadCollectionFeatured.js b/mixins/loadCollectionFeatured.js
deleted file mode 100644
index c7836891..00000000
--- a/mixins/loadCollectionFeatured.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import merge from 'lodash/merge'
-
-export const loadCollectionFeatured = {
-  data () {
-    return {
-      featured: []
-    }
-  },
-
-  methods: {
-    loadCollectionFeatured () {
-      let projects = []
-      this.$axios.$get('/api/project', {
-        params: {
-          category_id: this.collection.id,
-          featured: true,
-          all: 1
-        }
-      }).then(data => {
-        projects = data
-        return this.$axios.$get('/api/projectstats', {
-          params: {
-            project_id: data.map(project => project.id).toString()
-          }
-        })
-      }).then(data => {
-        this.featured = projects.map((project, idx) => {
-          return merge(data[idx], project)
-        })
-      }).catch(err => {
-        this.$nuxt.error(err)
-      })
-    }
-  }
-}
diff --git a/mixins/notifications.js b/mixins/notifications.js
index 6142617d..de8a9a31 100644
--- a/mixins/notifications.js
+++ b/mixins/notifications.js
@@ -5,8 +5,29 @@ export const notifications = {
     notify: {},
     notifySuccess: {
       title: 'Success',
+      type: 'success'
+    },
+    notifyWarn: {
+      title: 'Warning',
+      type: 'warn'
+    },
+    notifyInfo: {
+      title: 'Info',
+      type: 'info'
+    },
+    notifyError: {
+      title: 'Error',
+      type: 'error'
+    },
+    notifyInvalidForm: {
+      title: 'Invalid form data',
+      type: 'warn',
+      message: 'Please correct the errors'
+    },
+    notifyAnswerSaved: {
+      title: 'Answer saved',
       type: 'success',
-      message: ''
+      message: 'Thank you for your contribution!'
     }
   },
 
@@ -18,11 +39,19 @@ export const notifications = {
      */
     flash (data) {
       if (data !== undefined && 'flash' in data) {
-        this.notify({
-          title: capitalize(data.status),
-          type: data.status,
-          message: data.flash
-        })
+        if (data.status === 'success') {
+          this.notifySuccess({ message: data.flash })
+        } else if (data.status === 'warning') {
+          this.notifyWarn({ message: data.flash })
+        } else if (data.status === 'info') {
+          this.notifyInfo({ message: data.flash })
+        } else {
+          this.notify({
+            title: capitalize(data.status),
+            type: data.status,
+            message: data.flash
+          })
+        }
       }
     }
   }
diff --git a/nuxt.config.js b/nuxt.config.js
index 523968e3..62cc04f1 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -19,7 +19,7 @@ const config = {
   css: [
     '~/assets/style/main.scss',
     'cookieconsent/build/cookieconsent.min.css',
-    'izitoast/dist/css/iziToast.min.css',
+    'izitoast/dist/css/iziToast.css',
     'vue-multiselect/dist/vue-multiselect.min.css',
     'simplemde/dist/simplemde.min.css',
     'libcrowds-viewer/dist/scss/main.scss'
diff --git a/pages/account/newsletter.vue b/pages/account/newsletter.vue
index e368445b..dd5fdbba 100644
--- a/pages/account/newsletter.vue
+++ b/pages/account/newsletter.vue
@@ -55,16 +55,25 @@ export default {
      *   True to subscribe, false otherwise.
      */
     subscribe (subscribe) {
-      const next = this.$route.query.next || '/'
-      this.$axios.$get(`/account/newsletter`, {
-        params: {
-          subscribe: subscribe ? 'True' : 'False'
-        }
-      }).then(data => {
+      // We can't guarantee the format of the next param returned after OAuth
+      // so add an additional check that it is at least just a pathname.
+      const parser = document.createElement('a')
+      parser.href = this.$route.query.next || '/'
+      const next = parser.pathname
+
+      if (subscribe) {
+        this.$axios.$get(`/account/newsletter`, {
+          params: {
+            subscribe: 'True'
+          }
+        }).then(data => {
+          this.$router.push({ path: next })
+        }).catch(err => {
+          this.$nuxt.error(err)
+        })
+      } else {
         this.$router.push({ path: next })
-      }).catch(err => {
-        this.$nuxt.error(err)
-      })
+      }
     }
   }
 }
diff --git a/pages/account/signin.vue b/pages/account/signin.vue
index f68f570b..6d80e0ae 100644
--- a/pages/account/signin.vue
+++ b/pages/account/signin.vue
@@ -9,7 +9,7 @@
 
     <div
       slot="bottom"
-      v-if="auth.facebook || auth.twitter || auth.google">
+      v-if="auth && auth.facebook || auth.twitter || auth.google">
       <p class="lead text-center">
         or sign in with
       </p>
@@ -107,9 +107,10 @@ export default {
 
   methods: {
     onSuccess () {
-      this.$store.dispatch('UPDATE_CURRENT_USER', this.$axios).then(data => {
-        this.$router.push({ path: this.next })
-      })
+      this.$store.dispatch('UPDATE_CURRENT_USER', this.$axios, this.$ga)
+        .then(data => {
+          this.$router.push({ path: this.next })
+        })
     }
   }
 }
diff --git a/pages/admin/collection/_short_name/content.vue b/pages/admin/collection/_short_name/content.vue
index abf4c295..70a8b9d9 100644
--- a/pages/admin/collection/_short_name/content.vue
+++ b/pages/admin/collection/_short_name/content.vue
@@ -1,13 +1,9 @@
 <template>
-  <b-card id="admin-collection-content" no-body>
-    <div slot="header" class="mb-0">
-      <h6 class="mb-0">{{ title }}</h6>
-      <p class="text-muted mb-0">
-        <small>
-          Configure the collection microsite page content using Markdown.
-        </small>
-      </p>
-    </div>
+  <card-base
+    id="admin-collection-content"
+    :title="title"
+    help="Configure the microsite page content using Markdown">
+
     <pybossa-form
       no-border
       submit-text="Update"
@@ -24,10 +20,10 @@
       </div>
       <div slot="bottom" class="mt-1">
         <label class="ml-0">
-          Contribute page
+          Projects page
         </label>
         <markdown-editor
-          v-model="collection.info.content.contribute"
+          v-model="collection.info.content.projects"
           :configs="markdownConfig">
         </markdown-editor>
       </div>
@@ -41,7 +37,8 @@
         </markdown-editor>
       </div>
     </pybossa-form>
-  </b-card>
+
+  </card-base>
 </template>
 
 <script>
@@ -49,14 +46,13 @@ import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { notifications } from '@/mixins/notifications'
 import pick from 'lodash/pick'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-collection-dashboard',
 
   mixins: [ fetchCollectionByName, notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Content',
@@ -73,7 +69,8 @@ export default {
   },
 
   components: {
-    PybossaForm
+    PybossaForm,
+    CardBase
   },
 
   computed: {
@@ -101,11 +98,7 @@ export default {
      * Handle form success.
      */
     onSuccess () {
-      this.notify({
-        type: 'success',
-        title: 'Success',
-        message: 'Collection updated'
-      })
+      this.notifySuccess({ message: 'Content updated' })
     }
   }
 }
diff --git a/pages/admin/collection/_short_name/delete.vue b/pages/admin/collection/_short_name/delete.vue
index 5c8986ef..57165b93 100644
--- a/pages/admin/collection/_short_name/delete.vue
+++ b/pages/admin/collection/_short_name/delete.vue
@@ -1,21 +1,12 @@
 <template>
-  <b-card no-body>
-    <div slot="header" class="mb-0">
-      <h6 class="mb-0">{{ title }}</h6>
-      <p class="text-muted mb-0">
-        <small>
-          Delete the microsite.
-        </small>
-      </p>
-    </div>
-
+  <card-base :title="title" help="Delete the microsite">
     <b-card-body>
       <b-alert show variant="danger">
         <strong>Warning:</strong> Deleting a collection microsite is final,
         there is no undo!
       </b-alert>
     </b-card-body>
-    <template slot="footer">
+    <b-card-footer>
       <div class="d-flex">
         <b-btn
           variant="danger"
@@ -24,21 +15,20 @@
           Delete
         </b-btn>
       </div>
-    </template>
-  </b-card>
+    </b-card-footer>
+  </card-base>
 </template>
 
 <script>
 import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { deleteDomainObject } from '@/mixins/deleteDomainObject'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-collection-dashboard',
 
   mixins: [ fetchCollectionByName, deleteDomainObject ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Delete'
@@ -57,6 +47,10 @@ export default {
     }
   },
 
+  components: {
+    CardBase
+  },
+
   methods: {
     /**
      * Delete the collection.
diff --git a/pages/admin/collection/_short_name/featured.vue b/pages/admin/collection/_short_name/featured.vue
index dd2b5b5d..8ce59f0a 100644
--- a/pages/admin/collection/_short_name/featured.vue
+++ b/pages/admin/collection/_short_name/featured.vue
@@ -1,20 +1,21 @@
 <template>
-  <b-card no-body>
+  <card-base
+    :title="title"
+    help="Choose the projects that appear on the microsite's homepage">
 
-    <div slot="header">
-      <h6 class="mb-1">{{ title }}</h6>
-      <p class="text-muted mb-0">
-        <small>
-          Choose the projects that appear on the collection microsite homepage.
-        </small>
-      </p>
-    </div>
+    <b-form-input
+      slot="controls"
+      v-model="filter"
+      class="search-control"
+      size="sm"
+      :placeholder="`Type to search by ${filterBy}`">
+    </b-form-input>
 
-    <infinite-loading-table
-      domain-object="project"
-      :fields="tableFields"
-      :search-params="searchParams"
-      no-border>
+    <projects-table
+      :filter="filter"
+      :filter-by="filterBy"
+      no-border
+      :collection="collection">
       <template slot="action" scope="project">
         <b-btn
           :variant="project.item.featured ? 'warning' : 'success'"
@@ -24,45 +25,27 @@
           {{ getButtonText(project.item.featured) }}
         </b-btn>
       </template>
-    </infinite-loading-table>
+    </projects-table>
 
-  </b-card>
+  </card-base>
 </template>
 
 <script>
 import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { notifications } from '@/mixins/notifications'
-import InfiniteLoadingTable from '@/components/tables/InfiniteLoading'
+import ProjectsTable from '@/components/tables/Projects'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-collection-dashboard',
 
   mixins: [ fetchCollectionByName, notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Featured',
-      tableFields: {
-        name: {
-          label: 'Name'
-        },
-        overall_progress: {
-          label: 'Progress',
-          class: 'text-center d-none d-xl-table-cell',
-          sortable: true
-        },
-        created: {
-          label: 'Created',
-          class: 'text-center d-none d-xl-table-cell',
-          sortable: true
-        },
-        actions: {
-          label: 'Actions',
-          class: 'text-center'
-        }
-      }
+      filter: null,
+      filterBy: 'name'
     }
   },
 
@@ -73,7 +56,8 @@ export default {
   },
 
   components: {
-    InfiniteLoadingTable
+    ProjectsTable,
+    CardBase
   },
 
   methods: {
@@ -96,9 +80,7 @@ export default {
         featured: !project.featured
       }).then(data => {
         project.featured = !project.featured
-        this.notify({
-          type: 'success',
-          title: 'Success',
+        this.notifySuccess({
           message: project.featured
             ? 'Project added to featured'
             : 'Project removed from featured'
@@ -112,12 +94,6 @@ export default {
   computed: {
     collection () {
       return this.$store.state.currentCollection
-    },
-
-    searchParams () {
-      return {
-        category_id: this.collection.id
-      }
     }
   }
 }
diff --git a/pages/admin/collection/_short_name/settings.vue b/pages/admin/collection/_short_name/settings.vue
index f98dfc11..3a5cb2be 100644
--- a/pages/admin/collection/_short_name/settings.vue
+++ b/pages/admin/collection/_short_name/settings.vue
@@ -1,51 +1,44 @@
 <template>
-  <b-card no-body>
-    <div
-      slot="header"
-      class="mb-0 d-flex align-items-center justify-content-between">
-      <span>
-        <h6 class="mb-0">{{ title }}</h6>
-        <p class="text-muted mb-0">
-          <small>
-            Configure the collection microsite.
-          </small>
-        </p>
-      </span>
-      <div class="d-flex align-items-center">
-        <label class="mr-1 mb-0 toggle-label">
-          <strong>Published</strong>
-        </label>
-        <toggle-button
-          :value="collection.info.published"
-          :sync="true"
-          :labels="true"
-          class="mb-0"
-          @change="togglePublished">
-        </toggle-button>
-      </div>
+  <card-base
+    :title="title"
+    help="Configure the core settings for the microsite">
+
+    <div slot="controls" class="d-flex align-items-center float-right">
+      <label class="mr-1 mb-0 toggle-label">
+        <strong>Published</strong>
+      </label>
+      <toggle-button
+        :value="collection.info.published"
+        :sync="true"
+        :labels="true"
+        class="mb-0"
+        @change="togglePublished">
+      </toggle-button>
     </div>
+
     <pybossa-form
       no-border
       submit-text="Update"
       :form="form"
       @success="onSuccess">
     </pybossa-form>
-  </b-card>
+
+  </card-base>
 </template>
 
 <script>
 import VueFormGenerator from 'vue-form-generator'
 import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { notifications } from '@/mixins/notifications'
+import { licenses } from '@/mixins/licenses'
 import pick from 'lodash/pick'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-collection-dashboard',
 
-  mixins: [ fetchCollectionByName, notifications ],
-
-  middleware: 'is-admin',
+  mixins: [ fetchCollectionByName, notifications, licenses ],
 
   data () {
     return {
@@ -60,7 +53,8 @@ export default {
   },
 
   components: {
-    PybossaForm
+    PybossaForm,
+    CardBase
   },
 
   computed: {
@@ -156,36 +150,9 @@ export default {
               model: 'info.license',
               label: 'Data Reuse License',
               type: 'select',
-              values: [
-                {
-                  id: 'CC0',
-                  name: 'CC0'
-                },
-                {
-                  id: 'CC_BY',
-                  name: 'CC BY'
-                },
-                {
-                  id: 'CC_BY-SA',
-                  name: 'CC BY-SA'
-                },
-                {
-                  id: 'CC_BY-ND',
-                  name: 'CC BY-ND'
-                },
-                {
-                  id: 'CC_BY-NC',
-                  name: 'CC BY-NC'
-                },
-                {
-                  id: 'CC_BY-NC-SA',
-                  name: 'CC BY-NC-SA'
-                },
-                {
-                  id: 'CC_BY-NC-ND',
-                  name: 'CC_BY-NC-ND'
-                }
-              ],
+              values: Object.keys(this.dataLicenses).map(key => {
+                return { id: key, name: this.dataLicenses[key].name }
+              }),
               default: 'CC0'
             }
           ]
@@ -199,11 +166,7 @@ export default {
      * Handle form success.
      */
     onSuccess () {
-      this.notify({
-        type: 'success',
-        title: 'Success',
-        message: 'Collection updated'
-      })
+      this.notifySuccess({ message: 'Collection updated' })
     },
 
     /**
@@ -217,9 +180,7 @@ export default {
         info: this.collection.info
       }).then(data => {
         this.$store.dispatch('UPDATE_PUBLISHED_COLLECTIONS', this.$axios)
-        this.notify({
-          type: 'success',
-          title: 'Success',
+        this.notifySuccess({
           message: this.collection.info.published
             ? 'Collection microsite published'
             : 'Collection microsite unpublished'
diff --git a/pages/admin/collection/_short_name/tags.vue b/pages/admin/collection/_short_name/tags.vue
index e75698e1..d7f841a7 100644
--- a/pages/admin/collection/_short_name/tags.vue
+++ b/pages/admin/collection/_short_name/tags.vue
@@ -1,57 +1,79 @@
 <template>
-  <b-card no-body>
-    <div
-      slot="header"
-      class="mb-0 d-flex align-items-center justify-content-between">
-      <span>
-        <h6 class="mb-0">{{ title }}</h6>
-        <p class="text-muted mb-0">
-          <small>
-            Configure the collection microsite.
-          </small>
-        </p>
-      </span>
+  <div>
+    <card-base
+      :title="title"
+      help="Manage the available tags for the microsite">
       <b-btn
+        slot="controls"
+        class="float-right"
         size="sm"
         variant="success"
-        @click="addTag">
+        v-b-modal="addTagModalId">
         Add a tag
       </b-btn>
-    </div>
-    <b-table
-      responsive
-      striped
-      hover
-      show-empty
-      :items="collection.info.tags"
-      :fields="tableFields">
-      <template slot="actions" scope="tag">
-        <b-btn
-          variant="warning"
-          size="sm"
-          @click="removeTag(tag.item)">
-          Remove
-        </b-btn>
-      </template>
-    </b-table>
-  </b-card>
+
+      <b-table
+        ref="table"
+        responsive
+        striped
+        hover
+        show-empty
+        :items="tableItems"
+        :fields="tableFields">
+        <template slot="color" scope="tag">
+          <div
+            class="d-flex flex-row align-items-center justify-content-center">
+            <b-badge
+              class="mr-1"
+              :style="`background-color: ${tag.item.color}; width: 1rem;`">
+              &nbsp;
+            </b-badge>
+            {{ tag.item.color }}
+          </div>
+        </template>
+        <template slot="actions" scope="tag">
+          <b-btn
+            variant="success"
+            class="mr-1"
+            size="sm"
+            @click="editTag(tag.item)">
+            Edit
+          </b-btn>
+          <b-btn
+            variant="warning"
+            size="sm"
+            @click="removeTag(tag.item)">
+            Remove
+          </b-btn>
+        </template>
+      </b-table>
+    </card-base>
+
+    <add-tag-modal
+      ref="addTagModal"
+      :collection="collection"
+      :modal-id="addTagModalId"
+      @update="handleTagUpdate">
+    </add-tag-modal>
+
+  </div>
 </template>
 
 <script>
 import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { notifications } from '@/mixins/notifications'
+import AddTagModal from '@/components/modals/AddTag'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-collection-dashboard',
 
   mixins: [ fetchCollectionByName, notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Tags',
-      newTag: null,
+      addTagModalId: 'add-tag-modal',
       tableFields: {
         type: {
           label: 'Type',
@@ -61,6 +83,10 @@ export default {
           label: 'Name',
           sortable: true
         },
+        color: {
+          label: 'Colour',
+          class: 'text-center d-none d-lg-block'
+        },
         actions: {
           label: 'Actions',
           class: 'text-center'
@@ -69,6 +95,11 @@ export default {
     }
   },
 
+  components: {
+    AddTagModal,
+    CardBase
+  },
+
   head () {
     return {
       title: this.title
@@ -78,98 +109,21 @@ export default {
   computed: {
     collection () {
       return this.$store.state.currentCollection
-    }
-  },
-
-  methods: {
-    /**
-     * Handle form success.
-     */
-    onSuccess () {
-      this.notify({
-        type: 'success',
-        title: 'Success',
-        message: 'Collection updated'
-      })
     },
 
-    /**
-     * Show the add tag alert.
-     */
-    addTag () {
-      let type = ''
-      let name = ''
-
-      this.$swal.setDefaults({
-        input: 'text',
-        showCancelButton: true,
-        progressSteps: ['1', '2']
-      })
-
-      const steps = [
-        {
-          title: 'Enter a type',
-          text: '(e.g. Location)',
-          confirmButtonText: 'Next',
-          inputPlaceholder: 'Short types work best',
-          inputValidator: (value) => {
-            type = value
-            return new Promise((resolve, reject) => {
-              if (value) {
-                resolve()
-              } else {
-                reject(new Error('The tag type is required'))
-              }
-            })
-          }
-        },
-        {
-          title: 'Enter a name',
-          text: '(e.g. London)',
-          showLoaderOnConfirm: true,
-          inputPlaceholder: 'Short names work best',
-          inputValidator: (value) => {
-            name = value
-            return new Promise((resolve, reject) => {
-              const matches = this.collection.info.tags.filter(t => {
-                return t.type === type && t.name === name
-              })
-              if (matches.length > 0) {
-                const msg = 'A tag with that name and type already exists'
-                reject(new Error(msg))
-              } else if (!value) {
-                reject(new Error('The tag type is required'))
-              } else {
-                resolve()
-              }
-            })
-          },
-          preConfirm: (value) => {
-            this.collection.info.tags.push({
-              type: type,
-              name: name
-            })
-            return this.$axios.$put(`/api/category/${this.collection.id}`, {
-              info: this.collection.info
-            })
-          }
+    tableItems () {
+      const items = []
+      for (let type of Object.keys(this.collection.info.tags)) {
+        const tagType = this.collection.info.tags[type]
+        for (let name of tagType.options) {
+          items.push({ type: type, name: name, color: tagType.color })
         }
-      ]
-
-      this.$swal.queue(steps).then(result => {
-        this.$swal.resetDefaults()
-      }).then(data => {
-        this.notify({
-          type: 'success',
-          title: 'Success',
-          message: 'Tag added'
-        })
-      }, (dismiss) => {
-        this.$swal.resetDefaults()
-        this.$swal.close()
-      })
-    },
+      }
+      return items
+    }
+  },
 
+  methods: {
     /**
      * Show the remove tag alert.
      */
@@ -181,22 +135,46 @@ export default {
         showCancelButton: true,
         showLoaderOnConfirm: true,
         preConfirm: () => {
-          this.collection.info.tags = this.collection.info.tags.filter(t => {
-            return t.type !== tag.type || t.name !== tag.name
+          let infoClone = Object.assign({}, this.collection.info)
+          let newOptions = infoClone.tags[tag.type].options
+          newOptions = newOptions.filter(name => {
+            return tag.name !== name
           })
+          if (!newOptions.length) {
+            delete infoClone.tags[tag.type]
+          } else {
+            infoClone.tags[tag.type].options = newOptions
+          }
           return this.$axios.$put(`/api/category/${this.collection.id}`, {
-            info: this.collection.info
+            info: infoClone
+          }).then(data => {
+            this.collection.info = infoClone
           })
         }
       }).then(data => {
-        this.notify({
-          type: 'success',
-          title: 'Success',
-          message: `Tag deleted`
-        })
+        this.notifySuccess({ message: `Tag deleted` })
       }, (dismiss) => {
         this.$swal.close()
       })
+    },
+
+    /**
+     * Feed the tag modal with data from the selected tag.
+     * @param {Object} tag
+     *   The tag
+     */
+    editTag (tag) {
+      this.$refs.addTagModal.tag = tag
+      this.$refs.addTagModal.show()
+    },
+
+    /**
+     * Handle a tag being updated.
+     * @param {Object} newTag
+     *   The new tag.
+     */
+    handleTagUpdate (newTag) {
+      this.$refs.table.refresh()
     }
   }
 }
diff --git a/pages/admin/collection/_short_name/terminology.vue b/pages/admin/collection/_short_name/terminology.vue
index 38dd8796..4e39950c 100644
--- a/pages/admin/collection/_short_name/terminology.vue
+++ b/pages/admin/collection/_short_name/terminology.vue
@@ -1,20 +1,14 @@
 <template>
-  <b-card no-body>
-    <div slot="header" class="mb-0">
-      <h6 class="mb-0">{{ title }}</h6>
-      <p class="text-muted mb-0">
-        <small>
-          Configure the terminology used within the collection microsite.
-        </small>
-      </p>
-    </div>
+  <card-base
+    :title="title"
+    help="Set the terminology used throughout the microsite">
     <pybossa-form
       no-border
       submit-text="Update"
       :form="form"
       @success="onSuccess">
     </pybossa-form>
-  </b-card>
+  </card-base>
 </template>
 
 <script>
@@ -22,14 +16,13 @@ import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { notifications } from '@/mixins/notifications'
 import pick from 'lodash/pick'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-collection-dashboard',
 
   mixins: [ fetchCollectionByName, notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Terminology'
@@ -43,7 +36,8 @@ export default {
   },
 
   components: {
-    PybossaForm
+    PybossaForm,
+    CardBase
   },
 
   computed: {
@@ -90,11 +84,7 @@ export default {
      * Handle form success.
      */
     onSuccess () {
-      this.notify({
-        type: 'success',
-        title: 'Success',
-        message: 'Collection updated'
-      })
+      this.notifySuccess({ message: 'Collection updated' })
     }
   }
 }
diff --git a/pages/admin/collection/index.vue b/pages/admin/collection/index.vue
index 985e6e5c..49831d2b 100644
--- a/pages/admin/collection/index.vue
+++ b/pages/admin/collection/index.vue
@@ -1,112 +1,65 @@
 <template>
-  <b-card no-body>
-    <div
-      slot="header"
-      class="mb-0 d-flex align-items-center justify-content-between">
-      <span>
-        <h6 class="mb-0">{{ title }}</h6>
-        <p class="text-muted mb-0">
-          <small>
-            Manage the collection microsites.
-          </small>
-        </p>
-      </span>
-      <b-btn
-        variant="success"
-        size="sm"
-        :to="{
-          name: 'admin-collection-new'
-        }">
-        New
-      </b-btn>
-    </div>
+  <card-base :title="title" help="Manage the collection microsites">
+    <b-btn
+      slot="controls"
+      variant="success"
+      class="float-right"
+      size="sm"
+      :to="{
+        name: 'admin-collection-new'
+      }">
+      New
+    </b-btn>
 
-    <b-card-body class="p-0">
-      <b-table
-        hover
-        show-empty
-        :items="collections"
-        :fields="table.fields">
+    <infinite-loading-table
+      ref="table"
+      :fields="tableFields"
+      no-border
+      domain-object="category">
+      <template slot="action" scope="category">
+        <b-btn
+          variant="success"
+          size="sm"
+          block
+          exact
+          :to="{
+            name: 'admin-collection-short_name-settings',
+            params: {
+              short_name: category.item.short_name
+            }
+          }">
+          Open
+        </b-btn>
+      </template>
+    </infinite-loading-table>
 
-        <template slot="n_projects" scope="collection">
-          {{ nProjects[collection.item.short_name] }}
-        </template>
-
-        <template slot="created" scope="collection">
-          {{ collection.item.created | moment('calendar') }}
-        </template>
-
-        <template slot="action" scope="collection">
-          <b-btn
-            variant="success"
-            size="sm"
-            block
-            exact
-            :to="{
-              name: 'admin-collection-short_name-settings',
-              params: {
-                short_name: collection.item.short_name
-              }
-            }">
-            Open
-          </b-btn>
-        </template>
-
-      </b-table>
-    </b-card-body>
-  </b-card>
+  </card-base>
 </template>
 
 <script>
-import { deleteDomainObject } from '@/mixins/deleteDomainObject'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
+import InfiniteLoadingTable from '@/components/tables/InfiniteLoading'
 
 export default {
   layout: 'admin-collection-dashboard',
 
-  mixins: [ deleteDomainObject ],
-
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Open Collection',
-      table: {
-        fields: {
-          name: {
-            label: 'Name'
-          },
-          n_projects: {
-            label: 'Projects',
-            class: 'text-center d-none d-md-table-cell',
-            sortable: true
-          },
-          created: {
-            label: 'Created',
-            class: 'text-center d-none d-md-table-cell',
-            sortable: true
-          },
-          action: {
-            label: 'Action',
-            class: 'text-center'
-          }
+      tableFields: {
+        name: {
+          label: 'Name'
+        },
+        created: {
+          label: 'Created',
+          class: 'text-center d-none d-md-table-cell',
+          sortable: true
         }
       }
     }
   },
 
-  async asyncData ({ app, error }) {
-    const endpoint = `/admin/categories`
-    return app.$axios.$get(endpoint).then(data => {
-      return {
-        collections: data.categories,
-        nProjects: data.n_projects_per_category
-      }
-    }).catch(err => {
-      error(err)
-    })
-  },
-
   head () {
     return {
       title: this.title
@@ -114,22 +67,9 @@ export default {
   },
 
   components: {
-    PybossaForm
-  },
-
-  methods: {
-    /**
-     * Delete a collection.
-     * @param {Number|String} id
-     *   The collection ID.
-     */
-    deleteCollection (id) {
-      this.deleteDomainObject('category', id, () => {
-        this.collections = this.collections.filter(collection => {
-          return collection.id !== id
-        })
-      })
-    }
+    PybossaForm,
+    CardBase,
+    InfiniteLoadingTable
   },
 
   beforeMount () {
diff --git a/pages/admin/collection/new.vue b/pages/admin/collection/new.vue
index 6b43ed57..127c4568 100644
--- a/pages/admin/collection/new.vue
+++ b/pages/admin/collection/new.vue
@@ -1,33 +1,24 @@
 <template>
-  <b-card no-body>
-    <div slot="header" class="mb-0">
-      <h6 class="mb-0">{{ title }}</h6>
-      <p class="text-muted mb-0">
-        <small>
-          Create a new collection microsite.
-        </small>
-      </p>
-    </div>
+  <card-base :title="title" help="Create a new collection microsite">
     <pybossa-form
       :form="form"
       no-border
       submit-text="Create"
       @success="onSuccess">
     </pybossa-form>
-  </b-card>
+  </card-base>
 </template>
 
 <script>
 import { notifications } from '@/mixins/notifications'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-collection-dashboard',
 
   mixins: [ notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'New Collection'
@@ -77,7 +68,8 @@ export default {
   },
 
   components: {
-    PybossaForm
+    PybossaForm,
+    CardBase
   },
 
   methods: {
diff --git a/pages/admin/project/_short_name/collection.vue b/pages/admin/project/_short_name/collection.vue
index e1b38672..d281a3ce 100644
--- a/pages/admin/project/_short_name/collection.vue
+++ b/pages/admin/project/_short_name/collection.vue
@@ -1,19 +1,22 @@
 <template>
-  <b-card
-    no-body>
-    <div slot="header" class="mb-0">
-      <h6 class="mb-0">{{ title }}</h6>
-      <p class="text-muted mb-0">
-        <small>
-          Choose the collection microsite that this project should appear on.
-        </small>
-      </p>
-    </div>
+  <card-base
+    :title="title"
+    help="Choose the microsite that this project should appear on">
+
+    <b-form-input
+      slot="controls"
+      v-model="filter"
+      class="search-control"
+      size="sm"
+      :placeholder="`Type to search by ${filterBy}`">
+    </b-form-input>
 
     <infinite-loading-table
       ref="table"
       :fields="tableFields"
       no-border
+      :filter="filter"
+      :filter-by="filterBy"
       domain-object="category">
       <template slot="action" scope="collection">
         <b-btn
@@ -26,21 +29,20 @@
         </b-btn>
       </template>
     </infinite-loading-table>
-  </b-card>
+  </card-base>
 </template>
 
 <script>
 import { notifications } from '@/mixins/notifications'
 import { fetchProjectByName } from '@/mixins/fetchProjectByName'
 import InfiniteLoadingTable from '@/components/tables/InfiniteLoading'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-project-dashboard',
 
   mixins: [ fetchProjectByName, notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Set Collection',
@@ -56,7 +58,9 @@ export default {
         }
       },
       searchParams: {},
-      updatedCollectionId: null
+      updatedCollectionId: null,
+      filter: null,
+      filterBy: 'name'
     }
   },
 
@@ -67,7 +71,8 @@ export default {
   },
 
   components: {
-    InfiniteLoadingTable
+    InfiniteLoadingTable,
+    CardBase
   },
 
   computed: {
@@ -86,11 +91,7 @@ export default {
       this.$axios.$put(`/api/project/${this.project.id}`, {
         category_id: collection.id
       }).then(data => {
-        this.notify({
-          type: 'success',
-          title: 'Success',
-          message: `Project moved to ${collection.name}`
-        })
+        this.notifySuccess({ message: `Project moved to ${collection.name}` })
         this.$store.dispatch('UPDATE_CURRENT_PROJECT', data)
       }).catch(err => {
         this.$nuxt.error(err)
diff --git a/pages/admin/project/_short_name/settings.vue b/pages/admin/project/_short_name/settings.vue
index d9ea90c7..339d1f0e 100644
--- a/pages/admin/project/_short_name/settings.vue
+++ b/pages/admin/project/_short_name/settings.vue
@@ -1,50 +1,52 @@
 <template>
-  <pybossa-form
-    :header="title"
-    submit-text="Update"
-    :form="form">
+  <card-base
+    :title="title"
+    help="Configure the core settings for the project">
 
-    <div slot="bottom" class="d-flex form-group mt-1">
-      <toggle-button
-        :value="form.model.protect"
-        :sync="true"
-        :labels="true"
-        @change="updateModelBoolean('protect', $event)">
-      </toggle-button>
-      <label class="ml-1">
-        Require a password
-      </label>
-    </div>
+    <pybossa-form
+      no-border
+      submit-text="Update"
+      :form="form">
+      <div slot="bottom" class="d-flex form-group mt-1">
+        <toggle-button
+          :value="form.model.protect"
+          :sync="true"
+          :labels="true"
+          @change="updateModelBoolean('protect', $event)">
+        </toggle-button>
+        <label class="ml-1">
+          Require a password
+        </label>
+      </div>
+      <div slot="bottom" class="d-flex form-group mt-1">
+        <toggle-button
+          :value="form.model.allow_anonymous_contributors"
+          :sync="true"
+          :labels="true"
+          @change="updateModelBoolean('allow_anonymous_contributors', $event)">
+        </toggle-button>
+        <label class="ml-1">
+          Allow anonymous contributors
+        </label>
+      </div>
+    </pybossa-form>
 
-    <div slot="bottom" class="d-flex form-group mt-1">
-      <toggle-button
-        :value="form.model.allow_anonymous_contributors"
-        :sync="true"
-        :labels="true"
-        @change="updateModelBoolean('allow_anonymous_contributors', $event)">
-      </toggle-button>
-      <label class="ml-1">
-        Allow anonymous contributors
-      </label>
-    </div>
-
-  </pybossa-form>
+  </card-base>
 </template>
 
 <script>
 import { fetchProjectByName } from '@/mixins/fetchProjectByName'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-project-dashboard',
 
   mixins: [ fetchProjectByName ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
-      title: 'Project Settings'
+      title: 'Settings'
     }
   },
 
@@ -105,7 +107,8 @@ export default {
   },
 
   components: {
-    PybossaForm
+    PybossaForm,
+    CardBase
   },
 
   methods: {
diff --git a/pages/admin/project/_short_name/tags.vue b/pages/admin/project/_short_name/tags.vue
index 3a302c8f..0506c768 100644
--- a/pages/admin/project/_short_name/tags.vue
+++ b/pages/admin/project/_short_name/tags.vue
@@ -1,39 +1,29 @@
 <template>
-  <b-card>
-    <div slot="header">
-      <h6 class="mb-1">{{ title }}</h6>
-      <p class="text-muted mb-0">
-        <small>
-          Tags can be used to filter and organise projects (the available tags
-          for a collection are set via the Admin interface).
-        </small>
+  <card-base
+    :title="title"
+    help="Set the tags used to filter and organise projects">
+
+    <b-card-body>
+      <span v-if="hasTags">
+        <div
+          v-for="(value, tag) in collection.info.tags"
+          :key="tag"
+          class="mb-2">
+          <label>{{ tag | capitalize }}</label>
+          <multiselect
+            placeholder="Select one"
+            v-model="project.info.tags[tag]"
+            :options="value.options">
+          </multiselect>
+        </div>
+      </span>
+
+      <p v-else class="lead my-2 text-center">
+        No tags have been enabled for this collection.
       </p>
-    </div>
-
-    <span v-if="tags.length">
-      <div
-        v-for="(tag, index) in tags"
-        :key="index"
-        class="mb-2">
-        <label>{{ tag.type }}</label>
-        <multiselect
-          label="name"
-          track-by="name"
-          :id="tag.key"
-          placeholder="Select one"
-          :show-labels="false"
-          v-model="currentTagsModel[tag.key]"
-          :options="tag.options"
-          @input="onTagChange">
-        </multiselect>
-      </div>
-    </span>
-
-    <p v-else class="lead my-2 text-center">
-      No tags have been specified for this collection.
-    </p>
-
-    <div slot="footer" class="d-flex flex-row">
+    </b-card-body>
+
+    <b-card-footer class="d-flex flex-row">
       <b-btn
         class="ml-auto"
         variant="success"
@@ -41,27 +31,27 @@
         @click="submit">
         Update
       </b-btn>
-    </div>
+    </b-card-footer>
 
-  </b-card>
+  </card-base>
 </template>
 
 <script>
+import identity from 'lodash/identity'
+import pickBy from 'lodash/pickBy'
+import isEmpty from 'lodash/isEmpty'
 import { fetchProjectAndCollection } from '@/mixins/fetchProjectAndCollection'
-import { computeTags } from '@/mixins/computeTags'
 import { notifications } from '@/mixins/notifications'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-project-dashboard',
 
-  mixins: [ fetchProjectAndCollection, computeTags, notifications ],
-
-  middleware: 'is-admin',
+  mixins: [ fetchProjectAndCollection, notifications ],
 
   data () {
     return {
       title: 'Tags',
-      currentTagsModel: {},
       processing: false
     }
   },
@@ -72,47 +62,36 @@ export default {
     }
   },
 
-  computed: {
-    project () {
-      return this.$store.state.currentProject
-    }
+  components: {
+    CardBase
   },
 
-  methods: {
-    /**
-     * Handle a tag being selected or removed.
-     * @param {Object} tag
-     *   The tag.
-     * @param {Object} key
-     *   The component ID (which should be the tag key).
-     */
-    onTagChange (tag, key) {
-      if (!tag) {
-        delete this.project.info[key]
-      } else {
-        this.project.info[key] = tag.name
-      }
-      this.updateCurrentTagsModel()
+  computed: {
+    collection () {
+      return this.$store.state.currentCollection
     },
 
-    /**
-     * Update the current tags.
-     */
-    updateCurrentTagsModel () {
-      const updatedTags = {}
-      for (let tag of this.tags) {
-        updatedTags[tag.key] = tag.options.filter(option => {
-          return option.name === this.project.info[tag.key]
-        })[0]
-      }
-      this.currentTagsModel = updatedTags
+    project () {
+      const project = this.$store.state.currentProject
+      project.info.tags = project.info.tags || {}
+      return project
     },
 
+    hasTags () {
+      return !isEmpty(this.collection.info.tags)
+    }
+  },
+
+  methods: {
     /**
      * Update the project's tags.
      */
     async submit () {
       this.processing = true
+
+      // Remove null tags
+      this.project.info.tags = pickBy(this.project.info.tags, identity)
+
       try {
         await this.$axios.$put(`/api/project/${this.project.id}`, {
           info: this.project.info
@@ -122,16 +101,8 @@ export default {
       } finally {
         this.processing = false
       }
-      this.notify({
-        type: 'success',
-        title: 'Success',
-        message: 'Tags updated'
-      })
+      this.notifySuccess({ message: 'Tags updated' })
     }
-  },
-
-  mounted () {
-    this.updateCurrentTagsModel()
   }
 }
 </script>
diff --git a/pages/admin/project/_short_name/thumbnail.vue b/pages/admin/project/_short_name/thumbnail.vue
index 125c3b53..40d13f72 100644
--- a/pages/admin/project/_short_name/thumbnail.vue
+++ b/pages/admin/project/_short_name/thumbnail.vue
@@ -1,27 +1,38 @@
 <template>
-  <image-upload-form
-    header="Project Thumbnail"
-    submit-text="Update"
-    file-field="avatar"
-    :endpoint="form.endpoint"
-    :model="form.model"
-    :method="form.method"
-    :viewport-height="250"
-    :viewport-width="250"
-    crop-type="square">
-  </image-upload-form>
+  <card-base
+    :title="title"
+    help="Set a thumbnail image for the project">
+
+    <image-upload-form
+      submit-text="Update"
+      file-field="avatar"
+      :endpoint="form.endpoint"
+      :model="form.model"
+      :method="form.method"
+      :viewport-height="250"
+      :viewport-width="250"
+      no-border
+      crop-type="square">
+    </image-upload-form>
+
+  </card-base>
 </template>
 
 <script>
 import { fetchProjectAndCollection } from '@/mixins/fetchProjectAndCollection'
 import ImageUploadForm from '@/components/forms/ImageUpload'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-project-dashboard',
 
   mixins: [ fetchProjectAndCollection ],
 
-  middleware: 'is-admin',
+  data () {
+    return {
+      title: 'Thumbnail'
+    }
+  },
 
   async asyncData ({ params, app, error }) {
     const endpoint = `/project/${params.short_name}/update`
@@ -43,12 +54,13 @@ export default {
 
   head () {
     return {
-      title: 'Thumbnail'
+      title: this.title
     }
   },
 
   components: {
-    ImageUploadForm
+    ImageUploadForm,
+    CardBase
   }
 }
 </script>
diff --git a/pages/admin/project/open.vue b/pages/admin/project/open.vue
index aa5b6a36..593fa56b 100644
--- a/pages/admin/project/open.vue
+++ b/pages/admin/project/open.vue
@@ -1,15 +1,26 @@
 <template>
-  <b-card no-body :header="title">
+  <card-base :title="title" help="Manage your projects">
+
+    <b-form-input
+      slot="controls"
+      v-model="filter"
+      class="search-control"
+      size="sm"
+      :placeholder="`Type to search by ${filterBy}`">
+    </b-form-input>
+
     <infinite-loading-table
       domainObject="project"
       :fields="tableFields"
+      :filter="filter"
+      :filter-by="filterBy"
       :search-params="searchParams"
       no-border>
       <template slot="action" scope="project">
         <b-btn
           variant="success"
-          size="sm"
           block
+          size="sm"
           :to="{
             name: 'admin-project-short_name-settings',
             params: {
@@ -20,17 +31,17 @@
         </b-btn>
       </template>
     </infinite-loading-table>
-  </b-card>
+
+  </card-base>
 </template>
 
 <script>
 import InfiniteLoadingTable from '@/components/tables/InfiniteLoading'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-project-dashboard',
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Open Project',
@@ -38,16 +49,28 @@ export default {
         name: {
           label: 'Name'
         },
+        nTags: {
+          label: 'Tags',
+          class: 'text-center d-none d-xl-table-cell',
+          sortable: true
+        },
         category_id: {
           label: 'Category ID',
           class: 'text-center d-none d-xl-table-cell',
           sortable: true
         },
+        created: {
+          label: 'Created',
+          class: 'text-center d-none d-lg-table-cell',
+          sortable: true
+        },
         actions: {
           label: 'Actions',
           class: 'text-center'
         }
-      }
+      },
+      filter: null,
+      filterBy: 'name'
     }
   },
 
@@ -58,17 +81,15 @@ export default {
   },
 
   components: {
-    InfiniteLoadingTable
+    InfiniteLoadingTable,
+    CardBase
   },
 
   computed: {
     searchParams () {
-      const currentUser = this.$store.state.currentUser
-      const params = {}
-      if (!currentUser.admin) {
-        params.owner_id = currentUser.id
-      }
-      return params
+      return this.$store.state.currentUser.admin
+        ? {}
+        : { owner_id: this.$store.state.currentUser.id }
     }
   },
 
diff --git a/pages/admin/site/announcements/_id/update.vue b/pages/admin/site/announcements/_id/update.vue
index 102abcb8..2a6bf6b6 100644
--- a/pages/admin/site/announcements/_id/update.vue
+++ b/pages/admin/site/announcements/_id/update.vue
@@ -1,31 +1,16 @@
 <template>
-  <b-card
-    id="admin-announcements-update"
-    no-body>
-
-    <div
-      slot="header"
-      class="mb-0 d-flex align-items-center justify-content-between">
-      <span>
-        <h6 class="mb-0">{{ title }}</h6>
-        <p class="text-muted mb-0">
-          <small>
-            Edit and publish the announcement.
-          </small>
-        </p>
-      </span>
-      <div class="d-flex align-items-center">
-        <label class="mr-1 mb-0 toggle-label">
-          <strong>Published</strong>
-        </label>
-        <toggle-button
-          :value="form.model.published"
-          :sync="true"
-          :labels="true"
-          class="mb-0"
-          @change="togglePublished">
-        </toggle-button>
-      </div>
+  <card-base :title="title" help="Add a thumbnail and publish the announcement">
+    <div slot="controls" class="d-flex align-items-center float-right">
+      <label class="mr-1 mb-0 toggle-label">
+        <strong>Published</strong>
+      </label>
+      <toggle-button
+        :value="form.model.published"
+        :sync="true"
+        :labels="true"
+        class="mb-0"
+        @change="togglePublished">
+      </toggle-button>
     </div>
 
     <b-tabs ref="tabs" no-body card>
@@ -49,21 +34,21 @@
         </image-upload-form>
       </b-tab>
     </b-tabs>
-  </b-card>
+  </card-base>
 </template>
 
 <script>
+import pick from 'lodash/pick'
 import { notifications } from '@/mixins/notifications'
 import ImageUploadForm from '@/components/forms/ImageUpload'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-site-dashboard',
 
   mixins: [ notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Update Announcement'
@@ -71,28 +56,39 @@ export default {
   },
 
   async asyncData ({ params, app, error }) {
-    const endpoint = `/admin/announcement/${params.id}/update`
+    const endpoint = `/api/announcement/${params.id}`
     return app.$axios.$get(endpoint).then(data => {
       return {
+        announcement: data,
         form: {
-          endpoint: `/admin/announcement/${params.id}/update`,
-          method: 'post',
-          model: data.form,
+          endpoint: `/api/announcement/${data.id}`,
+          method: 'PUT',
+          model: pick(
+            data,
+            'title',
+            'body',
+            'published',
+            'info'
+          ),
           schema: {
             fields: [
               {
                 model: 'title',
-                label: 'Content',
-                type: 'textArea',
-                rows: 3,
-                placeholder: 'Write an announcement (use Markdown)'
+                label: 'Title',
+                type: 'input',
+                inputType: 'text'
               },
               {
                 model: 'body',
+                label: 'Content',
+                type: 'input',
+                inputType: 'text'
+              },
+              {
+                model: 'info.url',
                 label: 'URL',
                 type: 'input',
-                inputType: 'text',
-                placeholder: 'http://example.com'
+                inputType: 'url'
               }
             ]
           }
@@ -122,7 +118,8 @@ export default {
 
   components: {
     PybossaForm,
-    ImageUploadForm
+    ImageUploadForm,
+    CardBase
   },
 
   methods: {
@@ -130,7 +127,7 @@ export default {
      * Handle cancel.
      */
     onCancel () {
-      this.$router.push({ name: 'admin-announcements' })
+      this.$router.push({ name: 'admin-site-announcements' })
     },
 
     /**
@@ -139,13 +136,11 @@ export default {
      *   The project.
      */
     togglePublished () {
-      this.$axios.$put(`/api/announcement/${this.form.model.id}`, {
+      this.$axios.$put(`/api/announcement/${this.announcement.id}`, {
         published: !this.form.model.published
       }).then(data => {
         this.form.model.published = !this.form.model.published
-        this.notify({
-          type: 'success',
-          title: 'Success',
+        this.notifySuccess({
           message: this.form.model.published
             ? 'Announcement published'
             : 'Announcement unpublished'
diff --git a/pages/admin/site/announcements/index.vue b/pages/admin/site/announcements/index.vue
index 26fccfcf..8c8a8f27 100644
--- a/pages/admin/site/announcements/index.vue
+++ b/pages/admin/site/announcements/index.vue
@@ -1,82 +1,68 @@
 <template>
-  <div id="admin-announcements">
-    <b-card
-      no-body>
-      <div
-        slot="header"
-        class="mb-0 d-flex align-items-center justify-content-between">
-        <span>
-          <h6 class="mb-0">{{ title }}</h6>
-          <p class="text-muted mb-0">
-            <small>
-              Announcements will be shown to all users.
-            </small>
-          </p>
-        </span>
+  <card-base :title="title" help="Manage global announcements">
+    <b-btn
+      variant="success"
+      size="sm"
+      class="float-right"
+      slot="controls"
+      :to="{
+        name: 'admin-site-announcements-new'
+      }">
+      New
+    </b-btn>
+
+    <infinite-loading-table
+      ref="table"
+      :fields="tableFields"
+      no-border
+      :search-params="searchParams"
+      domain-object="announcement">
+      <template slot="action" scope="announcement">
         <b-btn
           variant="success"
+          class="mr-1"
           size="sm"
           :to="{
-            name: 'admin-site-announcements-new'
+            name: 'admin-site-announcements-id-update',
+            params: {
+              id: announcement.item.id
+            }
           }">
-          New
+          Edit
         </b-btn>
-      </div>
+        <b-btn
+          variant="warning"
+          size="sm"
+          @click="deleteAnnouncement(announcement.item.id)">
+          Remove
+        </b-btn>
+      </template>
+    </infinite-loading-table>
 
-      <infinite-loading-table
-        ref="table"
-        :fields="tableFields"
-        no-border
-        :search-params="searchParams"
-        domain-object="announcement">
-        <template slot="action" scope="announcement">
-          <b-btn
-            variant="primary"
-            size="sm"
-            block
-            :to="{
-              name: 'admin-site-announcements-id-update',
-              params: {
-                id: announcement.item.id
-              }
-            }">
-            Update
-          </b-btn>
-          <b-btn
-            variant="outline-dark"
-            size="sm"
-            block
-            @click="deleteAnnouncement(announcement.item.id)">
-            Delete
-          </b-btn>
-        </template>
-      </infinite-loading-table>
-    </b-card>
-  </div>
+  </card-base>
 </template>
 
 <script>
 import InfiniteLoadingTable from '@/components/tables/InfiniteLoading'
 import { deleteDomainObject } from '@/mixins/deleteDomainObject'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-site-dashboard',
 
   mixins: [ deleteDomainObject ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Announcements',
       tableFields: {
         title: {
-          label: 'Content',
+          label: 'Title',
           sortable: true
         },
-        body: {
+        'info.link': {
           label: 'URL',
-          class: 'd-none d-lg-table-cell',
+          class: 'd-none d-xl-table-cell',
           sortable: true
         },
         created: {
@@ -99,7 +85,8 @@ export default {
   },
 
   components: {
-    InfiniteLoadingTable
+    InfiniteLoadingTable,
+    CardBase
   },
 
   methods: {
diff --git a/pages/admin/site/announcements/new.vue b/pages/admin/site/announcements/new.vue
index b4687024..d43ab299 100644
--- a/pages/admin/site/announcements/new.vue
+++ b/pages/admin/site/announcements/new.vue
@@ -1,16 +1,7 @@
 <template>
-  <b-card no-body>
-    <div slot="header" class="mb-0">
-      <span>
-        <h6 class="mb-0">{{ title }}</h6>
-        <p class="text-muted mb-0">
-          <small>
-            A thumbnail image can be added and the announcement published on
-            the next page.
-          </small>
-        </p>
-      </span>
-    </div>
+  <card-base
+    :title="title"
+    help="Make an announcement (a thumbnail can be set on the next page)">
     <pybossa-form
       id="admin-announcement-new"
       show-cancel
@@ -19,53 +10,61 @@
       @success="onSuccess"
       @cancel="onCancel">
     </pybossa-form>
-  </b-card>
+  </card-base>
 </template>
 
 <script>
+import pick from 'lodash/pick'
 import { notifications } from '@/mixins/notifications'
 import VueFormGenerator from 'vue-form-generator'
 import ImageUploadForm from '@/components/forms/ImageUpload'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-site-dashboard',
 
   mixins: [ notifications ],
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'New Announcement',
       form: {
         endpoint: '/api/announcement',
         method: 'post',
-        model: {
-          title: null,
-          body: null,
-          published: false
-        },
+        model: pick(
+          'title',
+          'body',
+          'info'
+        ),
         schema: {
           fields: [
             {
               model: 'title',
-              label: 'Content',
-              type: 'textArea',
-              rows: 3,
-              placeholder: 'Write an announcement using Markdown ' +
-                '(a couple of lines works best)',
+              label: 'Title',
+              type: 'input',
+              inputType: 'text',
+              placeholder: 'Short titles work best (e.g. New Project Added!)',
               required: true,
               validator: VueFormGenerator.validators.string
             },
             {
               model: 'body',
-              label: 'URL',
+              label: 'Content',
               type: 'input',
               inputType: 'text',
-              placeholder: 'http://example.com',
+              placeholder: 'Add some additional details',
               required: true,
               validator: VueFormGenerator.validators.string
+            },
+            {
+              model: 'info.url',
+              label: 'URL',
+              type: 'input',
+              inputType: 'url',
+              required: true,
+              placeholder: 'http://example.com',
+              validator: VueFormGenerator.validators.url
             }
           ]
         }
@@ -81,7 +80,8 @@ export default {
 
   components: {
     PybossaForm,
-    ImageUploadForm
+    ImageUploadForm,
+    CardBase
   },
 
   methods: {
@@ -91,11 +91,7 @@ export default {
      *   The response data.
      */
     onSuccess (data) {
-      this.notify({
-        type: 'success',
-        title: 'Success',
-        message: 'Announcement created'
-      })
+      this.notifySuccess({ message: 'Announcement created' })
       this.$router.push({
         name: 'admin-site-announcements-id-update',
         params: {
diff --git a/pages/admin/site/dashboard.vue b/pages/admin/site/dashboard.vue
index 1ecb6784..4f7fcdbd 100644
--- a/pages/admin/site/dashboard.vue
+++ b/pages/admin/site/dashboard.vue
@@ -364,8 +364,6 @@ import LineChart from '@/components/charts/Line'
 export default {
   layout: 'admin-site-dashboard',
 
-  middleware: 'is-admin',
-
   mixins: [ notifications ],
 
   data () {
diff --git a/pages/admin/site/jobs.vue b/pages/admin/site/jobs.vue
index 170331bf..04552da7 100644
--- a/pages/admin/site/jobs.vue
+++ b/pages/admin/site/jobs.vue
@@ -1,32 +1,21 @@
 <template>
-  <div id="admin-jobs">
-    <b-card no-body>
-      <template slot="header">
-        <h6 class="mb-0">{{ title }}</h6>
-        <p class="text-muted mb-0">
-          <small>
-            Monitor background tasks.
-          </small>
-        </p>
-      </template>
-      <iframe
-        :src="rqSchedulerRoute"
-        height="800"
-        width="100%"
-        frameborder="0">
-      </iframe>
-    </b-card>
-  </div>
+  <card-base :title="title" help="Monitor background tasks">
+    <iframe
+      :src="rqSchedulerRoute"
+      height="800"
+      width="100%"
+      frameborder="0">
+    </iframe>
+  </card-base>
 </template>
 
 <script>
 import localConfig from '@/local.config'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-site-dashboard',
 
-  middleware: 'is-admin',
-
   data () {
     return {
       title: 'Background Tasks',
@@ -34,6 +23,10 @@ export default {
     }
   },
 
+  components: {
+    CardBase
+  },
+
   head () {
     return {
       title: this.title
diff --git a/pages/admin/site/users.vue b/pages/admin/site/users.vue
index 1220307b..dcd712bf 100644
--- a/pages/admin/site/users.vue
+++ b/pages/admin/site/users.vue
@@ -1,52 +1,40 @@
 <template>
-  <div id="admin-users">
-    <b-card no-body>
-
-      <template slot="header">
-        <h6 class="mb-0">{{ title }}</h6>
-        <p class="text-muted mb-0">
-          <small>
-            Manage registered users.
-          </small>
-        </p>
-      </template>
-
-      <b-card-body class="p-0">
-        <b-row no-gutters>
-          <b-col lg="4">
-            <pybossa-form
-              submit-text="Search"
-              header="Search"
-              :form="form"
-              @success="onSuccess">
-            </pybossa-form>
-          </b-col>
-          <b-col lg="8" class="p-2">
-            <b-table
-              hover
-              show-empty
-              :items="found"
-              :fields="tableFields">
-
-              <template slot="created" scope="user">
-                {{ user.item.created | moment('calendar') }}
-              </template>
-
-              <template slot="action" scope="user">
-                <b-btn
-                  :variant="user.item.admin ? 'warning' : 'success'"
-                  size="sm"
-                  block
-                  @click="toggleAdmin(user.item)">
-                  {{ getButtonText(user.item) }}
-                </b-btn>
-              </template>
-
-            </b-table>
-          </b-col>
-        </b-row>
-      </b-card-body>
-    </b-card>
+  <div>
+    <card-base :title="title" help="Manage registered users">
+      <b-row no-gutters>
+        <b-col lg="4">
+          <pybossa-form
+            submit-text="Search"
+            header="Search"
+            :form="form"
+            @success="onSuccess">
+          </pybossa-form>
+        </b-col>
+        <b-col lg="8" class="p-2">
+          <b-table
+            hover
+            show-empty
+            :items="found"
+            :fields="tableFields">
+
+            <template slot="created" scope="user">
+              {{ user.item.created | moment('calendar') }}
+            </template>
+
+            <template slot="action" scope="user">
+              <b-btn
+                :variant="user.item.admin ? 'warning' : 'success'"
+                size="sm"
+                block
+                @click="toggleAdmin(user.item)">
+                {{ getButtonText(user.item) }}
+              </b-btn>
+            </template>
+
+          </b-table>
+        </b-col>
+      </b-row>
+    </card-base>
 
     <b-row class="mt-4">
       <b-col xl="4">
@@ -102,13 +90,14 @@
 </template>
 
 <script>
-import exportFile from '@/utils/exportFile'
+import { exportFile } from '@/mixins/exportFile'
 import PybossaForm from '@/components/forms/PybossaForm'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'admin-site-dashboard',
 
-  middleware: 'is-admin',
+  mixins: [ exportFile ],
 
   data () {
     return {
@@ -171,7 +160,8 @@ export default {
   },
 
   components: {
-    PybossaForm
+    PybossaForm,
+    CardBase
   },
 
   methods: {
@@ -219,7 +209,7 @@ export default {
           format: format
         }
       }).then(data => {
-        exportFile(data, 'user_data', format)
+        this.exportFile(data, 'user_data', format)
       }).catch(err => {
         this.$nuxt.error(err)
       })
diff --git a/pages/collection/_short_name/data.vue b/pages/collection/_short_name/data.vue
index a0021e88..001268f8 100644
--- a/pages/collection/_short_name/data.vue
+++ b/pages/collection/_short_name/data.vue
@@ -6,35 +6,37 @@
       <hr class="mx-0">
     </span>
 
-    <b-row
-      id="get-started"
+    <card-base
+      title="Data"
+      id="download-data"
       class="collection-nav-item"
-      data-title="Get Started">
-      <b-col xl="3" class="mb-3">
-        <project-sorting-card
-          class="mb-3 d-none d-xl-block"
-          :collection="collection"
-          v-model="searchParams">
-        </project-sorting-card>
-      </b-col>
-
-      <b-col xl="9">
-        <infinite-loading-table
-          :fields="tableFields"
-          domain-object="project"
-          :search-params="mergedSearchParams">
-          <template slot="action" scope="project">
-            <b-btn
-              variant="success"
-              size="sm"
-              block
-              @click="loadDataModal(project.item)">
-              Download
-            </b-btn>
-          </template>
-        </infinite-loading-table>
-      </b-col>
-    </b-row>
+      data-title="Get the Data"
+      help="Download the project data">
+
+      <b-form-input
+        slot="controls"
+        v-model="filter"
+        class="search-control"
+        size="sm"
+        :placeholder="`Type to search by ${filterBy}`">
+      </b-form-input>
+
+      <projects-table
+        :filter="filter"
+        :filter-by="filterBy"
+        no-border
+        :collection="collection">
+        <template slot="action" scope="project">
+          <b-btn
+            variant="success"
+            size="sm"
+            block
+            @click="loadDataModal(project.item)">
+            Download
+          </b-btn>
+        </template>
+      </projects-table>
+    </card-base>
 
     <data-modal
       v-if="activeProject"
@@ -46,47 +48,29 @@
 </template>
 
 <script>
-import merge from 'lodash/merge'
 import marked from 'marked'
 import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
-import InfiniteLoadingTable from '@/components/tables/InfiniteLoading'
+import { filterProjects } from '@/mixins/filterProjects'
+import { licenses } from '@/mixins/licenses'
+import SortProjectsData from '@/components/data/SortProjects'
+import ToggleCompletedData from '@/components/data/ToggleCompleted'
+import FilterProjectsData from '@/components/data/FilterProjects'
+import ProjectsTable from '@/components/tables/Projects'
 import DataModal from '@/components/modals/Data'
 import ProjectSortingCard from '@/components/cards/ProjectSorting'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'collection-tabs',
 
-  mixins: [ fetchCollectionByName ],
+  mixins: [ fetchCollectionByName, filterProjects, licenses ],
 
   data () {
     return {
       activeProject: null,
       showDataModal: false,
-      tableFields: {
-        name: {
-          label: 'Name'
-        },
-        n_tasks: {
-          label: 'Tasks',
-          class: 'text-center d-none d-xl-table-cell',
-          sortable: true
-        },
-        overall_progress: {
-          label: 'Progress',
-          class: 'text-center d-none d-md-table-cell',
-          sortable: true
-        },
-        created: {
-          label: 'Created',
-          class: 'text-center d-none d-xl-table-cell',
-          sortable: true
-        },
-        actions: {
-          label: 'Actions',
-          class: 'text-center'
-        }
-      },
-      searchParams: {}
+      filter: null,
+      filterBy: 'name'
     }
   },
 
@@ -97,18 +81,20 @@ export default {
         {
           hid: 'description',
           name: 'description',
-          content: `All datasets generated from ${this.collection.name}
-            projects are made available under a ${this.collection.license}
-            license.`
+          content: this.metaContent
         }
       ]
     }
   },
 
   components: {
-    InfiniteLoadingTable,
+    SortProjectsData,
+    FilterProjectsData,
+    ToggleCompletedData,
+    ProjectsTable,
     DataModal,
-    ProjectSortingCard
+    ProjectSortingCard,
+    CardBase
   },
 
   computed: {
@@ -120,10 +106,12 @@ export default {
       return this.$store.state.currentCollection
     },
 
-    mergedSearchParams () {
-      return merge({}, this.searchParams, {
-        category_id: this.collection.id
-      })
+    metaContent () {
+      if (this.collection.license) {
+        return `All datasets generated from ${this.collection.name}
+          projects are made available under a
+          ${this.dataLicenses[this.collection.license].name} license.`
+      }
     }
   },
 
@@ -135,7 +123,7 @@ export default {
   },
 
   mounted () {
-    const nodes = document.querySelectorAll('h2')
+    const nodes = document.querySelectorAll('.collection-nav-item')
     this.$store.dispatch('UPDATE_COLLECTION_NAV_ITEMS', nodes)
   }
 }
diff --git a/pages/collection/_short_name/index.vue b/pages/collection/_short_name/index.vue
index 5dfb30ac..60eff98d 100644
--- a/pages/collection/_short_name/index.vue
+++ b/pages/collection/_short_name/index.vue
@@ -118,13 +118,13 @@
           <h3 class="display-5">Open Data</h3>
           <p class="lead my-2 my-md-3 text-sm-left">
             All datasets generated from the experimental crowdsourcing
-            projects hosted on this platform are made available under a
+            projects hosted by {{ collection.brand }} are made available under a
             <a
-              :href="collection.info.license"
+              :href="dataLicenses[collection.info.license].url"
               target="_blank">
-              {{ collection.info.license }} license
+              {{ collection.info.license }}
             </a>
-            and can be downloaded by anyone in JSON or
+            license and can be downloaded by anyone in JSON or
             CSV formats. Visit the data page to find out more.
           </p>
           <b-btn
@@ -197,9 +197,10 @@
 </template>
 
 <script>
+import find from 'lodash/find'
 import 'vue-awesome/icons/star'
 import localConfig from '@/local.config'
-import { loadCollectionFeatured } from '@/mixins/loadCollectionFeatured'
+import { licenses } from '@/mixins/licenses'
 import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { computeShareUrl } from '@/mixins/computeShareUrl'
 import SocialMediaButtons from '@/components/buttons/SocialMedia'
@@ -210,13 +211,45 @@ export default {
 
   mixins: [
     fetchCollectionByName,
-    loadCollectionFeatured,
-    computeShareUrl
+    computeShareUrl,
+    licenses
   ],
 
   data () {
     return {
-      localConfig: localConfig
+      localConfig: localConfig,
+      featured: []
+    }
+  },
+
+  methods: {
+    loadFeatured () {
+      let projects = []
+      this.$axios.$get('/api/project', {
+        params: {
+          category_id: this.collection.id,
+          featured: true,
+          all: 1
+        }
+      }).then(data => {
+        projects = data.map(project => {
+          project.project_id = project.id
+          return project
+        })
+        return this.$axios.$get('/api/projectstats', {
+          params: {
+            project_id: data.map(project => project.id).toString()
+          }
+        })
+      }).then(stats => {
+        this.featured = projects.map(project => {
+          return Object.assign(project, find(stats, {
+            project_id: project.id
+          }))
+        })
+      }).catch(err => {
+        this.$nuxt.error(err)
+      })
     }
   },
 
@@ -255,7 +288,7 @@ export default {
   },
 
   mounted () {
-    this.loadCollectionFeatured()
+    this.loadFeatured()
   }
 }
 </script>
diff --git a/pages/collection/_short_name/projects/_id/_presenter.vue/index.vue b/pages/collection/_short_name/projects/_id/_presenter.vue/index.vue
index a966d7a3..b164d7df 100644
--- a/pages/collection/_short_name/projects/_id/_presenter.vue/index.vue
+++ b/pages/collection/_short_name/projects/_id/_presenter.vue/index.vue
@@ -127,21 +127,13 @@ export default {
             task_id: taskId
           }
         }).then(() => {
-          this.notify({
-            title: 'Success',
-            message: 'Removed from favourites',
-            type: 'success'
-          })
+          this.notifySuccess({ message: 'Removed from favourites' })
         }).catch(err => {
           this.$nuxt.error(err)
         })
       } else {
         this.$axios.$delete(`/api/favorite/${taskId}`).then(() => {
-          this.notify({
-            title: 'Success',
-            message: 'Added to favourites',
-            type: 'success'
-          })
+          this.notifySuccess({ message: 'Added to favourites' })
         }).catch(err => {
           this.$nuxt.error(err)
         })
@@ -186,11 +178,7 @@ export default {
                   'directly help enable future research.'
           })
         } else {
-          this.notify({
-            title: 'Answer saved',
-            message: 'Thank you for your contribution!',
-            type: 'success'
-          })
+          this.notifyAnswerSaved()
         }
       })
     },
@@ -205,16 +193,22 @@ export default {
      *   The answer data.
      */
     onSubmit (projectId, taskId, answer) {
-      console.log('submoitted')
       const taskrun = JSON.stringify({
         'project_id': projectId,
         'task_id': taskId,
         'info': answer
       })
       this.$axios.$post(`/api/taskrun`, taskrun).then(data => {
-        console.log('new blah')
         this.loadTask()
         this.trackUserProgress()
+        if (this.$ga) {
+          this.$ga.event({
+            eventCategory: 'Contributions',
+            eventAction: this.project.name,
+            eventLabel: this.collection.name,
+            eventValue: 1
+          })
+        }
       }).catch(err => {
         this.$nuxt.error(err)
       })
diff --git a/pages/collection/_short_name/projects/index.vue b/pages/collection/_short_name/projects/index.vue
index 39b9c569..cb112229 100644
--- a/pages/collection/_short_name/projects/index.vue
+++ b/pages/collection/_short_name/projects/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="collection-contribute">
-    <h1 class="text-center">Contribute</h1>
+  <div id="collection-projects">
+    <h1 class="text-center">{{ title }}</h1>
     <span v-if="pageContent">
       <span v-html="pageContent"></span>
       <hr class="mx-0">
@@ -10,12 +10,35 @@
       id="get-started"
       class="collection-nav-item"
       data-title="Get Started">
-      <b-col xl="3" class="mb-xl-3 d-none d-xl-block">
-        <project-sorting-card
-          class="mb-3"
-          :collection="collection"
-          v-model="searchParams">
-        </project-sorting-card>
+
+      <b-col xl="3" class="d-none d-xl-block">
+        <b-card header="Sorting Options" class="options-card mb-2">
+          <filter-projects-data
+            v-model="tagModel"
+            :collection="collection"
+            @input="reset"
+            @select="onFilter">
+          </filter-projects-data>
+          <sort-projects-data
+            v-model="sortModel"
+            class="mb-2"
+            @input="reset"
+            @select="onSort">
+          </sort-projects-data>
+          <toggle-completed-data
+            class="mb-2"
+            v-model="showCompleted"
+            @input="onToggleCompleted">
+          </toggle-completed-data>
+          <b-btn
+            block
+            size="sm"
+            variant="primary"
+            @click="clearFilters">
+            Clear filters
+          </b-btn>
+        </b-card>
+
         <social-media-buttons
           :shareUrl="shareUrl"
           size="sm"
@@ -24,75 +47,94 @@
       </b-col>
 
       <b-col xl="9">
-        <b-table
-          hover
-          striped
-          show-empty
-          :items="incompleteProjects"
-          :fields="tableFields"
-          class="d-lg-none"
-          @sort-changed="onSortChange">
-          <template slot="overall_progress" scope="project">
-            {{ project.item.overall_progress }}%
-          </template>
-          <template slot="actions" scope="project">
-            <project-contrib-button
-              block
-              :collection="collection"
-              :project="project.item">
-            </project-contrib-button>
-          </template>
-        </b-table>
+        <card-base title="Projects" help="Choose a project" class="d-lg-none">
+          <b-form-input
+            slot="controls"
+            v-model="filter"
+            class="search-control"
+            size="sm"
+            :placeholder="`Type to search by ${filterBy}`">
+          </b-form-input>
+          <projects-table
+            no-border
+            :filter="filter"
+            :filter-by="filterBy"
+            :collection="collection">
+            <template slot="action" scope="project">
+              <project-contrib-button
+                :collection="collection"
+                :project="project.item">
+              </project-contrib-button>
+            </template>
+          </projects-table>
+        </card-base>
 
         <transition-group
           tag="ul"
           class="list-unstyled d-none d-lg-block"
           name="fade-up">
-          <li v-for="project in incompleteProjects" :key="project.id">
+          <li v-for="project in filteredProjects" :key="project.id">
             <project-card
               :collection="collection"
-              :project="project">
+              :project="project"
+              @tagclick="updateTagModel">
             </project-card>
           </li>
         </transition-group>
 
-        <infinite-load
+        <infinite-load-projects
           ref="infiniteload"
-          domain-object="project"
-          :search-params="mergedSearchParams"
-          :no-results="noResults"
+          :collection="collection"
+          :orderby="sortModel.orderby"
+          :desc="sortModel.desc"
+          no-results=""
+          no-more-results=""
           v-model="projects">
-        </infinite-load>
+        </infinite-load-projects>
+
+        <p class="lead text-center" v-if="allProjectsFiltered">
+          No projects are currently available using the selected filters.
+          <br>
+          You can use the input fields on the left to change them.
+        </p>
+
       </b-col>
     </b-row>
   </div>
 </template>
 
 <script>
-import merge from 'lodash/merge'
 import marked from 'marked'
 import { fetchCollectionByName } from '@/mixins/fetchCollectionByName'
 import { computeShareUrl } from '@/mixins/computeShareUrl'
+import { filterProjects } from '@/mixins/filterProjects'
 import SocialMediaButtons from '@/components/buttons/SocialMedia'
-import ProjectSortingCard from '@/components/cards/ProjectSorting'
+import SortProjectsData from '@/components/data/SortProjects'
+import ToggleCompletedData from '@/components/data/ToggleCompleted'
+import FilterProjectsData from '@/components/data/FilterProjects'
 import ProjectCard from '@/components/cards/Project'
-import InfiniteLoad from '@/components/InfiniteLoad'
+import InfiniteLoadProjects from '@/components/InfiniteLoadProjects'
 import InfiniteLoadingTable from '@/components/tables/InfiniteLoading'
 import ProjectContribButton from '@/components/buttons/ProjectContrib'
+import ProjectsTable from '@/components/tables/Projects'
+import CardBase from '@/components/cards/Base'
 
 export default {
   layout: 'collection-tabs',
 
-  mixins: [ fetchCollectionByName, computeShareUrl ],
+  mixins: [
+    fetchCollectionByName,
+    computeShareUrl,
+    filterProjects
+  ],
 
   data () {
     return {
+      title: 'Take Part',
       projects: [],
-      searchParams: {
-        orderby: 'overall_progress'
-      },
-      noResults: 'No projects are available using the selected filters, ' +
-        'use the input fields on the left to change them.',
+      showCompleted: false,
+      filter: null,
+      filterBy: 'name',
       tableFields: {
         name: {
           label: 'Name'
@@ -111,13 +153,17 @@ export default {
           label: 'Action',
           class: 'text-center'
         }
+      },
+      sortModel: {
+        orderby: 'overall_progress',
+        desc: true
       }
     }
   },
 
   head () {
     return {
-      title: 'Contribute',
+      title: this.title,
       meta: [
         {
           hid: 'description',
@@ -129,6 +175,19 @@ export default {
     }
   },
 
+  components: {
+    SortProjectsData,
+    FilterProjectsData,
+    ToggleCompletedData,
+    ProjectCard,
+    InfiniteLoadProjects,
+    SocialMediaButtons,
+    InfiniteLoadingTable,
+    ProjectContribButton,
+    ProjectsTable,
+    CardBase
+  },
+
   computed: {
     currentUser () {
       return this.$store.state.currentUser
@@ -139,42 +198,74 @@ export default {
     },
 
     pageContent () {
-      return marked(this.collection.info.content.contribute)
+      return marked(this.collection.info.content.projects)
     },
 
-    mergedSearchParams () {
-      const params = {
-        category_id: this.collection.id
-      }
-      if (!this.currentUser.admin) {
-        params.published = true
+    allProjectsFiltered () {
+      return this.projects.length > 0 && this.filteredProjects.length === 0
+    }
+  },
+
+  methods: {
+    /**
+     * Track filters.
+     * @param {Object} name
+     *   The tag name.
+     * @param {Object} type
+     *   The tag type.
+     */
+    onFilter (name, type) {
+      const nameStr = name.toLowerCase().replace(' ', '_')
+      const typeStr = type.toLowerCase().replace(' ', '_')
+      if (this.$ga) {
+        this.$ga.event({
+          eventCategory: 'Filters',
+          eventAction: `${typeStr}:${nameStr}`,
+          eventLabel: this.collection.name,
+          eventValue: 1
+        })
       }
-      return merge(params, this.searchParams)
     },
 
-    incompleteProjects () {
-      return this.projects.filter(project => {
-        return project.overall_progress < 100
-      })
-    }
-  },
+    /**
+     * Track sorting.
+     * @param {String} value
+     *   The sorting value.
+     */
+    onSort (value) {
+      if (this.$ga) {
+        this.$ga.event({
+          eventCategory: 'Sorts',
+          eventAction: `${value.orderby}_${value.desc ? 'desc' : 'asc'}`,
+          eventLabel: this.collection.name,
+          eventValue: 1
+        })
+      }
+    },
 
-  components: {
-    ProjectSortingCard,
-    ProjectCard,
-    InfiniteLoad,
-    SocialMediaButtons,
-    InfiniteLoadingTable,
-    ProjectContribButton
-  },
+    /**
+     * Track completed toggle.
+     * @param {String} value
+     *   The toggle value.
+     */
+    onToggleCompleted (value) {
+      if (this.$ga) {
+        this.$ga.event({
+          eventCategory: 'Filters',
+          eventAction: value ? 'show_completed' : 'hide_completed',
+          eventLabel: this.collection.name,
+          eventValue: 1
+        })
+      }
+    },
 
-  methods: {
     /**
-     * Handle sort change.
+     * Reset the infinite loading table.
+     *
+     * Change the number param if the transition time changes.
      */
-    onSortChange (value) {
-      this.searchParams.orderby = value.sortBy
-      this.searchParams.desc = value.sortDesc
+    reset () {
+      this.$refs.infiniteload.reset(500)
     }
   },
 
@@ -184,11 +275,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-#collection-contribute {
-  .project-card {
-    transition: all 500ms ease;
-  }
-}
-</style>
diff --git a/pages/index.vue b/pages/index.vue
index 95e6c08a..7d2492d4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -30,9 +30,9 @@
       </div>
     </div>
 
-    <section id="contribute">
+    <section id="collections">
       <div class="container py-4">
-        <h2 class="mt-4">Contribute</h2>
+        <h2 class="mt-4">Project Collections</h2>
         <p class="lead">
           {{ localConfig.description }}
         </p>
@@ -68,7 +68,7 @@
             <b-btn
               variant="success"
               size="lg"
-              v-scroll-to="'#contribute'">
+              v-scroll-to="'#collections'">
               Get Started
             </b-btn>
           </div>
@@ -254,7 +254,7 @@ export default {
     color: $gray-1000;
   }
 
-  #contribute {
+  #collections {
     background-color: $gray-100;
   }
 
diff --git a/plugins/notifications.js b/plugins/notifications.js
index 13a4ac5b..f18334bf 100644
--- a/plugins/notifications.js
+++ b/plugins/notifications.js
@@ -8,7 +8,7 @@ function toast ({title, message, type, timeout, cb}) {
   iziToast.settings({
     position: 'bottomLeft'
   })
-  return iziToast[type]({title, message, timeout})
+  return iziToast[type]({ title, message, timeout })
 }
 
 function sweetalert ({title, message, type, timeout, cb}) {
diff --git a/store/actions.js b/store/actions.js
index 1208935d..1d15caf7 100644
--- a/store/actions.js
+++ b/store/actions.js
@@ -1,10 +1,13 @@
 import { setCollectionDefaults } from '@/utils/setCollectionDefaults'
 
 export default {
-  UPDATE_CURRENT_USER: async ({ dispatch, commit }, axios) => {
+  UPDATE_CURRENT_USER: async ({ dispatch, commit }, axios, ga) => {
     return axios.$get(`/account/profile`).then(data => {
       if (data.hasOwnProperty('user')) {
         commit('LOGIN', data.user)
+        if (ga) {
+          this.$ga.set({ userId: data.user.id })
+        }
       } else {
         commit('LOGOUT')
       }
@@ -84,7 +87,6 @@ export default {
 
   UPDATE_COLLECTION_NAV_ITEMS: ({ commit }, nodes) => {
     const navItems = []
-    console.log(nodes)
     for (let node of nodes) {
       navItems.push({
         id: node.id,
diff --git a/test/e2e/pages/index.spec.js b/test/e2e/pages/index.spec.js
deleted file mode 100644
index 96ae8d31..00000000
--- a/test/e2e/pages/index.spec.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import 'vue-awesome/icons/users'
-import 'vue-awesome/icons/eye'
-import 'vue-awesome/icons/television'
-import 'vue-awesome/icons/list'
-
-import pbTestResponses from '@/test/fixtures/pybossaTestResponses.json'
-
-describe('Index page', () => {
-  let nuxt = null
-  let server = null
-
-  beforeAll(async () => {
-    nuxt.app.$pybossa = {
-      getStats: jest.fn(() => pbTestResponses.getStats),
-      getLeaderboard: jest.fn(() => pbTestResponses.getLeaderboard)
-    }
-  })
-
-  it('renders correctly', async () => {
-    const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
-    const element = window.document.querySelector('.red')
-    console.log(element)
-    expect(1).toBe(2)
-  })
-
-  afterAll(() => {
-    server.close()
-    nuxt.close()
-  })
-})
diff --git a/test/test.local.config.js b/test/test.local.config.js
index 817d8b2e..78887070 100644
--- a/test/test.local.config.js
+++ b/test/test.local.config.js
@@ -15,6 +15,15 @@ const config = {
   githubUrl: 'https://github.com/Organization/repo'
 }
 
+config.docs = 'http://docs.example.com'
+
+config.footer = {
+  title: 'Newsletter',
+  items: [
+    { text: 'Sign up', url: 'http://mailchimp.signup.url' }
+  ]
+}
+
 // List of collection configurations
 // config.collections = {
 //   'default': {
diff --git a/test/unit/specs/components/buttons/socialMedia.spec.js b/test/unit/specs/components/buttons/socialMedia.spec.js
index 6fe269da..389de196 100644
--- a/test/unit/specs/components/buttons/socialMedia.spec.js
+++ b/test/unit/specs/components/buttons/socialMedia.spec.js
@@ -69,7 +69,7 @@ describe('SocialMedia buttons', () => {
       }
     })
     window.open = mockOpen
-    wrapper.vm.share(url, width, height)
+    wrapper.vm.share('Facebook', url, width, height)
     expect(mockOpen).toHaveBeenCalledWith(url, 'Share', specs)
     expect(mockFocus).toHaveBeenCalled()
   })
diff --git a/test/unit/specs/components/cards/__snapshots__/collection.spec.js.snap b/test/unit/specs/components/cards/__snapshots__/collection.spec.js.snap
index ee6fe594..d1cc653a 100644
--- a/test/unit/specs/components/cards/__snapshots__/collection.spec.js.snap
+++ b/test/unit/specs/components/cards/__snapshots__/collection.spec.js.snap
@@ -6,7 +6,7 @@ exports[`Collection card renders correctly 1`] = `
      data-server-rendered="true"
      class="collection-card my-3 card"
 >
-  <nuxt-link to="[object Object]">
+  <a href="#/collection/playbills">
     <div class="collection-card-img"
          style="background-image:url('http://example.com/background.jpg');"
     >
@@ -56,7 +56,7 @@ exports[`Collection card renders correctly 1`] = `
         </svg>
       </svg>
     </div>
-  </nuxt-link>
+  </a>
 </div>
 
 `;
diff --git a/test/unit/specs/components/cards/collection.spec.js b/test/unit/specs/components/cards/collection.spec.js
index 1579e1e0..6b4d38d4 100644
--- a/test/unit/specs/components/cards/collection.spec.js
+++ b/test/unit/specs/components/cards/collection.spec.js
@@ -1,22 +1,32 @@
 import BootstrapVue from 'bootstrap-vue'
+import VueRouter from 'vue-router'
 import Icon from 'vue-awesome/components/Icon'
 import 'vue-awesome/icons/arrow-right'
 import 'vue-awesome/icons/circle-thin'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
 
 import collection from '@/test/fixtures/collection.json'
 import { mount, createLocalVue } from 'vue-test-utils'
 import CollectionCard from '@/components/cards/Collection'
+import { routes } from '@/test/fixtures/routes'
 
 describe('Collection card', () => {
   let localVue = null
   let wrapper = null
+  let router = null
 
   beforeEach(() => {
     localVue = createLocalVue()
     localVue.use(BootstrapVue)
     localVue.component('icon', Icon)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
     wrapper = mount(CollectionCard, {
       localVue,
+      router,
       propsData: {
         collection: collection
       }
diff --git a/test/unit/specs/components/footers/__snapshots__/app.spec.js.snap b/test/unit/specs/components/footers/__snapshots__/app.spec.js.snap
new file mode 100644
index 00000000..b3f9dde2
--- /dev/null
+++ b/test/unit/specs/components/footers/__snapshots__/app.spec.js.snap
@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App footer renders correctly 1`] = `
+
+<footer id="app-footer"
+        data-server-rendered="true"
+        class="footer"
+>
+  <div class="container pt-3 pb-2">
+    <section>
+      <a href="#/"
+         class="router-link-exact-active router-link-active"
+      >
+        Part of the My Brand crowdsourcing platform
+      </a>
+      <p class="my-2">
+        &copy; My Company, 2017
+      </p>
+      <ul class="list-inline mt-2 mb-0">
+        <li class="list-inline-item mx-1">
+          <a href="https://twitter.com/mytwitterhandle"
+             class="text-muted"
+          >
+            <svg version="1.1"
+                 role="presentation"
+                 width="14.857142857142858"
+                 height="16"
+                 viewbox="0 0 1664 1792"
+                 class="fa-icon"
+            >
+              <path d="M1620 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z">
+              </path>
+              
+              <!---->
+            </svg>
+          </a>
+        </li>
+        <li class="list-inline-item mx-1">
+          <a href="mailto:me@example.com"
+             class="text-muted"
+          >
+            <svg version="1.1"
+                 role="presentation"
+                 width="16"
+                 height="16"
+                 viewbox="0 0 1792 1792"
+                 class="fa-icon"
+            >
+              <path d="M1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h1 1q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zM1792 416q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-1-1q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z">
+              </path>
+              
+              <!---->
+            </svg>
+          </a>
+        </li>
+        <li class="list-inline-item mx-1">
+          <a href="https://github.com/Organization/repo"
+             class="text-muted"
+          >
+            <svg version="1.1"
+                 role="presentation"
+                 width="13.714285714285714"
+                 height="16"
+                 viewbox="0 0 1536 1792"
+                 class="fa-icon"
+            >
+              <path d="M768 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 0.5-76.5t0.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 0.5 88.5t0.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zM291 1231q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zM322 1265q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zM352 1310q9-7 0-19-8-13-17-6-9 5 0 18t17 7zM394 1352q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zM451 1377q3-11-13-16-15-4-19 7t13 15q15 6 19-6zM514 1382q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zM572 1372q-2-11-18-9-16 3-14 15t18 8 14-14z">
+              </path>
+              
+              <!---->
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </section>
+    <section class="d-none d-lg-block">
+      <h5 class="list-title">
+        Newsletter
+      </h5>
+      <ul class="list-unstyled">
+        <li class="list-item">
+          <a href="http://mailchimp.signup.url"
+             target="_blank"
+          >
+            Sign up
+          </a>
+        </li>
+      </ul>
+    </section>
+    <section class="d-none d-lg-block">
+      <h5 class="list-title">
+        Collections
+      </h5>
+      <ul class="list-unstyled">
+        <li class="list-item">
+          <a href="#/collection/playbills">
+            In the Spotlight
+          </a>
+        </li>
+      </ul>
+    </section>
+    <section class="d-none d-lg-block">
+      <h5 class="list-title">
+        Help
+      </h5>
+      <ul class="list-unstyled">
+        <li class="list-item">
+          <a href="http://docs.example.com"
+             target="_blank"
+          >
+            Docs
+          </a>
+        </li>
+        <li class="list-item">
+          <a href="#/help/tos">
+            Terms
+          </a>
+        </li>
+        <li class="list-item">
+          <a href="#/help/privacy">
+            Privacy
+          </a>
+        </li>
+        <li class="list-item">
+          <a href="#/help/cookies">
+            Cookies
+          </a>
+        </li>
+        <li class="list-item">
+          <a href="#/help/api">
+            API
+          </a>
+        </li>
+      </ul>
+    </section>
+  </div>
+</footer>
+
+`;
diff --git a/test/unit/specs/components/footers/__snapshots__/dashboard.spec.js.snap b/test/unit/specs/components/footers/__snapshots__/dashboard.spec.js.snap
new file mode 100644
index 00000000..2d311752
--- /dev/null
+++ b/test/unit/specs/components/footers/__snapshots__/dashboard.spec.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard footer renders correctly 1`] = `
+
+<footer id="dashboard-footer"
+        data-server-rendered="true"
+        class="footer"
+>
+  <div class="container-fluid">
+    <p class="my-2 mx-1 float-right">
+      &copy; My Company, 2017
+    </p>
+  </div>
+</footer>
+
+`;
diff --git a/test/unit/specs/components/footers/app.spec.js b/test/unit/specs/components/footers/app.spec.js
new file mode 100644
index 00000000..66b7a4a4
--- /dev/null
+++ b/test/unit/specs/components/footers/app.spec.js
@@ -0,0 +1,44 @@
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import Icon from 'vue-awesome/components/Icon'
+import 'vue-awesome/icons/twitter'
+import 'vue-awesome/icons/github'
+import 'vue-awesome/icons/envelope'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import AppFooter from '@/components/footers/App'
+import { routes } from '@/test/fixtures/routes'
+
+describe('App footer', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.use(VueRouter)
+    localVue.component('icon', Icon)
+    localVue.component(NuxtLink.name, NuxtLink)
+    router = new VueRouter({
+      routes
+    })
+    wrapper = mount(AppFooter, {
+      localVue,
+      router,
+      propsData: {
+        collections: [ collection ]
+      }
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/components/footers/dashboard.spec.js b/test/unit/specs/components/footers/dashboard.spec.js
new file mode 100644
index 00000000..768703c4
--- /dev/null
+++ b/test/unit/specs/components/footers/dashboard.spec.js
@@ -0,0 +1,24 @@
+import BootstrapVue from 'bootstrap-vue'
+
+import { mount, createLocalVue } from 'vue-test-utils'
+import DashboardFooter from '@/components/footers/Dashboard'
+
+describe('Dashboard footer', () => {
+  let localVue = null
+  let wrapper = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    wrapper = mount(DashboardFooter, {
+      localVue
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/components/navbars/__snapshots__/app.spec.js.snap b/test/unit/specs/components/navbars/__snapshots__/app.spec.js.snap
index 24c452f8..677311c1 100644
--- a/test/unit/specs/components/navbars/__snapshots__/app.spec.js.snap
+++ b/test/unit/specs/components/navbars/__snapshots__/app.spec.js.snap
@@ -30,11 +30,11 @@ exports[`App navbar renders correctly when signed in as admin 1`] = `
         </icon>
         <!---->
       </button>
-      <nuxt-link to="[object Object]"
-                 class="d-lg-none nav-link"
+      <a href="#/account/announcements"
+         class="d-lg-none nav-link"
       >
         Notifications
-      </nuxt-link>
+      </a>
       <span style="display:none;">
         <div id="announcements-container"
              class="dropdown-menu-right d-none d-md-block card"
@@ -163,11 +163,11 @@ exports[`App navbar renders correctly when signed in as non-admin 1`] = `
         </icon>
         <!---->
       </button>
-      <nuxt-link to="[object Object]"
-                 class="d-lg-none nav-link"
+      <a href="#/account/announcements"
+         class="d-lg-none nav-link"
       >
         Notifications
-      </nuxt-link>
+      </a>
       <span style="display:none;">
         <div id="announcements-container"
              class="dropdown-menu-right d-none d-md-block card"
diff --git a/test/unit/specs/components/navbars/__snapshots__/collection.spec.js.snap b/test/unit/specs/components/navbars/__snapshots__/collection.spec.js.snap
index d0189107..f51a19da 100644
--- a/test/unit/specs/components/navbars/__snapshots__/collection.spec.js.snap
+++ b/test/unit/specs/components/navbars/__snapshots__/collection.spec.js.snap
@@ -50,7 +50,7 @@ exports[`Collection navbar renders correctly when signed in as admin 1`] = `
              target="_self"
              class="nav-link"
           >
-            Contribute
+            Take Part
           </a>
         </li>
         <li class="nav-item">
@@ -80,11 +80,11 @@ exports[`Collection navbar renders correctly when signed in as admin 1`] = `
             </icon>
             <!---->
           </button>
-          <nuxt-link to="[object Object]"
-                     class="d-lg-none nav-link"
+          <a href="#/account/announcements"
+             class="d-lg-none nav-link"
           >
             Notifications
-          </nuxt-link>
+          </a>
           <span style="display:none;">
             <div id="announcements-container"
                  class="dropdown-menu-right d-none d-md-block card"
@@ -235,7 +235,7 @@ exports[`Collection navbar renders correctly when signed in as non-admin 1`] = `
              target="_self"
              class="nav-link"
           >
-            Contribute
+            Take Part
           </a>
         </li>
         <li class="nav-item">
@@ -265,11 +265,11 @@ exports[`Collection navbar renders correctly when signed in as non-admin 1`] = `
             </icon>
             <!---->
           </button>
-          <nuxt-link to="[object Object]"
-                     class="d-lg-none nav-link"
+          <a href="#/account/announcements"
+             class="d-lg-none nav-link"
           >
             Notifications
-          </nuxt-link>
+          </a>
           <span style="display:none;">
             <div id="announcements-container"
                  class="dropdown-menu-right d-none d-md-block card"
@@ -394,7 +394,7 @@ exports[`Collection navbar renders correctly when signed out 1`] = `
              target="_self"
              class="nav-link"
           >
-            Contribute
+            Take Part
           </a>
         </li>
         <li class="nav-item">
diff --git a/test/unit/specs/components/navbars/__snapshots__/dashboard.spec.js.snap b/test/unit/specs/components/navbars/__snapshots__/dashboard.spec.js.snap
index 38f4df04..225a9e8b 100644
--- a/test/unit/specs/components/navbars/__snapshots__/dashboard.spec.js.snap
+++ b/test/unit/specs/components/navbars/__snapshots__/dashboard.spec.js.snap
@@ -7,11 +7,11 @@ exports[`Dashboard navbar renders correctly in side position 1`] = `
      class="side"
 >
   <div class="brand-wrapper navbar-light text-center">
-    <nuxt-link to="[object Object]"
-               class="brand navbar-brand"
+    <a href="#/"
+       class="brand navbar-brand router-link-exact-active router-link-active"
     >
       My Brand
-    </nuxt-link>
+    </a>
   </div>
   <ul class="nav">
     <li data-index="0"
@@ -46,11 +46,11 @@ exports[`Dashboard navbar renders correctly in top position 1`] = `
      class="top"
 >
   <div class="brand-wrapper navbar-light text-center">
-    <nuxt-link to="[object Object]"
-               class="brand navbar-brand"
+    <a href="#/"
+       class="brand navbar-brand router-link-exact-active router-link-active"
     >
       My Brand
-    </nuxt-link>
+    </a>
   </div>
   <ul class="nav">
     <li data-index="0"
diff --git a/test/unit/specs/components/navbars/app.spec.js b/test/unit/specs/components/navbars/app.spec.js
index d244f77c..39c5a549 100644
--- a/test/unit/specs/components/navbars/app.spec.js
+++ b/test/unit/specs/components/navbars/app.spec.js
@@ -1,6 +1,7 @@
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
 
 import pbTestResponses from '@/test/fixtures/pybossaTestResponses.json'
 import { mount, createLocalVue } from 'vue-test-utils'
@@ -18,6 +19,7 @@ describe('App navbar', () => {
     localVue.use(BootstrapVue)
     localVue.use(Vuex)
     localVue.use(VueRouter)
+    localVue.component(NuxtLink.name, NuxtLink)
     store = new Vuex.Store({
       state: {
         currentUser: {}
diff --git a/test/unit/specs/components/navbars/collection.spec.js b/test/unit/specs/components/navbars/collection.spec.js
index 1f73463f..5684c83d 100644
--- a/test/unit/specs/components/navbars/collection.spec.js
+++ b/test/unit/specs/components/navbars/collection.spec.js
@@ -1,6 +1,7 @@
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
 
 import { routes } from '@/test/fixtures/routes'
 import collection from '@/test/fixtures/collection.json'
@@ -19,6 +20,7 @@ describe('Collection navbar', () => {
     localVue.use(BootstrapVue)
     localVue.use(Vuex)
     localVue.use(VueRouter)
+    localVue.component(NuxtLink.name, NuxtLink)
     store = new Vuex.Store({
       state: {
         currentUser: {}
diff --git a/test/unit/specs/components/navbars/dashboard.spec.js b/test/unit/specs/components/navbars/dashboard.spec.js
index a5bf4d5b..0cd83299 100644
--- a/test/unit/specs/components/navbars/dashboard.spec.js
+++ b/test/unit/specs/components/navbars/dashboard.spec.js
@@ -1,5 +1,6 @@
 import VueRouter from 'vue-router'
 import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
 
 import { routes } from '@/test/fixtures/routes'
 import { mount, createLocalVue } from 'vue-test-utils'
@@ -15,6 +16,7 @@ describe('Dashboard navbar', () => {
     localVue = createLocalVue()
     localVue.use(BootstrapVue)
     localVue.use(VueRouter)
+    localVue.component(NuxtLink.name, NuxtLink)
     router = new VueRouter({
       routes
     })
diff --git a/test/unit/specs/layouts/__snapshots__/account-dashboard.spec.js.snap b/test/unit/specs/layouts/__snapshots__/account-dashboard.spec.js.snap
new file mode 100644
index 00000000..4340898e
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/account-dashboard.spec.js.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Account dashboard layout renders correctly 1`] = `
+
+<div id="dashboard-layout-base"
+     data-server-rendered="true"
+>
+  <nav id="dashboard-navbar"
+       class="side"
+  >
+    <div class="brand-wrapper navbar-light text-center">
+      <a href="#/"
+         class="brand navbar-brand router-link-exact-active router-link-active"
+      >
+        My Brand
+      </a>
+    </div>
+    <ul class="nav">
+      <li data-index="0"
+          class="nav-item"
+      >
+        <a href="#/account/joebloggs/settings/profile"
+           target="_self"
+           class="nav-link"
+        >
+          Profile
+        </a>
+      </li>
+      <li data-index="1"
+          class="nav-item"
+      >
+        <a href="#/account/joebloggs/settings/api"
+           target="_self"
+           class="nav-link"
+        >
+          API
+        </a>
+      </li>
+      <li data-index="2"
+          class="nav-item"
+      >
+        <a href="#/account/joebloggs/settings/avatar"
+           target="_self"
+           class="nav-link"
+        >
+          Avatar
+        </a>
+      </li>
+      <li data-index="3"
+          class="nav-item"
+      >
+        <a href="#/account/joebloggs/settings/security"
+           target="_self"
+           class="nav-link"
+        >
+          Security
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <div class="dashboard">
+    <nav id="app-navbar"
+         class="navbar navbar-light"
+    >
+      <span class="app-navbar-left">
+        <a href="#/"
+           target="_self"
+           class="active navbar-brand d-lg-none"
+        >
+          <span>
+            My Brand
+          </span>
+        </a>
+      </span>
+      <ul right
+          class="app-navbar-right border-bottom navbar-nav"
+      >
+        <a href="http://docs.example.com"
+           target="_blank"
+           class="nav-link d-flex px-1"
+        >
+          <icon name="question-circle">
+          </icon>
+        </a>
+        <div id="announcements-list"
+             class="d-none d-lg-block"
+        >
+          <button id="announcements-toggle"
+                  type="button"
+                  class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+          >
+            <icon name="bell">
+            </icon>
+            <!---->
+          </button>
+          <a href="#/account/joebloggs/announcements"
+             class="d-lg-none nav-link"
+          >
+            Notifications
+          </a>
+          <span style="display:none;">
+            <div id="announcements-container"
+                 class="dropdown-menu-right d-none d-md-block card"
+            >
+              <div class="card-header">
+                <div>
+                  Notifications
+                </div>
+              </div>
+              <div id="announcements">
+              </div>
+              <no-ssr>
+                <infinite-loading class="infinite-loading">
+                  <span slot="no-results">
+                    <span>
+                      No announcements have been made yet
+                    </span>
+                  </span>
+                  <span slot="no-more">
+                    <!---->
+                  </span>
+                </infinite-loading>
+              </no-ssr>
+            </div>
+          </span>
+        </div>
+        <li class="nav-item b-nav-dropdown dropdown">
+          <a href="#"
+             aria-haspopup="true"
+             aria-expanded="false"
+             class="nav-link dropdown-toggle"
+          >
+            <span>
+              joebloggs
+            </span>
+          </a>
+          <div role="menu"
+               class="dropdown-menu dropdown-menu-right"
+          >
+            <a href="#/account/joebloggs"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Profile
+            </a>
+            <a href="#/account/joebloggs/settings/profile"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Settings
+            </a>
+            <!---->
+            <div role="separator"
+                 class="dropdown-divider"
+            >
+            </div>
+            <a role="menuitem"
+               href="#"
+               target="_self"
+               class="dropdown-item"
+            >
+              Sign Out
+            </a>
+          </div>
+        </li>
+      </ul>
+    </nav>
+    <nav id="dashboard-navbar"
+         class="top"
+    >
+      <div class="brand-wrapper navbar-light text-center">
+        <a href="#/"
+           class="brand navbar-brand router-link-exact-active router-link-active"
+        >
+          My Brand
+        </a>
+      </div>
+      <ul class="nav">
+        <li data-index="0"
+            class="nav-item"
+        >
+          <a href="#/account/joebloggs/settings/profile"
+             target="_self"
+             class="nav-link"
+          >
+            Profile
+          </a>
+        </li>
+        <li data-index="1"
+            class="nav-item"
+        >
+          <a href="#/account/joebloggs/settings/api"
+             target="_self"
+             class="nav-link"
+          >
+            API
+          </a>
+        </li>
+        <li data-index="2"
+            class="nav-item"
+        >
+          <a href="#/account/joebloggs/settings/avatar"
+             target="_self"
+             class="nav-link"
+          >
+            Avatar
+          </a>
+        </li>
+        <li data-index="3"
+            class="nav-item"
+        >
+          <a href="#/account/joebloggs/settings/security"
+             target="_self"
+             class="nav-link"
+          >
+            Security
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <main class="container-fluid px-lg-4 py-4">
+      <nuxt>
+      </nuxt>
+    </main>
+    <footer id="dashboard-footer"
+            class="footer"
+    >
+      <div class="container-fluid">
+        <p class="my-2 mx-1 float-right">
+          &copy; My Company, 2017
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/admin-collection-dashboard.spec.js.snap b/test/unit/specs/layouts/__snapshots__/admin-collection-dashboard.spec.js.snap
new file mode 100644
index 00000000..95c299ec
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/admin-collection-dashboard.spec.js.snap
@@ -0,0 +1,248 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collection admin dashboard layout renders correctly 1`] = `
+
+<div id="dashboard-layout-base"
+     data-server-rendered="true"
+>
+  <nav id="dashboard-navbar"
+       class="side"
+  >
+    <div class="brand-wrapper navbar-light text-center">
+      <a href="#/"
+         class="brand navbar-brand router-link-exact-active router-link-active"
+      >
+        My Brand
+      </a>
+    </div>
+    <ul class="nav">
+      <li data-index="0"
+          class="nav-item"
+      >
+        <a href="#/admin/collection"
+           target="_self"
+           class="nav-link"
+        >
+          Open Collection
+        </a>
+      </li>
+      <li data-index="1"
+          class="nav-item"
+      >
+        <a href="#/admin/collection/new"
+           target="_self"
+           class="nav-link"
+        >
+          New Collection
+        </a>
+      </li>
+      <li data-index="2"
+          class="nav-item"
+      >
+        <a href="#/admin/collection/playbills/settings"
+           target="_self"
+           class="nav-link"
+        >
+          Settings
+        </a>
+      </li>
+      <li data-index="3"
+          class="nav-item"
+      >
+        <a href="#/admin/collection/playbills/content"
+           target="_self"
+           class="nav-link"
+        >
+          Content
+        </a>
+      </li>
+      <li data-index="4"
+          class="nav-item"
+      >
+        <a href="#/admin/collection/playbills/terminology"
+           target="_self"
+           class="nav-link"
+        >
+          Terminology
+        </a>
+      </li>
+      <li data-index="5"
+          class="nav-item"
+      >
+        <a href="#/admin/collection/playbills/tags"
+           target="_self"
+           class="nav-link"
+        >
+          Tags
+        </a>
+      </li>
+      <li data-index="6"
+          class="nav-item"
+      >
+        <a href="#/admin/collection/playbills/featured"
+           target="_self"
+           class="nav-link"
+        >
+          Featured
+        </a>
+      </li>
+      <li data-index="7"
+          class="nav-item"
+      >
+        <a href="#/admin/collection/playbills/delete"
+           target="_self"
+           class="nav-link"
+        >
+          Delete
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <div class="dashboard">
+    <nav id="app-navbar"
+         class="navbar navbar-light"
+    >
+      <span class="app-navbar-left">
+        <a href="#/"
+           target="_self"
+           class="active navbar-brand d-lg-none"
+        >
+          <span>
+            My Brand
+          </span>
+        </a>
+      </span>
+      <ul id="sign-in-up"
+          right
+          class="app-navbar-right navbar-nav"
+      >
+        <li class="nav-item">
+          <a href="#/account/signin?next=%2F"
+             target="_self"
+             class="nav-link"
+          >
+            Sign in
+          </a>
+        </li>
+        <li id="btn-register"
+            class="nav-item"
+        >
+          <a href="#/account/register"
+             target="_self"
+             class="nav-link"
+          >
+            Sign up
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <nav id="dashboard-navbar"
+         class="top"
+    >
+      <div class="brand-wrapper navbar-light text-center">
+        <a href="#/"
+           class="brand navbar-brand router-link-exact-active router-link-active"
+        >
+          My Brand
+        </a>
+      </div>
+      <ul class="nav">
+        <li data-index="0"
+            class="nav-item"
+        >
+          <a href="#/admin/collection"
+             target="_self"
+             class="nav-link"
+          >
+            Open Collection
+          </a>
+        </li>
+        <li data-index="1"
+            class="nav-item"
+        >
+          <a href="#/admin/collection/new"
+             target="_self"
+             class="nav-link"
+          >
+            New Collection
+          </a>
+        </li>
+        <li data-index="2"
+            class="nav-item"
+        >
+          <a href="#/admin/collection/playbills/settings"
+             target="_self"
+             class="nav-link"
+          >
+            Settings
+          </a>
+        </li>
+        <li data-index="3"
+            class="nav-item"
+        >
+          <a href="#/admin/collection/playbills/content"
+             target="_self"
+             class="nav-link"
+          >
+            Content
+          </a>
+        </li>
+        <li data-index="4"
+            class="nav-item"
+        >
+          <a href="#/admin/collection/playbills/terminology"
+             target="_self"
+             class="nav-link"
+          >
+            Terminology
+          </a>
+        </li>
+        <li data-index="5"
+            class="nav-item"
+        >
+          <a href="#/admin/collection/playbills/tags"
+             target="_self"
+             class="nav-link"
+          >
+            Tags
+          </a>
+        </li>
+        <li data-index="6"
+            class="nav-item"
+        >
+          <a href="#/admin/collection/playbills/featured"
+             target="_self"
+             class="nav-link"
+          >
+            Featured
+          </a>
+        </li>
+        <li data-index="7"
+            class="nav-item"
+        >
+          <a href="#/admin/collection/playbills/delete"
+             target="_self"
+             class="nav-link"
+          >
+            Delete
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <main class="container-fluid px-lg-4 py-4">
+      <nuxt>
+      </nuxt>
+    </main>
+    <footer id="dashboard-footer"
+            class="footer"
+    >
+      <div class="container-fluid">
+        <p class="my-2 mx-1 float-right">
+          &copy; My Company, 2017
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/admin-project-dashboard.spec.js.snap b/test/unit/specs/layouts/__snapshots__/admin-project-dashboard.spec.js.snap
new file mode 100644
index 00000000..51b75d7b
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/admin-project-dashboard.spec.js.snap
@@ -0,0 +1,179 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Project admin dashboard layout renders correctly 1`] = `
+
+<div id="dashboard-layout-base"
+     data-server-rendered="true"
+>
+  <nav id="dashboard-navbar"
+       class="side"
+  >
+    <div class="brand-wrapper navbar-light text-center">
+      <a href="#/"
+         class="brand navbar-brand router-link-exact-active router-link-active"
+      >
+        My Brand
+      </a>
+    </div>
+    <ul class="nav">
+      <li data-index="0"
+          class="nav-item"
+      >
+        <a href="#/admin/project/open"
+           target="_self"
+           class="nav-link"
+        >
+          Open Project
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <div class="dashboard">
+    <nav id="app-navbar"
+         class="navbar navbar-light"
+    >
+      <span class="app-navbar-left">
+        <a href="#/"
+           target="_self"
+           class="active navbar-brand d-lg-none"
+        >
+          <span>
+            My Brand
+          </span>
+        </a>
+      </span>
+      <ul right
+          class="app-navbar-right border-bottom navbar-nav"
+      >
+        <a href="http://docs.example.com"
+           target="_blank"
+           class="nav-link d-flex px-1"
+        >
+          <icon name="question-circle">
+          </icon>
+        </a>
+        <div id="announcements-list"
+             class="d-none d-lg-block"
+        >
+          <button id="announcements-toggle"
+                  type="button"
+                  class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+          >
+            <icon name="bell">
+            </icon>
+            <!---->
+          </button>
+          <a href="#/account/joebloggs/announcements"
+             class="d-lg-none nav-link"
+          >
+            Notifications
+          </a>
+          <span style="display:none;">
+            <div id="announcements-container"
+                 class="dropdown-menu-right d-none d-md-block card"
+            >
+              <div class="card-header">
+                <div>
+                  Notifications
+                </div>
+              </div>
+              <div id="announcements">
+              </div>
+              <no-ssr>
+                <infinite-loading class="infinite-loading">
+                  <span slot="no-results">
+                    <span>
+                      No announcements have been made yet
+                    </span>
+                  </span>
+                  <span slot="no-more">
+                    <!---->
+                  </span>
+                </infinite-loading>
+              </no-ssr>
+            </div>
+          </span>
+        </div>
+        <li class="nav-item b-nav-dropdown dropdown">
+          <a href="#"
+             aria-haspopup="true"
+             aria-expanded="false"
+             class="nav-link dropdown-toggle"
+          >
+            <span>
+              joebloggs
+            </span>
+          </a>
+          <div role="menu"
+               class="dropdown-menu dropdown-menu-right"
+          >
+            <a href="#/account/joebloggs"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Profile
+            </a>
+            <a href="#/account/joebloggs/settings/profile"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Settings
+            </a>
+            <!---->
+            <div role="separator"
+                 class="dropdown-divider"
+            >
+            </div>
+            <a role="menuitem"
+               href="#"
+               target="_self"
+               class="dropdown-item"
+            >
+              Sign Out
+            </a>
+          </div>
+        </li>
+      </ul>
+    </nav>
+    <nav id="dashboard-navbar"
+         class="top"
+    >
+      <div class="brand-wrapper navbar-light text-center">
+        <a href="#/"
+           class="brand navbar-brand router-link-exact-active router-link-active"
+        >
+          My Brand
+        </a>
+      </div>
+      <ul class="nav">
+        <li data-index="0"
+            class="nav-item"
+        >
+          <a href="#/admin/project/open"
+             target="_self"
+             class="nav-link"
+          >
+            Open Project
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <main class="container-fluid px-lg-4 py-4">
+      <nuxt>
+      </nuxt>
+    </main>
+    <footer id="dashboard-footer"
+            class="footer"
+    >
+      <div class="container-fluid">
+        <p class="my-2 mx-1 float-right">
+          &copy; My Company, 2017
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/admin-site-dashboard.spec.js.snap b/test/unit/specs/layouts/__snapshots__/admin-site-dashboard.spec.js.snap
new file mode 100644
index 00000000..2caa06a0
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/admin-site-dashboard.spec.js.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Site admin dashboard layout renders correctly 1`] = `
+
+<div id="dashboard-layout-base"
+     data-server-rendered="true"
+>
+  <nav id="dashboard-navbar"
+       class="side"
+  >
+    <div class="brand-wrapper navbar-light text-center">
+      <a href="#/"
+         class="brand navbar-brand router-link-exact-active router-link-active"
+      >
+        My Brand
+      </a>
+    </div>
+    <ul class="nav">
+      <li data-index="0"
+          class="nav-item"
+      >
+        <a href="#/admin/site/dashboard"
+           target="_self"
+           class="nav-link"
+        >
+          Dashboard
+        </a>
+      </li>
+      <li data-index="1"
+          class="nav-item"
+      >
+        <a href="#/admin/site/users"
+           target="_self"
+           class="nav-link"
+        >
+          Users
+        </a>
+      </li>
+      <li data-index="2"
+          class="nav-item"
+      >
+        <a href="#/admin/site/announcements"
+           target="_self"
+           class="nav-link"
+        >
+          Announcements
+        </a>
+      </li>
+      <li data-index="3"
+          class="nav-item"
+      >
+        <a href="#/admin/site/jobs"
+           target="_self"
+           class="nav-link"
+        >
+          Background Tasks
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <div class="dashboard">
+    <nav id="app-navbar"
+         class="navbar navbar-light"
+    >
+      <span class="app-navbar-left">
+        <a href="#/"
+           target="_self"
+           class="active navbar-brand d-lg-none"
+        >
+          <span>
+            My Brand
+          </span>
+        </a>
+      </span>
+      <ul right
+          class="app-navbar-right border-bottom navbar-nav"
+      >
+        <a href="http://docs.example.com"
+           target="_blank"
+           class="nav-link d-flex px-1"
+        >
+          <icon name="question-circle">
+          </icon>
+        </a>
+        <div id="announcements-list"
+             class="d-none d-lg-block"
+        >
+          <button id="announcements-toggle"
+                  type="button"
+                  class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+          >
+            <icon name="bell">
+            </icon>
+            <!---->
+          </button>
+          <a href="#/account/joebloggs/announcements"
+             class="d-lg-none nav-link"
+          >
+            Notifications
+          </a>
+          <span style="display:none;">
+            <div id="announcements-container"
+                 class="dropdown-menu-right d-none d-md-block card"
+            >
+              <div class="card-header">
+                <div>
+                  Notifications
+                </div>
+              </div>
+              <div id="announcements">
+              </div>
+              <no-ssr>
+                <infinite-loading class="infinite-loading">
+                  <span slot="no-results">
+                    <span>
+                      No announcements have been made yet
+                    </span>
+                  </span>
+                  <span slot="no-more">
+                    <!---->
+                  </span>
+                </infinite-loading>
+              </no-ssr>
+            </div>
+          </span>
+        </div>
+        <li class="nav-item b-nav-dropdown dropdown">
+          <a href="#"
+             aria-haspopup="true"
+             aria-expanded="false"
+             class="nav-link dropdown-toggle"
+          >
+            <span>
+              joebloggs
+            </span>
+          </a>
+          <div role="menu"
+               class="dropdown-menu dropdown-menu-right"
+          >
+            <a href="#/account/joebloggs"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Profile
+            </a>
+            <a href="#/account/joebloggs/settings/profile"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Settings
+            </a>
+            <!---->
+            <div role="separator"
+                 class="dropdown-divider"
+            >
+            </div>
+            <a role="menuitem"
+               href="#"
+               target="_self"
+               class="dropdown-item"
+            >
+              Sign Out
+            </a>
+          </div>
+        </li>
+      </ul>
+    </nav>
+    <nav id="dashboard-navbar"
+         class="top"
+    >
+      <div class="brand-wrapper navbar-light text-center">
+        <a href="#/"
+           class="brand navbar-brand router-link-exact-active router-link-active"
+        >
+          My Brand
+        </a>
+      </div>
+      <ul class="nav">
+        <li data-index="0"
+            class="nav-item"
+        >
+          <a href="#/admin/site/dashboard"
+             target="_self"
+             class="nav-link"
+          >
+            Dashboard
+          </a>
+        </li>
+        <li data-index="1"
+            class="nav-item"
+        >
+          <a href="#/admin/site/users"
+             target="_self"
+             class="nav-link"
+          >
+            Users
+          </a>
+        </li>
+        <li data-index="2"
+            class="nav-item"
+        >
+          <a href="#/admin/site/announcements"
+             target="_self"
+             class="nav-link"
+          >
+            Announcements
+          </a>
+        </li>
+        <li data-index="3"
+            class="nav-item"
+        >
+          <a href="#/admin/site/jobs"
+             target="_self"
+             class="nav-link"
+          >
+            Background Tasks
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <main class="container-fluid px-lg-4 py-4">
+      <nuxt>
+      </nuxt>
+    </main>
+    <footer id="dashboard-footer"
+            class="footer"
+    >
+      <div class="container-fluid">
+        <p class="my-2 mx-1 float-right">
+          &copy; My Company, 2017
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/collection-default.spec.js.snap b/test/unit/specs/layouts/__snapshots__/collection-default.spec.js.snap
new file mode 100644
index 00000000..7d60c439
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/collection-default.spec.js.snap
@@ -0,0 +1,273 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collection default layout renders correctly 1`] = `
+
+<div id="collection-layout-base"
+     data-server-rendered="true"
+>
+  <div id="collection-background"
+       style="background-image:url(http://example.com/background.jpg);"
+  >
+  </div>
+  <nav id="collection-navbar"
+       class="navbar navbar-dark navbar-expand-md"
+  >
+    <div class="container">
+      <a href="#/collection/playbills"
+         target="_self"
+         class="navbar-brand"
+      >
+        <span>
+          In the Spotlight
+        </span>
+      </a>
+      <button type="button"
+              data-toggle="collapse"
+              data-target="#main-nav-collapse"
+              aria-controls="main-nav-collapse"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+              class="
+        hamburger
+        hamburger--collapse
+        navbar-toggler
+        navbar-toggler-right"
+      >
+        <span class="hamburger-box">
+          <span class="hamburger-inner">
+          </span>
+        </span>
+      </button>
+      <div id="main-nav-collapse"
+           class="navbar-collapse collapse"
+           style="display:none;"
+      >
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a href="#/collection/playbills/about"
+               target="_self"
+               class="nav-link"
+            >
+              About
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#/collection/playbills/projects"
+               target="_self"
+               class="nav-link"
+            >
+              Take Part
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="http://example.com/discuss"
+               target="_self"
+               class="nav-link"
+            >
+              Discuss
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#/collection/playbills/data"
+               target="_self"
+               class="nav-link"
+            >
+              Data
+            </a>
+          </li>
+        </ul>
+        <ul class="navbar-nav">
+          <div id="announcements-list">
+            <button id="announcements-toggle"
+                    type="button"
+                    class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+            >
+              <icon name="bell">
+              </icon>
+              <!---->
+            </button>
+            <a href="#/account/joebloggs/announcements"
+               class="d-lg-none nav-link"
+            >
+              Notifications
+            </a>
+            <span style="display:none;">
+              <div id="announcements-container"
+                   class="dropdown-menu-right d-none d-md-block card"
+              >
+                <div class="card-header">
+                  <div>
+                    Notifications
+                  </div>
+                </div>
+                <div id="announcements">
+                </div>
+                <no-ssr>
+                  <infinite-loading class="infinite-loading">
+                    <span slot="no-results">
+                      <span>
+                        No announcements have been made yet
+                      </span>
+                    </span>
+                    <span slot="no-more">
+                      <!---->
+                    </span>
+                  </infinite-loading>
+                </no-ssr>
+              </div>
+            </span>
+          </div>
+          <li class="nav-item b-nav-dropdown dropdown">
+            <a href="#"
+               aria-haspopup="true"
+               aria-expanded="false"
+               class="nav-link dropdown-toggle"
+            >
+              <span>
+                joebloggs
+              </span>
+            </a>
+            <div role="menu"
+                 class="dropdown-menu dropdown-menu-right"
+            >
+              <a href="#/account/joebloggs"
+                 role="menuitem"
+                 target="_self"
+                 class="dropdown-item"
+              >
+                Profile
+              </a>
+              <a href="#/account/joebloggs/settings/profile"
+                 role="menuitem"
+                 target="_self"
+                 class="dropdown-item"
+              >
+                Settings
+              </a>
+              <!---->
+              <div role="separator"
+                   class="dropdown-divider"
+              >
+              </div>
+              <a role="menuitem"
+                 href="#"
+                 target="_self"
+                 class="dropdown-item"
+              >
+                Sign Out
+              </a>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <main>
+    <nuxt>
+    </nuxt>
+  </main>
+  <footer id="app-footer"
+          class="footer"
+  >
+    <div class="container pt-3 pb-2">
+      <section>
+        <a href="#/"
+           class="router-link-exact-active router-link-active"
+        >
+          Part of the My Brand crowdsourcing platform
+        </a>
+        <p class="my-2">
+          &copy; My Company, 2017
+        </p>
+        <ul class="list-inline mt-2 mb-0">
+          <li class="list-inline-item mx-1">
+            <a href="https://twitter.com/mytwitterhandle"
+               class="text-muted"
+            >
+              <icon name="twitter">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="mailto:me@example.com"
+               class="text-muted"
+            >
+              <icon name="envelope">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="https://github.com/Organization/repo"
+               class="text-muted"
+            >
+              <icon name="github">
+              </icon>
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Newsletter
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://mailchimp.signup.url"
+               target="_blank"
+            >
+              Sign up
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Collections
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="#/collection/playbills">
+              In the Spotlight
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Help
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://docs.example.com"
+               target="_blank"
+            >
+              Docs
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/tos">
+              Terms
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/privacy">
+              Privacy
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/cookies">
+              Cookies
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/api">
+              API
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </footer>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/collection-fullscreen-dark.spec.js.snap b/test/unit/specs/layouts/__snapshots__/collection-fullscreen-dark.spec.js.snap
new file mode 100644
index 00000000..405d52da
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/collection-fullscreen-dark.spec.js.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collection fullscreen dark layout renders correctly 1`] = `
+
+<div id="collection-fullscreen-dark-layout"
+     data-server-rendered="true"
+>
+  <div id="collection-layout-base">
+    <div id="collection-background"
+         style="background-image:url(http://example.com/background.jpg);"
+    >
+    </div>
+    <nav id="collection-navbar"
+         class="navbar navbar-dark navbar-expand-md"
+    >
+      <div class="container">
+        <a href="#/collection/playbills"
+           target="_self"
+           class="navbar-brand"
+        >
+          <span>
+            In the Spotlight
+          </span>
+        </a>
+        <button type="button"
+                data-toggle="collapse"
+                data-target="#main-nav-collapse"
+                aria-controls="main-nav-collapse"
+                aria-expanded="false"
+                aria-label="Toggle navigation"
+                class="
+        hamburger
+        hamburger--collapse
+        navbar-toggler
+        navbar-toggler-right"
+        >
+          <span class="hamburger-box">
+            <span class="hamburger-inner">
+            </span>
+          </span>
+        </button>
+        <div id="main-nav-collapse"
+             class="navbar-collapse collapse"
+             style="display:none;"
+        >
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a href="#/collection/playbills/about"
+                 target="_self"
+                 class="nav-link"
+              >
+                About
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#/collection/playbills/projects"
+                 target="_self"
+                 class="nav-link"
+              >
+                Take Part
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="http://example.com/discuss"
+                 target="_self"
+                 class="nav-link"
+              >
+                Discuss
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#/collection/playbills/data"
+                 target="_self"
+                 class="nav-link"
+              >
+                Data
+              </a>
+            </li>
+          </ul>
+          <ul class="navbar-nav">
+            <div id="announcements-list">
+              <button id="announcements-toggle"
+                      type="button"
+                      class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+              >
+                <icon name="bell">
+                </icon>
+                <!---->
+              </button>
+              <a href="#/account/joebloggs/announcements"
+                 class="d-lg-none nav-link"
+              >
+                Notifications
+              </a>
+              <span style="display:none;">
+                <div id="announcements-container"
+                     class="dropdown-menu-right d-none d-md-block card"
+                >
+                  <div class="card-header">
+                    <div>
+                      Notifications
+                    </div>
+                  </div>
+                  <div id="announcements">
+                  </div>
+                  <no-ssr>
+                    <infinite-loading class="infinite-loading">
+                      <span slot="no-results">
+                        <span>
+                          No announcements have been made yet
+                        </span>
+                      </span>
+                      <span slot="no-more">
+                        <!---->
+                      </span>
+                    </infinite-loading>
+                  </no-ssr>
+                </div>
+              </span>
+            </div>
+            <li class="nav-item b-nav-dropdown dropdown">
+              <a href="#"
+                 aria-haspopup="true"
+                 aria-expanded="false"
+                 class="nav-link dropdown-toggle"
+              >
+                <span>
+                  joebloggs
+                </span>
+              </a>
+              <div role="menu"
+                   class="dropdown-menu dropdown-menu-right"
+              >
+                <a href="#/account/joebloggs"
+                   role="menuitem"
+                   target="_self"
+                   class="dropdown-item"
+                >
+                  Profile
+                </a>
+                <a href="#/account/joebloggs/settings/profile"
+                   role="menuitem"
+                   target="_self"
+                   class="dropdown-item"
+                >
+                  Settings
+                </a>
+                <!---->
+                <div role="separator"
+                     class="dropdown-divider"
+                >
+                </div>
+                <a role="menuitem"
+                   href="#"
+                   target="_self"
+                   class="dropdown-item"
+                >
+                  Sign Out
+                </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <main>
+      <div class="content">
+        <nuxt>
+        </nuxt>
+      </div>
+    </main>
+    <!---->
+  </div>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/collection-tabs.spec.js.snap b/test/unit/specs/layouts/__snapshots__/collection-tabs.spec.js.snap
new file mode 100644
index 00000000..672d2a38
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/collection-tabs.spec.js.snap
@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collection tabs layout renders correctly 1`] = `
+
+<div id="collection-layout-base"
+     data-server-rendered="true"
+>
+  <div id="collection-background"
+       style="background-image:url(http://example.com/background.jpg);"
+  >
+  </div>
+  <nav id="collection-navbar"
+       class="navbar navbar-dark navbar-expand-md"
+  >
+    <div class="container">
+      <a href="#/collection/playbills"
+         target="_self"
+         class="navbar-brand"
+      >
+        <span>
+          In the Spotlight
+        </span>
+      </a>
+      <button type="button"
+              data-toggle="collapse"
+              data-target="#main-nav-collapse"
+              aria-controls="main-nav-collapse"
+              aria-expanded="false"
+              aria-label="Toggle navigation"
+              class="
+        hamburger
+        hamburger--collapse
+        navbar-toggler
+        navbar-toggler-right"
+      >
+        <span class="hamburger-box">
+          <span class="hamburger-inner">
+          </span>
+        </span>
+      </button>
+      <div id="main-nav-collapse"
+           class="navbar-collapse collapse"
+           style="display:none;"
+      >
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a href="#/collection/playbills/about"
+               target="_self"
+               class="nav-link"
+            >
+              About
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#/collection/playbills/projects"
+               target="_self"
+               class="nav-link"
+            >
+              Take Part
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="http://example.com/discuss"
+               target="_self"
+               class="nav-link"
+            >
+              Discuss
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#/collection/playbills/data"
+               target="_self"
+               class="nav-link"
+            >
+              Data
+            </a>
+          </li>
+        </ul>
+        <ul class="navbar-nav">
+          <div id="announcements-list">
+            <button id="announcements-toggle"
+                    type="button"
+                    class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+            >
+              <icon name="bell">
+              </icon>
+              <!---->
+            </button>
+            <a href="#/account/joebloggs/announcements"
+               class="d-lg-none nav-link"
+            >
+              Notifications
+            </a>
+            <span style="display:none;">
+              <div id="announcements-container"
+                   class="dropdown-menu-right d-none d-md-block card"
+              >
+                <div class="card-header">
+                  <div>
+                    Notifications
+                  </div>
+                </div>
+                <div id="announcements">
+                </div>
+                <no-ssr>
+                  <infinite-loading class="infinite-loading">
+                    <span slot="no-results">
+                      <span>
+                        No announcements have been made yet
+                      </span>
+                    </span>
+                    <span slot="no-more">
+                      <!---->
+                    </span>
+                  </infinite-loading>
+                </no-ssr>
+              </div>
+            </span>
+          </div>
+          <li class="nav-item b-nav-dropdown dropdown">
+            <a href="#"
+               aria-haspopup="true"
+               aria-expanded="false"
+               class="nav-link dropdown-toggle"
+            >
+              <span>
+                joebloggs
+              </span>
+            </a>
+            <div role="menu"
+                 class="dropdown-menu dropdown-menu-right"
+            >
+              <a href="#/account/joebloggs"
+                 role="menuitem"
+                 target="_self"
+                 class="dropdown-item"
+              >
+                Profile
+              </a>
+              <a href="#/account/joebloggs/settings/profile"
+                 role="menuitem"
+                 target="_self"
+                 class="dropdown-item"
+              >
+                Settings
+              </a>
+              <!---->
+              <div role="separator"
+                   class="dropdown-divider"
+              >
+              </div>
+              <a role="menuitem"
+                 href="#"
+                 target="_self"
+                 class="dropdown-item"
+              >
+                Sign Out
+              </a>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <main>
+    <div id="collection-tabs-layout"
+         class="container mb-5"
+    >
+      <ul class="nav-unstyled nav">
+        <li id="hidden-item"
+            class="nav-item"
+        >
+          <a href="#"
+             target="_self"
+             class="nav-link"
+          >
+          </a>
+        </li>
+      </ul>
+      <main>
+        <nuxt>
+        </nuxt>
+      </main>
+    </div>
+  </main>
+  <footer id="app-footer"
+          class="footer"
+  >
+    <div class="container pt-3 pb-2">
+      <section>
+        <a href="#/"
+           class="router-link-exact-active router-link-active"
+        >
+          Part of the My Brand crowdsourcing platform
+        </a>
+        <p class="my-2">
+          &copy; My Company, 2017
+        </p>
+        <ul class="list-inline mt-2 mb-0">
+          <li class="list-inline-item mx-1">
+            <a href="https://twitter.com/mytwitterhandle"
+               class="text-muted"
+            >
+              <icon name="twitter">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="mailto:me@example.com"
+               class="text-muted"
+            >
+              <icon name="envelope">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="https://github.com/Organization/repo"
+               class="text-muted"
+            >
+              <icon name="github">
+              </icon>
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Newsletter
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://mailchimp.signup.url"
+               target="_blank"
+            >
+              Sign up
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Collections
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="#/collection/playbills">
+              In the Spotlight
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Help
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://docs.example.com"
+               target="_blank"
+            >
+              Docs
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/tos">
+              Terms
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/privacy">
+              Privacy
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/cookies">
+              Cookies
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/api">
+              API
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </footer>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/container.spec.js.snap b/test/unit/specs/layouts/__snapshots__/container.spec.js.snap
new file mode 100644
index 00000000..4252c01c
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/container.spec.js.snap
@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Container layout renders correctly 1`] = `
+
+<div id="default-layout-base"
+     data-server-rendered="true"
+>
+  <nav id="app-navbar"
+       class="navbar navbar-light fixed-top"
+  >
+    <span class="app-navbar-left">
+      <a href="#/"
+         target="_self"
+         class="active navbar-brand d-undefined-none"
+      >
+        <span>
+          My Brand
+        </span>
+      </a>
+    </span>
+    <ul right
+        class="app-navbar-right border-bottom navbar-nav"
+    >
+      <div id="announcements-list"
+           class="d-none d-lg-block"
+      >
+        <button id="announcements-toggle"
+                type="button"
+                class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+        >
+          <icon name="bell">
+          </icon>
+          <!---->
+        </button>
+        <a href="#/account/joebloggs/announcements"
+           class="d-lg-none nav-link"
+        >
+          Notifications
+        </a>
+        <span style="display:none;">
+          <div id="announcements-container"
+               class="dropdown-menu-right d-none d-md-block card"
+          >
+            <div class="card-header">
+              <div>
+                Notifications
+              </div>
+            </div>
+            <div id="announcements">
+            </div>
+            <no-ssr>
+              <infinite-loading class="infinite-loading">
+                <span slot="no-results">
+                  <span>
+                    No announcements have been made yet
+                  </span>
+                </span>
+                <span slot="no-more">
+                  <!---->
+                </span>
+              </infinite-loading>
+            </no-ssr>
+          </div>
+        </span>
+      </div>
+      <li class="nav-item b-nav-dropdown dropdown">
+        <a href="#"
+           aria-haspopup="true"
+           aria-expanded="false"
+           class="nav-link dropdown-toggle"
+        >
+          <span>
+            joebloggs
+          </span>
+        </a>
+        <div role="menu"
+             class="dropdown-menu dropdown-menu-right"
+        >
+          <a href="#/account/joebloggs"
+             role="menuitem"
+             target="_self"
+             class="dropdown-item"
+          >
+            Profile
+          </a>
+          <a href="#/account/joebloggs/settings/profile"
+             role="menuitem"
+             target="_self"
+             class="dropdown-item"
+          >
+            Settings
+          </a>
+          <!---->
+          <div role="separator"
+               class="dropdown-divider"
+          >
+          </div>
+          <a role="menuitem"
+             href="#"
+             target="_self"
+             class="dropdown-item"
+          >
+            Sign Out
+          </a>
+        </div>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <div class="my-4 my-lg-5 container">
+      <div class="mx-auto col-xl-8">
+        <nuxt>
+        </nuxt>
+      </div>
+    </div>
+  </main>
+  <footer id="app-footer"
+          class="footer"
+  >
+    <div class="container pt-3 pb-2">
+      <section>
+        <a href="#/"
+           class="router-link-exact-active router-link-active"
+        >
+          Part of the My Brand crowdsourcing platform
+        </a>
+        <p class="my-2">
+          &copy; My Company, 2017
+        </p>
+        <ul class="list-inline mt-2 mb-0">
+          <li class="list-inline-item mx-1">
+            <a href="https://twitter.com/mytwitterhandle"
+               class="text-muted"
+            >
+              <icon name="twitter">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="mailto:me@example.com"
+               class="text-muted"
+            >
+              <icon name="envelope">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="https://github.com/Organization/repo"
+               class="text-muted"
+            >
+              <icon name="github">
+              </icon>
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Newsletter
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://mailchimp.signup.url"
+               target="_blank"
+            >
+              Sign up
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Collections
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="#/collection/playbills">
+              In the Spotlight
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Help
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://docs.example.com"
+               target="_blank"
+            >
+              Docs
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/tos">
+              Terms
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/privacy">
+              Privacy
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/cookies">
+              Cookies
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/api">
+              API
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </footer>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/default.spec.js.snap b/test/unit/specs/layouts/__snapshots__/default.spec.js.snap
new file mode 100644
index 00000000..0c1f5d7c
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/default.spec.js.snap
@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default layout renders correctly 1`] = `
+
+<div id="default-layout-base"
+     data-server-rendered="true"
+>
+  <nav id="app-navbar"
+       class="navbar navbar-light fixed-top"
+  >
+    <span class="app-navbar-left">
+      <a href="#/"
+         target="_self"
+         class="active navbar-brand d-undefined-none"
+      >
+        <span>
+          My Brand
+        </span>
+      </a>
+    </span>
+    <ul right
+        class="app-navbar-right border-bottom navbar-nav"
+    >
+      <div id="announcements-list"
+           class="d-none d-lg-block"
+      >
+        <button id="announcements-toggle"
+                type="button"
+                class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+        >
+          <icon name="bell">
+          </icon>
+          <!---->
+        </button>
+        <a href="#/account/joebloggs/announcements"
+           class="d-lg-none nav-link"
+        >
+          Notifications
+        </a>
+        <span style="display:none;">
+          <div id="announcements-container"
+               class="dropdown-menu-right d-none d-md-block card"
+          >
+            <div class="card-header">
+              <div>
+                Notifications
+              </div>
+            </div>
+            <div id="announcements">
+            </div>
+            <no-ssr>
+              <infinite-loading class="infinite-loading">
+                <span slot="no-results">
+                  <span>
+                    No announcements have been made yet
+                  </span>
+                </span>
+                <span slot="no-more">
+                  <!---->
+                </span>
+              </infinite-loading>
+            </no-ssr>
+          </div>
+        </span>
+      </div>
+      <li class="nav-item b-nav-dropdown dropdown">
+        <a href="#"
+           aria-haspopup="true"
+           aria-expanded="false"
+           class="nav-link dropdown-toggle"
+        >
+          <span>
+            joebloggs
+          </span>
+        </a>
+        <div role="menu"
+             class="dropdown-menu dropdown-menu-right"
+        >
+          <a href="#/account/joebloggs"
+             role="menuitem"
+             target="_self"
+             class="dropdown-item"
+          >
+            Profile
+          </a>
+          <a href="#/account/joebloggs/settings/profile"
+             role="menuitem"
+             target="_self"
+             class="dropdown-item"
+          >
+            Settings
+          </a>
+          <!---->
+          <div role="separator"
+               class="dropdown-divider"
+          >
+          </div>
+          <a role="menuitem"
+             href="#"
+             target="_self"
+             class="dropdown-item"
+          >
+            Sign Out
+          </a>
+        </div>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <nuxt>
+    </nuxt>
+  </main>
+  <footer id="app-footer"
+          class="footer"
+  >
+    <div class="container pt-3 pb-2">
+      <section>
+        <a href="#/"
+           class="router-link-exact-active router-link-active"
+        >
+          Part of the My Brand crowdsourcing platform
+        </a>
+        <p class="my-2">
+          &copy; My Company, 2017
+        </p>
+        <ul class="list-inline mt-2 mb-0">
+          <li class="list-inline-item mx-1">
+            <a href="https://twitter.com/mytwitterhandle"
+               class="text-muted"
+            >
+              <icon name="twitter">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="mailto:me@example.com"
+               class="text-muted"
+            >
+              <icon name="envelope">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="https://github.com/Organization/repo"
+               class="text-muted"
+            >
+              <icon name="github">
+              </icon>
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Newsletter
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://mailchimp.signup.url"
+               target="_blank"
+            >
+              Sign up
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Collections
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="#/collection/playbills">
+              In the Spotlight
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Help
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://docs.example.com"
+               target="_blank"
+            >
+              Docs
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/tos">
+              Terms
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/privacy">
+              Privacy
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/cookies">
+              Cookies
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/api">
+              API
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </footer>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/error.spec.js.snap b/test/unit/specs/layouts/__snapshots__/error.spec.js.snap
new file mode 100644
index 00000000..5caae36b
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/error.spec.js.snap
@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Error layout renders correctly 1`] = `
+
+<div id="error-layout"
+     data-server-rendered="true"
+>
+  <nav id="app-navbar"
+       class="navbar navbar-light fixed-top"
+  >
+    <span class="app-navbar-left">
+      <a href="#/"
+         target="_self"
+         class="active navbar-brand d-undefined-none"
+      >
+        <span>
+          My Brand
+        </span>
+      </a>
+    </span>
+    <ul right
+        class="app-navbar-right border-bottom navbar-nav"
+    >
+      <div id="announcements-list"
+           class="d-none d-lg-block"
+      >
+        <button id="announcements-toggle"
+                type="button"
+                class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+        >
+          <icon name="bell">
+          </icon>
+          <!---->
+        </button>
+        <a href="#/account/joebloggs/announcements"
+           class="d-lg-none nav-link"
+        >
+          Notifications
+        </a>
+        <span style="display:none;">
+          <div id="announcements-container"
+               class="dropdown-menu-right d-none d-md-block card"
+          >
+            <div class="card-header">
+              <div>
+                Notifications
+              </div>
+            </div>
+            <div id="announcements">
+            </div>
+            <no-ssr>
+              <infinite-loading class="infinite-loading">
+                <span slot="no-results">
+                  <span>
+                    No announcements have been made yet
+                  </span>
+                </span>
+                <span slot="no-more">
+                  <!---->
+                </span>
+              </infinite-loading>
+            </no-ssr>
+          </div>
+        </span>
+      </div>
+      <li class="nav-item b-nav-dropdown dropdown">
+        <a href="#"
+           aria-haspopup="true"
+           aria-expanded="false"
+           class="nav-link dropdown-toggle"
+        >
+          <span>
+            joebloggs
+          </span>
+        </a>
+        <div role="menu"
+             class="dropdown-menu dropdown-menu-right"
+        >
+          <a href="#/account/joebloggs"
+             role="menuitem"
+             target="_self"
+             class="dropdown-item"
+          >
+            Profile
+          </a>
+          <a href="#/account/joebloggs/settings/profile"
+             role="menuitem"
+             target="_self"
+             class="dropdown-item"
+          >
+            Settings
+          </a>
+          <!---->
+          <div role="separator"
+               class="dropdown-divider"
+          >
+          </div>
+          <a role="menuitem"
+             href="#"
+             target="_self"
+             class="dropdown-item"
+          >
+            Sign Out
+          </a>
+        </div>
+      </li>
+    </ul>
+  </nav>
+  <main>
+    <div class="container text-center">
+      <div id="error-code"
+           class="inset-text"
+      >
+        404
+      </div>
+      <div class="lead mt-1 mb-2">
+        This page could not be found.
+      </div>
+      <a href="#/"
+         target="_self"
+         class="mt-0 mt-md-1 mb-2 btn active btn-success btn-lg"
+      >
+        Home page
+      </a>
+    </div>
+  </main>
+  <footer id="app-footer"
+          class="footer"
+  >
+    <div class="container pt-3 pb-2">
+      <section>
+        <a href="#/"
+           class="router-link-exact-active router-link-active"
+        >
+          Part of the My Brand crowdsourcing platform
+        </a>
+        <p class="my-2">
+          &copy; My Company, 2017
+        </p>
+        <ul class="list-inline mt-2 mb-0">
+          <li class="list-inline-item mx-1">
+            <a href="https://twitter.com/mytwitterhandle"
+               class="text-muted"
+            >
+              <icon name="twitter">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="mailto:me@example.com"
+               class="text-muted"
+            >
+              <icon name="envelope">
+              </icon>
+            </a>
+          </li>
+          <li class="list-inline-item mx-1">
+            <a href="https://github.com/Organization/repo"
+               class="text-muted"
+            >
+              <icon name="github">
+              </icon>
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Newsletter
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://mailchimp.signup.url"
+               target="_blank"
+            >
+              Sign up
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Collections
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="#/collection/playbills">
+              In the Spotlight
+            </a>
+          </li>
+        </ul>
+      </section>
+      <section class="d-none d-lg-block">
+        <h5 class="list-title">
+          Help
+        </h5>
+        <ul class="list-unstyled">
+          <li class="list-item">
+            <a href="http://docs.example.com"
+               target="_blank"
+            >
+              Docs
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/tos">
+              Terms
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/privacy">
+              Privacy
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/cookies">
+              Cookies
+            </a>
+          </li>
+          <li class="list-item">
+            <a href="#/help/api">
+              API
+            </a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </footer>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/__snapshots__/help-dashboard.spec.js.snap b/test/unit/specs/layouts/__snapshots__/help-dashboard.spec.js.snap
new file mode 100644
index 00000000..03fb79c2
--- /dev/null
+++ b/test/unit/specs/layouts/__snapshots__/help-dashboard.spec.js.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Help dashboard layout renders correctly 1`] = `
+
+<div id="dashboard-layout-base"
+     data-server-rendered="true"
+>
+  <nav id="dashboard-navbar"
+       class="side"
+  >
+    <div class="brand-wrapper navbar-light text-center">
+      <a href="#/"
+         class="brand navbar-brand router-link-exact-active router-link-active"
+      >
+        My Brand
+      </a>
+    </div>
+    <ul class="nav">
+      <li data-index="0"
+          class="nav-item"
+      >
+        <a href="#/help/api"
+           target="_self"
+           class="nav-link"
+        >
+          API
+        </a>
+      </li>
+      <li data-index="1"
+          class="nav-item"
+      >
+        <a href="#/help/cookies"
+           target="_self"
+           class="nav-link"
+        >
+          Cookies Policy
+        </a>
+      </li>
+      <li data-index="2"
+          class="nav-item"
+      >
+        <a href="#/help/privacy"
+           target="_self"
+           class="nav-link"
+        >
+          Privacy Policy
+        </a>
+      </li>
+      <li data-index="3"
+          class="nav-item"
+      >
+        <a href="#/help/tos"
+           target="_self"
+           class="nav-link"
+        >
+          Terms of Service
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <div class="dashboard">
+    <nav id="app-navbar"
+         class="navbar navbar-light"
+    >
+      <span class="app-navbar-left">
+        <a href="#/"
+           target="_self"
+           class="active navbar-brand d-lg-none"
+        >
+          <span>
+            My Brand
+          </span>
+        </a>
+      </span>
+      <ul right
+          class="app-navbar-right border-bottom navbar-nav"
+      >
+        <a href="http://docs.example.com"
+           target="_blank"
+           class="nav-link d-flex px-1"
+        >
+          <icon name="question-circle">
+          </icon>
+        </a>
+        <div id="announcements-list"
+             class="d-none d-lg-block"
+        >
+          <button id="announcements-toggle"
+                  type="button"
+                  class="nav-link d-none d-lg-flex flex-row btn btn-secondary"
+          >
+            <icon name="bell">
+            </icon>
+            <!---->
+          </button>
+          <a href="#/account/joebloggs/announcements"
+             class="d-lg-none nav-link"
+          >
+            Notifications
+          </a>
+          <span style="display:none;">
+            <div id="announcements-container"
+                 class="dropdown-menu-right d-none d-md-block card"
+            >
+              <div class="card-header">
+                <div>
+                  Notifications
+                </div>
+              </div>
+              <div id="announcements">
+              </div>
+              <no-ssr>
+                <infinite-loading class="infinite-loading">
+                  <span slot="no-results">
+                    <span>
+                      No announcements have been made yet
+                    </span>
+                  </span>
+                  <span slot="no-more">
+                    <!---->
+                  </span>
+                </infinite-loading>
+              </no-ssr>
+            </div>
+          </span>
+        </div>
+        <li class="nav-item b-nav-dropdown dropdown">
+          <a href="#"
+             aria-haspopup="true"
+             aria-expanded="false"
+             class="nav-link dropdown-toggle"
+          >
+            <span>
+              joebloggs
+            </span>
+          </a>
+          <div role="menu"
+               class="dropdown-menu dropdown-menu-right"
+          >
+            <a href="#/account/joebloggs"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Profile
+            </a>
+            <a href="#/account/joebloggs/settings/profile"
+               role="menuitem"
+               target="_self"
+               class="dropdown-item"
+            >
+              Settings
+            </a>
+            <!---->
+            <div role="separator"
+                 class="dropdown-divider"
+            >
+            </div>
+            <a role="menuitem"
+               href="#"
+               target="_self"
+               class="dropdown-item"
+            >
+              Sign Out
+            </a>
+          </div>
+        </li>
+      </ul>
+    </nav>
+    <nav id="dashboard-navbar"
+         class="top"
+    >
+      <div class="brand-wrapper navbar-light text-center">
+        <a href="#/"
+           class="brand navbar-brand router-link-exact-active router-link-active"
+        >
+          My Brand
+        </a>
+      </div>
+      <ul class="nav">
+        <li data-index="0"
+            class="nav-item"
+        >
+          <a href="#/help/api"
+             target="_self"
+             class="nav-link"
+          >
+            API
+          </a>
+        </li>
+        <li data-index="1"
+            class="nav-item"
+        >
+          <a href="#/help/cookies"
+             target="_self"
+             class="nav-link"
+          >
+            Cookies Policy
+          </a>
+        </li>
+        <li data-index="2"
+            class="nav-item"
+        >
+          <a href="#/help/privacy"
+             target="_self"
+             class="nav-link"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li data-index="3"
+            class="nav-item"
+        >
+          <a href="#/help/tos"
+             target="_self"
+             class="nav-link"
+          >
+            Terms of Service
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <main class="container-fluid px-lg-4 py-4">
+      <nuxt>
+      </nuxt>
+    </main>
+    <footer id="dashboard-footer"
+            class="footer"
+    >
+      <div class="container-fluid">
+        <p class="my-2 mx-1 float-right">
+          &copy; My Company, 2017
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+
+`;
diff --git a/test/unit/specs/layouts/account-dashboard.spec.js b/test/unit/specs/layouts/account-dashboard.spec.js
new file mode 100644
index 00000000..2269bfa0
--- /dev/null
+++ b/test/unit/specs/layouts/account-dashboard.spec.js
@@ -0,0 +1,45 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import { mount, createLocalVue } from 'vue-test-utils'
+import AccountDashboard from '@/layouts/account-dashboard'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Account dashboard layout', () => {
+  let localVue = null
+  let wrapper = null
+  let store = null
+  let router = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.use(Vuex)
+    localVue.use(VueRouter)
+    localVue.component(NuxtLink.name, NuxtLink)
+    store = new Vuex.Store({
+      state: {
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    router = new VueRouter({
+      routes
+    })
+    wrapper = mount(AccountDashboard, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/admin-collection-dashboard.spec.js b/test/unit/specs/layouts/admin-collection-dashboard.spec.js
new file mode 100644
index 00000000..1125db19
--- /dev/null
+++ b/test/unit/specs/layouts/admin-collection-dashboard.spec.js
@@ -0,0 +1,44 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import AdminCollectionDashboard from '@/layouts/admin-collection-dashboard'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Collection admin dashboard layout', () => {
+  let localVue = null
+  let wrapper = null
+  let store = null
+  let router = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.use(Vuex)
+    localVue.use(VueRouter)
+    localVue.component(NuxtLink.name, NuxtLink)
+    store = new Vuex.Store({
+      state: {
+        currentCollection: collection
+      }
+    })
+    router = new VueRouter({
+      routes
+    })
+    wrapper = mount(AdminCollectionDashboard, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/admin-project-dashboard.spec.js b/test/unit/specs/layouts/admin-project-dashboard.spec.js
new file mode 100644
index 00000000..e29f80a0
--- /dev/null
+++ b/test/unit/specs/layouts/admin-project-dashboard.spec.js
@@ -0,0 +1,45 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import { mount, createLocalVue } from 'vue-test-utils'
+import AdminProjectDashboard from '@/layouts/admin-project-dashboard'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Project admin dashboard layout', () => {
+  let localVue = null
+  let wrapper = null
+  let store = null
+  let router = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.use(Vuex)
+    localVue.use(VueRouter)
+    localVue.component(NuxtLink.name, NuxtLink)
+    store = new Vuex.Store({
+      state: {
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    router = new VueRouter({
+      routes
+    })
+    wrapper = mount(AdminProjectDashboard, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/admin-site-dashboard.spec.js b/test/unit/specs/layouts/admin-site-dashboard.spec.js
new file mode 100644
index 00000000..c28f7385
--- /dev/null
+++ b/test/unit/specs/layouts/admin-site-dashboard.spec.js
@@ -0,0 +1,45 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import { mount, createLocalVue } from 'vue-test-utils'
+import AdminSiteDashboard from '@/layouts/admin-site-dashboard'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Site admin dashboard layout', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+  let store = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      state: {
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    wrapper = mount(AdminSiteDashboard, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/collection-default.spec.js b/test/unit/specs/layouts/collection-default.spec.js
new file mode 100644
index 00000000..dce493ed
--- /dev/null
+++ b/test/unit/specs/layouts/collection-default.spec.js
@@ -0,0 +1,48 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import CollectionDefault from '@/layouts/collection-default'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Collection default layout', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+  let store = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      state: {
+        currentCollection: collection,
+        publishedCollections: [ collection ],
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    wrapper = mount(CollectionDefault, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/collection-fullscreen-dark.spec.js b/test/unit/specs/layouts/collection-fullscreen-dark.spec.js
new file mode 100644
index 00000000..aa539547
--- /dev/null
+++ b/test/unit/specs/layouts/collection-fullscreen-dark.spec.js
@@ -0,0 +1,48 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import CollectionFullscreenDark from '@/layouts/collection-fullscreen-dark'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Collection fullscreen dark layout', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+  let store = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      state: {
+        currentCollection: collection,
+        publishedCollections: [ collection ],
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    wrapper = mount(CollectionFullscreenDark, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/collection-tabs.spec.js b/test/unit/specs/layouts/collection-tabs.spec.js
new file mode 100644
index 00000000..b4783d98
--- /dev/null
+++ b/test/unit/specs/layouts/collection-tabs.spec.js
@@ -0,0 +1,48 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import CollectionTabs from '@/layouts/collection-tabs'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Collection tabs layout', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+  let store = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      state: {
+        currentCollection: collection,
+        publishedCollections: [ collection ],
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    wrapper = mount(CollectionTabs, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/container.spec.js b/test/unit/specs/layouts/container.spec.js
new file mode 100644
index 00000000..ace840d2
--- /dev/null
+++ b/test/unit/specs/layouts/container.spec.js
@@ -0,0 +1,47 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import Container from '@/layouts/container'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Container layout', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+  let store = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      state: {
+        publishedCollections: [ collection ],
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    wrapper = mount(Container, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/default.spec.js b/test/unit/specs/layouts/default.spec.js
new file mode 100644
index 00000000..6fee17da
--- /dev/null
+++ b/test/unit/specs/layouts/default.spec.js
@@ -0,0 +1,47 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import Default from '@/layouts/default'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Default layout', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+  let store = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      state: {
+        publishedCollections: [ collection ],
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    wrapper = mount(Default, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/error.spec.js b/test/unit/specs/layouts/error.spec.js
new file mode 100644
index 00000000..fa837b64
--- /dev/null
+++ b/test/unit/specs/layouts/error.spec.js
@@ -0,0 +1,53 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import collection from '@/test/fixtures/collection.json'
+import { mount, createLocalVue } from 'vue-test-utils'
+import ErrorLayout from '@/layouts/error'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Error layout', () => {
+  let localVue = null
+  let wrapper = null
+  let router = null
+  let store = null
+  let error = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.component(NuxtLink.name, NuxtLink)
+    localVue.use(VueRouter)
+    router = new VueRouter({
+      routes
+    })
+    localVue.use(Vuex)
+    store = new Vuex.Store({
+      state: {
+        publishedCollections: [ collection ],
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    error = new Error()
+    error.statusCode = 404
+    wrapper = mount(ErrorLayout, {
+      localVue,
+      store,
+      router,
+      propsData: {
+        error: error
+      }
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/test/unit/specs/layouts/help-dashboard.spec.js b/test/unit/specs/layouts/help-dashboard.spec.js
new file mode 100644
index 00000000..c359a87e
--- /dev/null
+++ b/test/unit/specs/layouts/help-dashboard.spec.js
@@ -0,0 +1,45 @@
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+import BootstrapVue from 'bootstrap-vue'
+import NuxtLink from '@/.nuxt/components/nuxt-link'
+
+import { mount, createLocalVue } from 'vue-test-utils'
+import HelpDashboard from '@/layouts/help-dashboard'
+import { routes } from '@/test/fixtures/routes'
+
+describe('Help dashboard layout', () => {
+  let localVue = null
+  let wrapper = null
+  let store = null
+  let router = null
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(BootstrapVue)
+    localVue.use(Vuex)
+    localVue.use(VueRouter)
+    localVue.component(NuxtLink.name, NuxtLink)
+    store = new Vuex.Store({
+      state: {
+        currentUser: {
+          name: 'joebloggs'
+        }
+      }
+    })
+    router = new VueRouter({
+      routes
+    })
+    wrapper = mount(HelpDashboard, {
+      localVue,
+      store,
+      router
+    })
+  })
+
+  it('renders correctly', () => {
+    const renderer = require('vue-server-renderer').createRenderer()
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      expect(str).toMatchSnapshot()
+    })
+  })
+})
diff --git a/utils/exportFile.js b/utils/exportFile.js
deleted file mode 100644
index 29e7d0da..00000000
--- a/utils/exportFile.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import FileSaver from 'file-saver'
-
-/**
- * Export data as a zip file.
- * @param {data} data
- *   The data.
- * @param {String} prefix
- *   The filename prefix.
- * @param {String} format
- *   The data format.
- */
-export default function (data, prefix, format) {
-  const types = {
-    'zip': 'application/zip',
-    'csv': 'text/csv',
-    'json': 'application/json'
-  }
-  const blob = new Blob([data], { type: types[format] })
-  const fn = `${prefix}.${format}`
-  return FileSaver.saveAs(blob, fn)
-}
diff --git a/utils/setCollectionDefaults.js b/utils/setCollectionDefaults.js
index 29729d1f..93f91b21 100644
--- a/utils/setCollectionDefaults.js
+++ b/utils/setCollectionDefaults.js
@@ -31,10 +31,37 @@ export const setCollectionDefaults = function (collection) {
         '- **Results:** The final results data.\n\n' +
         'We are keen for these datasets to be used in innovative ways, ' +
         'perhaps to further research into new technologies.',
-      contribute: ''
+      projects: ''
     },
-    pubished: false,
-    tags: []
+    pubished: false
   }
   collection.info = merge(defaults, collection.info)
+
+  // Handle old tag structure
+  if (Array.isArray(collection.info.tags)) {
+    convertOldTagStructure(collection)
+  } else if (!collection.info.tags) {
+    collection.info.tags = {}
+  }
+}
+
+/**
+ * Convert the pre 1.0.0 data structure for tags.
+ * @param {Object} collection
+ *   The collection.
+ */
+function convertOldTagStructure (collection) {
+  const newTags = {}
+  const uniqueTypes = [...new Set(collection.info.tags.map(tag => tag.type))]
+  for (let type of uniqueTypes) {
+    newTags[type] = {
+      color: '#2589BD',
+      options: collection.info.tags.filter(tag => {
+        return tag.type === type
+      }).map(tag => {
+        return tag.name
+      })
+    }
+  }
+  collection.info.tags = newTags
 }