diff --git a/README.md b/README.md
index f53d724e..5767935f 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 [![Build Status](https://travis-ci.org/LibCrowds/vue-pybossa-frontend.svg?branch=master)](https://travis-ci.org/LibCrowds/vue-pybossa-frontend)
 [![DOI](https://zenodo.org/badge/92406558.svg)](https://zenodo.org/badge/latestdoi/92406558)
 
-> A Vue.js frontend for PyBossa (>=2.6.1).
+> A Vue.js frontend for PyBossa (>=2.7.2).
 
 Configurable PyBossa frontend with a microsite-based structure; as used by LibCrowds:
 
diff --git a/docs/README.md b/docs/README.md
index a98d90b1..c2470ee9 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -3,7 +3,7 @@
 [![Build Status](https://travis-ci.org/LibCrowds/vue-pybossa-frontend.svg?branch=master)](https://travis-ci.org/LibCrowds/vue-pybossa-frontend)
 [![DOI](https://zenodo.org/badge/92406558.svg)](https://zenodo.org/badge/latestdoi/92406558)
 
-> A Vue.js frontend for PyBossa (>=2.6.1).
+> A Vue.js frontend for PyBossa (>=2.7.2).
 
 This frontend to PyBossa is a little different in that microsites can be defined to more easily group together large groups of similar projects. For example, on the [LibCrowds](www.libcrowds.com) site we define a meta-category for two of our major projects, *Convert-a-Card* and *In the Spotlight*.
 
diff --git a/package-lock.json b/package-lock.json
index 1f6eb29e..bff7d51b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-pybossa-frontend",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1467,29 +1467,16 @@
       }
     },
     "bootstrap": {
-      "version": "4.0.0-alpha.6",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz",
-      "integrity": "sha1-T1TdM6wN6sOyhAe8LffsYIhpycg=",
-      "requires": {
-        "jquery": "3.2.1",
-        "tether": "1.4.0"
-      }
+      "version": "4.0.0-beta",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.tgz",
+      "integrity": "sha512-I/r3fYtUZr+rUNkh8HI+twxZ56p6ehNn27eA1XSebLVQKAJ2xZHnEvZrSR+UR2A/bONcd9gHC3xatVhQlH6R6w=="
     },
     "bootstrap-vue": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-0.21.0.tgz",
-      "integrity": "sha512-mKGPQfUz6GMxvnouBXhwPfY7wb/SmoGCHdhyyPRGRuFm/lCcO35EMRIWdZRwf+71FadYWMRQKadiVYCFhtMPFQ==",
+      "version": "1.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-1.0.0-beta.9.tgz",
+      "integrity": "sha512-0wYWRebZROB+IXpatXgr/pUsiZ7ZUl/uJmc3bpIKlsi9sciE7wIdjV9PhdHnqoipU0kYylHfdcHimOHl5aIbjA==",
       "requires": {
-        "bootstrap": "4.0.0-alpha.6",
-        "tether": "1.4.0",
-        "vue": "2.4.2"
-      },
-      "dependencies": {
-        "tether": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.0.tgz",
-          "integrity": "sha1-D5+hcfdb9YSF2BSelHmdeudNHBo="
-        }
+        "bootstrap": "4.0.0-beta"
       }
     },
     "brace-expansion": {
@@ -1999,7 +1986,6 @@
       "requires": {
         "anymatch": "1.3.2",
         "async-each": "1.0.1",
-        "fsevents": "1.1.2",
         "glob-parent": "2.0.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -4516,1151 +4502,252 @@
       }
     },
     "file-saver": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.3.tgz",
-      "integrity": "sha1-zdTETTqiZOrC9o7BZbx5HDSvEjI="
-    },
-    "file-type": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
-      "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
-      "dev": true
-    },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "dev": true
-    },
-    "filename-regex": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
-    },
-    "filename-reserved-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
-      "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=",
-      "dev": true
-    },
-    "filenamify": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
-      "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
-      "dev": true,
-      "requires": {
-        "filename-reserved-regex": "1.0.0",
-        "strip-outer": "1.0.0",
-        "trim-repeated": "1.0.0"
-      }
-    },
-    "fileset": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
-      "integrity": "sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=",
-      "dev": true,
-      "requires": {
-        "glob": "7.1.2",
-        "minimatch": "3.0.4"
-      }
-    },
-    "filesize": {
-      "version": "3.5.10",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.10.tgz",
-      "integrity": "sha1-/I+iPdtO+eXgq24eZPZ5okpWdh8=",
-      "dev": true
-    },
-    "fill-range": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
-      "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=",
-      "dev": true,
-      "requires": {
-        "is-number": "2.1.0",
-        "isobject": "2.1.0",
-        "randomatic": "1.1.7",
-        "repeat-element": "1.1.2",
-        "repeat-string": "1.6.1"
-      }
-    },
-    "finalhandler": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.0.4.tgz",
-      "integrity": "sha512-16l/r8RgzlXKmFOhZpHBztvye+lAhC5SU7hXavnerC9UfZqZxxXl3BzL8MhffPT3kF61lj9Oav2LKEzh0ei7tg==",
-      "dev": true,
-      "requires": {
-        "debug": "2.6.8",
-        "encodeurl": "1.0.1",
-        "escape-html": "1.0.3",
-        "on-finished": "2.3.0",
-        "parseurl": "1.3.1",
-        "statuses": "1.3.1",
-        "unpipe": "1.0.0"
-      }
-    },
-    "find-babel-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-1.1.0.tgz",
-      "integrity": "sha1-rMAQQ6Z0n+w0Qpvmtk9ULrtdY1U=",
-      "dev": true,
-      "requires": {
-        "json5": "0.5.1",
-        "path-exists": "3.0.0"
-      }
-    },
-    "find-cache-dir": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz",
-      "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=",
-      "dev": true,
-      "requires": {
-        "commondir": "1.0.1",
-        "make-dir": "1.0.0",
-        "pkg-dir": "2.0.0"
-      }
-    },
-    "find-up": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-      "dev": true,
-      "requires": {
-        "locate-path": "2.0.0"
-      }
-    },
-    "find-versions": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-1.2.1.tgz",
-      "integrity": "sha1-y96fEuOFdaCvG+G5osXV/Y8Ya2I=",
-      "dev": true,
-      "requires": {
-        "array-uniq": "1.0.3",
-        "get-stdin": "4.0.1",
-        "meow": "3.7.0",
-        "semver-regex": "1.0.0"
-      }
-    },
-    "first-chunk-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
-      "integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=",
-      "dev": true
-    },
-    "flat-cache": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.2.2.tgz",
-      "integrity": "sha1-+oZxTnLCHbiGAXYezy9VXRq8a5Y=",
-      "dev": true,
-      "requires": {
-        "circular-json": "0.3.3",
-        "del": "2.2.2",
-        "graceful-fs": "4.1.11",
-        "write": "0.2.1"
-      }
-    },
-    "flatten": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
-      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
-      "dev": true
-    },
-    "follow-redirects": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.2.4.tgz",
-      "integrity": "sha512-Suw6KewLV2hReSyEOeql+UUkBVyiBm3ok1VPrVFRZnQInWpdoZbbiG5i8aJVSjTr0yQ4Ava0Sh6/joCg1Brdqw==",
-      "requires": {
-        "debug": "2.6.8"
-      }
-    },
-    "for-each": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.2.tgz",
-      "integrity": "sha1-LEBFC5NI6X8oEyJZO6lnBLmr1NQ=",
-      "dev": true,
-      "requires": {
-        "is-function": "1.0.1"
-      }
-    },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true
-    },
-    "for-own": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-      "dev": true,
-      "requires": {
-        "for-in": "1.0.2"
-      }
-    },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
-    },
-    "form-data": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
-      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
-      "dev": true,
-      "requires": {
-        "asynckit": "0.4.0",
-        "combined-stream": "1.0.5",
-        "mime-types": "2.1.17"
-      }
-    },
-    "forwarded": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.0.tgz",
-      "integrity": "sha1-Ge+YdMSuHCl7zweP3mOgm2aoQ2M=",
-      "dev": true
-    },
-    "fresh": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.0.tgz",
-      "integrity": "sha1-9HTKXmqSRtb9jglTz6m5yAWvp44=",
-      "dev": true
-    },
-    "friendly-errors-webpack-plugin": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.6.1.tgz",
-      "integrity": "sha1-4yeBxHIvVGoGqbXXp8+ihSA3XXA=",
-      "dev": true,
-      "requires": {
-        "chalk": "1.1.3",
-        "error-stack-parser": "2.0.1",
-        "string-length": "1.0.1"
-      }
-    },
-    "fs-extra": {
-      "version": "0.26.7",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
-      "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "jsonfile": "2.4.0",
-        "klaw": "1.3.1",
-        "path-is-absolute": "1.0.1",
-        "rimraf": "2.6.1"
-      }
-    },
-    "fs-readdir-recursive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz",
-      "integrity": "sha1-jNF0XItPiinIyuw5JHaSG6GV9WA=",
-      "dev": true
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
-    },
-    "fsevents": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz",
-      "integrity": "sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "nan": "2.7.0",
-        "node-pre-gyp": "0.6.36"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ajv": {
-          "version": "4.11.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "co": "4.6.0",
-            "json-stable-stringify": "1.0.1"
-          }
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "dev": true
-        },
-        "aproba": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "1.0.0",
-            "readable-stream": "2.2.9"
-          }
-        },
-        "asn1": {
-          "version": "0.2.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "assert-plus": {
-          "version": "0.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "asynckit": {
-          "version": "0.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "aws-sign2": {
-          "version": "0.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "aws4": {
-          "version": "1.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "balanced-match": {
-          "version": "0.4.2",
-          "bundled": true,
-          "dev": true
-        },
-        "bcrypt-pbkdf": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "tweetnacl": "0.14.5"
-          }
-        },
-        "block-stream": {
-          "version": "0.0.9",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.3"
-          }
-        },
-        "boom": {
-          "version": "2.10.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "hoek": "2.16.3"
-          }
-        },
-        "brace-expansion": {
-          "version": "1.1.7",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "balanced-match": "0.4.2",
-            "concat-map": "0.0.1"
-          }
-        },
-        "buffer-shims": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "caseless": {
-          "version": "0.12.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "co": {
-          "version": "4.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "combined-stream": {
-          "version": "1.0.5",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "delayed-stream": "1.0.0"
-          }
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "cryptiles": {
-          "version": "2.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.10.1"
-          }
-        },
-        "dashdash": {
-          "version": "1.14.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "1.0.0"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "debug": {
-          "version": "2.6.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "deep-extend": {
-          "version": "0.4.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "delayed-stream": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ecc-jsbn": {
-          "version": "0.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsbn": "0.1.1"
-          }
-        },
-        "extend": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "extsprintf": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "forever-agent": {
-          "version": "0.6.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "form-data": {
-          "version": "2.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "asynckit": "0.4.0",
-            "combined-stream": "1.0.5",
-            "mime-types": "2.1.15"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "fstream": {
-          "version": "1.0.11",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "graceful-fs": "4.1.11",
-            "inherits": "2.0.3",
-            "mkdirp": "0.5.1",
-            "rimraf": "2.6.1"
-          }
-        },
-        "fstream-ignore": {
-          "version": "1.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fstream": "1.0.11",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4"
-          }
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aproba": "1.1.1",
-            "console-control-strings": "1.1.0",
-            "has-unicode": "2.0.1",
-            "object-assign": "4.1.1",
-            "signal-exit": "3.0.2",
-            "string-width": "1.0.2",
-            "strip-ansi": "3.0.1",
-            "wide-align": "1.1.2"
-          }
-        },
-        "getpass": {
-          "version": "0.1.7",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "1.0.0"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.4.0",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.1.11",
-          "bundled": true,
-          "dev": true
-        },
-        "har-schema": {
-          "version": "1.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "har-validator": {
-          "version": "4.2.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ajv": "4.11.8",
-            "har-schema": "1.0.5"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "hawk": {
-          "version": "3.1.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.10.1",
-            "cryptiles": "2.0.5",
-            "hoek": "2.16.3",
-            "sntp": "1.0.9"
-          }
-        },
-        "hoek": {
-          "version": "2.16.3",
-          "bundled": true,
-          "dev": true
-        },
-        "http-signature": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "0.2.0",
-            "jsprim": "1.4.0",
-            "sshpk": "1.13.0"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "once": "1.4.0",
-            "wrappy": "1.0.2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true,
-          "dev": true
-        },
-        "ini": {
-          "version": "1.3.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "number-is-nan": "1.0.1"
-          }
-        },
-        "is-typedarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "isstream": {
-          "version": "0.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "jodid25519": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsbn": "0.1.1"
-          }
-        },
-        "jsbn": {
-          "version": "0.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "json-schema": {
-          "version": "0.2.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "json-stable-stringify": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsonify": "0.0.0"
-          }
-        },
-        "json-stringify-safe": {
-          "version": "5.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "jsonify": {
-          "version": "0.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "jsprim": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "1.0.0",
-            "extsprintf": "1.0.2",
-            "json-schema": "0.2.3",
-            "verror": "1.3.6"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "mime-db": {
-          "version": "1.27.0",
-          "bundled": true,
-          "dev": true
-        },
-        "mime-types": {
-          "version": "2.1.15",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "mime-db": "1.27.0"
-          }
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.7"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "node-pre-gyp": {
-          "version": "0.6.36",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "mkdirp": "0.5.1",
-            "nopt": "4.0.1",
-            "npmlog": "4.1.0",
-            "rc": "1.2.1",
-            "request": "2.81.0",
-            "rimraf": "2.6.1",
-            "semver": "5.3.0",
-            "tar": "2.2.1",
-            "tar-pack": "3.4.0"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1.1.0",
-            "osenv": "0.1.4"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "1.1.4",
-            "console-control-strings": "1.1.0",
-            "gauge": "2.7.4",
-            "set-blocking": "2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "oauth-sign": {
-          "version": "0.8.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "wrappy": "1.0.2"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "1.0.2",
-            "os-tmpdir": "1.0.2"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "performance-now": {
-          "version": "0.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "1.0.7",
-          "bundled": true,
-          "dev": true
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "qs": {
-          "version": "6.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "0.4.2",
-            "ini": "1.3.4",
-            "minimist": "1.2.0",
-            "strip-json-comments": "2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.2.9",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "buffer-shims": "1.0.0",
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "string_decoder": "1.0.1",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "request": {
-          "version": "2.81.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aws-sign2": "0.6.0",
-            "aws4": "1.6.0",
-            "caseless": "0.12.0",
-            "combined-stream": "1.0.5",
-            "extend": "3.0.1",
-            "forever-agent": "0.6.1",
-            "form-data": "2.1.4",
-            "har-validator": "4.2.1",
-            "hawk": "3.1.3",
-            "http-signature": "1.1.1",
-            "is-typedarray": "1.0.0",
-            "isstream": "0.1.2",
-            "json-stringify-safe": "5.0.1",
-            "mime-types": "2.1.15",
-            "oauth-sign": "0.8.2",
-            "performance-now": "0.2.0",
-            "qs": "6.4.0",
-            "safe-buffer": "5.0.1",
-            "stringstream": "0.0.5",
-            "tough-cookie": "2.3.2",
-            "tunnel-agent": "0.6.0",
-            "uuid": "3.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "glob": "7.1.2"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "semver": {
-          "version": "5.3.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "sntp": {
-          "version": "1.0.9",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "hoek": "2.16.3"
-          }
-        },
-        "sshpk": {
-          "version": "1.13.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "asn1": "0.2.3",
-            "assert-plus": "1.0.0",
-            "bcrypt-pbkdf": "1.0.1",
-            "dashdash": "1.14.1",
-            "ecc-jsbn": "0.1.1",
-            "getpass": "0.1.7",
-            "jodid25519": "1.0.2",
-            "jsbn": "0.1.1",
-            "tweetnacl": "0.14.5"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
-          }
-        },
-        "stringstream": {
-          "version": "0.0.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "ansi-regex": "2.1.1"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "2.2.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "block-stream": "0.0.9",
-            "fstream": "1.0.11",
-            "inherits": "2.0.3"
-          }
-        },
-        "tar-pack": {
-          "version": "3.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "debug": "2.6.8",
-            "fstream": "1.0.11",
-            "fstream-ignore": "1.0.5",
-            "once": "1.4.0",
-            "readable-stream": "2.2.9",
-            "rimraf": "2.6.1",
-            "tar": "2.2.1",
-            "uid-number": "0.0.6"
-          }
-        },
-        "tough-cookie": {
-          "version": "2.3.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "punycode": "1.4.1"
-          }
-        },
-        "tunnel-agent": {
-          "version": "0.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
-        "tweetnacl": {
-          "version": "0.14.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "uid-number": {
-          "version": "0.0.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "uuid": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "verror": {
-          "version": "1.3.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "extsprintf": "1.0.2"
-          }
-        },
-        "wide-align": {
-          "version": "1.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "string-width": "1.0.2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        }
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.3.tgz",
+      "integrity": "sha1-zdTETTqiZOrC9o7BZbx5HDSvEjI="
+    },
+    "file-type": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
+      "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
+      "dev": true
+    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true
+    },
+    "filename-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
+      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
+      "dev": true
+    },
+    "filename-reserved-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
+      "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=",
+      "dev": true
+    },
+    "filenamify": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
+      "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
+      "dev": true,
+      "requires": {
+        "filename-reserved-regex": "1.0.0",
+        "strip-outer": "1.0.0",
+        "trim-repeated": "1.0.0"
+      }
+    },
+    "fileset": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
+      "integrity": "sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.2",
+        "minimatch": "3.0.4"
+      }
+    },
+    "filesize": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.10.tgz",
+      "integrity": "sha1-/I+iPdtO+eXgq24eZPZ5okpWdh8=",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
+      "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=",
+      "dev": true,
+      "requires": {
+        "is-number": "2.1.0",
+        "isobject": "2.1.0",
+        "randomatic": "1.1.7",
+        "repeat-element": "1.1.2",
+        "repeat-string": "1.6.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.0.4.tgz",
+      "integrity": "sha512-16l/r8RgzlXKmFOhZpHBztvye+lAhC5SU7hXavnerC9UfZqZxxXl3BzL8MhffPT3kF61lj9Oav2LKEzh0ei7tg==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.8",
+        "encodeurl": "1.0.1",
+        "escape-html": "1.0.3",
+        "on-finished": "2.3.0",
+        "parseurl": "1.3.1",
+        "statuses": "1.3.1",
+        "unpipe": "1.0.0"
+      }
+    },
+    "find-babel-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-1.1.0.tgz",
+      "integrity": "sha1-rMAQQ6Z0n+w0Qpvmtk9ULrtdY1U=",
+      "dev": true,
+      "requires": {
+        "json5": "0.5.1",
+        "path-exists": "3.0.0"
+      }
+    },
+    "find-cache-dir": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz",
+      "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=",
+      "dev": true,
+      "requires": {
+        "commondir": "1.0.1",
+        "make-dir": "1.0.0",
+        "pkg-dir": "2.0.0"
+      }
+    },
+    "find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "dev": true,
+      "requires": {
+        "locate-path": "2.0.0"
+      }
+    },
+    "find-versions": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-1.2.1.tgz",
+      "integrity": "sha1-y96fEuOFdaCvG+G5osXV/Y8Ya2I=",
+      "dev": true,
+      "requires": {
+        "array-uniq": "1.0.3",
+        "get-stdin": "4.0.1",
+        "meow": "3.7.0",
+        "semver-regex": "1.0.0"
+      }
+    },
+    "first-chunk-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
+      "integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=",
+      "dev": true
+    },
+    "flat-cache": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.2.2.tgz",
+      "integrity": "sha1-+oZxTnLCHbiGAXYezy9VXRq8a5Y=",
+      "dev": true,
+      "requires": {
+        "circular-json": "0.3.3",
+        "del": "2.2.2",
+        "graceful-fs": "4.1.11",
+        "write": "0.2.1"
+      }
+    },
+    "flatten": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
+      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
+      "dev": true
+    },
+    "follow-redirects": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.2.4.tgz",
+      "integrity": "sha512-Suw6KewLV2hReSyEOeql+UUkBVyiBm3ok1VPrVFRZnQInWpdoZbbiG5i8aJVSjTr0yQ4Ava0Sh6/joCg1Brdqw==",
+      "requires": {
+        "debug": "2.6.8"
+      }
+    },
+    "for-each": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.2.tgz",
+      "integrity": "sha1-LEBFC5NI6X8oEyJZO6lnBLmr1NQ=",
+      "dev": true,
+      "requires": {
+        "is-function": "1.0.1"
+      }
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "dev": true
+    },
+    "for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "dev": true,
+      "requires": {
+        "for-in": "1.0.2"
+      }
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+      "dev": true,
+      "requires": {
+        "asynckit": "0.4.0",
+        "combined-stream": "1.0.5",
+        "mime-types": "2.1.17"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.0.tgz",
+      "integrity": "sha1-Ge+YdMSuHCl7zweP3mOgm2aoQ2M=",
+      "dev": true
+    },
+    "fresh": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.0.tgz",
+      "integrity": "sha1-9HTKXmqSRtb9jglTz6m5yAWvp44=",
+      "dev": true
+    },
+    "friendly-errors-webpack-plugin": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.6.1.tgz",
+      "integrity": "sha1-4yeBxHIvVGoGqbXXp8+ihSA3XXA=",
+      "dev": true,
+      "requires": {
+        "chalk": "1.1.3",
+        "error-stack-parser": "2.0.1",
+        "string-length": "1.0.1"
+      }
+    },
+    "fs-extra": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
+      "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "jsonfile": "2.4.0",
+        "klaw": "1.3.1",
+        "path-is-absolute": "1.0.1",
+        "rimraf": "2.6.1"
       }
     },
