From ffe46c0f07be36885907f8712e138cc88e0d4039 Mon Sep 17 00:00:00 2001
From: Keith Holliday <krh121791@yahoo.com>
Date: Mon, 31 Jul 2017 13:54:52 -0600
Subject: [PATCH] Many updates on our large list (#8905)

* Many updates on our large list

* Added footer debug functions
---
 .../components/achievements/welcome.vue       |   48 +
 website/client/components/appFooter.vue       |  285 ++--
 website/client/components/appHeader.vue       |    9 +-
 website/client/components/appMenu.vue         |    2 +-
 .../client/components/auth/registerLogin.vue  |   36 +-
 .../components/challenges/challengeDetail.vue |   26 +-
 .../components/challenges/challengeModal.vue  |  210 ++-
 .../components/challenges/findChallenges.vue  |   53 +-
 .../components/challenges/groupChallenges.vue |   13 +-
 .../components/challenges/myChallenges.vue    |   52 +-
 .../client/components/challenges/sidebar.vue  |   28 +-
 website/client/components/creatorIntro.vue    |  409 +++---
 .../components/groups/createPartyModal.vue    |   35 +-
 .../client/components/groups/discovery.vue    |   51 +-
 .../components/groups/groupFormModal.vue      |  104 +-
 .../client/components/groups/groupPlan.vue    |    6 +
 website/client/components/groups/guild.vue    |   60 +-
 .../client/components/groups/membersModal.vue |   20 +-
 website/client/components/groups/myGuilds.vue |   20 +-
 website/client/components/groups/tavern.vue   |   11 +-
 website/client/components/modifyInventory.vue |  320 +++++
 .../client/components/notificationMenu.vue    |   76 +-
 website/client/components/notifications.vue   |    8 +
 website/client/components/static/faq.vue      |    4 +-
 website/client/components/static/front.vue    | 1169 +++++++++--------
 .../client/components/userMenu/profile.vue    |  460 ++++++-
 website/client/components/userMenu/stats.vue  |    2 -
 website/client/mixins/challengeUtilities.js   |   47 +
 website/client/mixins/groupsUtilities.js      |   19 +-
 website/client/mixins/guide.js                |  325 +++++
 website/client/router.js                      |   14 +-
 website/client/store/actions/challenges.js    |    8 +-
 website/client/store/actions/guilds.js        |   15 +-
 website/client/store/actions/members.js       |    4 +-
 website/client/store/index.js                 |    6 +
 website/common/locales/en/newClient.json      |    5 +-
 website/server/controllers/api-v3/members.js  |    5 +
 37 files changed, 2731 insertions(+), 1234 deletions(-)
 create mode 100644 website/client/components/achievements/welcome.vue
 create mode 100644 website/client/components/modifyInventory.vue
 create mode 100644 website/client/mixins/challengeUtilities.js
 create mode 100644 website/client/mixins/guide.js

diff --git a/website/client/components/achievements/welcome.vue b/website/client/components/achievements/welcome.vue
new file mode 100644
index 0000000000..f4a0568cd2
--- /dev/null
+++ b/website/client/components/achievements/welcome.vue
@@ -0,0 +1,48 @@
+<template lang="pug">
+  b-modal#welcome(:title="$t('welcomeToHabit')", size='lg', :hide-footer="true")
+    .modal-body.container-fluid
+      .row
+        .col-4.col-centered
+          span(style='display:flex')
+            h1
+              | &#9312;
+            h3(style='margin:auto auto auto .5em') {{ $t('welcome1') }}
+          .welcome_basic_avatars(style='margin: 1.5em auto 1.5em')
+          h4 {{ $t('welcome1notes') }}
+        .col-4.col-centered
+          span(style='display:flex')
+            h1
+              | &#9313;
+            h3(style='margin:.3em auto auto .5em') {{ $t('welcome2') }}
+          .welcome_sample_tasks(style='margin: 2.5em auto 1.5em')
+          h4 {{ $t('welcome2notes') }}
+        .col-4.col-centered
+          span(style='display:flex')
+            h1
+              | &#9314;
+            h3(style='margin:auto auto auto .5em') {{ $t('welcome3') }}
+          .welcome_promo_party(style='margin: 1em auto 1em')
+          h4 {{ $t('welcome3notes') }}
+    .modal-footer.text-center(style='margin-top:0')
+      .col-3
+      .col-6
+        button.btn.btn-primary.btn-lg.flex-column(@click='ready()') {{ $t('imReady') }}
+      .col-3
+</template>
+
+<script>
+import bModal from 'bootstrap-vue/lib/components/modal';
+
+export default {
+  components: {
+    bModal,
+  },
+  methods: {
+    ready () {
+      // Guide.goto("intro",0)'
+      this.$router.push('/avatar');
+      this.$root.$emit('hide::modal', 'welcome');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/appFooter.vue b/website/client/components/appFooter.vue
index 170e9cb785..72907266de 100644
--- a/website/client/components/appFooter.vue
+++ b/website/client/components/appFooter.vue
@@ -1,46 +1,72 @@
-<template lang="pug">
+<template lang='pug'>
 .row
+  modify-inventory
   footer.container-fluid
     .row
       .col-2
-        h3 iOS App
-        h3 Android App
+        h3
+          a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') iOS App
+        h3
+          a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') Android App
       .col-2
         h3 Company
         ul
-          li How it Works
-          li Blog
-          li Tumblr
-          li FAQ
-          li News
-          li Merchandis
-          li Press Kit
-          li Contact Us
+          li
+            a(href='/static/features') How it Works
+          li
+            a(href='https://habitica.wordpress.com/') Blog
+          li
+            a(href='http://blog.habitrpg.com/') Tumblr
+          li
+            a(href='/static/faq') FAQ
+          li
+            a(href='/static/old-news') News
+          li
+            a(href='/static/merch') Merchandise
+          li
+            a(href='/static/press-kit') Press Kit
+          li
+            a(href='/static/contact') Contact Us
       .col-2
         h3 Community
         ul
-          li Community Guidelines
-          li Submit a Bug
-          li Request a Feature
-          li Add-Ons & Extensions
-          li Forum
-          li Kickstarter
-          li Facebook
-          li Reddit
+          li
+            a(href='/static/community-guidelines') Community Guidelines
+          li
+            router-link(to='/groups/a29da26b-37de-4a71-b0c6-48e72a900dac') Submit a Bug
+          li
+            a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', target='_blank') Request a Feature
+          li
+            a(href='http://habitica.wikia.com/wiki/Extensions,_Add-Ons,_and_Customizations', target='_blank') Add-Ons & Extensions
+          li
+            a(href='http://habitica.wikia.com/wiki/Special:Forum', target='_blank') Forum
+          li
+            a(href='https://www.kickstarter.com/projects/lefnire/habitrpg-mobile', target='_blank') Kickstarter
+          li
+            a(href='https://www.facebook.com/Habitica', target='_blank') Facebook
+          li
+            a(href='https://www.reddit.com/r/habitrpg/', target='_blank') Reddit
       .col-6
         .row
           .col-6
             h3 Developers
             ul
-              li APIv3
-              li Data Display Tool
-              li Guidance for Blacksmiths
-              li The Forge - Developer Blog
+              li
+                a(href='/apidoc', target='_blank') APIv3
+              li
+                a(href='http://data.habitrpg.com/?uuid=', target='_blank') Data Display Tool
+              li
+                a(href='http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths', target='_blank') Guidance for Blacksmiths
+              li
+                a(href='http://devs.habitica.com/', target='_blank') The Forge - Developer Blog
           .col-6
             h3 Social
-            .social-circle Twitter
-            .social-circle Instagram
-            .social-circle Facebook
+            .social-circle
+              a(href='https://twitter.com/habitica', target='_blank') Twitter
+            .social-circle
+              a(href='https://www.instagram.com/habitica/', target='_blank') Instagram
+            .social-circle
+              a(href='https://www.facebook.com/Habitica', target='_blank') Facebook
         .row
           .col-10
             | We’re an open source project that depends on our users for support. The money you donate helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers.
@@ -56,6 +82,23 @@
       .col-4.text-right
         span Privacy Policy
         span Terms of Use
+    .row
+      h4 Debug
+      .btn-group-vertical
+        a.btn.btn-default(@click='setHealthLow()') Health = 1
+        a.btn.btn-default(@click='addMissedDay(1)') +1 Missed Day
+        a.btn.btn-default(@click='addMissedDay(2)') +2 Missed Days
+        a.btn.btn-default(@click='addMissedDay(8)') +8 Missed Days
+        a.btn.btn-default(@click='addMissedDay(32)') +32 Missed Days
+        a.btn.btn-default(@click='addTenGems()') +10 Gems
+        a.btn.btn-default(@click='addHourglass()') +1 Mystic Hourglass
+        a.btn.btn-default(@click='addGold()') +500GP
+        a.btn.btn-default(@click='addMana()') +MP
+        a.btn.btn-default(@click='addLevelsAndGold()') +Exp +GP +MP
+        a.btn.btn-default(@click='addOneLevel()') +1 Level
+        a.btn.btn-default(@click='addQuestProgress()' tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
+        a.btn.btn-default(@click='makeAdmin()') Make Admin
+        a.btn.btn-default(@click='openModifyInventoryModal()') Modify Inventory
 </template>
 
 <style scoped>
@@ -99,11 +142,19 @@
 </style>
 
 <script>
+import axios from 'axios';
+import moment from 'moment';
+import { mapState } from 'client/libs/store';
 import gryphon from 'assets/svg/gryphon.svg';
 
+import modifyInventory from './modifyInventory';
+
 // const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
 
 export default {
+  components: {
+    modifyInventory,
+  },
   data () {
     return {
       icons: Object.freeze({
@@ -111,113 +162,83 @@ export default {
       }),
     };
   },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
   methods: {
-    // @TODO: add https://github.com/HabitRPG/habitica/blob/develop/website/client-old/js/controllers/footerCtrl.js$scope.setHealthLow = function(){
-  //   $scope.setHealthLow = function(){
-  //     User.set({
-  //       'stats.hp': 1
-  //     });
-  //   };
-  //
-  //   $scope.addMissedDay = function(numberOfDays){
-  //     if (!confirm("Are you sure you want to reset the day by " + numberOfDays + " day(s)?")) return;
-  //
-  //     User.setCron(numberOfDays);
-  //   };
-  //
-  //   $scope.addTenGems = function(){
-  //     User.addTenGems();
-  //   };
-  //
-  //   $scope.addHourglass = function(){
-  //     User.addHourglass();
-  //   };
-  //
-  //   $scope.addGold = function(){
-  //     User.set({
-  //       'stats.gp': User.user.stats.gp + 500,
-  //     });
-  //   };
-  //
-  //   $scope.addMana = function(){
-  //     User.set({
-  //       'stats.mp': User.user.stats.mp + 500,
-  //     });
-  //   };
-  //
-  //   $scope.addLevelsAndGold = function(){
-  //     User.set({
-  //       'stats.exp': User.user.stats.exp + 10000,
-  //       'stats.gp':  User.user.stats.gp  + 10000,
-  //       'stats.mp':  User.user.stats.mp  + 10000
-  //     });
-  //   };
-  //
-  //   $scope.addOneLevel = function(){
-  //     User.set({
-  //       'stats.exp': User.user.stats.exp + (Math.round(((Math.pow(User.user.stats.lvl, 2) * 0.25) + (10 * User.user.stats.lvl) + 139.75) / 10) * 10)
-  //     });
-  //   };
-  //
-  //   $scope.addQuestProgress = function(){
-  //     $http({
-  //       method: "POST",
-  //       url: 'api/v3/debug/quest-progress'
-  //     })
-  //     .then(function (response) {
-  //       Notification.text('Quest progress increased');
-  //       User.sync();
-  //     })
-  //   };
-  //
-  //   $scope.makeAdmin = function () {
-  //     User.makeAdmin();
-  //   };
-  //
-  //   $scope.openModifyInventoryModal = function () {
-  //     $rootScope.openModal('modify-inventory', {controller: 'FooterCtrl', scope: $scope });
-  //     $scope.showInv = { };
-  //     $scope.inv = {
-  //       gear: {},
-  //       special: {},
-  //       pets: {},
-  //       mounts: {},
-  //       eggs: {},
-  //       hatchingPotions: {},
-  //       food: {},
-  //       quests: {},
-  //     };
-  //     $scope.setAllItems = function (type, value) {
-  //       var set = $scope.inv[type];
-  //
-  //       for (var item in set) {
-  //         if (set.hasOwnProperty(item)) {
-  //           set[item] = value;
-  //         }
-  //       }
-  //     };
-  //   };
-  //
-  //   $scope.modifyInventory = function () {
-  //     $http({
-  //       method: "POST",
-  //       url: 'api/v3/debug/modify-inventory',
-  //       data: {
-  //         gear: $scope.showInv.gear ? $scope.inv.gear : null,
-  //         special: $scope.showInv.special ? $scope.inv.special : null,
-  //         pets: $scope.showInv.pets ? $scope.inv.pets : null,
-  //         mounts: $scope.showInv.mounts ? $scope.inv.mounts : null,
-  //         eggs: $scope.showInv.eggs ? $scope.inv.eggs : null,
-  //         hatchingPotions: $scope.showInv.hatchingPotions ? $scope.inv.hatchingPotions : null,
-  //         food: $scope.showInv.food ? $scope.inv.food : null,
-  //         quests: $scope.showInv.quests ? $scope.inv.quests : null,
-  //       }
-  //     })
-  //     .then(function (response) {
-  //       Notification.text('Inventory updated. Refresh or sync.');
-  //     })
-  //   };
-  // }
+    setHealthLow () {
+      this.$store.dispatch('user:set', {
+        'stats.hp': 1,
+      });
+    },
+    async addMissedDay (numberOfDays) {
+      if (!confirm(`Are you sure you want to reset the day by ${numberOfDays} day(s)?`)) return;
+
+      let date = moment(this.user.lastCron).subtract(numberOfDays, 'days').toDate();
+
+      await axios.post('/api/v3/debug/set-cron', {
+        lastCron: date,
+      });
+
+      // @TODO: Notification.text('-' + numberOfDays + ' day(s), remember to refresh');
+      // @TODO: Sync user?
+    },
+    async addTenGems () {
+      // @TODO: User.addTenGems();
+      await axios.post('/api/v3/debug/add-ten-gems');
+      // @TODO: Notification.text('+10 Gems!');
+      this.user.balance += 2.5;
+    },
+    async addHourglass () {
+      await axios.post('/api/v3/debug/add-hourglass');
+      // @TODO: Sync?
+    },
+    addGold () {
+      this.$store.dispatch('user:set', {
+        'stats.gp': this.user.stats.gp + 500,
+      });
+    },
+    addMana () {
+      this.$store.dispatch('user:set', {
+        'stats.mp': this.user.stats.mp + 500,
+      });
+    },
+    addLevelsAndGold () {
+      this.$store.dispatch('user:set', {
+        'stats.exp': this.user.stats.exp + 10000,
+        'stats.gp': this.user.stats.gp  + 10000,
+        'stats.mp': this.user.stats.mp  + 10000,
+      });
+    },
+    addOneLevel () {
+      // @TODO: Name these variables better
+      let exp = 0;
+      let five = 10 * this.user.stats.lvl;
+      let four = Math.pow(this.user.stats.lvl, 2) * 0.25;
+      let three = four + five + 139.75;
+      let two = three / 10;
+      let one = Math.round(two) * 10;
+      exp = this.user.stats.exp + one;
+
+      this.$store.dispatch('user:set', {
+        'stats.exp': exp,
+      });
+    },
+    async addQuestProgress () {
+      await axios.post('/api/v3/debug/quest-progress');
+
+      //  @TODO:  Notification.text('Quest progress increased');
+      //  @TODO:  User.sync();
+    },
+    async makeAdmin  () {
+      await axios.post('/api/v3/debug/make-admin');
+
+      // @TODO: Notification.text('You are now an admin! Go to the Hall of Heroes to change your contributor level.');
+      // @TODO: sync()
+    },
+    openModifyInventoryModal  () {
+      this.$root.$emit('show::modal', 'modify-inventory');
+    },
   },
 };
 </script>
diff --git a/website/client/components/appHeader.vue b/website/client/components/appHeader.vue
index e496347bd9..5b42e8d5a5 100644
--- a/website/client/components/appHeader.vue
+++ b/website/client/components/appHeader.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
-#app-header.row(:class='{sticky: user.preferences.stickyHeader}')
+#app-header.row(:class='{sticky: user.preferences.stickyHeader}', v-if='showHeader')
+  create-party-modal
   members-modal(:group='user.party', :hide-badge="true")
   member-details(:member="user", @click="$router.push({name: 'avatar'})")
   .view-party(v-if="user.party && user.party._id")
@@ -102,6 +103,10 @@ export default {
       user: 'user:data',
       partyMembers: 'party:members',
     }),
+    showHeader () {
+      if (this.$store.state.hideHeader) return false;
+      return true;
+    },
   },
   methods: {
     ...mapActions({
@@ -115,7 +120,7 @@ export default {
       }
     },
     openPartyModal () {
-      this.$root.$emit('show::modal', 'members-modal');
+      this.$root.$emit('show::modal', 'create-party-modal');
     },
   },
   created () {
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 081a892d79..1fe8de3e52 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -33,7 +33,7 @@ div
           a.nav-link(v-once) {{ $t('group') }}
         router-link.nav-item(tag="li", :to="{name: 'myChallenges'}", exact)
           a.nav-link(v-once) {{ $t('challenges') }}
-        router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
+        router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}", :to="{name: 'faq'}")
           a.nav-link(v-once) {{ $t('help') }}
           .dropdown-menu
             router-link.dropdown-item(:to="{name: 'faq'}") {{ $t('faq') }}
diff --git a/website/client/components/auth/registerLogin.vue b/website/client/components/auth/registerLogin.vue
index 7be5b3e007..f242ba3bcc 100644
--- a/website/client/components/auth/registerLogin.vue
+++ b/website/client/components/auth/registerLogin.vue
@@ -13,11 +13,11 @@
       .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'})}}
+          span {{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'})}}
+          span {{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')
@@ -30,10 +30,14 @@
     .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')}}
+      small.form-text(v-once, v-html="$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')}}
+      router-link(tag="li", :to="{name: 'login'}", v-if='registering', exact)
+        a(v-once) {{ $t('login') }}
+      router-link(tag="li", :to="{name: 'register'}",  v-if='!registering', exact)
+        a(v-once) {{ $t('joinHabitica') }}
 
   #bottom-background
     .seamless_mountains_demo_repeat
@@ -58,13 +62,14 @@
     .gryphon {
       width: 63.2px;
       height: 69.4px;
+      color: $white;
+      margin: 0 auto;
     }
 
     .habitica-logo {
       width: 144px;
       height: 31px;
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin: 2em auto;
     }
 
     label {
@@ -107,6 +112,8 @@
     .social-icon {
       margin-right: 1em;
       width: 13px;
+      display: inline-block;
+      height: 13px;
     }
   }
 
@@ -157,7 +164,6 @@ export default {
       email: '',
       password: '',
       passwordConfirm: '',
-      registering: true,
     };
 
     data.icons = Object.freeze({
@@ -169,11 +175,15 @@ export default {
 
     return data;
   },
+  computed: {
+    registering () {
+      if (this.$route.path.startsWith('/login')) {
+        return false;
+      }
+      return true;
+    },
+  },
   mounted () {
-    if (this.$route.path.startsWith('/login')) {
-      this.registering = false;
-    }
-
     hello.init({
       facebook: '',
       // windows: WINDOWS_CLIENT_ID,
@@ -205,7 +215,7 @@ export default {
         passwordConfirm: this.passwordConfirm,
       });
 
-      this.$router.go('/tasks');
+      this.$router.push('/tasks');
     },
     async login () {
       await this.$store.dispatch('auth:login', {
@@ -214,7 +224,7 @@ export default {
         password: this.password,
       });
 
-      this.$router.go('/tasks');
+      this.$router.push('/tasks');
     },
     async socialAuth (network) {
       let auth = await hello(network).login({scope: 'email'});
@@ -223,7 +233,7 @@ export default {
         auth,
       });
 
-      this.$router.go('/tasks');
+      this.$router.push('/tasks');
     },
   },
 };
diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index dddcfc28bc..f683705aaf 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 .row
-  challenge-modal(:challenge='challenge')
+  challenge-modal(:challenge='challenge', v-on:updatedChallenge='updatedChallenge')
   close-challenge-modal
 
   .col-8.standard-page
@@ -10,17 +10,17 @@
         div
           strong(v-once) {{$t('createdBy')}}
           span {{challenge.author}}
-          strong.margin-left(v-once)
+          // @TODO: Implement in V2 strong.margin-left(v-once)
             .svg-icon.calendar-icon(v-html="icons.calendarIcon")
             | {{$t('endDate')}}
           span {{challenge.endDate}}
         .tags
           span.tag(v-for='tag in challenge.tags') {{tag}}
       .col-4
-        .box
+        .box(@click="showMemberModal()")
           .svg-icon.member-icon(v-html="icons.memberIcon")
           | {{challenge.memberCount}}
-          .details(v-once) {{$t('participants')}}
+          .details(v-once) {{$t('participantsTitle')}}
         .box
           .svg-icon.gem-icon(v-html="icons.gemIcon")
           | {{challenge.prize}}
@@ -149,6 +149,7 @@ export default {
         calendarIcon,
       }),
       challenge: {},
+      members: [],
     };
   },
   computed: {
@@ -157,16 +158,18 @@ export default {
       return this.user.challenges.indexOf(this.challenge._id) !== -1;
     },
     isLeader () {
-      if (!this.leader) return false;
-      return this.user._id === this.leader.id;
+      if (!this.challenge.leader) return false;
+      return this.user._id === this.challenge.leader._id;
     },
   },
-  mounted () {
-    this.getChallenge();
+  async mounted () {
+    this.challenge = await this.$store.dispatch('challenges:getChallenge', {challengeId: this.challengeId});
+    this.members = await this.$store.dispatch('members:getChallengeMembers', {challengeId: this.challengeId});
   },
   methods: {
-    async getChallenge () {
-      this.challenge = await this.$store.dispatch('challenges:getChallenge', {challengeId: this.challengeId});
+    showMemberModal () {
+      this.$store.state.viewingMembers = this.members;
+      this.$root.$emit('show::modal', 'members-modal');
     },
     async joinChallenge () {
       this.user.challenges.push(this.challengeId);
@@ -187,6 +190,9 @@ export default {
       this.$root.$emit('show::modal', 'challenge-modal');
     },
     // @TODO: view members
+    updatedChallenge (eventData) {
+      Object.assign(this.challenge, eventData.challenge);
+    },
   },
 };
 </script>
diff --git a/website/client/components/challenges/challengeModal.vue b/website/client/components/challenges/challengeModal.vue
index 799d9c24cc..ad884464f8 100644
--- a/website/client/components/challenges/challengeModal.vue
+++ b/website/client/components/challenges/challengeModal.vue
@@ -1,16 +1,20 @@
 <template lang="pug">
   b-modal#challenge-modal(:title="$t('createChallenge')", size='lg')
-    form(@submit.stop.prevent="submit")
+    .form
       .form-group
         label
           strong(v-once) {{$t('name')}}*
         b-form-input(type="text", :placeholder="$t('challengeNamePlaceHolder')", v-model="workingChallenge.name")
+      .form-group
+        label
+          strong(v-once) {{$t('shortName')}}*
+        b-form-input(type="text", :placeholder="$t('challengeNamePlaceHolder')", v-model="workingChallenge.shortName")
       .form-group
         label
           strong(v-once) {{$t('description')}}*
         div.description-count.float-right {{charactersRemaining}} {{ $t('charactersRemaining') }}
         b-form-input.description-textarea(type="text", textarea, :placeholder="$t('challengeDescriptionPlaceHolder')", v-model="workingChallenge.description")
-      .form-group
+      // @TODO: Implemenet in V2 .form-group
         label
           strong(v-once) {{$t('guildInformation')}}*
         a.float-right {{ $t('markdownFormattingHelp') }}
@@ -18,27 +22,38 @@
       .form-group(v-if='creating')
         label
           strong(v-once) {{$t('where')}}
-        b-dropdown(:text="$t('sort')", right=true)
-          b-dropdown-item(@click='sort(option.value)')
-      .form-group
+        select.form-control(v-model='workingChallenge.group')
+          option(v-for='group in groups', :value='group._id') {{group.name}}
+      .form-group(v-if='workingChallenge.categories')
         label
           strong(v-once) {{$t('categories')}}*
-        b-dropdown(:text="$t('sort')", right=true)
-          b-dropdown-item(@click='sort(option.value)')
-            | Member
-      .form-group
+        div.category-wrap(@click.prevent="toggleCategorySelect")
+          span.category-select(v-if='workingChallenge.categories.length === 0') {{$t('none')}}
+          .category-label(v-for='category in workingChallenge.categories') {{$t(categoriesHashByKey[category])}}
+        .category-box(v-if="showCategorySelect")
+          .form-check(
+            v-for="group in categoryOptions",
+            :key="group.key",
+          )
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox", :value='group.key' v-model="workingChallenge.categories")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t(group.label) }}
+          button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
+      // @TODO: Implement in V2 .form-group
         label
           strong(v-once) {{$t('endDate')}}
         b-form-input.end-date-input
       .form-group
         label
           strong(v-once) {{$t('prize')}}
-        b-dropdown(:text="$t('sort')", right=true)
-          b-dropdown-item(@click='sort(option.value)')
-            | Member
+        input(type='number', min='1', :max='maxPrize')
       .row.footer-wrap
         .col-12.text-center.submit-button-wrapper
-          button.btn.btn-primary(v-once) {{$t('createChallenge')}}
+          .alert.alert-warning(v-if='insufficientGemsForTavernChallenge')
+            You do not have enough gems to create a Tavern challenge
+          button.btn.btn-primary(v-once, v-if='creating', @click='createChallenge()') {{$t('createChallenge')}}
+          button.btn.btn-primary(v-once, v-if='!creating', @click='updateChallenge()') {{$t('updateChallenge')}}
         .col-12.text-center
           p(v-once) {{$t('challengeMinimum')}}
 </template>
@@ -90,6 +105,14 @@
       margin-top: 2em;
       margin-bottom: 2em;
     }
+
+    .category-wrap {
+      position: relative;
+    }
+
+    .category-box {
+      top: -40px !important;
+    }
   }
 </style>
 
@@ -99,6 +122,9 @@ import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import bFormInput from 'bootstrap-vue/lib/components/form-input';
 
+import { TAVERN_ID } from '../../../common/script/constants';
+import { mapState } from 'client/libs/store';
+
 export default {
   props: ['challenge'],
   components: {
@@ -108,51 +134,151 @@ export default {
     bFormInput,
   },
   data () {
+    let categoryOptions = [
+      {
+        label: 'animals',
+        key: 'animals',
+      },
+      {
+        label: 'artDesign',
+        key: 'art_design',
+      },
+      {
+        label: 'booksWriting',
+        key: 'books_writing',
+      },
+      {
+        label: 'comicsHobbies',
+        key: 'comics_hobbies',
+      },
+      {
+        label: 'diyCrafts',
+        key: 'diy_crafts',
+      },
+      {
+        label: 'education',
+        key: 'education',
+      },
+      {
+        label: 'foodCooking',
+        key: 'food_cooking',
+      },
+      {
+        label: 'healthFitness',
+        key: 'health_fitness',
+      },
+      {
+        label: 'music',
+        key: 'music',
+      },
+      {
+        label: 'relationship',
+        key: 'relationship',
+      },
+      {
+        label: 'scienceTech',
+        key: 'science_tech ',
+      },
+    ];
+    let hashedCategories = {};
+    categoryOptions.forEach((category) => {
+      hashedCategories[category.key] = category.label;
+    });
+    let categoriesHashByKey = hashedCategories;
+
     return {
       creating: true,
       charactersRemaining: 250,
-      workingChallenge: {
-        name: '',
-        description: '',
-        information: '',
-      },
+      workingChallenge: {},
+      showCategorySelect: false,
+      categoryOptions,
+      categoriesHashByKey,
+      groups: [],
     };
   },
-  mounted () {
-    if (this.challenge) {
-      this.workingChallenge = this.challenge;
-      this.creating = false;
-    }
+  async mounted () {
+    this.$root.$on('shown::modal', () => {
+      if (this.challenge) {
+        Object.assign(this.workingChallenge, this.challenge);
+        this.workingChallenge.categories = [];
+        this.creating = false;
+      }
+    });
+
+    this.groups = await this.$store.dispatch('guilds:getMyGuilds');
+    this.ressetWorkingChallenge();
+  },
+  watch: {
+    user () {
+      if (!this.challenge) this.workingChallenge.leader = this.user._id;
+    },
   },
   computed: {
+    ...mapState({user: 'user.data'}),
     maxPrize () {
-      // var groupBalance = 0;
-      // var group = _.find($scope.groups, { _id: gid });
-      //
-      // if (group && group.balance && group.leader === User.user._id) {
-      //   groupBalance = group.balance * 4;
-      // }
-      //
-      // return groupBalance;
-      // return userBalance + availableGroupBalance;
+      let userBalance = this.user.balance || 0;
+      userBalance = userBalance * 4;
+
+      let groupBalance = 0;
+      let group = find(this.groups, { _id: this.workingChallenge.group });
+
+      if (group && group.balance && group.leader === this.user._id) {
+        groupBalance = group.balance * 4;
+      }
+
+      return userBalance + groupBalance;
     },
     insufficientGemsForTavernChallenge () {
-      // var balance = User.user.balance || 0;
-      // var isForTavern = $scope.newChallenge.group == TAVERN_ID;
-      //
-      // if (isForTavern) {
-      //   return balance <= 0;
-      // } else {
-      //   return false;
-      // }
+      let balance = this.user.balance || 0;
+      let isForTavern = this.workingChallenge.group === TAVERN_ID;
+
+      if (isForTavern) {
+        return balance <= 0;
+      } else {
+        return false;
+      }
     },
   },
   methods: {
+    ressetWorkingChallenge () {
+      this.workingChallenge = {
+        name: '',
+        description: '',
+        information: '',
+        categories: [],
+        group: '',
+        dailys: [],
+        habits: [],
+        leader: '',
+        members: [],
+        official: false,
+        prize: 1,
+        rewards: [],
+        shortName: '',
+        todos: [],
+      };
+    },
     createChallenge () {
-      // this.$store.dispatch('challenges:createChallenge', {challenge: this.workingChallenge});
+      if (!this.workingChallenge.name) alert('Name is required');
+      if (!this.workingChallenge.description) alert('Description is required');
+
+      this.workingChallenge.timestamp = new Date().getTime();
+
+      this.$store.dispatch('challenges:createChallenge', {challenge: this.workingChallenge});
+
+      this.ressetWorkingChallenge();
+      this.$root.$emit('hide::modal', 'challenge-modal');
     },
     updateChallenge () {
-      // this.$store.dispatch('challenges:updateChallenge', {challenge: this.workingChallenge});
+      this.$emit('updatedChallenge', {
+        challenge: this.workingChallenge,
+      });
+      this.$store.dispatch('challenges:updateChallenge', {challenge: this.workingChallenge});
+      this.ressetWorkingChallenge();
+      this.$root.$emit('hide::modal', 'challenge-modal');
+    },
+    toggleCategorySelect () {
+      this.showCategorySelect = !this.showCategorySelect;
     },
   },
 };
diff --git a/website/client/components/challenges/findChallenges.vue b/website/client/components/challenges/findChallenges.vue
index 551c38b9b9..bf6ddb2588 100644
--- a/website/client/components/challenges/findChallenges.vue
+++ b/website/client/components/challenges/findChallenges.vue
@@ -8,14 +8,14 @@
       .col-md-8.text-left
         h1(v-once) {{$t('findChallenges')}}
       .col-md-4
-        span.dropdown-label {{ $t('sortBy') }}
-        b-dropdown(:text="$t('sort')", right=true)
-          b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+        // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
+          b-dropdown(:text="$t('sort')", right=true)
+            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
         button.btn.btn-secondary.create-challenge-button(@click='createChallenge()')
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
           span(v-once) {{$t('createChallenge')}}
     .row
-      .col-6(v-for='challenge in challenges', v-if='!memberOf(challenge)')
+      .col-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
         challenge-item(:challenge='challenge')
 </template>
 
@@ -48,10 +48,12 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
+import challengeUtilities from 'client/mixins/challengeUtilities';
 
 import positiveIcon from 'assets/svg/positive.svg';
 
 export default {
+  mixins: [challengeUtilities],
   components: {
     Sidebar,
     ChallengeItem,
@@ -65,7 +67,31 @@ export default {
         positiveIcon,
       }),
       challenges: [],
-      sortOptions: [],
+      sort: 'none',
+      sortOptions: [
+        {
+          text: this.$t('none'),
+          value: 'none',
+        },
+        {
+          text: this.$t('participants'),
+          value: 'participants',
+        },
+        {
+          text: this.$t('name'),
+          value: 'name',
+        },
+        {
+          text: this.$t('end_date'),
+          value: 'end_date',
+        },
+        {
+          text: this.$t('start_date'),
+          value: 'start_date',
+        },
+      ],
+      search: '',
+      filters: {},
     };
   },
   mounted () {
@@ -75,16 +101,25 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    filteredChallenges () {
+      let search = this.search;
+      let filters = this.filters;
+      let user = this.$store.state.user.data;
+      // @TODO: Move this to the server
+      return this.challenges.filter((challenge) => {
+        return this.filterChallenge(challenge, filters, search, user);
+      });
+    },
   },
   methods: {
     memberOf (challenge) {
       return this.user.challenges.indexOf(challenge._id) !== -1;
     },
-    updateSearch () {
-
+    updateSearch (eventData) {
+      this.search = eventData.searchTerm;
     },
-    updateFilters () {
-
+    updateFilters (eventData) {
+      this.filters = eventData;
     },
     createChallenge () {
       this.$root.$emit('show::modal', 'challenge-modal');
diff --git a/website/client/components/challenges/groupChallenges.vue b/website/client/components/challenges/groupChallenges.vue
index 81169d9818..65a20f4d0c 100644
--- a/website/client/components/challenges/groupChallenges.vue
+++ b/website/client/components/challenges/groupChallenges.vue
@@ -1,11 +1,12 @@
 <template lang="pug">
 div
+  challenge-modal
   .row.no-quest-section(v-if='challenges.length === 0')
     .col-12.text-center
       .svg-icon.challenge-icon(v-html="icons.challengeIcon")
       h4(v-once) {{ $t('haveNoChallenges') }}
       p(v-once) {{ $t('challengeDescription') }}
-      button.btn.btn-secondary(v-once) {{ $t('createChallenge') }}
+      button.btn.btn-secondary(v-once, @click='createChallenge()') {{ $t('createChallenge') }}
   .col-12.challenge-item(v-for='challenge in challenges')
     .row
       .col-9
@@ -77,12 +78,17 @@ div
 </style>
 
 <script>
+import challengeModal from './challengeModal';
+
 import gemIcon from 'assets/svg/gem.svg';
 import memberIcon from 'assets/svg/member-icon.svg';
 import challengeIcon from 'assets/svg/challenge.svg';
 
 export default {
   props: ['groupId'],
+  components: {
+    challengeModal,
+  },
   async mounted () {
     this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupId});
   },
@@ -96,5 +102,10 @@ export default {
       }),
     };
   },
+  methods: {
+    createChallenge () {
+      this.$root.$emit('show::modal', 'challenge-modal');
+    },
+  },
 };
 </script>
diff --git a/website/client/components/challenges/myChallenges.vue b/website/client/components/challenges/myChallenges.vue
index 76aaff8ea6..6f01251623 100644
--- a/website/client/components/challenges/myChallenges.vue
+++ b/website/client/components/challenges/myChallenges.vue
@@ -8,9 +8,9 @@
       .col-md-8.text-left
         h1(v-once) {{$t('myChallenges')}}
       .col-md-4
-        span.dropdown-label {{ $t('sortBy') }}
-        b-dropdown(:text="$t('sort')", right=true)
-          b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+        // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
+          b-dropdown(:text="$t('sort')", right=true)
+            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
         button.btn.btn-secondary.create-challenge-button(@click='createChallenge()')
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
           span(v-once) {{$t('createChallenge')}}
@@ -70,11 +70,13 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
+import challengeUtilities from 'client/mixins/challengeUtilities';
 
 import challengeIcon from 'assets/svg/challenge.svg';
 import positiveIcon from 'assets/svg/positive.svg';
 
 export default {
+  mixins: [challengeUtilities],
   components: {
     Sidebar,
     ChallengeItem,
@@ -89,7 +91,33 @@ export default {
         positiveIcon,
       }),
       challenges: [],
-      sortOptions: [],
+      sort: 'none',
+      sortOptions: [
+        {
+          text: this.$t('none'),
+          value: 'none',
+        },
+        {
+          text: this.$t('participants'),
+          value: 'participants',
+        },
+        {
+          text: this.$t('name'),
+          value: 'name',
+        },
+        {
+          text: this.$t('end_date'),
+          value: 'end_date',
+        },
+        {
+          text: this.$t('start_date'),
+          value: 'start_date',
+        },
+      ],
+      search: '',
+      filters: {
+        roles: ['member'], // This is required for my challenges
+      },
     };
   },
   mounted () {
@@ -98,10 +126,12 @@ export default {
   computed: {
     ...mapState({user: 'user.data'}),
     filteredChallenges () {
+      let search = this.search;
+      let filters = this.filters;
+      let user = this.$store.state.user.data;
+      // @TODO: Move this to the server
       return this.challenges.filter((challenge) => {
-        let isMember = this.memberOf(challenge);
-        // @TODO: Other filters
-        return isMember;
+        return this.filterChallenge(challenge, filters, search, user);
       });
     },
   },
@@ -109,11 +139,11 @@ export default {
     memberOf (challenge) {
       return this.user.challenges.indexOf(challenge._id) !== -1;
     },
-    updateSearch () {
-
+    updateSearch (eventData) {
+      this.search = eventData.searchTerm;
     },
-    updateFilters () {
-
+    updateFilters (eventData) {
+      this.filters = eventData;
     },
     createChallenge () {
       this.$root.$emit('show::modal', 'challenge-modal');
diff --git a/website/client/components/challenges/sidebar.vue b/website/client/components/challenges/sidebar.vue
index a5011e7293..a3c0aeaf2f 100644
--- a/website/client/components/challenges/sidebar.vue
+++ b/website/client/components/challenges/sidebar.vue
@@ -28,11 +28,11 @@
     .form-group
       h3 Ownership
       .form-check(
-        v-for="group in guildSizeOptions",
+        v-for="group in ownershipOptions",
         :key="group.key",
       )
         label.custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters")
+          input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t(group.label) }}
 </template>
@@ -76,13 +76,13 @@ export default {
           label: 'not_participating',
           key: 'not_participating',
         },
-        {
-          label: 'either',
-          key: 'either',
-        },
+        // {
+        //   label: 'either',
+        //   key: 'either',
+        // },
       ],
-      guildSizeFilters: [],
-      guildSizeOptions: [
+      ownershipFilters: [],
+      ownershipOptions: [
         {
           label: 'owned',
           key: 'owned',
@@ -91,10 +91,10 @@ export default {
           label: 'not_owned',
           key: 'not_owned',
         },
-        {
-          label: 'either',
-          key: 'either',
-        },
+        // {
+        //   label: 'either',
+        //   key: 'either',
+        // },
       ],
       searchTerm: '',
     };
@@ -106,7 +106,7 @@ export default {
     roleFilters: function roleFilters () {
       this.emitFilters();
     },
-    guildSizeFilters: function guildSizeFilters () {
+    ownershipFilters: function ownershipFilters () {
       this.emitFilters();
     },
     searchTerm: throttle(function searchTerm (newSearch) {
@@ -120,7 +120,7 @@ export default {
       this.$emit('filter', {
         categories: this.categoryFilters,
         roles: this.roleFilters,
-        guildSize: this.guildSizeFilters,
+        ownership: this.ownershipFilters,
       });
     },
   },
diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
index d15bf55967..360d2adf3a 100644
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -1,207 +1,208 @@
 <template lang="pug">
-#creator-background
-  #creator-modal
-    .section.row.welcome-section(v-if='modalPage == 1')
-      .col-6.offset-3.text-center
-        h3(v-once) {{$t('welcomeTo')}}
-        .svg-icon.logo(v-html='icons.logoPurple')
+b-modal#avatar-modal(title="", size='md', :hide-header='true', :hide-footer='true')
+  .section.row.welcome-section(v-if='modalPage == 1')
+    .col-6.offset-3.text-center
+      h3(v-once) {{$t('welcomeTo')}}
+      .svg-icon.logo(v-html='icons.logoPurple')
 
+  .section.row
+    .col-6.offset-3
+      .user-creation-bg
+      avatar(:member='user')
+
+  div(v-if='modalPage == 2')
     .section.row
-      .col-6.offset-3
-        .user-creation-bg
-        avatar(:member='user')
+      .col-12.text-center
+        button.btn.btn-secondary(v-once) {{$t('randomize')}}
+    .section.row.text-center.customize-menu
+      .col-3
+        .menu-item(@click='changeTopPage("body", "size")')
+          .svg-icon(v-html='icons.bodyIcon')
+        strong(v-once) {{$t('body')}}
+      .col-3
+        .menu-item(@click='changeTopPage("skin", "color")')
+          .svg-icon(v-html='icons.skinIcon')
+        strong(v-once) {{$t('skin')}}
+      .col-3
+        .menu-item(@click='changeTopPage("hair", "color")')
+          .svg-icon(v-html='icons.hairIcon')
+        strong(v-once) {{$t('hair')}}
+      .col-3
+        .menu-item(@click='changeTopPage("extra", "glasses")')
+          .svg-icon(v-html='icons.accessoriesIcon')
+        strong(v-once) {{$t('extra')}}
+    .section.customize-section(v-if='activeTopPage === "body"')
+      .row.sub-menu
+          .col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
+            strong(v-once) {{$t('size')}}
+          .col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
+            strong(v-once) {{$t('shirt')}}
+      .row(v-if='activeSubPage === "size"')
+        .col-12.customize-options.size-options
+          .slim_shirt_black.option(@click='set({"preferences.size":"slim"})', :class='{active: user.preferences.size === "slim"}')
+          .broad_shirt_black.option(@click='set({"preferences.size":"broad"})', :class='{active: user.preferences.size === "broad"}')
+      .row(v-if='activeSubPage === "shirt"')
+        .col-12.customize-options
+          .slim_shirt_black.option(@click='set({"preferences.shirt":"black"})', :class='{active: user.preferences.shirt === "black"}')
+          .slim_shirt_blue.option(@click='set({"preferences.shirt":"blue"})', :class='{active: user.preferences.shirt === "blue"}')
+          .slim_shirt_green.option(@click='set({"preferences.shirt":"green"})', :class='{active: user.preferences.shirt === "green"}')
+          .slim_shirt_pink.option(@click='set({"preferences.shirt":"pink"})', :class='{active: user.preferences.shirt === "pink"}')
+          .slim_shirt_white.option(@click='set({"preferences.shirt":"white"})', :class='{active: user.preferences.shirt === "white"}')
+          .slim_shirt_yellow.option(@click='set({"preferences.shirt":"yellow"})', :class='{active: user.preferences.shirt === "yellow"}')
 
-    div(v-if='modalPage == 2')
-      .section.row
-        .col-12.text-center
-          button.btn.btn-secondary(v-once) {{$t('randomize')}}
-      .section.row.text-center.customize-menu
-        .col-3
-          .menu-item(@click='changeTopPage("body", "size")')
-            .svg-icon(v-html='icons.bodyIcon')
-          strong(v-once) {{$t('body')}}
-        .col-3
-          .menu-item(@click='changeTopPage("skin", "color")')
-            .svg-icon(v-html='icons.skinIcon')
-          strong(v-once) {{$t('skin')}}
-        .col-3
-          .menu-item(@click='changeTopPage("hair", "color")')
-            .svg-icon(v-html='icons.hairIcon')
-          strong(v-once) {{$t('hair')}}
-        .col-3
-          .menu-item(@click='changeTopPage("extra", "glasses")')
-            .svg-icon(v-html='icons.accessoriesIcon')
-          strong(v-once) {{$t('extra')}}
-      .section.customize-section(v-if='activeTopPage === "body"')
-        .row.sub-menu
-            .col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
-              strong(v-once) {{$t('size')}}
-            .col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
-              strong(v-once) {{$t('shirt')}}
-        .row(v-if='activeSubPage === "size"')
-          .col-12.customize-options.size-options
-            .slim_shirt_black.option(@click='set({"preferences.size":"slim"})', :class='{active: user.preferences.size === "slim"}')
-            .broad_shirt_black.option(@click='set({"preferences.size":"broad"})', :class='{active: user.preferences.size === "broad"}')
-        .row(v-if='activeSubPage === "shirt"')
-          .col-12.customize-options
-            .slim_shirt_black.option(@click='set({"preferences.shirt":"black"})', :class='{active: user.preferences.shirt === "black"}')
-            .slim_shirt_blue.option(@click='set({"preferences.shirt":"blue"})', :class='{active: user.preferences.shirt === "blue"}')
-            .slim_shirt_green.option(@click='set({"preferences.shirt":"green"})', :class='{active: user.preferences.shirt === "green"}')
-            .slim_shirt_pink.option(@click='set({"preferences.shirt":"pink"})', :class='{active: user.preferences.shirt === "pink"}')
-            .slim_shirt_white.option(@click='set({"preferences.shirt":"white"})', :class='{active: user.preferences.shirt === "white"}')
-            .slim_shirt_yellow.option(@click='set({"preferences.shirt":"yellow"})', :class='{active: user.preferences.shirt === "yellow"}')
-
-      .section.customize-section(v-if='activeTopPage === "skin"')
-        .row.sub-menu
-            .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
-              strong(v-once) {{$t('color')}}
-        .row
-          .col-12.customize-options
-            .skin_ddc994.option(@click='set({"preferences.skin":"ddc994"})', :class='{active: user.preferences.skin === "ddc994"}')
-            .skin_f5a76e.option(@click='set({"preferences.skin":"f5a76e"})', :class='{active: user.preferences.skin === "f5a76e"}')
-            .skin_ea8349.option(@click='set({"preferences.skin":"ea8349"})', :class='{active: user.preferences.skin === "ea8349"}')
-            .skin_c06534.option(@click='set({"preferences.skin":"c06534"})', :class='{active: user.preferences.skin === "c06534"}')
-            .skin_98461a.option(@click='set({"preferences.skin":"98461a"})', :class='{active: user.preferences.skin === "98461a"}')
-            .skin_915533.option(@click='set({"preferences.skin":"915533"})', :class='{active: user.preferences.skin === "915533"}')
-            .skin_c3e1dc.option(@click='set({"preferences.skin":"c3e1dc"})', :class='{active: user.preferences.skin === "c3e1dc"}')
-            .skin_6bd049.option(@click='set({"preferences.skin":"6bd049"})', :class='{active: user.preferences.skin === "6bd049"}')
-
-      .section.customize-section(v-if='activeTopPage === "hair"')
-        .row.sub-menu
-            .col-2.offset-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
-              strong(v-once) {{$t('color')}}
-            .col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
-              strong(v-once) {{$t('bangs')}}
-            .col-2.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
-              strong(v-once) {{$t('ponytail')}}
-        .row(v-if='activeSubPage === "color"')
-          .col-12.customize-options
-            .hair_bangs_1_white.option(@click='set({"preferences.hair.color": "white"})', :class='{active: user.preferences.hair.color === "white"}')
-            .hair_bangs_1_brown.option(@click='set({"preferences.hair.color": "brown"})', :class='{active: user.preferences.hair.color === "brown"}')
-            .hair_bangs_1_blond.option(@click='set({"preferences.hair.color": "blond"})', :class='{active: user.preferences.hair.color === "blond"}')
-            .hair_bangs_1_red.option(@click='set({"preferences.hair.color": "red"})', :class='{active: user.preferences.hair.color === "red"}')
-            .hair_bangs_1_black.option(@click='set({"preferences.hair.color": "black"})', :class='{active: user.preferences.hair.color === "black"}')
-        .row(v-if='activeSubPage === "bangs"')
-          .col-12.customize-options
-            .head_0.option(@click='set({"preferences.hair.bangs": 0})', :class="[{ active: user.preferences.hair.bangs === 0 }, 'hair_bangs_0_' + user.preferences.hair.color]")
-            .option(@click='set({"preferences.hair.bangs": 1})', :class="[{ active: user.preferences.hair.bangs === 1 }, 'hair_bangs_1_' + user.preferences.hair.color]")
-            .option(@click='set({"preferences.hair.bangs": 2})',:class="[{ active: user.preferences.hair.bangs === 2 }, 'hair_bangs_2_' + user.preferences.hair.color]")
-            .option(@click='set({"preferences.hair.bangs": 3})', :class="[{ active: user.preferences.hair.bangs === 3 }, 'hair_bangs_3_' + user.preferences.hair.color]")
-            .option(@click='set({"preferences.hair.bangs": 4})', :class="[{ active: user.preferences.hair.bangs === 4 }, 'hair_bangs_4_' + user.preferences.hair.color]")
-        .row(v-if='activeSubPage === "ponytail"')
-          .col-12.customize-options
-            .head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
-            .hair_base_1_blond.option(@click='set({"preferences.hair.base": 1})', :class="[{ active: user.preferences.hair.base === 1 }, 'hair_base_1_' + user.preferences.hair.color]")
-            .hair_base_3_blond.option(@click='set({"preferences.hair.base": 3})', :class="[{ active: user.preferences.hair.base === 3 }, 'hair_base_3_' + user.preferences.hair.color]")
-
-      .section.container.customize-section(v-if='activeTopPage === "extra"')
-        .row.sub-menu
-            .col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
-              strong(v-once) {{$t('glasses')}}
-            .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
-              strong(v-once) {{$t('wheelchair')}}
-            .col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
-              strong(v-once) {{$t('flower')}}
-        .row(v-if='activeSubPage === "glasses"')
-          .col-12.customize-options
-            .eyewear_special_blackTopFrame.option(@click='equip("eyewear_special_blackTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blackTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blackTopFrame"}')
-            .eyewear_special_blueTopFrame.option(@click='equip("eyewear_special_blueTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blueTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blueTopFrame"}')
-            .eyewear_special_greenTopFrame.option(@click='equip("eyewear_special_greenTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_greenTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_greenTopFrame"}')
-            .eyewear_special_pinkTopFrame.option(@click='equip("eyewear_special_pinkTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_pinkTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_pinkTopFrame"}')
-            .eyewear_special_redTopFrame.option(@click='equip("eyewear_special_redTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_redTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_redTopFrame"}')
-            .eyewear_special_whiteTopFrame.option(@click='equip("eyewear_special_whiteTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_whiteTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_whiteTopFrame"}')
-            .eyewear_special_yellowTopFrame.option(@click='equip("eyewear_special_yellowTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_yellowTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_yellowTopFrame"}')
-        .row(v-if='activeSubPage === "wheelchair"')
-          .col-12.customize-options.weelchairs
-            .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
-              | None
-            .option(@click='set({"preferences.chair": "black"})', :class='{active: user.preferences.chair === "black"}')
-              .button_chair_black
-            .option(@click='set({"preferences.chair": "blue"})', :class='{active: user.preferences.chair === "blue"}')
-              .button_chair_blue
-            .option(@click='set({"preferences.chair": "green"})', :class='{active: user.preferences.chair === "green"}')
-              .button_chair_green
-            .option(@click='set({"preferences.chair": "pink"})', :class='{active: user.preferences.chair === "pink"}')
-              .button_chair_pink
-            .option(@click='set({"preferences.chair": "red"})', :class='{active: user.preferences.chair === "red"}')
-              .button_chair_red
-            .option(@click='set({"preferences.chair": "yellow"})', :class='{active: user.preferences.chair === "yellow"}')
-              .button_chair_yellow
-        .row(v-if='activeSubPage === "flower"')
-          .col-12.customize-options
-            .head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
-            .hair_flower_1.option(@click='set({"preferences.hair.flower":1})', :class='{active: user.preferences.hair.flower === 1}')
-            .hair_flower_2.option(@click='set({"preferences.hair.flower":2})', :class='{active: user.preferences.hair.flower === 2}')
-            .hair_flower_3.option(@click='set({"preferences.hair.flower":3})', :class='{active: user.preferences.hair.flower === 3}')
-            .hair_flower_4.option(@click='set({"preferences.hair.flower":4})', :class='{active: user.preferences.hair.flower === 4}')
-            .hair_flower_5.option(@click='set({"preferences.hair.flower":5})', :class='{active: user.preferences.hair.flower === 5}')
-            .hair_flower_6.option(@click='set({"preferences.hair.flower":6})', :class='{active: user.preferences.hair.flower === 6}')
-
-    .container.interests-section(v-if='modalPage == 3')
-      .section.row
-        .col-12.text-center
-          h2 I want to work on:
-      .section.row
-        .col-4.offset-2
-          div
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t('work') }}
-          div
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t('excercise') }}
-          div
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t('health') }}
-          div
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t('school') }}
-        .col-4
-          div
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t('chores') }}
-          div
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t('creativity') }}
-          div
-            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox")
-              span.custom-control-indicator
-              span.custom-control-description(v-once) {{ $t('budgeting') }}
-
-    .section.row.justin-message-section(:class='{top: modalPage > 1}')
-      .col-9
-        .justin-message(v-if='modalPage == 1')
-          p(v-once) {{$t('justinIntroMessage1')}}
-          p(v-once) {{$t('justinIntroMessage2')}}
-        .justin-message(v-if='modalPage > 1')
-          p(v-once) {{$t('justinIntroMessage3')}}
-
-    .section.container.footer
+    .section.customize-section(v-if='activeTopPage === "skin"')
+      .row.sub-menu
+          .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
+            strong(v-once) {{$t('color')}}
       .row
-        .col-3.offset-1.text-center
-          div(v-if='modalPage > 1', @click='prev()')
-            .prev-arrow
-            .prev(v-once) {{$t('prev')}}
-        .col-4.text-center.circles
-          .circle(:class="{active: modalPage === 1}")
-          .circle(:class="{active: modalPage === 2}")
-          .circle(:class="{active: modalPage === 3}")
-        .col-3.text-center
-          div(v-if='modalPage < 3', @click='next()')
-            .next(v-once) {{$t('next')}}
-            .next-arrow
+        .col-12.customize-options
+          .skin_ddc994.option(@click='set({"preferences.skin":"ddc994"})', :class='{active: user.preferences.skin === "ddc994"}')
+          .skin_f5a76e.option(@click='set({"preferences.skin":"f5a76e"})', :class='{active: user.preferences.skin === "f5a76e"}')
+          .skin_ea8349.option(@click='set({"preferences.skin":"ea8349"})', :class='{active: user.preferences.skin === "ea8349"}')
+          .skin_c06534.option(@click='set({"preferences.skin":"c06534"})', :class='{active: user.preferences.skin === "c06534"}')
+          .skin_98461a.option(@click='set({"preferences.skin":"98461a"})', :class='{active: user.preferences.skin === "98461a"}')
+          .skin_915533.option(@click='set({"preferences.skin":"915533"})', :class='{active: user.preferences.skin === "915533"}')
+          .skin_c3e1dc.option(@click='set({"preferences.skin":"c3e1dc"})', :class='{active: user.preferences.skin === "c3e1dc"}')
+          .skin_6bd049.option(@click='set({"preferences.skin":"6bd049"})', :class='{active: user.preferences.skin === "6bd049"}')
+
+    .section.customize-section(v-if='activeTopPage === "hair"')
+      .row.sub-menu
+          .col-2.offset-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
+            strong(v-once) {{$t('color')}}
+          .col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
+            strong(v-once) {{$t('bangs')}}
+          .col-2.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
+            strong(v-once) {{$t('ponytail')}}
+      .row(v-if='activeSubPage === "color"')
+        .col-12.customize-options
+          .hair_bangs_1_white.option(@click='set({"preferences.hair.color": "white"})', :class='{active: user.preferences.hair.color === "white"}')
+          .hair_bangs_1_brown.option(@click='set({"preferences.hair.color": "brown"})', :class='{active: user.preferences.hair.color === "brown"}')
+          .hair_bangs_1_blond.option(@click='set({"preferences.hair.color": "blond"})', :class='{active: user.preferences.hair.color === "blond"}')
+          .hair_bangs_1_red.option(@click='set({"preferences.hair.color": "red"})', :class='{active: user.preferences.hair.color === "red"}')
+          .hair_bangs_1_black.option(@click='set({"preferences.hair.color": "black"})', :class='{active: user.preferences.hair.color === "black"}')
+      .row(v-if='activeSubPage === "bangs"')
+        .col-12.customize-options
+          .head_0.option(@click='set({"preferences.hair.bangs": 0})', :class="[{ active: user.preferences.hair.bangs === 0 }, 'hair_bangs_0_' + user.preferences.hair.color]")
+          .option(@click='set({"preferences.hair.bangs": 1})', :class="[{ active: user.preferences.hair.bangs === 1 }, 'hair_bangs_1_' + user.preferences.hair.color]")
+          .option(@click='set({"preferences.hair.bangs": 2})',:class="[{ active: user.preferences.hair.bangs === 2 }, 'hair_bangs_2_' + user.preferences.hair.color]")
+          .option(@click='set({"preferences.hair.bangs": 3})', :class="[{ active: user.preferences.hair.bangs === 3 }, 'hair_bangs_3_' + user.preferences.hair.color]")
+          .option(@click='set({"preferences.hair.bangs": 4})', :class="[{ active: user.preferences.hair.bangs === 4 }, 'hair_bangs_4_' + user.preferences.hair.color]")
+      .row(v-if='activeSubPage === "ponytail"')
+        .col-12.customize-options
+          .head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
+          .hair_base_1_blond.option(@click='set({"preferences.hair.base": 1})', :class="[{ active: user.preferences.hair.base === 1 }, 'hair_base_1_' + user.preferences.hair.color]")
+          .hair_base_3_blond.option(@click='set({"preferences.hair.base": 3})', :class="[{ active: user.preferences.hair.base === 3 }, 'hair_base_3_' + user.preferences.hair.color]")
+
+    .section.container.customize-section(v-if='activeTopPage === "extra"')
+      .row.sub-menu
+          .col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
+            strong(v-once) {{$t('glasses')}}
+          .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
+            strong(v-once) {{$t('wheelchair')}}
+          .col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
+            strong(v-once) {{$t('flower')}}
+      .row(v-if='activeSubPage === "glasses"')
+        .col-12.customize-options
+          .eyewear_special_blackTopFrame.option(@click='equip("eyewear_special_blackTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blackTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blackTopFrame"}')
+          .eyewear_special_blueTopFrame.option(@click='equip("eyewear_special_blueTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blueTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blueTopFrame"}')
+          .eyewear_special_greenTopFrame.option(@click='equip("eyewear_special_greenTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_greenTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_greenTopFrame"}')
+          .eyewear_special_pinkTopFrame.option(@click='equip("eyewear_special_pinkTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_pinkTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_pinkTopFrame"}')
+          .eyewear_special_redTopFrame.option(@click='equip("eyewear_special_redTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_redTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_redTopFrame"}')
+          .eyewear_special_whiteTopFrame.option(@click='equip("eyewear_special_whiteTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_whiteTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_whiteTopFrame"}')
+          .eyewear_special_yellowTopFrame.option(@click='equip("eyewear_special_yellowTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_yellowTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_yellowTopFrame"}')
+      .row(v-if='activeSubPage === "wheelchair"')
+        .col-12.customize-options.weelchairs
+          .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
+            | None
+          .option(@click='set({"preferences.chair": "black"})', :class='{active: user.preferences.chair === "black"}')
+            .button_chair_black
+          .option(@click='set({"preferences.chair": "blue"})', :class='{active: user.preferences.chair === "blue"}')
+            .button_chair_blue
+          .option(@click='set({"preferences.chair": "green"})', :class='{active: user.preferences.chair === "green"}')
+            .button_chair_green
+          .option(@click='set({"preferences.chair": "pink"})', :class='{active: user.preferences.chair === "pink"}')
+            .button_chair_pink
+          .option(@click='set({"preferences.chair": "red"})', :class='{active: user.preferences.chair === "red"}')
+            .button_chair_red
+          .option(@click='set({"preferences.chair": "yellow"})', :class='{active: user.preferences.chair === "yellow"}')
+            .button_chair_yellow
+      .row(v-if='activeSubPage === "flower"')
+        .col-12.customize-options
+          .head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
+          .hair_flower_1.option(@click='set({"preferences.hair.flower":1})', :class='{active: user.preferences.hair.flower === 1}')
+          .hair_flower_2.option(@click='set({"preferences.hair.flower":2})', :class='{active: user.preferences.hair.flower === 2}')
+          .hair_flower_3.option(@click='set({"preferences.hair.flower":3})', :class='{active: user.preferences.hair.flower === 3}')
+          .hair_flower_4.option(@click='set({"preferences.hair.flower":4})', :class='{active: user.preferences.hair.flower === 4}')
+          .hair_flower_5.option(@click='set({"preferences.hair.flower":5})', :class='{active: user.preferences.hair.flower === 5}')
+          .hair_flower_6.option(@click='set({"preferences.hair.flower":6})', :class='{active: user.preferences.hair.flower === 6}')
+
+  .container.interests-section(v-if='modalPage == 3')
+    .section.row
+      .col-12.text-center
+        h2 I want to work on:
+    .section.row
+      .col-4.offset-2
+        div
+          label.custom-control.custom-checkbox
+            input.custom-control-input(type="checkbox")
+            span.custom-control-indicator
+            span.custom-control-description(v-once) {{ $t('work') }}
+        div
+          label.custom-control.custom-checkbox
+            input.custom-control-input(type="checkbox")
+            span.custom-control-indicator
+            span.custom-control-description(v-once) {{ $t('excercise') }}
+        div
+          label.custom-control.custom-checkbox
+            input.custom-control-input(type="checkbox")
+            span.custom-control-indicator
+            span.custom-control-description(v-once) {{ $t('health') }}
+        div
+          label.custom-control.custom-checkbox
+            input.custom-control-input(type="checkbox")
+            span.custom-control-indicator
+            span.custom-control-description(v-once) {{ $t('school') }}
+      .col-4
+        div
+          label.custom-control.custom-checkbox
+            input.custom-control-input(type="checkbox")
+            span.custom-control-indicator
+            span.custom-control-description(v-once) {{ $t('chores') }}
+        div
+          label.custom-control.custom-checkbox
+            input.custom-control-input(type="checkbox")
+            span.custom-control-indicator
+            span.custom-control-description(v-once) {{ $t('creativity') }}
+        div
+          label.custom-control.custom-checkbox
+            input.custom-control-input(type="checkbox")
+            span.custom-control-indicator
+            span.custom-control-description(v-once) {{ $t('budgeting') }}
+
+  .section.row.justin-message-section(:class='{top: modalPage > 1}')
+    .col-9
+      .justin-message(v-if='modalPage == 1')
+        p(v-once) {{$t('justinIntroMessage1')}}
+        p(v-once) {{$t('justinIntroMessage2')}}
+      .justin-message(v-if='modalPage > 1')
+        p(v-once) {{$t('justinIntroMessage3')}}
+
+  .section.container.footer
+    .row
+      .col-3.offset-1.text-center
+        div(v-if='modalPage > 1', @click='prev()')
+          .prev-arrow
+          .prev(v-once) {{$t('prev')}}
+      .col-4.text-center.circles
+        .circle(:class="{active: modalPage === 1}")
+        .circle(:class="{active: modalPage === 2}")
+        .circle(:class="{active: modalPage === 3}")
+      .col-3.text-center
+        div(v-if='modalPage < 3', @click='next()')
+          .next(v-once) {{$t('next')}}
+          .next-arrow
+        div(v-if='modalPage === 3', @click='done()')
+          button.btn.btn-primary.next(v-once) {{$t('done')}}
 </template>
 
 <style lang="scss" scoped>
@@ -399,6 +400,8 @@
 import { mapState } from 'client/libs/store';
 import avatar from './avatar';
 
+import bModal from 'bootstrap-vue/lib/components/modal';
+
 import logoPurple from 'assets/svg/logo-purple.svg';
 import bodyIcon from 'assets/svg/body.svg';
 import accessoriesIcon from 'assets/svg/accessories.svg';
@@ -408,6 +411,10 @@ import hairIcon from 'assets/svg/hair.svg';
 export default {
   components: {
     avatar,
+    bModal,
+  },
+  mounted () {
+    this.$root.$emit('show::modal', 'avatar-modal');
   },
   data () {
     return {
@@ -446,6 +453,10 @@ export default {
     equip (key) {
       this.$store.dispatch('common:equip', {key, type: 'costume'});
     },
+    done () {
+      this.$root.$emit('hide::modal', 'avatar-modal');
+      this.$router.push('/');
+    },
   },
 };
 </script>
diff --git a/website/client/components/groups/createPartyModal.vue b/website/client/components/groups/createPartyModal.vue
index 0e06046833..892b2b873b 100644
--- a/website/client/components/groups/createPartyModal.vue
+++ b/website/client/components/groups/createPartyModal.vue
@@ -11,7 +11,7 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
       img
       h3(v-once) {{$t('startYourOwnPartyTitle')}}
       p(v-once) {{$t('startYourOwnPartyDescription')}}
-      button.btn.btn-primary(v-once) {{$t('createParty')}}
+      button.btn.btn-primary(v-once, @click='createParty()') {{$t('createParty')}}
     .col-6
       div.text-center
         img
@@ -39,6 +39,14 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
 <style lang='scss'>
   @import '~client/assets/scss/colors.scss';
 
+  .header-wrap {
+    color: #4e4a57;
+
+    h2 {
+      color: #4f2a93;
+    }
+  }
+
   .modal-body {
     padding-bottom: 0;
     padding-top: 0;
@@ -46,6 +54,7 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
 
   .grey-row {
     background-color: $gray-700;
+    color: #4e4a57;
     padding: 2em;
     border-radius: 0px 0px 2px 2px;
   }
@@ -81,6 +90,8 @@ b-modal#create-party-modal(title="Empty", size='lg', hide-footer=true)
 </style>
 
 <script>
+import { mapState } from 'client/libs/store';
+
 import bModal from 'bootstrap-vue/lib/components/modal';
 
 import copyIcon from 'assets/svg/copy.svg';
@@ -105,16 +116,20 @@ export default {
       shareUserIdShown: false,
     };
   },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
   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');
-      //   });
+    async createParty () {
+      let group = {
+        type: 'party',
+      };
+      group.name = this.$t('possessiveParty', {name: this.user.profile.name});
+      let party = await this.$store.dispatch('guilds:create', {group});
+      this.$store.state.party = party;
+      this.user.party._id = party._id;
+      this.$root.$emit('hide::modal', 'create-party-modal');
+      //  @TODO: Analytics.updateUser({'partyID': $scope.group ._id, 'partySize': 1});
     },
   },
 };
diff --git a/website/client/components/groups/discovery.vue b/website/client/components/groups/discovery.vue
index fcadef9c83..b1a547cb11 100644
--- a/website/client/components/groups/discovery.vue
+++ b/website/client/components/groups/discovery.vue
@@ -3,27 +3,40 @@
   sidebar(@search="updateSearch", @filter="updateFilters")
 
   .standard-page
-    .clearfix
+    .header.row
+      .col-8
         h1.page-header.float-left(v-once) {{ $t('publicGuilds') }}
-        .float-right
+      .col-4
+        // @TODO: Add when we implement recent activity .float-right
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
             b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
-    .col-md-12
-      public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
-      mugen-scroll(
-        :handler="fetchGuilds",
-        :should-handle="!loading && !this.hasLoadedAllGuilds",
-        :handle-on-mount="false",
-        v-show="loading",
-      )
-        span(v-once) {{ $t('loading') }}
+        button.btn.btn-secondary.create-group-button.float-right(@click='createGroup()')
+          .svg-icon.positive-icon(v-html="icons.positiveIcon")
+          span(v-once) {{$t('create')}}
+    .row
+      .col-md-12
+        public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
+        mugen-scroll(
+          :handler="fetchGuilds",
+          :should-handle="!loading && !this.hasLoadedAllGuilds",
+          :handle-on-mount="false",
+          v-show="loading",
+        )
+          span(v-once) {{ $t('loading') }}
 </template>
 
-<style>
-.sort-select {
-  margin: 2em;
-}
+<style scoped>
+  .sort-select {
+    margin: 2em;
+  }
+
+  .positive-icon {
+    color: $green-10;
+    width: 10px;
+    display: inline-block;
+    margin-right: .5em;
+  }
 </style>
 
 <script>
@@ -36,11 +49,16 @@ import bFormSelect from 'bootstrap-vue/lib/components/form-select';
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 
+import positiveIcon from 'assets/svg/positive.svg';
+
 export default {
   mixins: [groupUtilities],
   components: { PublicGuildItem, MugenScroll, Sidebar, bFormSelect, bDropdown, bDropdownItem },
   data () {
     return {
+      icons: Object.freeze({
+        positiveIcon,
+      }),
       loading: false,
       hasLoadedAllGuilds: false,
       lastPageLoaded: 0,
@@ -99,6 +117,9 @@ export default {
       this.lastPageLoaded++;
       this.loading = false;
     },
+    createGroup () {
+      this.$root.$emit('show::modal', 'guild-form');
+    },
   },
 };
 </script>
diff --git a/website/client/components/groups/groupFormModal.vue b/website/client/components/groups/groupFormModal.vue
index 95cc9243c3..9b4e7b9d82 100644
--- a/website/client/components/groups/groupFormModal.vue
+++ b/website/client/components/groups/groupFormModal.vue
@@ -4,12 +4,12 @@
       .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="workingGuild.name")
 
-      .form-group(v-if='newGuild.id && members.length > 0')
+      .form-group(v-if='workingGuild.id && members.length > 0')
         label
           strong(v-once) {{$t('guildLeader')}}*
-        select.form-control(v-model="newGuild.newLeader")
+        select.form-control(v-model="workingGuild.newLeader")
           option(v-for='member in members', :value="member._id") {{ member.profile.name }}
 
       .form-group
@@ -17,29 +17,29 @@
           strong(v-once) {{$t('privacySettings')}}*
         br
         label.custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", v-model="newGuild.onlyLeaderCreatesChallenges")
+          input.custom-control-input(type="checkbox", v-model="workingGuild.onlyLeaderCreatesChallenges")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('onlyLeaderCreatesChallenges') }}
           b-tooltip.icon(:content="$t('privateDescription')")
             .svg-icon(v-html='icons.information')
 
