diff --git a/website/client/components/achievements/questCompleted.vue b/website/client/components/achievements/questCompleted.vue
index 6c7c2762ca..8b1d11e5c1 100644
--- a/website/client/components/achievements/questCompleted.vue
+++ b/website/client/components/achievements/questCompleted.vue
@@ -1,14 +1,20 @@
 <template lang="pug">
-  b-modal#quest-completed(v-if='user.party.quest.completed', :title="quests[user.party.quest.completed].text() + '' + $t('completed')",
-    size='lg', :hide-footer="true")
+  b-modal#quest-completed(v-if='user.party.quest.completed', :title="title",
+    size='md', :hide-footer="true")
     .modal-body.text-center
-      div(:class='`quest_${user.party.quest.completed}`')
-      p(v-html='quests[user.party.quest.completed].completion()')
+      .quest(:class='`quest_${user.party.quest.completed}`')
+      p(v-html='this.questData.completion()')
       .quest-rewards(key='user.party.quest.completed', header-participant="$t('youReceived')", header-quest-owner="$t('questOwnerReceived')")
     .modal-footer
       button.btn.btn-primary(@click='setQuestCompleted()') {{ $t('ok') }}
 </template>
 
+<style scoped>
+  .quest {
+    margin: 0 auto;
+  }
+</style>
+
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
 import quests from 'common/script/content/quests';