+    "fs-readdir-recursive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz",
+      "integrity": "sha1-jNF0XItPiinIyuw5JHaSG6GV9WA=",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@@ -7995,9 +7082,9 @@
       }
     },
     "libcrowds-viewer": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/libcrowds-viewer/-/libcrowds-viewer-3.2.0.tgz",
-      "integrity": "sha512-w1IPhW2aqxnhtYlz6K+63FptBTC32DWJv03B/fP3cAHPXATSj69q3hP2WVzpw0KMN6DZwt5fB8cMpXp+dYl6hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/libcrowds-viewer/-/libcrowds-viewer-3.3.1.tgz",
+      "integrity": "sha512-Qd6q8eLzqbScHSKxDhlo7gkVQUK8TO31Y3pSB2zG9FkX+acqrie90I72+br/8h6ejEliyRonn3JUxS77J+RKOQ==",
       "requires": {
         "clipboard": "1.7.1",
         "es6-object-assign": "1.1.0",
@@ -8006,7 +7093,7 @@
         "marked": "0.3.6",
         "normalize.css": "7.0.0",
         "notyf": "2.0.1",
-        "openseadragon": "2.3.0",
+        "openseadragon": "2.3.1",
         "uuid": "3.1.0",
         "vue": "2.4.2",
         "vue-awesome": "2.3.3",
@@ -9415,9 +8502,9 @@
       "dev": true
     },
     "openseadragon": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/openseadragon/-/openseadragon-2.3.0.tgz",
-      "integrity": "sha1-iZ/j3lQ/9R1+Ftu7g//6ByCjshE="
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/openseadragon/-/openseadragon-2.3.1.tgz",
+      "integrity": "sha1-79z+4Z2LPEbQDX992nh8cFf2g2Q="
     },
     "opn": {
       "version": "5.1.0",
@@ -10021,6 +9108,11 @@
         "jquery": "3.2.1"
       }
     },
+    "popper.js": {
+      "version": "1.12.5",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.5.tgz",
+      "integrity": "sha512-6R2eXIy1xYukMNutoD+y/Gj0IpjEQhivyZonm5Vz0Fp8jdc7kvheKCvpM/t+PxqKb7VbLVnvPVEdTyslEb7f6w=="
+    },
     "postcss": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz",
@@ -12896,11 +11988,6 @@
         "require-main-filename": "1.0.1"
       }
     },
-    "tether": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.0.tgz",
-      "integrity": "sha1-D5+hcfdb9YSF2BSelHmdeudNHBo="
-    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -12972,6 +12059,11 @@
         "setimmediate": "1.0.5"
       }
     },
+    "tiny-cookie": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tiny-cookie/-/tiny-cookie-1.0.1.tgz",
+      "integrity": "sha1-dTeGB5xkKjw9CyrMrWAPjeEZrCo="
+    },
     "tiny-emitter": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
@@ -13507,6 +12599,14 @@
       "integrity": "sha512-wgI/SKRozqADIeMGN16PXiHBa/cnRD7JcuYt7P4JHcMIMc2BdUw02pQ+EQmsui0tN2kRVZGwZ8h4Yb2Vbf4w0w==",
       "dev": true
     },
+    "vue-cookie": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vue-cookie/-/vue-cookie-1.1.4.tgz",
+      "integrity": "sha1-uLRtESvan5Oi9HAXwu1SgtIGT9o=",
+      "requires": {
+        "tiny-cookie": "1.0.1"
+      }
+    },
     "vue-form-generator": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vue-form-generator/-/vue-form-generator-2.0.0.tgz",
diff --git a/package.json b/package.json
index dd08be49..5c4c80ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-pybossa-frontend",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "A Vue.js frontend for PyBossa.",
   "author": "Alex Mendes <alex.mendes@bl.uk>",
   "license": "MIT",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "axios": "^0.16.1",
-    "bootstrap": "4.0.0-alpha.6",
-    "bootstrap-vue": "^0.21.0",
+    "bootstrap": "4.0.0-beta",
+    "bootstrap-vue": "^1.0.0-beta.9",
     "chartist": "^0.11.0",
     "chartist-plugin-legend": "^0.6.2",
     "chartist-plugin-tooltips": "0.0.17",
@@ -28,22 +28,23 @@
     "jump.js": "^1.0.2",
     "leaflet": "^1.2.0",
     "leaflet.markercluster": "^1.0.6",
-    "libcrowds-viewer": "^3.2.0",
+    "libcrowds-viewer": "^3.3.1",
     "lodash": "^4.17.4",
     "marked": "^0.3.6",
     "moment": "^2.18.1",
     "pluralize": "^7.0.0",
     "pnotify": "^3.2.1",
+    "popper.js": "^1.12.5",
     "progressbar.js": "^1.0.1",
     "raven-js": "^3.17.0",
     "scrollreveal": "^3.3.6",
     "spinkit": "^1.2.5",
     "sweetalert2": "^6.9.0",
-    "tether": "^1.4.0",
     "vue": "^2.4.2",
     "vue-analytics": "^4.2.2",
     "vue-awesome": "^2.3.1",
     "vue-chartist": "^2.1.0",
+    "vue-cookie": "^1.1.4",
     "vue-form-generator": "^2.0.0",
     "vue-gravatar": "^1.1.3",
     "vue-images": "^1.0.10",
diff --git a/src/assets/style/main.scss b/src/assets/style/main.scss
index 95e5e57b..c213e85e 100644
--- a/src/assets/style/main.scss
+++ b/src/assets/style/main.scss
@@ -8,17 +8,31 @@ $headings-font-weight:             400;
 $line-height-base:                 1.6;
 
 /* Colors */
-$brand-primary:                    #D00000;
-$brand-success:                    #408E40;
-$brand-info:                       #2589BD;
-$brand-warning:                    #E38D13;
-$brand-danger:                     #E4572E;
-$brand-inverse:                    #111111;
-$body-color:                       #26333F;
+$blue:                             #2589BD !default;
+$indigo:                           #6610f2 !default;
+$purple:                           #6f42c1 !default;
+$pink:                             #e83e8c !default;
+$red:                              #D00000 !default;
+$orange:                           #E38D13 !default;
+$yellow:                           #ffc107 !default;
+$green:                            #408E40 !default;
+$teal:                             #20c997 !default;
+$cyan:                             #03B5AA !default;
+
+$body-color:                       #202B35;
+
+$gray-100:                         #f7f7f7;
+$gray-1000:                        #1A1D21;
+$gray-1100:                        #14171A;
+$gray-1200:                        #0D1012;
+
+$grays: (
+  "1000": $gray-1000,
+  "1100": $gray-1100,
+  "1200": $gray-1200
+);
 
 $white:                            #FFFFFF;
-$gray:                             #404446;
-$gray-light:                       #888888;
 $black:                            #000000;
 $twitter:                          #00ACEE;
 $facebook:                         #3B5998;
@@ -26,47 +40,29 @@ $googleplus:                       #D34836;
 $linkedin:                         #0E76A8;
 
 /* Links */
-$link-color:                       #03B5AA;
+$link-color:                       $cyan;
 $link-hover-color:                 darken($link-color, 5%);
 $link-hover-decoration:            underline;
 
-/* Components */
-$component-active-bg:              $brand-info;
-
 /* Buttons */
-$btn-secondary-color:              $brand-inverse;
-$btn-secondary-bg:                 $white;
-$btn-secondary-border:             $brand-inverse;
 $btn-border-radius:                0px;
 $btn-border-radius-lg:             0px;
 $btn-border-radius-sm:             0px;
 
-/* Navbar */
+/* Navbars */
 $navbar-light-color:               rgba($black, .7);
-$navbar-inverse-color:             $white;
-$navbar-inverse-toggler-border:    none;
 $app-navbar-height:                50px;
-
-/* Nav Pills*/
-$nav-pills-active-link-bg:         transparent;
-
-/* Input */
-$input-padding-x:                  1.25rem;
-$input-padding-y:                  .75rem;
-$input-border-focus:               $brand-info;
-$custom-select-focus-border-color: lighten($brand-info, 25%);
+$navbar-dark-color:                $white;
+$navbar-dark-toggler-border-color: transparent;
 
 /* Tables */
 $table-cell-padding:               .75rem 1.25rem;
-$table-bg-accent:                  darken($white, 3%);
-$table-bg-hover:                   darken($white, 5%);
-$table-border-color:               rgba($black, .075);
+$table-accent-bg:                  darken($white, 3%);
+$table-hover-bg:                   darken($white, 5%);
 
 /* Pagination */
-$pagination-color:                 $brand-info;
-$pagination-hover-color:           darken($brand-info, 10%);
-$pagination-active-bg:             $brand-info;
-$pagination-active-border:         $brand-info;
+$pagination-color:                 $blue;
+$pagination-hover-color:           darken($blue, 10%);
 
 /* Cards */
 $card-border-radius:               0px;
@@ -75,9 +71,6 @@ $card-columns-count:               2;
 /* Alerts */
 $alert-border-radius:              0;
 
-/* Forms */
-$form-group-margin-bottom:         1rem;
-
 /* List Groups */
 $list-group-border-radius:         0px;
 $list-group-item-padding-y:        0.5rem;
@@ -90,7 +83,7 @@ $spacer:                           2.5rem;
 $modal-backdrop-opacity:           0.8;
 $modal-inner-padding:              0;
 $modal-dialog-margin-y-sm-up:      50px;
-$modal-backdrop-bg:                #EFEFEF;
+$modal-backdrop-bg:                $gray-100;
 
 /* Hamburger */
 $hamburger-hover-opacity:          100%;
@@ -104,7 +97,7 @@ $lg-path-fonts:                    '~lightgallery/src/fonts';
 $lg-path-images:                   '~lightgallery/src/img';
 
 /* SpinKit */
-$spinkit-spinner-color:            $brand-info;
+$spinkit-spinner-color:            $blue;
 
 /* Chartist */
 $ct-series-colors:
diff --git a/src/assets/style/partials/_cards.scss b/src/assets/style/partials/_cards.scss
index 14db17f6..66894655 100644
--- a/src/assets/style/partials/_cards.scss
+++ b/src/assets/style/partials/_cards.scss
@@ -1,4 +1,8 @@
 .card {
+  .card-body {
+    overflow-y: auto;
+  }
+
   .card-header {
     font-family: $headings-font-family;
     background-color: $white;
diff --git a/src/assets/style/partials/_tables.scss b/src/assets/style/partials/_tables.scss
index 53a68f41..8b31a290 100644
--- a/src/assets/style/partials/_tables.scss
+++ b/src/assets/style/partials/_tables.scss
@@ -1,9 +1,9 @@
 .table {
+  display: table;
   font-size: $font-size-sm;
   margin-bottom: 0;
   background-color: $white;
   border: $table-border-width solid $table-border-color;
-  display: block;
   overflow-y: auto;
 
   th {
diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue
index 165668f1..590b7e19 100644
--- a/src/components/Notifications.vue
+++ b/src/components/Notifications.vue
@@ -22,18 +22,18 @@ export default {
 
   methods: {
     notify (n) {
+      const position = n.position || 'topright'
       const title = n.type ? capitalize(n.type) : 'Info'
       const opts = {
         title: title,
         text: n.msg,
         type: n.type || 'info',
         hide: true,
-        width: '400px',
         delay: 2500,
         mobile: {
           styling: true
         },
-        addclass: 'p-sm-4',
+        addclass: `stack-${position}`,
         after_close: () => {
           store.commit('DELETE_ITEM', 'notification')
         },
@@ -54,6 +54,7 @@ export default {
         default:
           break
       }
+      console.log(opts)
 
       /* eslint-disable no-new */
       new PNotify(opts)
@@ -68,8 +69,14 @@ export default {
 @import '~pnotify/src/pnotify.brighttheme';
 @import '~pnotify/src/pnotify.nonblock';
 
-.ui-pnotify .ui-pnotify-text {
+.ui-pnotify {
+  .ui-pnotify-text {
     word-wrap: break-word;
+  }
+
+  &.stack-bottomleft {
+    top: auto;
+  }
 }
 
 .ui-pnotify-title {
diff --git a/src/components/PreviewCard.vue b/src/components/PreviewCard.vue
index 11568f80..ed6f0cb0 100644
--- a/src/components/PreviewCard.vue
+++ b/src/components/PreviewCard.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card
     class="preview-card"
-    :header="'Preview'">
+    header="Preview">
     <b-card>
       <div
         v-for="(field, index) in previewFields"
@@ -78,7 +78,7 @@ export default {
 @import 'src/assets/style/main';
 
 .preview-card {
-  @extend .bg-faded;
+  @extend .bg-light;
 
   * {
     &:not(:last-child) {
@@ -95,13 +95,13 @@ export default {
     font-family: $font-family-base;
     font-weight: 600;
     text-transform: uppercase;
-    color: $gray-dark;
+    color: $gray-1000;
   }
 
   .info {
     font-size: $font-size-sm;
     font-style: italic;
-    color: $gray-light;
+    color: $gray-600;
   }
 }
 </style>
diff --git a/src/components/buttons/Oauth.vue b/src/components/buttons/Oauth.vue
new file mode 100644
index 00000000..c0a28f3e
--- /dev/null
+++ b/src/components/buttons/Oauth.vue
@@ -0,0 +1,128 @@
+<template>
+  <div id="oauth-buttons">
+
+    <b-btn
+      v-if="facebook"
+      variant="facebook"
+      @click="redirect('facebook')">
+      <icon name="facebook"></icon>
+      Facebook
+    </b-btn>
+
+    <b-btn
+      v-if="google"
+      variant="googleplus"
+      @click="redirect('google')">
+      <icon name="google"></icon>
+      Google
+    </b-btn>
+
+    <b-btn
+      v-if="twitter"
+      variant="twitter"
+      @click="redirect('twitter')">
+      <icon name="twitter"></icon>
+      Twitter
+    </b-btn>
+
+  </div>
+</template>
+
+<script>
+import siteConfig from '@/siteConfig'
+
+export default {
+  props: {
+    facebook: {
+      type: Boolean,
+      default: false
+    },
+    google: {
+      type: Boolean,
+      default: false
+    },
+    twitter: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    /**
+     * Redirect to an external endpoint for OAuth signin.
+     * @param {String} endpoint
+     *   The endpoint.
+     */
+    redirect (endpoint) {
+      const nextExternal = `${document.location.origin}/${this.next}`
+      const query = `next=${nextExternal}`
+      window.location = `${siteConfig.pybossaHost}/${endpoint}?${query}`
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/style/main';
+
+#oauth-buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  @include media-breakpoint-up (sm) {
+    flex-direction: row;
+  }
+
+  .btn {
+    @include hover-focus;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    color: $white;
+    margin: 0.25rem 0.5rem;
+
+    @include hover-focus {
+      color: $white;
+    }
+
+    @include media-breakpoint-up (sm) {
+      width: auto;
+    }
+
+    &.btn-twitter {
+      background: $twitter;
+
+      @include hover-focus {
+        background: darken($twitter, 5%);
+      }
+    }
+
+    &.btn-facebook {
+      background: $facebook;
+
+      @include hover-focus {
+        background: darken($facebook, 5%);
+      }
+    }
+
+    &.btn-googleplus {
+      background: $googleplus;
+
+      @include hover-focus {
+        background: darken($googleplus, 5%);
+      }
+    }
+  }
+
+  /* Fix inconsistend heights */
+  svg {
+    display: flex;
+    height: 1.2rem;
+    margin-right: 0.5rem;
+  }
+}
+</style>
diff --git a/src/components/buttons/ProjectContrib.vue b/src/components/buttons/ProjectContrib.vue
index 71a08172..dfc4380b 100644
--- a/src/components/buttons/ProjectContrib.vue
+++ b/src/components/buttons/ProjectContrib.vue
@@ -22,7 +22,7 @@ export default {
     },
     size: {
       type: String,
-      default: 'md'
+      default: ''
     },
     variant: {
       type: String,
@@ -31,6 +31,20 @@ export default {
     block: {
       type: Boolean,
       default: true
+    },
+    status: {
+      type: String,
+      default: 'can_contribute',
+      validator: value => {
+        const valid = [
+          'completed',
+          'draft',
+          'publish',
+          'can_contribute',
+          'cannot_contribute'
+        ]
+        return value in valid
+      }
     }
   }
 }
diff --git a/src/components/buttons/SocialMedia.vue b/src/components/buttons/SocialMedia.vue
index 79b03077..9a459757 100644
--- a/src/components/buttons/SocialMedia.vue
+++ b/src/components/buttons/SocialMedia.vue
@@ -1,37 +1,41 @@
 <template>
   <div class="social-media-buttons">
 
-    <b-tooltip content="Share on Facebook" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on Facebook"
         variant="facebook"
+        :size="size"
         @click="share(facebookUrl, 980, 620)">
         <icon name="facebook"></icon>
       </b-btn>
-    </b-tooltip>
 
-    <b-tooltip content="Share on Twitter" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on Twitter"
         variant="twitter"
+        :size="size"
         @click="share(twitterUrl, 450, 550)">
         <icon name="twitter"></icon>
       </b-btn>
-    </b-tooltip>
 
-    <b-tooltip content="Share on Google Plus" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on Google Plus"
         variant="googleplus"
+        :size="size"
         @click="share(googleplusUrl, 510, 725)">
         <icon name="google-plus"></icon>
       </b-btn>
-    </b-tooltip>
 
-    <b-tooltip content="Share on LinkedIn" triggers="hover">
       <b-btn
+        v-b-tooltip
+        title="Share on LinkedIn"
         variant="linkedin"
+        :size="size"
         @click="share(linkedinUrl, 510, 520)">
         <icon name="linkedin"></icon>
       </b-btn>
-    </b-tooltip>
 
   </div>
 </template>
@@ -63,6 +67,10 @@ export default {
     tweet: {
       type: String,
       default: `Crowdsourcing from ${siteConfig.company}`
+    },
+    size: {
+      type: String,
+      default: ''
     }
   },
 
diff --git a/src/components/category/ListChooser.vue b/src/components/category/ListChooser.vue
index 1ff6fd18..5180c2bf 100644
--- a/src/components/category/ListChooser.vue
+++ b/src/components/category/ListChooser.vue
@@ -1,6 +1,6 @@
 <template>
   <b-card
-    no-block
+    no-body
     id="category-list-chooser"
     :header="header | pluralize | capitalize">
     <b-list-group>
@@ -10,7 +10,7 @@
         action
         v-b-toggle="`catlistitem-${category.id}`"
         :active="activeCategory === category"
-        @click.native="changeCategory(category)">
+        @click="changeCategory(category)">
         {{ category.name }}
         <b-collapse
           :visible="index == 0"
@@ -82,15 +82,30 @@ export default {
 
 #category-list-chooser {
   font-size: $font-size-sm;
-  max-height: 200px;
+  max-height: 250px;
   overflow-y: auto;
 
-  @include media-breakpoint-up(xl) {
-    max-height: 100%;
+  &.nested-left {
+    border-top: none;
+    border-right: none;
+    border-left: none;
+  }
+
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      &.nested#{$infix} {
+        height: 100%;
+        max-height: 100%;
+        border-right: 1px solid $border-color;
+        border-bottom: none;
+      }
+    }
   }
 
   .card-header {
-    @extend .bg-faded;
+    @extend .bg-light;
     text-align: center;
     padding: $list-group-item-padding-y $list-group-item-padding-x;
   }
@@ -104,10 +119,6 @@ export default {
     &:first-child {
       border-top: none;
     }
-
-    &:last-child {
-      border-bottom: none;
-    }
   }
 
   .category-description {
@@ -116,7 +127,7 @@ export default {
     }
   }
 
-  .card-block {
+  .card-body {
     display: flex;
     flex-direction: column;
   }
diff --git a/src/components/collection/Card.vue b/src/components/collection/Card.vue
index ed7d2830..107979c8 100644
--- a/src/components/collection/Card.vue
+++ b/src/components/collection/Card.vue
@@ -1,6 +1,6 @@
 <template>
   <b-card
-    no-block
+    no-body
     show-footer
     class="collection-card my-3">
     <router-link
@@ -15,7 +15,7 @@
         class="collection-card-img"
         :style="{ backgroundImage: `url('${collectionConfig.bgImg}')` }">
       </div>
-      <div class="card-block">
+      <div class="card-body">
         <h4 class="card-title">
           {{ collectionConfig.name }}
         </h4>
@@ -59,7 +59,7 @@ export default {
   border: none;
 
   a {
-    color: $gray;
+    color: $gray-800;
 
     @include hover-focus {
       text-decoration: none;
@@ -88,8 +88,8 @@ export default {
       left: 0;
       right: 0;
       bottom: 0;
-      color: $gray-lighter;
-      background-color: rgba($gray-lighter, 0.4);
+      color: $gray-300;
+      background-color: rgba($gray-300, 0.4);
       opacity: 0;
       font-size: $font-size-lg;
       text-transform: uppercase;
@@ -105,13 +105,13 @@ export default {
     font-family: $font-family-base;
     font-weight: 600;
     text-transform: uppercase;
-    color: $gray-dark;
+    color: $gray-1000;
   }
 
   .card-footer {
     background-color: $white;
     border: none;
-    color: $gray-light;
+    color: $gray-600;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
diff --git a/src/components/footers/AppFooter.vue b/src/components/footers/AppFooter.vue
index 4fa56873..8bffc807 100644
--- a/src/components/footers/AppFooter.vue
+++ b/src/components/footers/AppFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer id="collection-footer" class="footer">
+  <footer id="app-footer" class="footer">
     <div class="container pt-3 pb-2">
 
       <section>
@@ -28,7 +28,7 @@
         </ul>
       </section>
 
-      <section class="hidden-md-down">
+      <section class="d-none d-lg-block">
         <h5 class="list-title">Projects</h5>
         <ul class="list-unstyled">
           <li
@@ -49,7 +49,7 @@
         </ul>
       </section>
 
-      <section class="hidden-md-down">
+      <section class="d-none d-lg-block">
         <h5 class="list-title">Help</h5>
         <ul class="list-unstyled">
           <li class="list-item">
@@ -125,10 +125,10 @@ export default {
 <style lang="scss" scoped>
 @import 'src/assets/style/main';
 
-#collection-footer.footer {
-  background-color: darken($gray-dark, 5%);
+#app-footer.footer {
+  background-color: $gray-1000;
   letter-spacing: 0.8px;
-  color: $gray-light;
+  color: $gray-600;
   font-size: $font-size-sm;
   line-height: 2;
 
@@ -151,7 +151,7 @@ export default {
   }
 
   a {
-    color: $gray-lighter;
+    color: $gray-300;
   }
 
   .brand-link {
@@ -159,7 +159,7 @@ export default {
   }
 
   #bg-img-attribution {
-    font-size: $font-size-xs;
+    font-size: 0.75rem;
   }
 }
 </style>
diff --git a/src/components/footers/DashboardFooter.vue b/src/components/footers/DashboardFooter.vue
index 87d36a0d..5dae0a73 100644
--- a/src/components/footers/DashboardFooter.vue
+++ b/src/components/footers/DashboardFooter.vue
@@ -22,9 +22,9 @@ export default {
 @import 'src/assets/style/main';
 
 #dashboard-footer {
-  color: $gray-light;
+  color: $gray-600;
   background: $white;
   font-size: $font-size-sm;
-  border-top: 1px solid $gray-lighter;
+  border-top: 1px solid $gray-300;
 }
 </style>
diff --git a/src/components/forms/AvatarForm.vue b/src/components/forms/AvatarForm.vue
index 280967b4..99698762 100644
--- a/src/components/forms/AvatarForm.vue
+++ b/src/components/forms/AvatarForm.vue
@@ -33,12 +33,12 @@
     </span>
 
     <template slot="footer">
-      <b-button
+      <b-btn
         variant="success"
         class="float-right"
         @click="submit">
         {{ submitText }}
-      </b-button>
+      </b-btn>
     </template>
 
   </b-card>
diff --git a/src/components/forms/CardForm.vue b/src/components/forms/CardForm.vue
index 9e7f87f7..b639410e 100644
--- a/src/components/forms/CardForm.vue
+++ b/src/components/forms/CardForm.vue
@@ -36,13 +36,13 @@
         <slot name="footer-left"></slot>
       </span>
       <span>
-        <b-button
+        <b-btn
           v-if="showCancel"
-          variant="secondary"
+          variant="outline-secondary"
           @click="cancel">
           Cancel
-        </b-button>
-        <b-button
+        </b-btn>
+        <b-btn
           variant="success"
           @click="submit">
           <span v-if="!processing">{{ submitText }}</span>
@@ -51,7 +51,7 @@
             <div class="sk-child sk-bounce2"></div>
             <div class="sk-child sk-bounce3"></div>
           </div>
-        </b-button>
+        </b-btn>
       </span>
     </template>
 
@@ -198,7 +198,7 @@ export default {
   }
 
   .errors {
-    color: $brand-danger;
+    color: $red;
     font-size: $font-size-sm;
 
     span {
diff --git a/src/components/layouts/Basic.vue b/src/components/layouts/Basic.vue
deleted file mode 100644
index ea3eea21..00000000
--- a/src/components/layouts/Basic.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="basic-layout" :data-bg="background">
-    <main>
-      <slot></slot>
-    </main>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/assets/style/main';
-
-.basic-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  main {
-    flex: 1 1 auto;
-  }
-
-  &[data-bg="geometry"] {
-    background-image: url('../../assets/img/geometry.png');
-  }
-}
-</style>
diff --git a/src/components/modals/Data.vue b/src/components/modals/Data.vue
index 519b5279..9a73fe3a 100644
--- a/src/components/modals/Data.vue
+++ b/src/components/modals/Data.vue
@@ -1,9 +1,5 @@
 <template>
   <b-modal :id="modalId" title="Download">
-
-    <p class="lead m-2">
-      Download the data for {{ project.name }}
-    </p>
     <b-table
       responsive
       striped
@@ -32,9 +28,20 @@ export default {
   data: function () {
     return {
       fields: {
-        dataset: { label: 'Dataset' },
-        format: { label: 'Format' },
-        action: { label: 'Action' }
+        dataset: {
+          label: 'Dataset'
+        },
+        format: {
+          label: 'Format',
+          class: 'text-center',
+          formatter: value => {
+            return value.toUpperCase()
+          }
+        },
+        action: {
+          label: 'Action',
+          class: 'text-center'
+        }
       },
       items: [
         { dataset: 'Tasks', type: 'task', format: 'csv' },
@@ -61,6 +68,10 @@ export default {
   methods: {
     /**
      * Download the data.
+     * @param {String} type
+     *   The download type.
+     * @param {String} format
+     *   The download format.
      */
     download (type, format) {
       pybossaApi.get(`/project/${this.project.short_name}/tasks/export`, {
diff --git a/src/components/modals/Leaderboard.vue b/src/components/modals/Leaderboard.vue
index 6458bced..5ea9a8a0 100644
--- a/src/components/modals/Leaderboard.vue
+++ b/src/components/modals/Leaderboard.vue
@@ -1,5 +1,8 @@
 <template>
-  <b-modal :id="modalId" title="Leaderboard" @shown="fetchData">
+  <b-modal
+    :id="modalId"
+    title="Leaderboard"
+    ok-only>
 
     <loading
       v-if="loading"
@@ -12,7 +15,7 @@
       striped
       hover
       show-empty
-      :items="topUsers"
+      :items="filteredUsers"
       :fields="fields">
     </b-table>
 
@@ -45,6 +48,10 @@ export default {
       type: String,
       required: true
     },
+    currentUser: {
+      type: Object,
+      required: true
+    },
     win: {
       type: Number,
       default: 0
@@ -52,16 +59,40 @@ export default {
   },
 
   methods: {
-    fetchData () {
-      pybossaApi.get(`leaderboard/window/${this.win}`).then(r => {
-        this.loading = false
-        this.topUsers = r.data.top_users
+    /**
+     * Set core data.
+     * @param {Object} data
+     *   The data.
+     */
+    setData (data) {
+      this.loading = false
+      this.topUsers = data.top_users
+    }
+  },
+
+  computed: {
+    filteredUsers: function () {
+      let users = JSON.parse(JSON.stringify(this.topUsers))
+      users = users.map(user => {
+        if (this.currentUser && this.currentUser.name === user.name) {
+          user._rowVariant = 'success'
+        }
+        return user
       })
+      let userRepeated = users.filter(user => {
+        return user.name === this.currentUser.name
+      }).length
+      if (userRepeated) {
+        users.splice(-1, 1)
+      }
+      return users
     }
   },
 
   created () {
-    this.fetchData()
+    pybossaApi.get(`leaderboard/window/${this.win}`).then(r => {
+      this.setData(r.data)
+    })
   }
 }
 </script>
diff --git a/src/components/modals/ProjectStats.vue b/src/components/modals/ProjectStats.vue
index 99fa2ea3..ca88a011 100644
--- a/src/components/modals/ProjectStats.vue
+++ b/src/components/modals/ProjectStats.vue
@@ -1,6 +1,7 @@
 <template>
   <b-modal
     :id="modalId"
+    ok-only
     title="Project Stats"
     size="lg"
     @shown="fetchData">
diff --git a/src/components/navs/AppNavbar.vue b/src/components/navs/AppNavbar.vue
index 36786cd4..b5fc96ed 100644
--- a/src/components/navs/AppNavbar.vue
+++ b/src/components/navs/AppNavbar.vue
@@ -7,7 +7,7 @@
 
     <span id="app-navbar-left">
       <b-link
-        :class="`navbar-brand hidden-${hideBrandBreakpoint}-up`"
+        :class="`navbar-brand d-${hideBrandBreakpoint}-none`"
         :to="{
           name: 'landing'
         }">
@@ -160,10 +160,19 @@ export default {
   width: 100%;
 
   #app-navbar-left {
+    height: 100%;
     flex: 1 1 auto;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-300;
+  }
+
+  #app-navbar-right {
+    height: 100%;
+
+    .navbar-nav {
+      border-bottom: 1px solid $gray-300;
+    }
   }
 
   .navbar-brand {
@@ -182,17 +191,18 @@ export default {
     height: 100%;
   }
 
-  .nav-item {
+  .nav-item:not(.dropdown) {
     display: flex;
     justify-content: center;
     flex-direction: column;
     padding: 0rem 1.25rem;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-300;
     height: 100%;
     white-space: nowrap;
   }
 
   #sign-in-up {
+    height: 100%;
     display: flex;
     flex-direction: row;
     font-size: $font-size-sm;
@@ -200,9 +210,9 @@ export default {
   }
 
   #btn-register {
-    background-color: $brand-success;
+    background-color: $green;
     font-weight: 400;
-    border-bottom: 1px solid $brand-success;
+    border-bottom: 1px solid $green;
 
     a {
       color: $white;
@@ -214,6 +224,7 @@ export default {
   }
 
   .dropdown-menu {
+    position: absolute;
     border-radius: 0;
     right: 1rem;
     text-transform: none;
diff --git a/src/components/navs/CollectionNavbar.vue b/src/components/navs/CollectionNavbar.vue
index 41074d85..ad8f35ba 100644
--- a/src/components/navs/CollectionNavbar.vue
+++ b/src/components/navs/CollectionNavbar.vue
@@ -7,6 +7,17 @@
     :fixed="navType.fixed">
     <div class="container">
 
+      <b-link class="navbar-brand"
+        :to="{
+          name: 'collection-home',
+          params: {
+            collectionName: collectionConfig.key
+          }
+        }"
+        @click.native="scrollToTop">
+        <span>{{ collectionConfig.name }}</span>
+      </b-link>
+
       <button
         @click="toggleCollapsibleSidebar"
         ref="hamburger"
@@ -26,17 +37,6 @@
         </span>
       </button>
 
-      <b-link class="navbar-brand"
-        :to="{
-          name: 'collection-home',
-          params: {
-            collectionName: collectionConfig.key
-          }
-        }"
-        @click.native="scrollToTop">
-        <span>{{ collectionConfig.name }}</span>
-      </b-link>
-
       <b-collapse is-nav id="main-nav-collapse" ref="sidebar">
 
         <!-- Main menu -->
@@ -198,7 +198,7 @@ export default {
     },
     type: {
       type: String,
-      default: 'inverse'
+      default: 'dark'
     },
     invertable: {
       type: Boolean,
@@ -260,12 +260,12 @@ export default {
         for (let b of bounds) {
           if (scrollTop >= b.top - 25 && scrollTop <= b.bottom) {
             document.querySelector('.navbar').classList.add('navbar-light')
-            document.querySelector('.navbar').classList.remove('navbar-inverse')
+            document.querySelector('.navbar').classList.remove('navbar-dark')
             return
           }
         }
         document.querySelector('.navbar').classList.remove('navbar-light')
-        document.querySelector('.navbar').classList.add('navbar-inverse')
+        document.querySelector('.navbar').classList.add('navbar-dark')
       },
       10
     ),
@@ -384,7 +384,6 @@ export default {
 @import '~hamburgers/_sass/hamburgers/hamburgers';
 
 #collection-navbar {
-  color: $white;
   z-index: 200;
   font-family: $font-family-base;
   font-weight: 500;
@@ -412,7 +411,7 @@ export default {
     margin-right: 1rem;
 
     @include media-breakpoint-up(sm) {
-      font-size: $font-size-h3;
+      font-size: $h3-font-size;
     }
   }
 
@@ -441,7 +440,7 @@ export default {
 
     .nav-item {
       font-size: $font-size-sm;
-      margin-left: calc(2 * #{$nav-item-inline-spacer});
+      margin-left: 2rem;
       margin-right: 0;
       position: relative;
 
@@ -452,7 +451,7 @@ export default {
         width: 100%;
         height: 2px;
         content: '';
-        background-color: $brand-primary;
+        background-color: $red;
         opacity: 0;
       }
 
@@ -471,7 +470,7 @@ export default {
           &:focus,
           &:hover,
           &.active {
-            color: $brand-primary;
+            color: $red;
           }
         }
 
@@ -528,7 +527,7 @@ export default {
   .nav-item:not(.nav-button) .nav-link:focus,
   .nav-item:not(.nav-button) .nav-link:hover,
   .nav-item:not(.nav-button) .nav-link.active {
-    color: $brand-primary !important;
+    color: $red !important;
     background-color: transparent;
   }
 
@@ -537,9 +536,6 @@ export default {
     padding: 0;
     display: flex;
     flex-direction:column;
-    justify-content: center;
-    align-items: center;
-    flex: 1 1 auto;
     height: 100%;
 
     @include media-breakpoint-up(lg) {
@@ -547,8 +543,8 @@ export default {
     }
   }
 
-  &.navbar-inverse {
-    @extend .navbar-inverse;
+  &.navbar-dark {
+    @extend .navbar-dark;
     background-color: transparent;
 
     .hamburger-inner,
@@ -560,11 +556,11 @@ export default {
 
   &.navbar-light {
     background: $white;
-    border-bottom: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-300;
 
     .nav-item.nav-button {
       transition: border-color 400ms;
-      border-color: $gray-light;
+      border-color: $gray-600;
     }
   }
 
@@ -580,7 +576,7 @@ export default {
       z-index: 10;
       top: 0;
       left: 0;
-      background-color: $brand-inverse;
+      background-color: $gray-1100;
       overflow-x: hidden;
       overflow-y: auto;
       text-align: center;
@@ -612,7 +608,7 @@ export default {
           color: $white;
 
           @include hover-focus {
-            color: $brand-primary;
+            color: $red;
           }
         }
 
@@ -622,11 +618,22 @@ export default {
         }
 
         .dropdown-menu {
+          position: relative;
           display: block;
           background: transparent;
           text-align: center;
           padding: 0;
-          margin: 0;
+          margin-left: auto;
+          margin-left: auto;
+          min-width: auto;
+          border: none;
+
+          .dropdown-item {
+            @include hover-focus {
+              outline: 0;
+              background: transparent;
+            }
+          }
         }
       }
     }
diff --git a/src/components/navs/DashboardSidenav.vue b/src/components/navs/DashboardSidenav.vue
index 713d17b5..c604d07f 100644
--- a/src/components/navs/DashboardSidenav.vue
+++ b/src/components/navs/DashboardSidenav.vue
@@ -70,8 +70,8 @@ export default {
     white-space: nowrap;
     z-index: 1;
     background:
-      linear-gradient(rgba($brand-info, 0.8),
-      rgba($brand-info, 0.8)),
+      linear-gradient(rgba($blue, 0.8),
+      rgba($blue, 0.8)),
       url('../../assets/img/app-background.jpg');
     background-size: cover;
     background-position: center center;
@@ -144,6 +144,7 @@ export default {
         padding: $list-group-item-padding-y;
         width: 100%;
         color: $white;
+        display: block;
       }
 
       &:hover,
@@ -168,7 +169,7 @@ export default {
       background: transparent;
       align-items: center;
       justify-content: center;
-      border-bottom: 1px solid rgba($gray-lighter, 0.5);
+      border-bottom: 1px solid rgba($gray-300, 0.5);
 
       .brand {
         @extend .navbar-brand;
diff --git a/src/components/presenters/LibcrowdsViewer.vue b/src/components/presenters/LibcrowdsViewer.vue
index caefeed2..02974931 100644
--- a/src/components/presenters/LibcrowdsViewer.vue
+++ b/src/components/presenters/LibcrowdsViewer.vue
@@ -6,9 +6,9 @@
       :buttons="buttons"
       :taskOpts="taskOpts"
       :navigation="navigation"
-      :message-bus="messageBus"
       :browsable="false"
       :selections-editable="false"
+      show-help-on-mount
       @submit="onSubmit"
       @taskliked="onTaskLiked">
     </libcrowds-viewer>
@@ -17,17 +17,10 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import isEmpty from 'lodash/isEmpty'
 import capitalize from '@/utils/capitalize'
 
 export default {
-  data: function () {
-    return {
-      messageBus: new Vue()
-    }
-  },
-
   props: {
     project: {
       type: Object,
@@ -61,7 +54,7 @@ export default {
     buttons: function () {
       let buttons = {
         note: 'Seen something interesting?<br>Add a note',
-        submit: 'Save'
+        submit: 'Save and Continue'
       }
       if (isEmpty(this.currentUser)) {
         buttons.like = false
@@ -100,7 +93,7 @@ export default {
      *   The task data.
      */
     onTaskLiked (taskData) {
-      this.$emit('liked', taskData.id, taskData.liked)
+      this.$emit('taskliked', taskData.id, taskData.liked)
     },
 
     /**
@@ -121,7 +114,7 @@ export default {
   top: 0;
   left: 0;
   bottom: 0;
-  z-index: 9999999;
+  z-index: 1040;
   background-color: #000;
   width: 100%;
   height: 100%;
diff --git a/src/components/presenters/Z3950.vue b/src/components/presenters/Z3950.vue
index bd86baae..4a82156b 100644
--- a/src/components/presenters/Z3950.vue
+++ b/src/components/presenters/Z3950.vue
@@ -4,16 +4,16 @@
 
       <div class="col-sm-12 col-lg-6">
         <b-card
-          no-block
+          no-body
           v-if="currentTask" >
           <img :src="currentTask.info.url" class="img-fluid">
         </b-card>
       </div>
 
       <div class="col-sm-12 col-lg-6 mt-3 mt-lg-0">
-        <b-card no-block>
+        <b-card no-body>
 
-          <div class="card-block pb-0" v-if="alerts.length">
+          <div class="card-body pb-0" v-if="alerts.length">
             <b-alert
               show
               v-for="alert in alerts"
@@ -27,19 +27,19 @@
           <template slot="header">
             <div class="d-flex justify-content-between align-items-center">
               <h6 class="mb-0">{{ header }}</h6>
-              <b-button
+              <b-btn
                 v-if="searchResults.length || selectedRecord"
                 variant="info"
                 size="sm"
                 class="float-right"
                 @click="reset">
                 Search Again
-              </b-button>
+              </b-btn>
             </div>
           </template>
 
           <transition name="fade" mode="out-in" appear>
-            <div key="search" v-if="stage == 'search'" class="card-block">
+            <div key="search" v-if="stage == 'search'" class="card-body">
               <vue-form-generator :schema="form.schema" :model="form.model">
               </vue-form-generator>
             </div>
@@ -71,19 +71,19 @@
                   </div>
                   <div class="w-25 d-flex">
                     <div class="result-buttons">
-                      <b-button
+                      <b-btn
                         variant="success"
                         size="sm"
                         @click="selectedRecord = record">
                         Select
-                      </b-button>
+                      </b-btn>
                     </div>
                   </div>
                 </div>
               </b-list-group-item>
             </div>
 
-            <div key="submit" v-if="selectedRecord" class="card-block">
+            <div key="submit" v-if="selectedRecord" class="card-body">
               <div v-if="selectedRecord">
                 <h5 class="mb-1">{{ selectedRecord.title }}</h5>
                 <p class="mb-0">{{ selectedRecord.author }}</p>
@@ -105,21 +105,21 @@
 
           <template slot="footer">
             <div class="d-flex justify-content-between flex-column flex-xl-row">
-              <b-button
+              <b-btn
                 v-b-toggle.collapsecomment
                 class="p-0"
                 variant="link">
                 Add a comment
-              </b-button>
+              </b-btn>
               <div
                 class="d-flex d-xl-block flex-column justify-content-center">
-                <b-button
-                  variant="secondary"
+                <b-btn
+                  variant="outline-dark"
                   class="my-1"
                   @click="onSkip">
                   Skip / Not Found
-                </b-button>
-                <b-button
+                </b-btn>
+                <b-btn
                   v-if="stage !== 'results'"
                   variant="success"
                   @click="onSubmit">
@@ -131,7 +131,7 @@
                     <div class="sk-child sk-bounce2"></div>
                     <div class="sk-child sk-bounce3"></div>
                   </div>
-                </b-button>
+                </b-btn>
               </div>
             </div>
             <b-collapse id="collapsecomment" class="mt-1">
@@ -386,7 +386,7 @@ export default {
             return this.parseSubfield(sf)
           }).join(' ') + ' '
         } else if (code !== '6') {
-          if (!codes || codes.indexOf(code)) {
+          if (!codes || codes.indexOf(code) > -1) {
             res = subfield[code] + ' '
           }
         }
@@ -511,7 +511,7 @@ export default {
      *   The task.
      */
     onTaskLiked (task) {
-      this.$emit('liked', task.id, task.liked)
+      this.$emit('taskliked', task.id, task.liked)
     },
 
     /**
@@ -521,6 +521,7 @@ export default {
      */
     submit (answer) {
       this.$emit('submit', this.project.id, this.currentTask.id, answer)
+      this.reset()
     },
 
     /**
@@ -592,7 +593,7 @@ export default {
       align-self: flex-end;
       background: transparent;
       border: none;
-      color: lighten($gray-light, 15%);
+      color: $gray-400;
       padding: 0;
     }
 
diff --git a/src/components/project/Card.vue b/src/components/project/Card.vue
index 7df2d892..d64caec4 100644
--- a/src/components/project/Card.vue
+++ b/src/components/project/Card.vue
@@ -1,6 +1,6 @@
 <template>
   <b-card
-    no-block
+    no-body
     class="project-card">
     <router-link
       :to="{
@@ -16,7 +16,7 @@
       </div>
     </router-link>
 
-    <div class="card-block project-details p-0">
+    <div class="card-body project-details p-0">
       <div class="card-title mb-0">
         <router-link
           :to="{
@@ -32,8 +32,8 @@
         <div>
           <b-btn
             v-b-modal="statsModalId"
-            class="project-stats-btn hidden-md-down"
-            variant="secondary">
+            class="project-stats-btn d-none d-lg-block"
+            variant="info">
             Stats
             <icon name="bar-chart"></icon>
           </b-btn>
@@ -46,7 +46,7 @@
       <div class="progress-container" :id="progressId"></div>
 
       <div class="card-footer mt-1 px-2 py-1">
-        <span class="card-stat text-muted mb-2 mb-lg-0">
+        <span class="card-stat text-muted mb-2 mb-lg-0 mt-1 mt-lg-0">
           {{ project.overall_progress }}% complete
         </span>
         <span class="card-stat text-muted mb-2 mb-lg-0">
@@ -61,8 +61,8 @@
           <b-btn
             block
             v-b-modal="statsModalId"
-            class="hidden-lg-up mb-1"
-            variant="secondary">
+            class="d-lg-none mb-1"
+            variant="info">
             Stats
           </b-btn>
           <project-contrib-button
@@ -142,7 +142,7 @@ export default {
   text-align: center;
   flex-direction: column;
   overflow-y: hidden;
-  margin-bottom: $spacer-y;
+  margin-bottom: $spacer;
   margin-left: auto;
   margin-right: auto;
   max-width: 300px;
@@ -154,7 +154,7 @@ export default {
     flex-direction: row;
   }
 
-  .card-block {
+  .card-body {
 
     @include media-breakpoint-up(lg) {
       flex: 1 1 0%;
@@ -242,7 +242,7 @@ export default {
   }
 
   .card-stat {
-    font-size: $font-size-xs;
+    font-size: 0.75rem;
     display: flex;
     align-items: center;
 
@@ -253,12 +253,13 @@ export default {
 
   .project-stats-btn {
     display: flex;
-    border-left: 1px solid $gray-lighter;
-    border-bottom: 1px solid $gray-lighter;
+    border-left: 1px solid $gray-300;
+    border-bottom: 1px solid $gray-300;
     border-top: 0;
     border-right: 0;
-    color: $gray-light;
-    font-size: $font-size-xs;
+    background: $white;
+    color: $gray-600;
+    font-size: 0.75rem;
     text-transform: uppercase;
 
     svg {
diff --git a/src/components/project/SortingOptions.vue b/src/components/project/SortingOptions.vue
index 20ce813d..8eef2d36 100644
--- a/src/components/project/SortingOptions.vue
+++ b/src/components/project/SortingOptions.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card
     id="project-sorting-options"
-    :header="'Sorting Options'">
+    header="Sorting Options">
 
     <div class="form-group">
       <label>Sort by:</label>
@@ -92,7 +92,7 @@ export default {
   font-size: $font-size-sm;
 
   .card-header {
-    @extend .bg-faded;
+    @extend .bg-light;
     text-align: center;
     padding: $list-group-item-padding-y $list-group-item-padding-x;
   }
diff --git a/src/components/project/Thumbnail.vue b/src/components/project/Thumbnail.vue
index 59342b1c..ae3783ec 100644
--- a/src/components/project/Thumbnail.vue
+++ b/src/components/project/Thumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="project-thumbnail">
-    <img v-if="thumbnail" :src="thumbnail" :class="imgClass" :alt="altTag">
+    <img v-if="thumbnail" :src="thumbnail" :class="imgClass">
     <div class="thumbnail-placeholder">
       <icon name="picture-o" scale="4"></icon>
     </div>
@@ -65,14 +65,14 @@ export default {
   }
 
   .thumbnail-placeholder {
-    @extend .bg-faded;
+    @extend .bg-light;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 
     svg {
-      color: $gray-light;
+      color: $gray-600;
     }
   }
 }
diff --git a/src/components/publications/PublicationCard.vue b/src/components/publications/PublicationCard.vue
index 5f4bd583..7b3c67dd 100644
--- a/src/components/publications/PublicationCard.vue
+++ b/src/components/publications/PublicationCard.vue
@@ -75,13 +75,13 @@ export default {
     font-family: $font-family-base;
     font-weight: 600;
     text-transform: uppercase;
-    color: $gray-dark;
+    color: $gray-1000;
   }
 
   .publication-created {
     font-size: $font-size-sm;
     font-style: italic;
-    color: $gray-light;
+    color: $gray-600;
   }
 
   .publication-body {
diff --git a/src/components/user/Avatar.vue b/src/components/user/Avatar.vue
index 29299134..bc20140b 100644
--- a/src/components/user/Avatar.vue
+++ b/src/components/user/Avatar.vue
@@ -1,20 +1,26 @@
 <template>
-  <b-tooltip :content="user.name" :triggers="tooltipTriggers">
-    <div id="wrapper">
+  <div class="avatar">
 
-      <v-gravatar
-        v-if="avatar === 'gravatar'"
-        :email="user.name"
-        :size="size"
-        default-img="identicon"
-        :alt="altTag"
-        class="img-thumbnail rounded-circle">
-      </v-gravatar>
+    <v-gravatar
+      v-if="avatar === 'gravatar'"
+      v-b-tooltip
+      :triggers="tooltipTriggers"
+      :title="user.name"
+      :email="user.name"
+      :size="size"
+      default-img="identicon"
+      :alt="altTag"
+      class="img-thumbnail rounded-circle">
+    </v-gravatar>
 
-      <img v-else :src="avatar" :alt="altTag">
+    <img
+      v-else
+      v-b-tooltip
+      :triggers="tooltipTriggers"
+      :title="user.name"
+      :src="avatar">
 
-    </div>
-  </b-tooltip>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/user/FavouritesCard.vue b/src/components/user/FavouritesCard.vue
index 4b3b8656..24265796 100644
--- a/src/components/user/FavouritesCard.vue
+++ b/src/components/user/FavouritesCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card class="favourites-card" no-block :header="'Favourites'">
+  <b-card class="favourites-card" no-body :header="'Favourites'">
 
     <loading
       v-if="loading"
@@ -8,7 +8,7 @@
 
     <div
       v-else
-      class="card-block">
+      class="card-body">
       <p v-if="!images.length">
         You haven't added any favourite tasks yet.
       </p>
@@ -44,13 +44,6 @@ export default {
   },
 
   methods: {
-    /**
-     * Get the favourites data.
-     */
-    fetchFavourites () {
-      return pybossaApi.get(`/api/favorites`)
-    },
-
     /**
      * Load the image data.
      * @param {Array} favourites
@@ -58,6 +51,7 @@ export default {
      */
     getImageData (favourites) {
       return favourites.map((task) => {
+        console.log(task)
         if ('imgInfoUri' in task.info) {
           return this.getIiifImageData(task)
         } else if ('url_m' in task.info) {
@@ -93,7 +87,8 @@ export default {
   },
 
   mounted () {
-    this.fetchFavourites().then(r => {
+    pybossaApi.get(`/api/favorites`).then(r => {
+      console.log('OK', r.data)
       this.images = this.getImageData(r.data)
       this.loading = false
     })
diff --git a/src/components/user/ProfileCard.vue b/src/components/user/ProfileCard.vue
index d682f724..8eed77f8 100644
--- a/src/components/user/ProfileCard.vue
+++ b/src/components/user/ProfileCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card class="user-card" no-block>
+  <b-card class="user-card" no-body>
 
     <div class="avatar-background">
       <user-avatar
@@ -8,7 +8,7 @@
       </user-avatar>
     </div>
 
-    <div id="user-details" class="card-block">
+    <div id="user-details" class="card-body">
       <div class="card-title">
         <h2>{{ user.name }}</h2>
       </div>
@@ -23,7 +23,7 @@
         </ul>
       </div>
     </div>
-    <div class="card-block">
+    <div class="card-body">
       <slot></slot>
     </div>
   </div>
@@ -57,13 +57,13 @@ export default {
 .card.user-card {
   .avatar-background {
     text-align: center;
-    padding-top: $spacer-y* 2;
-    padding-left: $spacer-x * 2;
-    padding-right: $spacer-x * 2;
+    padding-top: $spacer * 2;
+    padding-left: $spacer * 2;
+    padding-right: $spacer * 2;
     background:
-      linear-gradient(to bottom, rgba($brand-info, 0) 0%,
-      rgba($brand-info, 0) calc(50% + (#{$spacer-y} * 1)),
-      $white calc(50% + (#{$spacer-y} * 1)), $white 100% ),
+      linear-gradient(to bottom, rgba($blue, 0) 0%,
+      rgba($blue, 0) calc(50% + (#{$spacer} * 1)),
+      $white calc(50% + (#{$spacer} * 1)), $white 100% ),
       url('../../assets/img/app-background.jpg');
     background-size: cover;
     background-position: center center;
diff --git a/src/layouts/CollectionBase.vue b/src/layouts/CollectionBase.vue
index ebac541a..4939717d 100644
--- a/src/layouts/CollectionBase.vue
+++ b/src/layouts/CollectionBase.vue
@@ -58,7 +58,8 @@ export default {
       }
     },
     collectionConfig: function () {
-      return siteConfig.collections[this.$route.params.collectionname]
+      const collectionName = this.$route.params.collectionname
+      return siteConfig.collections[collectionName]
     }
   }
 }
diff --git a/src/layouts/FloatingTabs.vue b/src/layouts/FloatingTabs.vue
index 7cf68265..8a09ab3d 100644
--- a/src/layouts/FloatingTabs.vue
+++ b/src/layouts/FloatingTabs.vue
@@ -104,7 +104,7 @@ export default {
       }
 
       &:nth-child(even) {
-        @extend .bg-faded;
+        @extend .bg-light;
       }
 
       @include media-breakpoint-up(md) {
@@ -116,13 +116,13 @@ export default {
   .nav.nav-unstyled {
     overflow-x: auto;
     padding: $navbar-padding-y $navbar-padding-x;
-    background-color: rgba($gray-lighter, 0.85);
+    background-color: rgba($gray-300, 0.85);
 
     .nav-link {
       font-size: $font-size-sm;
 
       transition: opacity 350ms ease;
-      color: lighten($gray, 15%);
+      color: rgba($gray-700, 0.85);
       display: none;
 
       @include media-breakpoint-up(sm) {
diff --git a/src/main.js b/src/main.js
index e9f124db..6218c53d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,7 @@ import VueFormGenerator from 'vue-form-generator'
 import VueImages from 'vue-images'
 import VueAnalytics from 'vue-analytics'
 import VueProgressBar from 'vue-progressbar'
+import VueCookie from 'vue-cookie'
 import Icon from 'vue-awesome/components/Icon'
 import LibcrowdsViewer from 'libcrowds-viewer'
 import ToggleButton from 'vue-js-toggle-button'
@@ -34,6 +35,7 @@ Vue.use(VueFormGenerator)
 Vue.use(ToggleButton)
 Vue.use(LibcrowdsViewer)
 Vue.use(VueProgressBar)
+Vue.use(VueCookie)
 
 Vue.component('v-gravatar', VueGravatar)
 Vue.component('v-images', VueImages)
diff --git a/src/pages/account/ForgottenPassword.vue b/src/pages/account/ForgottenPassword.vue
index 13690c8e..8b35028d 100644
--- a/src/pages/account/ForgottenPassword.vue
+++ b/src/pages/account/ForgottenPassword.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="forgotten-password">
     <div class="container my-5">
-      <div class="col-lg-8 offset-lg-2">
+      <div class="col-lg-8 mx-auto">
         <card-form
-          :header="'Forgotten Password'"
-          :submitText="'Reset'"
+          header="Forgotten Password"
+          submit-text="Reset"
           :form="form"
           @success="onSuccess">
         </card-form>
diff --git a/src/pages/account/Newsletter.vue b/src/pages/account/Newsletter.vue
index ac9cf59a..904e251a 100644
--- a/src/pages/account/Newsletter.vue
+++ b/src/pages/account/Newsletter.vue
@@ -1,23 +1,23 @@
 <template>
   <div id="newsletter">
     <div class="container my-5">
-      <div class="col-lg-8 offset-lg-2">
+      <div class="col-lg-8 mx-auto">
         <b-card :header="title">
           <p class="lead">
             {{ lead }}
           </p>
           <template slot="footer">
             <div class="float-right">
-              <b-button
-                variant="secondary"
+              <b-btn
+                variant="outline-secondary"
                 @click="suscribe('False')">
                 No thanks
-              </b-button>
-              <b-button
+              </b-btn>
+              <b-btn
                 variant="success"
                 @click="suscribe('True')">
                 Sure, sign me up!
-              </b-button>
+              </b-btn>
             </div>
           </template>
         </b-card>
diff --git a/src/pages/account/Profile.vue b/src/pages/account/Profile.vue
index 0b321198..eda4a5db 100644
--- a/src/pages/account/Profile.vue
+++ b/src/pages/account/Profile.vue
@@ -14,7 +14,7 @@
             v-if="user"
             class="mb-3"
             :user="user">
-            <b-button
+            <b-btn
               v-if="isCurrentUser"
               block
               variant="success"
@@ -25,17 +25,11 @@
                 }
               }">
               Settings
-            </b-button>
+            </b-btn>
           </user-profile-card>
         </div>
         <div class="col-lg-8">
-
-          <user-favourites-card
-            class="mb-2"
-            v-if="isCurrentUser">
-          </user-favourites-card>
-
-          <b-card no-block :header="'Contributions'">
+          <b-card no-body header="Contributions">
             <b-table
               hover
               striped
@@ -45,15 +39,10 @@
               <template slot="overall_progress" scope="project">
                 {{ project.item.overall_progress }}%
               </template>
-              <template slot="action" scope="project">
-              </template>
             </b-table>
           </b-card>
-
         </div>
       </div>
-
-
     </div>
   </div>
 </template>
@@ -62,7 +51,6 @@
 import isEmpty from 'lodash/isEmpty'
 import pybossaApi from '@/api/pybossa'
 import UserProfileCard from '@/components/user/ProfileCard'
-import UserFavouritesCard from '@/components/user/FavouritesCard'
 import ProjectContribButton from '@/components/buttons/ProjectContrib'
 import Loading from '@/components/Loading'
 
@@ -73,9 +61,14 @@ export default {
       projects: [],
       tableFields: {
         name: { label: 'Name' },
-        n_volunteers: { label: 'Volunteers' },
-        overall_progress: { label: 'Progress' },
-        action: { label: 'Action' }
+        n_volunteers: {
+          label: 'Volunteers',
+          class: 'text-center'
+        },
+        overall_progress: {
+          label: 'Progress',
+          class: 'text-center'
+        }
       }
     }
   },
@@ -88,7 +81,6 @@ export default {
 
   components: {
     UserProfileCard,
-    UserFavouritesCard,
     ProjectContribButton,
     Loading
   },
@@ -113,6 +105,7 @@ export default {
      *   The data.
      */
     setData (data) {
+      console.log(data)
       this.user = data.user
       if (data.projects) {
         this.projects = data.projects
diff --git a/src/pages/account/Projects.vue b/src/pages/account/Projects.vue
index 7fd3c903..584162d2 100644
--- a/src/pages/account/Projects.vue
+++ b/src/pages/account/Projects.vue
@@ -1,48 +1,51 @@
 <template>
   <div id="account-projects">
-    <div class="container my-5">
-      <b-card header="Open Project">
-        <div class="row">
-          <div class="col-lg-4">
-            <category-list-chooser
-              header="Categories"
-              v-if="categories.length"
-              :categories="categories"
-              @change="onCategoryChange">
-            </category-list-chooser>
-          </div>
-          <div class="col-lg-8">
-            <transition
-              name="fade"
-              mode="out-in"
-              appear>
-              <b-table
-                v-if="projects.length"
-                responsive
-                striped
-                hover
-                show-empty
-                :items="projects"
-                :fields="tableFields">
-                <template slot="action" scope="project">
-                  <b-btn
-                    size="sm"
-                    variant="success"
-                    :to="{
-                      name: 'project-settings',
-                      params: {
-                        shortname: project.item.short_name
-                      }
-                    }">
-                    Open
-                  </b-btn>
-                </template>
-              </b-table>
-            </transition>
-          </div>
-        </div>
+    <b-container class="my-5">
+      <b-card no-body header="Open Project">
+        <b-card-body class="p-0">
+          <b-row no-gutters>
+            <b-col lg="4">
+              <category-list-chooser
+                header="Categories"
+                class="nested-left nested-lg"
+                v-if="categories.length"
+                :categories="categories"
+                @change="onCategoryChange">
+              </category-list-chooser>
+            </b-col>
+            <b-col class="p-2">
+              <transition
+                name="fade"
+                mode="out-in"
+                appear>
+                <b-table
+                  v-if="projects.length"
+                  responsive
+                  striped
+                  hover
+                  show-empty
+                  :items="projects"
+                  :fields="tableFields">
+                  <template slot="action" scope="project">
+                    <b-btn
+                      size="sm"
+                      variant="success"
+                      :to="{
+                        name: 'project-settings',
+                        params: {
+                          shortname: project.item.short_name
+                        }
+                      }">
+                      Open
+                    </b-btn>
+                  </template>
+                </b-table>
+              </transition>
+            </b-col>
+          </b-row>
+        </b-card-body>
       </b-card>
-    </div>
+    </b-container>
   </div>
 </template>
 
@@ -168,6 +171,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import 'src/assets/style/main';
+
 #account-projects {
   .fade-enter-active,
   .fade-leave-active {
diff --git a/src/pages/account/Register.vue b/src/pages/account/Register.vue
index 67fdbe81..7dc8c582 100644
--- a/src/pages/account/Register.vue
+++ b/src/pages/account/Register.vue
@@ -1,19 +1,31 @@
 <template>
   <div id="register">
     <div class="container my-5">
-      <div class="col-lg-8 offset-lg-2">
+      <div class="col-lg-8 mx-auto">
         <card-form
-          :header="'Register'"
-          :lead="lead"
+          header="Register"
           :submitText="submitText"
           :form="form"
           @success="onSuccess">
-
+          <div
+            slot="top"
+            v-if="auth.facebook || auth.twitter || auth.google">
+            <p class="lead text-center">
+              Sign up with
+            </p>
+            <oauth-buttons
+              :facebook="auth.facebook"
+              :google="auth.google"
+              :twitter="auth.twitter">
+            </oauth-buttons>
+            <p class="lead text-center mt-2 mb-1">
+              or
+            </p>
+          </div>
           <div slot="footer-left">
             <p class="mb-0 mr-3">
               <small>
-                By clicking on "{{ submitText }}" you are agreeing to
-                the
+                By signing up you are agreeing to the
                 <router-link
                   :to="{
                     name: 'help-tos'
@@ -30,7 +42,6 @@
               </small>
             </p>
           </div>
-
         </card-form>
       </div>
     </div>
@@ -42,6 +53,7 @@ import swal from 'sweetalert2'
 import siteConfig from '@/siteConfig'
 import pybossaApi from '@/api/pybossa'
 import CardForm from '@/components/forms/CardForm'
+import OauthButtons from '@/components/buttons/Oauth'
 
 export default {
   data: function () {
@@ -79,11 +91,11 @@ export default {
               label: 'Password',
               type: 'input',
               inputType: 'password',
-              placeholder: 'Create a password'
+              placeholder: 'Choose a password'
             },
             {
               model: 'confirm',
-              label: 'Password',
+              label: 'Confirm Password',
               type: 'input',
               inputType: 'password',
               placeholder: 'Confirm your password'
@@ -91,8 +103,7 @@ export default {
           ]
         }
       },
-      auth: {},
-      lead: `Create an account for ${siteConfig.brand}`
+      auth: {}
     }
   },
 
@@ -109,7 +120,8 @@ export default {
   },
 
   components: {
-    CardForm
+    CardForm,
+    OauthButtons
   },
 
   methods: {
@@ -120,6 +132,7 @@ export default {
      */
     setData (data) {
       this.form.model = data.form
+      this.auth = data.auth
     },
 
     /**
@@ -143,8 +156,13 @@ export default {
   },
 
   beforeRouteEnter (to, from, next) {
+    let data = {}
     pybossaApi.get('/account/register').then(r => {
-      next(vm => vm.setData(r.data))
+      data = r.data
+      return pybossaApi.get('/account/signin')
+    }).then(r => {
+      data.auth = r.data.auth
+      next(vm => vm.setData(data))
     })
   }
 }
diff --git a/src/pages/account/ResetPassword.vue b/src/pages/account/ResetPassword.vue
index f66a45a3..1282f977 100644
--- a/src/pages/account/ResetPassword.vue
+++ b/src/pages/account/ResetPassword.vue
@@ -1,8 +1,12 @@
 <template>
   <div id="reset-password">
     <div class="container my-5">
-      <div class="col-lg-8 offset-lg-2">
-        <card-form :header="'Reset Password'" :submitText="'Reset'" :form="form" @success="onSuccess">
+      <div class="col-lg-8 mx-auto">
+        <card-form
+          header="Reset Password"
+          submitText="Reset"
+          :form="form"
+          @success="onSuccess">
         </card-form>
       </div>
     </div>
diff --git a/src/pages/account/Signin.vue b/src/pages/account/Signin.vue
index 5cf2acf2..dd733ede 100644
--- a/src/pages/account/Signin.vue
+++ b/src/pages/account/Signin.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="signin">
     <div class="container my-5">
-      <div class="col-lg-8 offset-lg-2">
+      <div class="col-lg-8 mx-auto">
         <card-form
-          :header="'Signin'"
+          header="Signin"
           :lead="lead"
-          :submitText="'Sign in'"
+          submit-text="Sign in"
           :form="form"
           @success="onSuccess">
 
@@ -15,39 +15,11 @@
             <p class="lead text-center">
               or sign in with
             </p>
-            <div class="row-btn-social">
-
-              <div v-if="auth.facebook">
-                <b-button
-                  class="mx-1"
-                  variant="facebook"
-                  @click="redirect('facebook')">
-                  <icon name="facebook"></icon>
-                  <span class="ml-1 hidden-sm-down">Facebook</span>
-                </b-button>
-              </div>
-
-              <div v-if="auth.google">
-                <b-button
-                  class="mx-1"
-                  variant="googleplus"
-                  @click="redirect('google')">
-                  <icon name="google"></icon>
-                  <span class="ml-1 hidden-sm-down">Google</span>
-                </b-button>
-              </div>
-
-              <div v-if="auth.twitter">
-                <b-button
-                  class="mx-1"
-                  variant="twitter"
-                  @click="redirect('twitter')">
-                  <icon name="twitter"></icon>
-                  <span class="ml-1 hidden-sm-down">Twitter</span>
-                </b-button>
-              </div>
-
-            </div>
+            <oauth-buttons
+              :facebook="auth.facebook"
+              :google="auth.google"
+              :twitter="auth.twitter">
+            </oauth-buttons>
           </div>
 
           <div slot="footer-left">
@@ -72,6 +44,7 @@ import 'vue-awesome/icons/facebook'
 import siteConfig from '@/siteConfig'
 import pybossaApi from '@/api/pybossa'
 import CardForm from '@/components/forms/CardForm'
+import OauthButtons from '@/components/buttons/Oauth'
 
 export default {
   data: function () {
@@ -115,7 +88,8 @@ export default {
   },
 
   components: {
-    CardForm
+    CardForm,
+    OauthButtons
   },
 
   computed: {
@@ -125,16 +99,6 @@ export default {
   },
 
   methods: {
-    /**
-     * Redirect to an external endpoint (for OAuth signin).
-     * @param {String} endpoint
-     *   The endpoint
-     */
-    redirect (endpoint) {
-      const nextExternal = `${document.location.origin}/${this.next}`
-      const query = `next=${nextExternal}`
-      window.location = `${siteConfig.pybossaHost}/${endpoint}?${query}`
-    },
 
     /**
      * Set core data.
@@ -167,61 +131,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import 'src/assets/style/main';
-
-#signin {
-  .row-btn-social {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-
-    @include media-breakpoint-up(md) {
-      justify-content: space-around;
-    }
-
-    .btn {
-      @include hover-focus;
-      border-radius: 0;
-      color: $white;
-      height: 100%;
-      display: flex;
-
-      @include hover-focus {
-        color: $white;
-      }
-
-      &.btn-twitter {
-        background: $twitter;
-
-        @include hover-focus {
-          background: darken($twitter, 5%);
-        }
-      }
-
-      &.btn-facebook {
-        background: $facebook;
-
-        @include hover-focus {
-          background: darken($facebook, 5%);
-        }
-      }
-
-      &.btn-googleplus {
-        background: $googleplus;
-
-        @include hover-focus {
-          background: darken($googleplus, 5%);
-        }
-      }
-    }
-
-    /* Fix inconsistend heights */
-    svg {
-      display: flex;
-      height: 1.2rem;
-    }
-  }
-}
-</style>
diff --git a/src/pages/account/settings/ApiSettings.vue b/src/pages/account/settings/ApiSettings.vue
index a03dcd80..99e64383 100644
--- a/src/pages/account/settings/ApiSettings.vue
+++ b/src/pages/account/settings/ApiSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <card-form
-    :header="'API Settings'"
-    :submitText="'Reset API Key'"
+    header="API Settings"
+    submit-text="Reset API Key"
     :form="form"
     @success="updateCurrentUser">
   </card-form>
diff --git a/src/pages/account/settings/AvatarSettings.vue b/src/pages/account/settings/AvatarSettings.vue
index e64a20d1..db3c7b91 100644
--- a/src/pages/account/settings/AvatarSettings.vue
+++ b/src/pages/account/settings/AvatarSettings.vue
@@ -1,8 +1,8 @@
 <template>
   <avatar-form
     v-if="!loading"
-    :header="'Avatar Settings'"
-    :submitText="'Update Avatar'"
+    header="Avatar Settings"
+    submit-text="Update Avatar"
     :form="form">
   </avatar-form>
 </template>
diff --git a/src/pages/account/settings/ProfileSettings.vue b/src/pages/account/settings/ProfileSettings.vue
index b80be906..f8e41d7b 100644
--- a/src/pages/account/settings/ProfileSettings.vue
+++ b/src/pages/account/settings/ProfileSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <card-form
-    :header="'Profile Settings'"
-    :submitText="'Update'"
+    header="Profile Settings"
+    submit-text="Update"
     :form="form"
     @success="updateCurrentUser">
   </card-form>
diff --git a/src/pages/account/settings/SecuritySettings.vue b/src/pages/account/settings/SecuritySettings.vue
index caad756a..488ad839 100644
--- a/src/pages/account/settings/SecuritySettings.vue
+++ b/src/pages/account/settings/SecuritySettings.vue
@@ -1,7 +1,7 @@
 <template>
   <card-form
-    :header="'Security Settings'"
-    :submitText="'Reset Password'"
+    header="Security Settings"
+    submit-text="Reset Password"
     :form="form">
   </card-form>
 </template>
diff --git a/src/pages/admin/BackgroundJobs.vue b/src/pages/admin/BackgroundJobs.vue
index 057c94a6..c600b704 100644
--- a/src/pages/admin/BackgroundJobs.vue
+++ b/src/pages/admin/BackgroundJobs.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="admin-background-jobs">
-    <b-card no-block header="Background Jobs">
+    <b-card no-body header="Background Jobs">
       <iframe
         :src="rqSchedulerRoute"
         height="800"
diff --git a/src/pages/admin/Categories.vue b/src/pages/admin/Categories.vue
index cf3276cd..d15901fc 100644
--- a/src/pages/admin/Categories.vue
+++ b/src/pages/admin/Categories.vue
@@ -1,59 +1,61 @@
 <template>
   <div id="admin-categories">
     <card-form
-      :header="'New Category'"
+      header="New Category"
       :form="form"
       class="mb-4"
       @success="onNewCategorySuccess">
     </card-form>
 
     <b-card
-      no-block
-      :header="'Current Categories'">
-      <b-table
-        hover
-        show-empty
-        :items="categories"
-        :fields="table.fields">
-
-        <template slot="n_projects" scope="category">
-          {{ n_projects[category.item.short_name] }}
-        </template>
-
-        <template slot="collection" scope="category">
-          {{ category.item.info.collection }}
-        </template>
-
-        <template slot="created" scope="category">
-          {{ category.item.created | formatDate }}
-        </template>
-
-        <template slot="action" scope="category">
-          <b-button-group>
-            <b-button
-              :id="`edit-${category.id}`"
-              variant="secondary"
-              size="sm"
-              :to="{
-                name: 'admin-edit-category',
-                params: {
-                  categoryid: category.item.id
-                }
-              }">
-              Edit
-            </b-button>
-            <b-button
-              :id="`del-${category.id}`"
-              variant="danger"
-              size="sm"
-              :disabled="n_projects[category.item.short_name] > 0"
-              @click="deleteCategory(category.item.id)">
-              Delete
-            </b-button>
-          </b-button-group>
-        </template>
-
-      </b-table>
+      no-body
+      header="Current Categories">
+      <b-card-body class="p-0">
+        <b-table
+          hover
+          show-empty
+          :items="categories"
+          :fields="table.fields">
+
+          <template slot="n_projects" scope="category">
+            {{ n_projects[category.item.short_name] }}
+          </template>
+
+          <template slot="collection" scope="category">
+            {{ category.item.info.collection }}
+          </template>
+
+          <template slot="created" scope="category">
+            {{ category.item.created | formatDate }}
+          </template>
+
+          <template slot="action" scope="category">
+            <b-btn-group>
+              <b-btn
+                :id="`edit-${category.id}`"
+                variant="info"
+                size="sm"
+                :to="{
+                  name: 'admin-edit-category',
+                  params: {
+                    categoryid: category.item.id
+                  }
+                }">
+                Edit
+              </b-btn>
+              <b-btn
+                :id="`del-${category.id}`"
+                variant="danger"
+                size="sm"
+                :disabled="n_projects[category.item.short_name] > 0"
+                @click="deleteCategory(category.item.id)">
+                Delete
+              </b-btn>
+            </b-btn-group>
+          </template>
+
+        </b-table>
+      </b-card-body>
     </b-card>
   </div>
 </template>
@@ -95,13 +97,29 @@ export default {
       },
       table: {
         fields: {
-          id: { label: 'ID' },
-          name: { label: 'Name' },
-          collection: { label: 'Collection' },
-          n_projects: { label: 'Projects' },
-          description: { label: 'Description' },
-          created: { label: 'Created' },
-          action: { label: 'Action' }
+          id: {
+            label: 'ID',
+            class: 'text-center'
+          },
+          name: {
+            label: 'Name'
+          },
+          collection: {
+            label: 'Collection',
+            class: 'text-center'
+          },
+          n_projects: {
+            label: 'Projects',
+            class: 'text-center d-none d-xl-table-cell'
+          },
+          created: {
+            label: 'Created',
+            class: 'text-center d-none d-xl-table-cell'
+          },
+          action: {
+            label: 'Action',
+            class: 'text-center'
+          }
         }
       },
       n_projects: {}
diff --git a/src/pages/admin/EditCategory.vue b/src/pages/admin/EditCategory.vue
index c73209e3..b29b6c13 100644
--- a/src/pages/admin/EditCategory.vue
+++ b/src/pages/admin/EditCategory.vue
@@ -2,8 +2,8 @@
   <div id="admin-categories">
     <card-form
       show-cancel
-      :header="'Edit Category'"
-      :submitText="'Update'"
+      header="Edit Category"
+      submit-text="Update"
       :form="form"
       class="mb-4"
       @success="onSuccess"
diff --git a/src/pages/admin/Featured.vue b/src/pages/admin/Featured.vue
index 2fcf97cf..2be01711 100644
--- a/src/pages/admin/Featured.vue
+++ b/src/pages/admin/Featured.vue
@@ -1,21 +1,18 @@
 <template>
   <div id="admin-featured">
-    <b-card header="Set Featured Projects">
-      <div class="row">
-        <div class="col-md-4">
-          <category-list-chooser
-            v-if="categories.length"
-            header="Categories"
-            :categories="categories"
-            @change="onCategoryChange">
-          </category-list-chooser>
-        </div>
-        <div class="col-md-8">
-          <b-card
-            no-block
-            v-if="activeCategory"
-            :header="`Projects - ${activeCategory.name}`">
-
+    <b-card no-body header="Set Featured Projects">
+      <b-card-body class="p-0">
+        <b-row no-gutters>
+          <b-col lg="4">
+            <category-list-chooser
+              v-if="categories.length"
+              class="nested-left nested-lg"
+              header="Categories"
+              :categories="categories"
+              @change="onCategoryChange">
+            </category-list-chooser>
+          </b-col>
+          <b-col lg="8" class="p-2">
             <transition
               name="fade"
               mode="out-in"
@@ -24,6 +21,7 @@
                 hover
                 striped
                 show-empty
+                v-if="activeCategory"
                 :items="categoryProjects"
                 :fields="tableFields">
                 <template slot="overall_progress" scope="project">
@@ -39,13 +37,13 @@
                 </template>
               </b-table>
             </transition>
-
-          </b-card>
-        </div>
-      </div>
+          </b-col>
+        </b-row>
+      </b-card-body>
     </b-card>
+
     <b-card
-      no-block
+      no-body
       class="mt-4"
       header="Current Featured Projects">
       <b-table
@@ -82,10 +80,21 @@ export default {
       csrf: '',
       activeCategory: null,
       tableFields: {
-        name: { label: 'Name' },
-        n_volunteers: { label: 'Volunteers' },
-        overall_progress: { label: 'Progress' },
-        action: { label: 'Action' }
+        name: {
+          label: 'Name'
+        },
+        n_volunteers: {
+          label: 'Volunteers',
+          class: 'text-center d-none d-xl-table-cell'
+        },
+        overall_progress: {
+          label: 'Progress',
+          class: 'text-center d-none d-xl-table-cell'
+        },
+        action: {
+          label: 'Action',
+          class: 'text-center'
+        }
       }
     }
   },
diff --git a/src/pages/admin/Publications.vue b/src/pages/admin/Publications.vue
index 4bb2def3..66478248 100644
--- a/src/pages/admin/Publications.vue
+++ b/src/pages/admin/Publications.vue
@@ -3,16 +3,16 @@
     <div class="row">
       <div class="col-sm-12 col-lg-6">
         <card-form
-          :header="'New Publication'"
+          header="New Publication"
           :submitText="'Submit'"
           :form="form"
           @success="refreshCurrentPublications">
         </card-form>
       </div>
-      <div class="hidden-md-down col-lg-6">
+      <div class="d-none d-lg-block col-lg-6">
         <b-card
-          class="bg-faded"
-          :header="'Preview'">
+          class="bg-light"
+          header="Preview">
           <publication-card
             show-placeholders
             :publication="form.model">
@@ -23,8 +23,8 @@
     <div class="row">
       <div class="col-sm-12 mt-3">
         <b-card
-          no-block
-          :header="'Current Publications'">
+          no-body
+          header="Current Publications">
           <b-table
             hover
             show-empty
@@ -37,12 +37,12 @@
             </template>
 
             <template slot="action" scope="publication">
-              <b-button
+              <b-btn
                 variant="danger"
                 size="sm"
                 @click="deletePublication(publication.item.id)">
                 Delete
-              </b-button>
+              </b-btn>
             </template>
 
           </b-table>
@@ -90,12 +90,25 @@ export default {
       },
       table: {
         fields: {
-          id: { label: 'ID' },
-          title: { label: 'Title' },
-          body: { label: 'Body' },
-          created: { label: 'Created' },
-          user_id: { label: 'User ID' },
-          action: { label: 'Action' }
+          id: {
+            label: 'ID',
+            class: 'text-center'
+          },
+          title: {
+            label: 'Title'
+          },
+          body: {
+            label: 'Body',
+            class: 'd-none d-xl-table-cell'
+          },
+          created: {
+            label: 'Created',
+            class: 'text-center'
+          },
+          action: {
+            label: 'Action',
+            class: 'text-center'
+          }
         }
       }
     }
diff --git a/src/pages/admin/Users.vue b/src/pages/admin/Users.vue
index 4d1e40df..3a8b37a9 100644
--- a/src/pages/admin/Users.vue
+++ b/src/pages/admin/Users.vue
@@ -1,19 +1,18 @@
 <template>
   <div id="admin-users">
-    <b-card header="Manage Users">
-      <div class="row">
-        <div class="col-xl-4">
-          <card-form
-            submitText="Search"
-            header="Search"
-            :form="form"
-            @success="onSuccess">
-          </card-form>
-        </div>
-        <div class="col-xl-8 mt-4 mt-xl-0">
-          <b-card
-            no-block
-            header="Results">
+
+    <b-card no-body header="Manage Users">
+      <b-card-body class="p-0">
+        <b-row no-gutters>
+          <b-col lg="4">
+            <card-form
+              submitText="Search"
+              header="Search"
+              :form="form"
+              @success="onSuccess">
+            </card-form>
+          </b-col>
+          <b-col lg="8" class="p-2">
             <b-table
               hover
               show-empty
@@ -34,36 +33,38 @@
               </template>
 
             </b-table>
-          </b-card>
-        </div>
-      </div>
+          </b-col>
+        </b-row>
+      </b-card-body>
     </b-card>
-    <div class="row mt-4">
-      <div class="col-xl-4">
+
+    <b-row class="mt-4">
+      <b-col xl="4">
         <b-card
-          header="Export">
+          header="Export"
+          class="text-center">
           <p class="lead">
-            There are {{ nUsers }} registered users
+            {{ nUsers }} users registered
           </p>
-          <div class="text-right">
-            <b-btn
-              variant="success"
-              class="mt-1"
-              @click="download('csv')">
-              Export as CSV
-            </b-btn>
-            <b-btn
-              variant="success"
-              class="mt-1"
-              @click="download('json')">
-              Export as JSON
-            </b-btn>
-          </div>
+          <b-btn
+            variant="success"
+            class="mt-1"
+            size="sm"
+            @click="download('csv')">
+            Export as CSV
+          </b-btn>
+          <b-btn
+            variant="success"
+            class="mt-1"
+            size="sm"
+            @click="download('json')">
+            Export as JSON
+          </b-btn>
         </b-card>
-      </div>
-      <div class="col-xl-8 mt-4 mt-xl-0">
+      </b-col>
+      <b-col xl="8" class="mt-4 mt-xl-0">
         <b-card
-          no-block
+          no-body
           header="Current Administrators">
           <b-table
             hover
@@ -82,8 +83,8 @@
 
           </b-table>
         </b-card>
-      </div>
-    </div>
+      </b-col>
+    </b-row>
   </div>
 </template>
 
@@ -115,10 +116,21 @@ export default {
         }
       },
       tableFields: {
-        id: { label: 'ID' },
-        name: { label: 'Username' },
-        email_addr: { label: 'Email' },
-        action: { label: 'Action' }
+        id: {
+          label: 'ID',
+          class: 'text-center'
+        },
+        name: {
+          label: 'Username'
+        },
+        email_addr: {
+          label: 'Email',
+          class: 'd-none d-xl-table-cell'
+        },
+        action: {
+          label: 'Action',
+          class: 'text-center'
+        }
       }
     }
   },
diff --git a/src/pages/collection/About.vue b/src/pages/collection/About.vue
index 31b6ca19..5a27217c 100644
--- a/src/pages/collection/About.vue
+++ b/src/pages/collection/About.vue
@@ -16,7 +16,7 @@
         future research.
       </p>
       <div class="text-center mt-3">
-        <b-button
+        <b-btn
           variant="success"
           size="lg"
           :to="{
@@ -26,7 +26,7 @@
             }
           }">
           Get Started
-        </b-button>
+        </b-btn>
       </div>
     </section>
 
@@ -41,7 +41,7 @@
         v-if="index === collectionConfig.about.subsections.length - 1"
         class="text-center">
         <hr>
-        <b-button
+        <b-btn
           class="mt-1"
           variant="success"
           size="lg"
@@ -52,7 +52,7 @@
             }
           }">
           Get Started
-        </b-button>
+        </b-btn>
       </div>
 
     </section>
diff --git a/src/pages/collection/Contribute.vue b/src/pages/collection/Contribute.vue
index 39dc0ff1..70b46d95 100644
--- a/src/pages/collection/Contribute.vue
+++ b/src/pages/collection/Contribute.vue
@@ -5,23 +5,29 @@
     <section>
       <h2 class="text-center">Contribute</h2>
       <hr>
-      <p class="lead text-center">
-        Choose a {{ collectionConfig.terminology.project }} from the list below
-        to get started!
-      </p>
-      <p class="text-center mb-0">
-        <small>
-          For more information see the
-          <router-link
-            :to="{
-              name: 'collection-about',
-              params: {
-                collectionname: collectionConfig.key
-              }
-            }">about page.
-          </router-link>
-        </small>
-      </p>
+      <span
+        v-if="collectionConfig.contribute"
+        v-html="collectionConfig.contribute">
+      </span>
+      <span v-else>
+        <p class="lead text-center">
+          Choose a {{ collectionConfig.terminology.project }} from the list below
+          to get started!
+        </p>
+        <p class="text-center mb-0">
+          <small>
+            For more information see the
+            <router-link
+              :to="{
+                name: 'collection-about',
+                params: {
+                  collectionname: collectionConfig.key
+                }
+              }">about page.
+            </router-link>
+          </small>
+        </p>
+      </span>
       <hr>
       <div class="row">
         <div class="col-xl-3 mb-3">
@@ -34,7 +40,7 @@
           </category-list-chooser>
 
           <project-sorting-options
-            class="mt-3 hidden-lg-down"
+            class="mt-3 d-none d-xl-block"
             :viewOpts="viewOpts"
             :showCompleted="showCompleted"
             @sort="onSort"
@@ -43,7 +49,8 @@
           </project-sorting-options>
 
           <social-media-buttons
-            class="mt-3 hidden-lg-down text-center">
+            size="sm"
+            class="mt-3 d-none d-xl-block text-center">
           </social-media-buttons>
 
         </div>
@@ -78,10 +85,10 @@
                     {{ project.item.overall_progress }}%
                   </template>
                   <template slot="action" scope="project">
-                    <project-contrib-button
+                    <project-contrib-btn
                       :shortname="project.item.short_name"
                       variant="success">
-                    </project-contrib-button>
+                    </project-contrib-btn>
                   </template>
                 </b-table>
               </transition>
@@ -99,12 +106,12 @@
                 There are no projects to display.
               </p>
               <p>
-                <small class="hidden-lg-down">
+                <small class="d-none d-xl-block">
                   Use the list on the left of the screen to choose another
                   {{ collectionConfig.terminology.category }}, or the sorting
                   options to display any completed projects.
                 </small>
-                <small class="hidden-xl-up">
+                <small class="d-xl-none">
                   Use the list above to choose another
                   {{ collectionConfig.terminology.category }}.
                 </small>
diff --git a/src/pages/collection/Home.vue b/src/pages/collection/Home.vue
index f38acba8..c224e889 100644
--- a/src/pages/collection/Home.vue
+++ b/src/pages/collection/Home.vue
@@ -10,15 +10,23 @@
               v-html="siteConfig.logo"
               v-if="siteConfig.logo">
             </div>
-            <h1 class="display-3 d-inline-block hidden-md-down mb-0">
+            <span
+              class="mr-2 d-none d-lg-inline-block"
+              v-if="siteConfig.logo">
+            </span>
+            <h1 class="display-3 d-none d-lg-inline-block mb-0">
               {{ collectionConfig.name }}
             </h1>
+            <span
+              class="mr-4 d-none d-lg-inline-block"
+              v-if="siteConfig.logo">
+            </span>
           </div>
           <h2 id="tagline" class="mt-2 mb-3">
             {{ collectionConfig.tagline }}
           </h2>
           <div>
-            <b-button
+            <b-btn
               variant="success"
               size="lg"
               :to="{
@@ -28,7 +36,7 @@
                 }
               }">
               Get Started
-            </b-button>
+            </b-btn>
           </div>
         </div>
       </div>
@@ -36,26 +44,19 @@
 
     <section id="intro" class="bg-white invert-navbar">
       <div class="container py-3 py-md-4 text-center">
-        <div class="row sr">
-          <div class="col-sm-10 offset-sm-1">
-            <p id="site-lead" class="mb-0">
-              {{ collectionConfig.description }}
-            </p>
-          </div>
-        </div>
+        <p id="site-lead" class="mb-0 px-1">
+          {{ collectionConfig.description }}
+        </p>
         <hr class="my-3 w-75 sr">
-        <div class="row sr">
-          <div class="col-sm-10 offset-sm-1">
-            <p class="lead mb-0">
-              Your contributions will have a direct impact on enabling future
-              research at {{ siteConfig.company }}.
-            </p>
-          </div>
-        </div>
+        <p class="lead mb-0 px-1">
+          Your contributions will have a direct impact on enabling future
+          research at {{ siteConfig.company }}.
+        </p>
         <hr class="mt-3 w-75 sr">
-        <b-button
-          variant="secondary"
-          class="mt-md-1 sr"
+        <b-btn
+          variant="outline-dark"
+          class="mt-md-2 sr"
+          size="lg"
           :to="{
             name: 'collection-about',
             params: {
@@ -63,7 +64,7 @@
             }
           }">
           Learn More
-        </b-button>
+        </b-btn>
       </div>
     </section>
 
@@ -71,143 +72,117 @@
       id="featured-projects"
       class="invert-navbar"
       v-if="featured.length">
-      <div class="container text-center text-lg-left pb-4">
-        <div class="row">
-          <div class="col-lg-5 offset-lg-1 text-uppercase py-4">
+      <div class="container w-75 text-center pb-4">
+        <div class="row text-lg-left">
+          <div class="col-lg-5 text-uppercase py-4">
             <h2 class="display-5 font-weight-bold pt-1">
               Featured Projects
             </h2>
-            <hr class="wide mr-lg-5">
+            <hr class="wide">
             <p class="mr-lg-6">
               Choose from some of our current favourites.
             </p>
           </div>
-          <div class="col-lg-3 offset-lg-3 hidden-md-down">
-            <span id="ribbon">
+          <div class="col d-none d-lg-block">
+            <span class="ml-auto" id="ribbon">
               <icon name="star" scale="7"></icon>
             </span>
           </div>
         </div>
-        <div class="row text-center">
-          <div class="col-lg-10 offset-lg-1">
-            <ul class="list-unstyled">
-              <li v-for="project in featured" :key="project.id">
-                <project-card
-                  :collection-config="collectionConfig"
-                  :project="project">
-                </project-card>
-              </li>
-            </ul>
-            <b-button
-              class="mt-2"
-              variant="success"
-              size="lg"
-              :to="{
-                name: 'collection-contribute',
-                params: {
-                  collectionname: collectionConfig.key
-                }
-              }">
-              Browse all projects
-            </b-button>
-          </div>
-        </div>
+        <ul class="list-unstyled">
+          <li v-for="project in featured" :key="project.id">
+            <project-card
+              :collection-config="collectionConfig"
+              :project="project">
+            </project-card>
+          </li>
+        </ul>
+        <b-btn
+          class="mt-2"
+          variant="success"
+          size="lg"
+          :to="{
+            name: 'collection-contribute',
+            params: {
+              collectionname: collectionConfig.key
+            }
+          }">
+          Browse all projects
+        </b-btn>
       </div>
     </section>
 
     <section id="data">
       <span :style="dataStyle"></span>
       <b-jumbotron :style="dataStyle">
-        <div class="container py-4">
-          <div class="row text-center">
-            <div class="col-sm-12">
-              <h3 class="display-5">Open Data</h3>
-            </div>
-          </div>
-          <div class="row py-md-3">
-            <div class="col-md-8 offset-md-2">
-              <p class="lead">
-                All datasets generated from the experimental crowdsourcing
-                projects hosted on this platform are made available under a
-                <a
-                  :href="siteConfig.dataLicense.url"
-                  target="_blank">
-                  {{ siteConfig.dataLicense.name }} license
-                </a>
-                and can be downloaded by anyone in JSON or
-                CSV formats. Visit the data page to find out more.
-              </p>
-            </div>
-          </div>
-          <div class="row pt-2 text-center">
-            <div class="col-sm-12">
-              <b-button
-                variant="outline-white"
-                :to="{
-                  name: 'collection-data',
-                  params: {
-                    collectionname: collectionConfig.key
-                  }
-                }">
-                Get the data
-              </b-button>
-            </div>
-          </div>
+        <div class="container py-2 py-md-4 w-75 text-center">
+          <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
+            <a
+              :href="siteConfig.dataLicense.url"
+              target="_blank">
+              {{ siteConfig.dataLicense.name }} license
+            </a>
+            and can be downloaded by anyone in JSON or
+            CSV formats. Visit the data page to find out more.
+          </p>
+          <b-btn
+            variant="outline-light"
+            class="my-1"
+            :to="{
+              name: 'collection-data',
+              params: {
+                collectionname: collectionConfig.key
+              }
+            }">
+            Get the data
+          </b-btn>
         </div>
       </b-jumbotron>
     </section>
 
     <section id="results" v-if="collectionConfig.resultsComponent">
       <b-jumbotron :style="resultsStyle">
-        <div class="container py-4">
-          <div class="row text-center">
-            <div class="col-sm-12">
-              <h3 class="display-5">Results</h3>
-            </div>
-          </div>
-          <div class="row py-2">
-            <div class="col-md-8 offset-md-2">
-              <p class="lead">
-                As each {{ collectionConfig.terminology.task }} is completed,
-                {{ collectionConfig.terminology.taskRun | pluralize }} are
-                analysed and the outcome provided via our results page, making
-                the efforts of our volunteers immediately apparent.
-              </p>
-            </div>
-          </div>
-          <div class="row pt-2 text-center">
-            <div class="col-sm-12">
-              <b-button variant="outline-white" :to="{ name: 'results' }">
-                See the results
-              </b-button>
-            </div>
-          </div>
+        <div class="container py-2 py-md-4 w-75 text-center">
+          <h3 class="display-5">Results</h3>
+          <p class="lead my-2 my-md-3 text-sm-left">
+            As each {{ collectionConfig.terminology.task }} is completed,
+            {{ collectionConfig.terminology.taskRun | pluralize }} are
+            analysed and the outcome provided via our results page, making
+            the efforts of our volunteers immediately apparent.
+          </p>
+          <b-btn
+            variant="outline-light"
+            class="my-1"
+            :to="{
+              name: 'collection-results'
+            }">
+            Browse the results
+          </b-btn>
         </div>
       </b-jumbotron>
     </section>
 
     <section id="final-cta" class="bg-white invert-navbar">
-      <div class="container pt-4 pb-3">
-        <div class="row">
-          <div class="col-sm-10 offset-sm-1 text-center">
-            <h3 class="display-5 text-uppercase mb-0">Get Involved</h3>
-            <p class="lead my-3">
-              Your contributions will have a direct impact on enabling future
-              reasearch at {{ siteConfig.company }}.
-            </p>
-            <b-button
-              variant="success"
-              size="lg"
-              :to="{
-                name: 'collection-contribute',
-                params: {
-                  collectionname: collectionConfig.key
-                }
-              }">
-              Get Started
-            </b-button>
-          </div>
-        </div>
+      <div class="container pt-4 pb-3 text-center">
+        <h3 class="display-5 text-uppercase mb-0">Get Involved</h3>
+        <p class="lead my-3">
+          Your contributions will have a direct impact on enabling future
+          research at {{ siteConfig.company }}.
+        </p>
+        <b-btn
+          variant="success"
+          size="lg"
+          :to="{
+            name: 'collection-contribute',
+            params: {
+              collectionname: collectionConfig.key
+            }
+          }">
+          Get Started
+        </b-btn>
       </div>
     </section>
 
@@ -272,7 +247,6 @@ export default {
 
   components: {
     SocialMediaButtons,
-
     ProjectCard
   },
 
@@ -336,6 +310,7 @@ export default {
 
 #collection-home {
   .container.full-height {
+    min-height: 400px;
     height: 100vh;
     color: $white;
     opacity: 1;
@@ -355,11 +330,6 @@ export default {
     }
 
     #company-logo {
-      @include media-breakpoint-up(md) {
-        margin-right: 1.5rem;
-        margin-left: -1.5rem;
-      }
-
       svg {
         display: block;
       }
@@ -395,8 +365,10 @@ export default {
     border-width: 3px;
   }
 
-  .btn-outline-white {
-    @include button-outline-variant($white, $black);
+  .btn-outline-light {
+    @include hover-focus {
+      background-color: transparent;
+    }
   }
 
   .btn-black-underline  {
@@ -420,7 +392,7 @@ export default {
   }
 
   #featured-projects {
-    color: $gray-dark;
+    color: $gray-1000;
     background-image: url('../../assets/img/white-wall.png');
     box-shadow: 0 0 3px rgba($black, 0.2);
     -webkit-box-shadow: 0 0 3px rgba($black, 0.2);
@@ -432,8 +404,7 @@ export default {
     display:block;
     width: 12rem;
     height: 12rem;
-    background: $gray-lighter;
-    position: absolute;
+    background: $gray-300;
     top: -1px;
 
     svg {
@@ -449,7 +420,7 @@ export default {
       height: 0;
       border-width: 2rem 6rem 4rem 6rem;
       border-style: solid;
-      border-color: $gray-lighter $gray-lighter transparent $gray-lighter;
+      border-color: $gray-300 $gray-300 transparent $gray-300;
     }
   }
 
@@ -465,7 +436,7 @@ export default {
   }
 
   #top-users {
-    color: $gray-dark;
+    color: $gray-1000;
   }
 
   #results {
diff --git a/src/pages/collection/Presenter.vue b/src/pages/collection/Presenter.vue
index 9d1ecfe3..c879961f 100644
--- a/src/pages/collection/Presenter.vue
+++ b/src/pages/collection/Presenter.vue
@@ -8,7 +8,7 @@
       :currentUser="currentUser"
       :collectionConfig="collectionConfig"
       @submit="onSubmit"
-      @taskLiked="onTaskLiked">
+      @taskliked="onTaskLiked">
     </component>
   </div>
 </template>
@@ -153,11 +153,19 @@ export default {
     onTaskLiked (taskId, liked) {
       if (liked) {
         pybossaApi.post(`/api/favorites`, { task_id: taskId }).then(() => {
-          // TODO: feedback
+          this.$store.dispatch('NOTIFY', {
+            msg: 'Added to favourites',
+            type: 'info',
+            position: 'bottomleft'
+          })
         })
       } else {
         pybossaApi.delete(`/api/favorites/${taskId}`).then(() => {
-          // TODO: feedback
+          this.$store.dispatch('NOTIFY', {
+            msg: 'Removed from favourites',
+            type: 'info',
+            position: 'bottomleft'
+          })
         })
       }
     },
@@ -184,6 +192,8 @@ export default {
      *   The answer data.
      */
     onSubmit (projectId, taskId, answer) {
+      const cookieName = `${this.project.short_name}_participated`
+      const hasParticipated = this.$cookie.get(cookieName)
       const taskrun = JSON.stringify({
         'project_id': projectId,
         'task_id': taskId,
@@ -192,6 +202,21 @@ export default {
       pybossaApi.post(`/api/taskrun`, taskrun).then(r => {
         this.removeTask(taskId)
         this.loadTasks()
+        if (hasParticipated === 'true') {
+          this.$store.dispatch('NOTIFY', {
+            msg: 'Answer saved, thank you!',
+            type: 'success',
+            position: 'bottomleft'
+          })
+        } else {
+          swal({
+            title: 'Thank you!',
+            html: 'Your contribution has been saved successfully and will ' +
+                  'directly help enable future research.',
+            type: 'success'
+          })
+        }
+        this.$cookie.set(cookieName, true, { expires: '1Y' })
       })
     }
   },
diff --git a/src/pages/core/Landing.vue b/src/pages/core/Landing.vue
index 02dc0f3c..804e4cb4 100644
--- a/src/pages/core/Landing.vue
+++ b/src/pages/core/Landing.vue
@@ -3,14 +3,9 @@
     <transition appear>
       <div id="app-hero">
         <div class="container">
-          <span class="hidden-sm-down"></span>
+          <span class="d-none d-md-flex"></span>
           <p id="site-tagline">{{ siteConfig.tagline }}</p>
-          <div class="stat-row hidden-sm-down">
-            <div class="stat-circle">
-              <span class="stat">{{ stats.n_published_projects }}</span>
-              <icon name="television"></icon>
-              <p>Projects</p>
-            </div>
+          <div class="stat-row d-none d-md-flex">
             <div class="stat-circle">
               <span class="stat">{{ stats.n_total_users }}</span>
               <icon name="users"></icon>
@@ -21,12 +16,17 @@
               <icon name="list"></icon>
               <p>Contributions</p>
             </div>
+            <div class="stat-circle">
+              <span class="stat">{{ stats.n_published_projects }}</span>
+              <icon name="television"></icon>
+              <p>Projects</p>
+            </div>
           </div>
         </div>
       </div>
     </transition>
 
-    <section id="contribute" class="bg-faded">
+    <section id="contribute" class="bg-light">
       <div class="container py-4">
         <h2 class="mt-4">Contribute</h2>
         <p class="lead">
@@ -48,23 +48,23 @@
       class="bg-white">
       <div class="container py-4">
         <div class="row">
-          <div class="col-lg-5 offset-lg-1 pt-2 text-center">
+          <div class="col-lg-5 mx-auto pt-2 text-center">
             <h3 class="text-uppercase font-weight-bold">
               Most Active Volunteers
             </h3>
             <hr class="my-2">
-            <p class="text-uppercase lead pb-2">
+            <p class="text-uppercase lead pb-lg-2">
               To date, our top {{ topUsers.length }} volunteers have made
               {{ topUsersTaskRuns }} contributions!
             </p>
-            <b-button
+            <b-btn
               variant="success"
               size="lg"
               @click="scrollToCollections">
               Get Started
-            </b-button>
+            </b-btn>
           </div>
-          <div class="col-lg-5 offset-lg-1 hidden-md-down">
+          <div class="col-lg-5 mx-auto d-none d-lg-block">
             <img src="../../assets/img/wreath.png" alt="Wreath" class="img-fluid">
             <span id="wreath"></span>
           </div>
@@ -96,7 +96,7 @@
           </div>
         </div>
         <div class="row text-center mt-2">
-          <div class="col-sm-12 col-lg-5 offset-lg-1 push-lg-6">
+          <div class="col-sm-12 col-lg-6 ml-lg-auto">
             <b-btn
               variant="black-underline"
               v-b-modal="leaderboardModalId">
@@ -110,7 +110,7 @@
     <section
       id="publications"
       v-if="publications.length"
-      class="bg-faded">
+      class="bg-light">
       <div class="container pt-4 pb-5">
         <h2 class="my-1">Publications</h2>
         <p class="lead mb-2">
@@ -126,7 +126,10 @@
       </div>
     </section>
 
-    <leaderboard-modal :modalId="leaderboardModalId"></leaderboard-modal>
+    <leaderboard-modal
+      :modal-id="leaderboardModalId"
+      :current-user="currentUser">
+    </leaderboard-modal>
   </div>
 </template>
 
@@ -238,7 +241,7 @@ export default {
 
   #app-hero {
     height: 500px;
-    top: 50px;
+    top: $app-navbar-height;
     width: auto;
     overflow: hidden;
     position: relative;
@@ -275,7 +278,7 @@ export default {
   }
 
   #top-users {
-    color: $gray-dark;
+    color: $gray-1000;
   }
 
   .stat-row {
@@ -299,17 +302,17 @@ export default {
     flex: 1 1 auto;
 
     &:nth-child(1) {
-      border-color: rgba($brand-success, 0.8);
+      border-color: rgba($green, 0.8);
       border-bottom-color: transparent;
     }
 
     &:nth-child(2) {
-      border-color: rgba($brand-info, 0.8);
+      border-color: rgba($blue, 0.8);
       border-bottom-color: transparent;
     }
 
     &:nth-child(3) {
-      border-color: rgba($brand-warning, 0.8);
+      border-color: rgba($orange, 0.8);
       border-bottom-color: transparent;
     }
 
diff --git a/src/pages/help/API.vue b/src/pages/help/API.vue
index cd593990..cf126a09 100644
--- a/src/pages/help/API.vue
+++ b/src/pages/help/API.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card :header="'API'">
+  <b-card header="API">
     <p>
       {{ siteConfig.brand }} provides a RESTful API that can be used for
       retreiving information about tasks, task runs, results, etc. The API
diff --git a/src/pages/help/Cookies.vue b/src/pages/help/Cookies.vue
index 9513bc72..504d4cb7 100644
--- a/src/pages/help/Cookies.vue
+++ b/src/pages/help/Cookies.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card :header="'Cookies Policy'">
+  <b-card header="Cookies Policy">
     <p>
       {{ siteConfig.brand }} uses cookies to make our website easier for you to use
       and improve your overall experience, distinguish you from other users and
diff --git a/src/pages/help/Privacy.vue b/src/pages/help/Privacy.vue
index 2b0146b4..c1b1ad76 100644
--- a/src/pages/help/Privacy.vue
+++ b/src/pages/help/Privacy.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card :header="'Privacy Policy'">
+  <b-card header="Privacy Policy">
     <p>
       Please read this Privacy Policy (“Privacy Policy”) carefully.
     </p>
diff --git a/src/pages/help/TOS.vue b/src/pages/help/TOS.vue
index b2fadfa5..5b01dbc1 100644
--- a/src/pages/help/TOS.vue
+++ b/src/pages/help/TOS.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-card :header="'Terms of Service'">
+  <b-card header="Terms of Service">
     <p>
       These are the general terms and conditions on which we supply all our
       services. If you use our services, you agree to abide by these terms.
diff --git a/src/pages/project/ProjectSettings.vue b/src/pages/project/ProjectSettings.vue
index 1be59623..a7417005 100644
--- a/src/pages/project/ProjectSettings.vue
+++ b/src/pages/project/ProjectSettings.vue
@@ -2,8 +2,25 @@
   <card-form
     header="Project Settings"
     submit-text="Update"
-    :form="form"
-    @success="onSuccess">
+    :form="form">
+    <div slot="bottom" class="d-flex form-group mt-1">
+      <toggle-button
+        :value="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="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>
   </card-form>
 </template>
 
@@ -55,6 +72,18 @@ export default {
               type: 'textArea',
               rows: 2,
               placeholder: 'Short description shown on the project cards'
+            },
+            {
+              model: 'webhook',
+              label: 'Webhook URL',
+              type: 'input',
+              inputType: 'text'
+            },
+            {
+              model: 'pasword',
+              label: 'Password',
+              type: 'input',
+              inputType: 'text'
             }
           ]
         }
@@ -75,9 +104,13 @@ export default {
 
     /**
      * Redirect the user on form submit success.
+     * @param {String} key
+     *   The model key.
+     * @param {Object} evt
+     *   The event.
      */
-    onSuccess (data) {
-      console.log(data)
+    updateModelBoolean (key, evt) {
+      this.model[key] = evt.value
     }
   },
 
diff --git a/src/store/index.js b/src/store/index.js
index 1075c84d..ccd90185 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -48,9 +48,11 @@ const store = new Vuex.Store({
 
     NOTIFY: ({ commit, state }, notification) => {
       // Avoid repeated notifications
-      if (state.notification !== null &&
-          notification.type === state.notification.type &&
-          notification.msg === state.notification.msg) {
+      if (
+        state.notification !== null &&
+        notification.type === state.notification.type &&
+        notification.msg === state.notification.msg
+      ) {
         return
       }
       commit('SET_ITEM', { key: 'notification', value: notification })