-        br
-        label.custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", v-model="newGuild.guildLeaderCantBeMessaged")
+        // br
+        // @TODO Implement in V2 label.custom-control.custom-checkbox
+          input.custom-control-input(type="checkbox", v-model="workingGuild.guildLeaderCantBeMessaged")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('guildLeaderCantBeMessaged') }}
 
         br
         label.custom-control.custom-checkbox(v-if='!creatingParty')
-          input.custom-control-input(type="checkbox", v-model="newGuild.privateGuild")
+          input.custom-control-input(type="checkbox", v-model="workingGuild.privateGuild")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('privateGuild') }}
           b-tooltip.icon(:content="$t('privateDescription')")
             .svg-icon(v-html='icons.information')
 
-        br
-        label.custom-control.custom-checkbox(v-if='!creatingParty')
-          input.custom-control-input(type="checkbox", v-model="newGuild.allowGuildInvationsFromNonMembers")
+        // br
+        // @TODO: Implement in v2 label.custom-control.custom-checkbox(v-if='!creatingParty')
+          input.custom-control-input(type="checkbox", v-model="workingGuild.allowGuildInvationsFromNonMembers")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('allowGuildInvationsFromNonMembers') }}
 
@@ -47,14 +47,14 @@
         label
           strong(v-once) {{$t('description')}}*
         div.description-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
