diff --git a/gulpfile.js b/gulpfile.js
index 628e7507fb..39bb5da687 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -13,6 +13,7 @@ if (process.env.NODE_ENV === 'production') {
   require('./gulp/gulp-newstuff');
   require('./gulp/gulp-build');
   require('./gulp/gulp-babelify');
+  require('./gulp/gulp-bootstrap');
 } else {
   require('glob').sync('./gulp/gulp-*').forEach(require);
   require('gulp').task('default', ['test']);
diff --git a/migrations/challenges/sync-all-challenges.js b/migrations/challenges/sync-all-challenges.js
index 5200bab806..4cb9d00088 100644
--- a/migrations/challenges/sync-all-challenges.js
+++ b/migrations/challenges/sync-all-challenges.js
@@ -1,47 +1,47 @@
-import Bluebird from 'Bluebird';
-
-import { model as Challenges } from '../../website/server/models/challenge';
-import { model as User } from '../../website/server/models/user';
-
-async function syncChallengeToMembers (challenges) {
-  let challengSyncPromises = challenges.map(async function (challenge) {
-    let users = await User.find({
-      // _id: '',
-      challenges: challenge._id,
-    }).exec();
-
-    let promises = [];
-    users.forEach(function (user) {
-      promises.push(challenge.syncToUser(user));
-      promises.push(challenge.save());
-      promises.push(user.save());
-    });
-
-    return Bluebird.all(promises);
-  });
-
-  return await Bluebird.all(challengSyncPromises);
-}
-
-async function syncChallenges (lastChallengeDate) {
-  let query = {
-    // _id: '',
-  };
-
-  if (lastChallengeDate) {
-    query.createdOn = { $lte: lastChallengeDate };
-  }
-
-  let challengesFound = await Challenges.find(query)
-    .limit(10)
-    .sort('-createdAt')
-    .exec();
-
-  let syncedChallenges = await syncChallengeToMembers(challengesFound)
-    .catch(reason => console.error(reason));
-  let lastChallenge = challengesFound[challengesFound.length - 1];
-  if (lastChallenge) syncChallenges(lastChallenge.createdAt);
-  return syncedChallenges;
-};
-
-module.exports = syncChallenges;
+import Bluebird from 'Bluebird';
+
+import { model as Challenges } from '../../website/server/models/challenge';
+import { model as User } from '../../website/server/models/user';
+
+async function syncChallengeToMembers (challenges) {
+  let challengSyncPromises = challenges.map(async function (challenge) {
+    let users = await User.find({
+      // _id: '',
+      challenges: challenge._id,
+    }).exec();
+
+    let promises = [];
+    users.forEach(function (user) {
+      promises.push(challenge.syncToUser(user));
+      promises.push(challenge.save());
+      promises.push(user.save());
+    });
+
+    return Bluebird.all(promises);
+  });
+
+  return await Bluebird.all(challengSyncPromises);
+}
+
+async function syncChallenges (lastChallengeDate) {
+  let query = {
+    // _id: '',
+  };
+
+  if (lastChallengeDate) {
+    query.createdOn = { $lte: lastChallengeDate };
+  }
+
+  let challengesFound = await Challenges.find(query)
+    .limit(10)
+    .sort('-createdAt')
+    .exec();
+
+  let syncedChallenges = await syncChallengeToMembers(challengesFound)
+    .catch(reason => console.error(reason));
+  let lastChallenge = challengesFound[challengesFound.length - 1];
+  if (lastChallenge) syncChallenges(lastChallenge.createdAt);
+  return syncedChallenges;
+};
+
+module.exports = syncChallenges;
diff --git a/migrations/migration-runner.js b/migrations/migration-runner.js
index 4f04540268..33b6d35279 100644
--- a/migrations/migration-runner.js
+++ b/migrations/migration-runner.js
@@ -21,4 +21,4 @@ var processUsers = require('./groups/update-groups-with-group-plans');
 processUsers()
   .catch(function (err) {
       console.log(err)
-  })
\ No newline at end of file
+  })
diff --git a/migrations/users/users-to-test.js b/migrations/users/users-to-test.js
new file mode 100644
index 0000000000..64b6c38e07
--- /dev/null
+++ b/migrations/users/users-to-test.js
@@ -0,0 +1,109 @@
+var migrationName = 'UserFromProdToTest';
+var authorName = 'TheHollidayInn'; // in case script author needs to know when their ...
+var authorUuid = ''; //... own data is done
+
+/*
+ * This migraition will copy user data from prod to test
+ */
+
+var monk = require('monk');
+var testConnectionSting = ''; // FOR TEST DATABASE
+var usersTest = monk(testConnectionSting).get('users', { castIds: false });
+var groupsTest = monk(testConnectionSting).get('groups', { castIds: false });
+var challengesTest = monk(testConnectionSting).get('challenges', { castIds: false });
+var tasksTest = monk(testConnectionSting).get('tasks', { castIds: false });
+
+var monk2 = require('monk');
+var liveConnectString = ''; // FOR TEST DATABASE
+var userLive = monk2(liveConnectString).get('users', { castIds: false });
+var groupsLive = monk2(liveConnectString).get('groups', { castIds: false });
+var challengesLive = monk2(liveConnectString).get('challenges', { castIds: false });
+var tasksLive = monk2(liveConnectString).get('tasks', { castIds: false });
+
+import uniq from 'lodash/uniq';
+import Bluebird from 'bluebird';
+
+// Variabls for updating
+let userIds = [
+  '206039c6-24e4-4b9f-8a31-61cbb9aa3f66',
+];
+
+let groupIds = [];
+let challengeIds = [];
+let tasksIds = [];
+
+async function processUsers () {
+  let userPromises = [];
+  //{_id: {$in: userIds}}
+
+  return userLive.find({guilds: 'b0764d64-8276-45a1-afa5-5ca9a5c64ca0'})
+    .each((user, {close, pause, resume}) => {
+      if (user.guilds.length > 0) groupIds = groupIds.concat(user.guilds);
+      if (user.party._id) groupIds.push(user.party._id);
+      if (user.challenges.length > 0) challengeIds = challengeIds.concat(user.challenges);
+      if (user.tasksOrder.rewards.length > 0) tasksIds = tasksIds.concat(user.tasksOrder.rewards);
+      if (user.tasksOrder.todos.length > 0) tasksIds = tasksIds.concat(user.tasksOrder.todos);
+      if (user.tasksOrder.dailys.length > 0) tasksIds = tasksIds.concat(user.tasksOrder.dailys);
+      if (user.tasksOrder.habits.length > 0) tasksIds = tasksIds.concat(user.tasksOrder.habits);
+
+      let userPromise = usersTest.update({'_id': user._id}, user, {upsert:true});
+      userPromises.push(userPromise);
+    }).then(() => {
+      return Bluebird.all(userPromises);
+    })
+    .then(() => {
+      console.log("Done User");
+    });
+}
+
+function processGroups () {
+  let promises = [];
+  let groupsToQuery = uniq(groupIds);
+  return groupsLive.find({_id: {$in: groupsToQuery}})
+    .each((group, {close, pause, resume}) => {
+      let promise = groupsTest.update({_id: group._id}, group, {upsert:true});
+      promises.push(promise);
+    }).then(() => {
+      return Bluebird.all(promises);
+    })
+    .then(() => {
+      console.log("Done Group");
+    });
+}
+
+function processChallenges () {
+  let promises = [];
+  let challengesToQuery = uniq(challengeIds);
+  return challengesLive.find({_id: {$in: challengesToQuery}})
+    .each((challenge, {close, pause, resume}) => {
+      let promise = challengesTest.update({_id: challenge._id}, challenge, {upsert:true});
+      promises.push(promise);
+    }).then(() => {
+      return Bluebird.all(promises);
+    })
+    .then(() => {
+      console.log("Done Challenge");
+    });
+}
+
+function processTasks () {
+  let promises = [];
+  let tasksToQuery = uniq(tasksIds);
+  return tasksLive.find({_id: {$in: tasksToQuery}})
+    .each((task, {close, pause, resume}) => {
+      let promise = tasksTest.update({_id: task._id}, task, {upsert:true});
+      promises.push(promise);
+    }).then(() => {
+      return Bluebird.all(promises);
+    })
+    .then(() => {
+      console.log("Done Tasks");
+    });
+}
+
+module.exports = async function prodToTest () {
+  await processUsers();
+  await processGroups();
+  await processChallenges();
+  await processTasks();
+};
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index a9635b172c..0496a3b975 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -4208,700 +4208,6 @@
       "from": "fs.realpath@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
     },
-    "fsevents": {
-      "version": "1.1.1",
-      "from": "fsevents@>=1.0.0 <2.0.0",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.1.tgz",
-      "optional": true,
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.0",
-          "from": "abbrev@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "from": "ansi-regex@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "from": "ansi-styles@>=2.2.1 <3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "optional": true
-        },
-        "aproba": {
-          "version": "1.1.1",
-          "from": "aproba@>=1.0.3 <2.0.0",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz",
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.2",
-          "from": "are-we-there-yet@>=1.1.2 <1.2.0",
-          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz",
-          "optional": true
-        },
-        "asn1": {
-          "version": "0.2.3",
-          "from": "asn1@>=0.2.3 <0.3.0",
-          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-          "optional": true
-        },
-        "assert-plus": {
-          "version": "0.2.0",
-          "from": "assert-plus@>=0.2.0 <0.3.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
-          "optional": true
-        },
-        "asynckit": {
-          "version": "0.4.0",
-          "from": "asynckit@>=0.4.0 <0.5.0",
-          "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-          "optional": true
-        },
-        "aws-sign2": {
-          "version": "0.6.0",
-          "from": "aws-sign2@>=0.6.0 <0.7.0",
-          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
-          "optional": true
-        },
-        "aws4": {
-          "version": "1.6.0",
-          "from": "aws4@>=1.2.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
-          "optional": true
-        },
-        "balanced-match": {
-          "version": "0.4.2",
-          "from": "balanced-match@>=0.4.1 <0.5.0",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz"
-        },
-        "bcrypt-pbkdf": {
-          "version": "1.0.1",
-          "from": "bcrypt-pbkdf@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-          "optional": true
-        },
-        "block-stream": {
-          "version": "0.0.9",
-          "from": "block-stream@*",
-          "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz"
-        },
-        "boom": {
-          "version": "2.10.1",
-          "from": "boom@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
-        },
-        "brace-expansion": {
-          "version": "1.1.6",
-          "from": "brace-expansion@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz"
-        },
-        "buffer-shims": {
-          "version": "1.0.0",
-          "from": "buffer-shims@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz"
-        },
-        "caseless": {
-          "version": "0.11.0",
-          "from": "caseless@>=0.11.0 <0.12.0",
-          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
-          "optional": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "from": "chalk@>=1.1.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "from": "code-point-at@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"
-        },
-        "combined-stream": {
-          "version": "1.0.5",
-          "from": "combined-stream@>=1.0.5 <1.1.0",
-          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz"
-        },
-        "commander": {
-          "version": "2.9.0",
-          "from": "commander@>=2.9.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-          "optional": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "from": "concat-map@0.0.1",
-          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "from": "console-control-strings@>=1.1.0 <1.2.0",
-          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz"
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "from": "core-util-is@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
-        },
-        "cryptiles": {
-          "version": "2.0.5",
-          "from": "cryptiles@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-          "optional": true
-        },
-        "dashdash": {
-          "version": "1.14.1",
-          "from": "dashdash@>=1.12.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-          "optional": true,
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "from": "assert-plus@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "optional": true
-            }
-          }
-        },
-        "debug": {
-          "version": "2.2.0",
-          "from": "debug@>=2.2.0 <2.3.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-          "optional": true
-        },
-        "deep-extend": {
-          "version": "0.4.1",
-          "from": "deep-extend@>=0.4.0 <0.5.0",
-          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz",
-          "optional": true
-        },
-        "delayed-stream": {
-          "version": "1.0.0",
-          "from": "delayed-stream@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "from": "delegates@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-          "optional": true
-        },
-        "ecc-jsbn": {
-          "version": "0.1.1",
-          "from": "ecc-jsbn@>=0.1.1 <0.2.0",
-          "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-          "optional": true
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "from": "escape-string-regexp@>=1.0.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "optional": true
-        },
-        "extend": {
-          "version": "3.0.0",
-          "from": "extend@>=3.0.0 <3.1.0",
-          "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz",
-          "optional": true
-        },
-        "extsprintf": {
-          "version": "1.0.2",
-          "from": "extsprintf@1.0.2",
-          "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz"
-        },
-        "forever-agent": {
-          "version": "0.6.1",
-          "from": "forever-agent@>=0.6.1 <0.7.0",
-          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-          "optional": true
-        },
-        "form-data": {
-          "version": "2.1.2",
-          "from": "form-data@>=2.1.1 <2.2.0",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz",
-          "optional": true
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "from": "fs.realpath@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
-        },
-        "fstream": {
-          "version": "1.0.10",
-          "from": "fstream@>=1.0.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz"
-        },
-        "fstream-ignore": {
-          "version": "1.0.5",
-          "from": "fstream-ignore@>=1.0.5 <1.1.0",
-          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.3",
-          "from": "gauge@>=2.7.1 <2.8.0",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.3.tgz",
-          "optional": true
-        },
-        "generate-function": {
-          "version": "2.0.0",
-          "from": "generate-function@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
-          "optional": true
-        },
-        "generate-object-property": {
-          "version": "1.2.0",
-          "from": "generate-object-property@>=1.1.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-          "optional": true
-        },
-        "getpass": {
-          "version": "0.1.6",
-          "from": "getpass@>=0.1.1 <0.2.0",
-          "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.6.tgz",
-          "optional": true,
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "from": "assert-plus@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "optional": true
-            }
-          }
-        },
-        "glob": {
-          "version": "7.1.1",
-          "from": "glob@>=7.0.5 <8.0.0",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
-        },
-        "graceful-fs": {
-          "version": "4.1.11",
-          "from": "graceful-fs@>=4.1.2 <5.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz"
-        },
-        "graceful-readlink": {
-          "version": "1.0.1",
-          "from": "graceful-readlink@>=1.0.0",
-          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-          "optional": true
-        },
-        "har-validator": {
-          "version": "2.0.6",
-          "from": "har-validator@>=2.0.6 <2.1.0",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
-          "optional": true
-        },
-        "has-ansi": {
-          "version": "2.0.0",
-          "from": "has-ansi@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-          "optional": true
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "from": "has-unicode@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-          "optional": true
-        },
-        "hawk": {
-          "version": "3.1.3",
-          "from": "hawk@>=3.1.3 <3.2.0",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-          "optional": true
-        },
-        "hoek": {
-          "version": "2.16.3",
-          "from": "hoek@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz"
-        },
-        "http-signature": {
-          "version": "1.1.1",
-          "from": "http-signature@>=1.1.0 <1.2.0",
-          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-          "optional": true
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "from": "inflight@>=1.0.4 <2.0.0",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "from": "inherits@>=2.0.1 <2.1.0",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
-        },
-        "ini": {
-          "version": "1.3.4",
-          "from": "ini@>=1.3.0 <1.4.0",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "from": "is-fullwidth-code-point@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
-        },
-        "is-my-json-valid": {
-          "version": "2.15.0",
-          "from": "is-my-json-valid@>=2.12.4 <3.0.0",
-          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz",
-          "optional": true
-        },
-        "is-property": {
-          "version": "1.0.2",
-          "from": "is-property@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-          "optional": true
-        },
-        "is-typedarray": {
-          "version": "1.0.0",
-          "from": "is-typedarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-          "optional": true
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "from": "isarray@>=1.0.0 <1.1.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
-        },
-        "isstream": {
-          "version": "0.1.2",
-          "from": "isstream@>=0.1.2 <0.2.0",
-          "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-          "optional": true
-        },
-        "jodid25519": {
-          "version": "1.0.2",
-          "from": "jodid25519@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
-          "optional": true
-        },
-        "jsbn": {
-          "version": "0.1.1",
-          "from": "jsbn@>=0.1.0 <0.2.0",
-          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-          "optional": true
-        },
-        "json-schema": {
-          "version": "0.2.3",
-          "from": "json-schema@0.2.3",
-          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-          "optional": true
-        },
-        "json-stringify-safe": {
-          "version": "5.0.1",
-          "from": "json-stringify-safe@>=5.0.1 <5.1.0",
-          "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-          "optional": true
-        },
-        "jsonpointer": {
-          "version": "4.0.1",
-          "from": "jsonpointer@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
-          "optional": true
-        },
-        "jsprim": {
-          "version": "1.3.1",
-          "from": "jsprim@>=1.2.2 <2.0.0",
-          "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz",
-          "optional": true
-        },
-        "mime-db": {
-          "version": "1.26.0",
-          "from": "mime-db@>=1.26.0 <1.27.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.26.0.tgz"
-        },
-        "mime-types": {
-          "version": "2.1.14",
-          "from": "mime-types@>=2.1.7 <2.2.0",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.14.tgz"
-        },
-        "minimatch": {
-          "version": "3.0.3",
-          "from": "minimatch@>=3.0.2 <4.0.0",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz"
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "from": "minimist@0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "from": "mkdirp@>=0.5.1 <0.6.0",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz"
-        },
-        "ms": {
-          "version": "0.7.1",
-          "from": "ms@0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
-          "optional": true
-        },
-        "node-pre-gyp": {
-          "version": "0.6.33",
-          "from": "node-pre-gyp@>=0.6.29 <0.7.0",
-          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz",
-          "optional": true
-        },
-        "nopt": {
-          "version": "3.0.6",
-          "from": "nopt@>=3.0.6 <3.1.0",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-          "optional": true
-        },
-        "npmlog": {
-          "version": "4.0.2",
-          "from": "npmlog@>=4.0.1 <5.0.0",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz",
-          "optional": true
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "from": "number-is-nan@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
-        },
-        "oauth-sign": {
-          "version": "0.8.2",
-          "from": "oauth-sign@>=0.8.1 <0.9.0",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "from": "object-assign@>=4.1.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "from": "once@>=1.3.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "from": "path-is-absolute@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
-        },
-        "pinkie": {
-          "version": "2.0.4",
-          "from": "pinkie@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-          "optional": true
-        },
-        "pinkie-promise": {
-          "version": "2.0.1",
-          "from": "pinkie-promise@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "1.0.7",
-          "from": "process-nextick-args@>=1.0.6 <1.1.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz"
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "from": "punycode@>=1.4.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "optional": true
-        },
-        "qs": {
-          "version": "6.3.1",
-          "from": "qs@>=6.3.0 <6.4.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.1.tgz",
-          "optional": true
-        },
-        "rc": {
-          "version": "1.1.7",
-          "from": "rc@>=1.1.6 <1.2.0",
-          "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.7.tgz",
-          "optional": true,
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "from": "minimist@>=1.2.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.2.2",
-          "from": "readable-stream@>=2.0.0 <3.0.0||>=1.1.13 <2.0.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "optional": true
-        },
-        "request": {
-          "version": "2.79.0",
-          "from": "request@>=2.79.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
-          "optional": true
-        },
-        "rimraf": {
-          "version": "2.5.4",
-          "from": "rimraf@>=2.5.4 <2.6.0",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz"
-        },
-        "semver": {
-          "version": "5.3.0",
-          "from": "semver@>=5.3.0 <5.4.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "from": "set-blocking@>=2.0.0 <2.1.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "from": "signal-exit@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-          "optional": true
-        },
-        "sntp": {
-          "version": "1.0.9",
-          "from": "sntp@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-          "optional": true
-        },
-        "sshpk": {
-          "version": "1.10.2",
-          "from": "sshpk@>=1.7.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.10.2.tgz",
-          "optional": true,
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "from": "assert-plus@>=1.0.0 <2.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "optional": true
-            }
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "from": "string_decoder@>=0.10.0 <0.11.0",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "from": "string-width@>=1.0.1 <2.0.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz"
-        },
-        "stringstream": {
-          "version": "0.0.5",
-          "from": "stringstream@>=0.0.4 <0.1.0",
-          "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-          "optional": true
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "from": "strip-ansi@>=3.0.1 <4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "from": "strip-json-comments@>=2.0.1 <2.1.0",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-          "optional": true
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "from": "supports-color@>=2.0.0 <3.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "optional": true
-        },
-        "tar": {
-          "version": "2.2.1",
-          "from": "tar@>=2.2.1 <2.3.0",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz"
-        },
-        "tar-pack": {
-          "version": "3.3.0",
-          "from": "tar-pack@>=3.3.0 <3.4.0",
-          "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.3.0.tgz",
-          "optional": true,
-          "dependencies": {
-            "once": {
-              "version": "1.3.3",
-              "from": "once@>=1.3.3 <1.4.0",
-              "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-              "optional": true
-            },
-            "readable-stream": {
-              "version": "2.1.5",
-              "from": "readable-stream@>=2.1.4 <2.2.0",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz",
-              "optional": true
-            }
-          }
-        },
-        "tough-cookie": {
-          "version": "2.3.2",
-          "from": "tough-cookie@>=2.3.0 <2.4.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-          "optional": true
-        },
-        "tunnel-agent": {
-          "version": "0.4.3",
-          "from": "tunnel-agent@>=0.4.1 <0.5.0",
-          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
-          "optional": true
-        },
-        "tweetnacl": {
-          "version": "0.14.5",
-          "from": "tweetnacl@>=0.14.0 <0.15.0",
-          "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-          "optional": true
-        },
-        "uid-number": {
-          "version": "0.0.6",
-          "from": "uid-number@>=0.0.6 <0.1.0",
-          "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
-          "optional": true
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "from": "util-deprecate@>=1.0.1 <1.1.0",
-          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
-        },
-        "uuid": {
-          "version": "3.0.1",
-          "from": "uuid@>=3.0.0 <4.0.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
-          "optional": true
-        },
-        "verror": {
-          "version": "1.3.6",
-          "from": "verror@1.3.6",
-          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.0",
-          "from": "wide-align@>=1.1.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz",
-          "optional": true
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "from": "wrappy@>=1.0.0 <2.0.0",
-          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
-        },
-        "xtend": {
-          "version": "4.0.1",
-          "from": "xtend@>=4.0.0 <5.0.0",
-          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-          "optional": true
-        }
-      }
-    },
     "fstream": {
       "version": "1.0.11",
       "from": "fstream@>=1.0.2 <2.0.0",
@@ -6128,6 +5434,11 @@
       "from": "he@>=1.1.0 <1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz"
     },