@@ -29,6 +35,12 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    questData () {
+      return this.quests.quests[this.user.party.quest.completed];
+    },
+    title () {
+      return `${this.questData.text()} ${this.$t('completed')}`;
+    },
     barStyle () {
       return {
         width: `${percent(this.user.stats.hp, maxHealth)}%`,
diff --git a/website/client/components/appFooter.vue b/website/client/components/appFooter.vue
index af758df868..cbd89a900c 100644
--- a/website/client/components/appFooter.vue
+++ b/website/client/components/appFooter.vue
@@ -4,12 +4,12 @@
   modify-inventory(v-if="isUserLoaded")
   footer.container-fluid
     .row
-      .col-2
+      .col-12.col-md-2
         h3
           a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') {{ $t('mobileIOS') }}
         h3
           a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') {{ $t('mobileAndroid') }}
-      .col-2
+      .col-12.col-md-2
         h3 Company
         ul
           li
@@ -28,7 +28,7 @@
             a(href='/static/press-kit') {{ $t('presskit') }}
           li
             a(href='/static/contact') {{ $t('contactUs') }}
-      .col-2
+      .col-12.col-md-2
         h3 Community
         ul
           li
@@ -47,7 +47,7 @@
             a(href='https://www.facebook.com/Habitica', target='_blank') {{ $t('communityFacebook') }}
           li
             a(href='https://www.reddit.com/r/habitrpg/', target='_blank') {{ $t('communityReddit') }}
-      .col-6
+      .col-12.col-md-6
         .row
           .col-6
             h3 Developers
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 6ac734cff6..3ebac07fed 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -52,7 +52,7 @@ div
             a.dropdown-item(href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents", target='_blank') {{ $t('requestAF') }}
             a.dropdown-item(href="http://habitica.wikia.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
             a.dropdown-item(href="http://habitica.wikia.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
-      .item-with-icon(v-if="userHourglasses != 0")
+      .item-with-icon(v-if="userHourglasses > 0")
         .svg-icon(v-html="icons.hourglasses")
         span {{ userHourglasses }}
       .item-with-icon
diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index 59e7cdc8fa..ce49b49762 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -51,7 +51,7 @@
           )
 
     .row
-      task-column.col-6(
+      task-column.col-12.col-sm-6(
         v-for="column in columns",
         :type="column",
         :key="column",
diff --git a/website/client/components/challenges/findChallenges.vue b/website/client/components/challenges/findChallenges.vue
index c445cee6ed..886840202f 100644
--- a/website/client/components/challenges/findChallenges.vue
+++ b/website/client/components/challenges/findChallenges.vue
@@ -16,7 +16,7 @@
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
           span(v-once) {{$t('createChallenge')}}
     .row
-      .col-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
+      .col-12.col-md-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
         challenge-item(:challenge='challenge')
 </template>
 
diff --git a/website/client/components/challenges/myChallenges.vue b/website/client/components/challenges/myChallenges.vue
index 110563c01d..e3041ef525 100644
--- a/website/client/components/challenges/myChallenges.vue
+++ b/website/client/components/challenges/myChallenges.vue
@@ -23,7 +23,7 @@
         p(v-once) {{$t('challengeDescription2')}}
 
     .row
-      .col-6(v-for='challenge in filteredChallenges')
+      .col-12.col-md-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
 </template>
 
diff --git a/website/client/components/challenges/sidebar.vue b/website/client/components/challenges/sidebar.vue
index 0318e3c15f..9c93aca0c8 100644
--- a/website/client/components/challenges/sidebar.vue
+++ b/website/client/components/challenges/sidebar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.col-2.standard-sidebar
+.col-2.standard-sidebar.hidden-xs-down
   .form-group
     input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
 
diff --git a/website/client/components/group-plans/taskInformation.vue b/website/client/components/group-plans/taskInformation.vue
index 1a85eb3d7c..4e7f783f20 100644
--- a/website/client/components/group-plans/taskInformation.vue
+++ b/website/client/components/group-plans/taskInformation.vue
@@ -72,7 +72,7 @@
         v-on:taskEdited='taskEdited',
       )
   .row
-    task-column.col-3(
+    task-column.col-12.col-sm-6.col-3(
       v-for="column in columns",
       :type="column",
       :key="column",
diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index 0744bbb1a5..6f7e49eb99 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -3,7 +3,8 @@
   group-form-modal(v-if='isParty')
   invite-modal(:group='this.group')
   start-quest-modal(:group='this.group')
-  .col-8.standard-page
+  quest-details-modal(:group='this.group')
+  .col-12.col-sm-8.standard-page
     .row
       .col-6.title-details
         h1 {{group.name}}
@@ -45,7 +46,7 @@
           .col-12.hr
           chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
 
-  .col-4.sidebar
+  .col-12.col-sm-4.sidebar
     .row(:class='{"guild-background": !isParty}')
       .col-6
       .col-6
@@ -80,9 +81,13 @@
             p(v-once) {{ $t('questDescription') }}
             button.btn.btn-secondary(v-once, @click="openStartQuestModal()", v-if='isLeader') {{ $t('startAQuest') }}
         .row.quest-active-section(v-if='isParty && onPendingQuest && !onActiveQuest')
-          h2 Pending quest
-          button.btn.btn-secondary(v-once, @click="questForceStart()") {{ $t('begin') }}
-          button.btn.btn-secondary(v-once, @click="questCancel()") {{ $t('cancel') }}
+          .col-2
+            .quest(:class='`inventory_quest_scroll_${questData.key}`')
+          .col-6.titles
+            strong {{ questData.text() }}
+            p {{acceptedCount}} / {{group.memberCount}}
+          .col-4
+            button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
         .row.quest-active-section(v-if='isParty && !onPendingQuest && onActiveQuest')
           .col-12.text-center
             .quest-boss(:class="'quest_' + questData.key")
@@ -353,6 +358,10 @@
   }
 
   .quest-active-section {
+    .titles {
+        padding-top: .5em;
+    }
+
     .quest-box {
       background-image: url('~client/assets/svg/for-css/quest-border.svg');
       background-size: 100% 100%;
@@ -431,6 +440,8 @@
 </style>
 
 <script>
+// @TODO: Break this down into components
+
 import debounce from 'lodash/debounce';
 import extend from 'lodash/extend';
 import groupUtilities from 'client/mixins/groupsUtilities';
@@ -439,6 +450,7 @@ import { mapState } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
 import membersModal from './membersModal';
 import startQuestModal from './startQuestModal';
+import questDetailsModal from './questDetailsModal';
 import quests from 'common/script/content/quests';
 import percent from 'common/script/libs/percent';
 import groupFormModal from './groupFormModal';
@@ -482,6 +494,7 @@ export default {
     inviteModal,
     groupChallenges,
     autocomplete,
+    questDetailsModal,
   },
   directives: {
     bToggle,
@@ -523,6 +536,17 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    acceptedCount () {
+      let count = 0;
+
+      if (!this.group || !this.group.quest) return count;
+
+      for (let uuid in this.group.quest.members) {
+        if (this.group.quest.members[uuid]) count += 1;
+      }
+
+      return count;
+    },
     communityGuidelinesAccepted () {
       return this.user.flags.communityGuidelinesAccepted;
     },
@@ -721,6 +745,9 @@ export default {
     openStartQuestModal () {
       this.$root.$emit('show::modal', 'start-quest-modal');
     },
+    openQuestDetails () {
+      this.$root.$emit('show::modal', 'quest-details');
+    },
     checkForAchievements () {
       // Checks if user's party has reached 2 players for the first time.
       if (!this.user.achievements.partyUp && this.group.memberCount >= 2) {
@@ -815,11 +842,6 @@ export default {
       this.$store.state.profileOptions.startingPage = 'profile';
       this.$root.$emit('show::modal', 'profile');
     },
-    async questCancel () {
-      if (!confirm(this.$t('sureCancel'))) return;
-      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/cancel'});
-      this.group.quest = quest;
-    },
     async questAbort () {
       if (!confirm(this.$t('sureAbort'))) return;
       if (!confirm(this.$t('doubleSureAbort'))) return;
@@ -835,10 +857,6 @@ export default {
       let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/accept'});
       this.group.quest = quest;
     },
-    async questForceStart () {
-      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/force-start'});
-      this.group.quest = quest;
-    },
     // @TODO: Move to notificaitons component?
     async questReject () {
       let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/reject'});
diff --git a/website/client/components/groups/questDetailsModal.vue b/website/client/components/groups/questDetailsModal.vue
new file mode 100644
index 0000000000..d25c1618d5
--- /dev/null
+++ b/website/client/components/groups/questDetailsModal.vue
@@ -0,0 +1,210 @@
+<template lang="pug">
+  b-modal#quest-details(title="Empty", size='md', :hide-footer="true", :hide-header="true")
+    .left-panel.content
+      h3.text-center {{ $t('participantsTitle') }}
+      .row
+        .col-10.offset-1.text-center
+          span.description(v-once) {{ $t('participantDesc') }}
+      .row
+        .col-12.member(v-for='member in members')
+          strong(:class="{'declined-name': member.accepted === false}") {{member.name}}
+          .accepted.float-right(v-if='member.accepted === true') {{ $t('accepted') }}
+          .declined.float-right(v-if='member.accepted === false') {{ $t('declined') }}
+          .pending.float-right(v-if='member.accepted === null') {{ $t('pending') }}
+    div(v-if='questData')
+      questDialogContent(:item="questData")
+    div.text-center.actions
+      div
+        button.btn.btn-secondary(v-once, @click="questForceStart()") {{ $t('begin') }}
+      div
+        .cancel(v-once, @click="questCancel()") {{ $t('cancel') }}
+    .side-panel(v-if='questData')
+      questDialogDrops(:item="questData")
+</template>
+
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  header {
+    background-color: $white !important;
+    border: none !important;
+
+    h5 {
+      text-indent: -99999px;
+    }
+  }
+
+  .quest-details {
+    margin: 0 auto;
+    text-align: left;
+    width: 180px;
+  }
+
+  .btn-primary {
+    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;
+    overflow: scroll;
+
+    h3 {
+      color: $white;
+    }
+
+    .selected .quest-wrapper {
+      border: solid 1.5px #9a62ff;
+    }
+
+    .quest-wrapper:hover {
+      cursor: pointer;
+    }
+
+    .quest-col .quest-wrapper {
+      background: $white;
+      padding: .2em;
+      margin-bottom: 1em;
+      border-radius: 3px;
+    }
+
+    .description {
+      text-align: center;
+      color: #a5a1ac;
+      font-size: 12px;
+    }
+  }
+
+  .side-panel {
+    position: absolute;
+    right: -350px;
+    top: 25px;
+    border-radius: 8px;
+    background-color: $gray-600;
+    box-shadow: 0 2px 16px 0 rgba(26, 24, 29, 0.32);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 364px;
+    z-index: -1;
+    height: 93%;
+  }
+
+  .member {
+    padding: 1em .5em;
+    border-top: 1px solid #686274;
+
+    .declined-name {
+      color: #878190;
+    }
+
+    .accepted {
+      color: #1ed3a0;
+    }
+
+    .declined {
+      color: #f19595;
+    }
+
+    .pending {
+      color: #c3c0c7;
+    }
+  }
+
+  .actions {
+    padding-top: 2em;
+    padding-bottom: 2em;
+
+    .cancel {
+      color: #f74e52;
+      margin-top: 3em;
+    }
+
+    .cancel:hover {
+      cursor: pointer;
+    }
+  }
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+import bModal from 'bootstrap-vue/lib/components/modal';
+
+import quests from 'common/script/content/quests';
+
+import copyIcon from 'assets/svg/copy.svg';
+import greyBadgeIcon from 'assets/svg/grey-badge.svg';
+import qrCodeIcon from 'assets/svg/qrCode.svg';
+import facebookIcon from 'assets/svg/facebook.svg';
+import twitterIcon from 'assets/svg/twitter.svg';
+import starIcon from 'assets/svg/star.svg';
+import goldIcon from 'assets/svg/gold.svg';
+import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
+import questDialogDrops from '../shops/quests/questDialogDrops';
+import questDialogContent from '../shops/quests/questDialogContent';
+
+export default {
+  props: ['group'],
+  components: {
+    bModal,
+    questDialogDrops,
+    questDialogContent,
+  },
+  data () {
+    return {
+      loading: false,
+      selectedQuest: {},
+      icons: Object.freeze({
+        copy: copyIcon,
+        greyBadge: greyBadgeIcon,
+        qrCode: qrCodeIcon,
+        facebook: facebookIcon,
+        twitter: twitterIcon,
+        starIcon,
+        goldIcon,
+        difficultyStarIcon,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+      partyMembers: 'party.members.data',
+    }),
+    questData () {
+      return quests.quests[this.group.quest.key];
+    },
+    members () {
+      return this.partyMembers.map(member => {
+        return {
+          name: member.profile.name,
+          accepted: this.group.quest.members[member._id],
+        };
+      });
+    },
+  },
+  methods: {
+    async questForceStart () {
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/force-start'});
+      this.group.quest = quest;
+      this.close();
+    },
+    async questCancel () {
+      if (!confirm(this.$t('sureCancel'))) return;
+      let quest = await this.$store.dispatch('quests:sendAction', {groupId: this.group._id, action: 'quests/cancel'});
+      this.group.quest = quest;
+      this.close();
+    },
+    close () {
+      this.$root.$emit('hide::modal', 'quest-details');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/groups/sidebar.vue b/website/client/components/groups/sidebar.vue
index 205313e52f..2f32f3224a 100644
--- a/website/client/components/groups/sidebar.vue
+++ b/website/client/components/groups/sidebar.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.standard-sidebar
+.standard-sidebar.hidden-xs-down
   .form-group
     input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
 
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index 9da67cba98..39a0d9ebca 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 .row
-  .clearfix.col-8.standard-page
+  .col-12.col-sm-8.clearfix.standard-page
     .row
       .col-6.title-details
         h1(v-once) {{ $t('welcomeToTavern') }}
@@ -29,7 +29,7 @@
           .hr.col-12
           chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
 
-  .col-md-4.sidebar
+  .col-12.col-sm-4.sidebar
     .section
       .grassy-meadow-backdrop
         .daniel_front
diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
index 093bacccbf..1855f76e4c 100644
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
+  // @TODO: breakdown to componentes and use some SOLID
   .row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
-    .standard-sidebar
+    .standard-sidebar.col-3.hidden-xs-down
       div
         #npmMattStable.npc_matt
         b-popover(
@@ -53,7 +54,7 @@
             @change="updateHideMissing"
           )
 
-    .standard-page
+    .standard-page.col-12.col-sm-9
       .clearfix
         h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}
 
@@ -73,55 +74,49 @@
         span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
 
       div(
-        v-for="petGroup in petGroups",
+        v-for="(petGroup, index) in petGroups",
         v-if="viewOptions[petGroup.key].selected",
         :key="petGroup.key"
       )
-        h4(v-if="viewOptions[petGroup.key].animalCount != 0") {{ petGroup.label }}
+        h4(v-if="viewOptions[petGroup.key].animalCount !== 0") {{ petGroup.label }}
 
-        itemRows(
-          :items="pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-          :itemWidth=94,
-          :itemMargin=24,
-          :type="petGroup.key",
-        )
-          template(slot="item", scope="context")
-            div(
-              v-drag.drop.food="context.item.key",
-              @itemDragOver="onDragOver($event, context.item)",
-              @itemDropped="onDrop($event, context.item)",
-              @itemDragLeave="onDragLeave()",
-              :class="{'last': context.item.isLastInRow}"
+        .pet-row.d-flex(
+          v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
+          v-if='index === 0 || showMore === petGroup.key')
+          .pet-group(
+            v-for='item in group'
+            v-drag.drop.food="item.key",
+            @itemDragOver="onDragOver($event, item)",
+            @itemDropped="onDrop($event, item)",
+            @itemDragLeave="onDragLeave()",
+            :class="{'last': item.isLastInRow}"
+          )
+            petItem(
+              :item="item",
+              :itemContentClass="getPetItemClass(item)",
+              :popoverPosition="'top'",
+              :progress="item.progress",
+              :emptyItem="!item.isOwned()",
+              :showPopover="currentDraggingFood == null",
+              :highlightBorder="highlightPet == item.key",
+              @click="petClicked(item)"
             )
-              petItem(
-                :item="context.item",
-                :itemContentClass="getPetItemClass(context.item)",
-                :popoverPosition="'top'",
-                :progress="context.item.progress",
-                :emptyItem="!context.item.isOwned()",
-                :showPopover="currentDraggingFood == null",
-                :highlightBorder="highlightPet == context.item.key",
-                @click="petClicked(context.item)"
-              )
-                span(slot="popoverContent")
-                  div.hatchablePopover(v-if="context.item.isHatchable()")
-                    h4.popover-content-title {{ context.item.name }}
-                    div.popover-content-text(v-html="$t('haveHatchablePet', { potion: context.item.potionName, egg: context.item.eggName })")
-                    div.potionEggGroup
-                      div.potionEggBackground
-                        div(:class="'Pet_HatchingPotion_'+context.item.potionKey")
-                      div.potionEggBackground
-                        div(:class="'Pet_Egg_'+context.item.eggKey")
+              span(slot="popoverContent")
+                div.hatchablePopover(v-if="item.isHatchable()")
+                  h4.popover-content-title {{ item.name }}
+                  div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
+                  div.potionEggGroup
+                    div.potionEggBackground
+                      div(:class="'Pet_HatchingPotion_'+item.potionKey")
+                    div.potionEggBackground
+                      div(:class="'Pet_Egg_'+item.eggKey")
+                div(v-else)
+                  h4.popover-content-title {{ item.name }}
+              template(slot="itemBadge", scope="context")
+              starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
 
-                  div(v-else)
-                    h4.popover-content-title {{ context.item.name }}
-
-                template(slot="itemBadge", scope="context")
-                  starBadge(
-                    :selected="context.item.key === currentPet",
-                    :show="context.item.isOwned()",
-                    @click="selectPet(context.item)",
-                  )
+        .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
+          | {{ showMore === petGroup.key ? $t('showLess') : $t('showMore') }}
 
       h2
         | {{ $t('mounts') }}
@@ -135,31 +130,30 @@
       )
         h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
 
-        itemRows(
-          :items="mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-          :itemWidth=94,
-          :itemMargin=24,
-          :type="mountGroup.key",
-        )
-          template(slot="item", scope="context")
+        .pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
+          v-if='index === 0 || showMore === mountGroup.key')
+          .pet-group(v-for='item in group')
             mountItem(
-              :item="context.item",
-              :itemContentClass="context.item.isOwned() ? ('Mount_Icon_' + context.item.key) : 'PixelPaw GreyedOut'",
-              :key="context.item.key",
+              :item="item",
+              :itemContentClass="item.isOwned() ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
+              :key="item.key",
               :popoverPosition="'top'",
-              :emptyItem="!context.item.isOwned()",
+              :emptyItem="!item.isOwned()",
               :showPopover="true",
-              @click="selectMount(context.item)"
+              @click="selectMount(item)"
             )
               span(slot="popoverContent")
-                h4.popover-content-title {{ context.item.name }}
+                h4.popover-content-title {{ item.name }}
               template(slot="itemBadge", scope="context")
                 starBadge(
-                  :selected="context.item.key === currentMount",
-                  :show="context.item.isOwned()",
-                  @click="selectMount(context.item)",
+                  :selected="item.key === currentMount",
+                  :show="item.isOwned()",
+                  @click="selectMount(item)",
                 )
 
+        .btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
+          | {{ showMore === mountGroup.key ? $t('showLess') : $t('showMore') }}
+
       drawer(
         :title="$t('quickInventory')",
         :errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? ((selectedDrawerTab === 0) ?  $t('noFoodAvailable') : $t('noSaddlesAvailable')) : null"
@@ -219,7 +213,6 @@
       :visible="hatchablePet != null",
       @change="resetHatchablePet($event)"
     )
-
       div.content(v-if="hatchablePet")
         div.potionEggGroup
           div.potionEggBackground
@@ -253,11 +246,9 @@
         div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
         div.popover
           div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
-
 </template>
 
 <style lang="scss">
-
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/modal.scss';
 
@@ -283,6 +274,20 @@
     top: -16px !important;
   }
 
+  .group {
+    height: 130px;
+    overflow: hidden;
+  }
+
+  .pet-row {
+    max-width: 100%;
+    flex-wrap: wrap;
+
+    .item {
+      margin-right: .5em;
+    }
+  }
+
   .hatchablePopover {
     width: 180px
   }
@@ -500,6 +505,7 @@
   import _filter from 'lodash/filter';
   import _flatMap from 'lodash/flatMap';
   import _throttle from 'lodash/throttle';
+  import groupBy from 'lodash/groupBy';
 
   import Item from '../item';
   import ItemRows from 'client/components/ui/itemRows';
@@ -585,6 +591,7 @@
         currentDraggingFood: null,
 
         selectedDrawerTab: 0,
+        showMore: '',
       };
     },
     watch: {
@@ -712,7 +719,13 @@
       },
     },
     methods: {
-
+      setShowMore (key) {
+        if (this.showMore === key) {
+          this.showMore = '';
+          return;
+        }
+        this.showMore = key;
+      },
       getAnimalList (animalGroup, type) {
         let key = animalGroup.key;
 
@@ -833,11 +846,39 @@
       },
 
       pets (animalGroup, hideMissing, sortBy, searchText) {
-        return this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
+        let pets = this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
+
+        // Don't group special
+        if (animalGroup.key === 'specialPets') {
+          return {none: pets};
+        }
+
+        let groupKey = 'eggKey';
+        if (sortBy === 'sortByColor') {
+          groupKey = 'potionKey';
+        } else if (sortBy === 'AZ') {
+          groupKey = '';
+        }
+
+        return groupBy(pets, groupKey);
       },
 
       mounts (animalGroup, hideMissing, sortBy, searchText) {
-        return this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
+        let mounts = this.listAnimals(animalGroup, 'mount', hideMissing, sortBy, searchText);
+
+        // Don't group special
+        if (animalGroup.key === 'specialMounts') {
+          return {none: mounts};
+        }
+
+        let groupKey = 'eggKey';
+        if (sortBy === 'sortByColor') {
+          groupKey = 'potionKey';
+        } else if (sortBy === 'AZ') {
+          groupKey = '';
+        }
+
+        return groupBy(mounts, groupKey);
       },
 
       getPetItemClass (pet) {
diff --git a/website/client/components/notificationMenu.vue b/website/client/components/notificationMenu.vue
index 8ecf346ce2..1fe4a7e868 100644
--- a/website/client/components/notificationMenu.vue
+++ b/website/client/components/notificationMenu.vue
@@ -37,11 +37,11 @@ div.item-with-icon.item-notifications.dropdown
       @click='go("/user/profile")')
       span.glyphicon.glyphicon-plus-sign
       span {{ $t('haveUnallocated', {points: user.stats.points}) }}
-    a.dropdown-item(v-for='(message, key) in user.newMessages', v-if='message.value')
-      span(@click='navigateToGroup(key)')
+    a.dropdown-item(v-for='message in userNewMessages')
+      span(@click='navigateToGroup(message.key)')
         span.glyphicon.glyphicon-comment
         span {{message.name}}
-      span.clear-button(@click='clearMessages(key)', :popover="$t('clear')",
+      span.clear-button(@click='clearMessages(message.key)', :popover="$t('clear')",
         popover-placement='right', popover-trigger='mouseenter', popover-append-to-body='true') Clear
     a.dropdown-item(v-for='(notification, index) in user.groupNotifications', @click='viewGroupApprovalNotification(notification, index, true)')
       span(:class="groupApprovalNotificationIcon(notification)")
@@ -156,6 +156,18 @@ export default {
       return {name: ''};
       // return this.user.party;
     },
+    userNewMessages () {
+      // @TODO: For some reason data becomes corrupted. We should fix this on the server
+      let userNewMessages = [];
+      for (let key in this.user.newMessages) {
+        let message = this.user.newMessages[key];
+        if (message && message.name && message.value) {
+          message.key = key;
+          userNewMessages.push(message);
+        }
+      }
+      return userNewMessages;
+    },
   },
   methods: {
     // @TODO: I hate this function, we can do better with a hashmap
@@ -244,8 +256,8 @@ export default {
         count += this.user.stats.points > 0 ? 1 : 0;
       }
 
-      if (this.user.newMessages) {
-        count += Object.keys(this.user.newMessages).length;
+      if (this.userNewMessages) {
+        count += Object.keys(this.userNewMessages).length;
       }
 
       return count;
diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
index 608aee349b..0aa2733a3b 100644
--- a/website/client/components/notifications.vue
+++ b/website/client/components/notifications.vue
@@ -303,6 +303,10 @@ export default {
         this.$root.$emit('show::modal', 'avatar-modal');
       }
 
+      if (this.questCompleted) {
+        this.$root.$emit('show::modal', 'quest-completed');
+      }
+
       // @TODO: This is a timeout to ensure dom is loaded
       window.setTimeout(() => {
         this.initTour();
diff --git a/website/client/components/userMenu/profile.vue b/website/client/components/userMenu/profile.vue
index f88288623d..95693adc93 100644
--- a/website/client/components/userMenu/profile.vue
+++ b/website/client/components/userMenu/profile.vue
@@ -795,7 +795,7 @@ export default {
       return display;
     },
     allocate (stat) {
-      allocate(this.user, stat);
+      allocate(this.user, {query: { stat }});
       axios.post(`/api/v3/user/allocate?stat=${stat}`);
     },
     allocateNow () {
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 949f10c1ca..db4e4e70c2 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -388,5 +388,7 @@
   "selectPartyMember": "Select a Party Member",
   "areYouSureDeleteMessage": "Are you sure you want to delete this message?",
   "reverseChat": "Reverse Chat",
-  "invites": "Invites"
+  "invites": "Invites",
+  "details": "Details",
+  "participantDesc": "Once all members have either accepted or declined, the Quest begins. Only those that clicked 'accept' will be able to participate in the Quest and receive the drops."
 }