-        b-form-input(type="text", textarea :placeholder="creatingParty ? $t('partyDescriptionPlaceHolder') : $t('guildDescriptionPlaceHolder')", v-model="newGuild.description")
+        b-form-input(type="text", textarea :placeholder="creatingParty ? $t('partyDescriptionPlaceHolder') : $t('guildDescriptionPlaceHolder')", v-model="workingGuild.description")
 
-      .form-group(v-if='newGuild.id && !creatingParty')
+      .form-group(v-if='workingGuild.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="workingGuild.guildInformation")
 
-      .form-group(v-if='creatingParty && !newGuild.id')
+      .form-group(v-if='creatingParty && !workingGuild.id')
         span
           toggleSwitch(:label="$t('inviteMembersNow')", v-model='inviteMembers')
 
@@ -62,20 +62,20 @@
         label
           strong(v-once) {{$t('categories')}}*
         div.category-wrap(@click.prevent="toggleCategorySelect")
-          span.category-select(v-if='newGuild.categories.length === 0') {{$t('none')}}
-          .category-label(v-for='category in newGuild.categories') {{$t(categoriesHashByKey[category])}}
+          span.category-select(v-if='workingGuild.categories.length === 0') {{$t('none')}}
+          .category-label(v-for='category in workingGuild.categories') {{$t(categoriesHashByKey[category])}}
         .category-box(v-if="showCategorySelect")
           .form-check(
             v-for="group in categoryOptions",
             :key="group.key",
           )
             label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", :value='group.key' v-model="newGuild.categories")
+              input.custom-control-input(type="checkbox", :value='group.key' v-model="workingGuild.categories")
               span.custom-control-indicator
               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')
+      .form-group(v-if='inviteMembers && !workingGuild.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.
@@ -92,8 +92,8 @@
         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') {{ 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') }}
