From c5e0bcfb0edf2b60cf4c323680d866032b39bf87 Mon Sep 17 00:00:00 2001
From: Keith Holliday <krh121791@yahoo.com>
Date: Sat, 29 Jul 2017 16:08:36 -0600
Subject: [PATCH] New client more misc (#8902)

* View party now opens member modal

* Clicking member in header opens member detail modal

* Began sticky header

* Added sleep

* Removed extra inbox and added name styles

* Lint fixes

* Added member filter

* Added task counts

* Updated quest start modal

* Updated members modal style

* Fixed editing party

* Updated tavern

* Updated my guilds

* More guild styles

* Many challenge styles and fixes

* Fixed notification menu display

* Added initial styles to groupplans

* Added syncing with inbox

* Fixed lint

* Added new edit profile layout

* Added initial achievement layout

* Began adding new stats layout

* Removed duplicate:

* fix(CI): attempt to address Travis Mongo connection issue

* fix(CI): don't strand us in Mongo shell

* Travis updates

* Try percise
---
 .travis.yml                                   |   3 +-
 website/client/app.vue                        |   4 +-
 website/client/assets/svg/grey-badge.svg      |  12 +-
 website/client/components/appHeader.vue       |  16 +-
 website/client/components/appMenu.vue         |   4 -
 .../components/challenges/challengeDetail.vue |  35 +--
 .../components/challenges/challengeItem.vue   |  63 ++--
 .../components/challenges/challengeModal.vue  |   1 -
 .../components/challenges/findChallenges.vue  |  14 +-
 .../components/challenges/myChallenges.vue    |  56 ++--
 .../client/components/challenges/sidebar.vue  |  36 +--
 .../client/components/chat/chatMessages.vue   |  47 ++-
 .../components/groups/groupFormModal.vue      |  19 +-
 .../client/components/groups/groupPlan.vue    | 294 ++++++++++--------
 website/client/components/groups/guild.vue    | 115 ++++---
 .../client/components/groups/membersModal.vue |  34 +-
 website/client/components/groups/myGuilds.vue |   5 +
 .../components/groups/ownedQuestsModal.vue    |  54 ----
 .../components/groups/publicGuildItem.vue     |  33 +-
 website/client/components/groups/sidebar.vue  |   8 +-
 .../components/groups/startQuestModal.vue     | 102 ++++--
 website/client/components/groups/tavern.vue   | 169 +++++-----
 website/client/components/hall/patrons.vue    |  18 +-
 website/client/components/memberDetails.vue   | 255 +++++++--------
 .../client/components/members/memberModal.vue |   8 +-
 .../client/components/notificationMenu.vue    |  53 ++++
 .../social/inbox/conversationPage.vue         |  51 ---
 .../client/components/social/inbox/index.vue  |  35 ---
 .../components/userMenu/achievements.vue      |  53 ++--
 website/client/components/userMenu/inbox.vue  |  23 +-
 .../client/components/userMenu/profile.vue    | 100 +++---
 website/client/components/userMenu/stats.vue  |  23 +-
 website/client/mixins/styleHelper.js          |  17 +
 website/client/router.js                      |  22 +-
 website/client/store/actions/challenges.js    |   2 +-
 website/client/store/actions/guilds.js        |  14 +-
 website/client/store/actions/shops.js         |   8 +-
 website/client/store/actions/user.js          |   5 +-
 website/common/locales/en/newClient.json      |   6 +-
 39 files changed, 961 insertions(+), 856 deletions(-)
 delete mode 100644 website/client/components/groups/ownedQuestsModal.vue
 delete mode 100644 website/client/components/social/inbox/conversationPage.vue
 delete mode 100644 website/client/components/social/inbox/index.vue
 create mode 100644 website/client/mixins/styleHelper.js

diff --git a/.travis.yml b/.travis.yml
index 08afcfaaf7..5c0ff039c9 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -2,6 +2,7 @@ language: node_js
 node_js:
   - '6'
 sudo: required
+dist: precise
 services:
   - mongodb
 addons:
@@ -19,7 +20,7 @@ install:
 before_script:
   - npm run test:build
   - cp config.json.example config.json
-  - if [ $REQUIRES_SERVER ]; then until nc -z localhost 27017; do echo Waiting for MongoDB; sleep 1; done; export DISPLAY=:99; fi
+  - sleep 15
 script:
   - npm run $TEST
   - if [ $COVERAGE ]; then ./node_modules/.bin/lcov-result-merger 'coverage/**/*.info' | ./node_modules/coveralls/bin/coveralls.js; fi
diff --git a/website/client/app.vue b/website/client/app.vue
index 8162035946..5eeb8e4f6e 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -9,7 +9,8 @@
       app-menu
       .container-fluid
         app-header
-        router-view
+        div(:class='{sticky: user.preferences.stickyHeader}')
+          router-view
         app-footer
 </template>
 
@@ -35,6 +36,7 @@ export default {
   },
   computed: {
     ...mapState(['isUserLoggedIn']),
+    ...mapState({user: 'user.data'}),
     isStaticPage () {
       return this.$route.meta.requiresLogin === false ? true : false;
     },
diff --git a/website/client/assets/svg/grey-badge.svg b/website/client/assets/svg/grey-badge.svg
index 1c42e5a78d..1350b45b70 100644
--- a/website/client/assets/svg/grey-badge.svg
+++ b/website/client/assets/svg/grey-badge.svg
@@ -1,13 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76" height="88" viewBox="0 0 76 88">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="76" viewBox="0 0 70 76">
     <defs>
-        <path id="a" d="M38 0L0 17.64C0 52.924 4.62 72.88 38 88c33.38-15.12 38-35.077 38-70.36L38 0z"/>
+        <path id="a" d="M35 0L0 15.235C0 45.705 4.255 62.941 35 76c30.745-13.059 35-30.294 35-60.765L35 0z"/>
     </defs>
-    <g fill="none" fill-rule="evenodd">
+    <g fill-rule="evenodd">
         <g>
             <use fill="#C3C0C7" xlink:href="#a"/>
-            <path stroke="#F9F9F9" stroke-width="10" d="M36.975 5.037l4.857 2.255 13.063 6.064 13.062 6.064 3.028 1.405c-.168 17.685-1.8 28.545-5.99 37.422-4.69 9.939-12.968 17.548-26.995 24.24-14.027-6.692-22.306-14.301-26.996-24.24-4.189-8.877-5.821-19.737-5.99-37.422L38 5.513l-1.025-.476z"/>
-            <path stroke="#C3C0C7" stroke-width="6" d="M37.39 3.025a191742500.733 191742500.733 0 0 1 18.347 8.517l13.062 6.064 4.196 1.947c-.102 18.718-1.747 30.131-6.19 39.548-5 10.593-13.865 18.622-28.805 25.597-14.94-6.975-23.805-15.004-28.805-25.597-4.443-9.417-6.088-20.83-6.19-39.548L38 3.308l-.61-.283z"/>
+            <path stroke="#F9F9F9" stroke-width="10" d="M35 5.453L5.02 18.503c.182 14.831 1.675 23.961 5.417 31.396C14.674 58.32 22.197 64.81 35 70.545 47.803 64.81 55.326 58.32 59.563 49.9c3.742-7.435 5.235-16.565 5.418-31.395l-2.445-1.065L38.473 6.965l-4.442-1.934.969.422z"/>
+            <path stroke="#C3C0C7" stroke-width="6" d="M35 3.272L3.007 17.198c.111 15.9 1.621 25.609 5.643 33.6C13.205 59.848 21.31 66.734 35 72.733c13.691-6 21.795-12.885 26.35-21.935 4.022-7.991 5.532-17.7 5.643-33.6l-3.66-1.593L39.272 5.131l-4.85-2.111.579.252z"/>
         </g>
-        <path fill="#F9F9F9" d="M26 51.001V56h24v-4.999C50 46.334 42.002 44 38 44c-3.998 0-12 2.334-12 7.001zM38.009 29A6.008 6.008 0 0 0 32 35.001C32 38.312 34.692 41 38.009 41A5.99 5.99 0 0 0 44 35.001 5.991 5.991 0 0 0 38.009 29"/>
+        <path fill="#F9F9F9" d="M27 40.667V44h16v-3.333C43 37.557 37.668 36 35 36c-2.666 0-8 1.556-8 4.667zM35.006 26A4.005 4.005 0 0 0 31 30c0 2.208 1.795 4 4.006 4A3.993 3.993 0 0 0 39 30c0-2.207-1.781-4-3.994-4"/>
     </g>
 </svg>
diff --git a/website/client/components/appHeader.vue b/website/client/components/appHeader.vue
index a4e9cf185c..e496347bd9 100644
--- a/website/client/components/appHeader.vue
+++ b/website/client/components/appHeader.vue
@@ -1,9 +1,10 @@
 <template lang="pug">
-#app-header.row
+#app-header.row(:class='{sticky: user.preferences.stickyHeader}')
+  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")
     // TODO button should open the party members modal
-    router-link.btn.btn-primary(:active-class="''", :to="{name: 'party'}") {{ $t('viewParty') }}
+    button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
   .party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
     member-details(
       v-for="(member, $index) in partyMembers",
@@ -36,6 +37,12 @@
     position: relative;
   }
 
+  .sticky {
+    position: fixed !important;
+    width: 100%;
+    z-index: 1;
+  }
+
   .no-party, .party-members {
     flex-grow: 1;
   }
@@ -77,11 +84,13 @@
 import { mapGetters, mapActions } from 'client/libs/store';
 import MemberDetails from './memberDetails';
 import createPartyModal from './groups/createPartyModal';
+import membersModal from './groups/membersModal';
 
 export default {
   components: {
     MemberDetails,
     createPartyModal,
+    membersModal,
   },
   data () {
     return {
@@ -105,6 +114,9 @@ export default {
         this.expandedMember = memberId;
       }
     },
+    openPartyModal () {
+      this.$root.$emit('show::modal', 'members-modal');
+    },
   },
   created () {
     if (this.user.party && this.user.party._id) this.getPartyMembers();
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 400cba4e70..081a892d79 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -184,10 +184,6 @@ div
     }
   }
 
-  .item-notifications {
-    margin-left: 33.5px;
-  }
-
   .item-user .edit-avatar {
     h3 {
       color: $gray-10;
diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index 589b387ec4..dddcfc28bc 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -30,9 +30,9 @@
   .col-4.sidebar.standard-page
     .acitons
       div(v-if='!isMember && !isLeader')
-        button.btn.btn-success(v-once) {{$t('joinChallenge')}}
+        button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
       div(v-if='isMember')
-        button.btn.btn-danger(v-once) {{$t('leaveChallenge')}}
+        button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
       div(v-if='isLeader')
         button.btn.btn-success(v-once) {{$t('addTask')}}
       div(v-if='isLeader')
@@ -122,6 +122,8 @@
 </style>
 
 <script>
+import findIndex from 'lodash/findIndex';
+
 import { mapState } from 'client/libs/store';
 import closeChallengeModal from './closeChallengeModal';
 import Column from '../tasks/column';
@@ -146,22 +148,7 @@ export default {
         memberIcon,
         calendarIcon,
       }),
-      challenge: {
-        // _id: 1,
-        // title: 'I am the Night! (Official TAKE THIS Challenge June 2017)',
-        // memberCount: 5261,
-        // endDate: '2017-04-04',
-        // tags: ['Habitica Official', 'Tag'],
-        // prize: 10,
-        // description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.',
-        // counts: {
-        //   habit: 0,
-        //   dailies: 2,
-        //   todos: 2,
-        //   rewards: 0,
-        // },
-        // author: 'SabreCat',
-      },
+      challenge: {},
     };
   },
   computed: {
@@ -170,7 +157,8 @@ export default {
       return this.user.challenges.indexOf(this.challenge._id) !== -1;
     },
     isLeader () {
-      return true;
+      if (!this.leader) return false;
+      return this.user._id === this.leader.id;
     },
   },
   mounted () {
@@ -181,10 +169,15 @@ export default {
       this.challenge = await this.$store.dispatch('challenges:getChallenge', {challengeId: this.challengeId});
     },
     async joinChallenge () {
-      // this.challenge = this.$store.dispatch('challenges:joinChallenge', {challengeId: this.challengeId});
+      this.user.challenges.push(this.challengeId);
+      await this.$store.dispatch('challenges:joinChallenge', {challengeId: this.challengeId});
     },
     async leaveChallenge () {
-      // this.challenge = this.$store.dispatch('challenges:leaveChallenge', {challengeId: this.challengeId});
+      let index = findIndex(this.user.challenges, (challengeId) => {
+        return challengeId === this.challengeId;
+      });
+      this.user.challenges.splice(index, 1);
+      await this.$store.dispatch('challenges:leaveChallenge', {challengeId: this.challengeId});
     },
     closeChallenge () {
       this.$root.$emit('show::modal', 'close-challenge-modal');
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index 04c9bfb8b9..ab4f5f6de2 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -8,11 +8,12 @@
         span
           .svg-icon.member-icon(v-html="icons.memberIcon")
         span {{challenge.memberCount}}
-        span
-          .svg-icon.calendar-icon(v-html="icons.calendarIcon")
-        span
-          strong End Date:
-        span {{challenge.endDate}}
+        // @TODO: Add in V2
+          span
+            .svg-icon.calendar-icon(v-html="icons.calendarIcon")
+          span
+            strong End Date:
+          span {{challenge.endDate}}
       div.tags
         span.tag(v-for='tag in challenge.tags') {{tag}}
     .col-6.prize-section
@@ -23,28 +24,28 @@
   .row.description
     .col-12
       | {{challenge.description}}
-  .container.well-wrapper(v-if='challenge.counts')
-    .well.row
-      .col-3
-        .count-details
-          .svg-icon.habit-icon(v-html="icons.habitIcon")
-          span.count {{challenge.counts.habit}}
-        div {{$t('habit')}}
-      .col-3
-        .count-details
-          .svg-icon.daily-icon(v-html="icons.dailyIcon")
-          span.count {{challenge.counts.dailies}}
-        div {{$t('daily')}}
-      .col-3
-        .count-details
-          .svg-icon.todo-icon(v-html="icons.todoIcon")
-          span.count {{challenge.counts.todos}}
-        div {{$t('todo')}}
-      .col-3
-        .count-details
-          .svg-icon.reward-icon(v-html="icons.rewardIcon")
-          span.count {{challenge.counts.rewards}}
-        div {{$t('reward')}}
+  .container.well-wrapper
+  .well.row
+    .col-3
+      .count-details
+        .svg-icon.habit-icon(v-html="icons.habitIcon")
+        span.count {{challenge.tasksOrder.habits.length}}
+      div {{$t('habit')}}
+    .col-3
+      .count-details
+        .svg-icon.daily-icon(v-html="icons.dailyIcon")
+        span.count {{challenge.tasksOrder.dailys.length}}
+      div {{$t('daily')}}
+    .col-3
+      .count-details
+        .svg-icon.todo-icon(v-html="icons.todoIcon")
+        span.count {{challenge.tasksOrder.todos.length}}
+      div {{$t('todo')}}
+    .col-3
+      .count-details
+        .svg-icon.reward-icon(v-html="icons.rewardIcon")
+        span.count {{challenge.tasksOrder.rewards.length}}
+      div {{$t('reward')}}
 </template>
 
 <style lang='scss' scoped>
@@ -53,8 +54,9 @@
   .card {
     background-color: $white;
     box-shadow: 0 2px 2px 0 $gray-600, 0 1px 4px 0 $gray-600;
-    padding: 1em;
-    height: 372px;
+    padding: 2em;
+    height: 325px;
+    margin-bottom: 1em;
 
     .gem {
       width: 32px;
@@ -98,7 +100,6 @@
     .prize-section {
       text-align: right;
       padding-right: 2em;
-      padding-top: 1em;
     }
 
     .description {
@@ -116,6 +117,8 @@
       text-align: center;
       padding: 2em;
       border-radius: 4px;
+      margin-left: .2em;
+      margin-right: .2em;
 
       .svg-icon {
         display: inline-block;
diff --git a/website/client/components/challenges/challengeModal.vue b/website/client/components/challenges/challengeModal.vue
index 1cfdb9e28b..799d9c24cc 100644
--- a/website/client/components/challenges/challengeModal.vue
+++ b/website/client/components/challenges/challengeModal.vue
@@ -1,5 +1,4 @@
 <template lang="pug">
-div
   b-modal#challenge-modal(:title="$t('createChallenge')", size='lg')
     form(@submit.stop.prevent="submit")
       .form-group
diff --git a/website/client/components/challenges/findChallenges.vue b/website/client/components/challenges/findChallenges.vue
index 64e13479fe..551c38b9b9 100644
--- a/website/client/components/challenges/findChallenges.vue
+++ b/website/client/components/challenges/findChallenges.vue
@@ -11,11 +11,11 @@
         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
+        button.btn.btn-secondary.create-challenge-button(@click='createChallenge()')
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once, @click='createChallenge()') {{$t('createChallenge')}}
+          span(v-once) {{$t('createChallenge')}}
     .row
-      .col-6(v-for='challenge in challenges')
+      .col-6(v-for='challenge in challenges', v-if='!memberOf(challenge)')
         challenge-item(:challenge='challenge')
 </template>
 
@@ -41,6 +41,8 @@
 </style>
 
 <script>
+import { mapState } from 'client/libs/store';
+
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Sidebar from './sidebar';
@@ -71,7 +73,13 @@ export default {
 
     // @TODO: do we need to load groups for filters still?
   },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
   methods: {
+    memberOf (challenge) {
+      return this.user.challenges.indexOf(challenge._id) !== -1;
+    },
     updateSearch () {
 
     },
diff --git a/website/client/components/challenges/myChallenges.vue b/website/client/components/challenges/myChallenges.vue
index 7ab1862c0e..76aaff8ea6 100644
--- a/website/client/components/challenges/myChallenges.vue
+++ b/website/client/components/challenges/myChallenges.vue
@@ -11,19 +11,19 @@
         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
+        button.btn.btn-secondary.create-challenge-button(@click='createChallenge()')
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once, @click='createChallenge()') {{$t('createChallenge')}}
+          span(v-once) {{$t('createChallenge')}}
 
     .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='challenges.length === 0')
+      .no-challenges.text-center.col-md-6.offset-3(v-if='filteredChallenges.length === 0')
         .svg-icon(v-html="icons.challengeIcon")
         h2(v-once) {{$t('noChallengeTitle')}}
         p(v-once) {{$t('challengeDescription1')}}
         p(v-once) {{$t('challengeDescription2')}}
 
     .row
-      .col-6(v-for='challenge in challenges')
+      .col-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
 </template>
 
@@ -63,6 +63,8 @@
 </style>
 
 <script>
+import { mapState } from 'client/libs/store';
+
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Sidebar from './sidebar';
@@ -86,45 +88,27 @@ export default {
         challengeIcon,
         positiveIcon,
       }),
-      challenges: [
-        // {
-        //   _id: 1,
-        //   title: 'I am the Night! (Official TAKE THIS Challenge June 2017)',
-        //   memberCount: 5261,
-        //   endDate: '2017-04-04',
-        //   tags: ['Habitica Official', 'Tag'],
-        //   prize: 10,
-        //   description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.',
-        //   counts: {
-        //     habit: 0,
-        //     dailies: 2,
-        //     todos: 2,
-        //     rewards: 0,
-        //   },
-        // },
-        // {
-        //   _id: 2,
-        //   title: '30-Day Money Cleanse 💰',
-        //   memberCount: 112,
-        //   endDate: '2017-04-05',
-        //   tags: ['Owned', 'Tag'],
-        //   prize: 10,
-        //   description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
-        //   counts: {
-        //     habit: 0,
-        //     dailies: 2,
-        //     todos: 30,
-        //     rewards: 0,
-        //   },
-        // },
-      ],
+      challenges: [],
       sortOptions: [],
     };
   },
   mounted () {
     this.loadchallanges();
   },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    filteredChallenges () {
+      return this.challenges.filter((challenge) => {
+        let isMember = this.memberOf(challenge);
+        // @TODO: Other filters
+        return isMember;
+      });
+    },
+  },
   methods: {
+    memberOf (challenge) {
+      return this.user.challenges.indexOf(challenge._id) !== -1;
+    },
     updateSearch () {
 
     },
diff --git a/website/client/components/challenges/sidebar.vue b/website/client/components/challenges/sidebar.vue
index 496251d24f..a5011e7293 100644
--- a/website/client/components/challenges/sidebar.vue
+++ b/website/client/components/challenges/sidebar.vue
@@ -4,9 +4,9 @@
     input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
 
   form
-    h3(v-once) {{ $t('filter') }}
+    h2(v-once) {{ $t('filter') }}
     .form-group
-      h5 Category
+      h3 Category
       .form-check(
         v-for="group in categoryOptions",
         :key="group.key",
@@ -16,7 +16,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t(group.label) }}
     .form-group
-      h5 Membership
+      h3 Membership
       .form-check(
         v-for="group in roleOptions",
         :key="group.key",
@@ -26,7 +26,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t(group.label) }}
     .form-group