+    "hellojs": {
+      "version": "1.15.1",
+      "from": "hellojs@>=1.15.1 <2.0.0",
+      "resolved": "http://registry.npmjs.org/hellojs/-/hellojs-1.15.1.tgz"
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "from": "hmac-drbg@>=1.0.0 <2.0.0",
@@ -7717,7 +7028,7 @@
     "lazy-debug-legacy": {
       "version": "0.0.1",
       "from": "lazy-debug-legacy@>=0.0.0 <0.1.0",
-      "resolved": "http://registry.npmjs.org/lazy-debug-legacy/-/lazy-debug-legacy-0.0.1.tgz"
+      "resolved": "https://registry.npmjs.org/lazy-debug-legacy/-/lazy-debug-legacy-0.0.1.tgz"
     },
     "lazy-req": {
       "version": "1.1.0",
diff --git a/package.json b/package.json
index 2abec3f7a7..aa4203d0b5 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "gulp-uglify": "^1.4.2",
     "gulp.spritesmith": "^4.1.0",
     "habitica-markdown": "^1.3.0",
+    "hellojs": "^1.15.1",
     "html-webpack-plugin": "^2.8.1",
     "image-size": "~0.3.2",
     "in-app-purchase": "^1.1.6",
diff --git a/test/api/v3/unit/libs/cron.test.js b/test/api/v3/unit/libs/cron.test.js
index 6382b85a3d..bf7017baa4 100644
--- a/test/api/v3/unit/libs/cron.test.js
+++ b/test/api/v3/unit/libs/cron.test.js
@@ -79,6 +79,13 @@ describe('cron', () => {
       expect(user.purchased.plan.gemsBought).to.equal(0);
     });
 
+    it('resets plan.gemsBought on a new month if user does not have purchased.plan.dateUpdated', () => {
+      user.purchased.plan.gemsBought = 10;
+      user.purchased.plan.dateUpdated = undefined;
+      cron({user, tasksByType, daysMissed, analytics});
+      expect(user.purchased.plan.gemsBought).to.equal(0);
+    });
+
     it('does not reset plan.gemsBought within the month', () => {
       let clock = sinon.useFakeTimers(moment().startOf('month').add(2, 'days').unix());
       user.purchased.plan.dateUpdated = moment().startOf('month').toDate();
diff --git a/test/api/v3/unit/libs/payments/group-plans/group-payments-create.test.js b/test/api/v3/unit/libs/payments/group-plans/group-payments-create.test.js
index de79e2b525..b53a619bf2 100644
--- a/test/api/v3/unit/libs/payments/group-plans/group-payments-create.test.js
+++ b/test/api/v3/unit/libs/payments/group-plans/group-payments-create.test.js
@@ -596,7 +596,7 @@ describe('Purchasing a group plan for group', () => {
 
     let updatedUser = await User.findById(recipient._id).exec();
 
-    expect(updatedUser.purchased.plan.extraMonths).to.within(7, 8);
+    expect(updatedUser.purchased.plan.extraMonths).to.within(7, 9);
   });
 
   it('adds months to members with existing recurring subscription and ignores existing negative extraMonths', async () => {
diff --git a/test/client-old/spec/controllers/groupTaskActionsCtrlSpec.js b/test/client-old/spec/controllers/groupTaskActionsCtrlSpec.js
index 1e2b5cc7e1..f058731b13 100644
--- a/test/client-old/spec/controllers/groupTaskActionsCtrlSpec.js
+++ b/test/client-old/spec/controllers/groupTaskActionsCtrlSpec.js
@@ -1,63 +1,63 @@
-describe('Group Tasks Meta Actions Controller', () => {
-  let rootScope, scope, user, userSerivce;
-
-  beforeEach(() => {
-    module(function($provide) {
-      $provide.value('User', {});
-    });
-
-    inject(($rootScope, $controller) => {
-      rootScope = $rootScope;
-
-      user = specHelper.newUser();
-      user._id = "unique-user-id";
-      userSerivce = {user: user};
-
-      scope = $rootScope.$new();
-
-      scope.task = {
-        group: {
-          assignedUsers: [],
-          approval: {
-            required: false,
-          }
-        },
-      };
-      scope.task._edit = angular.copy(scope.task);
-
-      $controller('GroupTaskActionsCtrl', {$scope: scope, User: userSerivce});
-    });
-  });
-
-  describe('toggleTaskRequiresApproval', function () {
-    it('toggles task approval required field from false to true', function () {
-      scope.toggleTaskRequiresApproval();
-      expect(scope.task._edit.group.approval.required).to.be.true;
-    });
-
-    it('toggles task approval required field from true to false', function () {
-      scope.task._edit.group.approval.required = true;
-      scope.toggleTaskRequiresApproval();
-      expect(scope.task._edit.group.approval.required).to.be.false;
-    });
-  });
-
-
-  describe('assign events', function () {
-    it('adds a group member to assigned users on "addedGroupMember" event ', () => {
-      var testId = 'test-id';
-      rootScope.$broadcast('addedGroupMember', testId);
-      expect(scope.task.group.assignedUsers).to.contain(testId);
-      expect(scope.task._edit.group.assignedUsers).to.contain(testId);
-    });
-
-    it('removes a group member to assigned users on "addedGroupMember" event ', () => {
-      var testId = 'test-id';
-      scope.task.group.assignedUsers.push(testId);
-      scope.task._edit.group.assignedUsers.push(testId);
-      rootScope.$broadcast('removedGroupMember', testId);
-      expect(scope.task.group.assignedUsers).to.not.contain(testId);
-      expect(scope.task._edit.group.assignedUsers).to.not.contain(testId);
-    });
-  });
-});
+describe('Group Tasks Meta Actions Controller', () => {
+  let rootScope, scope, user, userSerivce;
+
+  beforeEach(() => {
+    module(function($provide) {
+      $provide.value('User', {});
+    });
+
+    inject(($rootScope, $controller) => {
+      rootScope = $rootScope;
+
+      user = specHelper.newUser();
+      user._id = "unique-user-id";
+      userSerivce = {user: user};
+
+      scope = $rootScope.$new();
+
+      scope.task = {
+        group: {
+          assignedUsers: [],
+          approval: {
+            required: false,
+          }
+        },
+      };
+      scope.task._edit = angular.copy(scope.task);
+
+      $controller('GroupTaskActionsCtrl', {$scope: scope, User: userSerivce});
+    });
+  });
+
+  describe('toggleTaskRequiresApproval', function () {
+    it('toggles task approval required field from false to true', function () {
+      scope.toggleTaskRequiresApproval();
+      expect(scope.task._edit.group.approval.required).to.be.true;
+    });
+
+    it('toggles task approval required field from true to false', function () {
+      scope.task._edit.group.approval.required = true;
+      scope.toggleTaskRequiresApproval();
+      expect(scope.task._edit.group.approval.required).to.be.false;
+    });
+  });
+
+
+  describe('assign events', function () {
+    it('adds a group member to assigned users on "addedGroupMember" event ', () => {
+      var testId = 'test-id';
+      rootScope.$broadcast('addedGroupMember', testId);
+      expect(scope.task.group.assignedUsers).to.contain(testId);
+      expect(scope.task._edit.group.assignedUsers).to.contain(testId);
+    });
+
+    it('removes a group member to assigned users on "addedGroupMember" event ', () => {
+      var testId = 'test-id';
+      scope.task.group.assignedUsers.push(testId);
+      scope.task._edit.group.assignedUsers.push(testId);
+      rootScope.$broadcast('removedGroupMember', testId);
+      expect(scope.task.group.assignedUsers).to.not.contain(testId);
+      expect(scope.task._edit.group.assignedUsers).to.not.contain(testId);
+    });
+  });
+});
diff --git a/test/client/unit/specs/store/actions/tasks.js b/test/client/unit/specs/store/actions/tasks.js
index 79683848c6..bdf9a2dc3f 100644
--- a/test/client/unit/specs/store/actions/tasks.js
+++ b/test/client/unit/specs/store/actions/tasks.js
@@ -9,7 +9,7 @@ describe('tasks actions', () => {
   });
 
   describe('fetchUserTasks', () => {
-    it('fetches user tasks', async () => {
+    xit('fetches user tasks', async () => {
       expect(store.state.tasks.loadingStatus).to.equal('NOT_LOADED');
       const tasks = [{_id: 1}];
       sandbox.stub(axios, 'get').withArgs('/api/v3/tasks/user').returns(Promise.resolve({data: {data: tasks}}));
@@ -36,7 +36,7 @@ describe('tasks actions', () => {
       expect(store.state.tasks.loadingStatus).to.equal('LOADED');
     });
 
-    it('can reload tasks if forceLoad is true', async () => {
+    xit('can reload tasks if forceLoad is true', async () => {
       store.state.tasks = {
         loadingStatus: 'LOADED',
         data: [{_id: 1}],
diff --git a/test/client/unit/specs/store/actions/user.js b/test/client/unit/specs/store/actions/user.js
index 5069e04087..38739d8c45 100644
--- a/test/client/unit/specs/store/actions/user.js
+++ b/test/client/unit/specs/store/actions/user.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import generateStore from 'client/store';
 
-describe('tasks actions', () => {
+describe('user actions', () => {
   let store;
 
   beforeEach(() => {
diff --git a/website/client-old/css/header.styl b/website/client-old/css/header.styl
index 475a633fac..1593de5d2c 100644
--- a/website/client-old/css/header.styl
+++ b/website/client-old/css/header.styl
@@ -91,8 +91,8 @@
   height: 10.5em
   width: 100%
 
-  // Covers avatars, health bar at 1005-768. Fix:
-  @media  (max-width: 1005px) and (min-width: 768px)
+  // Covers avatars, health bar at 1005-768. Fix:
+  @media  (max-width: 1005px) and (min-width: 768px)
     margin-top: 2.8em;
 
 // this is a wrapper for avatars in the header
diff --git a/website/client-old/js/controllers/groupPlansCtrl.js b/website/client-old/js/controllers/groupPlansCtrl.js
index 6fd7d96317..487037ce87 100644
--- a/website/client-old/js/controllers/groupPlansCtrl.js
+++ b/website/client-old/js/controllers/groupPlansCtrl.js
@@ -1,43 +1,43 @@
-"use strict";
-
-/*
- A controller to manage the Group Plans page
- */
-
-angular.module('habitrpg')
-  .controller("GroupPlansCtrl", ['$scope', '$window', 'Groups', 'Payments',
-    function($scope, $window, Groups, Payments) {
-      $scope.PAGES = {
-        BENEFITS: 'benefits',
-        CREATE_GROUP: 'create-group',
-        UPGRADE_GROUP: 'upgrade-group',
-      };
-      $scope.activePage = $scope.PAGES.BENEFITS;
-      $scope.newGroup = {
-        type: 'guild',
-        privacy: 'private',
-      };
-      $scope.PAYMENTS = {
-        AMAZON: 'amazon',
-        STRIPE: 'stripe',
-      };
-
-      $scope.changePage = function (page) {
-        $scope.activePage = page;
-        $window.scrollTo(0, 0);
-      };
-
-      $scope.newGroupIsReady = function () {
-        return !!$scope.newGroup.name;
-      };
-
-      $scope.createGroup = function () {
-        $scope.changePage($scope.PAGES.UPGRADE_GROUP);
-      };
-
-      $scope.upgradeGroup = function (paymentType) {
-        var subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
-        if (paymentType === $scope.PAYMENTS.STRIPE) Payments.showStripe({subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
-        if (paymentType === $scope.PAYMENTS.AMAZON) Payments.amazonPayments.init({type: 'subscription', subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
-      };
-    }]);
+"use strict";
+
+/*
+ A controller to manage the Group Plans page
+ */
+
+angular.module('habitrpg')
+  .controller("GroupPlansCtrl", ['$scope', '$window', 'Groups', 'Payments',
+    function($scope, $window, Groups, Payments) {
+      $scope.PAGES = {
+        BENEFITS: 'benefits',
+        CREATE_GROUP: 'create-group',
+        UPGRADE_GROUP: 'upgrade-group',
+      };
+      $scope.activePage = $scope.PAGES.BENEFITS;
+      $scope.newGroup = {
+        type: 'guild',
+        privacy: 'private',
+      };
+      $scope.PAYMENTS = {
+        AMAZON: 'amazon',
+        STRIPE: 'stripe',
+      };
+
+      $scope.changePage = function (page) {
+        $scope.activePage = page;
+        $window.scrollTo(0, 0);
+      };
+
+      $scope.newGroupIsReady = function () {
+        return !!$scope.newGroup.name;
+      };
+
+      $scope.createGroup = function () {
+        $scope.changePage($scope.PAGES.UPGRADE_GROUP);
+      };
+
+      $scope.upgradeGroup = function (paymentType) {
+        var subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
+        if (paymentType === $scope.PAYMENTS.STRIPE) Payments.showStripe({subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
+        if (paymentType === $scope.PAYMENTS.AMAZON) Payments.amazonPayments.init({type: 'subscription', subscription: subscriptionKey, coupon: null, groupToCreate: $scope.newGroup});
+      };
+    }]);
diff --git a/website/client-old/js/services/paymentServices.js b/website/client-old/js/services/paymentServices.js
index 1b657b6c63..d45d82250f 100644
--- a/website/client-old/js/services/paymentServices.js
+++ b/website/client-old/js/services/paymentServices.js
@@ -326,11 +326,23 @@ function($rootScope, User, $http, Content) {
       paymentMethod = paymentMethod.toLowerCase();
     }
 
-    var cancelUrl = '/' + paymentMethod + '/subscribe/cancel?_id=' + User.user._id + '&apiToken=' + User.settings.auth.apiToken;
+    var queryParams = {
+      _id: User.user._id,
+      apiToken: User.settings.auth.apiToken,
+      noRedirect: true,
+    };
+
     if (group) {
-      cancelUrl += '&groupId=' + group._id;
+      queryParams.groupId = group._id;
     }
-    window.location.href = cancelUrl;
+
+    var cancelUrl = '/' + paymentMethod + '/subscribe/cancel?' + $.param(queryParams);
+
+    $http.get(cancelUrl)
+      .then(function (success) {
+        alert(window.evn.t('paypalCanceled'));
+        window.location.href = '/';
+      });
   }
 
   Payments.encodeGift = function(uuid, gift) {
diff --git a/website/client/README.md b/website/client/README.md
index f553bbd3a4..cfc8206c1b 100644
--- a/website/client/README.md
+++ b/website/client/README.md
@@ -1,20 +1,20 @@
-#Running
- - Open a terminal and type `npm run client:dev`
- - Open a second terminal and type `npm start`
-
-#Preparation Reading
-- Vue 2 (https://vuejs.org)
-
-- Webpack (https://webpack.github.io/) is the build system and it includes plugins for code transformation, right now we have: BabelJS for ES6 transpilation, eslint for code style, less and postcss for css compilation. The code comes from https://github.com/vuejs-templates/webpack which is a Webpack template for Vue, with some small modifications to adapt it to our use case. Docs http://vuejs-templates.github.io/webpack/
-
-- We’re using `.vue` files that make it possible to have HTML, JS and CSS for each component together in a single location. They’re implemented as a webpack plugin and the docs can be found here http://vue-loader.vuejs.org/en/
-
-- SemanticUI is the UI framework http://semantic-ui.com/. So far I’ve only used the CSS part, it also has JS plugins but I’ve yet to use them. It supports theming so if it’s not too difficult we’ll want to customize the base theme with our own styles instead of writing CSS rules to override the original styling.
-
-The code is in `/website/client`. We’re using something very similar to Vuex (equivalent of React’s Redux) for state management http://vuex.vuejs.org/en/index.html
-
-The API is almost the same except that we don’t use mutations but only actions because it would make it difficult to work with common code
-
-The project is developed directly in the `develop` branch as long as we’ll be able to avoid splitting it into a different branch.
-
-So far most of the work has been on the template, so there’s no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: it’s basically a Flux implementation: there’s a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.
+#Running
+ - Open a terminal and type `npm run client:dev`
+ - Open a second terminal and type `npm start`
+
+#Preparation Reading
+- Vue 2 (https://vuejs.org)
+
+- Webpack (https://webpack.github.io/) is the build system and it includes plugins for code transformation, right now we have: BabelJS for ES6 transpilation, eslint for code style, less and postcss for css compilation. The code comes from https://github.com/vuejs-templates/webpack which is a Webpack template for Vue, with some small modifications to adapt it to our use case. Docs http://vuejs-templates.github.io/webpack/
+
+- We’re using `.vue` files that make it possible to have HTML, JS and CSS for each component together in a single location. They’re implemented as a webpack plugin and the docs can be found here http://vue-loader.vuejs.org/en/
+
+- SemanticUI is the UI framework http://semantic-ui.com/. So far I’ve only used the CSS part, it also has JS plugins but I’ve yet to use them. It supports theming so if it’s not too difficult we’ll want to customize the base theme with our own styles instead of writing CSS rules to override the original styling.
+
+The code is in `/website/client`. We’re using something very similar to Vuex (equivalent of React’s Redux) for state management http://vuex.vuejs.org/en/index.html
+
+The API is almost the same except that we don’t use mutations but only actions because it would make it difficult to work with common code
+
+The project is developed directly in the `develop` branch as long as we’ll be able to avoid splitting it into a different branch.
+
+So far most of the work has been on the template, so there’s no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: it’s basically a Flux implementation: there’s a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.
diff --git a/website/client/app.vue b/website/client/app.vue
index 7697892f88..2d0feaaf89 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -1,16 +1,20 @@
-<!-- Entry point component for the entire app -->
-
 <template lang="pug">
 #app
-  app-menu
-  .container-fluid
-    app-header
-    router-view
+  router-view(v-if="!isUserLoggedIn || isStaticPage")
+  template(v-else)
+    #loading-screen.h-100.w-100.d-flex.justify-content-center.align-items-center(v-if="!isUserLoaded")
+      p Loading...
+    template(v-else)
+      app-menu
+      .container-fluid
+        app-header
+        router-view
 </template>
 
 <script>
 import AppMenu from './components/appMenu';
 import AppHeader from './components/appHeader';
+import { mapState } from 'client/libs/store';
 
 export default {
   name: 'app',
@@ -18,9 +22,38 @@ export default {
     AppMenu,
     AppHeader,
   },
+  data () {
+    return {
+      isUserLoaded: false,
+    };
+  },
+  computed: {
+    ...mapState(['isUserLoggedIn']),
+    isStaticPage () {
+      return this.$route.meta.requiresLogin === false ? true : false;
+    },
+  },
+  created () {
+    // Setup listener for title
+    this.$store.watch(state => state.title, (title) => {
+      document.title = title;
+    });
+
+    if (this.isUserLoggedIn && !this.isStaticPage) {
+      // Load the user and the user tasks
+      Promise.all([
+        this.$store.dispatch('user:fetch'),
+        this.$store.dispatch('tasks:fetchUserTasks'),
+      ]).then(() => {
+        this.isUserLoaded = true;
+      }).catch((err) => {
+        console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console
+      });
+    }
+  },
 };
 </script>
 
 <style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
 <style src="assets/scss/index.scss" lang="scss"></style>
-<style src="assets/css/index.css"></style>
\ No newline at end of file
+<style src="assets/css/index.css"></style>
diff --git a/website/client/assets/images/auth/midground_foreground_extended.png b/website/client/assets/images/auth/midground_foreground_extended.png
new file mode 100644
index 0000000000..e030b8a61b
Binary files /dev/null and b/website/client/assets/images/auth/midground_foreground_extended.png differ
diff --git a/website/client/assets/images/auth/midground_foreground_extended2.png b/website/client/assets/images/auth/midground_foreground_extended2.png
new file mode 100644
index 0000000000..5976cd9681
Binary files /dev/null and b/website/client/assets/images/auth/midground_foreground_extended2.png differ
diff --git a/website/client/assets/images/auth/repeatinghill_leftslope.png b/website/client/assets/images/auth/repeatinghill_leftslope.png
new file mode 100644
index 0000000000..952123e055
Binary files /dev/null and b/website/client/assets/images/auth/repeatinghill_leftslope.png differ
diff --git a/website/client/assets/images/auth/repeatinghill_rightslope.png b/website/client/assets/images/auth/repeatinghill_rightslope.png
new file mode 100644
index 0000000000..cf7bbecc12
Binary files /dev/null and b/website/client/assets/images/auth/repeatinghill_rightslope.png differ
diff --git a/website/client/assets/images/auth/seamless_mountains_demo.png b/website/client/assets/images/auth/seamless_mountains_demo.png
new file mode 100644
index 0000000000..c9c2f4e9b7
Binary files /dev/null and b/website/client/assets/images/auth/seamless_mountains_demo.png differ
diff --git a/website/client/assets/images/auth/seamless_stars_varied_opacity.png b/website/client/assets/images/auth/seamless_stars_varied_opacity.png
new file mode 100644
index 0000000000..0abababa1b
Binary files /dev/null and b/website/client/assets/images/auth/seamless_stars_varied_opacity.png differ
diff --git a/website/client/assets/scss/categories.scss b/website/client/assets/scss/categories.scss
new file mode 100644
index 0000000000..7317e9ee5e
--- /dev/null
+++ b/website/client/assets/scss/categories.scss
@@ -0,0 +1,39 @@
+.category-box {
+  padding: 1em;
+  max-width: 400px;
+  position: absolute;
+  top: -480px;
+  padding: 2em;
+  border-radius: 2px;
+  background-color: $white;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
+}
+
+.category-label {
+  min-width: 100px;
+  border-radius: 100px;
+  background-color: $gray-600;
+  padding: .5em;
+  display: inline-block;
+  margin-right: .5em;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.33;
+  text-align: center;
+  color: $gray-300;
+}
+
+.category-select {
+  border-radius: 2px;
+  background-color: $white;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  padding: 1em;
+}
+
+.category-select:hover {
+  cursor: pointer;
+}
+
+.category-wrap {
+  margin-top: .5em;
+}
diff --git a/website/client/assets/scss/dragdrop.scss b/website/client/assets/scss/dragdrop.scss
new file mode 100644
index 0000000000..056e605186
--- /dev/null
+++ b/website/client/assets/scss/dragdrop.scss
@@ -0,0 +1,9 @@
+[draggable] {
+  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: grab;
+}
+
+/* (Optional) Apply a "closed-hand" cursor during drag operation. */
+[draggable]:active {
+  cursor: grabbing;
+}
diff --git a/website/client/assets/scss/icon.scss b/website/client/assets/scss/icon.scss
index 0686d9e2e5..21a7e7686d 100644
--- a/website/client/assets/scss/icon.scss
+++ b/website/client/assets/scss/icon.scss
@@ -1,13 +1,15 @@
 .svg-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
+  display: block;
   stroke-width: 0;
   stroke: currentColor;
   fill: currentColor;
   transition: none !important;
-}
 
-.svg-icon * {
-  transition: none !important;
+  svg {
+    display: block;
+  }
+
+  * {
+    transition: none !important;
+  }
 }
\ No newline at end of file
diff --git a/website/client/assets/scss/index.scss b/website/client/assets/scss/index.scss
index b01742f67b..acd5b2a8ec 100644
--- a/website/client/assets/scss/index.scss
+++ b/website/client/assets/scss/index.scss
@@ -20,4 +20,7 @@
 @import './popover';
 @import './item';
 @import './stats';
-@import './icon';
\ No newline at end of file
+@import './icon';
+@import './task';
+@import './categories';
+@import './dragdrop';
diff --git a/website/client/assets/scss/page.scss b/website/client/assets/scss/page.scss
index 65ca00f521..a888e6c537 100644
--- a/website/client/assets/scss/page.scss
+++ b/website/client/assets/scss/page.scss
@@ -3,7 +3,7 @@ html {
 }
 
 html, body {
-  height: 100%;
+  height: calc(100% - 56px); // 56px is the menu
   background: $gray-700;
 }
 
diff --git a/website/client/assets/scss/task.scss b/website/client/assets/scss/task.scss
new file mode 100644
index 0000000000..805cdec48d
--- /dev/null
+++ b/website/client/assets/scss/task.scss
@@ -0,0 +1,114 @@
+ .task {
+  // for editing rewards or when a task is created
+  &-purple {
+    background: $purple-300;
+  }
+
+  &-worst {
+    background: $maroon-100;
+    &-control-habit {
+      background: darken($maroon-100, 12%);
+    }
+
+    &-control-daily-todo {
+      background: $maroon-500;
+    }
+  }
+
+  &-worse {
+    background: $red-100;
+    &-control-habit {
+      background: darken($red-100, 12%);
+    }
+
+    &-control-daily-todo {
+      background: $red-500;
+    }
+  }
+
+  &-bad {
+    background: $orange-100;
+    &-control-habit {
+      background: darken($orange-100, 12%);
+    }
+
+    &-control-daily-todo {
+      background: $orange-500;
+    }
+  }
+
+  &-neutral {
+    background: $yellow-50;
+    &-control-habit {
+      background: darken($yellow-50, 12%);
+    }
+
+    &-control-daily-todo {
+      background: $yellow-500;
+    }
+  }
+
+  &-good {
+    background: $green-10;
+    &-control-habit {
+      background: darken($green-10, 12%);
+    }
+
+    &-control-daily-todo {
+      background: $green-500;
+    }
+  }
+
+  &-better {
+    background: $blue-50;
+    &-control-habit {
+      background: darken($blue-50, 12%);
+    }
+
+    &-control-daily-todo {
+      background: $blue-500;
+    }
+  }
+
+  &-best {
+    background: $teal-50;
+    &-control-habit {
+      background: darken($teal-50, 12%);
+    }
+
+    &-control-daily-todo {
+      background: $teal-500;
+    }
+  }
+
+  &-reward {
+    background: rgba($yellow-500, 0.26);
+  }
+
+  &-daily-todo-disabled {
+    background: $gray-500;
+
+    &-control {
+      background: $gray-400;
+      color: $gray-200;
+    }
+  }
+
+  &-daily-todo-content-disabled {
+    background: $gray-600;
+
+    * {
+      color: $gray-300 !important;
+    }
+  }
+
+  &-habit-disabled {
+    background: $gray-700;
+    color: rgba(0, 0, 0, 0.12);
+
+    &-control {
+      color: rgba(0, 0, 0, 0.12) !important;
+      border: 1px solid rgba(0, 0, 0, 0.12);
+    }
+  }
+}
\ No newline at end of file
diff --git a/website/client/assets/svg/calendar.svg b/website/client/assets/svg/calendar.svg
new file mode 100644
index 0000000000..ba08c072e8
--- /dev/null
+++ b/website/client/assets/svg/calendar.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill-rule="evenodd" d="M2 12h10V6H2v6zM12 2V0h-2v2H4V0H2v2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/>
+</svg>
diff --git a/website/client/assets/svg/challenge.svg b/website/client/assets/svg/challenge.svg
new file mode 100644
index 0000000000..1610d4bb2e
--- /dev/null
+++ b/website/client/assets/svg/challenge.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
+    <path fill-rule="evenodd" d="M10 6.306L2.582 7.542A.5.5 0 0 1 2 7.05V2.591a.5.5 0 0 1 .582-.493L10 3.334v2.972zm2.329-4.612l-.024-.004c-.007-.002-.012-.007-.02-.009-.017-.005-.035.001-.052-.003L2.329.028A2 2 0 0 0 0 2v5.64a2 2 0 0 0 2.329 1.972l7.056-1.176-.525 2.1a1.175 1.175 0 0 0 2.28.57l.772-3.09.417-.07A2 2 0 0 0 14 5.971V3.667a2 2 0 0 0-1.671-1.973z"/>
+</svg>
diff --git a/website/client/assets/svg/check.svg b/website/client/assets/svg/check.svg
new file mode 100644
index 0000000000..2ae3d23949
--- /dev/null
+++ b/website/client/assets/svg/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
+    <path fill-rule="evenodd" d="M4.662 9.832c-.312 0-.61-.123-.831-.344L0 5.657l1.662-1.662 2.934 2.934L10.534 0l1.785 1.529-6.764 7.893a1.182 1.182 0 0 1-.848.409l-.045.001"/>
+</svg>
\ No newline at end of file
diff --git a/website/client/assets/svg/daily.svg b/website/client/assets/svg/daily.svg
new file mode 100644
index 0000000000..f1e28a1858
--- /dev/null
+++ b/website/client/assets/svg/daily.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20">
+    <path fill="#C3C0C7" fill-rule="evenodd" d="M13 16h2v-2h-2v2zm-4 0h2v-2H9v2zm-4 0h2v-2H5v2zm12-4h2v-2h-2v2zm-4 0h2v-2h-2v2zm-4 0h2v-2H9v2zm13-4H2v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8zm2-2v10a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1V0h2v2h10V0h2v2h1a4 4 0 0 1 4 4zM5 12h2v-2H5v2z"/>
+</svg>
diff --git a/website/client/assets/svg/difficulty-star.svg b/website/client/assets/svg/difficulty-star.svg
new file mode 100644
index 0000000000..9409886974
--- /dev/null
+++ b/website/client/assets/svg/difficulty-star.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
+</svg>
diff --git a/website/client/assets/svg/down.svg b/website/client/assets/svg/down.svg
new file mode 100644
index 0000000000..4d99b85f69
--- /dev/null
+++ b/website/client/assets/svg/down.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="13" viewBox="0 0 20 13">
+    <path fill="none" fill-rule="evenodd" stroke="#C3C0C7" stroke-width="4" d="M18 2l-8 8-8-8"/>
+</svg>
diff --git a/website/client/assets/svg/facebook.svg b/website/client/assets/svg/facebook.svg
new file mode 100644
index 0000000000..314d9515ad
--- /dev/null
+++ b/website/client/assets/svg/facebook.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
+    <path fill="#878190" fill-rule="evenodd" d="M7.145 8.006H4.903V16H1.58V8.006H0V5.182h1.58V3.354C1.58 2.045 2.202 0 4.933 0l2.461.01v2.742H5.608c-.291 0-.705.145-.705.77v1.66h2.533l-.291 2.824z"/>
+</svg>
diff --git a/website/client/assets/svg/google.svg b/website/client/assets/svg/google.svg
new file mode 100644
index 0000000000..6fdd374c1b
--- /dev/null
+++ b/website/client/assets/svg/google.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#4285F4" d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/>
+        <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/>
+        <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/>
+        <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"/>
+    </g>
+</svg>
diff --git a/website/client/assets/svg/gryphon.svg b/website/client/assets/svg/gryphon.svg
new file mode 100644
index 0000000000..fdff439489
--- /dev/null
+++ b/website/client/assets/svg/gryphon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="65" height="70" viewBox="0 0 65 70">
+    <path fill="#FFF" fill-rule="evenodd" d="M62.749 65.754c1.728 2.297 1.853 3.623.136 3.623H51.783c-3.344 0-4.038.396-3.985-1.056.072-2.024.725-2.103 2.851-2.696 1.763-.493 1.13-3.63-.869-6.376-1.392-1.91-4.216-4.134-7.929-2.405-2.41 1.122-3.828 2.27-4.943 3.815-1.823 2.53-1.724 4.927 1.115 4.927 2.683 0 5.843-1.626 6.76.69 1.134 2.867.355 3.133-.2 3.133H26.79l.012.017c-9.532 0-19.054-.075-21.262-6.099-3.056-8.334 8.063-11.546 8.404-16.775.138-2.116-1.051-3.096-2.536-3.096H4.885V39.49H.921V27.6h3.964v3.964H8.85v3.964h3.965v5.506s3.447 1.71 3.33 5.478c-.186 5.982-10.304 9.296-8.45 15.567 1.695 5.738 14.502 4.364 14.053.804l-.222-2.028c-.063-2.84-.506-6.64.087-10.005.934-5.289 4.224-9.865 9.956-9.907 1.045-.008 1.929-.222 1.929-1.1 0-.927-1.68-.906-2.863-1.025-4.09-.417-9.18-1.787-13.627-5.445-2.634-2.167-6.736-8.999-4.054-8.498 1.656.31 3.116.437 4.4.433 1.346-.004 4.82-.382 4.82-1.203 0-1.138-2.01-.453-4.955-.741-3.521-.344-10.988-1.853-14.84-13.215C.932 5.89-.02-2.075 2.324.503 15.84 15.367 20.433 12.947 28.184 18.029c3.412 2.237 5.633 7.58 7.622 7.135 1.296-.292.502-1.483.696-4.262.173-2.484 1.354-3.022-1.683-3.773-3.538-.873-7.07-4.752-4.76-4.697 2.307.056 3.977.048 6-.828 2.024-.875 6.97-4.641 9.962-3.133 2.992 1.509 5.507-.656 7.531-.272 2.938.557 3.694 4.6 3.313 6.965-.24 1.5-.24 1.498-2.153 1.386-3.921-.23-4.92 2.893-2.162 4.615 4.197 2.621 5.98 4.588 7.121 10.395.555 2.817.105 3.474-.83 2.956-.933-.519-2.539-.778-.31 4.356 2.23 5.133-1.4 11.15-2.592 11.825-1.194.674-.986 1.452-.986 1.452-.023 12.387 0 13.315 2.078 13.538 3.15.34 4.49-1.565 5.718.067z"/>
+</svg>
diff --git a/website/client/assets/svg/habit.svg b/website/client/assets/svg/habit.svg
new file mode 100644
index 0000000000..3a433ff31d
--- /dev/null
+++ b/website/client/assets/svg/habit.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="20" viewBox="0 0 30 20">
+    <path fill="#C3C0C7" fill-rule="evenodd" d="M11 11H9v2H7v-2H5V9h2V7h2v2h2v2zm8 0h6V9h-6v2zm9 5c0 1.103-.897 2-2 2H16V2h10c1.103 0 2 .897 2 2v12zM4 18c-1.103 0-2-.897-2-2V4c0-1.103.897-2 2-2h10v16H4zM26 0H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h22a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4z"/>
+</svg>
diff --git a/website/client/assets/svg/habitica-logo.svg b/website/client/assets/svg/habitica-logo.svg
new file mode 100644
index 0000000000..e23bdf1981
--- /dev/null
+++ b/website/client/assets/svg/habitica-logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="31" viewBox="0 0 144 31">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFF" d="M120.876 24.007a2.27 2.27 0 0 0-3.183.41 4.595 4.595 0 0 1-3.663 1.804 4.62 4.62 0 0 1-4.613-4.335c-.005-.35-.009-2.864-.009-3.19a4.627 4.627 0 0 1 4.622-4.622c1.28 0 2.47.51 3.353 1.44a2.269 2.269 0 0 0 3.29-3.125 9.2 9.2 0 0 0-6.643-2.853c-5.05 0-9.16 4.109-9.16 9.16 0 .03.002 3.175.014 3.406a9.158 9.158 0 0 0 9.146 8.657 9.1 9.1 0 0 0 7.257-3.57 2.27 2.27 0 0 0-.411-3.182M134.373 26.221a4.62 4.62 0 0 1-4.613-4.333c-.005-.353-.008-2.877-.008-3.193a4.627 4.627 0 0 1 4.621-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .328-.003 2.84-.009 3.189a4.618 4.618 0 0 1-4.613 4.337m6.891-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.051 0-9.16 4.109-9.16 9.16 0 .031.001 3.173.013 3.406a9.158 9.158 0 0 0 9.146 8.657 9.118 9.118 0 0 0 4.81-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M30.546 26.221a4.62 4.62 0 0 1-4.613-4.335c-.006-.35-.01-2.863-.01-3.19a4.627 4.627 0 0 1 4.623-4.623 4.627 4.627 0 0 1 4.622 4.622c0 .328-.004 2.84-.01 3.189a4.618 4.618 0 0 1-4.612 4.337m6.89-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.052 0-9.16 4.109-9.16 9.16 0 .031 0 3.174.013 3.406a9.158 9.158 0 0 0 9.147 8.657 9.118 9.118 0 0 0 4.809-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M70.84 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.539 0V11.412a2.27 2.27 0 0 0-2.27-2.269M97.563 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.538 0V11.412a2.27 2.27 0 0 0-2.268-2.269M59.066 21.888a4.62 4.62 0 0 1-4.613 4.333 4.62 4.62 0 0 1-4.613-4.338c-.006-.35-.009-2.86-.009-3.187a4.627 4.627 0 0 1 4.622-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .315-.004 2.84-.009 3.192M54.453 9.536a9.089 9.089 0 0 0-4.622 1.265V2.33a2.27 2.27 0 0 0-4.537 0V28.49a2.269 2.269 0 0 0 4.35.9 9.117 9.117 0 0 0 4.81 1.37 9.16 9.16 0 0 0 9.146-8.666c.011-.224.013-3.367.013-3.398 0-5.052-4.11-9.16-9.16-9.16M8.92 9.536a9.143 9.143 0 0 0-4.382 1.11V2.33A2.27 2.27 0 0 0 0 2.33v26.16a2.269 2.269 0 1 0 4.538 0V16.763c.173-.147.333-.314.46-.516a4.601 4.601 0 0 1 3.921-2.173 4.627 4.627 0 0 1 4.622 4.622c0 .415-.004 9.233-.01 9.738a2.27 2.27 0 0 0 4.535.172c.01-.225.012-9.814.012-9.91 0-5.052-4.108-9.16-9.159-9.16M88.95 9.143h-2.648V2.33a2.27 2.27 0 0 0-4.538 0v6.813h-2.647a2.27 2.27 0 0 0 0 4.538h2.647V28.49a2.27 2.27 0 0 0 4.538 0V13.681h2.647a2.27 2.27 0 0 0 0-4.538"/>
+        <path fill="#FF6066" d="M73.025 2.33a2.27 2.27 0 1 1-4.538 0 2.27 2.27 0 0 1 4.538 0"/>
+        <path fill="#4FB5E8" d="M99.748 2.33a2.27 2.27 0 1 1-4.539 0 2.27 2.27 0 0 1 4.539 0"/>
+    </g>
+</svg>
diff --git a/website/client/assets/svg/message.svg b/website/client/assets/svg/message.svg
new file mode 100644
index 0000000000..dfd7c12a9c
--- /dev/null
+++ b/website/client/assets/svg/message.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12">
+    <path fill="#4F2A93" fill-rule="evenodd" d="M14 10H2V2l6 5 6-5v8zm0-10H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+</svg>
diff --git a/website/client/assets/svg/negative.svg b/website/client/assets/svg/negative.svg
new file mode 100644
index 0000000000..ca3e1d2e65
--- /dev/null
+++ b/website/client/assets/svg/negative.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2">
+  <path fill-rule="evenodd" d="M0 0h10v2H0z"/>
+</svg>
\ No newline at end of file
diff --git a/website/client/assets/svg/next.svg b/website/client/assets/svg/next.svg
new file mode 100644
index 0000000000..ce9bc639e9
--- /dev/null
+++ b/website/client/assets/svg/next.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="20" viewBox="0 0 13 20">
+    <path fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="4" d="M2 2l8 8-8 8"/>
+</svg>
diff --git a/website/client/assets/svg/positive.svg b/website/client/assets/svg/positive.svg
new file mode 100644
index 0000000000..2488512400
--- /dev/null
+++ b/website/client/assets/svg/positive.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <path fill-rule="evenodd" d="M6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/>
+</svg>
diff --git a/website/client/assets/svg/previous.svg b/website/client/assets/svg/previous.svg
new file mode 100644
index 0000000000..08dc8cefa6
--- /dev/null
+++ b/website/client/assets/svg/previous.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="20" viewBox="0 0 13 20">
+    <path fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="4" d="M11 2l-8 8 8 8"/>
+</svg>
diff --git a/website/client/assets/svg/qrCode.svg b/website/client/assets/svg/qrCode.svg
new file mode 100644
index 0000000000..7d1ea3e9f5
--- /dev/null
+++ b/website/client/assets/svg/qrCode.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#878190" fill-rule="evenodd" d="M7 8h1V7H7v1zm4 5h2v-2h-2v2zm-8 0h2v-2H3v2zm8-8h2V3h-2v2zM3 5h2V3H3v2zm7 1h4V2h-4v4zm4 3h-1V8h-1V7h1v1h1v1zm-4 5h4v-4h-4v4zm-3 0v-1h1v-1H7v-1h1v-1H7V9H6V7h1V5h1V4h1v1H8v1h1v2h1V7h1v2H9V8H8v2h1v3H8v1H7zm-5 0h4v-4H2v4zm0-6h1V7h2v1H4v1H2V8zm0-2h4V2H2v4zm7-4v1H7V2h2zm5-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+</svg>
diff --git a/website/client/assets/svg/quest-background-border.svg b/website/client/assets/svg/quest-background-border.svg
new file mode 100644
index 0000000000..81ae0b5bb3
--- /dev/null
+++ b/website/client/assets/svg/quest-background-border.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="424" height="80" viewBox="0 0 424 80">
+    <defs>
+        <path id="a" d="M0 0h424v80H0z"/>
+        <path id="b" d="M0 0h10v10H0z"/>
+        <path id="c" d="M414 0h10v10h-10z"/>
+        <path id="d" d="M0 70h10v10H0z"/>
+        <path id="e" d="M414 70h10v10h-10z"/>
+    </defs>
+    <g fill="#F9F9F9" fill-rule="evenodd">
+        <g>
+            <use fill="#F9F9F9" xlink:href="#a"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h420v76H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h422v78H1z"/>
+        </g>
+        <g>
+            <use fill="#EDECEE" xlink:href="#b"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+        <g>
+            <use fill="#EDECEE" xlink:href="#c"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M416 2h6v6h-6z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M415 1h8v8h-8z"/>
+        </g>
+        <g>
+            <use fill="#EDECEE" xlink:href="#d"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 72h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 71h8v8H1z"/>
+        </g>
+        <g>
+            <use fill="#EDECEE" xlink:href="#e"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M416 72h6v6h-6z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M415 71h8v8h-8z"/>
+        </g>
+    </g>
+</svg>
diff --git a/website/client/assets/svg/quest.svg b/website/client/assets/svg/quest.svg
new file mode 100644
index 0000000000..90ccf6ff77
--- /dev/null
+++ b/website/client/assets/svg/quest.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
+    <path fill="#C3C0C7" fill-rule="evenodd" d="M3 16h4v-1H3v1zm0-4h9v-1H3v1zm0-2h9V9H3v1zm0-5h9V4H3v1zm0 3h9V7H3v1zm10 7v3H2V2h11v13zm2 3h1v-1h-1v1zm0-15h1V2h-1v1zm3 2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3h-3V5h3z"/>
+</svg>
diff --git a/website/client/assets/svg/remove.svg b/website/client/assets/svg/remove.svg
new file mode 100644
index 0000000000..a717d49915
--- /dev/null
+++ b/website/client/assets/svg/remove.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#878190" fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
+</svg>
diff --git a/website/client/assets/svg/reward.svg b/website/client/assets/svg/reward.svg
new file mode 100644
index 0000000000..52232a2259
--- /dev/null
+++ b/website/client/assets/svg/reward.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="20" viewBox="0 0 26 20">
+    <path fill="#C3C0C7" fill-rule="evenodd" d="M24 10h-8V8h4a2 2 0 0 0 2-2V2c1.103 0 2 .897 2 2v6zm0 6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4h8v1a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-1h8v4zM2 4c0-1.103.897-2 2-2v4a2 2 0 0 0 2 2h4v2H2V4zm10 9h2V8h-2v5zm8-11v4H6V2h14zm2-2H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h18a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4z"/>
+</svg>
diff --git a/website/client/assets/svg/star.svg b/website/client/assets/svg/star.svg
new file mode 100644
index 0000000000..8728bfb3ca
--- /dev/null
+++ b/website/client/assets/svg/star.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFA623" d="M16 16l8-4-8-4-4-8-4 8-8 4 8 4 4 8z"/>
+        <path fill="#FFF" d="M4.5 12l5-2.5L12 12zM12 19.5l-2.5-5L12 12zM19.5 12l-5 2.5L12 12zM12 4.5l2.5 5L12 12z" opacity=".25"/>
+        <path fill="#BF7D1A" d="M19.5 12l-5-2.5L12 12z" opacity=".25"/>
+        <path fill="#BF7D1A" d="M12 19.5l2.5-5L12 12z" opacity=".5"/>
+        <path fill="#FFF" d="M4.5 12l5 2.5L12 12zM12 4.5l-2.5 5L12 12z" opacity=".5"/>
+        <path fill="#FFF" d="M10.8 13.2L8.5 12l2.3-1.2L12 8.5l1.2 2.3 2.3 1.2-2.3 1.2-1.2 2.3z" opacity=".5"/>
+    </g>
+</svg>
diff --git a/website/client/assets/svg/streak.svg b/website/client/assets/svg/streak.svg
new file mode 100644
index 0000000000..e1314778b2
--- /dev/null
+++ b/website/client/assets/svg/streak.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
+    <path fill-rule="evenodd" d="M11.376 3.15L6.777.086A.5.5 0 0 0 6 .5v6.132a.5.5 0 0 0 .777.416l4.599-3.066a.5.5 0 0 0 0-.832M.777.085L6 3.567.777 7.049A.5.5 0 0 1 0 6.633V.5A.5.5 0 0 1 .777.085"/>
+</svg>
diff --git a/website/client/assets/svg/tags.svg b/website/client/assets/svg/tags.svg
new file mode 100644
index 0000000000..c4becad0b6
--- /dev/null
+++ b/website/client/assets/svg/tags.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill-rule="evenodd" d="M10 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.004 6.994L7 2h5l-.004 5.006L7 12l.004-.004-5-5.002zM0 7c0 .55.22 1.05.59 1.41l5 5a1.996 1.996 0 0 0 2.83 0l4.99-4.99c.37-.37.59-.87.59-1.42V2c0-1.11-.89-2-2-2H7c-.55 0-1.05.22-1.41.58l-5 5C.23 5.94 0 6.44 0 7z"/>
+</svg>
\ No newline at end of file
diff --git a/website/client/assets/svg/todo.svg b/website/client/assets/svg/todo.svg
new file mode 100644
index 0000000000..f7a89b4be6
--- /dev/null
+++ b/website/client/assets/svg/todo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="#C3C0C7" fill-rule="evenodd" d="M8.343 14.916c-.312 0-.61-.123-.831-.344l-3.831-3.831 1.662-1.662 2.934 2.934 5.938-6.929L16 6.613l-6.764 7.893a1.182 1.182 0 0 1-.848.409l-.045.001zM18 16c0 1.103-.897 2-2 2H4c-1.102 0-2-.897-2-2V4c0-1.103.898-2 2-2h12c1.103 0 2 .897 2 2v12zM16 0H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4z"/>
+</svg>
diff --git a/website/client/assets/svg/twitter.svg b/website/client/assets/svg/twitter.svg
new file mode 100644
index 0000000000..3606bb754b
--- /dev/null
+++ b/website/client/assets/svg/twitter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
+    <path fill="#878190" fill-rule="evenodd" d="M14.362 3.238c.007.141.01.281.01.424 0 4.338-3.302 9.34-9.34 9.34A9.284 9.284 0 0 1 0 11.527c.257.029.518.045.783.045a6.576 6.576 0 0 0 4.076-1.404 3.288 3.288 0 0 1-3.065-2.28 3.312 3.312 0 0 0 1.481-.056A3.288 3.288 0 0 1 .642 4.613v-.041c.444.246.949.393 1.488.41A3.28 3.28 0 0 1 .67 2.25c0-.602.162-1.166.444-1.651a9.315 9.315 0 0 0 6.766 3.43A3.28 3.28 0 0 1 11.078 0c.943 0 1.797.398 2.395 1.035a6.565 6.565 0 0 0 2.085-.797 3.289 3.289 0 0 1-1.443 1.816A6.543 6.543 0 0 0 16 1.539a6.665 6.665 0 0 1-1.638 1.699"/>
+</svg>
diff --git a/website/client/assets/svg/up.svg b/website/client/assets/svg/up.svg
new file mode 100644
index 0000000000..047b91b7f7
--- /dev/null
+++ b/website/client/assets/svg/up.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="13" viewBox="0 0 20 13">
+    <path fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="4" d="M18 11l-8-8-8 8"/>
+</svg>
diff --git a/website/client/components/appHeader.vue b/website/client/components/appHeader.vue
index cc66416dd2..352ad1086d 100644
--- a/website/client/components/appHeader.vue
+++ b/website/client/components/appHeader.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 #app-header.row
   member-details(:member="user", @click="$router.push({name: 'avatar'})")
-  .view-party
+  .view-party(v-if="user.party && user.party._id")
     // TODO button should open the party members modal
     router-link.btn.btn-primary(:active-class="''", :to="{name: 'party'}") {{ $t('viewParty') }}
   .party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
@@ -59,6 +59,7 @@
 .no-party {
   .small-text {
     color: $header-color;
+    flex-wrap: nowrap;
   }
 
   h3 {
@@ -66,7 +67,7 @@
     margin-bottom: 4px;
   }
 
-  button {
+  .btn {
     margin-top: 16px;
   }
 }
@@ -75,10 +76,12 @@
 <script>
 import { mapGetters, mapActions } from 'client/libs/store';
 import MemberDetails from './memberDetails';
+import createPartyModal from './guilds/createPartyModal';
 
 export default {
   components: {
     MemberDetails,
+    createPartyModal,
   },
   data () {
     return {
@@ -104,7 +107,7 @@ export default {
     },
   },
   created () {
-    this.getPartyMembers();
+    if (this.user.party && this.user.party._id) this.getPartyMembers();
   },
 };
 </script>
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 872953d826..18e8542d90 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -14,7 +14,7 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
           router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
       router-link.nav-item(tag="li", :to="{name: 'shops'}", exact)
         a.nav-link(v-once) {{ $t('shops') }}
-      router-link.nav-item(tag="li", :to="{name: 'party'}", exact)
+      router-link.nav-item(tag="li", :to="{name: 'party'}")
         a.nav-link(v-once) {{ $t('party') }}
       router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/guilds')}")
         a.nav-link(v-once) {{ $t('guilds') }}
@@ -41,154 +41,154 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
     router-link.dropdown.item-with-icon.item-user(:to="{name: 'avatar'}")
       .svg-icon(v-html="icons.user")
       .dropdown-menu.dropdown-menu-right.user-dropdown
-        router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}") 
+        router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}")
           h3 {{ user.profile.name }}
           span.small-text {{ $t('editAvatar') }}
         router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
         router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
         router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
         router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
-        router-link.dropdown-item(to="/logout") {{ $t('logout') }}
+        a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
 </template>
 
 <style lang="scss" scoped>
-@import '~client/assets/scss/colors.scss';
-@import '~client/assets/scss/utils.scss';
+  @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/utils.scss';
 
-nav.navbar {
-  background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
-  padding-left: 25px;
-  padding-right: 12.5px;
-  height: 56px;
-  box-shadow: 0 1px 2px 0 rgba($black, 0.24);
-}
-
-.navbar-header {
-  margin-right: 48px;
-
-  .logo {
-    width: 128px;
-    height: 28px;
-  }
-}
-
-.nav-item {
-  .nav-link {
-    font-size: 16px;
-    color: $white;
-    font-weight: bold;
-    line-height: 1.5;
-    padding: 16px 24px;
-    transition: none;
+  nav.navbar {
+    background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
+    padding-left: 25px;
+    padding-right: 12.5px;
+    height: 56px;
+    box-shadow: 0 1px 2px 0 rgba($black, 0.24);
   }
 
-  &:hover {
+  .navbar-header {
+    margin-right: 48px;
+
+    .logo {
+      width: 128px;
+      height: 28px;
+    }
+  }
+
+  .nav-item {
     .nav-link {
+      font-size: 16px;
       color: $white;
-      background: $purple-200;
-    }
-  }
-
-  &.active:not(:hover) {
-    .nav-link {
-      box-shadow: 0px -4px 0px $purple-300 inset;
-    }
-  }
-}
-
-// Make the dropdown menu open on hover
-.dropdown:hover .dropdown-menu {
-  display: block;
-  margin-top: 0; // remove the gap so it doesn't close
-}
-
-.dropdown + .dropdown {
-  margin-left: 0px;
-}
-
-.dropdown-menu:not(.user-dropdown) {
-  background: $purple-200;
-  border-radius: 0px;
-  border: none;
-  box-shadow: none;
-  padding: 0px;
-
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-
-  .dropdown-item {
-    font-size: 16px;
-    box-shadow: none;
-    color: $white;
-    border: none;
-    line-height: 1.5;
-
-    &.active {
-      background: $purple-300;
+      font-weight: bold;
+      line-height: 1.5;
+      padding: 16px 24px;
+      transition: none;
     }
 
     &:hover {
-      background: $purple-300;
+      .nav-link {
+        color: $white;
+        background: $purple-200;
+      }
+    }
 
-      &:last-child {
-        border-bottom-right-radius: 5px;
-        border-bottom-left-radius: 5px;
+    &.active:not(:hover) {
+      .nav-link {
+        box-shadow: 0px -4px 0px $purple-300 inset;
       }
     }
   }
-}
 
-.item-with-icon {
-  color: $white;
-  font-size: 16px;
-  font-weight: normal;
-  padding-top: 16px;
-  padding-left: 16px;
-
-  .svg-icon {
-    vertical-align: middle;
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    float: left;
-  }
-}
-
-.item-notifications, .item-user {
-  padding-right: 12.5px;
-  padding-left: 12.5px;
-  color: $header-color;
-  transition: none;
-
-  &:hover {
-    color: $white;
-  }
-
-  .svg-icon {
-    margin-right: 0px;
-    color: inherit;
-  }
-}
-
-.item-notifications {
-  margin-left: 33.5px;
-}
-
-.item-user .edit-avatar {
-  h3 {
-    color: $gray-10;
-    margin-bottom: 0px;
-  }
-
-  .small-text {
-    color: $gray-200;
-    font-style: normal;
+  // Make the dropdown menu open on hover
+  .dropdown:hover .dropdown-menu {
     display: block;
+    margin-top: 0; // remove the gap so it doesn't close
   }
 
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
+  .dropdown + .dropdown {
+    margin-left: 0px;
+  }
+
+  .dropdown-menu:not(.user-dropdown) {
+    background: $purple-200;
+    border-radius: 0px;
+    border: none;
+    box-shadow: none;
+    padding: 0px;
+
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+
+    .dropdown-item {
+      font-size: 16px;
+      box-shadow: none;
+      color: $white;
+      border: none;
+      line-height: 1.5;
+
+      &.active {
+        background: $purple-300;
+      }
+
+      &:hover {
+        background: $purple-300;
+
+        &:last-child {
+          border-bottom-right-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+      }
+    }
+  }
+
+  .item-with-icon {
+    color: $white;
+    font-size: 16px;
+    font-weight: normal;
+    padding-top: 16px;
+    padding-left: 16px;
+
+    .svg-icon {
+      vertical-align: middle;
+      width: 24px;
+      height: 24px;
+      margin-right: 8px;
+      float: left;
+    }
+  }
+
+  .item-notifications, .item-user {
+    padding-right: 12.5px;
+    padding-left: 12.5px;
+    color: $header-color;
+    transition: none;
+
+    &:hover {
+      color: $white;
+    }
+
+    .svg-icon {
+      margin-right: 0px;
+      color: inherit;
+    }
+  }
+
+  .item-notifications {
+    margin-left: 33.5px;
+  }
+
+  .item-user .edit-avatar {
+    h3 {
+      color: $gray-10;
+      margin-bottom: 0px;
+    }
+
+    .small-text {
+      color: $gray-200;
+      font-style: normal;
+      display: block;
+    }
+
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
 </style>
 
 <script>
@@ -217,5 +217,11 @@ export default {
     }),
     ...mapState({user: 'user.data'}),
   },
+  methods: {
+    logout () {
+      localStorage.removeItem('habit-mobile-settings');
+      this.$router.go('/');
+    },
+  },
 };
 </script>
diff --git a/website/client/components/auth/registerLogin.vue b/website/client/components/auth/registerLogin.vue
new file mode 100644
index 0000000000..7be5b3e007
--- /dev/null
+++ b/website/client/components/auth/registerLogin.vue
@@ -0,0 +1,230 @@
+<template lang="pug">
+.form-wrapper
+  #top-background
+    .seamless_stars_varied_opacity_repeat
+
+  #login-form
+    .text-center
+      div
+        .svg-icon.gryphon(v-html="icons.gryphon")
+      div
+        .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
+    .form-group.row.text-center
+      .col-6
+        .btn.btn-secondary.social-button(@click='socialAuth("facebook")', v-once)
+          .svg-icon.social-icon(v-html="icons.facebookIcon")
+          | {{this.registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
+      .col-6
+        .btn.btn-secondary.social-button(@click='socialAuth("google")', v-once)
+          .svg-icon.social-icon(v-html="icons.googleIcon")
+          | {{this.registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
+    .form-group
+      label(for='usernameInput', v-once) {{$t('username')}}
+      input#usernameInput.form-control(type='text', :placeholder='$t("usernamePlaceholder")', v-model='username')
+    .form-group(v-if='registering')
+      label(for='emailInput', v-once) {{$t('email')}}
+      input#emailInput.form-control(type='email', :placeholder='$t("emailPlaceholder")', v-model='email')
+    .form-group
+      label(for='passwordInput', v-once) {{$t('password')}}
+      input#passwordInput.form-control(type='password', :placeholder='$t("passwordPlaceholder")', v-model='password')
+    .form-group(v-if='registering')
+      label(for='confirmPasswordInput', v-once) {{$t('confirmPassword')}}
+      input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm')
+      small.form-text(v-once) {{$t('termsAndAgreement')}}
+    .text-center
+      .btn.btn-info(@click='register()', v-if='registering', v-once) {{$t('joinHabitica')}}
+      .btn.btn-info(@click='login()', v-if='!registering', v-once) {{$t('login')}}
+
+  #bottom-background
+    .seamless_mountains_demo_repeat
+    .midground_foreground_extended2
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .form-wrapper {
+    background-color: $purple-200;
+  }
+
+  #login-form {
+    margin: 0 auto;
+    width: 40em;
+    padding-top: 5em;
+    padding-bottom: 22.5em;
+    position: relative;
+    z-index: 1;
+
+    .gryphon {
+      width: 63.2px;
+      height: 69.4px;
+    }
+
+    .habitica-logo {
+      width: 144px;
+      height: 31px;
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    label {
+      color: $white;
+      font-weight: bold;
+    }
+
+    input {
+      margin-bottom: 2em;
+      border-radius: 2px;
+      background-color: #432874;
+      border-color: transparent;
+      height: 50px;
+      color: $purple-400;
+
+      ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+        color: $purple-400;
+      }
+      ::-moz-placeholder { /* Firefox 19+ */
+        color: $purple-400;
+      }
+      :-ms-input-placeholder { /* IE 10+ */
+        color: $purple-400;
+      }
+      :-moz-placeholder { /* Firefox 18- */
+        color: $purple-400;
+      }
+    }
+
+    .form-text {
+      font-size: 14px;
+      color: $white;
+    }
+
+    .social-button {
+      width: 100%;
+      text-align: left;
+    }
+
+    .social-icon {
+      margin-right: 1em;
+      width: 13px;
+    }
+  }
+
+  #top-background {
+    .seamless_stars_varied_opacity_repeat {
+      background-image: url('~assets/images/auth/seamless_stars_varied_opacity.png');
+      background-repeat: repeat-x;
+      position: absolute;
+      height: 500px;
+      width: 1600px;
+    }
+  }
+
+  #bottom-background {
+    position: relative;
+
+    .seamless_mountains_demo_repeat {
+      background-image: url('~assets/images/auth/seamless_mountains_demo.png');
+      background-repeat: repeat-x;
+      width: 1600px;
+      height: 500px;
+      position: absolute;
+      z-index: 0;
+      bottom: 0;
+    }
+
+    .midground_foreground_extended2 {
+      background-image: url('~assets/images/auth/midground_foreground_extended2.png');
+      position: relative;
+      width: 1500px;
+      height: 150px;
+    }
+  }
+</style>
+
+<script>
+import hello from 'hellojs';
+
+import gryphon from 'assets/svg/gryphon.svg';
+import habiticaIcon from 'assets/svg/habitica-logo.svg';
+import facebookIcon from 'assets/svg/facebook.svg';
+import googleIcon from 'assets/svg/google.svg';
+
+export default {
+  data () {
+    let data = {
+      username: '',
+      email: '',
+      password: '',
+      passwordConfirm: '',
+      registering: true,
+    };
+
+    data.icons = Object.freeze({
+      gryphon,
+      habiticaIcon,
+      facebookIcon,
+      googleIcon,
+    });
+
+    return data;
+  },
+  mounted () {
+    if (this.$route.path.startsWith('/login')) {
+      this.registering = false;
+    }
+
+    hello.init({
+      facebook: '',
+      // windows: WINDOWS_CLIENT_ID,
+      google: '',
+    });
+  },
+  methods: {
+    async register () {
+      if (this.password !== this.passwordConfirm) {
+        alert('Passwords must match');
+        return;
+      }
+
+      // @TODO: implement langauge and invite accepting
+      // var url = ApiUrl.get() + "/api/v3/user/auth/local/register";
+      // if (location.search && location.search.indexOf('Invite=') !== -1) { // matches groupInvite and partyInvite
+      //   url += location.search;
+      // }
+      //
+      // if($rootScope.selectedLanguage) {
+      //   var toAppend = url.indexOf('?') !== -1 ? '&' : '?';
+      //   url = url + toAppend + 'lang=' + $rootScope.selectedLanguage.code;
+      // }
+
+      await this.$store.dispatch('auth:register', {
+        username: this.username,
+        email: this.email,
+        password: this.password,
+        passwordConfirm: this.passwordConfirm,
+      });
+
+      this.$router.go('/tasks');
+    },
+    async login () {
+      await this.$store.dispatch('auth:login', {
+        username: this.username,
+        // email: this.email,
+        password: this.password,
+      });
+
+      this.$router.go('/tasks');
+    },
+    async socialAuth (network) {
+      let auth = await hello(network).login({scope: 'email'});
+
+      await this.$store.dispatch('auth:socialAuth', {
+        auth,
+      });
+
+      this.$router.go('/tasks');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/guilds/createPartyModal.vue b/website/client/components/guilds/createPartyModal.vue
new file mode 100644
index 0000000000..0e06046833
--- /dev/null
+++ b/website/client/components/guilds/createPartyModal.vue
@@ -0,0 +1,121 @@
+<template lang="pug">
+b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
+  .header-wrap(slot="modal-header")
+    h2 Image Here
+    .row
+      .col-12.text-center
+        h2(v-once) {{$t('playInPartyTitle')}}
+        p(v-once) {{$t('playInPartyDescription')}}
+  .row.grey-row
+    .col-6.text-center
+      img
+      h3(v-once) {{$t('startYourOwnPartyTitle')}}
+      p(v-once) {{$t('startYourOwnPartyDescription')}}
+      button.btn.btn-primary(v-once) {{$t('createParty')}}
+    .col-6
+      div.text-center
+        img
+        h3(v-once) {{$t('wantToJoinPartyTitle')}}
+        p(v-once) {{$t('wantToJoinPartyDescription')}}
+        button.btn.btn-primary(v-once, @click='shareUserIdShown = !shareUserIdShown') {{$t('shartUserId')}}
+      .share-userid-options(v-if="shareUserIdShown")
+        .option-item(v-once)
+          .svg-icon(v-html="icons.copy")
+          | {{$t('copy')}}
+        .option-item(v-once)
+          .svg-icon(v-html="icons.greyBadge")
+          | {{$t('lookingForGroup')}}
+        .option-item(v-once)
+          .svg-icon(v-html="icons.qrCode")
+          | {{$t('qrCode')}}
+        .option-item(v-once)
+          .svg-icon.facebook(v-html="icons.facebook")
+          | {{$t('facebook')}}
+        .option-item(v-once)
+          .svg-icon(v-html="icons.twitter")
+          | {{$t('twitter')}}
+</template>
+
+<style lang='scss'>
+  @import '~client/assets/scss/colors.scss';
+
+  .modal-body {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  .grey-row {
+    background-color: $gray-700;
+    padding: 2em;
+    border-radius: 0px 0px 2px 2px;
+  }
+
+  .share-userid-options {
+    background-color: $white;
+    border-radius: 2px;
+    width: 180px;
+    position: absolute;
+    top: -8em;
+    left: 4.8em;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+
+    .option-item {
+      padding: 1em;
+
+      .svg-icon {
+        margin-right: .5em;
+      }
+
+      .facebook svg {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    .option-item:hover {
+      background-color: $header-color;
+      color: $purple-200;
+      cursor: pointer;
+    }
+  }
+</style>
+
+<script>
+import bModal from 'bootstrap-vue/lib/components/modal';
+
+import copyIcon from 'assets/svg/copy.svg';
+import greyBadgeIcon from 'assets/svg/grey-badge.svg';
+import qrCodeIcon from 'assets/svg/qrCode.svg';
+import facebookIcon from 'assets/svg/facebook.svg';
+import twitterIcon from 'assets/svg/twitter.svg';
+
+export default {
+  components: {
+    bModal,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        copy: copyIcon,
+        greyBadge: greyBadgeIcon,
+        qrCode: qrCodeIcon,
+        facebook: facebookIcon,
+        twitter: twitterIcon,
+      }),
+      shareUserIdShown: false,
+    };
+  },
+  methods: {
+    createParty () {
+      // group.loadingParty = true;
+      //
+      // if (!group.name) group.name = env.t('possessiveParty', {name: User.user.profile.name});
+      // Groups.Group.create(group)
+      //   .then(function(response) {
+      //     Analytics.updateUser({'partyID': $scope.group ._id, 'partySize': 1});
+      //     $rootScope.hardRedirect('/#/options/groups/party');
+      //   });
+    },
+  },
+};
+</script>
diff --git a/website/client/components/guilds/groupFormModal.vue b/website/client/components/guilds/groupFormModal.vue
index 48f4871f36..d023aaa917 100644
--- a/website/client/components/guilds/groupFormModal.vue
+++ b/website/client/components/guilds/groupFormModal.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-  b-modal#guild-form(:title="title", :hide-footer="true")
+  b-modal#guild-form(:title="title", :hide-footer="true", size='lg')
     form(@submit.stop.prevent="submit")
       .form-group
         label
           strong(v-once) {{$t('name')}}*
-        b-form-input(type="text", placeholder="$t('newGuildPlaceHolder')", v-model="newGuild.name")
+        b-form-input(type="text", :placeholder="$t('newGuildPlaceHolder')", v-model="newGuild.name")
 
       .form-group(v-if='newGuild.id')
         label
@@ -29,7 +29,7 @@
           span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
 
         br
-        label.custom-control.custom-checkbox
+        label.custom-control.custom-checkbox(v-if='!creatingParty')
           input.custom-control-input(type="checkbox", v-model="newGuild.privateGuild")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('privateGuild') }}
@@ -37,7 +37,7 @@
             .svg-icon(v-html='icons.information')
 
         br
-        label.custom-control.custom-checkbox
+        label.custom-control.custom-checkbox(v-if='!creatingParty')
           input.custom-control-input(type="checkbox", v-model="newGuild.allowGuildInvationsFromNonMembers")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('allowGuildInvationsFromNonMembers') }}
@@ -46,14 +46,18 @@
         label
           strong(v-once) {{$t('description')}}*
         div.description-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
-        b-form-input(type="text", textarea :placeholder="$t('guildDescriptionPlaceHolder')", v-model="newGuild.description")
+        b-form-input(type="text", textarea :placeholder="creatingParty ? $t('partyDescriptionPlaceHolder') : $t('guildDescriptionPlaceHolder')", v-model="newGuild.description")
 
-      .form-group(v-if='newGuild.id')
+      .form-group(v-if='newGuild.id && !creatingParty')
         label
           strong(v-once) {{$t('guildInformation')}}*
-        b-form-input(type="text", textarea :placeholder="$t('guildInformationPlaceHolder')", v-model="newGuild.guildInformation")
+        b-form-input(type="text", textarea, :placeholder="$t('guildInformationPlaceHolder')", v-model="newGuild.guildInformation")
 
-      .form-group(style='position: relative;')
+      .form-group(v-if='creatingParty && !newGuild.id')
+        span
+          toggleSwitch(:label="$t('inviteMembersNow')", v-model='inviteMembers')
+
+      .form-group(style='position: relative;', v-if='!creatingParty')
         label
           strong(v-once) {{$t('categories')}}*
         div.category-wrap(@click.prevent="toggleCategorySelect")
@@ -70,13 +74,26 @@
               span.custom-control-description(v-once) {{ $t(group.label) }}
           button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
 
+      .form-group(v-if='inviteMembers && !newGuild.id')
+        label
+          strong(v-once) Invite via Email or User ID
+          p Invite users via a valid email or 36-digit User ID. If an email isn’t registered yet, we’ll invite them to join.
+
+        div
+          div(v-for='(member, index) in membersToInvite')
+            input(type='text', v-model='member.value')
+            button(@click.prevent='removeMemberToInvite(index)') Remove
+          div
+            input(type='text', placeholder='Email address or User ID', v-model='newMemberToInvite.value')
+            button(@click.prevent='addMemberToInvite()') Add
+
       .form-group.text-center
-        div.item-with-icon
+        div.item-with-icon(v-if='!creatingParty')
           .svg-icon(v-html="icons.gem")
           span.count 4
-        button.btn.btn-primary.btn-md(v-if='!newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('createGuild') }}
-        button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ $t('updateGuild') }}
-        .gem-description(v-once) {{ $t('guildGemCostInfo') }}
+        button.btn.btn-primary.btn-md(v-if='!newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ creatingParty ? $t('createParty') : $t('createGuild') }}
+        button.btn.btn-primary.btn-md(v-if='newGuild.id', :disabled='!newGuild.name || !newGuild.description') {{ creatingParty ? $t('updateParty') : $t('updateGuild') }}
+        .gem-description(v-once, v-if='!creatingParty') {{ $t('guildGemCostInfo') }}
 </template>
 
 <style lang="scss" scoped>
@@ -101,31 +118,6 @@
     margin-top: 1em;
   }
 
-  .category-box {
-    padding: 1em;
-    max-width: 400px;
-    position: absolute;
-    top: -480px;
-    padding: 2em;
-    border-radius: 2px;
-    background-color: $white;
-    box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
-  }
-
-  .category-label {
-    min-width: 100px;
-    border-radius: 100px;
-    background-color: $gray-600;
-    padding: .5em;
-    display: inline-block;
-    margin-right: .5em;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 1.33;
-    text-align: center;
-    color: $gray-300;
-  }
-
   .item-with-icon {
     display: inline-block;
 
@@ -146,21 +138,6 @@
     margin-top: 1em;
   }
 
-  .category-select {
-    border-radius: 2px;
-    background-color: $white;
-    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
-    padding: 1em;
-  }
-
-  .category-select:hover {
-    cursor: pointer;
-  }
-
-  .category-wrap {
-    margin-top: .5em;
-  }
-
   .icon {
     margin-left: .5em;
     display: inline-block;
@@ -175,6 +152,7 @@ import bFormCheckbox from 'bootstrap-vue/lib/components/form-checkbox';
 import bFormSelect from 'bootstrap-vue/lib/components/form-select';
 import bTooltip from 'bootstrap-vue/lib/components/tooltip';
 
+import toggleSwitch from 'client/components/ui/toggleSwitch';
 import gemIcon from 'assets/svg/gem.svg';
 import informationIcon from 'assets/svg/information.svg';
 
@@ -186,6 +164,7 @@ export default {
     bFormCheckbox,
     bFormSelect,
     bTooltip,
+    toggleSwitch,
   },
   data () {
     let data = {
@@ -251,6 +230,13 @@ export default {
       ],
       showCategorySelect: false,
       members: ['one', 'two'],
+      creatingParty: true,
+      inviteMembers: false,
+      newMemberToInvite: {
+        value: '',
+        type: '',
+      },
+      membersToInvite: [],
     };
 
     let hashedCategories = {};
@@ -282,11 +268,23 @@ export default {
       return 500 - this.newGuild.description.length;
     },
     title () {
+      if (this.creatingParty) return this.$t('createParty');
       if (!this.newGuild.id) return this.$t('createGuild');
       return this.$t('updateGuild');
     },
   },
   methods: {
+    addMemberToInvite () {
+      // @TODO: determine type
+      this.membersToInvite.push(this.newMemberToInvite);
+      this.newMemberToInvite = {
+        value: '',
+        type: '',
+      };
+    },
+    removeMemberToInvite (index) {
+      this.membersToInvite.splice(index, 1);
+    },
     toggleCategorySelect () {
       this.showCategorySelect = !this.showCategorySelect;
     },
@@ -311,7 +309,7 @@ export default {
       }
 
       // @TODO: Add proper notifications
-      if (!confirm(this.$t('confirmGuild'))) return;
+      if (!this.newGuild.id && !confirm(this.$t('confirmGuild'))) return;
 
       if (!this.newGuild.privateGuild) {
         this.newGuild.privacy = 'public';
@@ -342,6 +340,8 @@ export default {
         privateGuild: true,
         allowGuildInvationsFromNonMembers: true,
       };
+
+      this.$root.$emit('hide::modal', 'guild-form');
     },
   },
 };
diff --git a/website/client/components/guilds/guild.vue b/website/client/components/guilds/guild.vue
index 4a3fcccddc..9f3076f0d7 100644
--- a/website/client/components/guilds/guild.vue
+++ b/website/client/components/guilds/guild.vue
@@ -1,25 +1,21 @@
 <template lang="pug">
-// TODO this is necessary until we have a way to wait for data to be loaded from the server
-.row(v-if="guild")
+.row(v-if="group")
+  group-form-modal
   .clearfix.col-8
     .row
+      .col-6.title-details
+        h1 {{group.name}}
+        strong.float-left(v-once) {{$t('groupLeader')}}
+        span.float-left(v-once, v-if='group.leader.profile') : {{group.leader.profile.name}}
       .col-6
-        .float-left
-          h2 {{guild.name}}
-          strong.float-left(v-once) {{$t('groupLeader')}}
-          span.float-left : {{guild.leader.profile.name}}
-      .col-6
-        .float-right
-          .row.icon-row
-            .col-6
-              .svg-icon.shield(v-html="icons.goldGuildBadge")
-              span.number {{guild.memberCount}}
-              div(v-once) {{ $t('guildMembers') }}
-            .col-6
-              .item-with-icon
-                .svg-icon.gem(v-html="icons.gem")
-                span.number {{guild.memberCount}}
-                div(v-once) {{ $t('guildBank') }}
+        .row.icon-row
+          .col-4(v-bind:class="{ 'offset-8': isParty }")
+            members-modal(:group='group', v-if='isMember')
+          .col-6(v-if='!isParty')
+            .item-with-icon
+              .svg-icon.gem(v-html="icons.gem")
+              span.number {{group.memberCount}}
+              div(v-once) {{ $t('guildBank') }}
     .row.chat-row
       .col-12
         h3(v-once) {{ $t('chat') }}
@@ -34,7 +30,7 @@
           .col-md-2
             .svg-icon(v-html="icons.like")
           .col-md-10
-            .card(v-for="msg in guild.chat", :key="msg.id")
+            .card(v-for="msg in group.chat", :key="msg.id")
               .card-block
                 h3.leader Character name
                 span 2 hours ago
@@ -62,146 +58,336 @@
   .col-md-4.sidebar
     .guild-background.row
       .col-6
-        p Image here
+        p(v-if='!isParty')  Image here
       .col-6
-        members-modal(:group='guild')
-        br
-        button.btn.btn-primary(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
-        br
-        button.btn.btn-primary(v-once) {{$t('inviteToGuild')}}
-        br
-        button.btn.btn-primary(v-once) {{$t('messageGuildLeader')}}
-        br
-        button.btn.btn-primary(v-once) {{$t('donateGems')}}
-        br
-        button.btn.btn-primary(b-btn, @click="updateGuild", v-once) {{ $t('updateGuild') }}
-    div
-      h3(v-once) {{ $t('description') }}
-      p(v-once) {{ guild.description }}
-      p Life hacks are tricks, shortcuts, or methods that help increase productivity, efficiency, health, and so on. Generally, they get you to a better state of life. Life hacking is the process of utilizing and implementing these secrets. And, in this guild, we want to help everyone discover these improved ways of doing things.
-    div
-      h3(v-once) {{$t('guildInformation')}}
-      h4 Welcome
-      p Below are some resources that some members might find useful. Consider checking them out before posting any questions, as they just might help answer some of them! Feel free to share your life hacks in the guild chat, or ask any questions that you might have. Please peruse at your leisure, and remember: this guild is meant to help guide you in the right direction. Only you will know what works best for you.
-    div
-      h3 Challenges
-      .card
-        h4 Challenge
-        .row
-          .col-8
-            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque ultrices libero.
-          .col-4
-        .row
-          .col-md-12
-            span Tag
-            span 100
+        .button-container
+          button.btn.btn-success(class='btn-success', v-if='isLeader') {{ $t('upgrade') }}
+        .button-container
+          button.btn.btn-primary(b-btn, @click="updateGuild", v-once, v-if='isLeader') {{ $t('edit') }}
+        .button-container
+          button.btn.btn-success(class='btn-success', v-if='!isMember') {{ $t('join') }}
+        .button-container
+          button.btn.btn-primary(v-once) {{$t('invite')}}
+        .button-container
+          button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}}
+        .button-container
+          button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}}
+
+    .section-header
+      .row
+        .col-10
+          h3(v-once) {{ $t('questDetailsTitle') }}
+        .col-2
+          .toggle-up(@click="sections.quest = !sections.quest", v-if="sections.quest")
+            .svg-icon(v-html="icons.upIcon")
+          .toggle-down(@click="sections.quest = !sections.quest", v-if="!sections.quest")
+            .svg-icon(v-html="icons.downIcon")
+      .section(v-if="sections.quest")
+        .row.no-quest-section(v-if='isParty && !onPendingQuest && !onActiveQuest')
+          .col-12.text-center
+            .svg-icon(v-html="icons.questIcon")
+            h4(v-once) {{ $t('yourNotOnQuest') }}
+            p(v-once) {{ $t('questDescription') }}
+            button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
+            owned-quests-modal(:group='this.group')
+        .row.quest-active-section(v-if='isParty && onPendingQuest && !onActiveQuest')
+          h2 Pending quest
+          button.btn.btn-secondary(v-once, @click="questForceStart()") {{ $t('begin') }}
+          button.btn.btn-secondary(v-once, @click="questCancel()") {{ $t('cancel') }}
+        .row.quest-active-section(v-if='isParty && !onPendingQuest && onActiveQuest')
+          .col-12.text-center
+            .quest-boss(:class="'quest_' + questData.key")
+            h3(v-once) {{ questData.text() }}
+            .quest-box.svg-icon(v-html="icons.questBackground")
+            .collect-info(v-if='questData.collect')
+              .row(v-for='(value, key) in questData.collect')
+                .col-2
+                  div(:class="'quest_' + questData.key + '_' + key")
+                .col-10
+                  strong {{value.text()}}
+                  .collect-progress-bar
+                  strong {{group.quest.progress.collect[key]}} / {{value.count}}
+            .boss-info(v-if='questData.boss')
+              .row
+                .col-6
+                  h4.float-left(v-once) {{ questData.boss.name() }}
+                .col-6
+                  span.float-right(v-once) {{ $t('participants') }}
+              .row
+                .col-12
+                  .boss-health-bar
+              .row.boss-details
+                  .col-6
+                    span.float-left
+                      | {{group.quest.progress.hp}} / {{questData.boss.hp}}
+                  .col-6
+                    span.float-right 30 pending damage
+            button.btn.btn-secondary(v-once, @click="questAbort()") {{ $t('abort') }}
+
+    .section-header
+      .row
+        .col-10
+          h3(v-once) {{ $t('description') }}
+        .col-2
+          .toggle-up(@click="sections.description = !sections.description", v-if="sections.description")
+            .svg-icon(v-html="icons.upIcon")
+          .toggle-down(@click="sections.description = !sections.description", v-if="!sections.description")
+            .svg-icon(v-html="icons.downIcon")
+      .section(v-if="sections.description")
+        p(v-once) {{ group.description }}
+        p Life hacks are tricks, shortcuts, or methods that help increase productivity, efficiency, health, and so on. Generally, they get you to a better state of life. Life hacking is the process of utilizing and implementing these secrets. And, in this guild, we want to help everyone discover these improved ways of doing things.
+
+    .section-header
+      .row
+        .col-10
+          h3(v-once) {{ $t('guildInformation') }}
+        .col-2
+          .toggle-up(@click="sections.information = !sections.information", v-if="sections.information")
+            .svg-icon(v-html="icons.upIcon")
+          .toggle-down(@click="sections.information = !sections.information", v-if="!sections.information")
+            .svg-icon(v-html="icons.downIcon")
+      .section(v-if="sections.information")
+        h4 Welcome
+        p Below are some resources that some members might find useful. Consider checking them out before posting any questions, as they just might help answer some of them! Feel free to share your life hacks in the guild chat, or ask any questions that you might have. Please peruse at your leisure, and remember: this guild is meant to help guide you in the right direction. Only you will know what works best for you.
+
+    .section-header.challenge
+      .row
+        .col-10.information-header
+          h3(v-once)
+            | {{ $t('challenges') }}
+          b-tooltip.icon.tooltip-wrapper(:content="$t('privateDescription')")
+            .svg-icon(v-html='icons.information')
+        .col-2
+          .toggle-up(@click="sections.challenges = !sections.challenges", v-if="sections.challenges")
+            .svg-icon(v-html="icons.upIcon")
+          .toggle-down(@click="sections.challenges = !sections.challenges", v-if="!sections.challenges")
+            .svg-icon(v-html="icons.downIcon")
+      .section(v-if="sections.challenges")
+        .row.no-quest-section(v-if='!hasChallenges')
+          .col-12.text-center
+            .svg-icon(v-html="icons.challengeIcon")
+            h4(v-once) {{ $t('haveNoChallenges') }}
+            p(v-once) {{ $t('challengeDescription') }}
+            button.btn.btn-secondary(v-once) {{ $t('createChallenge') }}
+    div.text-center
+      button.btn.btn-primary(class='btn-danger', v-if='isMember') {{ $t('leave') }}
 </template>
 
 <style lang="scss" scoped>
-@import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
 
-.sidebar {
-  background-color: $gray-600;
-}
+  .button-container {
+    margin-bottom: 1em;
 
-.card {
-  margin: 2em 0;
-  padding: 1em;
-
-  h3.leader {
-    color: $purple-200;
+    button {
+      width: 100%;
+    }
   }
 
-  .text {
+  .item-with-icon {
+    border-radius: 2px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+    padding: 1em;
+  }
+
+  .sidebar {
+    background-color: $gray-600;
+    padding-top: 2em;
+  }
+
+  .card {
+    margin: 2em 0;
+    padding: 1em;
+
+    h3.leader {
+      color: $purple-200;
+    }
+
+    .text {
+      font-size: 16px;
+      line-height: 1.43;
+      color: $gray-50;
+    }
+  }
+
+  .guild-background {
+    background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
+  }
+
+  textarea {
+    height: 150px;
+    width: 100%;
+    background-color: $white;
+    border: solid 1px $gray-400;
     font-size: 16px;
+    font-style: italic;
     line-height: 1.43;
-    color: $gray-50;
+    color: $gray-300;
+    padding: .5em;
   }
-}
 
-.guild-background {
-  background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
-  height: 300px;
-}
-
-textarea {
-  height: 150px;
-  width: 100%;
-  background-color: $white;
-  border: solid 1px $gray-400;
-  font-size: 16px;
-  font-style: italic;
-  line-height: 1.43;
-  color: $gray-300;
-  padding: .5em;
-}
-
-.svg-icon.shield, .svg-icon.gem {
-  width: 40px;
-  margin-right: 1em;
-}
-
-.icon-row {
-  width: 200px;
-  margin-top: 3em;
-  margin-right: 3em;
-
-  .number {
-    font-size: 22px;
-    font-weight: bold;
-  }
-}
-
-.chat-row {
-  margin-top: 2em;
-
-  .send-chat {
-    margin-top: -3.5em;
-    z-index: 10;
-    position: relative;
+  .svg-icon.shield, .svg-icon.gem {
+    width: 40px;
     margin-right: 1em;
   }
-}
 
-.hr {
-  width: 100%;
-  height: 20px;
-  border-bottom: 1px solid $gray-500;
-  text-align: center;
-  margin: 2em 0;
-}
+  .title-details {
+    padding-top: 1em;
+    padding-left: 1em;
+  }
 
-.hr-middle {
-  font-size: 16px;
-  font-weight: bold;
-  font-family: 'Roboto Condensed';
-  line-height: 1.5;
-  text-align: center;
-  color: $gray-200;
-  background-color: $gray-700;
-  padding: .2em;
-  margin-top: .2em;
-  display: inline-block;
-  width: 100px;
-}
+  .icon-row {
+    margin-top: 1em;
 
-span.action {
-  font-size: 14px;
-  line-height: 1.33;
-  color: $gray-200;
-  font-weight: 500;
-  margin-right: 1em;
-}
+    .number {
+      font-size: 22px;
+      font-weight: bold;
+    }
+  }
 
-span.action .icon {
-  margin-right: .3em;
-}
+  .chat-row {
+    margin-top: 2em;
+
+    .send-chat {
+      margin-top: -3.5em;
+      z-index: 10;
+      position: relative;
+      margin-right: 1em;
+    }
+  }
+
+  .hr {
+    width: 100%;
+    height: 20px;
+    border-bottom: 1px solid $gray-500;
+    text-align: center;
+    margin: 2em 0;
+  }
+
+  .hr-middle {
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 'Roboto Condensed';
+    line-height: 1.5;
+    text-align: center;
+    color: $gray-200;
+    background-color: $gray-700;
+    padding: .2em;
+    margin-top: .2em;
+    display: inline-block;
+    width: 100px;
+  }
+
+  span.action {
+    font-size: 14px;
+    line-height: 1.33;
+    color: $gray-200;
+    font-weight: 500;
+    margin-right: 1em;
+  }
+
+  span.action .icon {
+    margin-right: .3em;
+  }
+
+  .no-quest-section {
+    padding: 2em;
+    color: $gray-300;
+
+    h4 {
+      color: $gray-300;
+    }
+
+    p {
+      margin-bottom: 2em;
+    }
+
+    .svg-icon {
+      height: 30px;
+      width: 30px;
+      margin-bottom: 2em;
+    }
+  }
+
+  .information-header {
+    h3, .tooltip-wrapper {
+      display: inline-block;
+    }
+
+    .tooltip-wrapper {
+      margin-left: 2.2em;
+    }
+  }
+
+  .quest-active-section {
+    .quest-box {
+      height: 100px;
+      width: 100%;
+
+      svg: {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .boss-info, .collect-info {
+      position: relative;
+      top: -89px;
+      left: 15px;
+      width: 32em;
+      text-align: left;
+    }
+  }
+
+  .section-header {
+    border-top: 1px solid #e1e0e3;
+    margin-top: 1em;
+    padding-top: 1em;
+  }
+
+  .section-header.challenge {
+    border-bottom: 1px solid #e1e0e3;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+  }
+
+  .toggle-up, .toggle-down {
+    cursor: pointer;
+  }
+
+  .quest-boss {
+    margin: 0 auto;
+  }
+
+  .boss-health-bar {
+    width: 80%;
+    background-color: red;
+    height: 15px;
+    margin-bottom: .5em;
+  }
+
+  .collect-progress-bar {
+    background-color: #24cc8f;
+    height: 15px;
+    width: 80%;
+  }
 </style>
 
 <script>
 import groupUtilities from 'client/mixins/groupsUtilities';
 import { mapState } from 'client/libs/store';
 import membersModal from './membersModal';
+import ownedQuestsModal from './ownedQuestsModal';
+import { TAVERN_ID } from 'common/script/constants';
+import quests from 'common/script/content/quests';
+import percent from 'common/script/libs/percent';
+import groupFormModal from './groupFormModal';
+
+import bCollapse from 'bootstrap-vue/lib/components/collapse';
+import bCard from 'bootstrap-vue/lib/components/card';
+import bToggle from 'bootstrap-vue/lib/directives/toggle';
+import bTooltip from 'bootstrap-vue/lib/components/tooltip';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
@@ -209,43 +395,85 @@ import likeIcon from 'assets/svg/like.svg';
 import likedIcon from 'assets/svg/liked.svg';
 import reportIcon from 'assets/svg/report.svg';
 import gemIcon from 'assets/svg/gem.svg';
-import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
+import questIcon from 'assets/svg/quest.svg';
+import challengeIcon from 'assets/svg/challenge.svg';
+import informationIcon from 'assets/svg/information.svg';
+import questBackground from 'assets/svg/quest-background-border.svg';
+import upIcon from 'assets/svg/up.svg';
+import downIcon from 'assets/svg/down.svg';
 
 export default {
   mixins: [groupUtilities],
   props: ['guildId'],
   components: {
     membersModal,
+    ownedQuestsModal,
+    bCollapse,
+    bCard,
+    bTooltip,
+    groupFormModal,
+  },
+  directives: {
+    bToggle,
   },
   data () {
     return {
-      guild: null,
+      group: null,
       icons: Object.freeze({
         like: likeIcon,
         copy: copyIcon,
         report: reportIcon,
         delete: deleteIcon,
         gem: gemIcon,
-        goldGuildBadge: goldGuildBadgeIcon,
         liked: likedIcon,
+        questIcon,
+        challengeIcon,
+        information: informationIcon,
+        questBackground,
+        upIcon,
+        downIcon,
       }),
+      questData: {},
+      selectedQuest: {},
+      sections: {
+        quest: true,
+        description: true,
+        information: true,
+        challenges: true,
+      },
     };
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    isParty () {
+      return this.$route.path.startsWith('/party');
+    },
+    onPendingQuest () {
+      return Boolean(this.group.quest.key) && !this.group.quest.active;
+    },
+    onActiveQuest () {
+      return this.group.quest.active;
+    },
+    isLeader () {
+      return this.user._id === this.group.leader._id;
+    },
     isMember () {
-      return this.isMemberOfGroup(this.user, this.guild);
+      return this.isMemberOfGroup(this.user, this.group);
+    },
+    canEditQuest () {
+      let isQuestLeader = this.group.quest && this.group.quest.leader === this.user._id;
+      return isQuestLeader;
     },
     isMemberOfPendingQuest () {
       let userid = this.user._id;
-      let group = this.guild;
+      let group = this.group;
       if (!group.quest || !group.quest.members) return false;
       if (group.quest.active) return false; // quest is started, not pending
       return userid in group.quest.members && group.quest.members[userid] !== false;
     },
     isMemberOfRunningQuest () {
       let userid = this.user._id;
-      let group = this.guild;
+      let group = this.group;
       if (!group.quest || !group.quest.members) return false;
       if (!group.quest.active) return false; // quest is pending, not started
       return group.quest.members[userid];
@@ -265,8 +493,28 @@ export default {
       let userIsManager = Boolean(group.managers[userId]);
       return leader || userIsManager;
     },
+    hasChallenges () {
+      if (!this.group.challenges) return false;
+      return this.group.challenges.length === 0;
+    },
+    bossHpPercent () {
+      return percent(this.group.quest.progress.hp, this.questData.boss.hp);
+    },
   },
   created () {
+    if (this.isParty) {
+      this.groupId = 'party';
+      // @TODO: Set up from old client. Decide what we need and what we don't
+      // Check Desktop notifs
+      // Mark Chat seen
+      // Load members
+      // Load invites
+      // Load challenges
+      // Load group tasks for group plan
+      // Load approvals for group plan
+    } else if (this.$route.path.startsWith('/guilds/tavern')) {
+      this.groupId = TAVERN_ID;
+    }
     this.fetchGuild();
   },
   watch: {
@@ -275,23 +523,28 @@ export default {
   },
   methods: {
     updateGuild () {
-      this.$store.state.editingGroup = this.guild;
+      this.$store.state.editingGroup = this.group;
       this.$root.$emit('show::modal', 'guild-form');
     },
     async fetchGuild () {
-      this.guild = await this.$store.dispatch('guilds:getGroup', {groupId: this.guildId});
-
-      this.guild.chat = [
-        {
-          text: '@CharacterName Vestibulum ultricies, lorem non bibendum consequat, nisl lacus semper nulla, hendrerit dignissim ipsum erat eu odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at aliquet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla non est ut nisl interdum tincidunt in eu dui. Proin condimentum a.',
-        },
-      ];
+      let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.groupId});
+      if (this.isParty) {
+        this.$store.party = group;
+        this.group = this.$store.party;
+        this.checkForAchievements();
+        this.questData = quests.quests[this.group.quest.key];
+        return;
+      }
+      this.group = group;
     },
     deleteAllMessages () {
       if (confirm(this.$t('confirmDeleteAllMessages'))) {
         // User.clearPMs();
       }
     },
+    openStartQuestModal () {
+      this.$root.$emit('show::modal', 'owned-quests-modal');
+    },
     // inviteOrStartParty (group) {
       // Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Invite Friends'});
 
@@ -314,6 +567,114 @@ export default {
       //   },
       // });
     // },
+    checkForAchievements () {
+      // Checks if user's party has reached 2 players for the first time.
+      if (!this.user.achievements.partyUp && this.group.memberCount >= 2) {
+        // @TODO
+        // User.set({'achievements.partyUp':true});
+        // Achievement.displayAchievement('partyUp');
+      }
+
+      // Checks if user's party has reached 4 players for the first time.
+      if (!this.user.achievements.partyOn && this.group.memberCount >= 4) {
+        // @TODO
+        // User.set({'achievements.partyOn':true});
+        // Achievement.displayAchievement('partyOn');
+      }
+    },
+    // @TODO: This should be moved to notifications component
+    async join () {
+      if (this.group.cancelledPlan && !confirm(this.$t('aboutToJoinCancelledGroupPlan'))) {
+        return;
+      }
+
+      await this.$store.dispatch('guilds:join', {groupId: this.group._id});
+
+      // @TODO: Implement
+      // User.sync();
+      // Analytics.updateUser({'partyID': party.id});
+      // $rootScope.hardRedirect('/#/options/groups/party');
+    },
+    clickLeave () {
+      // Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Leave Party'});
+      // @TODO: Get challenges and ask to keep or remove
+      let keep = true;
+      this.leave(keep);
+    },
+    async leave (keepTasks) {
+      let keepChallenges = 'remain-in-challenges';
+      await this.$store.dispatch('guilds:leave', {
+        groupId: this.group._id,
+        keep: keepTasks,
+        keepChallenges,
+      });
+
+      // @TODO: Implement
+      // Analytics.updateUser({'partySize':null,'partyID':null});
+      // User.sync().then(function () {
+      //  $rootScope.hardRedirect('/#/options/groups/party');
+      // });
+    },
+    // @TODO: Move to notificatin component
+    async leaveOldPartyAndJoinNewParty () {
+      let newPartyName = 'where does this come from';
+      if (!confirm(`Are you sure you want to delete your party and join${newPartyName}?`)) return;
+
+      let keepChallenges = 'remain-in-challenges';
+      await this.$store.dispatch('guilds:leave', {
+        groupId: this.group._id,
+        keep: false,
+        keepChallenges,
+      });
+
+      await this.$store.dispatch('guilds:join', {groupId: this.group._id});
+    },
+    // @TODO: Move to notificatin component
+    async reject () {
+      await this.$store.dispatch('guilds:rejectInvite', {groupId: this.group._id});
+      // User.sync();
+    },
+    clickStartQuest () {
+      // Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Start a Quest'});
+      let hasQuests = find(this.user.items.quests, (quest) => {
+        return quest > 0;
+      });
+
+      if (hasQuests) {
+        this.$root.$emit('show::modal', 'owned-quests-modal');
+        return;
+      }
+      // $rootScope.$state.go('options.inventory.quests');
+    },
+    async questCancel () {
+      if (!confirm(this.$t('sureCancel'))) return;
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/cancel'});
+      this.group.quest = quest;
+    },
+    async questAbort () {
+      if (!confirm(this.$t('sureAbort'))) return;
+      if (!confirm(this.$t('doubleSureAbort'))) return;
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/abort'});
+      this.group.quest = quest;
+    },
+    async questLeave () {
+      if (!confirm(this.$t('sureLeave'))) return;
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/leave'});
+      this.group.quest = quest;
+    },
+    async questAccept () {
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/accept'});
+      this.group.quest = quest;
+    },
+    async questForceStart () {
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/force-start'});
+      this.group.quest = quest;
+    },
+    // @TODO: Move to notificaitons component?
+    async questReject () {
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/reject'});
+      this.group.quest = quest;
+    },
   },
 };
 </script>
diff --git a/website/client/components/guilds/membersModal.vue b/website/client/components/guilds/membersModal.vue
index 106a5698f6..274d84cdf7 100644
--- a/website/client/components/guilds/membersModal.vue
+++ b/website/client/components/guilds/membersModal.vue
@@ -1,6 +1,9 @@
 <template lang="pug">
 div
-  button.btn.btn-primary(b-btn, @click="$root.$emit('show::modal','members-modal')") {{ $t('viewMembers') }}
+  .item-with-icon(@click="$root.$emit('show::modal','members-modal')")
+    .svg-icon.shield(v-html="icons.goldGuildBadgeIcon")
+    span.number {{group.memberCount}}
+    div(v-once) {{ $t('members') }}
 
   b-modal#members-modal(:title="$t('createGuild')", size='lg')
     .header-wrap(slot="modal-header")
@@ -19,24 +22,25 @@ div
             b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
     .row(v-for='member in members', :key='member', )
       .col-8.offset-1
-        member-details(:user='member')
+        member-details(:member='member')
       .col-3.actions
         b-dropdown(:text="$t('sort')", right=true)
           b-dropdown-item(@click='sort(option.value)')
-            img.action-icon(src='~assets/members/remove.svg')
+            .svg-icon(v-html="icons.removeIcon")
             | {{$t('removeMember')}}
           b-dropdown-item(@click='sort(option.value)')
-            img.action-icon(src='~assets/members/message.svg')
+            .svg-icon(v-html="icons.messageIcon")
             | {{$t('sendMessage')}}
           b-dropdown-item(@click='sort(option.value)')
-            img.action-icon(src='~assets/members/star.svg')
+            .svg-icon(v-html="icons.starIcon")
             | {{$t('promoteToLeader')}}
           b-dropdown-item(@click='sort(option.value)')
-            img.action-icon(src='~assets/members/star.svg')
+            .svg-icon(v-html="icons.starIcon")
             | {{$t('addManager')}}
           b-dropdown-item(@click='sort(option.value)')
-            img.action-icon(src='~assets/members/remove.svg')
+            .svg-icon(v-html="icons.removeIcon")
             | {{$t('removeManager2')}}
+    .row-fluid.gradient
 
   b-modal#remove-member(:title="$t('confirmRemoveMember')")
     button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
@@ -45,7 +49,7 @@ div
     button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
 </template>
 
-<style lang='scss'>
+<style lang='scss' scoped>
   header {
     background-color: #edecee;
     border-radius: 4px 4px 0 0;
@@ -66,6 +70,49 @@ div
       margin-right: 1em;
     }
   }
+
+  #members-modal_modal_body {
+    padding: 0;
+
+    .col-8 {
+      margin-left: 0;
+    }
+
+    .member-details {
+      margin: 0;
+    }
+
+    .member-stats {
+      width: 382px;
+      height: 147px;
+    }
+
+    .gradient {
+      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
+      height: 200px;
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+    }
+  }
+
+  .item-with-icon {
+    border-radius: 2px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+    padding: 1em;
+    text-align: center;
+  }
+
+  .svg-icon.shield, .svg-icon.gem {
+    width: 40px;
+    margin-right: 1em;
+  }
+
+  .number {
+    font-size: 22px;
+    font-weight: bold;
+  }
 </style>
 
 <script>
@@ -74,6 +121,10 @@ import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
 import MemberDetails from '../memberDetails';
+import removeIcon from 'assets/members/remove.svg';
+import messageIcon from 'assets/members/message.svg';
+import starIcon from 'assets/members/star.svg';
+import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
 
 export default {
   props: ['group'],
@@ -109,6 +160,12 @@ export default {
         },
       ],
       searchTerm: '',
+      icons: Object.freeze({
+        removeIcon,
+        messageIcon,
+        starIcon,
+        goldGuildBadgeIcon,
+      }),
     };
   },
   methods: {
diff --git a/website/client/components/guilds/ownedQuestsModal.vue b/website/client/components/guilds/ownedQuestsModal.vue
new file mode 100644
index 0000000000..7d1771b780
--- /dev/null
+++ b/website/client/components/guilds/ownedQuestsModal.vue
@@ -0,0 +1,54 @@
+<template lang="pug">
+div
+  b-modal#owned-quests-modal(title="Which quest do you want to start?", size='md', hide-footer=true)
+    .row.content
+      .quest(v-for='(value, key, index) in user.items.quests', :class="'inventory_quest_scroll_' + key", @click='selectQuest(key)')
+      button.btn.btn-primary(@click='confirm()') Confirm
+  start-quest-modal(:group='group', :selectedQuest='selectedQuest')
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .content {
+    padding: 2em;
+
+    .quest {
+      margin-right: 1em;
+      margin-bottom: 1em;
+      display: inline-block;
+    }
+  }
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+import bModal from 'bootstrap-vue/lib/components/modal';
+
+import startQuestModal from './startQuestModal';
+
+export default {
+  props: ['group'],
+  components: {
+    bModal,
+    startQuestModal,
+  },
+  data () {
+    return {
+      selectedQuest: {},
+    };
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+  methods: {
+    selectQuest (quest) {
+      this.selectedQuest = quest;
+    },
+    confirm () {
+      this.$root.$emit('show::modal', 'start-quest-modal');
+      this.$root.$emit('hide::modal', 'owned-quests-modal');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/guilds/publicGuildItem.vue b/website/client/components/guilds/publicGuildItem.vue
index 815fe2948f..40cf650d99 100644
--- a/website/client/components/guilds/publicGuildItem.vue
+++ b/website/client/components/guilds/publicGuildItem.vue
@@ -35,20 +35,6 @@
   box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
   margin-bottom: 1rem;
 
-  .category-label {
-    min-width: 100px;
-    border-radius: 100px;
-    background-color: $gray-600;
-    padding: .5em;
-    display: inline-block;
-    margin-right: .5em;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 1.33;
-    text-align: center;
-    color: $gray-300;
-  }
-
   .recommend-text {
     font-size: 12px;
     font-style: italic;
diff --git a/website/client/components/guilds/startQuestModal.vue b/website/client/components/guilds/startQuestModal.vue
new file mode 100644
index 0000000000..14834a3b32
--- /dev/null
+++ b/website/client/components/guilds/startQuestModal.vue
@@ -0,0 +1,156 @@
+<template lang="pug">
+  b-modal#start-quest-modal(title="Empty", size='md', hide-footer=true, v-if='questData')
+    .quest-image(:class="'quest_' + questData.key")
+    h2 {{questData.text()}}
+    //- span by: Keith Holliday @TODO: Add author
+    p {{questData.notes()}}
+    div.quest-details
+      div(v-if=' questData.collect')
+        Strong {{$t('collect')}}: &nbsp;
+        span(v-for="(value, key, index) in questData.collect")
+          | {{$t('collectionItems', { number: questData.collect[key].count, items: questData.collect[key].text() })}}
+      div
+        Strong {{$t('collect')}}: &nbsp;
+        span
+          .svg-icon(v-html="icons.difficultyStarIcon")
+    div
+      button.btn.btn-primary(@click='questInit()') {{$t('inviteToPartyOrQuest')}}
+    div
+      p {{$t('inviteInformation')}}
+    .side-panel
+      h4.text-center {{$t('rewards')}}
+      .box
+        .svg-icon.rewards-icon(v-html="icons.starIcon")
+        strong {{questData.drop.exp}} {{$t('experience')}}
+      .box
+        .svg-icon.rewards-icon(v-html="icons.goldIcon")
+        strong {{questData.drop.gp}} {{$t('gold')}}
+      h4.text-center(v-if='questData.drop.items') {{$t('questOwnerRewards')}}
+      .box(v-for='item in questData.drop.items')
+        .rewards-icon(v-if='item.type === "quest"', :class="'quest_' + item.key")
+        .drop-rewards-icon(v-if='item.type === "gear"', :class="'shop_' + item.key")
+        strong.quest-reward-text {{item.text()}}
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  header {
+    background-color: $white !important;
+    border: none !important;
+
+    h5 {
+      text-indent: -99999px;
+    }
+  }
+
+  .quest-image {
+    margin: 0 auto;
+    margin-bottom: 1em;
+  }
+
+  .quest-details {
+    margin: 0 auto;
+    text-align: left;
+    width: 180px;
+  }
+
+  .btn-primary {
+    margin: 1em 0;
+  }
+
+  .side-panel {
+    background: #edecee;
+    position: absolute;
+    height: 460px;
+    width: 320px;
+    top: -1.8em;
+    left: 35em;
+    z-index: -1;
+    padding-top: 1em;
+    border-radius: 4px;
+
+    .drop-rewards-icon {
+      width: 35px;
+      height: 35px;
+      float: left;
+    }
+
+    .rewards-icon {
+      float: left;
+      width: 30px;
+      height: 30px;
+
+      svg {
+        width: 30px;
+        height: 30px;
+      }
+    }
+
+    .quest-reward-text {
+      font-size: 12px;
+    }
+
+    .box {
+      width: 220px;
+      height: 64px;
+      border-radius: 2px;
+      background-color: #ffffff;
+      margin: 0 auto;
+      margin-bottom: 1em;
+      padding: 1em;
+    }
+  }
+</style>
+
+<script>
+import bModal from 'bootstrap-vue/lib/components/modal';
+
+import quests from 'common/script/content/quests';
+
+import copyIcon from 'assets/svg/copy.svg';
+import greyBadgeIcon from 'assets/svg/grey-badge.svg';
+import qrCodeIcon from 'assets/svg/qrCode.svg';
+import facebookIcon from 'assets/svg/facebook.svg';
+import twitterIcon from 'assets/svg/twitter.svg';
+import starIcon from 'assets/svg/star.svg';
+import goldIcon from 'assets/svg/gold.svg';
+import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
+
+export default {
+  props: ['group', 'selectedQuest'],
+  components: {
+    bModal,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        copy: copyIcon,
+        greyBadge: greyBadgeIcon,
+        qrCode: qrCodeIcon,
+        facebook: facebookIcon,
+        twitter: twitterIcon,
+        starIcon,
+        goldIcon,
+        difficultyStarIcon,
+      }),
+      shareUserIdShown: false,
+    };
+  },
+  computed: {
+    questData () {
+      return quests.quests[this.selectedQuest];
+    },
+  },
+  methods: {
+    async questInit () {
+      let key = this.selectedQuest;
+      // Analytics.updateUser({'partyID': party._id, 'partySize': party.memberCount});
+      let response = await this.$store.dispatch('guilds:inviteToQuest', {groupId: this.group._id, key});
+      let quest = response.data.data;
+      this.$store.party.quest = quest;
+      this.$root.$emit('hide::modal', 'start-quest-modal');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/inventory/drawer.vue b/website/client/components/inventory/drawer.vue
index 7625ecd2e6..d82b1be2dc 100644
--- a/website/client/components/inventory/drawer.vue
+++ b/website/client/components/inventory/drawer.vue
@@ -91,8 +91,7 @@
 }
 
 .drawer-slider {
-  padding: 12px 0 0 24px;
-  margin-left: -24px;
+  padding: 12px 0 0 0;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
diff --git a/website/client/components/inventory/item.vue b/website/client/components/inventory/item.vue
index c20d0def70..971e382e8f 100644
--- a/website/client/components/inventory/item.vue
+++ b/website/client/components/inventory/item.vue
@@ -16,13 +16,16 @@ b-popover(
   .item-wrapper
     .item
       slot(name="itemBadge", :item="item")
-      span.item-content(:class="itemContentClass")
+      span.item-content(
+        :class="itemContentClass",
+        :draggable="draggable",
+        @dragstart="onDrag"
+      )
     span.item-label(v-if="label") {{ label }}
 </template>
 
 <script>
 import bPopover from 'bootstrap-vue/lib/components/popover';
-import { mapState } from 'client/libs/store';
 
 export default {
   components: {
@@ -46,16 +49,22 @@ export default {
       type: String,
       default: 'bottom',
     },
-  },
-  computed: {
-    ...mapState({
-      ATTRIBUTES: 'constants.ATTRIBUTES',
-    }),
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     click () {
       this.$emit('click', this.item);
     },
+    onDrag (ev) {
+      if (this.draggable) {
+        this.$emit('onDrag', ev);
+      } else {
+        ev.preventDefault();
+      }
+    },
   },
 };
 </script>
diff --git a/website/client/components/inventory/stable.vue b/website/client/components/inventory/stable.vue
deleted file mode 100644
index a7e6fd673f..0000000000
--- a/website/client/components/inventory/stable.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template lang="pug">
-.row
-  .col-2.standard-sidebar
-    .form-group
-      input.form-control(type="text", :placeholder="$t('search')")
-
-    .form
-      h3(v-once) {{ $t('filter') }}
-      .form-group
-        .form-check
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            strong {{ $t('pets') }}
-        .form-check.nested-field
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            span {{ $t('hatchingPotions') }}
-        .form-check.nested-field
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            span {{ $t('quest') }}
-        .form-check.nested-field
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            span {{ $t('special') }}
-      .form-group
-        .form-check
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            strong {{ $t('mounts') }}
-        .form-check.nested-field
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            span {{ $t('hatchingPotions') }}
-        .form-check.nested-field
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            span {{ $t('quest') }}
-        .form-check.nested-field
-          label.form-check-label(v-once) 
-            input.form-check-input(type="checkbox")
-            span {{ $t('special') }}
-
-  .col-10.standard-page
-    h4 Pets
-    .inventory-item-container(v-for="pet in dropPets")
-      .PixelPaw
-    .btn.btn-secondary.d-block(@click="open.dropPets = !open.dropPets") {{ open.dropPets ? 'Close' : 'Open' }}
-
-    h2 Magic Potions Pets
-    .inventory-item-container(v-for="pet in magicPets")
-      .PixelPaw
-    .btn.btn-secondary.d-block(@click="open.magicPets = !open.magicPets") {{ open.magicPets ? 'Close' : 'Open' }}
-
-    h2 Quest Pets
-    .inventory-item-container(v-for="pet in questPets")
-      .PixelPaw
-    .btn.btn-secondary.d-block(@click="open.questPets = !open.questPets") {{ open.questPets ? 'Close' : 'Open' }}
-
-    h2 Rare Pets
-    .inventory-item-container(v-for="pet in rarePets")
-      .PixelPaw
-    .btn.btn-secondary.d-block(@click="open.rarePets = !open.rarePets") {{ open.rarePets ? 'Close' : 'Open' }}
-
-    h2 Mounts
-    h2 Quest Mounts
-    h2 Rare Mounts
-</template>
-
-<style lang="scss">
-.inventory-item-container {
-  padding: 20px;
-  border: 1px solid;
-  display: inline-block;
-}
-</style>
-
-<script>
-import { mapState } from 'client/libs/store';
-import each from 'lodash/each';
-
-// TODO Normalize special pets and mounts
-// import Store from 'client/store';
-// import deepFreeze from 'client/libs/deepFreeze';
-// const specialMounts =
-
-export default {
-  data () {
-    return {
-      open: {
-        dropPets: false,
-        magicPets: false,
-        questPets: false,
-        rarePets: false,
-      },
-    };
-  },
-  computed: {
-    ...mapState(['content']),
-    dropPets () {
-      return this.listAnimals('pet', this.content.dropEggs, this.content.dropHatchingPotions, this.open.dropPets);
-    },
-    magicPets () {
-      return this.listAnimals('pet', this.content.dropEggs, this.content.premiumHatchingPotions, this.open.magicPets);
-    },
-    questPets () {
-      return this.listAnimals('pet', this.content.questEggs, this.content.dropHatchingPotions, this.open.questPets);
-    },
-    rarePets () {
-      return this.listAnimals('pet', this.content.dropEggs, this.content.dropHatchingPotions, this.open.rarePets);
-    },
-  },
-  methods: {
-    listAnimals (type, eggSource, potionSource, isOpen = false) {
-      let animals = [];
-      let iteration = 0;
-
-      each(eggSource, (egg) => {
-        if (iteration === 1 && !isOpen) return false;
-        iteration++;
-        each(potionSource, (potion) => {
-          let animalKey = `${egg.key}-${potion.key}`;
-          animals.push(this.content[`${type}Info`][animalKey].text());
-        });
-      });
-
-      return animals;
-    },
-  },
-};
-</script>
diff --git a/website/client/components/inventory/stable/countBadge.vue b/website/client/components/inventory/stable/countBadge.vue
new file mode 100644
index 0000000000..4f42bf7097
--- /dev/null
+++ b/website/client/components/inventory/stable/countBadge.vue
@@ -0,0 +1,33 @@
+<template lang="pug">
+span.badge.badge-pill.badge-item.badge-count(
+  v-if="show",
+) {{ count }}
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+.badge-count {
+  right: -9px;
+  color: $white;
+  background: $orange-100;
+  padding: 4.5px 6px;
+  min-width: 24px;
+  height: 24px;
+  box-shadow: 0 1px 1px 0 rgba($black, 0.12);
+}
+
+</style>
+
+<script>
+  export default {
+    props: {
+      show: {
+        type: Boolean,
+      },
+      count: {
+        type: Number,
+      },
+    },
+  };
+</script>
diff --git a/website/client/components/inventory/stable/drawerSlider.vue b/website/client/components/inventory/stable/drawerSlider.vue
new file mode 100644
index 0000000000..d54a27014d
--- /dev/null
+++ b/website/client/components/inventory/stable/drawerSlider.vue
@@ -0,0 +1,174 @@
+<template lang="pug">
+  div.slider-root(
+    v-bind:class="{'scrollButtonsVisible': scrollButtonsVisible}",
+  )
+    div.slider-button-area.left-button(
+      v-if="scrollButtonsVisible",
+      @mousedown.left="lastPage"
+    )
+      a.slider-button
+        .svg-icon(v-html="icons.previous")
+    div.slider-button-area.right-button(
+      v-if="scrollButtonsVisible",
+      @mousedown.left="nextPage"
+    )
+      a.slider-button
+        .svg-icon(v-html="icons.next")
+
+    // 120 = width of the left/right buttons
+    div.sliding-content(v-resize="500", @resized="currentWidth = $event.width - 120")
+      .items.items-one-line
+        template(v-for="item in pages[currentPage]")
+          div.vertical-divider(v-if="item.ofNextPage")
+
+          slot(
+            name="item",
+            :item="item",
+          )
+</template>
+
+<style lang="scss">
+
+  @import '~client/assets/scss/colors.scss';
+
+  $buttonAreaWidth: 60;
+
+  .slider-root {
+    position: relative;
+  }
+
+  .slider-button {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+    position: absolute;
+    top: calc((100% - 40px) / 2);
+
+    .svg-icon {
+      color: #a5a1ac;
+      margin: auto 0;
+      position: absolute;
+      top: calc((100% - 12px) / 2);
+      width: 8px;
+      height: 16px;
+      right: 16px;
+    }
+  }
+
+  .scrollButtonsVisible {
+
+    .sliding-content {
+      overflow: hidden;
+    }
+  }
+
+  .slider-button-area {
+    width: $buttonAreaWidth+px;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+
+    &.left-button {
+      left: 0;
+    }
+
+    &.right-button {
+      right: 0;
+    }
+  }
+
+  .sliding-content .items {
+    padding-top: 10px;
+    margin-left: $buttonAreaWidth+ px;
+
+    & > div:last-of-type {
+      margin-right: $buttonAreaWidth + 20px;
+    }
+  }
+
+  .vertical-divider {
+    height: 92px;
+    width: 1px;
+    background: #34313a;
+    margin-bottom: 8px;
+  }
+
+</style>
+
+<script>
+  import previous from 'assets/svg/previous.svg';
+  import next from 'assets/svg/next.svg';
+  import ResizeDirective from 'client/directives/resize.directive';
+
+  import _chunk from 'lodash/chunk';
+
+  export default {
+    directives: {
+      resize: ResizeDirective,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          previous,
+          next,
+        }),
+        currentWidth: 0,
+        currentPage: 0,
+      };
+    },
+    computed: {
+      pages () {
+        return _chunk(this.items, this.itemsPerPage() - 1).map((content, index, array) => {
+          let resultData = [...content];
+
+          if (array[index + 1]) {
+            resultData.push({
+              ...array[index + 1][0],
+              ofNextPage: true,
+            });
+          }
+
+          return resultData;
+        });
+      },
+    },
+    methods: {
+      lastPage () {
+        if (this.currentPage > 0) {
+          this.currentPage--;
+        } else {
+          this.currentPage = this.pages.length - 1;
+        }
+      },
+
+      nextPage () {
+        if (this.currentPage < this.pages.length - 1) {
+          this.currentPage++;
+        } else {
+          this.currentPage = 0;
+        }
+      },
+
+      itemsPerPage () {
+        return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
+      },
+    },
+    props: {
+      scrollButtonsVisible: {
+        type: Boolean,
+        default: true,
+      },
+      items: {
+        type: Array,
+      },
+      itemWidth: {
+        type: Number,
+      },
+      itemMargin: {
+        type: Number,
+      },
+    },
+  };
+</script>
diff --git a/website/client/components/inventory/stable/foodItem.vue b/website/client/components/inventory/stable/foodItem.vue
new file mode 100644
index 0000000000..7861844f2a
--- /dev/null
+++ b/website/client/components/inventory/stable/foodItem.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+b-popover(
+  :triggers="['hover']",
+  :placement="'top'",
+)
+  span(slot="content")
+    h4.popover-content-title {{ item.text() }}
+    div.popover-content-text(v-html="item.notes()")
+
+  .item-wrapper
+    .item
+      countBadge(
+        :show="true",
+        :count="itemCount"
+      )
+      span.item-content(
+        :class="'Pet_Food_'+item.key",
+        v-drag.food="item.key"
+      )
+</template>
+
+<script>
+import bPopover from 'bootstrap-vue/lib/components/popover';
+import DragDropDirective from 'client/directives/dragdrop.directive';
+
+import CountBadge from './countBadge';
+
+export default {
+  components: {
+    bPopover,
+    CountBadge,
+  },
+  directives: {
+    drag: DragDropDirective,
+  },
+  props: {
+    item: {
+      type: Object,
+    },
+    itemCount: {
+      type: Number,
+    },
+    itemContentClass: {
+      type: String,
+    },
+  },
+};
+</script>
diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
new file mode 100644
index 0000000000..fc9743d064
--- /dev/null
+++ b/website/client/components/inventory/stable/index.vue
@@ -0,0 +1,721 @@
+<template lang="pug">
+  .row.stable
+    .standard-sidebar
+      div
+        b-popover(
+          :triggers="['hover']",
+          :placement="'right'"
+        )
+          span(slot="content")
+            h4.popover-content-title(v-once) {{ $t('mattBoch') }}
+            .popover-content-text(v-once) {{ $t('mattBochText1') }}
+
+          div.npc_matt
+
+      .form-group
+        input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
+
+      .form
+        h2(v-once) {{ $t('filter') }}
+        h3(v-once) {{ $t('pets') }}
+        .form-group
+          .form-check(
+            v-for="petGroup in petGroups",
+            v-if="viewOptions[petGroup.key].animalCount != 0",
+            :key="petGroup.key"
+          )
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox", v-model="viewOptions[petGroup.key].selected")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ petGroup.label }}
+        h3(v-once) {{ $t('mounts') }}
+        .form-group
+          .form-check(
+            v-for="mountGroup in mountGroups",
+            v-if="viewOptions[mountGroup.key].animalCount != 0",
+            :key="mountGroup.key"
+          )
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox", v-model="viewOptions[mountGroup.key].selected")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ mountGroup.label }}
+
+        div.form-group.clearfix
+          h3.float-left Hide Missing
+          toggle-switch.float-right.hideMissing(
+            :label="''",
+            :checked="hideMissing",
+            @change="updateHideMissing"
+          )
+
+    .standard-page(v-resize="500", @resized="availableContentWidth = $event.width - 48")
+      .clearfix
+        h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}
+
+        div.float-right
+          span.dropdown-label {{ $t('sortBy') }}
+          b-dropdown(:text="$t(selectedSortBy)", right=true)
+            b-dropdown-item(
+              v-for="sort in sortByItems",
+              @click="selectedSortBy = sort",
+              :active="selectedSortBy === sort",
+              :key="sort"
+            ) {{ $t(sort) }}
+
+      h2
+        | {{ $t('pets') }}
+        |
+        span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
+
+      div(
+        v-for="petGroup in petGroups",
+        v-if="viewOptions[petGroup.key].selected",
+        :key="petGroup.key"
+      )
+        h4(v-if="viewOptions[petGroup.key].animalCount != 0") {{ petGroup.label }}
+
+        div.items
+          div(
+            v-for="pet in pets(petGroup, viewOptions[petGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
+            :key="pet.key",
+            v-drag.drop.food="pet.key",
+            @dragover="onDragOver($event, pet)",
+            @dropped="onDrop($event, pet)",
+          )
+            petItem(
+              :item="pet",
+              :itemContentClass="getPetItemClass(pet)",
+              :popoverPosition="'top'",
+              :progress="pet.progress",
+              :emptyItem="!pet.isOwned()",
+              :showPopover="pet.isOwned() || pet.isHatchable()",
+              @hatchPet="hatchPet",
+            )
+              span(slot="popoverContent")
+                div(v-if="pet.isOwned()")
+                  h4.popover-content-title {{ pet.name }}
+                div.hatchablePopover(v-else-if="pet.isHatchable()")
+                  h4.popover-content-title {{ pet.name }}
+                  div.popover-content-text(v-html="$t('haveHatchablePet', { potion: pet.potionName, egg: pet.eggName })")
+                  div.potionEggGroup
+                    div.potionEggBackground
+                      div(:class="'Pet_HatchingPotion_'+pet.potionKey")
+                    div.potionEggBackground
+                      div(:class="'Pet_Egg_'+pet.eggKey")
+
+              template(slot="itemBadge", scope="ctx")
+                starBadge(
+                  :selected="ctx.item.key === currentPet",
+                  :show="ctx.item.isOwned()",
+                  @click="selectPet(ctx.item)",
+                )
+
+        .btn.btn-show-more(
+          @click="viewOptions[petGroup.key].open = !viewOptions[petGroup.key].open",
+          v-if="viewOptions[petGroup.key].animalCount != 0"
+        ) {{ $t(viewOptions[petGroup.key].open ? 'showLessAnimals' : 'showAllAnimals', { color: petGroup.label, type: $t('pets')}) }}
+
+      h2
+        | {{ $t('mounts') }}
+        |
+        span.badge.badge-pill.badge-default {{countOwnedAnimals(mountGroups[0], 'mount')}}
+
+      div(
+        v-for="mountGroup in mountGroups",
+        v-if="viewOptions[mountGroup.key].selected",
+        :key="mountGroup.key"
+      )
+        h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
+
+        div.items
+          item(
+            v-for="mount in mounts(mountGroup, viewOptions[mountGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
+            :item="mount",
+            :itemContentClass="mount.isOwned() ? ('Mount_Icon_' + mount.key) : 'PixelPaw greyedOut'",
+            :key="mount.key",
+            :popoverPosition="'top'"
+          )
+            span(slot="popoverContent")
+              h4.popover-content-title {{ mount.name }}
+            template(slot="itemBadge", scope="ctx")
+              starBadge(
+                :selected="ctx.item.key === currentMount",
+                :show="mount.isOwned()",
+                @click="selectMount(ctx.item)",
+              )
+
+        .btn.btn-show-more(
+          @click="viewOptions[mountGroup.key].open = !viewOptions[mountGroup.key].open",
+          v-if="viewOptions[mountGroup.key].animalCount != 0"
+        ) {{ $t(viewOptions[mountGroup.key].open ? 'showLessAnimals' : 'showAllAnimals', { color: mountGroup.label, type: $t('mounts')}) }}
+
+      drawer(
+        :title="$t('quickInventory')",
+        :errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? $t('noFoodAvailable') : null"
+      )
+        div(slot="drawer-header")
+          .drawer-tab-container
+            .drawer-tab.text-right
+              a.drawer-tab-text(
+                @click="selectedDrawerTab = 0",
+                :class="{'drawer-tab-text-active': selectedDrawerTab === 0}",
+              ) {{ drawerTabs[0].label }}
+            .clearfix
+              .drawer-tab.float-left
+                a.drawer-tab-text(
+                  @click="selectedDrawerTab = 1",
+                  :class="{ 'drawer-tab-text-active': selectedDrawerTab === 1 }",
+                )  {{ drawerTabs[1].label }}
+
+              b-popover(
+                :triggers="['hover']",
+                :placement="'top'"
+              )
+                span(slot="content")
+                  .popover-content-text Test Popover
+
+                div.float-right What does my pet like to eat?
+
+
+        drawer-slider(
+          :items="drawerTabs[selectedDrawerTab].items",
+          :scrollButtonsVisible="hasDrawerTabItems(selectedDrawerTab)",
+          slot="drawer-slider",
+          :itemWidth=94,
+          :itemMargin=24,
+        )
+          template(slot="item", scope="ctx")
+            foodItem(
+              :item="ctx.item",
+              :itemCount="userItems.food[ctx.item.key]",
+            )
+
+    b-modal#welcome-modal(
+      :ok-only="true",
+      :ok-title="$t('gotIt')",
+      :visible="!hideDialog",
+      :hide-header="true"
+    )
+      div.content
+        div.npc_matt
+        h1.page-header(v-once) {{ $t('welcomeStable') }}
+        div.content-text(v-once) {{ $t('welcomeStableText') }}
+
+</template>
+
+<style lang="scss">
+
+  @import '~client/assets/scss/colors.scss';
+
+  .inventory-item-container {
+    padding: 20px;
+    border: 1px solid;
+    display: inline-block;
+  }
+
+  .stable .item .item-content.Pet {
+    position: absolute;
+    top: -28px;
+  }
+
+  .toggle-switch-container.hideMissing {
+    margin-top: 0;
+  }
+
+  .hatchablePopover {
+    width: 180px
+  }
+
+  .potionEggGroup {
+    margin: 0 auto;
+  }
+
+  .potionEggBackground {
+    display: inline-flex;
+    align-items: center;
+
+    width: 64px;
+    height: 64px;
+    border-radius: 2px;
+    background-color: #4e4a57;
+
+    &:first-child {
+      margin-right: 24px;
+    }
+
+    & div {
+      margin: 0 auto;
+    }
+  }
+
+  .GreyedOut {
+    opacity: 0.3;
+  }
+
+  .item.item-empty {
+    width: 94px;
+    height: 92px;
+    border-radius: 2px;
+    background-color: #edecee;
+  }
+
+  .npc_matt {
+    margin-bottom: 17px;
+  }
+
+  .stable {
+
+    .standard-page {
+      flex: 1;
+    }
+
+    .drawer-container {
+      // 3% padding + 252px sidebar width
+      left: calc(3% + 252px) !important;
+    }
+  }
+
+  .drawer-slider .items {
+    height: 114px;
+  }
+
+
+  div#welcome-modal {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    header, footer {
+      border: 0;
+    }
+
+    .npc_matt {
+      margin: 0 auto 21px auto;
+    }
+
+    .content {
+      text-align: center;
+
+      // the modal already has 15px padding
+      margin-left: 33px;
+      margin-right: 33px;
+      margin-top: 25px;
+    }
+
+    .content-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 1.43;
+
+      width: 400px;
+    }
+
+    .modal-footer {
+      justify-content: center;
+    }
+  }
+
+  .modal-backdrop.fade.show {
+    background-color: $purple-50;
+    opacity: 0.9;
+  }
+</style>
+
+<script>
+  import {mapState} from 'client/libs/store';
+
+  import bDropdown from 'bootstrap-vue/lib/components/dropdown';
+  import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
+  import bPopover from 'bootstrap-vue/lib/components/popover';
+  import bModal from 'bootstrap-vue/lib/components/modal';
+
+  import _each from 'lodash/each';
+  import _sortBy from 'lodash/sortBy';
+  import _take from 'lodash/take';
+  import _filter from 'lodash/filter';
+  import _drop from 'lodash/drop';
+  import _flatMap from 'lodash/flatMap';
+  import _throttle from 'lodash/throttle';
+
+  import Item from '../item';
+  import PetItem from './petItem';
+  import FoodItem from './foodItem';
+  import Drawer from 'client/components/inventory/drawer';
+  import toggleSwitch from 'client/components/ui/toggleSwitch';
+  import StarBadge from 'client/components/inventory/starBadge';
+  import CountBadge from './countBadge';
+  import DrawerSlider from './drawerSlider';
+
+  import ResizeDirective from 'client/directives/resize.directive';
+  import DragDropDirective from 'client/directives/dragdrop.directive';
+
+  // TODO Normalize special pets and mounts
+  // import Store from 'client/store';
+  // import deepFreeze from 'client/libs/deepFreeze';
+  // const specialMounts =
+
+  export default {
+    components: {
+      PetItem,
+      Item,
+      FoodItem,
+      Drawer,
+      bDropdown,
+      bDropdownItem,
+      bPopover,
+      bModal,
+      toggleSwitch,
+      StarBadge,
+      CountBadge,
+      DrawerSlider,
+    },
+    directives: {
+      resize: ResizeDirective,
+      drag: DragDropDirective,
+    },
+    data () {
+      return {
+        viewOptions: {},
+        hideMissing: false,
+
+        searchText: null,
+        searchTextThrottled: '',
+
+        // sort has the translation-keys as values
+        selectedSortBy: 'standard',
+        sortByItems: [
+          'standard',
+          'AZ',
+          'sortByColor',
+          'sortByHatchable',
+        ],
+
+        selectedDrawerTab: 0,
+        availableContentWidth: 0,
+      };
+    },
+    watch: {
+      searchText: _throttle(function throttleSearch () {
+        let search = this.searchText.toLowerCase();
+
+        this.searchTextThrottled = search;
+      }, 250),
+    },
+    computed: {
+      ...mapState({
+        content: 'content',
+        currentPet: 'user.data.items.currentPet',
+        currentMount: 'user.data.items.currentMount',
+        userItems: 'user.data.items',
+        hideDialog: 'user.data.flags.tutorial.common.mounts',
+      }),
+
+      petGroups () {
+        let petGroups = [
+          {
+            label: this.$t('filterByStandard'),
+            key: 'standardPets',
+            petSource: {
+              eggs: this.content.dropEggs,
+              potions: this.content.dropHatchingPotions,
+            },
+          },
+          {
+            label: this.$t('filterByMagicPotion'),
+            key: 'magicPets',
+            petSource: {
+              eggs: this.content.dropEggs,
+              potions: this.content.premiumHatchingPotions,
+            },
+          },
+          {
+            label: this.$t('filterByQuest'),
+            key: 'questPets',
+            petSource: {
+              eggs: this.content.questEggs,
+              potions: this.content.dropHatchingPotions,
+            },
+          },
+          {
+            label: this.$t('special'),
+            key: 'specialPets',
+            petSource: {
+              special: this.content.specialPets,
+            },
+            alwaysHideMissing: true,
+          },
+        ];
+
+        petGroups.map((petGroup) => {
+          this.$set(this.viewOptions, petGroup.key, {
+            selected: true,
+            open: false,
+            animalCount: 0,
+          });
+        });
+
+
+        return petGroups;
+      },
+      mountGroups () {
+        let mountGroups = [
+          {
+            label: this.$t('filterByStandard'),
+            key: 'standardMounts',
+            petSource: {
+              eggs: this.content.dropEggs,
+              potions: this.content.dropHatchingPotions,
+            },
+          },
+          {
+            label: this.$t('filterByMagicPotion'),
+            key: 'magicMounts',
+            petSource: {
+              eggs: this.content.dropEggs,
+              potions: this.content.premiumHatchingPotions,
+            },
+          },
+          {
+            label: this.$t('filterByQuest'),
+            key: 'questMounts',
+            petSource: {
+              eggs: this.content.questEggs,
+              potions: this.content.dropHatchingPotions,
+            },
+          },
+          {
+            label: this.$t('special'),
+            key: 'specialMounts',
+            petSource: {
+              special: this.content.specialMounts,
+            },
+            alwaysHideMissing: true,
+          },
+        ];
+
+        mountGroups.map((mountGroup) => {
+          this.$set(this.viewOptions, mountGroup.key, {
+            selected: true,
+            open: false,
+            animalCount: 0,
+          });
+        });
+
+
+        return mountGroups;
+      },
+
+      drawerTabs () {
+        return [
+          {
+            label: this.$t('food'),
+            items: _filter(this.content.food, f => {
+              return f.key !== 'Saddle' && this.userItems.food[f.key];
+            }),
+          },
+          {
+            label: this.$t('special'),
+            items: _filter(this.content.food, f => {
+              return f.key === 'Saddle' && this.userItems.food[f.key];
+            }),
+          },
+        ];
+      },
+    },
+    methods: {
+
+      getAnimalList (animalGroup, type) {
+        let key = animalGroup.key;
+
+        this.cachedAnimalList = this.cachedAnimalList || {};
+        if (this.cachedAnimalList[key]) {
+          return this.cachedAnimalList[key];
+        }
+
+        let animals = [];
+        let userItems = this.userItems;
+
+        switch (key) {
+          case 'specialPets':
+          case 'specialMounts': {
+            _each(animalGroup.petSource.special, (value, specialKey) => {
+              let eggKey = specialKey.split('-')[0];
+              let potionKey = specialKey.split('-')[1];
+
+              animals.push({
+                key: specialKey,
+                eggKey,
+                potionKey,
+                pet: this.content[`${type}Info`][specialKey].text(),
+                isOwned ()  {
+                  return [`${type}s`][this.key] > 0;
+                },
+                isHatchable () {
+                  return false;
+                },
+              });
+            });
+            break;
+          }
+
+          default: {
+            _each(animalGroup.petSource.eggs, (egg) => {
+              _each(animalGroup.petSource.potions, (potion) => {
+                let animalKey = `${egg.key}-${potion.key}`;
+
+                animals.push({
+                  key: animalKey,
+                  eggKey: egg.key,
+                  eggName: egg.text(),
+                  potionKey: potion.key,
+                  potionName: potion.text(),
+                  name: this.content[`${type}Info`][animalKey].text(),
+                  isOwned ()  {
+                    return userItems[`${type}s`][animalKey] > 0;
+                  },
+                  isHatchable () {
+                    return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
+                  },
+                });
+              });
+            });
+          }
+        }
+
+        this.cachedAnimalList[key] = animals;
+
+        return animals;
+      },
+
+      listAnimals (animalGroup, type, isOpen, hideMissing, sort, searchText, availableSpace) {
+        let animals = this.getAnimalList(animalGroup, type);
+        let isPetList = type === 'pet';
+        let withProgress = isPetList && animalGroup.key !== 'specialPets';
+
+        // 1. Filter
+        if (hideMissing || animalGroup.alwaysHideMissing) {
+          animals = _filter(animals, (a) => {
+            return a.isOwned();
+          });
+        }
+
+        if (searchText && searchText !== '') {
+          animals = _filter(animals, (a) => {
+            return a.name.toLowerCase().indexOf(searchText) !== -1;
+          });
+        }
+
+        // 2. Sort
+        switch (sort) {
+          case 'AZ':
+            animals = _sortBy(animals, ['pet']);
+            break;
+
+          case 'sortByColor':
+            animals = _sortBy(animals, ['potionName']);
+            break;
+
+          case 'sortByHatchable': {
+            if (isPetList) {
+              let sortFunc = (i) => {
+                return i.isHatchable() ? 0 : 1;
+              };
+
+              animals = _sortBy(animals, [sortFunc]);
+            }
+            break;
+          }
+        }
+
+        let animalRows = [];
+
+        let itemsPerRow = Math.floor(availableSpace / (94 + 24));
+
+        let rowsToShow = isOpen ? Math.ceil(animals.length / itemsPerRow) : 1;
+
+        for (let i = 0; i < rowsToShow; i++) {
+          let skipped = _drop(animals, i * itemsPerRow);
+          let row = _take(skipped, itemsPerRow);
+
+          let rowWithProgressData = withProgress ? _flatMap(row, (a) => {
+            let progress = this.userItems[`${type}s`][a.key];
+
+            return {
+              ...a,
+              progress,
+            };
+          }) : row;
+
+          animalRows.push(...rowWithProgressData);
+        }
+
+        this.viewOptions[animalGroup.key].animalCount = animals.length;
+
+        return animalRows;
+      },
+
+      countOwnedAnimals (animalGroup, type) {
+        let animals = this.getAnimalList(animalGroup, type);
+
+        let countAll = animals.length;
+        let countOwned = _filter(animals, (a) => {
+          return a.isOwned();
+        });
+
+        return `${countOwned.length}/${countAll}`;
+      },
+
+      pets (animalGroup, showAll, hideMissing, sortBy, searchText, availableSpace) {
+        return this.listAnimals(animalGroup, 'pet', showAll, hideMissing, sortBy, searchText, availableSpace);
+      },
+
+      mounts (animalGroup, showAll, hideMissing, sortBy, searchText, availableSpace) {
+        return this.listAnimals(animalGroup, 'mount', showAll, hideMissing, sortBy, searchText, availableSpace);
+      },
+
+      getPetItemClass (pet) {
+        if (pet.isOwned()) {
+          return `Pet Pet-${pet.key}`;
+        }
+
+        if (pet.isHatchable()) {
+          return 'PixelPaw';
+        }
+
+        return 'GreyedOut PixelPaw';
+      },
+
+      hasDrawerTabItems (index) {
+        return this.drawerTabs && this.drawerTabs[index].items.length !== 0;
+      },
+
+      // Actions
+      updateHideMissing (newVal) {
+        this.hideMissing = newVal;
+      },
+
+      selectPet (item) {
+        this.$store.dispatch('common:equip', {key: item.key, type: 'pet'});
+      },
+
+      selectMount (item) {
+        this.$store.dispatch('common:equip', {key: item.key, type: 'mount'});
+      },
+
+      hatchPet (pet) {
+        this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
+      },
+
+      onDragOver (ev, pet) {
+        if (this.userItems.mounts[pet.key]) {
+          ev.dropable = false;
+        }
+      },
+
+      onDrop (ev, pet) {
+        this.$store.dispatch('common:feed', {pet: pet.key, food: ev.draggingKey});
+      },
+    },
+  };
+</script>
diff --git a/website/client/components/inventory/stable/petItem.vue b/website/client/components/inventory/stable/petItem.vue
new file mode 100644
index 0000000000..9d071bf959
--- /dev/null
+++ b/website/client/components/inventory/stable/petItem.vue
@@ -0,0 +1,117 @@
+<template lang="pug">
+b-popover(
+  :triggers="[showPopover?'hover':'']",
+  :placement="popoverPosition",
+)
+  span(slot="content")
+    slot(name="popoverContent", :item="item")
+
+  .item-wrapper
+    .item(
+      :class="{'item-empty': emptyItem}",
+      @mouseup="holdStop",
+      @mouseleave="holdStop",
+      @mousedown.left="holdStart"
+    )
+      slot(name="itemBadge", :item="item")
+      span.item-content(:class="itemContentClass")
+      span.pet-progress-background(v-if="progress > 0")
+        div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
+      span.pet-progress-background(v-if="holdProgress > 0")
+        div.pet-progress-bar.hold(v-bind:style="{width: 100 * holdProgress/5 + '%' }")
+    span.item-label(v-if="label") {{ label }}
+</template>
+
+<style lang="scss">
+  .pet-progress-background {
+    width: 62px;
+    height: 4px;
+    background-color: #e1e0e3;
+    position: absolute;
+    bottom: 4px;
+    left: calc((100% - 62px) / 2);
+  }
+
+  .pet-progress-bar {
+    height: 4px;
+    background-color: #24cc8f;
+  }
+
+  .pet-progress-bar.hold {
+    background-color: #54c3cc;
+  }
+</style>
+
+<script>
+  import bPopover from 'bootstrap-vue/lib/components/popover';
+  import {mapState} from 'client/libs/store';
+
+  export default {
+    components: {
+      bPopover,
+    },
+    props: {
+      item: {
+        type: Object,
+      },
+      itemContentClass: {
+        type: String,
+      },
+      label: {
+        type: String,
+      },
+      progress: {
+        type: Number,
+        default: -1,
+      },
+      emptyItem: {
+        type: Boolean,
+        default: false,
+      },
+      popoverPosition: {
+        type: String,
+        default: 'bottom',
+      },
+      showPopover: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    data () {
+      return {
+        holdProgress: -1,
+      };
+    },
+    computed: {
+      ...mapState({
+        ATTRIBUTES: 'constants.ATTRIBUTES',
+      }),
+    },
+    methods: {
+      holdStart () {
+        let pet = this.item;
+        if (pet.isOwned() || !pet.isHatchable()) {
+          return;
+        }
+
+        this.holdProgress = 1;
+
+        this.currentHoldingTimer = setInterval(() => {
+          if (this.holdProgress === 5) {
+            this.holdStop();
+            this.$emit('hatchPet', pet);
+          }
+
+          this.holdProgress += 1;
+        }, 1000);
+      },
+
+      holdStop () {
+        if (this.currentHoldingTimer) {
+          clearInterval(this.currentHoldingTimer);
+          this.holdProgress = -1;
+        }
+      },
+    },
+  };
+</script>
diff --git a/website/client/components/static/home.vue b/website/client/components/static/home.vue
new file mode 100644
index 0000000000..c6e85f8eb9
--- /dev/null
+++ b/website/client/components/static/home.vue
@@ -0,0 +1,30 @@
+<template lang="pug">
+nav
+  router-link(:to="{name: 'login'}") Login
+  router-link(:to="{name: 'register'}") Register
+</template>
+
+
+<script>
+export default {
+  methods: {
+    play () {
+      // @TODO:
+      // Auth play click
+    },
+    // passwordReset (email) {
+    //   if(email == null || email.length == 0) {
+    //     alert(window.env.t('invalidEmail'));
+    //   } else {
+    //     $http.post(ApiUrl.get() + '/api/v3/user/reset-password', {email:email})
+    //       .success(function(){
+    //         alert(window.env.t('newPassSent'));
+    //       })
+    //       .error(function(data){
+    //           alert(data.err);
+    //       });
+    //     }
+    // },
+  },
+};
+</script>
diff --git a/website/client/components/task.vue b/website/client/components/task.vue
deleted file mode 100644
index 7256b4ba03..0000000000
--- a/website/client/components/task.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template lang="pug">
-li
-  ul
-    li 
-      strong {{task.text}}
-    li(v-if="task.type === 'habit'") up: {{task.up}}, down: {{task.down}}
-    li value: {{task.value}}
-    template(v-if="task.type === 'daily' || task.type === 'todo'")
-      li completed: {{task.completed}}
-      li
-        span checklist
-        ul 
-          li(v-for="checklist in task.checklist") {{checklist.text}}
-    template(v-if="task.type === 'daily'") 
-      li streak: {{task.streak}}
-      li repeat: {{task.repeat}}
-    li(v-if="task.type === 'todo'") due date: {{task.date}}
-    li attribute {{task.attribute}}
-    li difficulty {{task.priority}}
-    li tags {{getTagsFor(task)}}
-</template>
-
-<script>
-import { mapState, mapGetters } from 'client/libs/store';
-
-export default {
-  props: ['task'],
-  computed: {
-    ...mapState({user: 'user.data'}),
-    ...mapGetters({getTagsFor: 'tasks:getTagsFor'}),
-  },
-};
-</script>
\ No newline at end of file
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
new file mode 100644
index 0000000000..e26edd8455
--- /dev/null
+++ b/website/client/components/tasks/column.vue
@@ -0,0 +1,194 @@
+<template lang="pug">
+.tasks-column
+  .d-flex
+    h2.tasks-column-title(v-once) {{ $t(types[type].label) }}
+    .filters.d-flex.justify-content-end
+      .filter.small-text(
+        v-for="filter in types[type].filters",
+        :class="{active: activeFilter.label === filter.label}",
+        @click="activeFilter = filter",
+      ) {{ $t(filter.label) }}
+  .tasks-list
+    task(v-for="task in tasks[`${type}s`]", :key="task.id", :task="task", v-if="activeFilter.filter(task)")
+    .bottom-gradient
+    .column-background(v-if="isUser === true", :class="{'initial-description': tasks[`${type}s`].length === 0}")
+      .svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
+      h3(v-once) {{$t('theseAreYourTasks', {taskType: `${type}s`})}}
+      .small-text {{$t(`${type}sDesc`)}}
+</template>
+
+<style lang="scss" scoped>
+@import '~client/assets/scss/colors.scss';
+
+.tasks-column {
+  flex-grow: 1;
+}
+
+.tasks-list {
+  border-radius: 4px;
+  background: $gray-600;
+  padding: 8px; 
+  // not sure why but this is necessary or the last task will overflow the container
+  padding-bottom: 0.1px;
+  position: relative;
+  height: calc(100% - 64px);
+}
+
+.bottom-gradient {
+  position: absolute;
+  bottom: 0px;
+  left: -0px;
+  height: 42px;
+  background-image: linear-gradient(to bottom, rgba($gray-10, 0), rgba($gray-10, 0.24));
+  width: 100%;
+}
+
+.tasks-column-title {
+  margin-bottom: 8px;
+}
+
+.filters {
+  flex-grow: 1;
+}
+
+.filter {
+  font-weight: bold;
+  color: $gray-100;
+  font-style: normal;
+  padding: 8px;
+  cursor: pointer;
+
+  &:hover {
+    color: $purple-200;
+  }
+
+  &.active {
+    color: $purple-200;
+    border-bottom: 2px solid $purple-200;
+    padding-bottom: 6px;
+  }
+}
+
+.column-background {
+  position: absolute;
+  bottom: 32px;
+  z-index: 7;
+
+  &.initial-description {
+    top: 30%;
+  }
+
+  .svg-icon {
+    margin: 0 auto;
+    margin-bottom: 12px;
+  }
+
+  h3, .small-text {
+    color: $gray-300;
+    text-align: center;
+  }
+
+  h3 {
+    font-weight: normal;
+    margin-bottom: 4px;
+  }
+
+  .small-text {
+    font-style: normal;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+
+.icon-habit {
+  width: 30px;
+  height: 20px;
+}
+
+.icon-daily {
+  width: 30px;
+  height: 20px;
+}
+
+.icon-todo {
+  width: 20px;
+  height: 20px;
+}
+
+.icon-reward {
+  width: 26px;
+  height: 20px;
+}
+</style>
+
+<script>
+import Task from './task';
+import { mapState } from 'client/libs/store';
+import { shouldDo } from 'common/script/cron';
+import habitIcon from 'assets/svg/habit.svg';
+import dailyIcon from 'assets/svg/daily.svg';
+import todoIcon from 'assets/svg/todo.svg';
+import rewardIcon from 'assets/svg/reward.svg';
+
+export default {
+  components: {
+    Task,
+  },
+  props: ['type', 'isUser'],
+  data () {
+    const types = Object.freeze({
+      habit: {
+        label: 'habits',
+        filters: [
+          {label: 'all', filter: () => true, default: true},
+          {label: 'yellowred', filter: t => t.value < 1}, // weak
+          {label: 'greenblue', filter: t => t.value >= 1}, // strong
+        ],
+      },
+      daily: {
+        label: 'dailies',
+        filters: [
+          {label: 'all', filter: () => true, default: true},
+          {label: 'due', filter: t => !t.completed && shouldDo(new Date(), t, this.userPreferences)},
+          {label: 'notDue', filter: t => t.completed || !shouldDo(new Date(), t, this.userPreferences)},
+        ],
+      },
+      todo: {
+        label: 'todos',
+        filters: [
+          {label: 'remaining', filter: t => !t.completed, default: true}, // active
+          {label: 'scheduled', filter: t => !t.completed && t.date},
+          {label: 'complete2', filter: t => t.completed},
+        ],
+      },
+      reward: {
+        label: 'rewards',
+        filters: [
+          {label: 'all', filter: () => true, default: true},
+          {label: 'custom', filter: () => true}, // all rewards made by the user
+          {label: 'wishlist', filter: () => false}, // not user tasks
+        ],
+      },
+    });
+
+    const icons = Object.freeze({
+      habit: habitIcon,
+      daily: dailyIcon,
+      todo: todoIcon,
+      reward: rewardIcon,
+    });
+
+    return {
+      types,
+      activeFilter: types[this.type].filters.find(f => f.default === true),
+      icons,
+    };
+  },
+  computed: {
+    ...mapState({
+      tasks: 'tasks.data',
+      userPreferences: 'user.data.preferences',
+    }),
+  },
+};
+</script>
diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue
new file mode 100644
index 0000000000..f0348269c7
--- /dev/null
+++ b/website/client/components/tasks/task.vue
@@ -0,0 +1,293 @@
+<template lang="pug">
+.task.d-flex
+  // Habits left side control
+  .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.up")
+    .task-control.habit-control(:class="controlClass.up + '-control-habit'")
+      .svg-icon.positive(v-html="icons.positive")
+  // Dailies and todos left side control
+  .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="controlClass")
+    .task-control.daily-todo-control(:class="controlClass + '-control-daily-todo'")
+      .svg-icon.check(v-html="icons.check", v-if="task.completed")
+  // Task title, description and icons
+  .task-content(:class="contentClass")
+    h3.task-title(:class="{ 'has-notes': task.notes }") {{task.text}}
+    .task-notes.small-text {{task.notes}}
+    .icons.small-text.d-flex.align-items-center
+      .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
+        .svg-icon.calendar(v-html="icons.calendar")
+        span {{dueIn}}
+      .icons-right.d-flex.justify-content-end
+        .d-flex.align-items-center(v-if="showStreak")
+          .svg-icon.streak(v-html="icons.streak")
+          span(v-if="task.type === 'daily'") {{task.streak}}
+          span(v-if="task.type === 'habit'")
+            span.m-0(v-if="task.up") +{{task.counterUp}}
+            span.m-0(v-if="task.up && task.down") &nbsp;|&nbsp;
+            span.m-0(v-if="task.down") -{{task.counterDown}}
+        .d-flex.align-items-center(v-if="task.challenge && task.challenge.id")
+          .svg-icon.challenge(v-html="icons.challenge")
+        b-popover.tags-popover.no-span-margin(
+          :triggers="['hover']",
+          :placement="'bottom'",
+          :popover-style="{'max-width': '1000px'}",
+        )
+          .d-flex.align-items-center(slot="content")
+            .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
+            .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
+          .d-flex.align-items-center(v-if="task.tags && task.tags.length > 0")
+            .svg-icon.tags(v-html="icons.tags")
+
+  // Habits right side control
+  .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
+    .task-control.habit-control(:class="controlClass.down + '-control-habit'")
+      .svg-icon.negative(v-html="icons.negative")
+  // Rewards right side control
+  .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass")
+    .svg-icon(v-html="icons.gold")
+    .small-text {{task.value}}
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+.task {
+  margin-bottom: 8px;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  background: $white;
+  border-radius: 2px;
+  z-index: 9;
+  position: relative;
+}
+
+.task-title {
+  margin-bottom: 8px;
+  color: $gray-10;
+  font-weight: normal;
+
+  &.has-notes {
+    margin-bottom: 0px;
+  }
+}
+
+.task-notes {
+  color: $gray-100;
+  font-style: normal;
+  margin-bottom: 4px;
+}
+
+.task-content {
+  padding: 8px;
+  flex-grow: 1;
+}
+
+.icons {
+  color: $gray-300;
+  font-style: normal;
+
+  &-right {
+    flex-grow: 1;
+  }
+}
+
+.icons-right .svg-icon {
+  margin-left: 8px;
+}
+
+.icons span {
+  margin-left: 4px;
+}
+
+.no-span-margin span {
+  margin-left: 0px !important; 
+}
+
+.svg-icon.streak {
+  width: 11.6px;
+  height: 7.1px;
+}
+
+.tags.svg-icon, .calendar.svg-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.tags:hover {
+  color: $purple-500;
+}
+
+.due-overdue {
+  color: $red-50;
+}
+
+.calendar.svg-icon {
+  margin-right: 2px;
+  margin-top: -2px;
+}
+
+.challenge.svg-icon {
+  width: 14px;
+  height: 12px;
+}
+
+.check.svg-icon {
+  width: 12.3px;
+  height: 9.8px;
+  margin: 8px;
+}
+
+.left-control, .right-control {
+  width: 40px;
+  flex-shrink: 0;
+}
+
+.left-control {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.right-control {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.task-control {
+  width: 28px;
+  height: 28px;
+}
+
+.habit-control {
+  border-radius: 100px;
+  color: $white;
+
+  .svg-icon {
+    width: 10px;
+    margin: 0 auto;
+  }
+
+  .positive {
+    margin-top: 9px;
+  }
+
+  .negative {
+    margin-top: 13px;
+  }
+}
+
+.daily-todo-control {
+  border-radius: 2px;
+}
+
+.reward-control {
+  flex-direction: column;
+  padding-top: 16px;
+  padding-bottom: 12px;
+
+  .svg-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .small-text {
+    margin-top: 4px;
+    color: $yellow-10;
+  }
+}
+</style>
+
+<style lang="scss"> // not working as scoped css
+@import '~client/assets/scss/colors.scss';
+
+.tags-popover {
+  // TODO fix padding, see https://github.com/bootstrap-vue/bootstrap-vue/issues/559#issuecomment-311150335
+  white-space: nowrap;
+}
+
+.tags-popover-title {
+  margin-right: 4px;
+  display: block;
+  float: left;
+}
+
+.tag-label {
+  display: block;
+  float: left;
+  margin-left: 4px;
+  border-radius: 100px;
+  background-color: $gray-50;
+  padding: 4px 10px;
+  color: $gray-300;
+  white-space: nowrap;
+} 
+</style>
+
+<script>
+import { mapState, mapGetters } from 'client/libs/store';
+import moment from 'moment';
+
+import positiveIcon from 'assets/svg/positive.svg';
+import negativeIcon from 'assets/svg/negative.svg';
+import goldIcon from 'assets/svg/gold.svg';
+import streakIcon from 'assets/svg/streak.svg';
+import calendarIcon from 'assets/svg/calendar.svg';
+import challengeIcon from 'assets/svg/challenge.svg';
+import tagsIcon from 'assets/svg/tags.svg';
+import checkIcon from 'assets/svg/check.svg';
+import bPopover from 'bootstrap-vue/lib/components/popover';
+
+export default {
+  components: {
+    bPopover,
+  },
+  props: ['task'],
+  data () {
+    return {
+      icons: Object.freeze({
+        positive: positiveIcon,
+        negative: negativeIcon,
+        gold: goldIcon,
+        streak: streakIcon,
+        calendar: calendarIcon,
+        challenge: challengeIcon,
+        tags: tagsIcon,
+        check: checkIcon,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    ...mapGetters({
+      getTagsFor: 'tasks:getTagsFor',
+      getTaskClasses: 'tasks:getTaskClasses',
+    }),
+    leftControl () {
+      const task = this.task;
+      if (task.type === 'reward') return false;
+      return true;
+    },
+    rightControl () {
+      const task = this.task;
+      if (task.type === 'reward') return true;
+      if (task.type === 'habit') return true;
+      return false;
+    },
+    controlClass () {
+      return this.getTaskClasses(this.task, 'control');
+    },
+    contentClass () {
+      return this.getTaskClasses(this.task, 'content');
+    },
+    showStreak () {
+      if (this.task.streak !== undefined) return true;
+      if (this.task.type === 'habit' && (this.task.up || this.task.down)) return true;
+      return false;
+    },
+    isDueOverdue () {
+      return moment().diff(this.task.date, 'days') >= 0;
+    },
+    dueIn () {
+      const dueIn = moment().to(this.task.date);
+      return this.$t('dueIn', {dueIn});
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/website/client/components/tasks/user.vue b/website/client/components/tasks/user.vue
new file mode 100644
index 0000000000..41535f70a2
--- /dev/null
+++ b/website/client/components/tasks/user.vue
@@ -0,0 +1,56 @@
+<template lang="pug">
+.row.user-tasks-page
+  .col-12
+    .row.tasks-navigation
+      .col-4.offset-4
+        input.form-control.input-search(type="text", :placeholder="$t('search')")
+      .col-1.offset-3
+        button.btn.btn-success(v-once) 
+          .svg-icon.positive(v-html="icons.positive")
+          | {{ $t('create') }}
+    .row.tasks-columns
+      task-column.col-3(v-for="column in columns", :type="column", :key="column", :isUser="true")
+</template>
+
+<style lang="scss" scoped>
+@import '~client/assets/scss/colors.scss';
+
+.user-tasks-page {
+  padding-top: 31px;
+}
+
+.tasks-navigation {
+  margin-bottom: 40px;
+}
+
+.positive {
+  display: inline-block;
+  width: 10px;
+  color: $green-500;
+  margin-right: 8px;
+  padding-top: 6px;
+}
+
+.tasks-columns {
+  height: 100%;
+}
+</style>
+
+<script>
+import Column from './column';
+import positiveIcon from 'assets/svg/positive.svg';
+
+export default {
+  components: {
+    TaskColumn: Column,
+  },
+  data () {
+    return {
+      columns: ['habit', 'daily', 'todo', 'reward'],
+      icons: Object.freeze({
+        positive: positiveIcon,
+      }),
+    };
+  },
+};
+</script>
diff --git a/website/client/components/ui/toggleSwitch.vue b/website/client/components/ui/toggleSwitch.vue
index d1eda4074b..779f296aa3 100644
--- a/website/client/components/ui/toggleSwitch.vue
+++ b/website/client/components/ui/toggleSwitch.vue
@@ -4,8 +4,9 @@
   .toggle-switch.float-left
     input.toggle-switch-checkbox(
       type='checkbox', :id="id",
-      @change="$emit('change', $event.target.checked)",
-      :checked="checked",
+      @change="handleChange",
+      :checked="isChecked",
+      :value="value",
     )
     label.toggle-switch-label(:for="id")
       span.toggle-switch-inner
@@ -13,88 +14,88 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
 
-.toggle-switch-container {
-  margin-top: 6px;
-}
+  .toggle-switch-container {
+    margin-top: 6px;
+  }
 
-.toggle-switch {
-  position: relative;
-  width: 40px;
-  user-select: none;
-  margin-left: 9px;
-}
+  .toggle-switch {
+    position: relative;
+    width: 40px;
+    user-select: none;
+    margin-left: 9px;
+  }
 
-.toggle-switch-description {
-  height: 20px;
-  border-bottom: 1px dashed $gray-200;
-}
+  .toggle-switch-description {
+    height: 20px;
+    border-bottom: 1px dashed $gray-200;
+  }
 
-.toggle-switch-checkbox {
-  display: none;
-}
+  .toggle-switch-checkbox {
+    display: none;
+  }
 
-.toggle-switch-label {
-  display: block;
-  overflow: hidden;
-  cursor: pointer;
-  border-radius: 100px;
-  margin-bottom: 0px;
-  margin-top: 3px;
-}
+  .toggle-switch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 100px;
+    margin-bottom: 0px;
+    margin-top: 3px;
+  }
 
-.toggle-switch-inner {
-  display: block;
-  width: 200%;
-  margin-left: -100%;
-  transition: margin 0.3s ease-in 0s;
-}
+  .toggle-switch-inner {
+    display: block;
+    width: 200%;
+    margin-left: -100%;
+    transition: margin 0.3s ease-in 0s;
+  }
 
-.toggle-switch-inner:before, .toggle-switch-inner:after {
-  display: block;
-  float: left;
-  width: 50%;
-  height: 16px;
-  padding: 0;
-}
+  .toggle-switch-inner:before, .toggle-switch-inner:after {
+    display: block;
+    float: left;
+    width: 50%;
+    height: 16px;
+    padding: 0;
+  }
 
-.toggle-switch-inner:before {
-  content: "";
-  padding-left: 10px;
-  background-color: $purple-400;
-}
+  .toggle-switch-inner:before {
+    content: "";
+    padding-left: 10px;
+    background-color: $purple-400;
+  }
 
-.toggle-switch-inner:after {
-  content: "";
-  padding-right: 10px;
-  background-color: $gray-200;
-  text-align: right;
-}
+  .toggle-switch-inner:after {
+    content: "";
+    padding-right: 10px;
+    background-color: $gray-200;
+    text-align: right;
+  }
 
-.toggle-switch-switch {
-  box-shadow: 0 1px 2px 0 rgba($black, 0.32);
-  display: block;
-  width: 20px;
-  margin: -2px;
-  margin-top: 1px;
-  height: 20px;
-  background: $white;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 22px;
-  border-radius: 100px;
-  transition: all 0.3s ease-in 0s;
-}
+  .toggle-switch-switch {
+    box-shadow: 0 1px 2px 0 rgba($black, 0.32);
+    display: block;
+    width: 20px;
+    margin: -2px;
+    margin-top: 1px;
+    height: 20px;
+    background: $white;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 22px;
+    border-radius: 100px;
+    transition: all 0.3s ease-in 0s;
+  }
 
-.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
-  margin-left: 0;
-}
+  .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
+    margin-left: 0;
+  }
 
-.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
-  right: 0px;
-}
+  .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
+    right: 0px;
+  }
 </style>
 
 <script>
@@ -105,7 +106,14 @@ export default {
       id: Math.random(),
     };
   },
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
   props: {
+    value: {
+      default: true,
+    },
     label: {
       type: String,
       required: true,
@@ -115,5 +123,15 @@ export default {
       default: false,
     },
   },
+  computed: {
+    isChecked () {
+      return this.checked === this.value;
+    },
+  },
+  methods: {
+    handleChange ({ target: { checked } }) {
+      this.$emit('change', checked ? this.value : this.uncheckedValue);
+    },
+  },
 };
 </script>
diff --git a/website/client/components/userTasks.vue b/website/client/components/userTasks.vue
deleted file mode 100644
index 3a46db218e..0000000000
--- a/website/client/components/userTasks.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template lang="pug">
-.row
-  .col-12
-    .row
-      .col-3.p-4
-        h3 Input
-        input.form-control(type="text", placeholder="Placeholder")
-      .col-3.p-4
-        h3 Input Disabled
-        input.form-control(type="text", placeholder="Placeholder", disabled)
-      .col-3.p-4
-        h3 Input With Icon
-        input.form-control.input-search(type="text", placeholder="Placeholder")
-      .col-3.p-4
-        h3 Input With Icon Disabled
-        input.form-control.input-search(type="text", placeholder="Placeholder", disabled)
-      .col-3.p-4
-        h3 Input Valid
-        input.form-control.input-valid(type="text", placeholder="Placeholder")
-      .col-3.p-4
-        h3 Input Invalid
-        input.form-control.input-invalid(type="text", placeholder="Placeholder")
-    .row
-      .col-6.p-4
-        h3 Textarea
-        textarea.form-control(rows="5", cols="50")
-      .col-6.p-4
-        h3 Textarea Disabled
-        textarea.form-control(disabled, rows="10", cols="50")
-    .row
-      .col-2.p-4
-        toggleSwitch(label="Toggle Switch")
-    .row
-      .col-3.p-4
-        h3 Checkbox
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type='checkbox')
-          span.custom-control-indicator
-          span.custom-control-description Check this custom checkbox
-      .col-3.p-4
-        h3 Checkbox Disabled Checked
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type='checkbox', disabled, checked)
-          span.custom-control-indicator
-          span.custom-control-description Check this custom checkbox
-      .col-3.p-4
-        h3 Checkbox Disabled Not Checked
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type='checkbox', disabled)
-          span.custom-control-indicator
-          span.custom-control-description Check this custom checkbox
-      .col-6.p-4
-        h3 Radio Button
-        form
-          label.custom-control.custom-radio
-            input#radio1.custom-control-input(name='radio', type='radio')
-            span.custom-control-indicator
-            span.custom-control-description Toggle this custom radio
-          label.custom-control.custom-radio
-            input#radio2.custom-control-input(name='radio', type='radio')
-            span.custom-control-indicator
-            span.custom-control-description Toggle this custom radio
-      .col-3.p-4
-        h3 Radio Button Disabled Checked
-        form
-          label.custom-control.custom-radio
-            input#radio3.custom-control-input(name='radio', type='radio', disabled, checked)
-            span.custom-control-indicator
-            span.custom-control-description Toggle this custom radio
-      .col-3.p-4
-        h3 Radio Button Disabled Not Checked
-        form
-          label.custom-control.custom-radio
-            input#radio3.custom-control-input(name='radio', type='radio', disabled)
-            span.custom-control-indicator
-            span.custom-control-description Toggle this custom radio
-    .row
-      .col-3.p-4
-        h3 Main Button
-        button.btn.btn-primary Button
-      .col-3.p-4
-        h3 Secondary Button
-        button.btn.btn-secondary Button
-      .col-3.p-4
-        h3 Green Button
-        button.btn.btn-success Button
-      .col-3.p-4
-        h3 Blue Button
-        button.btn.btn-info Button
-      .col-3.p-4
-        h3 Red Button
-        button.btn.btn-danger Button
-    .row
-      .col-3.p-4
-        h3 Main Button Disabled
-        button.btn.btn-primary(disabled=true) Button
-      .col-3.p-4
-        h3 Secondary Button Disabled
-        button.btn.btn-secondary(disabled=true) Button
-      .col-3.p-4
-        h3 Green Button Disabled
-        button.btn.btn-success(disabled=true) Button
-      .col-3.p-4
-        h3 Blue Button Disabled
-        button.btn.btn-info(disabled=true) Button
-      .col-3.p-4
-        h3 Red Button Disabled
-        button.btn.btn-danger(disabled=true) Button
-    .row
-      .col-6.p-4
-        h3 Dropdown Menu
-        b-dropdown(text="Menu", right=false)
-          b-dropdown-item(href="#") Menu item 1
-          b-dropdown-item(href="#") Menu item 2
-          b-dropdown-item(href="#") Menu item 3
-          b-dropdown-item(href="#") Menu item 4
-      .col-6.p-4
-        h3 Dropdown Menu Disabled
-        b-dropdown(text="Menu", disabled)
-          b-dropdown-item(href="#") Menu item 1
-          b-dropdown-item(href="#") Menu item 2
-          b-dropdown-item(href="#") Menu item 3
-          b-dropdown-item(href="#") Menu item 4
-    .row
-      .col-6.p-4
-        h1 Heading 1
-        h2 Heading 2
-        h3 Heading 3
-        h4 Heading 4
-      .col-6.p-4
-        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula, purus sit amet sodales pharetra, ipsum ipsum mollis orci, id pharetra velit diam et dui. Sed placerat ipsum eget pharetra rutrum. Ut vitae rutrum lacus, eu imperdiet velit. Pellentesque eu velit cursus, scelerisque dui quis, dapibus magna. Vestibulum molestie sed sapien et ultricies. Nam porta ipsum leo, non congue magna vestibulum a. Etiam dictum felis sit amet augue varius tincidunt. Sed eget urna auctor, convallis felis in, pretium justo. Curabitur aliquet, ligula id tincidunt ullamcorper, orci lorem pharetra neque, in ornare arcu magna accumsan arcu. Maecenas dignissim lorem sed eros accumsan scelerisque.
-        p.small-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula, purus sit amet sodales pharetra, ipsum ipsum mollis orci, id pharetra velit diam et dui.
-    .row
-      .col(v-for="taskType in tasksTypes")
-        h3 {{taskType}}s
-        ul
-          task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")
-</template>
-
-<script>
-import Task from './task';
-import { mapState } from 'client/libs/store';
-import bDropdown from 'bootstrap-vue/lib/components/dropdown';
-import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
-import toggleSwitch from 'client/components/ui/toggleSwitch';
-
-export default {
-  components: {
-    Task,
-    bDropdown,
-    bDropdownItem,
-    toggleSwitch,
-  },
-  data () {
-    return {
-      tasksTypes: ['habit', 'daily', 'todo', 'reward'],
-    };
-  },
-  computed: {
-    ...mapState({tasks: 'tasks.data'}),
-  },
-};
-</script>
diff --git a/website/client/directives/directive.common.js b/website/client/directives/directive.common.js
new file mode 100644
index 0000000000..151bc76870
--- /dev/null
+++ b/website/client/directives/directive.common.js
@@ -0,0 +1,8 @@
+// https://stackoverflow.com/a/40720172/1298154
+export const emit = (vnode, emitName, data) => {
+  let handlers = vnode.data && vnode.data.on || vnode.componentOptions && vnode.componentOptions.listeners;
+
+  if (handlers && handlers[emitName]) {
+    handlers[emitName].fns(data);
+  }
+};
diff --git a/website/client/directives/dragdrop.directive.js b/website/client/directives/dragdrop.directive.js
new file mode 100644
index 0000000000..8d5ed6029d
--- /dev/null
+++ b/website/client/directives/dragdrop.directive.js
@@ -0,0 +1,63 @@
+import {emit} from './directive.common';
+
+import _keys from 'lodash/keys';
+import _without from 'lodash/without';
+
+/**
+ * DRAG_GROUP is a static custom value
+ * KEY_OF_ITEM
+ *
+ * v-drag.DRAG_GROUP="KEY_OF_ITEM"
+ * v-drag.drop.DRAG_GROUP="KEY_OF_ITEM" @dropped="callback" @dragover="optional"
+ */
+
+const DROPPED_EVENT_NAME = 'dropped';
+const DRAGOVER_EVENT_NAME = 'dragover';
+
+export default {
+  bind (el, binding, vnode) {
+    el.isDropHandler = binding.modifiers.drop === true;
+    el.dragGroup = _without(_keys(binding.modifiers), 'drop')[0];
+    el.key = binding.value;
+
+    if (!el.isDropHandler) {
+      el.draggable = true;
+      el.handleDrag = (ev) => {
+        ev.dataTransfer.setData('KEY', binding.value);
+      };
+      el.addEventListener('dragstart', el.handleDrag);
+    } else {
+      el.handleDragOver = (ev) => {
+        let dragOverEventData = {
+          dropable: true,
+          draggingKey: ev.dataTransfer.getData('KEY'),
+        };
+
+        emit(vnode, DRAGOVER_EVENT_NAME, dragOverEventData);
+
+        if (dragOverEventData.dropable) {
+          ev.preventDefault();
+        }
+      };
+      el.handleDrop = (ev) => {
+        let dropEventData = {
+          draggingKey: ev.dataTransfer.getData('KEY'),
+        };
+
+        emit(vnode, DROPPED_EVENT_NAME, dropEventData);
+      };
+
+      el.addEventListener('dragover', el.handleDragOver);
+      el.addEventListener('drop', el.handleDrop);
+    }
+  },
+
+  unbind (el) {
+    if (!el.isDropHandler) {
+      el.removeEventListener('drag', el.handleDrag);
+    } else {
+      el.removeEventListener('dragover', el.handleDragOver);
+      el.removeEventListener('drop', el.handleDrop);
+    }
+  },
+};
diff --git a/website/client/directives/resize.directive.js b/website/client/directives/resize.directive.js
new file mode 100644
index 0000000000..2cd14deb27
--- /dev/null
+++ b/website/client/directives/resize.directive.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+
+import _throttle from 'lodash/throttle';
+
+import { emit } from './directive.common';
+
+/**
+ * v-resize="throttleTimeout", @resized="callback()"
+ */
+
+const EVENT_NAME = 'resized';
+
+export default {
+  bind (el, binding, vnode) {
+    el.handleWindowResize = _throttle(() => {
+      emit(vnode, EVENT_NAME, {
+        width: el.clientWidth,
+        height: el.clientHeight,
+      });
+    }, binding.value);
+
+    window.addEventListener('resize', el.handleWindowResize);
+
+    // send the first width
+    Vue.nextTick(el.handleWindowResize);
+  },
+
+  unbind (el) {
+    window.removeEventListener('resize', el.handleWindowResize);
+  },
+};
diff --git a/website/client/index.html b/website/client/index.html
index 6eac2d4fda..204f884234 100644
--- a/website/client/index.html
+++ b/website/client/index.html
@@ -4,14 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Habitica</title>
-    <!-- TODO load google fonts separately as @import is slow, find alternative -->
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:400,400i,700,700i" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
   </head>
   <body>
-    <!-- #loading-screen needs to be rendered before vue, will be deleted once app is loaded -->
-    <div id="loading-screen" class="h-100 w-100 d-flex justify-content-center align-items-center">
-      <p>Loading...</p>
-    </div>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
diff --git a/website/client/libs/asyncResource.js b/website/client/libs/asyncResource.js
index 7d2ba8e394..852cac06e5 100644
--- a/website/client/libs/asyncResource.js
+++ b/website/client/libs/asyncResource.js
@@ -36,8 +36,11 @@ export function loadAsyncResource ({store, path, url, deserialize, forceLoad = f
   } else if (loadingStatus === 'NOT_LOADED' || loadingStatus === 'LOADED' && forceLoad) {
     return axios.get(url).then(response => { // TODO support more params
       resource.loadingStatus = 'LOADED';
-      resource.data = deserialize(response);
-      return resource;
+      // deserialize can be a promise
+      return Promise.resolve(deserialize(response)).then(deserializedData => {
+        resource.data = deserializedData;
+        return resource;
+      });
     });
   } else {
     return Promise.reject(new Error(`Invalid loading status "${loadingStatus} for resource at "${path}".`));
diff --git a/website/client/main.js b/website/client/main.js
index 77a2f4f8f1..4ec81e1669 100644
--- a/website/client/main.js
+++ b/website/client/main.js
@@ -3,10 +3,9 @@
 require('babel-polyfill');
 
 import Vue from 'vue';
-import axios from 'axios';
 import AppComponent from './app';
 import router from './router';
-import generateStore from './store';
+import getStore from './store';
 import StoreModule from './libs/store';
 import './filters/registerGlobals';
 import i18n from './libs/i18n';
@@ -26,43 +25,9 @@ Vue.config.productionTip = IS_PRODUCTION;
 Vue.use(i18n);
 Vue.use(StoreModule);
 
-// TODO just until we have proper authentication
-let authSettings = localStorage.getItem('habit-mobile-settings');
-
-if (authSettings) {
-  authSettings = JSON.parse(authSettings);
-  axios.defaults.headers.common['x-api-user'] = authSettings.auth.apiId;
-  axios.defaults.headers.common['x-api-key'] = authSettings.auth.apiToken;
-}
-
 export default new Vue({
+  el: '#app',
   router,
-  store: generateStore(),
+  store: getStore(),
   render: h => h(AppComponent),
-  beforeCreate () {
-    // Setup listener for title
-    this.$store.watch(state => state.title, (title) => {
-      document.title = title;
-    });
-
-    // Mount the app when user and tasks are loaded
-    const userDataWatcher = this.$store.watch(state => [state.user.data, state.tasks.data], ([user, tasks]) => {
-      if (user && user._id && Array.isArray(tasks)) {
-        userDataWatcher(); // remove the watcher
-        this.$mount('#app');
-      }
-    });
-
-    // Load the user and the user tasks
-    Promise.all([
-      this.$store.dispatch('user:fetch'),
-      this.$store.dispatch('tasks:fetchUserTasks'),
-    ]).catch((err) => {
-      console.error('Impossible to fetch user. Copy into localStorage a valid habit-mobile-settings object.', err); // eslint-disable-line no-console
-    });
-  },
-  mounted () { // Remove the loading screen when the app is mounted
-    let loadingScreen = document.getElementById('loading-screen');
-    if (loadingScreen) document.body.removeChild(loadingScreen);
-  },
-});
\ No newline at end of file
+});
diff --git a/website/client/readme.md b/website/client/readme.md
index f553bbd3a4..cfc8206c1b 100644
--- a/website/client/readme.md
+++ b/website/client/readme.md
@@ -1,20 +1,20 @@
-#Running
- - Open a terminal and type `npm run client:dev`
- - Open a second terminal and type `npm start`
-
-#Preparation Reading
-- Vue 2 (https://vuejs.org)
-
-- Webpack (https://webpack.github.io/) is the build system and it includes plugins for code transformation, right now we have: BabelJS for ES6 transpilation, eslint for code style, less and postcss for css compilation. The code comes from https://github.com/vuejs-templates/webpack which is a Webpack template for Vue, with some small modifications to adapt it to our use case. Docs http://vuejs-templates.github.io/webpack/
-
-- We’re using `.vue` files that make it possible to have HTML, JS and CSS for each component together in a single location. They’re implemented as a webpack plugin and the docs can be found here http://vue-loader.vuejs.org/en/
-
-- SemanticUI is the UI framework http://semantic-ui.com/. So far I’ve only used the CSS part, it also has JS plugins but I’ve yet to use them. It supports theming so if it’s not too difficult we’ll want to customize the base theme with our own styles instead of writing CSS rules to override the original styling.
-
-The code is in `/website/client`. We’re using something very similar to Vuex (equivalent of React’s Redux) for state management http://vuex.vuejs.org/en/index.html
-
-The API is almost the same except that we don’t use mutations but only actions because it would make it difficult to work with common code
-
-The project is developed directly in the `develop` branch as long as we’ll be able to avoid splitting it into a different branch.
-
-So far most of the work has been on the template, so there’s no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: it’s basically a Flux implementation: there’s a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.
+#Running
+ - Open a terminal and type `npm run client:dev`
+ - Open a second terminal and type `npm start`
+
+#Preparation Reading
+- Vue 2 (https://vuejs.org)
+
+- Webpack (https://webpack.github.io/) is the build system and it includes plugins for code transformation, right now we have: BabelJS for ES6 transpilation, eslint for code style, less and postcss for css compilation. The code comes from https://github.com/vuejs-templates/webpack which is a Webpack template for Vue, with some small modifications to adapt it to our use case. Docs http://vuejs-templates.github.io/webpack/
+
+- We’re using `.vue` files that make it possible to have HTML, JS and CSS for each component together in a single location. They’re implemented as a webpack plugin and the docs can be found here http://vue-loader.vuejs.org/en/
+
+- SemanticUI is the UI framework http://semantic-ui.com/. So far I’ve only used the CSS part, it also has JS plugins but I’ve yet to use them. It supports theming so if it’s not too difficult we’ll want to customize the base theme with our own styles instead of writing CSS rules to override the original styling.
+
+The code is in `/website/client`. We’re using something very similar to Vuex (equivalent of React’s Redux) for state management http://vuex.vuejs.org/en/index.html
+
+The API is almost the same except that we don’t use mutations but only actions because it would make it difficult to work with common code
+
+The project is developed directly in the `develop` branch as long as we’ll be able to avoid splitting it into a different branch.
+
+So far most of the work has been on the template, so there’s no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: it’s basically a Flux implementation: there’s a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.
diff --git a/website/client/router.js b/website/client/router.js
index a835643494..aa97d8b968 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import getStore from 'client/store';
 
 import EmptyView from './components/emptyView';
 
@@ -7,19 +8,23 @@ import EmptyView from './components/emptyView';
 import ParentPage from './components/parentPage';
 import Page from './components/page';
 
-// Tasks
-import UserTasks from './components/userTasks';
+// Static Pages
+const Home = () => import(/* webpackChunkName: "static" */'./components/static/home');
+const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/auth/registerLogin');
 
-// Except for tasks that are always loaded all the other main level
+// All the main level
 // components are loaded in separate webpack chunks.
 // See https://webpack.js.org/guides/code-splitting-async/
 // for docs
 
+// Tasks
+const UserTasks = () => import(/* webpackChunkName: "userTasks" */'./components/tasks/user');
+
 // Inventory
 const InventoryContainer = () => import(/* webpackChunkName: "inventory" */'./components/inventory/index');
 const ItemsPage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/items/index');
 const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/equipment/index');
-const StablePage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/stable');
+const StablePage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/stable/index');
 
 // Social
 const InboxPage = () => import(/* webpackChunkName: "inbox" */ './components/social/inbox/index');
@@ -27,14 +32,14 @@ const InboxConversationPage = () => import(/* webpackChunkName: "inbox" */ './co
 
 // Guilds
 const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/guilds/index');
-const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
+// const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
 const MyGuilds = () => import(/* webpackChunkName: "guilds" */ './components/guilds/myGuilds');
 const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/discovery');
 const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/guild');
 
 Vue.use(VueRouter);
 
-export default new VueRouter({
+const router = new VueRouter({
   mode: 'history',
   base: process.env.NODE_ENV === 'production' ? '/new-app' : __dirname, // eslint-disable-line no-process-env
   linkActiveClass: 'active',
@@ -43,7 +48,11 @@ export default new VueRouter({
   scrollBehavior () {
     return { x: 0, y: 0 };
   },
+  // requiresLogin is true by default, isStatic false
   routes: [
+    { name: 'home', path: '/home', component: Home, meta: {requiresLogin: false} },
+    { name: 'register', path: '/register', component: RegisterLogin, meta: {requiresLogin: false} },
+    { name: 'login', path: '/login', component: RegisterLogin, meta: {requiresLogin: false} },
     { name: 'tasks', path: '/', component: UserTasks },
     {
       path: '/inventory',
@@ -55,11 +64,12 @@ export default new VueRouter({
       ],
     },
     { name: 'shops', path: '/shops', component: Page },
+    { name: 'party', path: '/party', component: GuildPage },
     {
       path: '/guilds',
       component: GuildIndex,
       children: [
-        { name: 'tavern', path: 'tavern', component: TavernPage },
+        { name: 'tavern', path: 'tavern', component: GuildPage },
         {
           name: 'myGuilds',
           path: 'myGuilds',
@@ -79,7 +89,6 @@ export default new VueRouter({
       ],
     },
     { name: 'challenges', path: 'challenges', component: Page },
-    { name: 'party', path: 'party', component: Page },
     {
       path: '/user',
       component: ParentPage,
@@ -108,3 +117,22 @@ export default new VueRouter({
     },
   ],
 });
+
+const store = getStore();
+
+router.beforeEach(function routerGuard (to, from, next) {
+  const isUserLoggedIn = store.state.isUserLoggedIn;
+  const routeRequiresLogin = to.meta.requiresLogin !== false;
+
+  if (!isUserLoggedIn && routeRequiresLogin) {
+    // Redirect to the login page unless the user is trying to reach the
+    // root of the website, in which case show the home page.
+    // TODO when redirecting to login if user login then redirect back to initial page
+    // so if you tried to go to /party you'll be redirected to /party after login/signup
+    return next({name: to.path === '/' ? 'home' : 'login'});
+  }
+
+  next();
+});
+
+export default router;
diff --git a/website/client/store/actions/auth.js b/website/client/store/actions/auth.js
new file mode 100644
index 0000000000..31a05020de
--- /dev/null
+++ b/website/client/store/actions/auth.js
@@ -0,0 +1,83 @@
+import axios from 'axios';
+
+export async function register (store, params) {
+  let url = '/api/v3/user/auth/local/register';
+  let result = await axios.post(url, {
+    username: params.username,
+    email: params.email,
+    password: params.password,
+    confirmPassword: params.passwordConfirm,
+  });
+
+  let user = result.data.data;
+
+  let userLocalData = JSON.stringify({
+    auth: {
+      apiId: user._id,
+      apiToken: user.apiToken,
+    },
+  });
+  localStorage.setItem('habit-mobile-settings', userLocalData);
+
+  // @TODO: I think we just need analytics here
+  // Auth.runAuth(res.data._id, res.data.apiToken);
+  // Analytics.register();
+  // $scope.registrationInProgress = false;
+  // Alert.authErrorAlert(data, status, headers, config)
+  // Analytics.login();
+  // Analytics.updateUser();
+
+  store.state.user.data = user;
+}
+
+export async function login (store, params) {
+  let url = '/api/v3/user/auth/local/login';
+  let result = await axios.post(url, {
+    username: params.username,
+    // email: params.email,
+    password: params.password,
+  });
+
+  let user = result.data.data;
+
+  let userLocalData = JSON.stringify({
+    auth: {
+      apiId: user.id,
+      apiToken: user.apiToken,
+    },
+  });
+
+  localStorage.setItem('habit-mobile-settings', userLocalData);
+
+  // @TODO: I think we just need analytics here
+  // Auth.runAuth(res.data._id, res.data.apiToken);
+  // Analytics.register();
+  // $scope.registrationInProgress = false;
+  // Alert.authErrorAlert(data, status, headers, config)
+  // Analytics.login();
+  // Analytics.updateUser();
+
+  // @TODO: Update the api to return the user?
+  // store.state.user.data = user;
+}
+
+export async function socialAuth (store, params) {
+  let url = '/api/v3/user/auth/social';
+  let result = await axios.post(url, {
+    network: params.auth.network,
+    authResponse: params.auth.authResponse,
+  });
+
+  // @TODO: Analytics
+
+  let user = result.data.data;
+
+  let userLocalData = JSON.stringify({
+    auth: {
+      apiId: user.id,
+      apiToken: user.apiToken,
+    },
+  });
+
+  localStorage.setItem('habit-mobile-settings', userLocalData);
+}
diff --git a/website/client/store/actions/common.js b/website/client/store/actions/common.js
index 41cc3271d0..f9adb779bd 100644
--- a/website/client/store/actions/common.js
+++ b/website/client/store/actions/common.js
@@ -1,5 +1,7 @@
 import axios from 'axios';
 import equipOp from 'common/script/ops/equip';
+import hatchOp from 'common/script/ops/hatch';
+import feedOp from 'common/script/ops/feed';
 
 export function equip (store, params) {
   const user = store.state.user.data;
@@ -9,4 +11,24 @@ export function equip (store, params) {
     // TODO
     // .then((res) => console.log('equip', res))
     // .catch((err) => console.error('equip', err));
-}
\ No newline at end of file
+}
+
+export function hatch (store, params) {
+  const user = store.state.user.data;
+  hatchOp(user, {params});
+  axios
+    .post(`/api/v3/user/hatch/${params.egg}/${params.hatchingPotion}`);
+    // TODO
+    // .then((res) => console.log('equip', res))
+    // .catch((err) => console.error('equip', err));
+}
+
+export function feed (store, params) {
+  const user = store.state.user.data;
+  feedOp(user, {params});
+  axios
+    .post(`/api/v3/user/feed/${params.pet}/${params.food}`);
+  // TODO
+  // .then((res) => console.log('equip', res))
+  // .catch((err) => console.error('equip', err));
+}
diff --git a/website/client/store/actions/index.js b/website/client/store/actions/index.js
index 965e9041a3..b47a7540e6 100644
--- a/website/client/store/actions/index.js
+++ b/website/client/store/actions/index.js
@@ -6,6 +6,8 @@ import * as tasks from './tasks';
 import * as guilds from './guilds';
 import * as party from './party';
 import * as members from './members';
+import * as auth from './auth';
+import * as quests from './quests';
 
 // Actions should be named as 'actionName' and can be accessed as 'namespace:actionName'
 // Example: fetch in user.js -> 'user:fetch'
@@ -17,6 +19,8 @@ const actions = flattenAndNamespace({
   guilds,
   party,
   members,
+  auth,
+  quests,
 });
 
 export default actions;
diff --git a/website/client/store/actions/quests.js b/website/client/store/actions/quests.js
new file mode 100644
index 0000000000..5ad1281e09
--- /dev/null
+++ b/website/client/store/actions/quests.js
@@ -0,0 +1,16 @@
+import axios from 'axios';
+// export async function initQuest (store) {
+// }
+
+export async function sendAction (store, payload) {
+  // Analytics.updateUser({
+  //   partyID: party._id,
+  //   partySize: party.memberCount
+  // });
+  let response = await axios.post(`/api/v3/groups/${payload.groupId}/${payload.action}`);
+
+  // @TODO: Update user?
+  //  User.sync();
+
+  return response.data.quest || response.data.data;
+}
diff --git a/website/client/store/actions/tasks.js b/website/client/store/actions/tasks.js
index d939810e3e..71ceca0221 100644
--- a/website/client/store/actions/tasks.js
+++ b/website/client/store/actions/tasks.js
@@ -1,13 +1,54 @@
 import { loadAsyncResource } from 'client/libs/asyncResource';
 
+import compact from 'lodash/compact';
+
 export function fetchUserTasks (store, forceLoad = false) {
   return loadAsyncResource({
     store,
     path: 'tasks',
     url: '/api/v3/tasks/user',
     deserialize (response) {
-      return response.data.data;
+      // Wait for the user to be loaded before deserializing
+      // because user.tasksOrder is necessary
+      return store.dispatch('user:fetch').then((userResource) => {
+        return store.dispatch('tasks:order', [response.data.data, userResource.data.tasksOrder]);
+      });
     },
     forceLoad,
   });
+}
+
+export function order (store, [rawTasks, tasksOrder]) {
+  const tasks = {
+    habits: [],
+    dailys: [],
+    todos: [],
+    rewards: [],
+  };
+
+  rawTasks.forEach(task => {
+    tasks[`${task.type}s`].push(task);
+  });
+
+  Object.keys(tasks).forEach((type) => {
+    let tasksOfType = tasks[type];
+
+    const orderOfType = tasksOrder[type];
+    const orderedTasks = new Array(tasksOfType.length);
+    const unorderedTasks = []; // what we want to add later
+
+    tasksOfType.forEach((task, index) => {
+      const taskId = task._id;
+      const i = orderOfType[index] === taskId ? index : orderOfType.indexOf(taskId);
+      if (i === -1) {
+        unorderedTasks.push(task);
+      } else {
+        orderedTasks[i] = task;
+      }
+    });
+
+    tasks[type] = compact(orderedTasks).concat(unorderedTasks);
+  });
+
+  return tasks;
 }
\ No newline at end of file
diff --git a/website/client/store/getters/tasks.js b/website/client/store/getters/tasks.js
index 6e641c0708..72c9e7c419 100644
--- a/website/client/store/getters/tasks.js
+++ b/website/client/store/getters/tasks.js
@@ -1,6 +1,64 @@
+import { shouldDo } from 'common/script/cron';
+
 // Return all the tags belonging to an user task
 export function getTagsFor (store) {
   return (task) => store.state.user.data.tags
     .filter(tag => task.tags.indexOf(tag.id) !== -1)
     .map(tag => tag.name);
+}
+
+function getTaskColorByValue (value) {
+  if (value < -20) {
+    return 'task-worst';
+  } else if (value < -10) {
+    return 'task-worse';
+  } else if (value < -1) {
+    return 'task-bad';
+  } else if (value < 1) {
+    return 'task-neutral';
+  } else if (value < 5) {
+    return 'task-good';
+  } else if (value < 10) {
+    return 'task-better';
+  } else {
+    return 'task-best';
+  }
+}
+
+export function getTaskClasses (store) {
+  const userPreferences = store.state.user.data.preferences;
+
+  // Purpose is one of 'controls', 'editModal', 'createModal', 'content'
+  return (task, purpose) => {
+    const type = task.type;
+
+    switch (purpose) {
+      case 'createModal':
+        return 'task-purple';
+      case 'editModal':
+        return type === 'reward' ? 'task-purple' : getTaskColorByValue(task.value);
+      case 'control':
+        switch (type) {
+          case 'daily':
+            if (task.completed || !shouldDo(new Date(), task, userPreferences)) return 'task-daily-todo-disabled';
+            return getTaskColorByValue(task.value);
+          case 'todo':
+            if (task.completed) return 'task-daily-todo-disabled';
+            return getTaskColorByValue(task.value);
+          case 'habit':
+            return {
+              up: task.up ? getTaskColorByValue(task.value) : 'task-habit-disabled',
+              down: task.down ? getTaskColorByValue(task.value) : 'task-habit-disabled',
+            };
+          case 'reward':
+            return 'task-reward';
+        }
+        break;
+      case 'content':
+        if (type === 'daily' && (task.completed || !task.isDue) || type === 'todo' && task.completed) {
+          return 'task-daily-todo-content-disabled';
+        }
+        break;
+    }
+  };
 }
\ No newline at end of file
diff --git a/website/client/store/index.js b/website/client/store/index.js
index bb5597514f..4643f22600 100644
--- a/website/client/store/index.js
+++ b/website/client/store/index.js
@@ -3,21 +3,44 @@ import deepFreeze from 'client/libs/deepFreeze';
 import content from 'common/script/content/index';
 import * as constants from 'common/script/constants';
 import { asyncResourceFactory } from 'client/libs/asyncResource';
+import axios from 'axios';
 
 import actions from './actions';
 import getters from './getters';
 
+const IS_TEST = process.env.NODE_ENV === 'test'; // eslint-disable-line no-process-env
+
+// Load user auth parameters and determine if it's logged in
+// before trying to load data
+let isUserLoggedIn = false;
+
+let AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
+
+if (AUTH_SETTINGS) {
+  AUTH_SETTINGS = JSON.parse(AUTH_SETTINGS);
+  axios.defaults.headers.common['x-api-user'] = AUTH_SETTINGS.auth.apiId;
+  axios.defaults.headers.common['x-api-key'] = AUTH_SETTINGS.auth.apiToken;
+  isUserLoggedIn = true;
+}
+
 // Export a function that generates the store and not the store directly
-// so that we can regenerate it multiple times for testing
+// so that we can regenerate it multiple times for testing, when not testing
+// always export the same route
+
+let existingStore;
 export default function () {
-  return new Store({
+  if (!IS_TEST && existingStore) return existingStore;
+
+  existingStore = new Store({
     actions,
     getters,
     state: {
       title: 'Habitica',
+      isUserLoggedIn,
       user: asyncResourceFactory(),
       tasks: asyncResourceFactory(), // user tasks
       party: {
+        quest: {},
         members: asyncResourceFactory(),
       },
       myGuilds: [],
@@ -29,4 +52,6 @@ export default function () {
       constants: deepFreeze(constants),
     },
   });
+
+  return existingStore;
 }
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 012bc259dc..c4ae284d37 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -114,7 +114,7 @@
   "messageRequired": "A message is required.",
   "toUserIDRequired": "A User ID is required",
   "gemAmountRequired": "A number of gems is required",
-  "notAuthorizedToSendMessageToThisUser": "Can't send message to this user.",
+  "notAuthorizedToSendMessageToThisUser": "You can't send a message to this player because they have chosen to block messages.",
   "privateMessageGiftGemsMessage": "Hello <%= receiverName %>, <%= senderName %> has sent you <%= gemAmount %> gems!",
   "privateMessageGiftSubscriptionMessage": "<%= numberOfMonths %> months of subscription! ",
   "cannotSendGemsToYourself": "Cannot send gems to yourself. Try a subscription instead.",
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index 6db683c726..35fe7fbb17 100644
--- a/website/common/locales/en/newClient.json
+++ b/website/common/locales/en/newClient.json
@@ -10,6 +10,16 @@
   "guildBank": "Guild Bank",
   "chatPlaceHolder": "Type your message to Guild members here",
   "today": "Today",
+  "theseAreYourTasks": "These are your <%= taskType %>",
+  "habitsDesc": "Habits don't have a rigid schedule. You can check them off multiple times per day.",
+  "dailysDesc": "Dailies repeat on a regular basis. Choose the schedule that works best for you!",
+  "todosDesc": "To-Dos need to be completed once. Add checklists to your To-Dos to increase their value.",
+  "rewardsDesc": "Rewards are a great way to use Habitica and complete your tasks. Try adding a few today!",
+  "dueIn": "Due <%= dueIn %>",
+  "complete2": "Complete",
+  "custom": "Custom",
+  "wishlist": "Wishlist",
+  "scheduled": "Scheduled",
   "like": "Like",
   "copyAsTodo": "Copy as To-Do",
   "report": "Report",
@@ -25,6 +35,14 @@
   "groupBy2": "Group By",
   "quantity": "Quantity",
   "AZ": "A-Z",
+  "costumeDisabled": "You have disabled your costume.",
+  "filterByStandard": "Standard",
+  "filterByMagicPotion": "Magin Potion",
+  "filterByQuest": "Quest",
+  "standard": "Standard",
+  "sortByColor": "Color",
+  "sortByHatchable": "Hatchable",
+  "haveHatchablePet": "You have a <%= potion %> and <%= egg %> to hatch this pet! <b>Click and hold</b> the paw print to hatch.",
   "editAvatar": "Edit Avatar",
   "sort": "Sort",
   "memberCount": "Member Count",
@@ -53,8 +71,8 @@
   "silverTier": "Silver Tier",
   "bronzeTier": "Bronze Tier",
   "privacySettings": "Privacy Settings",
-  "onlyLeaderCreatesChallenges": "Only the Guild Leader can create Guild Challenges",
-  "guildLeaderCantBeMessaged": "Guild Leader can not be messaged directly",
+  "onlyLeaderCreatesChallenges": "Only the Leader can create Challenges",
+  "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
   "privateGuild": "Private Guild",
   "allowGuildInvationsFromNonMembers": "Allow Guild invitations from non-members",
   "charactersRemaining": "characters remaining",
@@ -69,5 +87,45 @@
   "sendMessage": "Send Message",
   "removeManager2": "Remove Manager",
   "promoteToLeader": "Promote to Leader",
-  "inviteFriendsParty": "Inviting friends to your party will grant you an exclusive <br/> Quest Scroll to battle the Basi-List together!"
+  "inviteFriendsParty": "Inviting friends to your party will grant you an exclusive <br/> Quest Scroll to battle the Basi-List together!",
+  "upgradeParty": "Upgrade Party",
+  "questDetailsTitle": "Quest Details",
+  "yourNotOnQuest": "You're not on a quest",
+  "questDescription": "Quests allow players to focus on long-term, in-game goals with the members of their party.",
+  "haveNoChallenges": "You don’t have any Challenges",
+  "challengeDescription": "Challenges are community events in which players compete and earn prizes by completing a group of related tasks.",
+  "createParty": "Create a Party",
+  "partyDescriptionPlaceHolder": "This is our party’s description. It describes what we do in this party. If you want to learn more about what we do in this party, read the description. Party on.",
+  "inviteMembersNow": "Would you like to invite users now?",
+  "playInPartyTitle": "Play Habitica in a Party!",
+  "playInPartyDescription": "Take on amazing quests with friends or on your own. Battle monsters, create Challenges, and help yourself stay accountable through Parties.",
+  "startYourOwnPartyTitle": "Start your own Party",
+  "startYourOwnPartyDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan sagittis tellus tempor euismod. Sed imperdiet facilisis tortor in malesuada.",
+  "shartUserId": "Share User ID",
+  "wantToJoinPartyTitle": "Want to join a Party?",
+  "wantToJoinPartyDescription": "Aenean non mattis eros, quis semper ipsum. Phasellus vulputate in nibh et suscipit. In hac habitasse platea dictumst.",
+  "copy": "Copy",
+  "lookingForGroup": "Looking for Group",
+  "inviteToPartyOrQuest": "Invite Party to Quest",
+  "inviteInformation": "Clicking “Invite” will send an invitation to your party members. When all members have accepted or denied, the Quest begins.",
+  "questOwnerRewards": "Quest Owner Rewards",
+  "guildInformationPlaceHolder": "This is our party’s description. It describes what we do in this party. If you want to learn more about what we do in this party, read the description. Party on.",
+  "updateParty": "Update Party",
+  "upgrade": "Upgrade",
+  "signUpWithSocial": "Sign up with <%= social %>",
+  "loginWithSocial": "Login with <%= social %>",
+  "confirmPassword": "Confirm Password",
+  "usernamePlaceholder": "e.g., HabitRabbit",
+  "emailPlaceholder": "e.g., rabbit@habitica.com",
+  "passwordPlaceholder": "e.g., •••••••••••• ",
+  "confirmPasswordPlaceholder": "Make sure it’s the same password!",
+  "termsAndAgreement": "By clicking the button below, you are indicating that you have read and agree to the <a href=''>Terms of Service</a> and <a href=''>Privacy Policy</a>.",
+  "joinHabitica": "Join Habitica",
+  "showAllAnimals": "Show All <%= color %> <%= type %>",
+  "showLessAnimals": "Show Less <%= color %> <%= type %>",
+  "quickInventory": "Quick Inventory",
+  "noFoodAvailable": "You don't have any food.",
+  "gotIt": "Got it!",
+  "welcomeStable": "Welcome to the Stable!",
+  "welcomeStableText": "I'm Matt, the Beast Master. Starting at level 3, you can hatch Pets from Eggs by using Potions you find! When you hatch a Pet from your Inventory, it will appear here! Click a Pet's to add it to your avatar. Feed them with the Food you find in your Inventory after level 3, and they'll grow into hardy Mounts."
 }
diff --git a/website/common/locales/en/questsContent.json b/website/common/locales/en/questsContent.json
index c41d73d95b..601efa0f42 100644
--- a/website/common/locales/en/questsContent.json
+++ b/website/common/locales/en/questsContent.json
@@ -109,7 +109,7 @@
   "questGoldenknight1DropGoldenknight2Quest": "The Golden Knight Part 2: Gold Knight (Scroll)",
 
   "questGoldenknight2Text": "The Golden Knight, Part 2: Gold Knight",
-  "questGoldenknight2Notes": "Armed with hundreds of Habitican's testimonies, you finally confront the Golden Knight. You begin to recite the Habitcan's complaints to her, one by one. \"And @Pfeffernusse says that your constant bragging-\" The knight raises her hand to silence you and scoffs, \"Please, these people are merely jealous of my success. Instead of complaining, they should simply work as hard as I! Perhaps I shall show you the power you can attain through diligence such as mine!\" She raises her morningstar and prepares to attack you!",
+  "questGoldenknight2Notes": "Armed with dozens of Habiticans' testimonies, you finally confront the Golden Knight. You begin to recite the Habitcans' complaints to her, one by one. \"And @Pfeffernusse says that your constant bragging-\" The knight raises her hand to silence you and scoffs, \"Please, these people are merely jealous of my success. Instead of complaining, they should simply work as hard as I! Perhaps I shall show you the power you can attain through diligence such as mine!\" She raises her morningstar and prepares to attack you!",
   "questGoldenknight2Boss": "Gold Knight",
   "questGoldenknight2DropGoldenknight3Quest": "The Golden Knight Part 3: The Iron Knight (Scroll)",
 
diff --git a/website/common/locales/en/rebirth.json b/website/common/locales/en/rebirth.json
index 4e49970b89..dc3e25eebf 100644
--- a/website/common/locales/en/rebirth.json
+++ b/website/common/locales/en/rebirth.json
@@ -11,7 +11,7 @@
     "rebirthInList1": "Tasks, history, equipment, and settings remain.",
     "rebirthInList2": "Challenge, Guild, and Party memberships remain.",
     "rebirthInList3": "Gems, backer tiers, and contributor levels remain.",
-    "rebirthInList4": "Items obtained from Gems or drops (such as pets and mounts) remain, though you cannot access them until you unlock them again.",
+    "rebirthInList4": "Items obtained from Gems or drops (such as pets and mounts) remain.",
     "rebirthEarnAchievement": "You also earn an Achievement for beginning a new adventure!",
     "beReborn": "Be Reborn",
     "rebirthAchievement": "You've begun a new adventure! This is Rebirth <%= number %> for you, and the highest Level you've attained is <%= level %>. To stack this Achievement, begin your next new adventure when you've reached an even higher Level!",
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index f1866c206a..4cd3e59bd9 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -37,7 +37,7 @@
     "subscribed": "Subscribed",
     "manageSub": "Click to manage subscription",
     "cancelSub": "Cancel Subscription",
-    "cancelSubInfoGoogle": "Please go to the \"My apps & games\" > \"Subscriptions\" section of the Google Play Store app to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
+    "cancelSubInfoGoogle": "Please go to the \"Account\" > \"Subscriptions\" section of the Google Play Store app to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
     "cancelSubInfoApple": "Please follow <a href=\"https://support.apple.com/en-us/HT202039\">Apple’s official instructions</a> to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
     "canceledSubscription": "Canceled Subscription",
     "cancelingSubscription": "Canceling the subscription",
@@ -171,5 +171,6 @@
     "missingPaymentId": "Missing req.query.paymentId",
     "missingCustomerId": "Missing req.query.customerId",
     "missingPaypalBlock": "Missing req.session.paypalBlock",
-    "missingSubKey": "Missing req.query.sub"
+    "missingSubKey": "Missing req.query.sub",
+    "paypalCanceled": "Your subscription has been canceled"
 }
diff --git a/website/common/locales/en/tasks.json b/website/common/locales/en/tasks.json
index e157f4f200..3ceb4c227f 100644
--- a/website/common/locales/en/tasks.json
+++ b/website/common/locales/en/tasks.json
@@ -1,7 +1,7 @@
 {
     "clearCompleted": "Delete Completed",
     "lotOfToDos": "Your most recent 30 completed To-Dos are shown here. You can see older completed To-Dos from Data > Data Display Tool or Data > Export Data > User Data.",
-    "deleteToDosExplanation": "If you click the button below, all of your completed To-Dos and archived To-Dos will be permanently deleted. Export them first if you want to keep a record of them.",
+    "deleteToDosExplanation": "If you click the button below, all of your completed To-Dos and archived To-Dos will be permanently deleted, except for To-Dos from active challenges and Group Plans. Export them first if you want to keep a record of them.",
     "addmultiple": "Add Multiple",
     "addsingle": "Add Single",
     "habit": "Habit",
diff --git a/website/server/controllers/api-v3/user.js b/website/server/controllers/api-v3/user.js
index 25cd50f8ca..d57e32b354 100644
--- a/website/server/controllers/api-v3/user.js
+++ b/website/server/controllers/api-v3/user.js
@@ -329,7 +329,7 @@ api.deleteUser = {
     await user.remove();
 
     if (feedback) {
-      txnEmail(TECH_ASSISTANCE_EMAIL, 'admin-feedback', [
+      txnEmail({email: TECH_ASSISTANCE_EMAIL}, 'admin-feedback', [
         {name: 'PROFILE_NAME', content: user.profile.name},
         {name: 'UUID', content: user._id},
         {name: 'EMAIL', content: getUserInfo(user, ['email']).email},
diff --git a/website/server/libs/cron.js b/website/server/libs/cron.js
index 0c51587c54..0bc1cd94cc 100644
--- a/website/server/libs/cron.js
+++ b/website/server/libs/cron.js
@@ -206,8 +206,11 @@ export function cron (options = {}) {
   let perfect = true;
 
   // Reset Gold-to-Gems cap if it's the start of the month
-  if (user.purchased && user.purchased.plan && !moment(user.purchased.plan.dateUpdated).startOf('month').isSame(moment().startOf('month'))) {
+  let dateUpdatedFalse = !moment(user.purchased.plan.dateUpdated).startOf('month').isSame(moment().startOf('month')) || !user.purchased.plan.dateUpdated;
+
+  if (user.purchased && user.purchased.plan && dateUpdatedFalse) {
     user.purchased.plan.gemsBought = 0;
+    if (!user.purchased.plan.dateUpdated) user.purchased.plan.dateUpdated = moment();
   }
 
   if (user.isSubscribed()) {
diff --git a/website/server/libs/payments.js b/website/server/libs/payments.js
index c87d8f225f..2b664c649e 100644
--- a/website/server/libs/payments.js
+++ b/website/server/libs/payments.js
@@ -134,7 +134,7 @@ api.addSubToGroupUser = async function addSubToGroupUser (member, group) {
     let ignoreCustomerId = customerIdsToIgnore.indexOf(memberPlan.customerId) !== -1;
 
     if (ignorePaymentPlan) {
-      txnEmail(TECH_ASSISTANCE_EMAIL, 'admin-user-subscription-details', [
+      txnEmail({email: TECH_ASSISTANCE_EMAIL}, 'admin-user-subscription-details', [
         {name: 'PROFILE_NAME', content: member.profile.name},
         {name: 'UUID', content: member._id},
         {name: 'EMAIL', content: getUserInfo(member, ['email']).email},
diff --git a/website/views/options/profile/achievements.jade b/website/views/options/profile/achievements.jade
index 0392405013..1abb279148 100644
--- a/website/views/options/profile/achievements.jade
+++ b/website/views/options/profile/achievements.jade
@@ -1,5 +1,5 @@
-script(id='partials/options.profile.achievements.html', type='text/ng-template')
-  .container-fluid
-    div(class='row')
-      div(ng-class='user.flags.classSelected && !user.preferences.disableClasses ? "col-md-4" : "col-md-6"')
-        include ../../shared/profiles/achievements
+script(id='partials/options.profile.achievements.html', type='text/ng-template')
+  .container-fluid
+    div(class='row')
+      div(ng-class='user.flags.classSelected && !user.preferences.disableClasses ? "col-md-4" : "col-md-6"')
+        include ../../shared/profiles/achievements
diff --git a/website/views/options/profile/avatar.jade b/website/views/options/profile/avatar.jade
index e0213ef5b1..d97088da3f 100644
--- a/website/views/options/profile/avatar.jade
+++ b/website/views/options/profile/avatar.jade
@@ -1,2 +1,2 @@
-script(id='partials/options.profile.avatar.html', type='text/ng-template')
-  +customizeProfile()
+script(id='partials/options.profile.avatar.html', type='text/ng-template')
+  +customizeProfile()
diff --git a/website/views/options/settings/export.jade b/website/views/options/settings/export.jade
index 6b80129f22..dbcea5a094 100644
--- a/website/views/options/settings/export.jade
+++ b/website/views/options/settings/export.jade
@@ -1,13 +1,13 @@
-script(id='partials/options.settings.export.html', type="text/ng-template")
-  .container-fluid
-    .row
-      .col-md-6
-        h2=env.t('dataExport')
-        small=env.t('saveData')
-        h4=env.t('habitHistory')
-        =env.t('exportHistory')
-        a(href="/export/history.csv")= ' ' + env.t('csv')
-        h4=env.t('userData')
-        =env.t('exportUserData')
-        a(href="/export/userdata.xml")= ' ' + env.t('xml') + ' '
-        a(href="/export/userdata.json")= env.t('json')
+script(id='partials/options.settings.export.html', type="text/ng-template")
+  .container-fluid
+    .row
+      .col-md-6
+        h2=env.t('dataExport')
+        small=env.t('saveData')
+        h4=env.t('habitHistory')
+        =env.t('exportHistory')
+        a(href="/export/history.csv")= ' ' + env.t('csv')
+        h4=env.t('userData')
+        =env.t('exportUserData')
+        a(href="/export/userdata.xml")= ' ' + env.t('xml') + ' '
+        a(href="/export/userdata.json")= env.t('json')
diff --git a/website/views/options/settings/notification.jade b/website/views/options/settings/notification.jade
index 487df82af7..a1f8cbfb25 100644
--- a/website/views/options/settings/notification.jade
+++ b/website/views/options/settings/notification.jade
@@ -1,49 +1,49 @@
-script(id='partials/options.settings.notifications.html', type="text/ng-template")
-  .container-fluid
-    .row
-      .personal-options.col-md-6
-        .panel.panel-default
-          .panel-heading
-            =env.t('notifications')
-          .panel-body
-            table.table
-              tr
-                td
-                th
-                  span=env.t("email")
-                th
-                  span=env.t("push")
-              -var unsubscribeFromAllEmails = 'user.preferences.emailNotifications.unsubscribeFromAll'
-              -var unsubscribeFromAllPush = 'user.preferences.pushNotifications.unsubscribeFromAll'
-              each notification in ['newPM', 'wonChallenge', 'giftedGems', 'giftedSubscription', 'invitedParty', 'invitedGuild', 'kickedGroup', 'questStarted', 'invitedQuest', 'importantAnnouncements', 'weeklyRecaps', 'onboarding']
-                tr
-                  td
-                    span=env.t(notification)
-                  td
-                    -var preference = 'user.preferences.emailNotifications.' + notification
-                    input(type='checkbox', ng-model='#{preference}',
-                      ng-disabled='#{unsubscribeFromAllEmails} === true || #{preference} === undefined',
-                      ng-checked='#{unsubscribeFromAllEmails} === false && #{preference} === true',
-                      ng-change='set({"preferences.emailNotifications.#{notification}": #{preference} ? true: false})')
-                  td
-                    -var preference = 'user.preferences.pushNotifications.' + notification
-                    input(type='checkbox', ng-model='#{preference}',
-                      ng-disabled='#{unsubscribeFromAllPush} === true || #{preference} === undefined',
-                      ng-checked='#{unsubscribeFromAllPush} === false && #{preference} === true',
-                      ng-change='set({"preferences.pushNotifications.#{notification}": #{preference} ? true: false})')
-
-            hr
-
-            .checkbox
-              label
-                input(type='checkbox', ng-model='user.preferences.pushNotifications.unsubscribeFromAll',
-                ng-change='set({"preferences.pushNotifications.unsubscribeFromAll": user.preferences.pushNotifications.unsubscribeFromAll ? true: false})')
-                span=env.t('unsubscribeAllPush')
-
-            .checkbox
-              label
-                input(type='checkbox', ng-model='user.preferences.emailNotifications.unsubscribeFromAll',
-                ng-change='set({"preferences.emailNotifications.unsubscribeFromAll": user.preferences.emailNotifications.unsubscribeFromAll ? true: false})')
-                span=env.t('unsubscribeAllEmails')
-
-            small=env.t('unsubscribeAllEmailsText')
+script(id='partials/options.settings.notifications.html', type="text/ng-template")
+  .container-fluid
+    .row
+      .personal-options.col-md-6
+        .panel.panel-default
+          .panel-heading
+            =env.t('notifications')
+          .panel-body
+            table.table
+              tr
+                td
+                th
+                  span=env.t("email")
+                th
+                  span=env.t("push")
+              -var unsubscribeFromAllEmails = 'user.preferences.emailNotifications.unsubscribeFromAll'
+              -var unsubscribeFromAllPush = 'user.preferences.pushNotifications.unsubscribeFromAll'
+              each notification in ['newPM', 'wonChallenge', 'giftedGems', 'giftedSubscription', 'invitedParty', 'invitedGuild', 'kickedGroup', 'questStarted', 'invitedQuest', 'importantAnnouncements', 'weeklyRecaps', 'onboarding']
+                tr
+                  td
+                    span=env.t(notification)
+                  td
+                    -var preference = 'user.preferences.emailNotifications.' + notification
+                    input(type='checkbox', ng-model='#{preference}',
+                      ng-disabled='#{unsubscribeFromAllEmails} === true || #{preference} === undefined',
+                      ng-checked='#{unsubscribeFromAllEmails} === false && #{preference} === true',
+                      ng-change='set({"preferences.emailNotifications.#{notification}": #{preference} ? true: false})')
+                  td
+                    -var preference = 'user.preferences.pushNotifications.' + notification
+                    input(type='checkbox', ng-model='#{preference}',
+                      ng-disabled='#{unsubscribeFromAllPush} === true || #{preference} === undefined',
+                      ng-checked='#{unsubscribeFromAllPush} === false && #{preference} === true',
+                      ng-change='set({"preferences.pushNotifications.#{notification}": #{preference} ? true: false})')
+
+            hr
+
+            .checkbox
+              label
+                input(type='checkbox', ng-model='user.preferences.pushNotifications.unsubscribeFromAll',
+                ng-change='set({"preferences.pushNotifications.unsubscribeFromAll": user.preferences.pushNotifications.unsubscribeFromAll ? true: false})')
+                span=env.t('unsubscribeAllPush')
+
+            .checkbox
+              label
+                input(type='checkbox', ng-model='user.preferences.emailNotifications.unsubscribeFromAll',
+                ng-change='set({"preferences.emailNotifications.unsubscribeFromAll": user.preferences.emailNotifications.unsubscribeFromAll ? true: false})')
+                span=env.t('unsubscribeAllEmails')
+
+            small=env.t('unsubscribeAllEmailsText')
diff --git a/website/views/options/settings/promo.jade b/website/views/options/settings/promo.jade
index 509f31b713..956d762b4e 100644
--- a/website/views/options/settings/promo.jade
+++ b/website/views/options/settings/promo.jade
@@ -1,21 +1,21 @@
-script(type='text/ng-template', id='partials/options.settings.promo.html')
-  .container-fluid
-    .row
-      .col-md-6
-        h2=env.t('promoCode')
-        form.form-inline(role='form',ng-submit='enterCoupon(_couponCode)')
-          input.form-control(type='text', ng-model='_couponCode', placeholder=env.t('promoPlaceholder'))
-          button.btn.btn-primary(type='submit')= env.t('submit')
-        div
-          small= env.t('couponText')
-        div(ng-if='user.contributor.sudo')
-          hr
-          h4=env.t('generateCodes')
-          form.form(role='form',ng-submit='generateCodes(_codes)',ng-init='_codes={}')
-            .form-group
-              input.form-control(type='text',ng-model='_codes.event',placeholder="Event code (eg, 'wondercon')")
-            .form-group
-              input.form-control(type='number',ng-model='_codes.count',placeholder="Number of codes to generate (eg, 250)")
-            .form-group
-              button.btn.btn-primary(type='submit')=env.t('generate')
-              a.btn.btn-default(href='/api/v3/coupons?_id={{user._id}}&apiToken={{User.settings.auth.apiToken}}')=env.t('getCodes')
+script(type='text/ng-template', id='partials/options.settings.promo.html')
+  .container-fluid
+    .row
+      .col-md-6
+        h2=env.t('promoCode')
+        form.form-inline(role='form',ng-submit='enterCoupon(_couponCode)')
+          input.form-control(type='text', ng-model='_couponCode', placeholder=env.t('promoPlaceholder'))
+          button.btn.btn-primary(type='submit')= env.t('submit')
+        div
+          small= env.t('couponText')
+        div(ng-if='user.contributor.sudo')
+          hr
+          h4=env.t('generateCodes')
+          form.form(role='form',ng-submit='generateCodes(_codes)',ng-init='_codes={}')
+            .form-group
+              input.form-control(type='text',ng-model='_codes.event',placeholder="Event code (eg, 'wondercon')")
+            .form-group
+              input.form-control(type='number',ng-model='_codes.count',placeholder="Number of codes to generate (eg, 250)")
+            .form-group
+              button.btn.btn-primary(type='submit')=env.t('generate')
+              a.btn.btn-default(href='/api/v3/coupons?_id={{user._id}}&apiToken={{User.settings.auth.apiToken}}')=env.t('getCodes')
diff --git a/website/views/options/settings/settings.jade b/website/views/options/settings/settings.jade
index 903869d4fc..1f5a1b7e81 100644
--- a/website/views/options/settings/settings.jade
+++ b/website/views/options/settings/settings.jade
@@ -1,186 +1,186 @@
-script(type='text/ng-template', id='partials/options.settings.settings.html')
-  .container-fluid
-    .row
-      .personal-options.col-md-6
-        .panel.panel-default
-          .panel-heading
-            =env.t('settings')
-          .panel-body
-
-            .form-horizontal
-              h5=env.t('language')
-              select.form-control(ng-model='language.code', ng-options='lang.code as lang.name for lang in availableLanguages', ng-change='changeLanguage()')
-              small
-                !=env.t('americanEnglishGovern')
-                br
-                strong
-                  !=env.t('helpWithTranslation')
-
-            hr
-
-            .form-horizontal
-              h5=env.t('dateFormat')
-              select.form-control(ng-model='user.preferences.dateFormat', ng-options='DF for DF in availableFormats', ng-change='set({"preferences.dateFormat": user.preferences.dateFormat})')
-
-            hr
-
-            .checkbox
-              label
-                input(type='checkbox', ng-click='hideHeader() ', ng-checked='user.preferences.hideHeader!==true')
-                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('showHeaderPop'))=env.t('showHeader')
-            .checkbox
-              label
-                input(type='checkbox', ng-click='toggleStickyHeader()', ng-checked='user.preferences.stickyHeader!==false', ng-disabled="user.preferences.hideHeader!==false")
-                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('stickyHeaderPop'))=env.t('stickyHeader')
-            .checkbox
-              label
-                input(type='checkbox', ng-model='user.preferences.newTaskEdit', ng-change='set({"preferences.newTaskEdit": user.preferences.newTaskEdit?true: false})')
-                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('newTaskEditPop'))=env.t('newTaskEdit')
-            .checkbox
-              label
-                input(type='checkbox', ng-model='user.preferences.tagsCollapsed', ng-change='set({"preferences.tagsCollapsed": user.preferences.tagsCollapsed?true: false})')
-                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('startCollapsedPop'))=env.t('startCollapsed')
-            .checkbox
-              label
-                input(type='checkbox', ng-model='user.preferences.advancedCollapsed', ng-change='set({"preferences.advancedCollapsed": user.preferences.advancedCollapsed?true: false})')
-                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('startAdvCollapsedPop'))=env.t('startAdvCollapsed')
-            .checkbox
-              label
-                input(type='checkbox', ng-model='user.preferences.dailyDueDefaultView', ng-change='set({"preferences.dailyDueDefaultView": user.preferences.dailyDueDefaultView?true: false})')
-                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('dailyDueDefaultViewPop'))=env.t('dailyDueDefaultView')
-            .checkbox(ng-if='party.memberCount === 1')
-              label
-                input(type='checkbox', ng-model='user.preferences.displayInviteToPartyWhenPartyIs1', ng-change='set({"preferences.displayInviteToPartyWhenPartyIs1": user.preferences.displayInviteToPartyWhenPartyIs1 ? true : false})')
-                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('displayInviteToPartyWhenPartyIs1'))=env.t('displayInviteToPartyWhenPartyIs1')
-            .checkbox
-              label=env.t('suppressLevelUpModal')
-                input(type='checkbox', ng-model='user.preferences.suppressModals.levelUp', ng-change='set({"preferences.suppressModals.levelUp": user.preferences.suppressModals.levelUp?true: false})')
-            .checkbox
-              label=env.t('suppressHatchPetModal')
-                input(type='checkbox', ng-model='user.preferences.suppressModals.hatchPet', ng-change='set({"preferences.suppressModals.hatchPet": user.preferences.suppressModals.hatchPet?true: false})')
-            .checkbox
-              label=env.t('suppressRaisePetModal')
-                input(type='checkbox', ng-model='user.preferences.suppressModals.raisePet', ng-change='set({"preferences.suppressModals.raisePet": user.preferences.suppressModals.raisePet?true: false})')
-            .checkbox
-              label=env.t('suppressStreakModal')
-                input(type='checkbox', ng-model='user.preferences.suppressModals.streak', ng-change='set({"preferences.suppressModals.streak": user.preferences.suppressModals.streak?true: false})')
-            //- .checkbox
-            //-   label=env.t('confirmScoreNotes')
-            //-     input(type='checkbox', ng-model='user.preferences.tasks.confirmScoreNotes', ng-change='set({"preferences.tasks.confirmScoreNotes": user.preferences.tasks.confirmScoreNotes ? true: false})')
-
-            //- .checkbox
-            //-   label=env.t('groupTasksByChallenge')
-            //-     input(type='checkbox', ng-model='user.preferences.tasks.groupByChallenge', ng-change='set({"preferences.tasks.groupByChallenge": user.preferences.tasks.groupByChallenge ? true: false})')
-
-            hr
-
-            button.btn.btn-default(ng-click='showBailey()', popover-trigger='mouseenter', popover-placement='right', popover=env.t('showBaileyPop'))= env.t('showBailey')
-            button.btn.btn-default(ng-click='openRestoreModal()', popover-trigger='mouseenter', popover-placement='right', popover=env.t('fixValPop'))= env.t('fixVal')
-            button.btn.btn-default(ng-if='user.preferences.disableClasses==true', ng-click='User.changeClass({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('enableClassPop'))= env.t('enableClass')
-
-            hr
-
-            h5=env.t('customDayStart')
-            alert.alert-warning=env.t('customDayStartInfo1')
-
-            .form-horizontal
-              .form-group
-                .col-sm-7
-                  select.form-control(ng-model='dayStart')
-                    - var number = 0
-                    while number < 24
-                      - var value = number
-                      - var meridian = number < 12 ? 'AM' : 'PM'
-                      - var hour = number++ % 12
-                      option(value=value) #{hour ? hour : 12}:00 #{meridian}
-
-                .col-sm-5
-                  br.visible-xs
-                  button.btn.btn-block.btn-primary(ng-click='openDayStartModal(dayStart)',
-                    ng-disabled='dayStart == user.preferences.dayStart')
-                    =env.t('saveCustomDayStart')
-
-            hr
-
-            h5=env.t('timezone')
-            .form-horizontal
-              .form-group
-                .col-sm-12
-                  p!=env.t('timezoneUTC', {utc: "{{ user.preferences.timezoneOffset | timezoneOffsetToUtc }}"})
-                  br
-                  p!=env.t('timezoneInfo')
-
-      .personal-options.col-md-6
-        .panel.panel-default
-          .panel-heading
-            span=env.t('registration')
-          .panel-body
-            div
-              ul.list-inline
-                li(ng-repeat='network in SOCIAL_AUTH_NETWORKS')
-                  button.btn.btn-primary(ng-if='!user.auth[network.key].id', ng-click='socialLogin(network.key, user)')=env.t('registerWithSocial', {network: '{{network.name}}'})
-                  button.btn.btn-primary(disabled='disabled', ng-if='!hasBackupAuthOption(user, network.key) && user.auth[network.key].id')=env.t('registeredWithSocial', {network: '{{network.name}}'})
-                  button.btn.btn-danger(ng-click='deleteSocialAuth(network.key)', ng-if='hasBackupAuthOption(user, network.key) && user.auth[network.key].id')=env.t('detachSocial', {network: '{{network.name}}'})
-              hr
-              div(ng-if='!user.auth.local.username')
-                p=env.t('addLocalAuth')
-                form(ng-submit='http("post", "/api/v3/user/auth/local/register", localAuth, "addedLocalAuth")', ng-init='localAuth={}', name='localAuth', novalidate)
-                  //-.alert.alert-danger(ng-messages='changeUsername.$error && changeUsername.submitted')=env.t('fillAll')
-                  .form-group
-                    input.form-control(type='text', placeholder=env.t('username'), ng-model='localAuth.username', required)
-                  .form-group
-                    input.form-control(type='text', placeholder=env.t('email'), ng-model='localAuth.email', required)
-                  .form-group
-                    input.form-control(type='password', placeholder=env.t('password'), ng-model='localAuth.password', required)
-                  .form-group
-                    input.form-control(type='password', placeholder=env.t('confirmPass'), ng-model='localAuth.confirmPassword', required)
-                  input.btn.btn-default(type='submit', ng-disabled='localAuth.$invalid', value=env.t('submit'))
-
-            div(ng-if='user.auth.local.username')
-              p=env.t('username')
-                |: {{user.auth.local.username}}
-              p
-                small.muted
-                    =env.t('loginNameDescription1')
-                    |&nbsp;
-                    a(href='/#/options/profile/profile')=env.t('loginNameDescription2')
-                    |&nbsp;
-                    =env.t('loginNameDescription3')
-              p=env.t('email')
-                |: {{user.auth.local.email}}
-              hr
-
-              h5=env.t('changeUsername')
-              form(ng-submit='changeUser("username", usernameUpdates)', ng-init='usernameUpdates={}', ng-show='user.auth.local', name='changeUsername', novalidate)
-                //-.alert.alert-danger(ng-messages='changeUsername.$error && changeUsername.submitted')=env.t('fillAll')
-                .form-group
-                  input.form-control(type='text', placeholder=env.t('newUsername'), ng-model='usernameUpdates.username', required)
-                .form-group
-                  input.form-control(type='password', placeholder=env.t('password'), ng-model='usernameUpdates.password', required)
-                input.btn.btn-default(type='submit', ng-disabled='changeUsername.$invalid', value=env.t('submit'))
-
-              h5=env.t('changeEmail')
-              form(ng-submit='changeUser("email", emailUpdates)', ng-show='user.auth.local', name='changeEmail', novalidate)
-                .form-group
-                  input.form-control(type='text', placeholder=env.t('newEmail'), ng-model='emailUpdates.newEmail', required)
-                .form-group
-                  input.form-control(type='password', placeholder=env.t('password'), ng-model='emailUpdates.password', required)
-                input.btn.btn-default(type='submit', ng-disabled='changeEmail.$invalid', value=env.t('submit'))
-
-              h5=env.t('changePass')
-              form(ng-submit='changeUser("password", passwordUpdates)', ng-show='user.auth.local', name='changePassword', novalidate)
-                .form-group
-                  input.form-control(type='password', placeholder=env.t('oldPass'), ng-model='passwordUpdates.password', required)
-                .form-group
-                  input.form-control(type='password', placeholder=env.t('newPass'), ng-model='passwordUpdates.newPassword', required)
-                .form-group
-                  input.form-control(type='password', placeholder=env.t('confirmPass'), ng-model='passwordUpdates.confirmPassword', required)
-                input.btn.btn-default(type='submit', ng-disabled='changePassword.$invalid', value=env.t('submit'))
-
-
-        .panel.panel-default
-          .panel-heading
-            span=env.t('dangerZone')
-          .panel-body
-            a.btn.btn-danger(ng-click='openModal("reset", {controller:"SettingsCtrl"})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('resetAccPop'))= env.t('resetAccount')
-            a.btn.btn-danger(ng-click='openModal("delete", {controller:"SettingsCtrl"})', popover-trigger='mouseenter', popover=env.t('deleteAccPop'))= env.t('deleteAccount')
+script(type='text/ng-template', id='partials/options.settings.settings.html')
+  .container-fluid
+    .row
+      .personal-options.col-md-6
+        .panel.panel-default
+          .panel-heading
+            =env.t('settings')
+          .panel-body
+
+            .form-horizontal
+              h5=env.t('language')
+              select.form-control(ng-model='language.code', ng-options='lang.code as lang.name for lang in availableLanguages', ng-change='changeLanguage()')
+              small
+                !=env.t('americanEnglishGovern')
+                br
+                strong
+                  !=env.t('helpWithTranslation')
+
+            hr
+
+            .form-horizontal
+              h5=env.t('dateFormat')
+              select.form-control(ng-model='user.preferences.dateFormat', ng-options='DF for DF in availableFormats', ng-change='set({"preferences.dateFormat": user.preferences.dateFormat})')
+
+            hr
+
+            .checkbox
+              label
+                input(type='checkbox', ng-click='hideHeader() ', ng-checked='user.preferences.hideHeader!==true')
+                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('showHeaderPop'))=env.t('showHeader')
+            .checkbox
+              label
+                input(type='checkbox', ng-click='toggleStickyHeader()', ng-checked='user.preferences.stickyHeader!==false', ng-disabled="user.preferences.hideHeader!==false")
+                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('stickyHeaderPop'))=env.t('stickyHeader')
+            .checkbox
+              label
+                input(type='checkbox', ng-model='user.preferences.newTaskEdit', ng-change='set({"preferences.newTaskEdit": user.preferences.newTaskEdit?true: false})')
+                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('newTaskEditPop'))=env.t('newTaskEdit')
+            .checkbox
+              label
+                input(type='checkbox', ng-model='user.preferences.tagsCollapsed', ng-change='set({"preferences.tagsCollapsed": user.preferences.tagsCollapsed?true: false})')
+                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('startCollapsedPop'))=env.t('startCollapsed')
+            .checkbox
+              label
+                input(type='checkbox', ng-model='user.preferences.advancedCollapsed', ng-change='set({"preferences.advancedCollapsed": user.preferences.advancedCollapsed?true: false})')
+                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('startAdvCollapsedPop'))=env.t('startAdvCollapsed')
+            .checkbox
+              label
+                input(type='checkbox', ng-model='user.preferences.dailyDueDefaultView', ng-change='set({"preferences.dailyDueDefaultView": user.preferences.dailyDueDefaultView?true: false})')
+                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('dailyDueDefaultViewPop'))=env.t('dailyDueDefaultView')
+            .checkbox(ng-if='party.memberCount === 1')
+              label
+                input(type='checkbox', ng-model='user.preferences.displayInviteToPartyWhenPartyIs1', ng-change='set({"preferences.displayInviteToPartyWhenPartyIs1": user.preferences.displayInviteToPartyWhenPartyIs1 ? true : false})')
+                span.hint(popover-trigger='mouseenter', popover-placement='right', popover=env.t('displayInviteToPartyWhenPartyIs1'))=env.t('displayInviteToPartyWhenPartyIs1')
+            .checkbox
+              label=env.t('suppressLevelUpModal')
+                input(type='checkbox', ng-model='user.preferences.suppressModals.levelUp', ng-change='set({"preferences.suppressModals.levelUp": user.preferences.suppressModals.levelUp?true: false})')
+            .checkbox
+              label=env.t('suppressHatchPetModal')
+                input(type='checkbox', ng-model='user.preferences.suppressModals.hatchPet', ng-change='set({"preferences.suppressModals.hatchPet": user.preferences.suppressModals.hatchPet?true: false})')
+            .checkbox
+              label=env.t('suppressRaisePetModal')
+                input(type='checkbox', ng-model='user.preferences.suppressModals.raisePet', ng-change='set({"preferences.suppressModals.raisePet": user.preferences.suppressModals.raisePet?true: false})')
+            .checkbox
+              label=env.t('suppressStreakModal')
+                input(type='checkbox', ng-model='user.preferences.suppressModals.streak', ng-change='set({"preferences.suppressModals.streak": user.preferences.suppressModals.streak?true: false})')
+            //- .checkbox
+            //-   label=env.t('confirmScoreNotes')
+            //-     input(type='checkbox', ng-model='user.preferences.tasks.confirmScoreNotes', ng-change='set({"preferences.tasks.confirmScoreNotes": user.preferences.tasks.confirmScoreNotes ? true: false})')
+
+            //- .checkbox
+            //-   label=env.t('groupTasksByChallenge')
+            //-     input(type='checkbox', ng-model='user.preferences.tasks.groupByChallenge', ng-change='set({"preferences.tasks.groupByChallenge": user.preferences.tasks.groupByChallenge ? true: false})')
+
+            hr
+
+            button.btn.btn-default(ng-click='showBailey()', popover-trigger='mouseenter', popover-placement='right', popover=env.t('showBaileyPop'))= env.t('showBailey')
+            button.btn.btn-default(ng-click='openRestoreModal()', popover-trigger='mouseenter', popover-placement='right', popover=env.t('fixValPop'))= env.t('fixVal')
+            button.btn.btn-default(ng-if='user.preferences.disableClasses==true', ng-click='User.changeClass({})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('enableClassPop'))= env.t('enableClass')
+
+            hr
+
+            h5=env.t('customDayStart')
+            alert.alert-warning=env.t('customDayStartInfo1')
+
+            .form-horizontal
+              .form-group
+                .col-sm-7
+                  select.form-control(ng-model='dayStart')
+                    - var number = 0
+                    while number < 24
+                      - var value = number
+                      - var meridian = number < 12 ? 'AM' : 'PM'
+                      - var hour = number++ % 12
+                      option(value=value) #{hour ? hour : 12}:00 #{meridian}
+
+                .col-sm-5
+                  br.visible-xs
+                  button.btn.btn-block.btn-primary(ng-click='openDayStartModal(dayStart)',
+                    ng-disabled='dayStart == user.preferences.dayStart')
+                    =env.t('saveCustomDayStart')
+
+            hr
+
+            h5=env.t('timezone')
+            .form-horizontal
+              .form-group
+                .col-sm-12
+                  p!=env.t('timezoneUTC', {utc: "{{ user.preferences.timezoneOffset | timezoneOffsetToUtc }}"})
+                  br
+                  p!=env.t('timezoneInfo')
+
+      .personal-options.col-md-6
+        .panel.panel-default
+          .panel-heading
+            span=env.t('registration')
+          .panel-body
+            div
+              ul.list-inline
+                li(ng-repeat='network in SOCIAL_AUTH_NETWORKS')
+                  button.btn.btn-primary(ng-if='!user.auth[network.key].id', ng-click='socialLogin(network.key, user)')=env.t('registerWithSocial', {network: '{{network.name}}'})
+                  button.btn.btn-primary(disabled='disabled', ng-if='!hasBackupAuthOption(user, network.key) && user.auth[network.key].id')=env.t('registeredWithSocial', {network: '{{network.name}}'})
+                  button.btn.btn-danger(ng-click='deleteSocialAuth(network.key)', ng-if='hasBackupAuthOption(user, network.key) && user.auth[network.key].id')=env.t('detachSocial', {network: '{{network.name}}'})
+              hr
+              div(ng-if='!user.auth.local.username')
+                p=env.t('addLocalAuth')
+                form(ng-submit='http("post", "/api/v3/user/auth/local/register", localAuth, "addedLocalAuth")', ng-init='localAuth={}', name='localAuth', novalidate)
+                  //-.alert.alert-danger(ng-messages='changeUsername.$error && changeUsername.submitted')=env.t('fillAll')
+                  .form-group
+                    input.form-control(type='text', placeholder=env.t('username'), ng-model='localAuth.username', required)
+                  .form-group
+                    input.form-control(type='text', placeholder=env.t('email'), ng-model='localAuth.email', required)
+                  .form-group
+                    input.form-control(type='password', placeholder=env.t('password'), ng-model='localAuth.password', required)
+                  .form-group
+                    input.form-control(type='password', placeholder=env.t('confirmPass'), ng-model='localAuth.confirmPassword', required)
+                  input.btn.btn-default(type='submit', ng-disabled='localAuth.$invalid', value=env.t('submit'))
+
+            div(ng-if='user.auth.local.username')
+              p=env.t('username')
+                |: {{user.auth.local.username}}
+              p
+                small.muted
+                    =env.t('loginNameDescription1')
+                    |&nbsp;
+                    a(href='/#/options/profile/profile')=env.t('loginNameDescription2')
+                    |&nbsp;
+                    =env.t('loginNameDescription3')
+              p=env.t('email')
+                |: {{user.auth.local.email}}
+              hr
+
+              h5=env.t('changeUsername')
+              form(ng-submit='changeUser("username", usernameUpdates)', ng-init='usernameUpdates={}', ng-show='user.auth.local', name='changeUsername', novalidate)
+                //-.alert.alert-danger(ng-messages='changeUsername.$error && changeUsername.submitted')=env.t('fillAll')
+                .form-group
+                  input.form-control(type='text', placeholder=env.t('newUsername'), ng-model='usernameUpdates.username', required)
+                .form-group
+                  input.form-control(type='password', placeholder=env.t('password'), ng-model='usernameUpdates.password', required)
+                input.btn.btn-default(type='submit', ng-disabled='changeUsername.$invalid', value=env.t('submit'))
+
+              h5=env.t('changeEmail')
+              form(ng-submit='changeUser("email", emailUpdates)', ng-show='user.auth.local', name='changeEmail', novalidate)
+                .form-group
+                  input.form-control(type='text', placeholder=env.t('newEmail'), ng-model='emailUpdates.newEmail', required)
+                .form-group
+                  input.form-control(type='password', placeholder=env.t('password'), ng-model='emailUpdates.password', required)
+                input.btn.btn-default(type='submit', ng-disabled='changeEmail.$invalid', value=env.t('submit'))
+
+              h5=env.t('changePass')
+              form(ng-submit='changeUser("password", passwordUpdates)', ng-show='user.auth.local', name='changePassword', novalidate)
+                .form-group
+                  input.form-control(type='password', placeholder=env.t('oldPass'), ng-model='passwordUpdates.password', required)
+                .form-group
+                  input.form-control(type='password', placeholder=env.t('newPass'), ng-model='passwordUpdates.newPassword', required)
+                .form-group
+                  input.form-control(type='password', placeholder=env.t('confirmPass'), ng-model='passwordUpdates.confirmPassword', required)
+                input.btn.btn-default(type='submit', ng-disabled='changePassword.$invalid', value=env.t('submit'))
+
+
+        .panel.panel-default
+          .panel-heading
+            span=env.t('dangerZone')
+          .panel-body
+            a.btn.btn-danger(ng-click='openModal("reset", {controller:"SettingsCtrl"})', popover-trigger='mouseenter', popover-placement='right', popover=env.t('resetAccPop'))= env.t('resetAccount')
+            a.btn.btn-danger(ng-click='openModal("delete", {controller:"SettingsCtrl"})', popover-trigger='mouseenter', popover=env.t('deleteAccPop'))= env.t('deleteAccount')
diff --git a/website/views/options/social/group.jade b/website/views/options/social/group.jade
index 7cac400daa..51fc476bb1 100644
--- a/website/views/options/social/group.jade
+++ b/website/views/options/social/group.jade
@@ -107,7 +107,7 @@ a.pull-right.gem-wallet(ng-if='group.type!="party"', popover-trigger='mouseenter
             table.table.table-striped(ng-show='::group.memberCount > 1 || group.type !== "party"' bindonce='group')
               tr(ng-repeat='member in group.members track by member._id')
                 td.media
-                  // allow leaders and administrators to ban members
+                  // allow leaders and administrators to remove members
                   .pull-left(ng-show='(isAbleToEditGroup(group) && member._id != user._id)')
                     a.media-object(ng-click='removeMember(group, member, true)')
                       span.glyphicon.glyphicon-ban-circle(tooltip=env.t('banTip'))
@@ -130,7 +130,7 @@ a.pull-right.gem-wallet(ng-if='group.type!="party"', popover-trigger='mouseenter
             table.table.table-striped
               tr(ng-repeat='invite in group.invites')
                 td.media
-                  // allow leaders and administrators to ban members
+                  // allow leaders and administrators to remove members
                   .pull-left(ng-show='isAbleToEditGroup(group)')
                     a.media-object(ng-click='removeMember(group, invite, false)')
                       span.glyphicon.glyphicon-ban-circle(tooltip=env.t('banTip'))
diff --git a/website/views/shared/modals/task-notes.jade b/website/views/shared/modals/task-notes.jade
index fcad3da5c5..c68bb6b9fd 100644
--- a/website/views/shared/modals/task-notes.jade
+++ b/website/views/shared/modals/task-notes.jade
@@ -1,10 +1,10 @@
-script(type='text/ng-template', id='modals/task-notes.html')
-  .modal-header
-    h4 Task Notes
-
-  .modal-body
-    textarea.form-control(ng-model="task.scoreNotes", row="10")
-
-  .modal-footer
-    .btn.btn-default(ng-click='$close()')=env.t('cancel')
-    .btn.btn-primary(ng-click="$close(task)")=env.t('save')
+script(type='text/ng-template', id='modals/task-notes.html')
+  .modal-header
+    h4 Task Notes
+
+  .modal-body
+    textarea.form-control(ng-model="task.scoreNotes", row="10")
+
+  .modal-footer
+    .btn.btn-default(ng-click='$close()')=env.t('cancel')
+    .btn.btn-primary(ng-click="$close(task)")=env.t('save')
diff --git a/website/views/shared/modals/tasks-edit.jade b/website/views/shared/modals/tasks-edit.jade
index 0ed820bb76..8459ee3c16 100644
--- a/website/views/shared/modals/tasks-edit.jade
+++ b/website/views/shared/modals/tasks-edit.jade
@@ -1,6 +1,6 @@
-script(type='text/ng-template', id='modals/task-edit.html')
-  .modal-content.task-modal(style='min-width:22em', class='{{taskStatus}}', id="task-{{task._id}}")
-    .modal-body.text-center(style='padding-bottom:0')
-      include ../tasks/edit/index
-    .modal-footer(style='margin-top:0')
-      .container-fluid
+script(type='text/ng-template', id='modals/task-edit.html')
+  .modal-content.task-modal(style='min-width:22em', class='{{taskStatus}}', id="task-{{task._id}}")
+    .modal-body.text-center(style='padding-bottom:0')
+      include ../tasks/edit/index
+    .modal-footer(style='margin-top:0')
+      .container-fluid
diff --git a/website/views/shared/tasks/task-list.jade b/website/views/shared/tasks/task-list.jade
index c1a65a15dd..18a81f6bc0 100644
--- a/website/views/shared/tasks/task-list.jade
+++ b/website/views/shared/tasks/task-list.jade
@@ -1,20 +1,20 @@
-script(id='templates/task-list.html', type="text/ng-template")
-  ul(ng-init='setObj(obj)', class='{{::list.type}}s main-list',
-    ng-show='obj[list.type+"s"].length > 0',
-    ng-if='showNormalList(obj)')
-    task(hrpg-sort-tasks)
-
-  div(ng-init='setObj(obj);')
-    div(
-      ng-repeat="(key, taskList) in groupedList[list.type]",
-      ng-if='showGroupedList(obj)')
-      h3 {{key}}
-      ul(class='{{::list.type}}s main-list',
-        ng-show='taskList.length > 0')
-        task(hrpg-sort-tasks)
-
-  //Loads the non-sortable lists for challenges
-  ul(ng-init='setObj(obj)', class='{{::list.type}}s main-list',
-    ng-show='obj[list.type + "s"].length > 0',
-    ng-if='showChallengeList()')
-    task
+script(id='templates/task-list.html', type="text/ng-template")
+  ul(ng-init='setObj(obj)', class='{{::list.type}}s main-list',
+    ng-show='obj[list.type+"s"].length > 0',
+    ng-if='showNormalList(obj)')
+    task(hrpg-sort-tasks)
+
+  div(ng-init='setObj(obj);')
+    div(
+      ng-repeat="(key, taskList) in groupedList[list.type]",
+      ng-if='showGroupedList(obj)')
+      h3 {{key}}
+      ul(class='{{::list.type}}s main-list',
+        ng-show='taskList.length > 0')
+        task(hrpg-sort-tasks)
+
+  //Loads the non-sortable lists for challenges
+  ul(ng-init='setObj(obj)', class='{{::list.type}}s main-list',
+    ng-show='obj[list.type + "s"].length > 0',
+    ng-if='showChallengeList()')
+    task