+        button.btn.btn-primary.btn-md(v-if='!workingGuild.id', :disabled='!workingGuild.name || !workingGuild.description') {{ creatingParty ? $t('createParty') : $t('createGuild') }}
+        button.btn.btn-primary.btn-md(v-if='workingGuild.id', :disabled='!workingGuild.name || !workingGuild.description') {{ creatingParty ? $t('updateParty') : $t('updateGuild') }}
         .gem-description(v-once, v-if='!creatingParty') {{ $t('guildGemCostInfo') }}
 </template>
 
@@ -157,6 +157,12 @@ import toggleSwitch from 'client/components/ui/toggleSwitch';
 import gemIcon from 'assets/svg/gem.svg';
 import informationIcon from 'assets/svg/information.svg';
 
+// @TODO: Not sure the best way to pass party creating status
+// Since we need the modal in the header, passing props doesn't work
+// because we can't import the create group in the index of groups
+// I think state is the correct spot, but maybe we should separate into
+// two modals?
+
 export default {
   components: {
     bModal,
@@ -169,7 +175,7 @@ export default {
   },
   data () {
     let data = {
-      newGuild: {
+      workingGuild: {
         id: '',
         name: '',
         type: 'guild',
@@ -231,7 +237,6 @@ export default {
       ],
       showCategorySelect: false,
       members: [],
-      creatingParty: true,
       inviteMembers: false,
       newMemberToInvite: {
         value: '',
@@ -254,33 +259,37 @@ export default {
     return data;
   },
   mounted () {
+    // @TODO: do we need this? Maybe us computed. If we need, then make it on show a specific modal
     this.$root.$on('shown::modal', () => {
       let editingGroup = this.$store.state.editingGroup;
-      if (!editingGroup) return;
-      this.newGuild.name = editingGroup.name;
-      this.newGuild.type = editingGroup.type;
-      this.newGuild.privacy = editingGroup.privacy;
-      if (editingGroup.description) this.newGuild.description = editingGroup.description;
-      this.newGuild.id = editingGroup._id;
-      this.newGuild.newLeader = editingGroup.leader._id;
-      this.getMembers();
+      if (!editingGroup._id) return;
+      this.workingGuild.name = editingGroup.name;
+      this.workingGuild.type = editingGroup.type;
+      this.workingGuild.privacy = editingGroup.privacy;
+      if (editingGroup.description) this.workingGuild.description = editingGroup.description;
+      if (editingGroup._id) this.workingGuild.id = editingGroup._id;
+      if (editingGroup.leader._id) this.workingGuild.newLeader = editingGroup.leader._id;
+      if (editingGroup._id) this.getMembers();
     });
   },
   computed: {
     charactersRemaining () {
-      return 500 - this.newGuild.description.length;
+      return 500 - this.workingGuild.description.length;
     },
     title () {
       if (this.creatingParty) return this.$t('createParty');
-      if (!this.newGuild.id) return this.$t('createGuild');
+      if (!this.workingGuild.id) return this.$t('createGuild');
       return this.$t('updateGuild');
     },
+    creatingParty () {
+      return this.$store.state.groupFormOptions.createParty;
+    },
   },
   methods: {
     async getMembers () {
-      if (!this.newGuild.id) return;
+      if (!this.workingGuild.id) return;
       let members = await this.$store.dispatch('members:getGroupMembers', {
-        groupId: this.newGuild.id,
+        groupId: this.workingGuild.id,
         includeAllPublicFields: true,
       });
       this.members = members;
@@ -300,49 +309,50 @@ export default {
       this.showCategorySelect = !this.showCategorySelect;
     },
     async submit () {
-      if (this.$store.state.user.data.balance < 1 && !this.newGuild.id) {
+      if (this.$store.state.user.data.balance < 1 && !this.workingGuild.id) {
         // @TODO: Add proper notifications
         alert('Not enough gems');
         return;
         // @TODO return $rootScope.openModal('buyGems', {track:"Gems > Create Group"});
       }
 
-      if (!this.newGuild.name || !this.newGuild.description) {
+      if (!this.workingGuild.name || !this.workingGuild.description) {
         // @TODO: Add proper notifications
         alert('Enter a name and description');
         return;
       }
 
-      if (this.newGuild.description.length > 500) {
+      if (this.workingGuild.description.length > 500) {
         // @TODO: Add proper notifications
         alert('Description is too long');
         return;
       }
 
       // @TODO: Add proper notifications
-      if (!this.newGuild.id && !confirm(this.$t('confirmGuild'))) return;
+      if (!this.workingGuild.id && !confirm(this.$t('confirmGuild'))) return;
 
-      if (!this.newGuild.privateGuild) {
-        this.newGuild.privacy = 'public';
+      if (!this.workingGuild.privateGuild) {
+        this.workingGuild.privacy = 'public';
       }
 
-      if (!this.newGuild.onlyLeaderCreatesChallenges) {
-        this.newGuild.leaderOnly = {
+      if (!this.workingGuild.onlyLeaderCreatesChallenges) {
+        this.workingGuild.leaderOnly = {
           challenges: true,
         };
       }
 
-      if (this.newGuild.id) {
-        await this.$store.dispatch('guilds:update', {group: this.newGuild});
+      if (this.workingGuild.id) {
+        await this.$store.dispatch('guilds:update', {group: this.workingGuild});
         // @TODO: this doesn't work because of the async resource
         // if (updatedGroup.type === 'party') this.$store.state.party = {data: updatedGroup};
       } else {
-        await this.$store.dispatch('guilds:create', {group: this.newGuild});
+        await this.$store.dispatch('guilds:create', {group: this.workingGuild});
+        this.$store.state.user.balance -= 1;
       }
 
       this.$store.state.editingGroup = {};
 
-      this.newGuild = {
+      this.workingGuild = {
         name: '',
         type: 'guild',
         privacy: 'private',
diff --git a/website/client/components/groups/groupPlan.vue b/website/client/components/groups/groupPlan.vue
index 782d235729..c4b74b3e3d 100644
--- a/website/client/components/groups/groupPlan.vue
+++ b/website/client/components/groups/groupPlan.vue
@@ -83,6 +83,7 @@ div
 <style lang="scss" scoped>
   .header {
     margin-bottom: 3em;
+    margin-top: 4em;
     background-color: #4f2a93;
     color: #fff;
     padding: 2em;
@@ -189,6 +190,11 @@ export default {
   },
   mounted () {
     this.activePage = this.PAGES.BENEFITS;
+    this.$store.state.hideHeader = true;
+  },
+  destroyed () {
+    // @TODO: going from the page back to party modal does not show
+    this.$store.state.hideHeader = false;
   },
   computed: {
     newGroupIsReady () {
diff --git a/website/client/components/groups/guild.vue b/website/client/components/groups/guild.vue
index 5a620c177e..b1f1297912 100644
--- a/website/client/components/groups/guild.vue
+++ b/website/client/components/groups/guild.vue
@@ -31,10 +31,10 @@
 
         chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
 
-  .col-md-4.sidebar
+  .col-4.sidebar
     .guild-background.row
       .col-6
-        p(v-if='!isParty')  Image here
+        p(v-if='!isParty')
       .col-6
         .button-container
           button.btn.btn-success(class='btn-success', v-if='isLeader') {{ $t('upgrade') }}
@@ -142,7 +142,7 @@
       .section(v-if="sections.challenges")
         group-challenges(:groupId='searchId')
     div.text-center
-      button.btn.btn-primary(class='btn-danger', v-if='isMember') {{ $t('leave') }}
+      button.btn.btn-primary(class='btn-danger', v-if='isMember', @click='clickLeave()') {{ $t('leave') }}
 </template>
 
 <style lang="scss" scoped>
@@ -170,6 +170,7 @@
     .svg-icon.shield, .svg-icon.gem {
       width: 40px;
       margin: 0 auto;
+      display: inline-block;
     }
 
     .number {
@@ -184,7 +185,6 @@
 
   .sidebar {
     background-color: $gray-600;
-    padding-top: 2em;
     padding-bottom: 2em;
   }
 
@@ -204,7 +204,8 @@
   }
 
   .guild-background {
-    background-image: linear-gradient(to bottom, rgba($gray-600, 0), $gray-600);
+    background-image: url('~assets/images/groups/grassy-meadow-backdrop.png');
+    height: 246px;
   }
 
   textarea {
@@ -430,6 +431,9 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    partyStore () {
+      return this.$store.state.party;
+    },
     isParty () {
       return this.$route.path.startsWith('/party');
     },
@@ -490,7 +494,7 @@ export default {
       return quests.quests[this.group.quest.key];
     },
   },
-  created () {
+  mounted () {
     this.searchId = this.groupId;
     if (this.isParty) {
       this.searchId = 'party';
@@ -506,6 +510,14 @@ export default {
   watch: {
     // call again the method if the route changes (when this route is already active)
     $route: 'fetchGuild',
+    partyStore () {
+      if (this.$store.state.party._id) {
+        this.group = this.$store.state.party;
+      } else {
+        this.group = null;
+        this.$router.push('/');
+      }
+    },
   },
   methods: {
     showMemberModal () {
@@ -527,6 +539,11 @@ export default {
       this.$root.$emit('show::modal', 'invite-modal');
     },
     async fetchGuild () {
+      if (this.searchId === 'party' && !this.user.party._id) {
+        this.$root.$emit('show::modal', 'create-party-modal');
+        return;
+      }
+
       let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.searchId});
       if (this.isParty) {
         this.$store.party = group;
@@ -544,28 +561,6 @@ export default {
     openStartQuestModal () {
       this.$root.$emit('show::modal', 'start-quest-modal');
     },
-    // inviteOrStartParty (group) {
-      // Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Invite Friends'});
-
-      // var sendInviteText = window.env.t('sendInvitations');
-      // if (group.type !== 'party' && group.type !== 'guild') {
-      //   $location.path("/options/groups/party");
-      //   return console.log('Invalid group type.')
-      // }
-      //
-      // if (group.purchased && group.purchased.plan && group.purchased.plan.customerId) sendInviteText += window.env.t('groupAdditionalUserCost');
-      //
-      // group.sendInviteText = sendInviteText;
-      //
-      // $rootScope.openModal('invite-' + group.type, {
-      //   controller:'InviteToGroupCtrl',
-      //   resolve: {
-      //     injectedGroup: function() {
-      //       return group;
-      //     },
-      //   },
-      // });
-    // },
     checkForAchievements () {
       // Checks if user's party has reached 2 players for the first time.
       if (!this.user.achievements.partyUp && this.group.memberCount >= 2) {
@@ -602,11 +597,16 @@ export default {
     },
     async leave (keepTasks) {
       let keepChallenges = 'remain-in-challenges';
-      await this.$store.dispatch('guilds:leave', {
+
+      let data = {
         groupId: this.group._id,
         keep: keepTasks,
         keepChallenges,
-      });
+      };
+
+      if (this.isParty) data.type = 'party';
+
+      await this.$store.dispatch('guilds:leave', data);
 
       // @TODO: Implement
       // Analytics.updateUser({'partySize':null,'partyID':null});
diff --git a/website/client/components/groups/membersModal.vue b/website/client/components/groups/membersModal.vue
index ec24c367ce..e921f81383 100644
--- a/website/client/components/groups/membersModal.vue
+++ b/website/client/components/groups/membersModal.vue
@@ -120,8 +120,10 @@ export default {
     bDropdownItem,
     MemberDetails,
   },
-  created () {
-    this.getMembers();
+  mounted () {
+    this.$root.$on('shown::modal', () => {
+      this.getMembers();
+    });
   },
   data () {
     return {
@@ -156,11 +158,15 @@ export default {
   },
   methods: {
     async getMembers () {
-      let members = await this.$store.dispatch('members:getGroupMembers', {
-        groupId: this.group._id,
-        includeAllPublicFields: true,
-      });
-      this.members = members;
+      if (this.group._id) {
+        let members = await this.$store.dispatch('members:getGroupMembers', {
+          groupId: this.group._id,
+          includeAllPublicFields: true,
+        });
+        this.members = members;
+      }
+
+      if (this.$store.state.viewingMembers) this.members = this.$store.state.viewingMembers;
     },
     async clickMember (uid, forceShow) {
       let user = this.$store.state.user.data;
diff --git a/website/client/components/groups/myGuilds.vue b/website/client/components/groups/myGuilds.vue
index ae86511773..ff4845501a 100644
--- a/website/client/components/groups/myGuilds.vue
+++ b/website/client/components/groups/myGuilds.vue
@@ -12,9 +12,13 @@
 
   .standard-page(v-if='filteredGuilds.length > 0')
     .row
-      .col-md-12
+      .col-md-8
         h1.page-header.float-left(v-once) {{ $t('myGuilds') }}
-        .float-right
+      .col-4
+        button.btn.btn-secondary.create-group-button.float-right(@click='createGroup()')
+          .svg-icon.positive-icon(v-html="icons.positiveIcon")
+          span(v-once) {{$t('create')}}
+        // @TODO: Add when we implement recent activity .float-right
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
             b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
@@ -29,6 +33,13 @@
     margin: 2em;
   }
 
+  .positive-icon {
+    color: $green-10;
+    width: 10px;
+    display: inline-block;
+    margin-right: .5em;
+  }
+
   .no-guilds {
     text-align: center;
     color: $gray-200;
@@ -64,6 +75,7 @@ import PublicGuildItem from './publicGuildItem';
 import Sidebar from './sidebar';
 
 import greyBadgeIcon from 'assets/svg/grey-badge.svg';
+import positiveIcon from 'assets/svg/positive.svg';
 
 export default {
   mixins: [groupUtilities],
@@ -72,6 +84,7 @@ export default {
     return {
       icons: Object.freeze({
         greyBadge: greyBadgeIcon,
+        positiveIcon,
       }),
       loading: false,
       search: '',
@@ -122,6 +135,9 @@ export default {
       await this.$store.dispatch('guilds:getMyGuilds');
       this.loading = false;
     },
+    createGroup () {
+      this.$root.$emit('show::modal', 'guild-form');
+    },
   },
 };
 </script>
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index f173e5628c..50a1645bed 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -14,11 +14,10 @@
           autocomplete(:text='newMessage', v-on:select="selectedAutocomplete")
           button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
 
-        .container.community-guidelines(v-if='!communityGuidelinesAccepted')
-          .row
-            div.col-8(v-once) {{ $t('communityGuidelinesIntro') }}
-            div.col-4
-              button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
+        .row.community-guidelines(v-if='!communityGuidelinesAccepted')
+          div.col-8(v-once) {{ $t('communityGuidelinesIntro') }}
+          div.col-4
+            button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
 
         .row
           chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
@@ -124,7 +123,7 @@
       height: 150px;
       padding-top: 3em;
       margin-top: 2.3em;
-      width: 98%;
+      width: 100%;
       border-radius: 4px;
     }
 
diff --git a/website/client/components/modifyInventory.vue b/website/client/components/modifyInventory.vue
new file mode 100644
index 0000000000..78ef5f17e9
--- /dev/null
+++ b/website/client/components/modifyInventory.vue
@@ -0,0 +1,320 @@
+<template lang="pug">
+  b-modal#modify-inventory(title="Modify Inventory", size='lg', :hide-footer="true")
+    .modal-header
+      h4 Modify Inventory for {{user.profile.name}}
+    .modal-body
+      .container-fluid
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.gear", @click="showInv.gear = true") Show Gear
+            button.btn.btn-default.pull-right(ng-if="showInv.gear", @click="showInv.gear = false") Hide Gear
+            h4 Gear
+            div(ng-if="showInv.gear")
+              button.btn.btn-default(@click="setAllItems('gear', true)") Own All
+              button.btn.btn-default(@click="setAllItems('gear', false)") Previously Own All
+              button.btn.btn-default(@click="setAllItems('gear', undefined)") Never Own All
+
+              hr
+
+              ul.list-group
+                li.list-group-item(v-for="item in content.gear.flat" ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]")
+                  .pull-left(:class="'shop_' + item.key" style="margin-right: 10px")
+                  | {{item.text()}}
+
+                  .clearfix
+                    label.radio-inline
+                      input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="true")
+                      | Owned
+                    label.radio-inline
+                      input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="false")
+                      | Previously Owned
+                    label.radio-inline
+                      input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="undefined")
+                      | Never Owned
+
+        hr
+
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.special", @click="showInv.special = true") Show Special Items
+            button.btn.btn-default.pull-right(ng-if="showInv.special", @click="showInv.special = false") Hide Special Items
+            h4 Special Items
+            div(ng-if="showInv.special")
+              button.btn.btn-default(@click="setAllItems('special', 999)") Set All to 999
+              button.btn.btn-default(@click="setAllItems('special', 0)") Set All to 0
+              button.btn.btn-default(@click="setAllItems('special', undefined)") Set All to undefined
+
+              hr
+
+              ul.list-group
+                li.list-group-item(v-for="item in content.special" ng-init="inv.special[item.key] = user.items.special[item.key]" ng-if="item.value === 15")
+                  .form-inline.clearfix
+                    .pull-left(:class="'inventory_special_' + item.key" style="margin-right: 10px")
+                    p {{item.text()}}
+                    input.form-control(type="number" ng-model="inv.special[item.key]")
+
+        hr
+
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.pets", @click="showInv.pets = true") Show Pets
+            button.btn.btn-default.pull-right(ng-if="showInv.pets", @click="showInv.pets = false") Hide Pets
+            h4 Pets
+            div(ng-if="showInv.pets")
+              button.btn.btn-default(@click="setAllItems('pets', 45)") Set All to 45
+              button.btn.btn-default(@click="setAllItems('pets', 0)") Set All to 0
+              button.btn.btn-default(@click="setAllItems('pets', -1)") Set All to -1
+              button.btn.btn-default(@click="setAllItems('pets', undefined)") Set All to undefined
+
+              hr
+
+              h5 Drop Pets
+              ul.list-group
+                li.list-group-item(v-for="(pet, value) in content.pets" ng-init="inv.pets[pet] = user.items.pets[pet]")
+                  .form-inline.clearfix
+                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
+                    p {{pet}}
+                    input.form-control(type="number" ng-model="inv.pets[pet]")
+
+              h5 Quest Pets
+              ul.list-group
+                li.list-group-item(v-for="(pet, value) in content.questPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
+                  .form-inline.clearfix
+                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
+                    p {{pet}}
+                    input.form-control(type="number" ng-model="inv.pets[pet]")
+
+              h5 Special Pets
+              ul.list-group
+                li.list-group-item(v-for="(pet, value) in content.specialPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
+                  .form-inline.clearfix
+                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
+                    p {{pet}}
+                    input.form-control(type="number" ng-model="inv.pets[pet]")
+
+              h5 Premium Pets
+              ul.list-group
+                li.list-group-item(v-for="(pet, value) in content.premiumPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
+                  .form-inline.clearfix
+                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
+                    p {{pet}}
+                    input.form-control(type="number" ng-model="inv.pets[pet]")
+
+        hr
+
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.mounts", @click="showInv.mounts = true") Show Mounts
+            button.btn.btn-default.pull-right(ng-if="showInv.mounts", @click="showInv.mounts = false") Hide Mounts
+            h4 Mounts
+            div(ng-if="showInv.mounts")
+              button.btn.btn-default(@click="setAllItems('mounts', true)") Set all to Owned
+              button.btn.btn-default(@click="setAllItems('mounts', undefined)") Set all to Not Owned
+
+              hr
+
+              h5 Drop Mounts
+              ul.list-group
+                li.list-group-item(v-for="(mount, value) in content.mounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
+                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
+                  | {{mount}}
+                  .clearfix
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
+                      | Owned
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
+                      | Not Owned
+
+              h5 Quest Mounts
+              ul.list-group
+                li.list-group-item(v-for="(mount, value) in content.questMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
+                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
+                  | {{mount}}
+                  .clearfix
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
+                      | Owned
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
+                      | Not Owned
+
+              h5 Special Mounts
+              ul.list-group
+                li.list-group-item(v-for="(mount, value) in content.specialMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
+                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
+                  | {{mount}}
+                  .clearfix
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
+                      | Owned
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
+                      | Not Owned
+
+              h5 Premium Mounts
+              ul.list-group
+                li.list-group-item(v-for="(mount, value) in content.premiumMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
+                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
+                  | {{mount}}
+                  .clearfix
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
+                      | Owned
+                    label.radio-inline
+                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
+                      | Not Owned
+
+        hr
+
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.hatchingPotions", @click="showInv.hatchingPotions = true") Show Hatching Potions
+            button.btn.btn-default.pull-right(ng-if="showInv.hatchingPotions", @click="showInv.hatchingPotions = false") Hide Hatching Potions
+            h4 Hatching Potions
+            div(ng-if="showInv.hatchingPotions")
+              button.btn.btn-default(@click="setAllItems('hatchingPotions', 999)") Set All to 999
+              button.btn.btn-default(@click="setAllItems('hatchingPotions', 0)") Set All to 0
+              button.btn.btn-default(@click="setAllItems('hatchingPotions', undefined)") Set All to undefined
+
+              hr
+
+              ul.list-group
+                li.list-group-item(v-for="item in content.hatchingPotions" ng-init="inv.hatchingPotions[item.key] = user.items.hatchingPotions[item.key]")
+                  .form-inline.clearfix
+                    .pull-left(:class="'Pet_HatchingPotion_' + item.key" style="margin-right: 10px")
+                    p {{item.text()}}
+                    input.form-control(type="number" ng-model="inv.hatchingPotions[item.key]")
+
+        hr
+
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.eggs", @click="showInv.eggs = true") Show Eggs
+            button.btn.btn-default.pull-right(ng-if="showInv.eggs", @click="showInv.eggs = false") Hide Eggs
+            h4 Eggs
+            div(ng-if="showInv.eggs")
+              button.btn.btn-default(@click="setAllItems('eggs', 999)") Set All to 999
+              button.btn.btn-default(@click="setAllItems('eggs', 0)") Set All to 0
+              button.btn.btn-default(@click="setAllItems('eggs', undefined)") Set All to undefined
+
+              hr
+
+              ul.list-group
+                li.list-group-item(v-for="item in content.eggs" ng-init="inv.eggs[item.key] = user.items.eggs[item.key]")
+                  .form-inline.clearfix
+                    .pull-left(:class="'Pet_Egg_' + item.key" style="margin-right: 10px")
+                    p {{item.text()}}
+                    input.form-control(type="number" ng-model="inv.eggs[item.key]")
+
+        hr
+
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.food", @click="showInv.food = true") Show Food
+            button.btn.btn-default.pull-right(ng-if="showInv.food", @click="showInv.food = false") Hide Food
+            h4 Food
+            div(ng-if="showInv.food")
+              button.btn.btn-default(@click="setAllItems('food', 999)") Set All to 999
+              button.btn.btn-default(@click="setAllItems('food', 0)") Set All to 0
+              button.btn.btn-default(@click="setAllItems('food', undefined)") Set All to undefined
+
+              hr
+
+              ul.list-group
+                li.list-group-item(v-for="item in content.food" ng-init="inv.food[item.key] = user.items.food[item.key]")
+                  .form-inline.clearfix
+                    .pull-left(:class="'Pet_Food_' + item.key" style="margin-right: 10px")
+                    p {{item.text()}}
+                    input.form-control(type="number" ng-model="inv.food[item.key]")
+
+        hr
+
+        .row
+          .col-xs-12
+            button.btn.btn-default.pull-right(ng-if="!showInv.quests", @click="showInv.quests = true") Show Quests
+            button.btn.btn-default.pull-right(ng-if="showInv.quests", @click="showInv.quests = false") Hide Quests
+            h4 Quests
+            div(ng-if="showInv.quests")
+              button.btn.btn-default(@click="setAllItems('quests', 999)") Set All to 999
+              button.btn.btn-default(@click="setAllItems('quests', 0)") Set All to 0
+              button.btn.btn-default(@click="setAllItems('quests', undefined)") Set All to undefined
+
+              hr
+
+              ul.list-group
+                li.list-group-item(v-for="item in content.quests" ng-init="inv.quests[item.key] = user.items.quests[item.key]" ng-if="item.category !== 'world'")
+                  .form-inline.clearfix
+                    .pull-left(:class="'inventory_quest_scroll_' + item.key" style="margin-right: 10px")
+                    p {{item.text()}}
+                    input.form-control(type="number" ng-model="inv.quests[item.key]")
+    .modal-footer
+      button.btn.btn-default(@click="close()") {{ $t('close') }}
+      button.btn.btn-primary(@click="close();modifyInventory()") Apply Changes
+</template>
+
+<script>
+import axios from 'axios';
+import bModal from 'bootstrap-vue/lib/components/modal';
+
+import { mapState } from 'client/libs/store';
+
+import Content from '../../common/script/content';
+
+export default {
+  components: {
+    bModal,
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+  data () {
+    let showInv = {};
+    let inv = {
+      gear: {},
+      special: {},
+      pets: {},
+      mounts: {},
+      eggs: {},
+      hatchingPotions: {},
+      food: {},
+      quests: {},
+    };
+
+    return {
+      showInv,
+      inv,
+      content: Content,
+    };
+  },
+  methods: {
+    setAllItems (type, value) {
+      let set = this.inv[type];
+
+      for (let item in set) {
+        if (set.hasOwnProperty(item)) {
+          set[item] = value;
+        }
+      }
+    },
+    async modifyInventory  () {
+      await axios.post('/api/v3/debug/modify-inventory', {
+        gear: this.showInv.gear ? this.inv.gear : null,
+        special: this.showInv.special ? this.inv.special : null,
+        pets: this.showInv.pets ? this.inv.pets : null,
+        mounts: this.showInv.mounts ? this.inv.mounts : null,
+        eggs: this.showInv.eggs ? this.inv.eggs : null,
+        hatchingPotions: this.showInv.hatchingPotions ? this.inv.hatchingPotions : null,
+        food: this.showInv.food ? this.inv.food : null,
+        quests: this.showInv.quests ? this.inv.quests : null,
+      });
+
+      // @TODO: Notification.text('Inventory updated. Refresh or sync.');
+      // @TODO: Sync
+    },
+    close () {
+      this.$root.$emit('hide::modal', 'modify-inventory');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/notificationMenu.vue b/website/client/components/notificationMenu.vue
index 8048fe4175..b58179227d 100644
--- a/website/client/components/notificationMenu.vue
+++ b/website/client/components/notificationMenu.vue
@@ -4,50 +4,38 @@
   // span.glyphicon(:class='iconClasses()')
   // span.notification-counter(v-if='getNotificationsCount()') {{getNotificationsCount()}}
   .dropdown-menu.dropdown-menu-right.user-dropdown
-    a.dropdown-item test
-    h4 {{ $t('notifications') }}
-    div
-      ul.toolbar-notifs-notifs
-        li.toolbar-notifs-no-messages(v-if='hasNoNotifications()') {{ $t('noNotifications') }}
-        li(v-if='user.purchased.plan.mysteryItems.length')
-          a(@click='$state.go("options.inventory.drops"); ')
-            span.glyphicon.glyphicon-gift
-            span {{ $t('newSubscriberItem') }}
-        li(v-for='party in user.invitations.parties')
-          a(ui-sref='options.social.party')
-            span.glyphicon.glyphicon-user
-            span {{ $t('invitedTo', {name: party.name}) }}
-        li(v-if='user.flags.cardReceived')
-          a(@click='$state.go("options.inventory.drops"); ')
-            span.glyphicon.glyphicon-envelope
-            span {{ $t('cardReceived') }}
-          a(@click='clearCards()', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
-            span.glyphicon.glyphicon-remove-circle
-        li(v-for='guild in user.invitations.guilds')
-          a(ui-sref='options.social.guilds.public')
-            span.glyphicon.glyphicon-user
-            span {{ $t('invitedTo', {name: guild.name}) }}
-        li(v-if='user.flags.classSelected && !user.preferences.disableClasses && user.stats.points')
-          a(ui-sref='options.profile.stats')
-            span.glyphicon.glyphicon-plus-sign
-            span {{ $t('haveUnallocated', {points: user.stats.points}) }}
-        li(v-for='(k,v) in user.newMessages', v-if='v.value')
-          a(@click='(k === party._id || k === user.party._id) ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k}); ')
-            span.glyphicon.glyphicon-comment
-            span {{v.name}}
-          a(@click='clearMessages(k)', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
-            span.glyphicon.glyphicon-remove-circle
-        li(v-for='notification in user.groupNotifications')
-          a(@click='viewGroupApprovalNotification(notification, $index, true)')
-            span(:class="groupApprovalNotificationIcon(notification)")
-            span
-              | {{notification.data.message}}
-          a(@click='viewGroupApprovalNotification(notification, $index)',
-            :popover="$t('clear')",
-            popover-placement='right',
-            popover-trigger='mouseenter',
-            popover-append-to-body='true')
-            span.glyphicon.glyphicon-remove-circle
+    h4.dropdown-item(v-if='!hasNoNotifications()') {{ $t('notifications') }}
+    h4.dropdown-item.toolbar-notifs-no-messages(v-if='hasNoNotifications()') {{ $t('noNotifications') }}
+    a.dropdown-item(v-if='user.purchased.plan.mysteryItems.length', @click='$state.go("options.inventory.drops"); ')
+      span.glyphicon.glyphicon-gift
+      span {{ $t('newSubscriberItem') }}
+    a.dropdown-item(v-for='party in user.invitations.parties', ui-sref='options.social.party')
+      span.glyphicon.glyphicon-user
+      span {{ $t('invitedTo', {name: party.name}) }}
+    a.dropdown-item(v-if='user.flags.cardReceived', @click='$state.go("options.inventory.drops"); ')
+      span.glyphicon.glyphicon-envelope
+      span {{ $t('cardReceived') }}
+      a.dropdown-item(@click='clearCards()', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
+    a.dropdown-item(v-for='guild in user.invitations.guilds', ui-sref='options.social.guilds.public')
+      span.glyphicon.glyphicon-user
+      span {{ $t('invitedTo', {name: guild.name}) }}
+    a.dropdown-item(v-if='user.flags.classSelected && !user.preferences.disableClasses && user.stats.points', ui-sref='options.profile.stats')
+      span.glyphicon.glyphicon-plus-sign
+      span {{ $t('haveUnallocated', {points: user.stats.points}) }}
+    a.dropdown-item(v-for='(k,v) in user.newMessages', v-if='v.value', @click='(k === party._id || k === user.party._id) ? $state.go("options.social.party") : $state.go("options.social.guilds.detail",{gid:k}); ')
+      span.glyphicon.glyphicon-comment
+      span {{v.name}}
+    a.dropdown-item(@click='clearMessages(k)', :popover="$t('clear')", popover-placement='right', popover-trigger='mouseenter',popover-append-to-body='true')
+    a.dropdown-item(v-for='notification in user.groupNotifications', @click='viewGroupApprovalNotification(notification, $index, true)')
+      span(:class="groupApprovalNotificationIcon(notification)")
+      span
+        | {{notification.data.message}}
+      a.dropdown-item(@click='viewGroupApprovalNotification(notification, $index)',
+        :popover="$t('clear')",
+        popover-placement='right',
+        popover-trigger='mouseenter',
+        popover-append-to-body='true')
+        span.glyphicon.glyphicon-remove-circle
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
index 3303ffb83d..ccd1598670 100644
--- a/website/client/components/notifications.vue
+++ b/website/client/components/notifications.vue
@@ -1,12 +1,17 @@
 <template lang="pug">
+  welcome-modal
 </template>
 
 <script>
 // import moment from 'moment';
 
 import { mapState } from 'client/libs/store';
+import welcomeModal from './achievements/welcome';
 
 export default {
+  components: {
+    welcomeModal,
+  },
   data () {
     // Levels that already display modals and should not trigger generic Level Up
     let unlockLevels = {
@@ -153,6 +158,9 @@ export default {
     },
   },
   async mounted () {
+    if (!this.user.flags.welcomed) {
+      this.$root.$emit('show::modal', 'welcome');
+    }
   },
   methods: {
     playSound () {
diff --git a/website/client/components/static/faq.vue b/website/client/components/static/faq.vue
index b4318047e7..301b99426a 100644
--- a/website/client/components/static/faq.vue
+++ b/website/client/components/static/faq.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 .row
-  .col-md-12
+  .col-6.offset-3
     .page-header
       h1 {{ $t('frequentlyAskedQuestions') }}
     p.pagemeta
@@ -9,7 +9,7 @@
       | {{ $t('January') }}
       |&nbsp;5&comma; 2016
     div(v-for='(heading, index) in headings')
-      strong.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
+      h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
       // @TODO: Markdown
       div(v-if='activePage === heading', v-html="$t('webFaqAnswer' + index, replacements)")
 
diff --git a/website/client/components/static/front.vue b/website/client/components/static/front.vue
index 2d51d6247e..76448e2330 100644
--- a/website/client/components/static/front.vue
+++ b/website/client/components/static/front.vue
@@ -4,560 +4,649 @@
       br
       a(href='http://www.enable-javascript.com/', target='_blank') {{ $t('jsDisabledLink') }}
 
-    .mobile-container
-      header#header
-        nav.navbar.navbar-default.navbar-static-top
-          .container-fluid
-            // Brand and toggle get grouped for better mobile display
-            .navbar-header
-              button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
-                span.sr-only Toggle navigation
-                span.icon-bar
-                span.icon-bar
-                span.icon-bar
-              a.navbar-brand(href='#')
-                img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/habitica_lockup2_desat.png', alt="$t('altAttrNavLogo')")
-            // Collect the nav links, forms, and other content for toggling
-            #bs-example-navbar-collapse-1.collapse.navbar-collapse
-              ul.nav.navbar-nav.navbar-right
-                li
-                  a(href='/static/features') {{ $t('companyAbout') }}
-                li
-                  a(href='/static/plans') {{ $t('groupPlans') }}
-                li
-                  a(href='https://habitica.wordpress.com/') {{ $t('companyBlog') }}
-                li
-                  a(href='http://blog.habitrpg.com/') {{ $t('tumblr') }}
-                li
-                  a(href='/static/press-kit') {{ $t('presskit') }}
-                li
-                  a(href='/static/contact') {{ $t('contactUs') }}
-                li
-                  button#header-play-button.btn.btn-primary.navbar-btn.navbar-right(ng-click='playButtonClick()') {{ $t('playButtonFull') }}
-      #intro
-        h1 = {{ $t('motivate1') }}
-        img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/intro.png', alt='')
-        //- The empty alt attribute isn't a mistake, it's part of the spec for purely decorative images that add no information
-        // insert intro images
-        .introcall.bg-success
-          h4 {{ $t('joinOthers', {userCount:userCount}) }}
+    nav.navbar.navbar-toggleable-md.navbar-light.bg-faded
+      button.navbar-toggler.navbar-toggler-right(type='button', data-toggle='collapse', data-target='#navbarNav', aria-controls='navbarNav', aria-expanded='false', aria-label='Toggle navigation')
+        span.navbar-toggler-icon
+      a.navbar-brand(href='#') Navbar
+      #navbarNav.collapse.navbar-collapse
+        ul.navbar-nav
+          li.nav-item.active
+            a.nav-link(href='#')
+              | Home
+              span.sr-only (current)
+          li.nav-item
+            a.nav-link(href='#') Features
+          li.nav-item
+            a.nav-link(href='#') Pricing
+          li.nav-item
+            a.nav-link.disabled(href='#') Disabled
+
+    //-
+    //- nav.navbar.navbar-light.bg-faded
+    //-   .navbar-header
+    //-     button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
+    //-       span.sr-only Toggle navigation
+    //-       span.icon-bar
+    //-       span.icon-bar
+    //-       span.icon-bar
+    //-     a.navbar-brand(href='#')
+    //-       img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/habitica_lockup2_desat.png', alt="$t('altAttrNavLogo')", width='156px')
+    //-     #bs-example-navbar-collapse-1.collapse.navbar-collapse
+    //-         ul.nav.navbar-nav.navbar-right
+    //-           li
+    //-             a(href='/static/features') {{ $t('companyAbout') }}
+    //-           li
+    //-             a(href='/static/plans') {{ $t('groupPlans') }}
+    //-           li
+    //-             a(href='https://habitica.wordpress.com/') {{ $t('companyBlog') }}
+    //-           li
+    //-             a(href='http://blog.habitrpg.com/') {{ $t('tumblr') }}
+    //-           li
+    //-             a(href='/static/press-kit') {{ $t('presskit') }}
+    //-           li
+    //-             a(href='/static/contact') {{ $t('contactUs') }}
+    //-           li
+    //-             button#header-play-button.btn.btn-primary.navbar-btn.navbar-right(@click='playButtonClick()') {{ $t('playButtonFull') }}
+    #intro.container-fluid
+      .row
+        h1.col-12.text-center {{ $t('motivate1') }}
+      .row
+        .col-6.offset-3
+          img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/intro.png', alt='')
+          // The empty alt attribute isn't a mistake, it's part of the spec for purely decorative images that add no information
+          // insert intro images
+      .row
+        .introcall.bg-success.col-12.text-center.cta
+          h2 {{ $t('joinOthers', {userCount}) }}
             small
-              button#play-btn.btn.btn-primary.btn-lg.gamifybutton(ng-click='playButtonClick()') {{ $t('free') }}
-        .presslogos.text-center.img-rendering-auto
-          | {{ $t('featuredIn') }}
+              button#play-btn.btn.btn-primary.btn-lg.gamifybutton(@click='playButtonClick()') {{ $t('free') }}
+      .row
+        .col-12.presslogos.text-center.img-rendering-auto
+          h2 {{ $t('featuredIn') }}
           br
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/lifehacker.png', alt {{ $t('altAttrLifehacker') }})
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/nyt-logo.png', alt {{ $t('altAttrNewYorkTimes') }})
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/makeuseof.png', alt {{ $t('altAttrMakeUseOf') }})
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Forbes_logo.png', alt {{ $t('altAttrForbes') }})
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Cnetlogo.png', alt {{ $t('altAttrCnet') }})
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Fast-Company-logo.png', alt {{ $t('altAttrFastCompany') }})
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/kickstarter-logo.png', alt {{ $t('altAttrKickstarter') }})
-          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/discover-logo.png', alt {{ $t('altAttrDiscover') }})
-      #intro-text
-        .container-fluid
-          .row
-            .col-md-8.col-md-offset-2
-              p.lead.text-center
-                | {{ $t('leadText') }}
-      section#testimonial-carousel.bg-info
-        .container-fluid
-          .row
-            .col-md-3.col-md-offset-1
-              h2 {{ $t('testimonialHeading') }}
-              img.img-say.img-responsive.visible-lg-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
-            // Testimonials
-            .col-md-8.col-sm-10.col-sx-10
-              #quote-carousel.carousel.slide(data-interval='10000', data-ride='carousel')
-                // Bottom Carousel Indicators
-                ol.carousel-indicators
-                  li.active(data-target='#quote-carousel', data-slide-to='0')
-                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drag0nsilver.png', alt='')
-                  li(data-target='#quote-carousel', data-slide-to='1')
-                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt='')
-                  li(data-target='#quote-carousel', data-slide-to='2')
-                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AndeeLiao.png', alt='')
-                  li(data-target='#quote-carousel', data-slide-to='3')
-                    img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt='')
-                .carousel-inner.text-center
-                  .item.active
-                    blockquote
-                      .row
-                        .col-sm-8.col-sm-offset-2
-                          p
-                          | {{ $t('dragonsilverQuote') }}
-                          small Drag0nsilver
-                  .item
-                    blockquote
-                      .row
-                        .col-sm-8.col-sm-offset-2
-                          p
-                          | {{ $t('frabjabulousQuote') }}
-                          small frabjabulous
-                  .item
-                    blockquote
-                      .row
-                        .col-sm-8.col-sm-offset-2
-                          p
-                          | {{ $t('andeeliaoQuote') }}
-                          small AndeeLiao
-                  .item
-                    blockquote
-                      .row
-                        .col-sm-8.col-sm-offset-2
-                          p
-                          | {{ $t('alexandraQuote') }}
-                          small _AlexandraSo_
-                a.left.carousel-control(data-slide='prev', href='#quote-carousel')
-                  i.fa.fa-chevron-left
-                a.right.carousel-control(data-slide='next', href='#quote-carousel')
-                  i.fa.fa-chevron-right
-        button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(ng-click='playButtonClick()') {{ $t('gamifyButton') }}
-      section#uses
-        h2 {{ $t('examplesHeading') }}
-        .container-fluid
-          #myCarousel.carousel.slide(data-interval='10000', data-ride='carousel')
-            ul.nav.nav-pills.nav-justified
-              li.active(data-target='#myCarousel', data-slide-to='0')
-                a(href='#') {{ $t('work') }}
-              li(data-target='#myCarousel', data-slide-to='1')
-                a(href='#') {{ $t('wellness') }}
-              li(data-target='#myCarousel', data-slide-to='2')
-                a(href='#') {{ $t('teams') }}
-              li(data-target='#myCarousel', data-slide-to='3')
-                a(href='#') {{ $t('school') }}
-              li(data-target='#myCarousel', data-slide-to='4')
-                a(href='#') {{ $t('goals') }}
-              li(data-target='#myCarousel', data-slide-to='5')
-                a(href='#') {{ $t('chores') }}
-            .carousel-inner(style='z-index:0;')
-              .item.active.work-use
-                h3
-                  | {{ $t('work') }}
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/lifehacker.png', alt="$t(altAttrLifehacker)")
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/nyt-logo.png', alt="$t(altAttrNewYorkTimes)")
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/makeuseof.png', alt="$t(altAttrMakeUseOf)")
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Forbes_logo.png', alt="$t(altAttrForbes)")
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Cnetlogo.png', alt="$t(altAttrCnet)")
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/Fast-Company-logo.png', alt="$t(altAttrFastCompany)")
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/kickstarter-logo.png', alt="$t(altAttrKickstarter)")
+          img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/discover-logo.png', alt="$t(altAttrDiscover)")
+    #intro-text.container-fluid
+      .row
+        .col-8.offset-2
+          p.lead.text-center
+            | {{ $t('leadText') }}
+    section#testimonial-carousel.bg-info.container-fluid
+      .row
+        .col-3.offset-1
+          h2 {{ $t('testimonialHeading') }}
+          img.img-say.img-responsive.visible-lg-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
+        .col-8
+          #quote-carousel.container-fluid(data-interval='10000', data-ride='carousel')
+            .row.text-center
+              .item.col-12.active
+                blockquote
+                  p
+                  | {{ $t('dragonsilverQuote') }}
+                  small Drag0nsilver
+              .item.col-12
+                blockquote
+                  p
+                  | {{ $t('frabjabulousQuote') }}
+                  small frabjabulous
+              .item.col-12
+                blockquote
+                  p
+                  | {{ $t('andeeliaoQuote') }}
+                  small AndeeLiao
+              .item.col-12
+                blockquote
+                  p
+                  | {{ $t('alexandraQuote') }}
+                  small _AlexandraSo_
+            .row
+              .col-6.offset-3.text-center.user-selector
+                .user-icon.active(data-target='#quote-carousel', data-slide-to='0')
+                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drag0nsilver.png', alt='')
+                .user-icon(data-target='#quote-carousel', data-slide-to='1')
+                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt='')
+                .user-icon(data-target='#quote-carousel', data-slide-to='2')
+                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AndeeLiao.png', alt='')
+                .user-icon(data-target='#quote-carousel', data-slide-to='3')
+                  img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt='')
+        .col-12.text-center
+          button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(@click='playButtonClick()') {{ $t('gamifyButton') }}
+    section#uses.container-fluid
+      .row
+        h2.col-12.text-center {{ $t('examplesHeading') }}
+      .row
+        #myCarousel.col-12.carousel.slide(data-interval='10000', data-ride='carousel')
+          ul.nav.nav-pills.nav-fill
+            li.nav-item.active(data-target='#myCarousel', data-slide-to='0')
+              a(href='#') {{ $t('work') }}
+            li.nav-item(data-target='#myCarousel', data-slide-to='1')
+              a(href='#') {{ $t('wellness') }}
+            li.nav-item(data-target='#myCarousel', data-slide-to='2')
+              a(href='#') {{ $t('teams') }}
+            li.nav-item(data-target='#myCarousel', data-slide-to='3')
+              a(href='#') {{ $t('school') }}
+            li.nav-item(data-target='#myCarousel', data-slide-to='4')
+              a(href='#') {{ $t('goals') }}
+            li.nav-item(data-target='#myCarousel', data-slide-to='5')
+              a(href='#') {{ $t('chores') }}
+          .carousel-inner(style='z-index:0;display:none')
+            .item.active.work-use
+              h3
+                | {{ $t('work') }}
+                br
+                small
+                  a(href='/static/plans') {{ $t('businessText') }}
+              .carousel-content.row
+                .sampletasks.col-lg-4.col-6.col-xs-12
+                  h4 {{ $t('sampleHabits') }}
+                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample1') }}
                   br
-                  small
-                    a(href='/static/plans') {{ $t('businessText') }}
-                .carousel-content.row
-                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
-                    h4 {{ $t('sampleHabits') }}
-                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample1') }}
-                    br
-                    div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample2') }}
-                    br
-                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample3') }}
-                    br
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample4') }}
-                    br
-                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample5') }}
-                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/coding.png', alt='')
-                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='frabjabulous', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt {{ $t('altAttrFrabjabulous') }})
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                          | {{ $t('frabjabulousQuote') }}
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='_AlexandraSo_', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt {{ $t('altAttrAlexandraSo') }})
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                          | {{ $t('alexandraQuote') }}
-              .item.health-use
-                h3 {{ $t('health') }}
-                .carousel-content.row
-                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
-                    h4 {{ $t('sampleHabits') }}
-                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample1') }}
-                    br
-                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample2') }}
-                    br
-                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample3') }}
-                    br
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(255, 207, 66); border-right: 0px none;') -
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample4') }}
-                    br
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample5') }}
-                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/clipart-rosemonkeyct-meditation.png', alt='')
-                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='EvaGantz', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/EvaGantz.png', alt {{ $t('altAttrEvaGantz') }})
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                          | {{ $t('evagantzQuote') }}
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='supermouse35', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/supermouse35.png', :alt="$t('altAttrSupermouse35')")
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                        |  {{ $t('supermouse35Quote') }}
-              .item.team-use
-                h3 {{ $t('teams') }}
-                .carousel-content.row
-                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
-                    h4 {{ $t('sampleToDo') }}
-                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample1') }}
-                    br
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample2') }}
-                    br
-                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample3') }}
-                    br
-                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
-                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='Althaire', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Althaire.png', alt {{ $t('altAttrAlthaire') }})
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                          | {{ $t('althaireQuote') }}
-              .item.school-use
-                h3 {{ $t('school') }}
-                .carousel-content.row
-                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
-                    h4 {{ $t('sampleHabits') }}
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample1') }}
-                    br
-                    div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample2') }}
-                    br
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample3') }}
-                    br
-                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample4') }}
-                    br
-                    div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(90, 98, 223); border-right: 0px none;') -
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample5') }}
-                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/reading.png', alt='')
-                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='InfH', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/InfH.png', alt {{ $t('altAttrInfH') }})
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content {{ $t('infhQuote') }}
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='Drei-M', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drei-M.png', alt {{ $t('altAttrDreiM') }})
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                          | {{ $t('dreimQuote') }}
-              .item.improvement-use
-                h3 {{ $t('goals') }}
-                .carousel-content.row
-                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
-                    h4 {{ $t('sampleDailies') }}
-                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample1') }}
-                    br
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample2') }}
-                    br
-                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample3') }}
-                    br
-                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/gaining_an_achievement_by_cosmic_caterpillar-d7uyv5z.png', alt='')
-                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='Kazui', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Kazui.png', alt {{ $t('altAttrKazui') }})
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                          | {{ $t('kazuiQuote') }}
-              .item.housework-use
-                h3 {{ $t('chores') }}
-                .carousel-content.row
-                  .sampletasks.col-lg-4.col-md-6.col-sm-12.col-xs-12
-                    h4 {{ $t('sampleDailies') }}
-                    div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample1') }}
-                    br
-                    div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample2') }}
-                    br
-                    div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
-                      .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
-                        span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
-                      | &nbsp;
-                      .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample3') }}
-                    br
-                  img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/dusting_by_leephon.png', alt='')
-                  .usetweet-groups.col-lg-5.col-md-6.visible-lg-inline-block.visible-md-inline-block
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='autumnesquirrel', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/autumnesquirrel.png', :alt="$t('altAttrAutumnesquirrel')")
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content {{ $t('autumnesquirrelQuote') }}
-                    .usetweet-group
-                      img(data-toggle='tooltip', data-placement='top', title='irishfeet123', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/irishfeet123.png', :alt="$t('altAttrIrishfeet123')")
-                      .usetweet.tweet.popover.right
-                        .arrow
-                        .popover-content
-                          | {{ $t('irishfeet123Quote') }}
-        button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(ng-click='playButtonClick()') {{ $t('gamifyButton') }}
-      section#rewards.bg-warning.container-fluid
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
-            h2.headline {{ $t('rewardHeading') }}
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12.col-xs-12
-            p.sectioninfo
-              | {{ $t('rewardByline1') }}
-              br
-              br
-              | {{ $t('rewardByline2') }}
-            .scrolltweet.hidden-xs.hidden-sm
-              img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Elmi', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Elmi.png', alt {{ $t('altAttrElmi') }})
-              .tweet.popover.right.pull-right
-                .arrow
-                .popover-content {{ $t('elmiQuote') }}
-          .col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2.well-lg
-            .avatarscroll
-              h2
-                span.glyphicon.glyphicon-check
-              h2
-                span.glyphicon.glyphicon-arrow-down
-              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
-              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
-              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
-              h2
-                span.glyphicon.glyphicon-arrow-down
-              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/TVreward.png', alt='')
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') {{ $t('gamifyButton') }}
-      section#levels.container-fluid
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
-            h2.headline {{ $t('unlockHeadline') }}
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
-            p.sectioninfo
-              | {{ $t('unlockByline1') }}
-              br
-              br
-              | {{ $t('unlockByline2') }}
-            .scrolltweet.hidden-xs.hidden-sm
-              img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='16bitFil', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/16bitFil.png', :alt="$t('altAttr16bitFil')")
-              .tweet.popover.right.pull-right
-                .arrow
-                .popover-content
-                  | {{ $t('sixteenBitFilQuote') }}
-          .col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2
-            .avatarscroll
-              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/avatar/avatarstatic.png', alt='')
-              h2
-                span.glyphicon.glyphicon-arrow-down
-              img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/SAMPLEadventurers.png', alt='')
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') {{ $t('gamifyButton') }}
-      section#health.bg-danger.container-fluid
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
-            h2.headline {{ $t('punishHeading1') }}
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
-            h2 {{ $t('punishHeading2') }}
-            p.sectioninfo {{ $t('punishByline') }}
-            .scrolltweet.hidden-xs.hidden-sm
-              img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Zelah Meyer', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Zelah_Meyer.png', alt {{ $t('altAttrZelahMeyer') }})
-              .tweet.popover.right.pull-right
-                .arrow
-                .popover-content
-                  | {{ $t('zelahQuote') }}
-          .col-lg-4.col-md-4.col-lg-offset-1.col-sm-8.well.col-xs-8.col-xs-offset-2.col-sm-offset-2.well-lg
+                  div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample2') }}
+                  br
+                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample3') }}
+                  br
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample4') }}
+                  br
+                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('businessSample5') }}
+                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/coding.png', alt='')
+                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='frabjabulous', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/frabjabulous.png', alt="$t(altAttrFrabjabulous)")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                        | {{ $t('frabjabulousQuote') }}
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='_AlexandraSo_', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/AlexandraSo.png', alt="$t(altAttrAlexandraSo)")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                        | {{ $t('alexandraQuote') }}
+            .item.health-use
+              h3 {{ $t('health') }}
+              .carousel-content.row
+                .sampletasks.col-lg-4.col-6.col-xs-12
+                  h4 {{ $t('sampleHabits') }}
+                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample1') }}
+                  br
+                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample2') }}
+                  br
+                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(113, 176, 91); border-right: 0px none;') -
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample3') }}
+                  br
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(255, 207, 66); border-right: 0px none;') -
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample4') }}
+                  br
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('healthSample5') }}
+                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/clipart-rosemonkeyct-meditation.png', alt='')
+                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='EvaGantz', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/EvaGantz.png', alt="$t(altAttrEvaGantz)")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                        | {{ $t('evagantzQuote') }}
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='supermouse35', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/supermouse35.png', :alt="$t('altAttrSupermouse35')")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                      |  {{ $t('supermouse35Quote') }}
+            .item.team-use
+              h3 {{ $t('teams') }}
+              .carousel-content.row
+                .sampletasks.col-lg-4.col-6.col-xs-12
+                  h4 {{ $t('sampleToDo') }}
+                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample1') }}
+                  br
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample2') }}
+                  br
+                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('teamSample3') }}
+                  br
+                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/publicSpaces.png', alt='')
+                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='Althaire', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Althaire.png', alt="$t(altAttrAlthaire)")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                        | {{ $t('althaireQuote') }}
+            .item.school-use
+              h3 {{ $t('school') }}
+              .carousel-content.row
+                .sampletasks.col-lg-4.col-6.col-xs-12
+                  h4 {{ $t('sampleHabits') }}
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample1') }}
+                  br
+                  div(style='width:100%; background-color: #d9ead3; color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(113, 176, 91); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample2') }}
+                  br
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample3') }}
+                  br
+                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(220, 93, 93); border-right: 0px none;') -
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample4') }}
+                  br
+                  div(style='width:100%; background-color: rgb(201, 218, 248); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(90, 98, 223); border-right: 1px solid rgba(0, 0, 0, 0.25);') +
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; background-color: rgb(90, 98, 223); border-right: 0px none;') -
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('schoolSample5') }}
+                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/reading.png', alt='')
+                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='InfH', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/InfH.png', alt="$t(altAttrInfH)")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content {{ $t('infhQuote') }}
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='Drei-M', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Drei-M.png', alt="$t(altAttrDreiM)")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                        | {{ $t('dreimQuote') }}
+            .item.improvement-use
+              h3 {{ $t('goals') }}
+              .carousel-content.row
+                .sampletasks.col-lg-4.col-6.col-xs-12
+                  h4 {{ $t('sampleDailies') }}
+                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample1') }}
+                  br
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample2') }}
+                  br
+                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('goalSample3') }}
+                  br
+                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/gaining_an_achievement_by_cosmic_caterpillar-d7uyv5z.png', alt='')
+                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='Kazui', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Kazui.png', alt="$t(altAttrKazui)")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                        | {{ $t('kazuiQuote') }}
+            .item.housework-use
+              h3 {{ $t('chores') }}
+              .carousel-content.row
+                .sampletasks.col-lg-4.col-6.col-xs-12
+                  h4 {{ $t('sampleDailies') }}
+                  div(style='width:100%; background-color: rgb(252, 229, 205); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(219, 120, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample1') }}
+                  br
+                  div(style='width:100%; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample2') }}
+                  br
+                  div(style='width:100%; background-color: rgb(244, 204, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;')
+                    .task-btn(style='display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(220, 93, 93); border-right: 1px solid rgba(0, 0, 0, 0.25);')
+                      span(style='padding: 0.5em 0px 0em 0em; color: #666;') &#x2610;
+                    | &nbsp;
+                    .task-desc(style='display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; letter-spacing: normal; float:left; word-wrap: break-word;') {{ $t('choreSample3') }}
+                  br
+                img.sample-img.visible-lg-inline-block(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/uses/dusting_by_leephon.png', alt='')
+                .usetweet-groups.col-lg-5.col-6.visible-lg-inline-block.visible-inline-block
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='autumnesquirrel', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/autumnesquirrel.png', :alt="$t('altAttrAutumnesquirrel')")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content {{ $t('autumnesquirrelQuote') }}
+                  .usetweet-group
+                    img(data-toggle='tooltip', data-placement='top', title='irishfeet123', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/irishfeet123.png', :alt="$t('altAttrIrishfeet123')")
+                    .usetweet.tweet.popover.right
+                      .arrow
+                      .popover-content
+                        | {{ $t('irishfeet123Quote') }}
+      .row
+        .col-6.offset-3.text-center
+          button.btn.btn-primary.btn-lg.gamifybutton.fixedcta(@click='playButtonClick()') {{ $t('gamifyButton') }}
+    section#rewards.bg-warning.container-fluid
+      .row
+        .col-6
+          h2.headline {{ $t('rewardHeading') }}
+          p.sectioninfo
+            | {{ $t('rewardByline1') }}
+            br
+            br
+            | {{ $t('rewardByline2') }}
+          .scrolltweet.hidden-xs.hidden-sm
+            img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Elmi', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Elmi.png', alt="$t(altAttrElmi)")
+            .tweet.popover.right.pull-right
+              .arrow
+              .popover-content {{ $t('elmiQuote') }}
+        .col-6
+          .avatarscroll
             h2
-              span.glyphicon.glyphicon-unchecked
-            .health-progress
-              .meter-label(tooltip='Health')
-                span.glyphicon.glyphicon-heart
-              .meter.health
-                .bar
-                  div(style='width:100%;') &nbsp;
+              span.glyphicon.glyphicon-check
             h2
               span.glyphicon.glyphicon-arrow-down
-            .health-progress
-              .meter-label(tooltip='Health')
-                span.glyphicon.glyphicon-heart
-              .meter.health
-                .bar
-                  div(style='width:50%;') &nbsp;
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') {{ $t('gamifyButton') }}
-      section#quest.container-fluid
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
-            h2.headline {{ $t('questHeading1') }}
-        .row
-          .col-lg-5.col-lg-offset-1.col-md-5.col-sm-12
-            h2 {{ $t('questHeading2') }}
-            p.sectioninfo
-              | {{ $t('questByline1') }}
-              br
-              | {{ $t('questByline2') }}
-            .scrolltweet.hidden-xs.hidden-sm
-              img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='skysailor', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/skysailor.png', alt {{ $t('altAttrSkysailor') }})
-              .tweet.popover.right.pull-right
-                .arrow
-                .popover-content
-                  | {{ $t('skysailorQuote') }}
-          .col-lg-4.col-md-6.col-md-offset-1.col-lg-offset-1.col-sm-10.well.col-xs-10.col-xs-offset-1.col-sm-offset-1.well-lg
-            img.clearfix.img-responsive.center-block(style='padding-bottom:30px;', src="https://d2afqr2xdmyzvu.cloudfront.net/front/images/Quest_dilatory_dragonSmall.png", alt='')
-            .row
-              .col-lg-5.col-md-5.col-sm-5.col-sm-offset-0.col-xs-5.col-xs-offset-0
-                .health-progress
-                  .meter-label(tooltip='Health')
-                    span.glyphicon.glyphicon-heart
-                  .meter.health
-                    .bar
-                      div(style='width:20%;') &nbsp;
-                .quest-friend-img
-                  img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/AnnaCosplay.png', alt='')
-              .col-md-1.col-sm-1.col-xs-1
-                h2
-                  span.glyphicon.glyphicon-arrow-right
-              .col-lg-5.col-md-offset-1.col-md-5.col-sm-5.col-sm-offset-0.col-xs-5.col-xs-offset-0
-                .health-progress
-                  .meter-label(tooltip='Health')
-                    span.glyphicon.glyphicon-heart
-                  .meter.health
-                    .bar
-                      div(style='width:0%;') &nbsp;
-                .quest-friend-img
-                  img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/GrimReaper.png', alt='')
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') {{ $t('gamifyButton') }}
-      section#features.bg-info.container-fluid
-        .row
-          h2 {{ $t('featuresHeading') }}
-        .row
-          .col-md-4.col-md-offset-2.col-sm-6
-            .feature-img
-              img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Mount.png', alt='')
-            .featuretext
-              h4 {{ $t('featurePetHeading') }}
-              p
-                | {{ $t('featurePetByline') }}
-          .col-md-4.col-sm-6
-            .feature-img.center-block
-              img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-triadbingo.png', alt='')
-              img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-perfect.png', alt='')
-            .featuretext
-              h4 {{ $t('featureAchievementHeading') }}
-              p {{ $t('featureAchievementByline') }}
-        .row
-          .col-md-4.col-md-offset-2.col-sm-6
-            .feature-img
-              img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Promo_springclasses2015.png', alt='')
-            .featuretext
-              h4 {{ $t('featureEquipHeading') }}
-              p
-                | {{ $t('featureEquipByline') }}
-          .col-md-4.col-sm-6
-            .feature-img
-              img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Party-Header.png', alt='')
-            .featuretext
-              h4 {{ $t('featureSocialHeading') }}
-              p
-                | {{ $t('featureSocialByline') }}
-          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(ng-click='playButtonClick()') {{ $t('gamifyButton') }}
-      #footercall
-        .container-fluid
+            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
+            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
+            img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/misc/shop_gold.png', alt='')
+            h2
+              span.glyphicon.glyphicon-arrow-down
+            img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/TVreward.png', alt='')
+        .col-12
+          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
+    section#levels.container-fluid
+      .row
+        .col-6.text-center
+          h2.headline {{ $t('unlockHeadline') }}
+          p.sectioninfo
+            | {{ $t('unlockByline1') }}
+            br
+            br
+            | {{ $t('unlockByline2') }}
+          .scrolltweet.hidden-xs.hidden-sm
+            img.img-rendering-auto.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='16bitFil', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/16bitFil.png', :alt="$t('altAttr16bitFil')")
+            .tweet.popover.right.pull-right
+              .arrow
+              .popover-content
+                | {{ $t('sixteenBitFilQuote') }}
+        .col-6
+          .avatarscroll
+            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/avatar/avatarstatic.png', alt='')
+            h2
+              span.glyphicon.glyphicon-arrow-down
+            img.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/SAMPLEadventurers.png', alt='')
+        .col-12
+          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
+    section#health.bg-danger.container-fluid
+      .row
+        .col-6
+          h2.headline {{ $t('punishHeading1') }}
+          h2 {{ $t('punishHeading2') }}
+          p.sectioninfo {{ $t('punishByline') }}
+          .scrolltweet.hidden-xs.hidden-sm
+            img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='Zelah Meyer', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/Zelah_Meyer.png', alt="$t(altAttrZelahMeyer)")
+            .tweet.popover.right.pull-right
+              .arrow
+              .popover-content
+                | {{ $t('zelahQuote') }}
+        .col-6
+          h2
+            span.glyphicon.glyphicon-unchecked
+          .health-progress
+            .meter-label(tooltip='Health')
+              span.glyphicon.glyphicon-heart
+            .meter.health
+              .bar
+                div(style='width:100%;') &nbsp;
+          h2
+            span.glyphicon.glyphicon-arrow-down
+          .health-progress
+            .meter-label(tooltip='Health')
+              span.glyphicon.glyphicon-heart
+            .meter.health
+              .bar
+                div(style='width:50%;') &nbsp;
+        button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
+    section#quest.container-fluid
+      .row
+        .col-6
+          h2.headline {{ $t('questHeading1') }}
+          h2 {{ $t('questHeading2') }}
+          p.sectioninfo
+            | {{ $t('questByline1') }}
+            br
+            | {{ $t('questByline2') }}
+          .scrolltweet.hidden-xs.hidden-sm
+            img.scrolltweet-image(data-toggle='tooltip', data-placement='top', title='skysailor', src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/testimonials/skysailor.png', alt="$t(altAttrSkysailor)")
+            .tweet.popover.right.pull-right
+              .arrow
+              .popover-content
+                | {{ $t('skysailorQuote') }}
+        .col-6
+          img.clearfix.img-responsive.center-block(style='padding-bottom:30px;', src="https://d2afqr2xdmyzvu.cloudfront.net/front/images/Quest_dilatory_dragonSmall.png", alt='')
           .row
-              h3 {{ $t('joinOthers', {userCount:userCount}) }}
-          .row
-            .col-md-4.col-md-offset-4
-              button.btn.btn-primary.btn-lg.btn-block(ng-click='playButtonClick()') {{ $t('free') }}
-      footer.footer
-        .container-fluid.shoutout
-          h4 {{ $t('contribUse') }}
-          .row
-            .col-lg-2.col-md-2.col-md-offset-1.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
-              a(href='http://ionicframework.com/')
-                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/ionic-logo-horizontal-transparent.png', alt {{ $t('altAttrIonic') }})
-            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
-              a(href='https://www.jetbrains.com/webstorm/')
-                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/logo_webstorm.png', alt {{ $t('altAttrWebstorm') }})
-            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
-              a(href='http://github.com/')
-                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/GitHub_Logo.png', alt {{ $t('altAttrGithub') }})
-            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
-              a(href='https://trello.com/')
-                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/trello-logo-blue.png', alt {{ $t('altAttrTrello') }})
-            .col-lg-2.col-lg-offset-0.col-md-2.col-md-offset-0.col-sm-4.col-sm-offset-1.col-xs-6.col-xs-offset-1
-              a(href='https://slack.com/')
-                img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/landing_slack_hash_wordmark_logo.png', alt {{ $t('altAttrSlack') }})
+            .col-lg-5.col-5.offset-0.col-xs-5.col-xs-offset-0
+              .health-progress
+                .meter-label(tooltip='Health')
+                  span.glyphicon.glyphicon-heart
+                .meter.health
+                  .bar
+                    div(style='width:20%;') &nbsp;
+              .quest-friend-img
+                img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/AnnaCosplay.png', alt='')
+            .col-1.col-xs-1
+              h2
+                span.glyphicon.glyphicon-arrow-right
+            .col-lg-5.col-offset-1.col-5.offset-0.col-xs-5.col-xs-offset-0
+              .health-progress
+                .meter-label(tooltip='Health')
+                  span.glyphicon.glyphicon-heart
+                .meter.health
+                  .bar
+                    div(style='width:0%;') &nbsp;
+              .quest-friend-img
+                img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/party/GrimReaper.png', alt='')
+        .col-12
+          button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
+    section#features.bg-info.container-fluid
+      .row
+        h2.col-12.text-center {{ $t('featuresHeading') }}
+      .row
+        .col-6
+          .feature-img
+            img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Mount.png', alt='')
+          .featuretext
+            h4 {{ $t('featurePetHeading') }}
+            p
+              | {{ $t('featurePetByline') }}
+        .col-6
+          .feature-img.center-block
+            img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-triadbingo.png', alt='')
+            img.img-rendering-auto(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/achievement-perfect.png', alt='')
+          .featuretext
+            h4 {{ $t('featureAchievementHeading') }}
+            p {{ $t('featureAchievementByline') }}
+      .row
+        .col-6
+          .feature-img
+            img.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Promo_springclasses2015.png', alt='')
+          .featuretext
+            h4 {{ $t('featureEquipHeading') }}
+            p
+              | {{ $t('featureEquipByline') }}
+        .col-6
+          .feature-img
+            img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/Party-Header.png', alt='')
+          .featuretext
+            h4 {{ $t('featureSocialHeading') }}
+            p
+              | {{ $t('featureSocialByline') }}
+        button.btn.btn-primary.btn-lg.fixedcta.gamifybutton(@click='playButtonClick()') {{ $t('gamifyButton') }}
+    #footercall.container-fluid
+      .row
+        h3.col-12.text-center {{ $t('joinOthers', {userCount}) }}
+      .row
+        .col-6.offset-3
+          button.btn.btn-primary.btn-lg.btn-block(@click='playButtonClick()') {{ $t('free') }}
+    footer.footer.container-fluid
+      .shoutout
+        h4 {{ $t('contribUse') }}
+        .row
+          .col-lg-2.col-2.col-offset-1.offset-1.col-xs-6.col-xs-offset-1
+            a(href='http://ionicframework.com/')
+              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/ionic-logo-horizontal-transparent.png', alt="$t(altAttrIonic)")
+          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
+            a(href='https://www.jetbrains.com/webstorm/')
+              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/logo_webstorm.png', alt="$t(altAttrWebstorm)")
+          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
+            a(href='http://github.com/')
+              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/GitHub_Logo.png', alt="$t(altAttrGithub)")
+          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
+            a(href='https://trello.com/')
+              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/trello-logo-blue.png', alt="$t(altAttrTrello)")
+          .col-lg-2.col-lg-offset-0.col-2.col-offset-0.offset-1.col-xs-6.col-xs-offset-1
+            a(href='https://slack.com/')
+              img.img-rendering-auto.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/landing_slack_hash_wordmark_logo.png', alt="$t(altAttrSlack)")
 
-        .row.footer-content
-          // @TODO: Add footer include ../shared/footer
+      .row.footer-content
+        // @TODO: Add footer include ../shared/footer
 </template>
 
+<style lang="scss" scoped>
+  #intro {
+    background: #fff;
+    padding-top: 1em;
+    padding-bottom: 1em;
+
+    .cta {
+      color: #fff;
+      padding: 2em;
+    }
+
+    .presslogos {
+      padding: 2em;
+
+      img {
+        max-height: 30px;
+        max-width: 120px;
+        filter: grayscale(100%);
+        -moz-filter: grayscale(100%);
+        -ms-filter: grayscale(100%);
+        -o-filter: grayscale(100%);
+        filter: gray;
+        -webkit-filter: grayscale(100%);
+        margin-right: 2em;
+      }
+    }
+
+    .bg-success {
+      background-color: #dff0d8 !important;
+    }
+  }
+
+  #intro-text {
+    .lead {
+      padding: 2em;
+    }
+  }
+
+  #testimonial-carousel {
+    padding: 2em;
+    background-color: #d9edf7 !important;
+
+    h2 {
+      margin-top: 2em;
+      margin-bottom: 3em;
+    }
+
+    .item {
+      display: none;
+    }
+
+    .item.active {
+      display: block;
+    }
+
+    #quote-carousel {
+      margin-top: 7em;
+
+      .user-selector {
+        margin-top: 2em;
+      }
+
+      .user-icon {
+        display: inline-block;
+        vertical-align: bottom;
+
+        img {
+          width: 80px;
+        }
+      }
+    }
+  }
+
+  #uses {
+    padding: 2em;
+  }
+</style>
+
 <script>
 export default {
+  data () {
+    return {
+      userCount: 1000000,
+    };
+  },
   mounted () {
     // Analytics.track({"hitType":"pageview","eventCategory":"page","eventAction":"landing page","page":"/static/front"});
   },
+  methods: {
+    playButtonClick () {
+      this.$router.push('/login');
+    },
+  },
 };
 </script>
diff --git a/website/client/components/userMenu/profile.vue b/website/client/components/userMenu/profile.vue
index cb1f839714..e043e46160 100644
--- a/website/client/components/userMenu/profile.vue
+++ b/website/client/components/userMenu/profile.vue
@@ -1,68 +1,245 @@
 <template lang="pug">
-.standard-page
+b-modal#profile(title="Profile", size='lg', :hide-footer="true")
   .row
-    .col-8
-      .header
-        h1 {{user.profile.name}}
-        h4
-          strong User Id:
-          | {{user._id}}
-    .col-4
-      button.btn.btn-secondary(@click='editing = !editing') Edit
-  .row(v-if='!editing')
-    .col-8
-      .about
-        h2 About
-        p {{user.profile.blurb}}
-      .photo
-        h2 Photo
-        img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
+    .col-6.offset-3.text-center.nav
+      .nav-item(@click='selectedPage = "profile"', :class="{active: selectedPage === 'profile'}") Profile
+      .nav-item(@click='selectedPage = "achievements"', :class="{active: selectedPage === 'achievements'}") Achievements
+      .nav-item(@click='selectedPage = "stats"', :class="{active: selectedPage === 'stats'}") Stats
+  .standard-page(v-show='selectedPage === "profile"')
+    .row
+      .col-8
+        .header
+          h1 {{user.profile.name}}
+          h4
+            strong User Id:
+            | {{user._id}}
+      .col-4
+        button.btn.btn-secondary(@click='editing = !editing') Edit
+    .row(v-if='!editing')
+      .col-8
+        .about
+          h2 About
+          p {{user.profile.blurb}}
+        .photo
+          h2 Photo
+          img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
 
-    .col-4
-      .info
-        h2 info
+      .col-4
+        .info
+          h2 info
+          div
+            strong Joined:
+            | {{user.auth.timestamps.created}}
+          div
+            strong Total Log Ins:
+            span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
+          div
+            | {{getProgressDisplay()}}
+            .progress
+              .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
+                span.sr-only {{ incentivesProgress }}% Complete
+        // @TODO: Implement in V2 .social
+
+    .row(v-if='editing')
+      h1 Edit Profile
+      .col-12
+        .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
+
+        // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
+        .form-group
+          label {{ $t('displayName') }}
+          input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
+        .form-group
+          label {{ $t('photoUrl') }}
+          input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
+        .form-group
+          label {{ $t('about') }}
+          textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
+          // include ../../shared/formatting-help
+        .form-group
+          label Facebook
+          input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
+        .form-group
+          label Instagram
+          input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
+        .form-group
+          label Twitter
+          input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
+
+      .col-3.offset-6.text.center
+        button.btn.btn-primary(@click='save()') {{ $t("save") }}
+        button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
+  .standard-page.container(v-show='selectedPage === "achievements"')
+    .row(v-for='(category, key) in achievements')
+      h2.col-12 {{ $t(key+'Achievs') }}
+      .col-3.text-center(v-for='achievment in category.achievements')
+        div.achievement-container(:data-popover-html='achievment.title + achievment.text',
+          popover-placement='achievPopoverPlacement',
+          popover-append-to-body='achievAppendToBody')
+          div(popover-trigger='mouseenter',
+            :data-popover-html='achievment.title + achievment.text',
+            popover-placement='achievPopoverPlacement',
+            popover-append-to-body='achievAppendToBody')
+              .achievement(:class='achievment.icon + "2x"', v-if='achievment.earned')
+               .counter.badge.badge-info.stack-count(v-if='achievment.optionalCount') {{achievment.optionalCount}}
+              .achievement(class='achievement-unearned2x', v-if='!achievment.earned')
+    .row
+      .col-6
+        h2 Challeges Won
+        div(v-for='chal in user.achievements.challenges')
+          span {{chal}}
+      .col-6
+        h2 Quests Completed
+        div(v-for='(value, key) in user.achievements.quests')
+          span {{ content.quests[k].text() }}
+          span {{ value }}
+  .standard-page(v-show='selectedPage === "stats"')
+    h1 Stats
+    .row
+      .col-6
+        h2.text-center Equipment
+        .well.row
+          .col-4
+      .col-6
+        h2.text-center Costume
+    .row
+      .col-6
+        h2.text-center Pet
+      .col-6
+        h2.text-center Mount
+    .row#attributes
+      hr.col-12
+      h2.col-12 Attributes
+      .row.col-6(v-for="(statInfo, stat) in stats")
+        .col-4.attribute-label
+          span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
+            :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
+          div {{ $t(statInfo.title) }}
+          strong.number {{ statsComputed[stat] }}
+        .col-6
+          ul.bonus-stats
+            li
+              strong Level:
+              | {{statsComputed.levelBonus[stat]}}
+            li
+              strong Equipment:
+              | {{statsComputed.gearBonus[stat]}}
+            li
+              strong Class:
+              | {{statsComputed.classBonus[stat]}}
+            li
+              strong Allocated:
+              | {{user.stats[stat]}}
+            li
+              strong Buffs:
+              | {{user.stats.buffs[stat]}}
+
+    .row
+      .col-4
         div
-          strong Joined:
-          | {{user.auth.timestamps.created}}
+          h3 Basics
+          ul
+            li Health: {{user.stats.hp}}/{{user.stats.maxHealth}}
+            li Mana: {{user.stats.mp}}/{{user.stats.maxMP}}
+            li Gold: {{user.stats.gp}}
+            li Level: {{user.stats.lvl}}
+            li Experience: {{user.stats.exp}}
+
+        div(v-if='user.flags.itemsEnabled')
+          h3 Battle Gear
+          ul
+            li(v-for='(key, itemType) in user.items.gear.equipped', v-if='flatGear[key]')
+              strong {{ flatGear[key].text() }}
+              strong(v-if='flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int') :&nbsp;
+                span(v-for='stat in ["str","con","per","int"]', v-if='flatGear[key][stat]') {{flatGear[key][stat]}} {{ $t(stat) }}&nbsp;
+
+        div(v-if='user.preferences.costume')
+          h4(v-once) {{ $t('costume') }}
+          div
+            div(ng-repeat='(key, itemType) in user.items.gear.costume')
+              strong {{flatGear[key].text()}}
+
         div
-          strong Total Log Ins:
-          span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
-        div
-          | {{getProgressDisplay()}}
-          .progress
-            .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
-              span.sr-only {{ incentivesProgress }}% Complete
-      // @TODO: Implement in V2 .social
+          h3 Background
+          ul
+            li(v-if='!user.preferences.background') None
+            li(v-if='user.preferences.background') {{ user.preferences.background }}
 
-  .row(v-if='editing')
-    h1 Edit Profile
-    .col-12
-      .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
+        div(ng-if='user.flags.dropsEnabled')
+          h3(v-once) {{ $t('pets') }}
+          ul
+            li(ng-if='user.items.currentPet')
+              | {{ $t('activePet') }}:
+              | {{ formatAnimal(user.items.currentPet, 'pet') }}
+            li
+              | {{ $t('petsFound') }}:
+              | {{ totalCount(user.items.pets) }}
+            li
+              | {{ $t('beastMasterProgress') }}:
+              | {{ beastMasterProgress(user.items.pets) }}
 
-      // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
-      .form-group
-        label {{ $t('displayName') }}
-        input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
-      .form-group
-        label {{ $t('photoUrl') }}
-        input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
-      .form-group
-        label {{ $t('about') }}
-        textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
-        // include ../../shared/formatting-help
-      .form-group
-        label Facebook
-        input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
-      .form-group
-        label Instagram
-        input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
-      .form-group
-        label Twitter
-        input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
+          h3(v-once) {{ $t('mounts') }}
+          ul
+            li(v-if='user.items.currentMount')
+              | {{ $t('activeMount') }}:
+              | {{ formatAnimal(user.items.currentMount, 'mount') }}
+            li
+              | {{ $t('mountsTamed') }}:
+              | {{ totalCount(user.items.mounts) }}
+            li
+              | {{ $t('mountMasterProgress') }}:
+              | {{ mountMasterProgress(user.items.mounts) }}
 
-    .col-3.offset-6.text.center
-      button.btn.btn-primary(@click='save()') {{ $t("save") }}
-      button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
+      .col-4(v-if='user.flags.classSelected && !user.preferences.disableClasses')
+          h3(v-once) {{ $t('characterBuild') }}
+          h4(v-once) {{ $t('class') + ': ' }}
+            span {{ classText }}&nbsp;
+            button.btn.btn-danger.btn-xs(@click='changeClass(null)', v-once) {{ $t('changeClass') }}
+            small.cost 3
+              span.Pet_Currency_Gem1x.inline-gems
+
+          div
+            div
+              p(v-if='userLevel100Plus', v-once) {{ $t('noMoreAllocate') }}
+              p(v-if='user.stats.points || userLevel100Plus')
+                strong.inline
+                  | {{user.stats.points}}&nbsp;
+                strong.hint(popover-trigger='mouseenter',
+                  popover-placement='right', :popover="$t('levelPopover')") {{ $t('unallocated') }}
+            div
+              fieldset.auto-allocate
+                  .checkbox
+                    label
+                      input(type='checkbox', v-model='user.preferences.automaticAllocation',
+                        @change='set({"preferences.automaticAllocation": user.preferences.automaticAllocation, "preferences.allocationMode": "taskbased"})')
+                      span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('autoAllocationPop')") {{ $t('autoAllocation') }}
+                  form(v-if='user.preferences.automaticAllocation', style='margin-left:1em')
+                    .radio
+                      label
+                        input(type='radio', name='allocationMode', value='flat', v-model='user.preferences.allocationMode',
+                          @change='set({"preferences.allocationMode": "flat"})')
+                        span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('evenAllocationPop')") {{ $t('evenAllocation') }}
+                    .radio
+                      label
+                        input(type='radio', name='allocationMode', value='classbased',
+                          v-model='user.preferences.allocationMode', @change='set({"preferences.allocationMode": "classbased"})')
+                        span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('classAllocationPop')") {{ $t('classAllocation') }}
+                    .radio
+                      label
+                        input(type='radio', name='allocationMode', value='taskbased', v-model='user.preferences.allocationMode', @change='set({"preferences.allocationMode": "taskbased"})')
+                        span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('taskAllocationPop')") {{ $t('taskAllocation') }}
+                  div(v-if='user.preferences.automaticAllocation && !(user.preferences.allocationMode === "taskbased") && (user.stats.points > 0)')
+                    button.btn.btn-primary.btn-xs(@click='allocateNow({})', popover-trigger='mouseenter', popover-placement='right', :popover="$t('distributePointsPop')")
+                      span.glyphicon.glyphicon-download
+                      |&nbsp;
+                      | {{ $t('distributePoints') }}
+            .row(v-for='(statInfo, stat) in allocateStatsList')
+              .col-8
+                span.hint(popover-trigger='mouseenter', popover-placement='right', :popover='$t(statInfo.popover)')
+                | {{ $t(statInfo.title) + user.stats[stat] }}
+              .col-4(v-if='user.stats.points', @click='allocate(stat)')
+                 button.btn.btn-primary(popover-trigger='mouseenter', popover-placement='right',
+                  :popover='$t(statInfo.allocatepop)') +
 </template>
 
 <style lang="scss" scoped>
@@ -77,17 +254,61 @@
       color: #686274;
     }
   }
+
+  .nav {
+    font-weight: bold;
+    height: 40px;
+  }
+
+  .nav-item {
+    display: inline-block;
+    margin-right: 2em;
+    margin-left: 1em;
+    padding: 1em;
+  }
+
+  .nav-item:hover, .nav-item.active {
+    color: #4f2a93;
+    border-bottom: 2px solid #4f2a93;
+    cursor: pointer;
+  }
+
+  #attributes {
+    .number {
+      font-size: 64px;
+      font-weight: bold;
+      color: #686274;
+    }
+
+    .attribute-label {
+      text-align: center;
+    }
+  }
 </style>
 
 <script>
+import bModal from 'bootstrap-vue/lib/components/modal';
 import each from 'lodash/each';
 import { mapState } from 'client/libs/store';
+import size from 'lodash/size';
+import keys from 'lodash/keys';
+import { beastMasterProgress, mountMasterProgress } from '../../../common/script/count';
+import statsComputed from  '../../../common/script/libs/statsComputed';
+import autoAllocate from '../../../common/script/fns/autoAllocate';
+import changeClass from  '../../../common/script/ops/changeClass';
+import allocate from  '../../../common/script/ops/allocate';
 
+import achievementsLib from '../../../common/script/libs/achievements';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
 import Content from '../../../common/script/content';
+const DROP_ANIMALS = keys(Content.pets);
+const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
 
 export default {
+  components: {
+    bModal,
+  },
   data () {
     return {
       editing: false,
@@ -99,32 +320,79 @@ export default {
       managerEmail: {
         hrefBlankCommunityManagerEmail: `<a href="mailto:${COMMUNITY_MANAGER_EMAIL}">${COMMUNITY_MANAGER_EMAIL}</a>`,
       },
+      selectedPage: 'profile',
+      achievements: {},
+      content: Content,
+      stats: {
+        str: {
+          title: 'strength',
+          popover: 'strengthText',
+        },
+        int: {
+          title: 'intelligence',
+          popover: 'intText',
+        },
+        con: {
+          title: 'constitution',
+          popover: 'conText',
+        },
+        per: {
+          title: 'perception',
+          popover: 'perText',
+        },
+      },
+      allocateStatsList: {
+        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
+        int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
+        con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
+        per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
+      },
     };
   },
   mounted () {
     this.editingProfile.name = this.user.profile.name;
     this.editingProfile.imageUrl = this.user.profile.imageUrl;
-    this.editingProfile.imageUrl = this.user.profile.imageUrl;
+    this.achievements = achievementsLib.getAchievementsForProfile(this.user);
+    this.$root.$emit('show::modal', 'profile');
   },
   computed: {
-    ...mapState({user: 'user.data'}),
+    ...mapState({
+      user: 'user.data',
+      flatGear: 'content.gear.flat',
+    }),
     incentivesProgress () {
       return this.getIncentivesProgress();
     },
+    statsComputed () {
+      return statsComputed(this.user);
+    },
+    userLevel100Plus () {
+      return this.user.stats.lvl >= 100;
+    },
+    classText () {
+      let classTexts = {
+        warrior: this.$t('warrior'),
+        wizard: this.$t('mage'),
+        rogue: this.$t('rogue'),
+        healer: this.$t('healer'),
+      };
+
+      return classTexts[this.user.stats.class];
+    },
   },
   methods: {
     getProgressDisplay () {
-      let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
-      if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
-      let nextRewardAt = currentLoginDay.nextRewardAt;
-      if (!nextRewardAt) return this.$t('moreIncentivesComingSoon');
-      // if we are on a reward day, let's show progress relative to this
-      if (currentLoginDay.reward) currentLoginDay.prevRewardKey = this.user.loginIncentives;
-      if (!currentLoginDay.prevRewardKey) currentLoginDay.prevRewardKey = 0;
-
-      let start = this.user.loginIncentives - currentLoginDay.prevRewardKey;
-      let end = nextRewardAt - currentLoginDay.prevRewardKey;
-      return `${this.$t('checkinProgressTitle')} ${start}/${end}`;
+      // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
+      // if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
+      // let nextRewardAt = currentLoginDay.nextRewardAt;
+      // if (!nextRewardAt) return this.$t('moreIncentivesComingSoon');
+      // // if we are on a reward day, let's show progress relative to this
+      // if (currentLoginDay.reward) currentLoginDay.prevRewardKey = this.user.loginIncentives;
+      // if (!currentLoginDay.prevRewardKey) currentLoginDay.prevRewardKey = 0;
+      //
+      // let start = this.user.loginIncentives - currentLoginDay.prevRewardKey;
+      // let end = nextRewardAt - currentLoginDay.prevRewardKey;
+      // return `${this.$t('checkinProgressTitle')} ${start}/${end}`;
     },
     getIncentivesProgress () {
       let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
@@ -147,6 +415,58 @@ export default {
 
       this.editing = false;
     },
+    formatAnimal (animalName, type) {
+      if (type === 'pet') {
+        if (Content.petInfo.hasOwnProperty(animalName)) {
+          return Content.petInfo[animalName].text();
+        } else {
+          return this.$t('noActivePet');
+        }
+      } else if (type === 'mount') {
+        if (Content.mountInfo.hasOwnProperty(animalName)) {
+          return Content.mountInfo[animalName].text();
+        } else {
+          return this.$t('noActiveMount');
+        }
+      }
+    },
+    formatBackground (background) {
+      let bg = Content.appearances.background;
+
+      if (bg.hasOwnProperty(background)) {
+        return `${bg[background].text()} (${this.$t(bg[background].set.text)})`;
+      }
+      return window.env.t('noBackground');
+    },
+    totalCount (objectToCount) {
+      let total = size(objectToCount);
+      return total;
+    },
+    beastMasterProgress (pets) {
+      let dropPetsFound = beastMasterProgress(pets);
+      let display = this.formatOutOfTotalDisplay(dropPetsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
+
+      return display;
+    },
+    mountMasterProgress (mounts) {
+      let dropMountsFound = mountMasterProgress(mounts);
+      let display = this.formatOutOfTotalDisplay(dropMountsFound, TOTAL_NUMBER_OF_DROP_ANIMALS);
+
+      return display;
+    },
+    formatOutOfTotalDisplay (stat, totalStat) {
+      let display = `${stat}/${totalStat}`;
+      return display;
+    },
+    changeClass () {
+      changeClass(this.user);
+    },
+    allocate (stat) {
+      allocate(this.user, stat);
+    },
+    allocateNow () {
+      autoAllocate(this.user);
+    },
   },
 };
 </script>
diff --git a/website/client/components/userMenu/stats.vue b/website/client/components/userMenu/stats.vue
index 7584f57a05..2b4af50f14 100644
--- a/website/client/components/userMenu/stats.vue
+++ b/website/client/components/userMenu/stats.vue
@@ -169,12 +169,10 @@
 </template>
 
 <style lang="scss" scoped>
-
   .btn-xs {
     font-size: 12px;
     padding: .2em;
   }
-
 </style>
 
 <script>
diff --git a/website/client/mixins/challengeUtilities.js b/website/client/mixins/challengeUtilities.js
new file mode 100644
index 0000000000..6cfbe51a33
--- /dev/null
+++ b/website/client/mixins/challengeUtilities.js
@@ -0,0 +1,47 @@
+import intersection from 'lodash/intersection';
+
+export default {
+  methods: {
+    isMemberOfChallenge (user, challenge) {
+      return user.challenges.indexOf(challenge._id) !== -1;
+    },
+    isLeaderOfChallenge (user, challenge) {
+      return challenge.leader && user._id === challenge.leader._id;
+    },
+    filterChallenge (challenge, filters, search, user) {
+      let passedSearch = true;
+      let hasCategories = true;
+      let isMember = true;
+      let isLeader = true;
+      let ownerShip = true;
+
+      if (search) {
+        passedSearch = challenge.name.toLowerCase().indexOf(search.toLowerCase()) >= 0;
+      }
+
+      if (filters.categories && filters.categories.length > 0) {
+        let intersectingCats = intersection(filters.categories, challenge.categories);
+        hasCategories = intersectingCats.length > 0;
+      }
+
+      let filteringRole = filters.roles && filters.roles.length > 0;
+      if (filteringRole && filters.roles.indexOf('participating') !== -1) {
+        isMember = this.isMemberOfChallenge(user, challenge);
+      }
+
+      if (filteringRole && filters.roles.indexOf('not_participating') !== -1) {
+        isMember = !this.isMemberOfChallenge(user, challenge);
+      }
+
+      if (filters.ownership && filters.ownership.indexOf('not_owned') !== -1) {
+        ownerShip = !this.isLeaderOfChallenge(user, challenge);
+      }
+
+      if (filters.ownership && filters.ownership.indexOf('owned') !== -1) {
+        ownerShip = this.isLeaderOfChallenge(user, challenge);
+      }
+
+      return passedSearch && hasCategories && isMember && isLeader && ownerShip;
+    },
+  },
+};
diff --git a/website/client/mixins/groupsUtilities.js b/website/client/mixins/groupsUtilities.js
index e3266597d8..6efa236f4a 100644
--- a/website/client/mixins/groupsUtilities.js
+++ b/website/client/mixins/groupsUtilities.js
@@ -26,6 +26,7 @@ export default {
       let hasCategories = true;
       let isMember = true;
       let isLeader = true;
+      let correctSize = true;
 
       if (search) {
         passedSearch = group.name.toLowerCase().indexOf(search.toLowerCase()) >= 0;
@@ -37,17 +38,27 @@ export default {
       }
 
       let filteringRole = filters.roles && filters.roles.length > 0;
-      if (filteringRole && filters.roles.indexOf('member')) {
+      if (filteringRole && filters.roles.indexOf('member') !== -1) {
         isMember = this.isMemberOfGroup(user, group);
       }
 
-      if (filteringRole && filters.roles.indexOf('guild_leader')) {
+      if (filteringRole && filters.roles.indexOf('guild_leader') !== -1) {
         isLeader = this.isLeaderOfGroup(user, group);
       }
 
-      // @TODO: Tier filters
+      if (filters.guildSize && filters.guildSize.indexOf('gold_tier') !== -1) {
+        correctSize = group.memberCount > 1000;
+      }
 
-      return passedSearch && hasCategories && isMember && isLeader;
+      if (filters.guildSize && filters.guildSize.indexOf('silver_tier') !== -1) {
+        correctSize = group.memberCount > 10 && group.memberCount < 1000;
+      }
+
+      if (filters.guildSize && filters.guildSize.indexOf('bronze_tier') !== -1) {
+        correctSize = group.memberCount < 10;
+      }
+
+      return passedSearch && hasCategories && isMember && isLeader && correctSize;
     },
   },
 };
diff --git a/website/client/mixins/guide.js b/website/client/mixins/guide.js
new file mode 100644
index 0000000000..1b0d2fff11
--- /dev/null
+++ b/website/client/mixins/guide.js
@@ -0,0 +1,325 @@
+// var chapters = {
+//    intro: [
+//      [
+//        {
+//          state: 'options.profile.avatar',
+//          element: '.tab-content.ng-scope',
+//          content: this.$t('tourAvatar'),
+//          placement: 'top',
+//          proceed: this.$t('tourAvatarProceed'),
+//          backdrop: false,
+//          orphan: true,
+//          gold: 4,
+//          experience: 29
+//        },
+//        {
+//          state: 'tasks',
+//          element: '.task-column.todos',
+//          content: this.$t('tourToDosBrief'),
+//          placement: 'top',
+//          proceed: this.$t('tourOkay'),
+//          gold: 4,
+//          experience: 29
+//        },
+//        {
+//          state: 'tasks',
+//          element: '.task-column.dailys',
+//          content: this.$t('tourDailiesBrief'),
+//          placement: 'top',
+//          proceed: this.$t('tourDailiesProceed'),
+//          gold: 4,
+//          experience: 29
+//        },
+//        {
+//          state: 'tasks',
+//          element: '.task-column.habits',
+//          content: this.$t('tourHabitsBrief'),
+//          placement: 'top',
+//          proceed: this.$t('tourHabitsProceed'),
+//          gold: 4,
+//          experience: 29
+//        },
+//        {
+//          state: 'tasks',
+//          element: 'h2.task-column_title.reward-title',
+//          content: User.user.flags.armoireEnabled ? this.$t('tourRewardsArmoire') : this.$t('tourRewardsBrief'),
+//          placement: 'left',
+//          proceed: this.$t('tourRewardsProceed'),
+//          gold: 4,
+//          experience: 29,
+//          final: true
+//        }
+//      ]
+//    ],
+//    classes: [
+//      [
+//        {
+//          orphan: true,
+//          content: this.$t('classGearText'),
+//          final: true,
+//          state: 'options.inventory.equipment',
+//          element: '.equipment-tab',
+//          title: this.$t('classGear'),
+//          hideNavigation: true
+//        }
+//        /*, {
+//          state: 'options.profile.stats',
+//          element: '.allocate-stats',
+//          title: this.$t('stats'),
+//          content: this.$t('classStats')
+//        }, {
+//          state: 'options.profile.stats',
+//          element: '.auto-allocate',
+//          title: this.$t('autoAllocate'),
+//          placement: 'left',
+//          content: this.$t('autoAllocateText')
+//        }, {
+//          element: '.meter.mana',
+//          title: this.$t('spells'),
+//          content: this.$t('spellsText')
+//        }, {
+//          orphan: true,
+//          title: this.$t('readMore'),
+//          content: this.$t('moreClass'),
+//          final: true
+//        }*/
+//      ]
+//    ],
+//    stats: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourStatsPage'),
+//        final: true,
+//        proceed: this.$t('tourOkay'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    tavern: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourTavernPage'),
+//        final: true,
+//        proceed: this.$t('tourAwesome'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    party: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourPartyPage'),
+//        final: true,
+//        proceed: this.$t('tourSplendid'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    guilds: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourGuildsPage'),
+//        final: true,
+//        proceed: this.$t('tourNifty'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    challenges: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourChallengesPage'),
+//        final: true,
+//        proceed: this.$t('tourOkay'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    market: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourMarketPage'),
+//        final: true,
+//        proceed: this.$t('tourAwesome'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    hall: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourHallPage'),
+//        final: true,
+//        proceed: this.$t('tourSplendid'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    pets: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourPetsPage'),
+//        final: true,
+//        proceed: this.$t('tourNifty'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    mounts: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourMountsPage'),
+//        final: true,
+//        proceed: this.$t('tourOkay'),
+//        hideNavigation: true
+//      }
+//    ]],
+//    equipment: [[
+//      {
+//        orphan: true,
+//        content: this.$t('tourEquipmentPage'),
+//        final: true,
+//        proceed: this.$t('tourAwesome'),
+//        hideNavigation: true
+//      }
+//    ]]
+//  }
+//
+//  _.each(chapters, function(chapter, k){
+//    _(chapter).flattenDeep().forEach(function(step, i) {
+//      step.content = '<div><div class='' + (env.worldDmg.guide ? 'npc_justin_broken' : 'npc_justin') + ' float-left'></div>' + step.content + '</div>';
+//      $(step.element).popover('destroy'); // destroy existing hover popovers so we can add our own
+//      step.onShow = function(){
+//        Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':false});
+//        if (step.state && !$state.is(step.state)) {
+//          $state.go(step.state);
+//          return $timeout(function(){});
+//        }
+//      };
+//      step.onHide = function(){
+//        var ups = {};
+//        var lastKnownStep = User.user.flags.tour[k];
+//
+//        // Return early if user has already completed this tutorial
+//        if (lastKnownStep === -2) {
+//          return;
+//        }
+//
+//        if (i > lastKnownStep) {
+//          if (step.gold) ups['stats.gp'] = User.user.stats.gp + step.gold;
+//          if (step.experience) ups['stats.exp'] = User.user.stats.exp + step.experience;
+//          ups['flags.tour.'+k] = i;
+//        }
+//
+//        if (step.final) { // -2 indicates complete
+//          if (k === 'intro') {
+//            // Manually show bunny scroll reward
+//            var rewardData = {
+//              reward: [Shared.content.quests.dustbunnies],
+//              rewardKey: ['inventory_quest_scroll_dustbunnies'],
+//              rewardText: Shared.content.quests.dustbunnies.text(),
+//              message: this.$t('checkinEarned'),
+//              nextRewardAt: 1,
+//            };
+//            Notification.showLoginIncentive(User.user, rewardData, Social.loadWidgets);
+//          }
+//          //Mark tour complete
+//          ups['flags.tour.'+k] = -2;
+//          Analytics.track({'hitType':'event','eventCategory':'behavior','eventAction':'tutorial','eventLabel':k+'-web','eventValue':i+1,'complete':true})
+//        }
+//
+//        User.set(ups);
+//        // User.set() doesn't include a check for level changes, so manually check here.
+//        if (step.experience) {
+//          User.user.fns.updateStats(User.user.stats);
+//        }
+//      }
+//    });
+//  });
+//
+//  var tour = {};
+//  _.each(chapters, function(v,k){
+//    tour[k] = new Tour({
+//      name: k,
+//      backdrop: true,
+//      template: function(i,step){
+//        var showFinish = step.final || k == 'classes';
+//        var showCounter = k=='intro' && !step.final;
+//
+//        return '<div class='popover' role='tooltip'>' +
+//          '<div class='arrow'></div>' +
+//          '<h3 class='popover-title'></h3>' +
+//          '<div class='popover-content'></div>' +
+//          '<div class='popover-navigation'> ' +
+//            (showCounter ? '<span style='float:right;'>'+ (i+1 +' of '+ _.flattenDeep(chapters[k]).length) +'</span>' : '')+ // counter
+//            '<div class='btn-group'>' +
+//              (step.hideNavigation ? '' : '<button class='btn btn-sm btn-default' data-role='prev'>&laquo; Previous</button>') +
+//              (showFinish ? ('<button class='btn btn-sm btn-primary' data-role='end' style='float:none;'>' + (step.proceed ? step.proceed : 'Finish Tour') + '</button>') :
+//                (step.hideNavigation ? '' : ('<button class='btn btn-sm btn-primary' data-role='next'>' + (step.proceed ? step.proceed : 'Next') + ' &raquo;</button>'))) +
+//              '<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button>' +
+//            '</div>' +
+//          '</div>' +
+//          '</div>';
+//      },
+//      storage: false
+//    });
+//  });
+//
+//  var goto = function(chapter, page, force) {
+//    if (chapter == 'intro' && User.user.flags.welcomed != true) User.set({'flags.welcomed': true});
+//    if (chapter == 'classes' && User.user.flags.tour.classes === -2) return;
+//    if (page === -1) page = 0;
+//    var curr = User.user.flags.tour[chapter];
+//    if (page != curr+1 && !force) return;
+//    var chap = tour[chapter], opts = chap._options;
+//    opts.steps = [];
+//    _.times(page, function(p){
+//      opts.steps  = opts.steps.concat(chapters[chapter][p]);
+//    })
+//
+//    var end = opts.steps.length;
+//    opts.steps = opts.steps.concat(chapters[chapter][page]);
+//    chap._removeState('end');
+//
+//    if (chap._inited) {
+//      chap.goTo(end);
+//    } else {
+//      chap.setCurrentStep(end);
+//      if (page > 0) {
+//        chap.init();
+//        chap.goTo(page);
+//      } else {
+//        chap.start();
+//      }
+//    }
+//  }
+//
+//  //Init and show the welcome tour (only after user is pulled from server & wrapped).
+//  var watcher = $rootScope.$watch('User.user._wrapped', function(wrapped){
+//    if (!wrapped) return; // only run after user has been wrapped
+//    watcher(); // deregister watcher
+//    if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
+//    if (User.user.flags.welcomed == false) {
+//      $rootScope.openModal('welcome', {size: 'lg', backdrop: 'static', keyboard: false});
+//    }
+//
+//    var alreadyShown = function(before, after) { return !(!before && after === true) };
+//    //$rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
+//    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
+//      switch (toState.name) {
+//        // case 'options.profile.avatar':   return goto('intro', 5);
+//        case 'options.profile.stats':        return goto('stats', 0);
+//        case 'options.social.tavern':        return goto('tavern', 0);
+//        case 'options.social.party':         return goto('party', 0);
+//        case 'options.social.guilds.public': return goto('guilds', 0);
+//        case 'options.social.challenges':    return goto('challenges', 0);
+//        case 'options.social.hall.heroes':   return goto('hall', 0);
+//        case 'options.inventory.drops':      return goto('market', 0);
+//        case 'options.inventory.pets':       return goto('pets', 0);
+//        case 'options.inventory.mounts':     return goto('mounts', 0);
+//        case 'options.inventory.equipment':  return goto('equipment', 0);
+//      }
+//    });
+//  });
+//
+// export default {
+//   methods: {
+//     hoyo (user) {
+//       // @TODO: What is was the timeout for?
+//       window.amplitude.setUserId(user._id);
+//       window.ga('set', {userId: user._id});
+//     },
+//   },
+// };
diff --git a/website/client/router.js b/website/client/router.js
index c6ef78199b..fbb81bb30b 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -9,7 +9,6 @@ import ParentPage from './components/parentPage';
 import Page from './components/page';
 
 // Static Pages
-const Home = () => import(/* webpackChunkName: "static" */'./components/static/home');
 const AppPage = () => import(/* webpackChunkName: "static" */'./components/static/app');
 const ClearBrowserDataPage = () => import(/* webpackChunkName: "static" */'./components/static/clearBrowserData');
 const CommunityGuidelinesPage = () => import(/* webpackChunkName: "static" */'./components/static/communityGuidelines');
@@ -33,8 +32,8 @@ const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/a
 // User Pages
 const CreatorIntro = () => import(/* webpackChunkName: "creator" */'./components/creatorIntro');
 const BackgroundsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/backgrounds');
-const StatsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/stats');
-const AchievementsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/achievements');
+// const StatsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/stats');
+// const AchievementsPage = () => import(/* webpackChunkName: "user" */'./components/userMenu/achievements');
 const ProfilePage = () => import(/* webpackChunkName: "user" */'./components/userMenu/profile');
 
 // Settings
@@ -97,8 +96,8 @@ const router = new VueRouter({
   },
   // requiresLogin is true by default, isStatic false
   routes: [
-    { name: 'creator', path: '/creator', component: CreatorIntro },
-    { name: 'home', path: '/home', component: Home, meta: {requiresLogin: false} },
+    { name: 'avatar', path: '/avatar', component: CreatorIntro },
+    { name: 'home', path: '/home', component: FrontPage, 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 },
@@ -173,10 +172,9 @@ const router = new VueRouter({
       path: '/user',
       component: ParentPage,
       children: [
-        { name: 'avatar', path: 'avatar', component: Page },
         { name: 'backgrounds', path: 'backgrounds', component: BackgroundsPage },
-        { name: 'stats', path: 'stats', component: StatsPage },
-        { name: 'achievements', path: 'achievements', component: AchievementsPage },
+        { name: 'stats', path: 'stats', component: ProfilePage },
+        { name: 'achievements', path: 'achievements', component: ProfilePage },
         { name: 'profile', path: 'profile', component: ProfilePage },
         {
           name: 'settings',
diff --git a/website/client/store/actions/challenges.js b/website/client/store/actions/challenges.js
index 21f245485e..8ef7d980c7 100644
--- a/website/client/store/actions/challenges.js
+++ b/website/client/store/actions/challenges.js
@@ -2,9 +2,7 @@ import axios from 'axios';
 import omit from 'lodash/omit';
 
 export async function createChallenge (store, payload) {
-  let response = await axios.post('/api/v3/challenges', {
-    data: payload.challenge,
-  });
+  let response = await axios.post('/api/v3/challenges', payload.challenge);
 
   return response.data.data;
 }
@@ -55,9 +53,7 @@ export async function updateChallenge (store, payload) {
 
   if (challengeDataToSend.leader && challengeDataToSend.leader._id) challengeDataToSend.leader = challengeDataToSend.leader._id;
 
-  let response = await axios.post(`/api/v3/challenges/${payload.challenge._id}`, {
-    data: challengeDataToSend,
-  });
+  let response = await axios.put(`/api/v3/challenges/${payload.challenge._id}`, challengeDataToSend);
 
   return response.data.data;
 }
diff --git a/website/client/store/actions/guilds.js b/website/client/store/actions/guilds.js
index 14ec5eff27..bf7986e7e0 100644
--- a/website/client/store/actions/guilds.js
+++ b/website/client/store/actions/guilds.js
@@ -58,16 +58,19 @@ export async function leave (store, payload) {
     keep: payload.keep,
     keepChallenges: payload.keepChallenges,
   };
-  let response = await axios.post(`/api/v3/groups/${payload.guildId}/leave`, data);
+  let response = await axios.post(`/api/v3/groups/${payload.groupId}/leave`, data);
 
   // @TODO: update for party
-  let index = store.state.user.data.guilds.indexOf(payload.guildId);
+  let index = store.state.user.data.guilds.indexOf(payload.groupId);
   store.state.user.data.guilds.splice(index, 1);
   if (payload.type === 'myGuilds') {
     let guildIndex = findIndex(store.state.myGuilds, (guild) => {
-      return guild._id === payload.guildId;
+      return guild._id === payload.groupId;
     });
     store.state.myGuilds.splice(guildIndex, 1);
+  } else if (payload.type === 'party') {
+    store.state.user.data.party._id = null;
+    store.state.party = {};
   }
 
   return response.data.data;
@@ -80,10 +83,14 @@ export async function create (store, payload) {
   // @TODO: Add party
   if (newGroup.privacy === 'public') {
     store.state.publicGuilds.push(newGroup);
-  } else if (newGroup.privacy === 'private') {
+  }
+
+  if (newGroup.leader._id === store.state.user.data._id || newGroup.privacy === 'private') {
     store.state.myGuilds.push(newGroup);
   }
 
+  store.state.user.data.guilds.push(newGroup._id);
+
   return newGroup;
 }
 
diff --git a/website/client/store/actions/members.js b/website/client/store/actions/members.js
index e16190ec15..819334b622 100644
--- a/website/client/store/actions/members.js
+++ b/website/client/store/actions/members.js
@@ -26,9 +26,9 @@ export async function getGroupInvites (store, payload) {
 }
 
 export async function getChallengeMembers (store, payload) {
-  let url = `${apiV3Prefix}/challenges/${payload.challengeId}/members?includeAllMembers=true`;
+  let url = `${apiV3Prefix}/challenges/${payload.challengeId}/members?includeAllMembers=true&includeAllPublicFields=true`;
   let response = await axios.get(url);
-  return response;
+  return response.data.data;
 }
 
 export async function getChallengeMemberProgress (store, payload) {
diff --git a/website/client/store/index.js b/website/client/store/index.js
index 71f9c760cc..c9feee5390 100644
--- a/website/client/store/index.js
+++ b/website/client/store/index.js
@@ -47,12 +47,18 @@ export default function () {
         market: asyncResourceFactory(),
       },
       myGuilds: [],
+      publicGuilds: [],
+      groupFormOptions: {
+        creatingParty: false,
+      },
       editingGroup: {}, // TODO move to local state
       // content data, frozen to prevent Vue from modifying it since it's static and never changes
       // TODO apply freezing to the entire codebase (the server) and not only to the client side?
       // NOTE this takes about 10-15ms on a fast computer
       content: deepFreeze(content),
       constants: deepFreeze(constants),
+      hideHeader: false,
+      viewingMembers: [],
     },
   });
 
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index a143c20225..06683bcd9c 100644
--- a/website/common/locales/en/newClient.json
+++ b/website/common/locales/en/newClient.json
@@ -77,6 +77,7 @@
   "silverTier": "Silver Tier",
   "bronzeTier": "Bronze Tier",
   "privacySettings": "Privacy Settings",
+  "updateChallenge": "Update Challenge",
   "onlyLeaderCreatesChallenges": "Only the Leader can create Challenges",
   "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
   "privateGuild": "Private Guild",
@@ -230,5 +231,7 @@
   "featuredItems": "Featured Items!",
   "not_participating": "Not Participating",
   "owned": "Owned",
-  "not_owned": "Not Owned"
+  "not_owned": "Not Owned",
+  "participantsTitle": "Participants",
+  "shortName": "Short Name"
 }
diff --git a/website/server/controllers/api-v3/members.js b/website/server/controllers/api-v3/members.js
index 2db5342dea..ea9b4898cd 100644
--- a/website/server/controllers/api-v3/members.js
+++ b/website/server/controllers/api-v3/members.js
@@ -219,6 +219,11 @@ function _getMembersForItem (type) {
 
     if (type === 'challenge-members') {
       query.challenges = challenge._id;
+
+      if (req.query.includeAllPublicFields === 'true') {
+        fields = memberFields;
+        addComputedStats = true;
+      }
     } else if (type === 'group-members') {
       if (group.type === 'guild') {
         query.guilds = group._id;