-      h5 Guild Size
+      h3 Ownership
       .form-check(
         v-for="group in guildSizeOptions",
         :key="group.key",
@@ -65,34 +65,6 @@ export default {
           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 ',
-        },
       ],
       roleFilters: [],
       roleOptions: [
diff --git a/website/client/components/chat/chatMessages.vue b/website/client/components/chat/chatMessages.vue
index 534d43b26c..93ab57fb27 100644
--- a/website/client/components/chat/chatMessages.vue
+++ b/website/client/components/chat/chatMessages.vue
@@ -4,14 +4,21 @@ div
   .row
     // .col-md-2
     // @TODO: Implement when we pull avatars .svg-icon(v-html="icons.like")
-    .col-md-12(v-for="(msg, index) in chat", :key="msg.id")
+
+    .hr
+
+    .col-md-12(v-for="(msg, index) in chat", :key="msg.id", v-if='chat')
+      // @TODO: is there a different way to do these conditionals? This creates an infinite loop
+      //.hr(v-if='displayDivider(msg)')
+        .hr-middle(v-once) {{ msg.timestamp }}
+
       .card
         .card-block
           h3.leader {{msg.user}}
           p {{msg.timestamp | timeAgo}}
           .text {{msg.text}}
           hr
-          .action(v-once, @click='like(msg)', :class='{active: msg.likes[user._id]}')
+          .action(v-once, @click='like(msg)', v-if='msg.likes', :class='{active: msg.likes[user._id]}')
             .svg-icon(v-html="icons.like")
             span(v-if='!msg.likes[user._id]') {{ $t('like') }}
             span(v-if='msg.likes[user._id]') {{ $t('liked') }}
@@ -32,6 +39,28 @@ div
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  .hr {
+    width: 100%;
+    height: 20px;
+    border-bottom: 1px solid $gray-500;
+    text-align: center;
+    margin: 2em 0;
+  }
+
+  .hr-middle {
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 'Roboto Condensed';
+    line-height: 1.5;
+    text-align: center;
+    color: $gray-200;
+    background-color: $gray-700;
+    padding: .2em;
+    margin-top: .2em;
+    display: inline-block;
+    width: 100px;
+  }
+
   .card {
     margin-bottom: 1em;
   }
@@ -91,18 +120,32 @@ export default {
       }),
       copyingMessage: {},
       messages: [],
+      currentDayDividerDisplay: moment().day(),
     };
   },
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
     },
+    date (value) {
+      // @TODO: Add user preference
+      return moment(value).toDate();
+    },
   },
   computed: {
     ...mapState({user: 'user.data'}),
   },
   methods: {
+    displayDivider (message) {
+      if (this.currentDayDividerDisplay !== moment(message.timestamp).day()) {
+        this.currentDayDividerDisplay = moment(message.timestamp).day();
+        return true;
+      }
+
+      return false;
+    },
     likeCount (message) {
+      if (!message.likes) return 0;
       return Object.keys(message.likes).length;
     },
     async like (message) {
diff --git a/website/client/components/groups/groupFormModal.vue b/website/client/components/groups/groupFormModal.vue
index d023aaa917..95cc9243c3 100644
--- a/website/client/components/groups/groupFormModal.vue
+++ b/website/client/components/groups/groupFormModal.vue
@@ -6,10 +6,11 @@
           strong(v-once) {{$t('name')}}*
         b-form-input(type="text", :placeholder="$t('newGuildPlaceHolder')", v-model="newGuild.name")
 
-      .form-group(v-if='newGuild.id')
+      .form-group(v-if='newGuild.id && members.length > 0')
         label
           strong(v-once) {{$t('guildLeader')}}*
-          b-form-select(v-model="newGuild.newLeader" :options="members")
+        select.form-control(v-model="newGuild.newLeader")
+          option(v-for='member in members', :value="member._id") {{ member.profile.name }}
 
       .form-group
         label
@@ -229,7 +230,7 @@ export default {
         },
       ],
       showCategorySelect: false,
-      members: ['one', 'two'],
+      members: [],
       creatingParty: true,
       inviteMembers: false,
       newMemberToInvite: {
@@ -261,6 +262,8 @@ export default {
       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();
     });
   },
   computed: {
@@ -274,6 +277,14 @@ export default {
     },
   },
   methods: {
+    async getMembers () {
+      if (!this.newGuild.id) return;
+      let members = await this.$store.dispatch('members:getGroupMembers', {
+        groupId: this.newGuild.id,
+        includeAllPublicFields: true,
+      });
+      this.members = members;
+    },
     addMemberToInvite () {
       // @TODO: determine type
       this.membersToInvite.push(this.newMemberToInvite);
@@ -323,6 +334,8 @@ export default {
 
       if (this.newGuild.id) {
         await this.$store.dispatch('guilds:update', {group: this.newGuild});
+        // @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});
       }
diff --git a/website/client/components/groups/groupPlan.vue b/website/client/components/groups/groupPlan.vue
index 856c1bf934..782d235729 100644
--- a/website/client/components/groups/groupPlan.vue
+++ b/website/client/components/groups/groupPlan.vue
@@ -1,134 +1,166 @@
 <template lang="pug">
-.standard-page
-  div(v-if='activePage === PAGES.CREATE_GROUP')
-    h2.text-center {{ $t('createAGroup') }}
-
-    .col-xs-12
-      .col-md-12.form-horizontal
-        .form-group
-          label.control-label(for='new-group-name') {{ $t('newGroupName', {groupType: 'text'}) }}
-          input.form-control#new-group-name.input-medium.option-content(required, type='text', :placeholder="$t('newGroupName', {groupType: 'text'})", v-model='newGroup.name')
-        .form-group
-          label(for='new-group-description') {{ $t('description') }}
-          textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('description')", v-model='newGroup.description')
-        .form-group(v-if='type === "guild"')
-          .radio
-            label
-              input(type='radio', name='new-group-privacy', value='public', v-model='newGroup.privacy')
-              | {{ $t('public') }}
-          .radio
-            label
-              input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
-              | {{ $t('inviteOnly') }}
-          br
-          input.btn.btn-default(type='submit', :disabled='!newGroup.privacy && !newGroup.name', :value="$t('create')")
-          span.gem-cost {{ '4 ' + $t('gems') }}
-          p
-            small {{ $t('gemCost') }}
-        .form-group
-          .checkbox
-            label
-              input(type='checkbox', v-model='newGroup.leaderOnly.challenges')
-              | {{ $t('leaderOnlyChallenges') }}
-        .form-group(v-if='type === "party"')
-          input.btn.btn-default.form-control(type='submit', :value="$t('create')")
-    br
-    br
-    .row
-      .col-sm-6.col-sm-offset-3
-        a.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('create') }}
-
-  div(v-if='activePage === PAGES.UPGRADE_GROUP')
-    h2.text-center {{ $t('upgradeTitle') }}
-
-    .row.text-center
-      .col-6.col-offset-3
-        a.purchase.btn.btn-primary(@click='upgradeGroup(PAYMENTS.STRIPE)') {{ $t('card') }}
-        a.purchase(@click='upgradeGroup(PAYMENTS.AMAZON)')
-          img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
-        // @TODO: Add paypal
-    .row
-      .col-md-6.col-md-offset-3
-        br
-        .text-center {{ $t('groupSubscriptionPrice') }}
-
+div
   div(v-if='activePage === PAGES.BENEFITS')
-    h2.text-center {{ $t('groupBenefitsTitle') }}
-      .row(style="font-size: 2rem;")
-        .col-md-6.col-md-offset-3.text-center {{ $t('groupBenefitsDescription') }}
-      .row.row-margin
-        .col-md-4
-          h2 {{ $t('teamBasedTasks') }}
-          div
-            // shared tasks
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitOneTitle') }}
-            span {{ $t('groupBenefitOneDescription') }}
-          div
-            // assign tasks
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitTwoTitle') }}
-            span {{ $t('groupBenefitTwoDescription') }}
-          div
-            // claim tasks
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitThreeTitle') }}
-            span {{ $t('groupBenefitThreeDescription') }}
-          div
-            // mark tasks
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitFourTitle') }}
-            span {{ $t('groupBenefitFourDescription') }}
-          div
-            // group managers
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitEightTitle') }}
-            span {{ $t('groupBenefitEightDescription') }}
+    .header
+      h1.text-center Need more for your Group?
+      .row
+        .col-6.offset-3.text-center {{ $t('groupBenefitsDescription') }}
+    .container.benefits
+      .row
+        .col-4
+          .box
+            h2 {{ $t('teamBasedTasks') }}
+            p Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!
 
-        .col-md-4
-          h2 {{ $t('specializedCommunication') }}
-          div
-            // chat privately
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitFiveTitle') }}
-            span {{ $t('groupBenefitFiveDescription') }}
-          div
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitMessageLimitTitle') }}
-            span {{ $t('groupBenefitMessageLimitDescription') }}
-        .col-md-4
-          h2 {{ $t('funExtras') }}
-          div
-            // free subscription
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitSixTitle') }}
-            span {{ $t('groupBenefitSixDescription') }}
-          div
-            // exclusive mount
-            h3
-              span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
-              | {{ $t('groupBenefitSevenTitle') }}
+        .col-4
+          .box
+            h2 Group Management Controls
+            p Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.
 
-          br
-          br
-          .row
-            .col-sm-6.col-sm-offset-3
-              a.btn.btn-primary.btn-lg.btn-block(ui-sref="options.social.newGroup") {{ $t('createAGroup') }}
+        .col-4
+          .box
+            h2 In-Game Benefits
+            p Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.
 
-          .row
-            .col-md-6.col-md-offset-3
-              br
-              .text-center {{ $t('groupSubscriptionPrice') }}
+    .container.payment-options
+      h1.text-center.purple-header Are you ready to upgrade?
+      .row
+        .col-6.offset-3.text-center
+          .purple-box
+            .dollar $
+            .number 9
+            .name Group Owner Subscription
+            .plus +
+            .dollar $
+            .number 3
+            .name Each Individual Group Member
+
+          .box
+            h3 Choose your payment method
+            .box.payment-button(@click='createGroup(PAYMENTS.STRIPE)')
+              p Credit Card
+              p Powered by Stripe
+            .box.payment-button(@click='createGroup(PAYMENTS.AMAZON)')
+              | Amazon Pay
+
+  .standard-page(v-if='activePage === PAGES.CREATE_GROUP')
+    h1.text-center {{ $t('createAGroup') }}
+    .col-6.offset-3
+      .form-group
+        label.control-label(for='new-group-name') Name
+        input.form-control#new-group-name.input-medium.option-content(required, type='text', placeholder="Name", v-model='newGroup.name')
+      .form-group
+        label(for='new-group-description') {{ $t('description') }}
+        textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('description')", v-model='newGroup.description')
+      .form-group(v-if='type === "guild"')
+        .radio
+          label
+            input(type='radio', name='new-group-privacy', value='public', v-model='newGroup.privacy')
+            | {{ $t('public') }}
+        .radio
+          label
+            input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
+            | {{ $t('inviteOnly') }}
+
+      // @TODO Does it cost gems for a group plan?
+        .form-group
+        input.btn.btn-default(type='submit', :disabled='!newGroup.privacy && !newGroup.name', :value="$t('create')")
+        span.gem-cost {{ '4 ' + $t('gems') }}
+        p
+          small {{ $t('gemCost') }}
+
+      .form-group
+        .checkbox
+          label
+            input(type='checkbox', v-model='newGroup.leaderOnly.challenges')
+            | {{ $t('leaderOnlyChallenges') }}
+      .form-group(v-if='type === "party"')
+        input.btn.btn-default.form-control(type='submit', :value="$t('create')")
+      .form-group
+        button.btn.btn-primary.btn-lg.btn-block(@click="upgrade()", :disabled="!newGroupIsReady") {{ $t('create') }}
 </template>
 
+<style lang="scss" scoped>
+  .header {
+    margin-bottom: 3em;
+    background-color: #4f2a93;
+    color: #fff;
+    padding: 2em;
+    height: 356px;
+
+    h1 {
+      font-size: 48px;
+      color: #fff;
+    }
+  }
+
+  .benefits {
+    margin-top: -12em;
+  }
+
+  .box {
+    border-radius: 2px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+    padding: 2em;
+    text-align: center;
+  }
+
+  .purple-header {
+    color: #6133b4;
+    font-size: 48px;
+    margin-top: 1em;
+  }
+
+  .payment-options {
+    margin-bottom: 4em;
+
+    .purple-box {
+      background-color: #4f2a93;
+      color: #fff;
+      padding: .5em;
+      border-radius: 8px;
+      width: 200px;
+      height: 200px;
+
+      .dollar {
+        margin-left: 1.2em;
+      }
+
+      .number {
+        font-size: 60px;
+      }
+
+      .name {
+        width: 120px;
+        margin-left: .3em;
+      }
+
+      .plus {
+        width: 100%;
+        text-align: center;
+      }
+
+      div {
+        display: inline-block;
+      }
+    }
+
+    .box, .purple-box {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+
+    .payment-button {
+      width: 200px;
+      height: 80px;
+      margin-bottom: .5em;
+      padding: .5em;
+      display: block;
+    }
+  }
+</style>
+
 <script>
 export default {
   data () {
@@ -142,6 +174,7 @@ export default {
         AMAZON: 'amazon',
         STRIPE: 'stripe',
       },
+      paymentMethod: '',
       newGroup: {
         type: 'guild',
         privacy: 'private',
@@ -155,7 +188,7 @@ export default {
     };
   },
   mounted () {
-    this.activePage = this.PAGES.CREATE_GROUP;
+    this.activePage = this.PAGES.BENEFITS;
   },
   computed: {
     newGroupIsReady () {
@@ -167,18 +200,19 @@ export default {
       this.activePage = page;
       window.scrollTo(0, 0);
     },
-    createGroup () {
-      this.changePage(this.PAGES.UPGRADE_GROUP);
+    createGroup (paymentType) {
+      this.paymentMethod = paymentType;
+      this.changePage(this.PAGES.CREATE_GROUP);
     },
-    upgradeGroup (paymentType) {
+    upgrade () {
       //  let subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
-      if (paymentType === this.PAYMENTS.STRIPE) {
+      if (this.paymentMethod === this.PAYMENTS.STRIPE) {
         // Payments.showStripe({
         //   subscription: subscriptionKey,
         //   coupon: null,
         //   groupToCreate: this.newGroup
         // });
-      } else if (paymentType === this.PAYMENTS.AMAZON) {
+      } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
         // Payments.amazonPayments.init({
         //   type: 'subscription',
         //   subscription: subscriptionKey,
diff --git a/website/client/components/groups/guild.vue b/website/client/components/groups/guild.vue
index 3b08093194..5a620c177e 100644
--- a/website/client/components/groups/guild.vue
+++ b/website/client/components/groups/guild.vue
@@ -2,7 +2,8 @@
 .row(v-if="group")
   group-form-modal
   invite-modal
-  .clearfix.col-8
+  start-quest-modal(:group='this.group')
+  .col-8.standard-page
     .row
       .col-6.title-details
         h1 {{group.name}}
@@ -10,9 +11,12 @@
         span.float-left(v-once, v-if='group.leader.profile') : {{group.leader.profile.name}}
       .col-6
         .row.icon-row
-          .col-4(v-bind:class="{ 'offset-8': isParty }")
-            members-modal(:group='group', v-if='isMember')
-          .col-6(v-if='!isParty')
+          .col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
+            .item-with-icon(@click="showMemberModal()")
+              .svg-icon.shield(v-html="icons.goldGuildBadgeIcon")
+              span.number {{group.memberCount}}
+              div(v-once) {{ $t('members') }}
+          .col-4(v-if='!isParty')
             .item-with-icon
               .svg-icon.gem(v-html="icons.gem")
               span.number {{group.memberCount}}
@@ -24,8 +28,6 @@
         textarea(:placeholder="$t('chatPlaceHolder')", v-model='newMessage')
         button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
 
-        .hr
-          .hr-middle(v-once) {{ $t('today') }}
 
         chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
 
@@ -43,11 +45,11 @@
         .button-container
           button.btn.btn-primary(v-once, @click='showInviteModal()') {{$t('invite')}}
         .button-container
-          button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}}
+          // @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}}
         .button-container
-          button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}}
+          // @TODO: V2 button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}}
 
-    .section-header
+    .section-header(v-if='isParty')
       .row
         .col-10
           h3(v-once) {{ $t('questDetailsTitle') }}
@@ -63,7 +65,6 @@
             h4(v-once) {{ $t('yourNotOnQuest') }}
             p(v-once) {{ $t('questDescription') }}
             button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
-            owned-quests-modal(:group='this.group')
         .row.quest-active-section(v-if='isParty && onPendingQuest && !onActiveQuest')
           h2 Pending quest
           button.btn.btn-secondary(v-once, @click="questForceStart()") {{ $t('begin') }}
@@ -79,7 +80,8 @@
                   div(:class="'quest_' + questData.key + '_' + key")
                 .col-10
                   strong {{value.text()}}
-                  .collect-progress-bar
+                  .grey-progress-bar
+                    .collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
                   strong {{group.quest.progress.collect[key]}} / {{value.count}}
             .boss-info(v-if='questData.boss')
               .row
@@ -89,7 +91,8 @@
                   span.float-right(v-once) {{ $t('participants') }}
               .row
                 .col-12
-                  .boss-health-bar
+                  .grey-progress-bar
+                    .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
               .row.boss-details
                   .col-6
                     span.float-left
@@ -137,7 +140,7 @@
           .toggle-down(@click="sections.challenges = !sections.challenges", v-if="!sections.challenges")
             .svg-icon(v-html="icons.downIcon")
       .section(v-if="sections.challenges")
-        group-challenges(:groupId='groupId')
+        group-challenges(:groupId='searchId')
     div.text-center
       button.btn.btn-primary(class='btn-danger', v-if='isMember') {{ $t('leave') }}
 </template>
@@ -145,6 +148,10 @@
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  h1 {
+    color: $purple-200;
+  }
+
   .button-container {
     margin-bottom: 1em;
 
@@ -158,11 +165,27 @@
     background-color: #ffffff;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
     padding: 1em;
+    text-align: center;
+
+    .svg-icon.shield, .svg-icon.gem {
+      width: 40px;
+      margin: 0 auto;
+    }
+
+    .number {
+      font-size: 22px;
+      font-weight: bold;
+    }
+  }
+
+  .item-with-icon:hover {
+    cursor: pointer;
   }
 
   .sidebar {
     background-color: $gray-600;
     padding-top: 2em;
+    padding-bottom: 2em;
   }
 
   .card {
@@ -196,11 +219,6 @@
     padding: .5em;
   }
 
-  .svg-icon.shield, .svg-icon.gem {
-    width: 40px;
-    margin-right: 1em;
-  }
-
   .title-details {
     padding-top: 1em;
     padding-left: 1em;
@@ -226,26 +244,8 @@
     }
   }
 
-  .hr {
-    width: 100%;
-    height: 20px;
-    border-bottom: 1px solid $gray-500;
-    text-align: center;
-    margin: 2em 0;
-  }
-
-  .hr-middle {
-    font-size: 16px;
-    font-weight: bold;
-    font-family: 'Roboto Condensed';
-    line-height: 1.5;
-    text-align: center;
-    color: $gray-200;
-    background-color: $gray-700;
-    padding: .2em;
-    margin-top: .2em;
-    display: inline-block;
-    width: 100px;
+  .toggle-up .svg-icon, .toggle-down .svg-icon {
+    width: 25px;
   }
 
   span.action {
@@ -275,6 +275,7 @@
     .svg-icon {
       height: 30px;
       width: 30px;
+      margin: 0 auto;
       margin-bottom: 2em;
     }
   }
@@ -336,18 +337,25 @@
     margin-bottom: .5em;
   }
 
+  .grey-progress-bar {
+    width: 100%;
+    height: 15px;
+    background-color: #e1e0e3;
+  }
+
   .collect-progress-bar {
     background-color: #24cc8f;
     height: 15px;
-    width: 80%;
+
   }
 </style>
 
 <script>
 import groupUtilities from 'client/mixins/groupsUtilities';
+import styleHelper from 'client/mixins/styleHelper';
 import { mapState } from 'client/libs/store';
 import membersModal from './membersModal';
-import ownedQuestsModal from './ownedQuestsModal';
+import startQuestModal from './startQuestModal';
 import quests from 'common/script/content/quests';
 import percent from 'common/script/libs/percent';
 import groupFormModal from './groupFormModal';
@@ -372,14 +380,15 @@ import informationIcon from 'assets/svg/information.svg';
 import questBackground from 'assets/svg/quest-background-border.svg';
 import upIcon from 'assets/svg/up.svg';
 import downIcon from 'assets/svg/down.svg';
+import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
 
 export default {
-  mixins: [groupUtilities],
+  mixins: [groupUtilities, styleHelper],
   props: ['groupId'],
   components: {
     membersModal,
     memberModal,
-    ownedQuestsModal,
+    startQuestModal,
     bCollapse,
     bCard,
     bTooltip,
@@ -393,6 +402,7 @@ export default {
   },
   data () {
     return {
+      searchId: null,
       group: null,
       icons: Object.freeze({
         like: likeIcon,
@@ -406,8 +416,8 @@ export default {
         questBackground,
         upIcon,
         downIcon,
+        goldGuildBadgeIcon,
       }),
-      questData: {},
       selectedQuest: {},
       sections: {
         quest: true,
@@ -475,16 +485,19 @@ export default {
     bossHpPercent () {
       return percent(this.group.quest.progress.hp, this.questData.boss.hp);
     },
+    questData () {
+      if (!this.group.quest) return {};
+      return quests.quests[this.group.quest.key];
+    },
   },
   created () {
+    this.searchId = this.groupId;
     if (this.isParty) {
-      this.groupId = 'party';
+      this.searchId = 'party';
       // @TODO: Set up from old client. Decide what we need and what we don't
       // Check Desktop notifs
       // Mark Chat seen
-      // Load members
       // Load invites
-      // Load challenges
       // Load group tasks for group plan
       // Load approvals for group plan
     }
@@ -495,6 +508,9 @@ export default {
     $route: 'fetchGuild',
   },
   methods: {
+    showMemberModal () {
+      this.$root.$emit('show::modal', 'members-modal');
+    },
     async sendMessage () {
       let response = await this.$store.dispatch('chat:postChat', {
         groupId: this.group._id,
@@ -511,12 +527,11 @@ export default {
       this.$root.$emit('show::modal', 'invite-modal');
     },
     async fetchGuild () {
-      let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.groupId});
+      let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.searchId});
       if (this.isParty) {
         this.$store.party = group;
         this.group = this.$store.party;
         this.checkForAchievements();
-        this.questData = quests.quests[this.group.quest.key];
         return;
       }
       this.group = group;
@@ -527,7 +542,7 @@ export default {
       }
     },
     openStartQuestModal () {
-      this.$root.$emit('show::modal', 'owned-quests-modal');
+      this.$root.$emit('show::modal', 'start-quest-modal');
     },
     // inviteOrStartParty (group) {
       // Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Invite Friends'});
@@ -625,7 +640,7 @@ export default {
       });
 
       if (hasQuests) {
-        this.$root.$emit('show::modal', 'owned-quests-modal');
+        this.$root.$emit('show::modal', 'start-quest-modal');
         return;
       }
       // $rootScope.$state.go('options.inventory.quests');
diff --git a/website/client/components/groups/membersModal.vue b/website/client/components/groups/membersModal.vue
index 274d84cdf7..ec24c367ce 100644
--- a/website/client/components/groups/membersModal.vue
+++ b/website/client/components/groups/membersModal.vue
@@ -1,10 +1,5 @@
 <template lang="pug">
 div
-  .item-with-icon(@click="$root.$emit('show::modal','members-modal')")
-    .svg-icon.shield(v-html="icons.goldGuildBadgeIcon")
-    span.number {{group.memberCount}}
-    div(v-once) {{ $t('members') }}
-
   b-modal#members-modal(:title="$t('createGuild')", size='lg')
     .header-wrap(slot="modal-header")
       .row
@@ -40,7 +35,7 @@ div
           b-dropdown-item(@click='sort(option.value)')
             .svg-icon(v-html="icons.removeIcon")
             | {{$t('removeManager2')}}
-    .row-fluid.gradient
+    .row.gradient(v-if='members.length > 3')
 
   b-modal#remove-member(:title="$t('confirmRemoveMember')")
     button(@click='confirmRemoveMember(member)', v-once) {{$t('remove')}}
@@ -73,6 +68,7 @@ div
 
   #members-modal_modal_body {
     padding: 0;
+    max-height: 450px;
 
     .col-8 {
       margin-left: 0;
@@ -89,29 +85,19 @@ div
 
     .gradient {
       background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
-      height: 200px;
+      height: 50px;
       width: 100%;
       position: absolute;
       bottom: 0px;
+      margin-left: -15px;
     }
   }
 
-  .item-with-icon {
-    border-radius: 2px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    padding: 1em;
-    text-align: center;
-  }
-
-  .svg-icon.shield, .svg-icon.gem {
-    width: 40px;
-    margin-right: 1em;
-  }
-
-  .number {
-    font-size: 22px;
-    font-weight: bold;
+  .dropdown-menu .svg-icon {
+    width: 20px;
+    display: inline-block;
+    vertical-align: bottom;
+    margin-right: .5em;
   }
 </style>
 
@@ -127,7 +113,7 @@ import starIcon from 'assets/members/star.svg';
 import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge.svg';
 
 export default {
-  props: ['group'],
+  props: ['group', 'hideBadge'],
   components: {
     bModal,
     bDropdown,
diff --git a/website/client/components/groups/myGuilds.vue b/website/client/components/groups/myGuilds.vue
index 94ca7da8f8..ae86511773 100644
--- a/website/client/components/groups/myGuilds.vue
+++ b/website/client/components/groups/myGuilds.vue
@@ -42,6 +42,11 @@
     .no-guilds-wrapper {
       width: 400px;
       margin: 0 auto;
+
+      .svg-icon {
+        width: 60px;
+        margin: 0 auto;
+      }
     }
   }
 </style>
diff --git a/website/client/components/groups/ownedQuestsModal.vue b/website/client/components/groups/ownedQuestsModal.vue
deleted file mode 100644
index 7d1771b780..0000000000
--- a/website/client/components/groups/ownedQuestsModal.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template lang="pug">
-div
-  b-modal#owned-quests-modal(title="Which quest do you want to start?", size='md', hide-footer=true)
-    .row.content
-      .quest(v-for='(value, key, index) in user.items.quests', :class="'inventory_quest_scroll_' + key", @click='selectQuest(key)')
-      button.btn.btn-primary(@click='confirm()') Confirm
-  start-quest-modal(:group='group', :selectedQuest='selectedQuest')
-</template>
-
-<style lang='scss' scoped>
-  @import '~client/assets/scss/colors.scss';
-
-  .content {
-    padding: 2em;
-
-    .quest {
-      margin-right: 1em;
-      margin-bottom: 1em;
-      display: inline-block;
-    }
-  }
-</style>
-
-<script>
-import { mapState } from 'client/libs/store';
-import bModal from 'bootstrap-vue/lib/components/modal';
-
-import startQuestModal from './startQuestModal';
-
-export default {
-  props: ['group'],
-  components: {
-    bModal,
-    startQuestModal,
-  },
-  data () {
-    return {
-      selectedQuest: {},
-    };
-  },
-  computed: {
-    ...mapState({user: 'user.data'}),
-  },
-  methods: {
-    selectQuest (quest) {
-      this.selectedQuest = quest;
-    },
-    confirm () {
-      this.$root.$emit('show::modal', 'start-quest-modal');
-      this.$root.$emit('hide::modal', 'owned-quests-modal');
-    },
-  },
-};
-</script>
diff --git a/website/client/components/groups/publicGuildItem.vue b/website/client/components/groups/publicGuildItem.vue
index ecae214d16..42eff3d79e 100644
--- a/website/client/components/groups/publicGuildItem.vue
+++ b/website/client/components/groups/publicGuildItem.vue
@@ -14,8 +14,8 @@
           .col-md-2.cta-container
             button.btn.btn-danger(v-if='isMember && displayLeave' @click='leave()', v-once) {{ $t('leave') }}
             button.btn.btn-success(v-if='!isMember'  @click='join()', v-once) {{ $t('join') }}
-            div.item-with-icon(v-if='displayGemBank')
-              .svg-icon(v-html="icons.gem")
+            div.item-with-icon.gem-bank(v-if='displayGemBank')
+              .svg-icon.gem(v-html="icons.gem")
               span.count {{ guild.balance }}
             div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
         .row
@@ -29,7 +29,7 @@
   @import '~client/assets/scss/colors.scss';
 
   .card {
-    height: 260px;
+    height: 160px;
     border-radius: 4px;
     background-color: $white;
     box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
@@ -44,14 +44,13 @@
 
     .cta-container {
       margin: 0 auto;
-      margin-top: 4em;
+
+      button {
+        margin-top: 2.5em;
+      }
     }
 
     .item-with-icon {
-      .svg-icon {
-        height: 37px;
-      }
-
       .count {
         font-size: 20px;
         height: 37px;
@@ -62,6 +61,8 @@
 
     .shield {
       width: 70px;
+      margin: 0 auto;
+      margin-top: 2em;
     }
 
     .guild-bank {
@@ -73,13 +74,23 @@
     .member-count {
       position: relative;
       top: -3.6em;
-      left: -.1em;
-      font-size: 28px;
+      font-size: 22px;
       font-weight: bold;
-      font-family: 'Roboto Condensed';
       line-height: 1.2;
       text-align: center;
       color: #b36213;
+      margin-top: 2.1em;
+    }
+
+    .gem-bank {
+      margin-top: 2em;
+
+      .gem {
+        width: 25px;
+        display: inline-block;
+        vertical-align: bottom;
+        margin-right: .8em;
+      }
     }
   }
 </style>
diff --git a/website/client/components/groups/sidebar.vue b/website/client/components/groups/sidebar.vue
index 6c2eef485e..ccc0e6c243 100644
--- a/website/client/components/groups/sidebar.vue
+++ b/website/client/components/groups/sidebar.vue
@@ -4,9 +4,9 @@
     input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
 
   form
-    h3(v-once) {{ $t('filter') }}
+    h2(v-once) {{ $t('filter') }}
     .form-group
-      h5 Category
+      h3 Category
       .form-check(
         v-for="group in categoryOptions",
         :key="group.key",
@@ -16,7 +16,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t(group.label) }}
     .form-group
-      h5 Role
+      h3 Role
       .form-check(
         v-for="group in roleOptions",
         :key="group.key",
@@ -26,7 +26,7 @@
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t(group.label) }}
     .form-group
-      h5 Guild Size
+      h3 Guild Size
       .form-check(
         v-for="group in guildSizeOptions",
         :key="group.key",
diff --git a/website/client/components/groups/startQuestModal.vue b/website/client/components/groups/startQuestModal.vue
index 14834a3b32..60a7256ddc 100644
--- a/website/client/components/groups/startQuestModal.vue
+++ b/website/client/components/groups/startQuestModal.vue
@@ -1,23 +1,33 @@
 <template lang="pug">
-  b-modal#start-quest-modal(title="Empty", size='md', hide-footer=true, v-if='questData')
-    .quest-image(:class="'quest_' + questData.key")
-    h2 {{questData.text()}}
-    //- span by: Keith Holliday @TODO: Add author
-    p {{questData.notes()}}
-    div.quest-details
-      div(v-if=' questData.collect')
-        Strong {{$t('collect')}}: &nbsp;
-        span(v-for="(value, key, index) in questData.collect")
-          | {{$t('collectionItems', { number: questData.collect[key].count, items: questData.collect[key].text() })}}
-      div
-        Strong {{$t('collect')}}: &nbsp;
-        span
-          .svg-icon(v-html="icons.difficultyStarIcon")
-    div
+  b-modal#start-quest-modal(title="Empty", size='md', :hide-footer="true", :hide-header="true")
+    .left-panel.content
+      h3.text-center Quests
+      .row
+        .col-4.quest-col(v-for='(value, key, index) in user.items.quests', @click='selectQuest(key)', :class="{selected: key === selectedQuest}")
+          .quest-wrapper
+            .quest(:class="'inventory_quest_scroll_' + key")
+      .row
+        .col-10.offset-1.text-center
+          span.description Can’t find a quest to start? Try checking out the Quest Shop in the Market for new releases!
+    div(v-if='questData')
+      .quest-image(:class="'quest_' + questData.key")
+      h2.text-center {{questData.text()}}
+      //- span by: Keith Holliday @TODO: Add author
+      p(v-html="questData.notes()")
+      div.quest-details
+        div(v-if=' questData.collect')
+          Strong {{$t('collect')}}: &nbsp;
+          span(v-for="(value, key, index) in questData.collect")
+            | {{$t('collectionItems', { number: questData.collect[key].count, items: questData.collect[key].text() })}}
+        div
+          Strong {{$t('difficulty')}}: &nbsp;
+          span
+            .svg-icon.difficulty-star(v-html="icons.difficultyStarIcon")
+    div.text-center
       button.btn.btn-primary(@click='questInit()') {{$t('inviteToPartyOrQuest')}}
-    div
+    div.text-center
       p {{$t('inviteInformation')}}
-    .side-panel
+    .side-panel(v-if='questData')
       h4.text-center {{$t('rewards')}}
       .box
         .svg-icon.rewards-icon(v-html="icons.starIcon")
@@ -47,6 +57,7 @@
   .quest-image {
     margin: 0 auto;
     margin-bottom: 1em;
+    margin-top: 1.5em;
   }
 
   .quest-details {
@@ -59,12 +70,49 @@
     margin: 1em 0;
   }
 
+  .left-panel {
+    background: #4e4a57;
+    color: $white;
+    position: absolute;
+    height: 460px;
+    width: 320px;
+    top: 2.5em;
+    left: -22em;
+    z-index: -1;
+    padding: 2em;
+
+    h3 {
+      color: $white;
+    }
+
+    .selected .quest-wrapper {
+      border: solid 1.5px #9a62ff;
+    }
+
+    .quest-wrapper:hover {
+      cursor: pointer;
+    }
+
+    .quest-col .quest-wrapper {
+      background: $white;
+      padding: .7em;
+      margin-bottom: 1em;
+      border-radius: 3px;
+    }
+
+    .description {
+      text-align: center;
+      color: #a5a1ac;
+      font-size: 12px;
+    }
+  }
+
   .side-panel {
     background: #edecee;
     position: absolute;
     height: 460px;
     width: 320px;
-    top: -1.8em;
+    top: 2.5em;
     left: 35em;
     z-index: -1;
     padding-top: 1em;
@@ -101,9 +149,16 @@
       padding: 1em;
     }
   }
+
+  .difficulty-star {
+    width: 20px;
+    display: inline-block;
+    vertical-align: bottom;
+  }
 </style>
 
 <script>
+import { mapState } from 'client/libs/store';
 import bModal from 'bootstrap-vue/lib/components/modal';
 
 import quests from 'common/script/content/quests';
@@ -118,12 +173,13 @@ import goldIcon from 'assets/svg/gold.svg';
 import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
 
 export default {
-  props: ['group', 'selectedQuest'],
+  props: ['group'],
   components: {
     bModal,
   },
   data () {
     return {
+      selectedQuest: {},
       icons: Object.freeze({
         copy: copyIcon,
         greyBadge: greyBadgeIcon,
@@ -137,12 +193,20 @@ export default {
       shareUserIdShown: false,
     };
   },
+  mounted () {
+    let questKeys = Object.keys(this.user.items.quests);
+    this.selectedQuest = questKeys[0];
+  },
   computed: {
+    ...mapState({user: 'user.data'}),
     questData () {
       return quests.quests[this.selectedQuest];
     },
   },
   methods: {
+    selectQuest (quest) {
+      this.selectedQuest = quest;
+    },
     async questInit () {
       let key = this.selectedQuest;
       // Analytics.updateUser({'partyID': party._id, 'partySize': party.memberCount});
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index 0bc6797f56..f173e5628c 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -9,26 +9,25 @@
       .col-12
         h3(v-once) {{ $t('welcomeToTavern') }}
 
-        textarea(:placeholder="$t('chatPlaceHolder')", v-model='newMessage')
-        autocomplete(:text='newMessage', v-on:select="selectedAutocomplete")
-        button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
+        .row
+          textarea(:placeholder="$t('chatPlaceHolder')", v-model='newMessage')
+          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')
+        .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') }}
 
-        .hr
-          .hr-middle(v-once) {{ $t('today') }}
-
-        chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
+        .row
+          chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
 
   .col-md-4.sidebar
     .section
       .grassy-meadow-backdrop
 
-      .sleep
+      .sleep.below-header-sections
         strong(v-once) {{ $t('sleepDescription') }}
         ul
           li(v-once) {{ $t('sleepBullet1') }}
@@ -38,75 +37,76 @@
         button.btn.btn-secondary.pause-button(v-if='!user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('pauseDailies') }}
         button.btn.btn-secondary.pause-button(v-if='user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('unpauseDailies') }}
 
-    .section-header
-      .row
-        .col-10
-          h3(v-once) {{ $t('staffAndModerators') }}
-        .col-2
-          .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
-            .svg-icon(v-html="icons.downIcon")
-      .section.row(v-if="sections.staff")
-        .col-3.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
-          .title {{user.name}}
-          .type {{user.type}}
+    .below-header-sections
+      .section-header
+        .row
+          .col-10
+            h3(v-once) {{ $t('staffAndModerators') }}
+          .col-2
+            .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
+              .svg-icon(v-html="icons.upIcon")
+            .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
+              .svg-icon(v-html="icons.downIcon")
+        .section.row(v-if="sections.staff")
+          .col-3.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
+            .title {{user.name}}
+            .type {{user.type}}
 
-    .section-header
-      .row
-        .col-10
-          h3(v-once) {{ $t('helpfulLinks') }}
-        .col-2
-          .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
-            .svg-icon(v-html="icons.downIcon")
-      .section.row(v-if="sections.staff")
-        ul
-          li
-            a(herf='', v-once) {{ $t('communityGuidelinesLink') }}
-          li
-            a(herf='', v-once) {{ $t('lookingForGroup') }}
-          li
-            a(herf='', v-once) {{ $t('faq') }}
-          li
-            a(herf='', v-html="$t('glossary')")
-          li
-            a(herf='', v-once) {{ $t('wiki') }}
-          li
-            a(herf='', v-once) {{ $t('dataDisplayTool') }}
-          li
-            a(herf='', v-once) {{ $t('reportProblem') }}
-          li
-            a(herf='', v-once) {{ $t('requestFeature') }}
-          li
-            a(herf='', v-html="$t('communityForum')")
-          li
-            a(herf='', v-once) {{ $t('askQuestionGuild') }}
+      .section-header
+        .row
+          .col-10
+            h3(v-once) {{ $t('helpfulLinks') }}
+          .col-2
+            .toggle-up(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="sections.helpfulLinks")
+              .svg-icon(v-html="icons.upIcon")
+            .toggle-down(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="!sections.helpfulLinks")
+              .svg-icon(v-html="icons.downIcon")
+        .section.row(v-if="sections.helpfulLinks")
+          ul
+            li
+              a(herf='', v-once) {{ $t('communityGuidelinesLink') }}
+            li
+              a(herf='', v-once) {{ $t('lookingForGroup') }}
+            li
+              a(herf='', v-once) {{ $t('faq') }}
+            li
+              a(herf='', v-html="$t('glossary')")
+            li
+              a(herf='', v-once) {{ $t('wiki') }}
+            li
+              a(herf='', v-once) {{ $t('dataDisplayTool') }}
+            li
+              a(herf='', v-once) {{ $t('reportProblem') }}
+            li
+              a(herf='', v-once) {{ $t('requestFeature') }}
+            li
+              a(herf='', v-html="$t('communityForum')")
+            li
+              a(herf='', v-once) {{ $t('askQuestionGuild') }}
 
-    .section-header
-      .row
-        .col-10
-          h3(v-once) {{ $t('playerTiers') }}
-        .col-2
-          .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
-            .svg-icon(v-html="icons.downIcon")
-      .section.row(v-if="sections.staff")
-        .col-12
-          p(v-once) {{ $t('playerTiersDesc') }}
-          ul.tier-list
-            li.tier1(v-once) {{ $t('tier1') }}
-            li.tier2(v-once) {{ $t('tier2') }}
-            li.tier3(v-once) {{ $t('tier3') }}
-            li.tier4(v-once) {{ $t('tier4') }}
-            li.tier5(v-once) {{ $t('tier5') }}
-            li.tier6(v-once) {{ $t('tier6') }}
-            li.tier7(v-once) {{ $t('tier7') }}
-            li.moderator(v-once) {{ $t('tierModerator') }}
-            li.staff(v-once) {{ $t('tierStaff') }}
-            li.npc(v-once) {{ $t('tierNPC') }}
+      .section-header
+        .row
+          .col-10
+            h3(v-once) {{ $t('playerTiers') }}
+          .col-2
+            .toggle-up(@click="sections.playerTiers = !sections.playerTiers", v-if="sections.playerTiers")
+              .svg-icon(v-html="icons.upIcon")
+            .toggle-down(@click="sections.playerTiers = !sections.playerTiers", v-if="!sections.playerTiers")
+              .svg-icon(v-html="icons.downIcon")
+        .section.row(v-if="sections.playerTiers")
+          .col-12
+            p(v-once) {{ $t('playerTiersDesc') }}
+            ul.tier-list
+              li.tier1(v-once) {{ $t('tier1') }}
+              li.tier2(v-once) {{ $t('tier2') }}
+              li.tier3(v-once) {{ $t('tier3') }}
+              li.tier4(v-once) {{ $t('tier4') }}
+              li.tier5(v-once) {{ $t('tier5') }}
+              li.tier6(v-once) {{ $t('tier6') }}
+              li.tier7(v-once) {{ $t('tier7') }}
+              li.moderator(v-once) {{ $t('tierModerator') }}
+              li.staff(v-once) {{ $t('tierStaff') }}
+              li.npc(v-once) {{ $t('tierNPC') }}
 </template>
 
 <style lang='scss' scoped>
@@ -169,7 +169,11 @@
 
   .sidebar {
     background-color: $gray-600;
-    padding-top: 2em;
+    padding: 0em;
+
+    .below-header-sections {
+      padding: 1em;
+    }
   }
 
   .toggle-up, .toggle-down {
@@ -192,7 +196,7 @@
 
   .grassy-meadow-backdrop {
     background-image: url('~assets/images/groups/grassy-meadow-backdrop.png');
-    width: 472px;
+    width: 100%;
     height: 246px;
   }
 
@@ -314,6 +318,8 @@ export default {
       },
       sections: {
         staff: true,
+        helpfulLinks: true,
+        playerTiers: true,
       },
       staff: [
         {
@@ -405,16 +411,11 @@ export default {
     selectedAutocomplete (newText) {
       this.newMessage = newText;
     },
-    aggreeToGuideLines () {
-      // @TODO:
-    },
-    pauseDailies () {
-      // @TODO:
-    },
     acceptCommunityGuidelines () {
       this.$store.dispatch('user:set', {'flags.communityGuidelinesAccepted': true});
     },
     toggleSleep () {
+      this.user.preferences.sleep = !this.user.preferences.sleep;
       this.$store.dispatch('user:sleep');
     },
     async sendMessage () {
diff --git a/website/client/components/hall/patrons.vue b/website/client/components/hall/patrons.vue
index 610bf9ad91..f0f8befa25 100644
--- a/website/client/components/hall/patrons.vue
+++ b/website/client/components/hall/patrons.vue
@@ -19,8 +19,10 @@
 
 <script>
 import { mapState } from 'client/libs/store';
+import styleHelper from 'client/mixins/styleHelper';
 
 export default {
+  mixins: [styleHelper],
   data () {
     return {
       patrons: [],
@@ -33,21 +35,7 @@ export default {
     ...mapState({user: 'user.data'}),
   },
   methods: {
-    // @TODO: This is used to style usernames. WE should abstract this to helper mixer
-    userLevelStyle (user, style) {
-      style = style || '';
-      let npc = user && user.backer && user.backer.npc ? user.backer.npc : '';
-      let level = user && user.contributor && user.contributor.level ? user.contributor.level : '';
-      style += this.userLevelStyleFromLevel(level, npc, style);
-      return style;
-    },
-    userLevelStyleFromLevel (level, npc, style) {
-      style = style || '';
-      if (npc) style += ' label-npc';
-      if (level) style +=   ` label-contributor-${level}`;
-      return style;
-    },
-    //@TODO: Import member modal - clickMember()
+    //  @TODO: Import member modal - clickMember()
   },
 };
 </script>
diff --git a/website/client/components/memberDetails.vue b/website/client/components/memberDetails.vue
index d80f7e6031..e2489087c2 100644
--- a/website/client/components/memberDetails.vue
+++ b/website/client/components/memberDetails.vue
@@ -1,12 +1,13 @@
 <template lang="pug">
-.d-flex.member-details(:class="{ condensed, expanded }")
-  avatar(:member="member", 
-    @click.native="$emit('click')", 
+.d-flex.member-details(:class="{ condensed, expanded }", @click='showMemberModal()')
+  avatar(:member="member",
+    @click.native="$emit('click')",
     @mouseover.native="$emit('onHover')",
     @mouseout.native="$emit('onHover')",
   )
+  member-modal(:profile='member')
   .member-stats
-    h3.character-name 
+    h3.character-name
       | {{member.profile.name}}
       .is-buffed(v-if="isBuffed")
         .svg-icon(v-html="icons.buff")
@@ -29,146 +30,147 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
 
-.member-details {
-  white-space: nowrap;
-  margin-top: 24px;
-  margin-bottom: 24px;
-  transition: all 0.15s ease-out;
-}
-
-.member-stats {
-  padding-left: 16px;
-  padding-right: 24px;
-  opacity: 1;
-  transition: opacity 0.15s ease-out;
-}
-
-.member-details.condensed:not(.expanded) .member-stats {
-  opacity: 0;
-  position: absolute;
-  z-index: -1;
-}
-
-// Condensed version
-.member-details.condensed.expanded {
-  background: $header-dark-background;
-  box-shadow: 0 0 0px 9px $header-dark-background;
-  position: relative;
-  margin-bottom: 33px;
-  z-index: 8;
-
-  .is-buffed {
-    background-color: $purple-50;
+  .member-details {
+    white-space: nowrap;
+    margin-top: 24px;
+    margin-bottom: 24px;
+    transition: all 0.15s ease-out;
   }
 
   .member-stats {
-    background: $header-dark-background;
+    padding-left: 16px;
+    padding-right: 24px;
+    opacity: 1;
+    transition: opacity 0.15s ease-out;
+  }
+
+  .member-details.condensed:not(.expanded) .member-stats {
+    opacity: 0;
     position: absolute;
-    right: 100%;
-    height: calc(100% + 18px);
-    margin-top: -9px;
-    padding-top: 9px;
-    padding-bottom: 24px;
-    padding-right: 16px;
-    padding-bottom: 14px;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    z-index: 9;
+    z-index: -1;
+  }
+
+  // Condensed version
+  .member-details.condensed.expanded {
+    background: $header-dark-background;
+    box-shadow: 0 0 0px 9px $header-dark-background;
+    position: relative;
+    margin-bottom: 33px;
+    z-index: 8;
+
+    .is-buffed {
+      background-color: $purple-50;
+    }
+
+    .member-stats {
+      background: $header-dark-background;
+      position: absolute;
+      right: 100%;
+      height: calc(100% + 18px);
+      margin-top: -9px;
+      padding-top: 9px;
+      padding-bottom: 24px;
+      padding-right: 16px;
+      padding-bottom: 14px;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      z-index: 9;
+    }
+
+    .progress-container > .svg-icon {
+      width: 19px;
+      height: 19px;
+      margin-top: -2px;
+    }
+
+    .progress-container > .progress {
+      width: 152px;
+      border-radius: 0px;
+      height: 10px;
+      margin-top: 2px;
+      background: $purple-100;
+    }
+
+    .progress-container > .progress > .progress-bar {
+      border-radius: 0px;
+      height: 10px;
+    }
+  }
+
+  .small-text {
+    color: $header-color;
+  }
+
+  .character-name {
+    margin-bottom: 1px;
+    color: $white;
+  }
+
+  .character-level {
+    display: block;
+    font-style: normal;
+    margin-bottom: 16px;
+  }
+
+  .is-buffed {
+    width: 20px;
+    height: 20px;
+    background: $header-dark-background;
+    display: inline-block;
+    margin-left: 16px;
+    vertical-align: middle;
+    padding-top: 4px;
+
+    .svg-icon {
+      display: block;
+      width: 10px;
+      height: 12px;
+      margin: 0 auto;
+    }
+  }
+
+  #header-avatar {
+    margin-right: 16px;
+  }
+
+  .progress-container {
+    margin-bottom: 12px;
+  }
+
+  .progress-container > span {
+    color: $header-color;
+    margin-left: 16px;
+    font-style: normal;
   }
 
   .progress-container > .svg-icon {
-    width: 19px;
-    height: 19px;
-    margin-top: -2px;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    margin-top: -4px;
   }
 
   .progress-container > .progress {
-    width: 152px;
-    border-radius: 0px;
-    height: 10px;
-    margin-top: 2px;
-    background: $purple-100;
+    width: 303px;
+    margin: 0px;
+    border-radius: 2px;
+    height: 16px;
+    background-color: $header-dark-background;
   }
 
   .progress-container > .progress > .progress-bar {
-    border-radius: 0px;
-    height: 10px;
+    border-radius: 2px;
+    height: 16px;
+    min-width: 0px;
   }
-}
-
-.small-text {
-  color: $header-color;
-}
-
-.character-name {
-  margin-bottom: 1px;
-  color: $white;
-}
-
-.character-level {
-  display: block;
-  font-style: normal;
-  margin-bottom: 16px;
-}
-
-.is-buffed {
-  width: 20px;
-  height: 20px;
-  background: $header-dark-background;
-  display: inline-block;
-  margin-left: 16px;
-  vertical-align: middle;
-  padding-top: 4px;
-
-  .svg-icon {
-    display: block;
-    width: 10px;
-    height: 12px;
-    margin: 0 auto;
-  }
-}
-
-#header-avatar {
-  margin-right: 16px;
-}
-
-.progress-container {
-  margin-bottom: 12px;
-}
-
-.progress-container > span {
-  color: $header-color;
-  margin-left: 16px;
-  font-style: normal;
-}
-
-.progress-container > .svg-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-  margin-top: -4px;
-}
-
-.progress-container > .progress {
-  width: 303px;
-  margin: 0px;
-  border-radius: 2px;
-  height: 16px;
-  background-color: $header-dark-background;
-}
-
-.progress-container > .progress > .progress-bar {
-  border-radius: 2px;
-  height: 16px;
-  min-width: 0px;
-}
 </style>
 
 <script>
 import Avatar from './avatar';
 import { mapState } from 'client/libs/store';
+import memberModal from './members/memberModal';
 
 import { toNextLevel } from '../../common/script/statHelpers';
 import statsComputed from '../../common/script/libs/statsComputed';
@@ -182,6 +184,7 @@ import manaIcon from 'assets/svg/mana.svg';
 export default {
   components: {
     Avatar,
+    memberModal,
   },
   props: {
     member: {
@@ -231,6 +234,10 @@ export default {
     hasClass () {
       return this.$store.getters['members:hasClass'](this.member);
     },
+    showMemberModal () {
+      // @TODO: set viewing users in $store?
+      this.$root.$emit('show::modal', 'member-detail-modal');
+    },
   },
 };
 </script>
diff --git a/website/client/components/members/memberModal.vue b/website/client/components/members/memberModal.vue
index 3aa1780e8d..20ff4eb24d 100644
--- a/website/client/components/members/memberModal.vue
+++ b/website/client/components/members/memberModal.vue
@@ -3,7 +3,7 @@
     .modal-header
       h4
         span {{profile.profile.name}}
-        span(v-if='contribText && profile.contributor.level')  - {{contribText(profile.contributor, profile.backer)}}
+        // @TODO span(v-if='contribText && profile.contributor.level')  - {{contribText(profile.contributor, profile.backer)}}
     .modal-body
       .container-fluid
         .row
@@ -16,15 +16,15 @@
                 |&nbsp;
                 | {{ $t('memberSince') }}
                 |&nbsp;
-                | {{profile.auth.timestamps.created | date:user.preferences.dateFormat}} -
+                // @TODO | {{profile.auth.timestamps.created | date:user.preferences.dateFormat}} -
               li(v-if='profile.auth.timestamps.loggedin')
                |&nbsp;
                | {{ $t('lastLoggedIn') }}
                |&nbsp;
-               | {{profile.auth.timestamps.loggedin | date:user.preferences.dateFormat}} -
+               // @TODO | {{profile.auth.timestamps.loggedin | date:user.preferences.dateFormat}} -
             h3 {{ $t('stats') }}
             // @TODO: Figure out why this isn't showing up in front page
-            .label.label-info {{ {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer")}[profile.stats.class] }}
+            // @TODO .label.label-info {{ {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer")}[profile.stats.class] }}
             // include ../profiles/stats_all
           .col-md-6
             .row
diff --git a/website/client/components/notificationMenu.vue b/website/client/components/notificationMenu.vue
index 9559c4b3e0..8048fe4175 100644
--- a/website/client/components/notificationMenu.vue
+++ b/website/client/components/notificationMenu.vue
@@ -50,6 +50,59 @@
             span.glyphicon.glyphicon-remove-circle
 </template>
 
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+  .svg-icon {
+    width: 25px;
+  }
+
+  .item-notifications:hover {
+    cursor: pointer;
+  }
+
+  /* @TODO: Move to shared css */
+  .dropdown:hover .dropdown-menu {
+    display: block;
+    margin-top: 0; // remove the gap so it doesn't close
+  }
+
+  .dropdown + .dropdown {
+    margin-left: 0px;
+  }
+
+  .dropdown-menu:not(.user-dropdown) {
+    background: $purple-200;
+    border-radius: 0px;
+    border: none;
+    box-shadow: none;
+    padding: 0px;
+
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+
+    .dropdown-item {
+      font-size: 16px;
+      box-shadow: none;
+      color: $white;
+      border: none;
+      line-height: 1.5;
+
+      &.active {
+        background: $purple-300;
+      }
+
+      &:hover {
+        background: $purple-300;
+
+        &:last-child {
+          border-bottom-right-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+      }
+    }
+  }
+</style>
+
 <script>
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
diff --git a/website/client/components/social/inbox/conversationPage.vue b/website/client/components/social/inbox/conversationPage.vue
deleted file mode 100644
index 57146e81e9..0000000000
--- a/website/client/components/social/inbox/conversationPage.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template lang="pug">
-.row
-  .col-12
-    h1.page-header Conversation
-    .card(v-for="message in messages")
-      .card-block
-        strong {{message.from}}
-        span {{message.date}}
-        p {{message.message}}
-    form.form.mt-2(@submit.prevent='reply')
-      .form-group
-        textarea.form-control(rows="3", v-model='newMessage')
-      button.btn.btn-primary(type="submit") Add Reply
-</template>
-
-<script>
-export default {
-  data () {
-    // @TODO: Abstract to Store
-    let messages = [
-      {
-        from: 'Paglias',
-        fromUserId: 1234,
-        to: 'TheHollidayInn',
-        message: 'I love the Gang of Four',
-        date: new Date(),
-      },
-    ];
-
-    return {
-      messages,
-      newMessage: '',
-    };
-  },
-
-  methods: {
-    reply: function reply () {
-      // @TODO: This will be default values based on the conversation and current user
-      let messageToSend = {
-        from: 'TheHollidayInn',
-        fromUserId: 3211,
-        to: 'Paglias',
-        message: this.newMessage,
-        date: new Date(),
-      };
-      this.messages.push(messageToSend);
-      this.newMessage = '';
-    },
-  },
-};
-</script>
diff --git a/website/client/components/social/inbox/index.vue b/website/client/components/social/inbox/index.vue
deleted file mode 100644
index 586dafd6fa..0000000000
--- a/website/client/components/social/inbox/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template lang="pug">
-.row
-  .col-12
-    h1.page-header(v-once) {{ $t('inbox') }}
-    .card(v-for="conversation in conversations")
-      .card-block
-        router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
-          | {{ conversation.from }}
-
-</template>
-
-<script>
-export default {
-  data () {
-    // @TODO: Abstract to Store
-    let messages = [
-      {
-        from: 'Paglias',
-        fromUserId: 1234,
-        to: 'TheHollidayInn',
-        message: 'I love the Gang of Four',
-      },
-    ];
-
-    let conversations = {};
-    for (let message of messages) {
-      if (!conversations[message.fromUserId]) conversations[message.fromUserId] = message;
-    }
-
-    return {
-      conversations,
-    };
-  },
-};
-</script>
diff --git a/website/client/components/userMenu/achievements.vue b/website/client/components/userMenu/achievements.vue
index 1812438c41..a39e9e2827 100644
--- a/website/client/components/userMenu/achievements.vue
+++ b/website/client/components/userMenu/achievements.vue
@@ -1,48 +1,51 @@
 <template lang="pug">
-  .standard-page
-    h1 Achievements
+  .standard-page.container
+    .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-12(v-for='(category, key) in achievements')
-        h2 {{ $t(key+'Achievs') }}
-        .row
-          .col-1(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')
-
-      .col-12(:class="{ muted: !user.achievements.challenges.length }")
-        h2(v-once) {{ $t('challengeWinner') }}
+      .col-6
+        h2 Challeges Won
         div(v-for='chal in user.achievements.challenges')
           span {{chal}}
-
-      .col-12(:class="{ muted: !user.achievements.quests }")
-        h2(v-once) {{ $t('completedQuests') }}
+      .col-6
+        h2 Quests Completed
         div(v-for='(value, key) in user.achievements.quests')
           span {{ content.quests[k].text() }}
           span {{ value }}
 </template>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
   h2 {
     margin-top: 2em;
   }
 
   .achievement-container {
     margin-bottom: 1em;
+    padding: 2em;
+    background: #fff;
+  }
+
+  .achievement {
+    margin: 0 auto;
   }
 
   .counter.badge {
     color: #fff;
     position: absolute;
-    bottom: 0;
-    left: 44px;
+    top: 0;
+    right: 0;
+    background-color: #ff944c;
   }
 </style>
 
diff --git a/website/client/components/userMenu/inbox.vue b/website/client/components/userMenu/inbox.vue
index ff1df057e3..99c1ccd67a 100644
--- a/website/client/components/userMenu/inbox.vue
+++ b/website/client/components/userMenu/inbox.vue
@@ -25,11 +25,11 @@
         .conversations(v-if='filtersConversations.length > 0')
           .conversation(v-for='conversation in conversations', @click='selectConversation(conversation.key)', :class="{active: selectedConversation === conversation.key}")
             div
-             span {{conversation.name}}
+             span(:class="userLevelStyle(conversation)") {{conversation.name}}
              span.timeago {{conversation.date}}
             div {{conversation.lastMessageText}}
       .col-8.messages
-        .message(v-for='message in currentMessages') {{message.text}}
+        chat-message.container-fluid(:chat.sync='activeChat')
 
         // @TODO: Implement new message header here when we fix the above
 
@@ -64,6 +64,7 @@
   .messages {
     position: relative;
     padding-left: 0;
+    padding-bottom: 6em;
   }
 
   .to-form input {
@@ -129,17 +130,22 @@
 <script>
 import moment from 'moment';
 import filter from 'lodash/filter';
+import sortBy from 'lodash/sortBy';
 import { mapState } from 'client/libs/store';
+import styleHelper from 'client/mixins/styleHelper';
 
 import bModal from 'bootstrap-vue/lib/components/modal';
 import bFormInput from 'bootstrap-vue/lib/components/form-input';
 
 import messageIcon from 'assets/svg/message.svg';
+import chatMessage from '../chat/chatMessages';
 
 export default {
+  mixins: [styleHelper],
   components: {
     bModal,
     bFormInput,
+    chatMessage,
   },
   data () {
     return {
@@ -150,6 +156,7 @@ export default {
       selectedConversation: '',
       search: '',
       newMessage: '',
+      activeChat: [],
     };
   },
   computed: {
@@ -160,7 +167,10 @@ export default {
         let message = this.user.inbox.messages[messageId];
         let userId = message.uuid;
 
-        if (!this.selectedConversation) this.selectedConversation = userId;
+        if (!this.selectedConversation) {
+          this.selectedConversation = userId;
+          this.selectConversation(userId);
+        }
 
         if (!conversations[userId]) {
           conversations[userId] = {
@@ -197,6 +207,10 @@ export default {
     },
     selectConversation (key) {
       this.selectedConversation = key;
+      this.activeChat = this.conversations[this.selectedConversation].messages;
+      this.activeChat = sortBy(this.activeChat, [(o) => {
+        return o.timestamp;
+      }]);
     },
     sendPrivateMessage () {
       this.$store.dispatch('members:sendPrivateMessage', {
@@ -208,6 +222,9 @@ export default {
         text: this.newMessage,
         timestamp: new Date(),
       });
+
+      this.activeChat = this.conversations[this.selectedConversation].messages;
+
       this.conversations[this.selectedConversation].lastMessageText = this.newMessage;
       this.conversations[this.selectedConversation].date = new Date();
 
diff --git a/website/client/components/userMenu/profile.vue b/website/client/components/userMenu/profile.vue
index eee2d68518..cb1f839714 100644
--- a/website/client/components/userMenu/profile.vue
+++ b/website/client/components/userMenu/profile.vue
@@ -1,37 +1,44 @@
 <template lang="pug">
 .standard-page
-  h2 Profile
   .row
-    .col-md-12(v-if='!editing')
-      button.btn.btn-default(@click='editing = true') {{ $t('edit') }}
-      h2 {{ $t('displayName') }}
-      span(v-if='user.profile.name') {{user.profile.name}}
-      p
-        small.muted {{ $t('displayNameDescription1') }}
-          | &nbsp;
-          a(href='/#/options/settings/settings') {{ $t('displayNameDescription2') }}
-          | &nbsp;
-          | {{ $t('displayNameDescription3') }}
-      span.muted(ng-hide='user.profile.name') -&nbsp;
-        | {{ $t('none') }}
-        | &nbsp;-
+    .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')
 
-      h2 {{ $t('displayPhoto') }}
-      img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
-      span.muted(ng-hide='user.profile.imageUrl') -&nbsp;
-        | {{ $t('none') }}
-        | &nbsp;-
+    .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)')
 
-      h2 {{ $t('displayBlurb') }}
-      markdown(v-if='user.profile.blurb', text='user.profile.blurb')
-      span.muted(ng-hide='user.profile.blurb') -&nbsp;
-        | {{ $t('none') }}
-        | &nbsp;-
-      //{{user.profile.blurb | linky:'_blank'}}
-    .col-md-12(v-if='editing')
-      .alert.alert-info.alert-sm
-        | {{ $t("communityGuidelinesWarning", managerEmail) }}
-      button.btn.btn-primary(type='submit', @click='save()') {{ $t("save") }}
       // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
       .form-group
         label {{ $t('displayName') }}
@@ -40,26 +47,35 @@
         label {{ $t('photoUrl') }}
         input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
       .form-group
-        label {{ $t('displayBlurb') }}
+        label {{ $t('about') }}
         textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
         // include ../../shared/formatting-help
-  .row
-    .col-md-6
-      h2 {{ $t('totalCheckinsTitle') }}
-      span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
-    .col-md-6
-      h2
-        | {{getProgressDisplay()}}
-      .progress
-        .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
-          span.sr-only {{ incentivesProgress }}% Complete
+      .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") }}
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  h2 {
-    margin-top: 2em;
+  .header {
+    h1 {
+      color: #4f2a93;
+    }
+
+    h4 {
+      color: #686274;
+    }
   }
 </style>
 
diff --git a/website/client/components/userMenu/stats.vue b/website/client/components/userMenu/stats.vue
index d626445608..7584f57a05 100644
--- a/website/client/components/userMenu/stats.vue
+++ b/website/client/components/userMenu/stats.vue
@@ -1,6 +1,27 @@
 <template lang="pug">
   .standard-page
     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
+      hr.col-12
+      h2.col-12 Attributes
+      .col-6
+      .col-6
+    .row
+      .col-6
+      .col-6
+
     .row
       .col-4
         div
@@ -147,7 +168,7 @@
                   :popover='$t(statInfo.allocatepop)') +
 </template>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 
   .btn-xs {
     font-size: 12px;
diff --git a/website/client/mixins/styleHelper.js b/website/client/mixins/styleHelper.js
new file mode 100644
index 0000000000..83e92db4b3
--- /dev/null
+++ b/website/client/mixins/styleHelper.js
@@ -0,0 +1,17 @@
+export default {
+  methods: {
+    userLevelStyle (user, style) {
+      style = style || '';
+      let npc = user && user.backer && user.backer.npc ? user.backer.npc : '';
+      let level = user && user.contributor && user.contributor.level ? user.contributor.level : '';
+      style += this.userLevelStyleFromLevel(level, npc, style);
+      return style;
+    },
+    userLevelStyleFromLevel (level, npc, style) {
+      style = style || '';
+      if (npc) style += ' label-npc';
+      if (level) style +=   ` label-contributor-${level}`;
+      return style;
+    },
+  },
+};
diff --git a/website/client/router.js b/website/client/router.js
index 9d9e8737ea..c6ef78199b 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import getStore from 'client/store';
 
-import EmptyView from './components/emptyView';
+// import EmptyView from './components/emptyView';
 
 // TODO Dummy elements used as placeholder until real components are implemented
 import ParentPage from './components/parentPage';
@@ -66,10 +66,6 @@ const ItemsPage = () => import(/* webpackChunkName: "inventory" */'./components/
 const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/equipment/index');
 const StablePage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/stable/index');
 
-// Social
-const InboxPage = () => import(/* webpackChunkName: "inbox" */ './components/social/inbox/index');
-const InboxConversationPage = () => import(/* webpackChunkName: "inbox" */ './components/social/inbox/conversationPage');
-
 // Guilds
 const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/groups/index');
 const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/groups/tavern');
@@ -178,22 +174,6 @@ const router = new VueRouter({
       component: ParentPage,
       children: [
         { name: 'avatar', path: 'avatar', component: Page },
-        {
-          path: 'inbox',
-          component: EmptyView,
-          children: [
-            {
-              name: 'inbox',
-              path: '',
-              component: InboxPage,
-            },
-            {
-              name: 'conversation',
-              path: 'conversation/:id',
-              component: InboxConversationPage,
-            },
-          ],
-        },
         { name: 'backgrounds', path: 'backgrounds', component: BackgroundsPage },
         { name: 'stats', path: 'stats', component: StatsPage },
         { name: 'achievements', path: 'achievements', component: AchievementsPage },
diff --git a/website/client/store/actions/challenges.js b/website/client/store/actions/challenges.js
index 4b148788fa..21f245485e 100644
--- a/website/client/store/actions/challenges.js
+++ b/website/client/store/actions/challenges.js
@@ -16,7 +16,7 @@ export async function joinChallenge (store, payload) {
 }
 
 export async function leaveChallenge (store, payload) {
-  let response = await axios.post(`/api/v3/challenges/${payload.challengeId}/join`, {
+  let response = await axios.post(`/api/v3/challenges/${payload.challengeId}/leave`, {
     data: {
       keep: payload.keep,
     },
diff --git a/website/client/store/actions/guilds.js b/website/client/store/actions/guilds.js
index 47e088a0a6..14ec5eff27 100644
--- a/website/client/store/actions/guilds.js
+++ b/website/client/store/actions/guilds.js
@@ -15,11 +15,11 @@ export async function getPublicGuilds (store, payload) {
 }
 
 export async function getMyGuilds (store) {
-  let response = await axios.get('/api/v3/groups', {
-    params: {
-      type: 'privateGuilds',
-    },
-  });
+  let params = {
+    type: 'guilds',
+  };
+
+  let response = await axios.get('/api/v3/groups', { params });
 
   let guilds = response.data.data;
   store.state.myGuilds = guilds;
@@ -92,9 +92,7 @@ export async function update (store, payload) {
   let groupDetailsToSend = omit(payload.group, ['chat', 'challenges', 'members', 'invites']);
   if (groupDetailsToSend.leader && groupDetailsToSend.leader._id) groupDetailsToSend.leader = groupDetailsToSend.leader._id;
 
-  let response = await axios.put(`/api/v3/groups/${payload.group.id}`, {
-    data: groupDetailsToSend,
-  });
+  let response = await axios.put(`/api/v3/groups/${payload.group.id}`, groupDetailsToSend);
 
   let updatedGroup = response.data.data;
 
diff --git a/website/client/store/actions/shops.js b/website/client/store/actions/shops.js
index 88ed46efe6..97ca5af0ab 100644
--- a/website/client/store/actions/shops.js
+++ b/website/client/store/actions/shops.js
@@ -36,16 +36,16 @@ export function sellItems (store, params) {
 }
 
 
-export function pinGear (store, params) {
-  //axios
+export function pinGear () {
+  // axios
   //  .post(`/api/v3/user/pin/${params.key}`);
   // TODO
   // .then((res) => console.log('equip', res))
   // .catch((err) => console.error('equip', err));
 }
 
-export function unpinGear (store, params) {
-  //axios
+export function unpinGear () {
+  // axios
   //  .post(`/api/v3/user/unpin/${params.key}`);
   // TODO
   // .then((res) => console.log('equip', res))
diff --git a/website/client/store/actions/user.js b/website/client/store/actions/user.js
index 62bbadccb7..6d4ca528ab 100644
--- a/website/client/store/actions/user.js
+++ b/website/client/store/actions/user.js
@@ -27,8 +27,9 @@ export function set (store, changes) {
   // .catch((err) => console.error('set', err));
 }
 
-export function sleep () {
-  // @TODO: Implemented
+export async function sleep () {
+  let response = await axios.post('/api/v3/user/sleep');
+  return response.data.data;
 }
 
 export async function addWebhook (store, payload) {
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index 3700ede724..a143c20225 100644
--- a/website/common/locales/en/newClient.json
+++ b/website/common/locales/en/newClient.json
@@ -213,7 +213,6 @@
   "where": "Where*",
   "challengeMinimum": "Minimum 1 Gem for public Challenges (helps prevent spam, it really does).",
   "group": "Group",
-
   "sortByType": "Type",
   "sortByPrice": "Price",
   "sortByCon": "Con",
@@ -228,5 +227,8 @@
   "sell": "Sell",
   "buyNow": "Buy Now",
   "sortByNumber": "Number",
-  "featuredItems": "Featured Items!"
+  "featuredItems": "Featured Items!",
+  "not_participating": "Not Participating",
+  "owned": "Owned",
+  "not_owned": "Not Owned"
 }