From f99e3fab8bae7f8b0a997bf705a9a72e011b16b5 Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Sat, 12 Oct 2019 17:05:15 +0200
Subject: [PATCH] html format other components

---
 website/client/src/app.vue                    |  64 ++-
 website/client/src/components/404.vue         |  18 +-
 .../achievements/questInvitation.vue          |  57 ++-
 website/client/src/components/appFooter.vue   | 216 ++++++----
 .../client/src/components/auth/authForm.vue   |  51 ++-
 .../components/auth/registerLoginReset.vue    | 130 ++++--
 website/client/src/components/avatar.vue      |  58 ++-
 .../components/avatarModal/body-settings.vue  |   9 +-
 .../avatarModal/customize-options.vue         |  21 +-
 .../components/avatarModal/extra-settings.vue |  18 +-
 .../components/avatarModal/hair-settings.vue  |  18 +-
 .../components/avatarModal/skin-settings.vue  |   6 +-
 .../src/components/bannedAccountModal.vue     |   3 +-
 .../components/categories/categoryTags.vue    |   9 +-
 .../components/challenges/challengeDetail.vue | 135 +++---
 .../components/challenges/challengeItem.vue   |  46 +-
 .../challengeMemberProgressModal.vue          |   3 +-
 .../components/challenges/challengeModal.vue  | 109 +++--
 .../challenges/closeChallengeModal.vue        |  29 +-
 .../components/challenges/findChallenges.vue  |  40 +-
 .../components/challenges/groupChallenges.vue |  18 +-
 .../src/components/challenges/index.vue       |   6 +-
 .../challenges/leaveChallengeModal.vue        |   6 +-
 .../components/challenges/myChallenges.vue    |  52 ++-
 .../src/components/challenges/sidebar.vue     |  30 +-
 .../src/components/chat/autoComplete.vue      |  20 +-
 .../client/src/components/chat/chatCard.vue   |  61 ++-
 .../src/components/chat/chatMessages.vue      |  24 +-
 .../src/components/chat/copyAsTodoModal.vue   |  13 +-
 .../src/components/chat/reportFlagModal.vue   |  22 +-
 .../client/src/components/creatorIntro.vue    | 356 +++++++++++++++-
 website/client/src/components/emptyView.vue   |   3 +-
 .../src/components/group-plans/billing.vue    |  40 +-
 .../group-plans/createGroupModalPages.vue     |  42 +-
 .../group-plans/groupPlanOverviewModal.vue    |  92 ++--
 .../src/components/group-plans/index.vue      |  12 +-
 .../group-plans/taskInformation.vue           |  25 +-
 website/client/src/components/groups/chat.vue |  33 +-
 .../components/groups/communityGuidelines.vue |   3 +-
 .../components/groups/createPartyModal.vue    |  31 +-
 .../src/components/groups/discovery.vue       |  39 +-
 .../client/src/components/groups/group.vue    |  80 ++--
 .../src/components/groups/groupFormModal.vue  | 186 +++++---
 .../src/components/groups/groupGemsModal.vue  |   3 +-
 .../src/components/groups/groupPlan.vue       | 143 +++++--
 .../client/src/components/groups/index.vue    |  12 +-
 .../src/components/groups/inviteModal.vue     |  18 +-
 .../src/components/groups/membersModal.vue    | 141 +++---
 .../client/src/components/groups/myGuilds.vue |  35 +-
 .../groups/participantListModal.vue           |   9 +-
 .../src/components/groups/publicGuildItem.vue |  38 +-
 .../components/groups/questDetailsModal.vue   |  30 +-
 .../components/groups/questSidebarSection.vue |  93 ++--
 .../client/src/components/groups/sidebar.vue  |  30 +-
 .../src/components/groups/startQuestModal.vue |  24 +-
 .../client/src/components/groups/tavern.vue   | 290 ++++++++-----
 website/client/src/components/hall/heroes.vue | 180 +++++---
 website/client/src/components/hall/index.vue  |   6 +-
 .../client/src/components/hall/patrons.vue    |  21 +-
 .../client/src/components/header/index.vue    |  23 +-
 website/client/src/components/header/menu.vue | 171 +++++---
 .../components/header/notifications/base.vue  |   6 +-
 .../header/notifications/cardReceived.vue     |   3 +-
 .../notifications/groupTaskApproval.vue       |   6 +-
 .../header/notifications/guildInvitation.vue  |   6 +-
 .../header/notifications/newChatMessage.vue   |   3 +-
 .../header/notifications/newInboxMessage.vue  |   3 +-
 .../header/notifications/newMysteryItems.vue  |   3 +-
 .../header/notifications/newStuff.vue         |   6 +-
 .../header/notifications/partyInvitation.vue  |   6 +-
 .../header/notifications/questInvitation.vue  |   9 +-
 .../notifications/unallocatedStatsPoints.vue  |   3 +-
 .../header/notifications/verifyUsername.vue   |  11 +-
 .../header/notifications/worldBoss.vue        |  26 +-
 .../header/notificationsDropdown.vue          |  22 +-
 .../src/components/header/userDropdown.vue    |  51 ++-
 .../inventory/equipment/attributesGrid.vue    |  15 +-
 .../inventory/equipment/attributesPopover.vue |  18 +-
 .../inventory/equipment/equipGearModal.vue    |  36 +-
 .../components/inventory/equipment/index.vue  |  59 ++-
 .../inventory/items/cards-modal.vue           |  16 +-
 .../src/components/inventory/items/index.vue  | 108 +++--
 .../components/inventory/stable/foodItem.vue  |   9 +-
 .../inventory/stable/hatchedPetDialog.vue     |  15 +-
 .../inventory/stable/hatchingModal.vue        |  18 +-
 .../src/components/inventory/stable/index.vue | 111 +++--
 .../components/inventory/stable/mountItem.vue |   6 +-
 .../inventory/stable/mountRaisedModal.vue     |  12 +-
 .../client/src/components/memberDetails.vue   |  27 +-
 .../members/groupMemberSearchDropdown.vue     |   3 +-
 .../members/memberSearchDropdown.vue          |   3 +-
 .../components/members/removeMemberModal.vue  |  12 +-
 .../client/src/components/modifyInventory.vue | 403 ++++++++++++------
 .../client/src/components/notifications.vue   |  28 +-
 .../src/components/payments/amazonModal.vue   |  13 +-
 .../src/components/payments/buyGemsModal.vue  | 285 ++++++++-----
 .../payments/cancelModalConfirm.vue           |  16 +-
 .../src/components/payments/canceledModal.vue |  18 +-
 .../src/components/payments/sendGemsModal.vue |  67 ++-
 .../src/components/payments/successModal.vue  |  63 ++-
 .../src/components/selectMembersModal.vue     |  21 +-
 .../client/src/components/settings/api.vue    |  87 ++--
 .../src/components/settings/dataExport.vue    |  10 +-
 .../src/components/settings/deleteModal.vue   |  19 +-
 .../client/src/components/settings/index.vue  |  18 +-
 .../src/components/settings/notifications.vue |  62 ++-
 .../src/components/settings/promoCode.vue     |  25 +-
 .../src/components/settings/resetModal.vue    |   7 +-
 .../src/components/settings/restoreModal.vue  |  50 ++-
 .../client/src/components/settings/site.vue   | 289 ++++++++-----
 .../src/components/settings/subscription.vue  | 144 +++++--
 .../src/components/settings/usernameForm.vue  |  24 +-
 .../components/settings/verifyUsername.vue    |  14 +-
 .../src/components/shared/inventoryDrawer.vue |   9 +-
 .../src/components/shops/_currencyMixin.js    |   2 +-
 .../src/components/shops/balanceInfo.vue      |  11 +-
 .../client/src/components/shops/buyModal.vue  |  91 ++--
 .../components/shops/featuredItemsHeader.vue  |  27 +-
 website/client/src/components/shops/index.vue |  12 +-
 .../components/shops/market/categoryItem.vue  |  16 +-
 .../components/shops/market/categoryRow.vue   |   6 +-
 .../shops/market/equipmentSection.vue         |  31 +-
 .../src/components/shops/market/filter.vue    |  15 +-
 .../src/components/shops/market/index.vue     |  38 +-
 .../components/shops/market/keysToKennel.vue  |   6 +-
 .../src/components/shops/market/sellModal.vue |  36 +-
 .../components/shops/quests/buyQuestModal.vue |  41 +-
 .../src/components/shops/quests/index.vue     | 183 +++++---
 .../shops/quests/questDialogContent.vue       |   9 +-
 .../shops/quests/questDialogDrops.vue         |  34 +-
 .../src/components/shops/quests/questInfo.vue |  15 +-
 .../src/components/shops/seasonal/index.vue   |  86 ++--
 .../client/src/components/shops/shopItem.vue  |  50 ++-
 .../client/src/components/sidebarSection.vue  |  15 +-
 .../src/components/snackbars/notification.vue |  36 +-
 website/client/src/components/static/app.vue  |  19 +-
 .../components/static/clearBrowserData.vue    |  13 +-
 .../components/static/communityGuidelines.vue | 279 ++++++++++--
 .../client/src/components/static/contact.vue  |  49 ++-
 website/client/src/components/static/faq.vue  |  10 +-
 .../client/src/components/static/features.vue | 102 +++--
 .../src/components/static/groupPlans.vue      |  86 ++--
 .../client/src/components/static/header.vue   |  42 +-
 website/client/src/components/static/home.vue | 171 +++++---
 .../client/src/components/static/merch.vue    |  24 +-
 .../client/src/components/static/overview.vue |  13 +-
 .../client/src/components/static/pressKit.vue |  26 +-
 .../client/src/components/static/privacy.vue  | 172 +++++---
 .../src/components/static/staticWrapper.vue   |  12 +-
 .../client/src/components/static/terms.vue    | 265 ++++++++----
 .../src/components/tasks/approvalFooter.vue   |  18 +-
 .../src/components/tasks/approvalModal.vue    |   9 +-
 .../src/components/tasks/brokenTaskModal.vue  |  34 +-
 .../components/tasks/clearCompletedTodos.vue  |   3 +-
 .../client/src/components/tasks/column.vue    |  46 +-
 .../client/src/components/tasks/spells.vue    |  24 +-
 .../client/src/components/tasks/tagsPopup.vue |  12 +-
 website/client/src/components/tasks/task.vue  | 161 ++++---
 .../client/src/components/tasks/taskModal.vue | 295 ++++++++-----
 website/client/src/components/tasks/user.vue  |  69 ++-
 website/client/src/components/ui/checkbox.vue |   3 +-
 .../src/components/ui/customMenuDropdown.vue  |   3 +-
 website/client/src/components/ui/drawer.vue   |  12 +-
 .../src/components/ui/drawerHeaderTabs.vue    |   3 +-
 .../client/src/components/ui/drawerSlider.vue |  30 +-
 .../src/components/ui/filterDropdown.vue      |  42 +-
 website/client/src/components/ui/itemRows.vue |   9 +-
 .../src/components/ui/layoutSection.vue       |   7 +-
 .../client/src/components/ui/pageLayout.vue   |   3 +-
 website/client/src/components/ui/statsbar.vue |   7 +-
 .../client/src/components/ui/toggleSwitch.vue |  14 +-
 website/client/src/components/userLink.vue    |   3 +-
 .../src/components/userMenu/achievements.vue  |  21 +-
 .../client/src/components/userMenu/inbox.vue  |  70 ++-
 .../src/components/userMenu/profile.vue       | 173 +++++---
 .../src/components/userMenu/profileStats.vue  | 147 +++++--
 .../client/src/components/userMenu/stats.vue  | 298 ++++++++-----
 .../world-boss/worldBossInfoModal.vue         |  22 +-
 .../world-boss/worldBossRageModal.vue         |  35 +-
 .../src/components/yesterdailyModal.vue       |   9 +-
 180 files changed, 6536 insertions(+), 2894 deletions(-)

diff --git a/website/client/src/app.vue b/website/client/src/app.vue
index a1c9ed3dde..960e5137a2 100644
--- a/website/client/src/app.vue
+++ b/website/client/src/app.vue
@@ -9,31 +9,49 @@
           <svg
             id="melior"
             xmlns="http://www.w3.org/2000/svg"
-            viewbox="0 0 61.91 64"
-          ><path
-            d="M61.82,64H51.59c-3.08,0-3.72.37-3.67-1,0.07-1.87.67-1.94,2.63-2.49,1.63-.45,1-3.35-0.8-5.88-1.28-1.76-3.89-3.81-7.31-2.22a10.75,10.75,0,0,0-4.56,3.52c-1.68,2.33-1.59,4.54,1,4.54s5.39-1.5,6.23.64c1,2.64.33,2.89-.18,2.89H28.55v0C19.77,64,11,63.93,9,58.38c-2.82-7.68,7.43-10.64,7.75-15.46,0.13-2-1-2.85-2.34-2.85h-6V36.41H4.7v-11H8.36V29.1H12v3.65h3.65v5.08a5.76,5.76,0,0,1,3.07,5.05c-0.17,5.51-9.5,8.57-7.79,14.35,1.56,5.29,13.37,4,13,.74L23.7,56.1c-0.06-2.62-.47-6.12.08-9.22C24.64,42,27.67,37.78,33,37.74c1,0,1.78-.21,1.78-1s-1.55-.84-2.64-0.95a23.35,23.35,0,0,1-12.56-5c-2.43-2-6.21-8.3-3.74-7.83a21.74,21.74,0,0,0,4.06.4c1.24,0,4.44-.35,4.44-1.11,0-1-1.85-.42-4.57-0.68C16.48,21.22,9.6,19.83,6,9.35,4.71,5.43,3.83-1.91,6,.46c12.46,13.7,16.69,11.47,23.84,16.16,3.15,2.06,5.19,7,7,6.58,1.2-.27.46-1.37,0.64-3.93C37.66,17,38.75,16.48,36,15.79c-3.26-.81-6.52-4.38-4.39-4.33a11.89,11.89,0,0,0,5.53-.76c1.87-.81,6.43-4.28,9.18-2.89s5.08-.6,6.94-0.25c2.71,0.51,3.41,4.24,3.05,6.42-0.22,1.38-.22,1.38-2,1.28-3.61-.21-4.53,2.67-2,4.25,3.87,2.42,5.51,4.23,6.56,9.58,0.51,2.6.1,3.2-.76,2.72s-2.34-.72-0.29,4-1.29,10.28-2.39,10.9a1.3,1.3,0,0,0-.91,1.34c0,11.42,0,12.27,1.92,12.48,2.9,0.31,4.14-1.44,5.27.06C63.29,62.73,63.41,64,61.82,64ZM4.7,21.28H1v3.65H4.7V21.28Z"
-            transform="translate(-1.05)"
-            fill="#fff"
-          ></path></svg>
-        </div><div class="col-12 text-center">
-          <h2>{{ $t('tipTitle', {tipNumber: currentTipNumber}) }}</h2><p>{{ currentTip }}</p>
+            viewBox="0 0 61.91 64"
+          >
+            <path
+              d="M61.82,64H51.59c-3.08,0-3.72.37-3.67-1,0.07-1.87.67-1.94,2.63-2.49,1.63-.45,1-3.35-0.8-5.88-1.28-1.76-3.89-3.81-7.31-2.22a10.75,10.75,0,0,0-4.56,3.52c-1.68,2.33-1.59,4.54,1,4.54s5.39-1.5,6.23.64c1,2.64.33,2.89-.18,2.89H28.55v0C19.77,64,11,63.93,9,58.38c-2.82-7.68,7.43-10.64,7.75-15.46,0.13-2-1-2.85-2.34-2.85h-6V36.41H4.7v-11H8.36V29.1H12v3.65h3.65v5.08a5.76,5.76,0,0,1,3.07,5.05c-0.17,5.51-9.5,8.57-7.79,14.35,1.56,5.29,13.37,4,13,.74L23.7,56.1c-0.06-2.62-.47-6.12.08-9.22C24.64,42,27.67,37.78,33,37.74c1,0,1.78-.21,1.78-1s-1.55-.84-2.64-0.95a23.35,23.35,0,0,1-12.56-5c-2.43-2-6.21-8.3-3.74-7.83a21.74,21.74,0,0,0,4.06.4c1.24,0,4.44-.35,4.44-1.11,0-1-1.85-.42-4.57-0.68C16.48,21.22,9.6,19.83,6,9.35,4.71,5.43,3.83-1.91,6,.46c12.46,13.7,16.69,11.47,23.84,16.16,3.15,2.06,5.19,7,7,6.58,1.2-.27.46-1.37,0.64-3.93C37.66,17,38.75,16.48,36,15.79c-3.26-.81-6.52-4.38-4.39-4.33a11.89,11.89,0,0,0,5.53-.76c1.87-.81,6.43-4.28,9.18-2.89s5.08-.6,6.94-0.25c2.71,0.51,3.41,4.24,3.05,6.42-0.22,1.38-.22,1.38-2,1.28-3.61-.21-4.53,2.67-2,4.25,3.87,2.42,5.51,4.23,6.56,9.58,0.51,2.6.1,3.2-.76,2.72s-2.34-.72-0.29,4-1.29,10.28-2.39,10.9a1.3,1.3,0,0,0-.91,1.34c0,11.42,0,12.27,1.92,12.48,2.9,0.31,4.14-1.44,5.27.06C63.29,62.73,63.41,64,61.82,64ZM4.7,21.28H1v3.65H4.7V21.28Z"
+              transform="translate(-1.05)"
+              fill="#fff"
+            ></path>
+          </svg>
+        </div>
+        <div class="col-12 text-center">
+          <h2>{{ $t('tipTitle', {tipNumber: currentTipNumber}) }}</h2>
+          <p>{{ currentTip }}</p>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       id="app"
       :class="{'casting-spell': castingSpell}"
     >
-      <banned-account-modal /><amazon-payments-modal v-if="!isStaticPage" /><payments-success-modal /><sub-cancel-modal-confirm v-if="isUserLoaded" /><sub-canceled-modal v-if="isUserLoaded" /><snackbars /><router-view v-if="!isUserLoggedIn || isStaticPage" /><template v-else>
+      <banned-account-modal />
+      <amazon-payments-modal v-if="!isStaticPage" />
+      <payments-success-modal />
+      <sub-cancel-modal-confirm v-if="isUserLoaded" />
+      <sub-canceled-modal v-if="isUserLoaded" />
+      <snackbars />
+      <router-view v-if="!isUserLoggedIn || isStaticPage" />
+      <template v-else>
         <template v-if="isUserLoaded">
           <div
             v-show="showRestingBanner"
             ref="restingBanner"
             class="resting-banner"
           >
-            <span class="content"><span class="label d-inline d-sm-none">{{ $t('innCheckOutBannerShort') }}</span><span class="label d-none d-sm-inline">{{ $t('innCheckOutBanner') }}</span><span class="separator"> |</span><span
-              class="resume"
-              @click="resumeDamage()"
-            >{{ $t('resumeDamage') }}</span></span><div
+            <span class="content">
+              <span class="label d-inline d-sm-none">{{ $t('innCheckOutBannerShort') }}</span>
+              <span class="label d-none d-sm-inline">{{ $t('innCheckOutBanner') }}</span>
+              <span class="separator">|</span>
+              <span
+                class="resume"
+                @click="resumeDamage()"
+              >{{ $t('resumeDamage') }}</span>
+            </span>
+            <div
               class="closepadding"
               @click="hideBanner()"
             >
@@ -43,20 +61,28 @@
                 v-html="icons.close"
               ></span>
             </div>
-          </div><notifications-display /><app-menu /><div class="container-fluid">
-            <app-header /><buyModal
+          </div>
+          <notifications-display />
+          <app-menu />
+          <div class="container-fluid">
+            <app-header />
+            <buyModal
               :item="selectedItemToBuy || {}"
               :with-pin="true"
               :generic-purchase="genericPurchase(selectedItemToBuy)"
               @buyPressed="customPurchase($event)"
-            /><selectMembersModal
+            />
+            <selectMembersModal
               :item="selectedSpellToBuy || {}"
               :group="user.party"
               @memberSelected="memberSelected($event)"
-            /><div :class="{sticky: user.preferences.stickyHeader}">
+            />
+            <div :class="{sticky: user.preferences.stickyHeader}">
               <router-view />
             </div>
-          </div><app-footer /><audio
+          </div>
+          <app-footer />
+          <audio
             id="sound"
             ref="sound"
             autoplay="autoplay"
diff --git a/website/client/src/components/404.vue b/website/client/src/components/404.vue
index a97717a471..bc7929b33b 100644
--- a/website/client/src/components/404.vue
+++ b/website/client/src/components/404.vue
@@ -1,17 +1,23 @@
 <template>
   <div class="row">
     <div class="col-12 text-center">
-      <!-- @TODO i18n. How to setup the strings with the router-link inside?--><img
+      <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
+      <img
         class="not-found-img"
         src="~@/assets/images/404.png"
-      ><h1 class="not-found">
+      >
+      <h1 class="not-found">
         Sometimes even the bravest adventurer gets lost.
-      </h1><h2 class="not-found">
+      </h1>
+      <h2 class="not-found">
         Looks like this link is broken or the page may have moved, sorry!
-      </h2><h2 class="not-found">
-        Head back to the<router-link to="/">
+      </h2>
+      <h2 class="not-found">
+        Head back to the
+        <router-link to="/">
           Homepage
-        </router-link>or<router-link :to="contactUsLink">
+        </router-link>or
+        <router-link :to="contactUsLink">
           Contact Us
         </router-link>about the issue.
       </h2>
diff --git a/website/client/src/components/achievements/questInvitation.vue b/website/client/src/components/achievements/questInvitation.vue
index 219e3db649..20185d2a6a 100644
--- a/website/client/src/components/achievements/questInvitation.vue
+++ b/website/client/src/components/achievements/questInvitation.vue
@@ -8,52 +8,77 @@
   >
     <div class="modal-header">
       <h4>{{ $t('questInvitation') }}&nbsp;{{ quests[user.party.quest.key].text() }}</h4>
-    </div><div class="modal-body">
+    </div>
+    <div class="modal-body">
       <div class="pull-right-sm text-center">
         <div
           class="col-centered"
           :class="`quest_${quests[user.party.quest.key].key}`"
-        ></div><div ng-if="quests[user.party.quest.key].boss">
-          <h4>{{ quests[user.party.quest.key].boss.name() }}</h4><p><strong>{{ $t('bossHP') }} + ': '</strong>{{ quests[user.party.quest.key].boss.hp }}</p><p><strong>{{ $t('bossStrength') }} + ': '</strong>{{ quests[user.party.quest.key].boss.str }}</p>
-        </div><div ng-if="quests[user.party.quest.key].collect">
-          <p ng-repeat="(k,v) in quests[user.party.quest.key].collect">
-            <strong>{{ $t('collect') }} + ': '</strong>{{ quests[user.party.quest.key].collect[k].count }} {{ quests[user.party.quest.key].collect[k].text() }}
+        ></div>
+        <div ng-if="quests[user.party.quest.key].boss">
+          <h4>{{ quests[user.party.quest.key].boss.name() }}</h4>
+          <p>
+            <strong>{{ $t('bossHP') }} + ': '</strong>
+            {{ quests[user.party.quest.key].boss.hp }}
+          </p>
+          <p>
+            <strong>{{ $t('bossStrength') }} + ': '</strong>
+            {{ quests[user.party.quest.key].boss.str }}
           </p>
         </div>
-      </div><div ng-bind-html="quests[user.party.quest.key].notes()"></div><div
+        <div ng-if="quests[user.party.quest.key].collect">
+          <p ng-repeat="(k,v) in quests[user.party.quest.key].collect">
+            <strong>{{ $t('collect') }} + ': '</strong>
+            {{ quests[user.party.quest.key].collect[k].count }} {{ quests[user.party.quest.key].collect[k].text() }}
+          </p>
+        </div>
+      </div>
+      <div ng-bind-html="quests[user.party.quest.key].notes()"></div>
+      <div
         :key="user.party.quest.key"
         class="quest-rewards"
         header-participant="$t('rewardsAllParticipants')"
         header-quest-owner="$t('rewardsQuestOwner')"
-      ></div><hr><h5>{{ headerParticipant }}</h5><table class="table table-striped">
+      ></div>
+      <hr>
+      <h5>{{ headerParticipant }}</h5>
+      <table class="table table-striped">
         <tr ng-repeat="drop in _.reject(quest.drop.items, 'onlyOwner')">
           <td>{{ drop.text() }}</td>
-        </tr><tr ng-if="quest.drop.exp > 0">
+        </tr>
+        <tr ng-if="quest.drop.exp > 0">
           <td>{{ quest.drop.exp }}&nbsp;{{ $t('experience') }}</td>
-        </tr><tr ng-if="quest.drop.gp > 0">
+        </tr>
+        <tr ng-if="quest.drop.gp > 0">
           <td>{{ quest.drop.gp }}&nbsp;{{ $t('gold') }}</td>
-        </tr><tr ng-if="quest.drop.unlock()">
+        </tr>
+        <tr ng-if="quest.drop.unlock()">
           <td>{{ quest.drop.unlock() }}</td>
         </tr>
-      </table><div ng-if="getQuestOwnerRewards(quest).length > 0">
-        <h5>{{ headerQuestOwner }}</h5><table class="table table-striped">
+      </table>
+      <div ng-if="getQuestOwnerRewards(quest).length > 0">
+        <h5>{{ headerQuestOwner }}</h5>
+        <table class="table table-striped">
           <tr ng-repeat="drop in getQuestOwnerRewards(quest)">
             <td>{{ drop.text() }}</td>
           </tr>
         </table>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="btn btn-secondary"
         ng-click="questHold = true; $close()"
       >
         {{ $t('askLater') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-secondary"
         ng-click="questReject(); $close()"
       >
         {{ $t('reject') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-primary"
         ng-click="questAccept(); $close()"
       >
diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index 96146bf5f8..6780822961 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="row footer-row">
-    <buy-gems-modal v-if="user" /><!--modify-inventory(v-if="isUserLoaded")--><footer class="col-12 expanded">
+    <buy-gems-modal v-if="user" />
+    <!--modify-inventory(v-if="isUserLoaded")-->
+    <footer class="col-12 expanded">
       <div class="row">
         <div class="col-12 col-md-2">
           <h3>
@@ -8,134 +10,171 @@
               href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
               target="_blank"
             >{{ $t('mobileIOS') }}</a>
-          </h3><h3>
+          </h3>
+          <h3>
             <a
               href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
               target="_blank"
             >{{ $t('mobileAndroid') }}</a>
           </h3>
-        </div><div class="col-12 col-md-2">
-          <h3>{{ $t('footerCompany') }}</h3><ul>
+        </div>
+        <div class="col-12 col-md-2">
+          <h3>{{ $t('footerCompany') }}</h3>
+          <ul>
             <li>
               <router-link to="/static/features">
                 {{ $t('companyAbout') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <a
                 href="https://habitica.wordpress.com/"
                 target="_blank"
               >{{ $t('companyBlog') }}</a>
-            </li><li>
+            </li>
+            <li>
               <a
                 href="http://blog.habitrpg.com/"
                 target="_blank"
               >{{ $t('tumblr') }}</a>
-            </li><li>
+            </li>
+            <li>
               <router-link to="/static/faq">
                 {{ $t('FAQ') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <a
                 href="http://habitica.fandom.com/wiki/Whats_New"
                 target="_blank"
               >{{ $t('oldNews') }}</a>
-            </li><li>
+            </li>
+            <li>
               <router-link to="/static/merch">
                 {{ $t('merch') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <router-link to="/static/press-kit">
                 {{ $t('presskit') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <router-link to="/static/contact">
                 {{ $t('contactUs') }}
               </router-link>
             </li>
           </ul>
-        </div><div class="col-12 col-md-2">
-          <h3>{{ $t('footerCommunity') }}</h3><ul>
+        </div>
+        <div class="col-12 col-md-2">
+          <h3>{{ $t('footerCommunity') }}</h3>
+          <ul>
             <li>
               <a
                 target="_blanck"
                 href="/static/community-guidelines"
               >{{ $t('communityGuidelines') }}</a>
-            </li><li>
+            </li>
+            <li>
               <router-link to="/hall/contributors">
                 {{ $t('hall') }}
               </router-link>
-            </li><li>
-              <router-link to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac">
+            </li>
+            <li>
+              <router-link
+                to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac"
+              >
                 {{ $t('reportBug') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <a
                 href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents"
                 target="_blank"
               >{{ $t('requestFeature') }}</a>
-            </li><li v-html="$t('communityExtensions')"></li><li v-html="$t('communityForum')"></li><li>
+            </li>
+            <li v-html="$t('communityExtensions')"></li>
+            <li v-html="$t('communityForum')"></li>
+            <li>
               <a
                 href="https://www.facebook.com/Habitica"
                 target="_blank"
               >{{ $t('communityFacebook') }}</a>
-            </li><li>
+            </li>
+            <li>
               <a
                 href="https://www.instagram.com/habitica"
                 target="_blank"
               >{{ $t('communityInstagram') }}</a>
             </li>
           </ul>
-        </div><div class="col-12 col-md-6">
+        </div>
+        <div class="col-12 col-md-6">
           <div class="row">
             <div class="col-6">
-              <h3>{{ $t('footerDevs') }}</h3><ul>
+              <h3>{{ $t('footerDevs') }}</h3>
+              <ul>
                 <li>
                   <a
                     href="/apidoc"
                     target="_blank"
                   >{{ $t('APIv3') }}</a>
-                </li><li>
+                </li>
+                <li>
                   <a
                     :href="getDataDisplayToolUrl"
                     target="_blank"
                   >{{ $t('dataDisplayTool') }}</a>
-                </li><li>
+                </li>
+                <li>
                   <a
                     href="http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
                     target="_blank"
                   >{{ $t('guidanceForBlacksmiths') }}</a>
                 </li>
               </ul>
-            </div><div class="col-6 social">
-              <h3>{{ $t('footerSocial') }}</h3><div class="icons">
+            </div>
+            <div class="col-6 social">
+              <h3>{{ $t('footerSocial') }}</h3>
+              <div class="icons">
                 <a
                   class="social-circle"
                   href="https://twitter.com/habitica"
                   target="_blank"
-                ><div
-                  class="social-icon svg-icon"
-                  v-html="icons.twitter"
-                ></div></a><a
+                >
+                  <div
+                    class="social-icon svg-icon"
+                    v-html="icons.twitter"
+                  ></div>
+                </a>
+                <a
                   class="social-circle"
                   href="https://www.instagram.com/habitica/"
                   target="_blank"
-                ><div
-                  class="social-icon svg-icon instagram"
-                  v-html="icons.instagram"
-                ></div></a><a
+                >
+                  <div
+                    class="social-icon svg-icon instagram"
+                    v-html="icons.instagram"
+                  ></div>
+                </a>
+                <a
                   class="social-circle"
                   href="https://www.facebook.com/Habitica"
                   target="_blank"
-                ><div
-                  class="social-icon facebook svg-icon"
-                  v-html="icons.facebook"
-                ></div></a>
+                >
+                  <div
+                    class="social-icon facebook svg-icon"
+                    v-html="icons.facebook"
+                  ></div>
+                </a>
               </div>
             </div>
-          </div><div class="row">
+          </div>
+          <div class="row">
             <div class="col-12 col-md-8">
               {{ $t('donateText3') }}
-            </div><div class="col-12 col-md-4">
+            </div>
+            <div class="col-12 col-md-4">
               <button
                 v-if="user"
                 class="btn btn-contribute btn-flat"
@@ -144,31 +183,39 @@
                 <div
                   class="svg-icon heart"
                   v-html="icons.heart"
-                ></div><div class="text">
+                ></div>
+                <div class="text">
                   {{ $t('companyDonate') }}
                 </div>
-              </button><div
+              </button>
+              <div
                 v-else
                 class="btn btn-contribute btn-flat"
               >
                 <a
                   href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
                   target="_blank"
-                ><div
-                  class="svg-icon heart"
-                  v-html="icons.heart"
-                ></div><div class="text">{{ $t('companyContribute') }}</div></a>
+                >
+                  <div
+                    class="svg-icon heart"
+                    v-html="icons.heart"
+                  ></div>
+                  <div class="text">{{ $t('companyContribute') }}</div>
+                </a>
               </div>
             </div>
           </div>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-12">
           <hr>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-12 col-md-5">
-          © 2019 Habitica. All rights reserved.<div
+          © 2019 Habitica. All rights reserved.
+          <div
             v-if="!IS_PRODUCTION && isUserLoaded"
             class="debug float-left"
           >
@@ -177,75 +224,98 @@
               @click="debugMenuShown = !debugMenuShown"
             >
               Toggle Debug Menu
-            </button><div
+            </button>
+            <div
               v-if="debugMenuShown"
               class="debug-group"
             >
               <a
                 class="btn btn-secondary"
                 @click="setHealthLow()"
-              >Health = 1</a><a
+              >Health = 1</a>
+              <a
                 class="btn btn-secondary"
                 @click="addMissedDay(1)"
-              >+1 Missed Day</a><a
+              >+1 Missed Day</a>
+              <a
                 class="btn btn-secondary"
                 @click="addMissedDay(2)"
-              >+2 Missed Days</a><a
+              >+2 Missed Days</a>
+              <a
                 class="btn btn-secondary"
                 @click="addMissedDay(8)"
-              >+8 Missed Days</a><a
+              >+8 Missed Days</a>
+              <a
                 class="btn btn-secondary"
                 @click="addMissedDay(32)"
-              >+32 Missed Days</a><a
+              >+32 Missed Days</a>
+              <a
                 class="btn btn-secondary"
                 @click="addTenGems()"
-              >+10 Gems</a><a
+              >+10 Gems</a>
+              <a
                 class="btn btn-secondary"
                 @click="addHourglass()"
-              >+1 Mystic Hourglass</a><a
+              >+1 Mystic Hourglass</a>
+              <a
                 class="btn btn-secondary"
                 @click="addGold()"
-              >+500GP</a><a
+              >+500GP</a>
+              <a
                 class="btn btn-secondary"
                 @click="plusTenHealth()"
-              >+ 10HP</a><a
+              >+ 10HP</a>
+              <a
                 class="btn btn-secondary"
                 @click="addMana()"
-              >+MP</a><a
+              >+MP</a>
+              <a
                 class="btn btn-secondary"
                 @click="addLevelsAndGold()"
-              >+Exp +GP +MP</a><a
+              >+Exp +GP +MP</a>
+              <a
                 class="btn btn-secondary"
                 @click="addExp()"
-              >+Exp</a><a
+              >+Exp</a>
+              <a
                 class="btn btn-secondary"
                 @click="addOneLevel()"
-              >+1 Level</a><a
+              >+1 Level</a>
+              <a
                 class="btn btn-secondary"
                 tooltip="+1000 to boss quests. 300 items to collection quests"
                 @click="addQuestProgress()"
-              >Quest Progress Up</a><a
+              >Quest Progress Up</a>
+              <a
                 class="btn btn-secondary"
                 @click="makeAdmin()"
-              >Make Admin</a><a
+              >Make Admin</a>
+              <a
                 class="btn btn-secondary"
                 @click="openModifyInventoryModal()"
               >Modify Inventory</a>
             </div>
           </div>
-        </div><div class="col-12 col-md-2 text-center">
+        </div>
+        <div class="col-12 col-md-2 text-center">
           <div
             class="logo svg-icon"
             v-html="icons.gryphon"
           ></div>
-        </div><div class="col-12 col-md-5 text-right">
-          <span class="ml-4"><a
-            target="_blanck"
-            href="/static/privacy"
-          >{{ $t('privacy') }}</a></span><span class="ml-4"><a
-            target="_blanck"
-            href="/static/terms"
-          >{{ $t('terms') }}</a></span>
+        </div>
+        <div class="col-12 col-md-5 text-right">
+          <span class="ml-4">
+            <a
+              target="_blanck"
+              href="/static/privacy"
+            >{{ $t('privacy') }}</a>
+          </span>
+          <span class="ml-4">
+            <a
+              target="_blanck"
+              href="/static/terms"
+            >{{ $t('terms') }}</a>
+          </span>
         </div>
       </div>
     </footer>
diff --git a/website/client/src/components/auth/authForm.vue b/website/client/src/components/auth/authForm.vue
index 4489b8fe64..effdc5e5c9 100644
--- a/website/client/src/components/auth/authForm.vue
+++ b/website/client/src/components/auth/authForm.vue
@@ -9,9 +9,11 @@
           <div
             class="svg-icon social-icon"
             v-html="icons.facebookIcon"
-          ></div><span>{{ registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'}) }}</span>
+          ></div>
+          <span>{{ registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'}) }}</span>
         </div>
-      </div><div class="col-12 col-md-6">
+      </div>
+      <div class="col-12 col-md-6">
         <div
           class="btn btn-secondary social-button"
           @click="socialAuth('google')"
@@ -19,17 +21,20 @@
           <div
             class="svg-icon social-icon"
             v-html="icons.googleIcon"
-          ></div><span>{{ registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'}) }}</span>
+          ></div>
+          <span>{{ registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'}) }}</span>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="registering"
       class="form-group"
     >
       <label
         v-once
         for="usernameInput"
-      >{{ $t('username') }}</label><input
+      >{{ $t('username') }}</label>
+      <input
         id="usernameInput"
         v-model="username"
         class="form-control"
@@ -37,28 +42,32 @@
         :placeholder="$t('usernamePlaceholder')"
         :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
       >
-    </div><div
+    </div>
+    <div
       v-if="!registering"
       class="form-group"
     >
       <label
         v-once
         for="usernameInput"
-      >{{ $t('emailOrUsername') }}</label><input
+      >{{ $t('emailOrUsername') }}</label>
+      <input
         id="usernameInput"
         v-model="username"
         class="form-control"
         type="text"
         :placeholder="$t('emailOrUsername')"
       >
-    </div><div
+    </div>
+    <div
       v-if="registering"
       class="form-group"
     >
       <label
         v-once
         for="emailInput"
-      >{{ $t('email') }}</label><input
+      >{{ $t('email') }}</label>
+      <input
         id="emailInput"
         v-model="email"
         class="form-control"
@@ -66,42 +75,49 @@
         :placeholder="$t('emailPlaceholder')"
         :class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
       >
-    </div><div class="form-group">
+    </div>
+    <div class="form-group">
       <label
         v-once
         for="passwordInput"
-      >{{ $t('password') }}</label><a
+      >{{ $t('password') }}</label>
+      <a
         v-if="!registering"
         v-once
         class="float-right forgot-password"
         @click="forgotPassword = true"
-      >{{ $t('forgotPassword') }}</a><input
+      >{{ $t('forgotPassword') }}</a>
+      <input
         id="passwordInput"
         v-model="password"
         class="form-control"
         type="password"
         :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
       >
-    </div><div
+    </div>
+    <div
       v-if="registering"
       class="form-group"
     >
       <label
         v-once
         for="confirmPasswordInput"
-      >{{ $t('confirmPassword') }}</label><input
+      >{{ $t('confirmPassword') }}</label>
+      <input
         id="confirmPasswordInput"
         v-model="passwordConfirm"
         class="form-control"
         type="password"
         :placeholder="$t('confirmPasswordPlaceholder')"
         :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
-      ><small
+      >
+      <small
         v-once
         class="form-text"
         v-html="$t('termsAndAgreement')"
       ></small>
-    </div><div class="text-center">
+    </div>
+    <div class="text-center">
       <div
         v-if="registering"
         v-once
@@ -109,7 +125,8 @@
         @click="register()"
       >
         {{ $t('joinHabitica') }}
-      </div><div
+      </div>
+      <div
         v-if="!registering"
         v-once
         class="btn btn-info"
diff --git a/website/client/src/components/auth/registerLoginReset.vue b/website/client/src/components/auth/registerLoginReset.vue
index dd4c98ef2d..09ae91752b 100644
--- a/website/client/src/components/auth/registerLoginReset.vue
+++ b/website/client/src/components/auth/registerLoginReset.vue
@@ -2,20 +2,25 @@
   <div class="form-wrapper">
     <div id="top-background">
       <div class="seamless_stars_varied_opacity_repeat"></div>
-    </div><form
+    </div>
+    <form
       v-if="!forgotPassword && !resetPasswordSetNewOne"
       id="login-form"
       @submit.prevent="handleSubmit"
       @keyup.enter="handleSubmit"
     >
       <div class="text-center">
-        <div><div class="svg-icon gryphon"></div></div><div>
+        <div>
+          <div class="svg-icon gryphon"></div>
+        </div>
+        <div>
           <div
             class="svg-icon habitica-logo"
             v-html="icons.habiticaIcon"
           ></div>
         </div>
-      </div><div class="form-group row text-center">
+      </div>
+      <div class="form-group row text-center">
         <div class="col-12 col-md-6">
           <div
             class="btn btn-secondary social-button"
@@ -24,11 +29,15 @@
             <div
               class="svg-icon social-icon"
               v-html="icons.facebookIcon"
-            ></div><div class="text">
+            ></div>
+            <div
+              class="text"
+            >
               {{ registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'}) }}
             </div>
           </div>
-        </div><div class="col-12 col-md-6">
+        </div>
+        <div class="col-12 col-md-6">
           <div
             class="btn btn-secondary social-button"
             @click="socialAuth('google')"
@@ -36,53 +45,63 @@
             <div
               class="svg-icon social-icon"
               v-html="icons.googleIcon"
-            ></div><div class="text">
+            ></div>
+            <div
+              class="text"
+            >
               {{ registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'}) }}
             </div>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="registering"
         class="form-group"
       >
         <label
           v-once
           for="usernameInput"
-        >{{ $t('username') }}</label><input
+        >{{ $t('username') }}</label>
+        <input
           id="usernameInput"
           v-model="username"
           class="form-control"
           type="text"
           :placeholder="$t('usernamePlaceholder')"
           :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
-        ><div
+        >
+        <div
           v-for="issue in usernameIssues"
           class="input-error"
         >
           {{ issue }}
         </div>
-      </div><div
+      </div>
+      <div
         v-if="!registering"
         class="form-group"
       >
         <label
           v-once
           for="usernameInput"
-        >{{ $t('emailOrUsername') }}</label><input
+        >{{ $t('emailOrUsername') }}</label>
+        <input
           id="usernameInput"
           v-model="username"
           class="form-control"
           type="text"
           :placeholder="$t('emailOrUsername')"
         >
-      </div><div
+      </div>
+      <div
         v-if="registering"
         class="form-group"
       >
         <label
           v-once
           for="emailInput"
-        >{{ $t('email') }}</label><input
+        >{{ $t('email') }}</label>
+        <input
           id="emailInput"
           v-model="email"
           class="form-control"
@@ -90,42 +109,49 @@
           :placeholder="$t('emailPlaceholder')"
           :class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
         >
-      </div><div class="form-group">
+      </div>
+      <div class="form-group">
         <label
           v-once
           for="passwordInput"
-        >{{ $t('password') }}</label><a
+        >{{ $t('password') }}</label>
+        <a
           v-if="!registering"
           v-once
           class="float-right forgot-password"
           @click="forgotPassword = true"
-        >{{ $t('forgotPassword') }}</a><input
+        >{{ $t('forgotPassword') }}</a>
+        <input
           id="passwordInput"
           v-model="password"
           class="form-control"
           type="password"
           :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
         >
-      </div><div
+      </div>
+      <div
         v-if="registering"
         class="form-group"
       >
         <label
           v-once
           for="confirmPasswordInput"
-        >{{ $t('confirmPassword') }}</label><input
+        >{{ $t('confirmPassword') }}</label>
+        <input
           id="confirmPasswordInput"
           v-model="passwordConfirm"
           class="form-control"
           type="password"
           :placeholder="$t('confirmPasswordPlaceholder')"
           :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
-        ><small
+        >
+        <small
           v-once
           class="form-text"
           v-html="$t('termsAndAgreement')"
         ></small>
-      </div><div class="text-center">
+      </div>
+      <div class="text-center">
         <div
           v-if="registering"
           v-once
@@ -133,14 +159,16 @@
           @click="register()"
         >
           {{ $t('joinHabitica') }}
-        </div><div
+        </div>
+        <div
           v-if="!registering"
           v-once
           class="btn btn-info"
           @click="login()"
         >
           {{ $t('login') }}
-        </div><div class="toggle-links">
+        </div>
+        <div class="toggle-links">
           <router-link
             v-if="registering"
             :to="{name: 'login'}"
@@ -151,7 +179,8 @@
               class="toggle-link"
               v-html="$t('alreadyHaveAccountLogin')"
             ></a>
-          </router-link><router-link
+          </router-link>
+          <router-link
             v-if="!registering"
             :to="{name: 'register'}"
             exact="exact"
@@ -164,37 +193,46 @@
           </router-link>
         </div>
       </div>
-    </form><form
+    </form>
+    <form
       v-if="forgotPassword"
       id="forgot-form"
       @submit.prevent="handleSubmit"
       @keyup.enter="handleSubmit"
     >
       <div class="text-center">
-        <div><div class="svg-icon gryphon"></div></div><div>
+        <div>
+          <div class="svg-icon gryphon"></div>
+        </div>
+        <div>
           <div
             class="svg-icon habitica-logo"
             v-html="icons.habiticaIcon"
           ></div>
-        </div><div class="header">
+        </div>
+        <div class="header">
           <h2 v-once>
             {{ $t('emailNewPass') }}
-          </h2><p v-once>
+          </h2>
+          <p v-once>
             {{ $t('forgotPasswordSteps') }}
           </p>
         </div>
-      </div><div class="form-group row text-center">
+      </div>
+      <div class="form-group row text-center">
         <label
           v-once
           for="usernameInput"
-        >{{ $t('email') }}</label><input
+        >{{ $t('email') }}</label>
+        <input
           id="usernameInput"
           v-model="username"
           class="form-control"
           type="text"
           :placeholder="$t('emailPlaceholder')"
         >
-      </div><div class="text-center">
+      </div>
+      <div class="text-center">
         <div
           v-once
           class="btn btn-info"
@@ -203,44 +241,54 @@
           {{ $t('sendLink') }}
         </div>
       </div>
-    </form><form
+    </form>
+    <form
       v-if="resetPasswordSetNewOne"
       id="reset-password-set-new-one-form"
       @submit.prevent="handleSubmit"
       @keyup.enter="handleSubmit"
     >
       <div class="text-center">
-        <div><div class="svg-icon gryphon"></div></div><div>
+        <div>
+          <div class="svg-icon gryphon"></div>
+        </div>
+        <div>
           <div
             class="svg-icon habitica-logo"
             v-html="icons.habiticaIcon"
           ></div>
-        </div><div class="header">
+        </div>
+        <div class="header">
           <h2>{{ $t('passwordResetPage') }}</h2>
         </div>
-      </div><div class="form-group">
+      </div>
+      <div class="form-group">
         <label
           v-once
           for="passwordInput"
-        >{{ $t('newPass') }}</label><input
+        >{{ $t('newPass') }}</label>
+        <input
           id="passwordInput"
           v-model="password"
           class="form-control"
           type="password"
           :placeholder="$t('password')"
         >
-      </div><div class="form-group">
+      </div>
+      <div class="form-group">
         <label
           v-once
           for="confirmPasswordInput"
-        >{{ $t('confirmPass') }}</label><input
+        >{{ $t('confirmPass') }}</label>
+        <input
           id="confirmPasswordInput"
           v-model="passwordConfirm"
           class="form-control"
           type="password"
           :placeholder="$t('confirmPasswordPlaceholder')"
         >
-      </div><div class="text-center">
+      </div>
+      <div class="text-center">
         <div
           class="btn btn-info"
           :enabled="!resetPasswordSetNewOneData.hasError"
@@ -249,12 +297,14 @@
           {{ $t('setNewPass') }}
         </div>
       </div>
-    </form><div
+    </form>
+    <div
       id="bottom-wrap"
       :class="`bottom-wrap-${!registering ? 'login' : 'register'}`"
     >
       <div id="bottom-background">
-        <div class="seamless_mountains_demo_repeat"></div><div class="midground_foreground_extended2"></div>
+        <div class="seamless_mountains_demo_repeat"></div>
+        <div class="midground_foreground_extended2"></div>
       </div>
     </div>
   </div>
diff --git a/website/client/src/components/avatar.vue b/website/client/src/components/avatar.vue
index 69118b25d5..9de7562ac4 100644
--- a/website/client/src/components/avatar.vue
+++ b/website/client/src/components/avatar.vue
@@ -10,39 +10,73 @@
       :style="{margin: spritesMargin}"
     >
       <template v-if="!avatarOnly">
-        <!-- Mount Body--><span
+        <!-- Mount Body-->
+        <span
           v-if="member.items.currentMount"
           :class="'Mount_Body_' + member.items.currentMount"
         ></span>
-      </template><!-- Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc--><template v-for="(klass, item) in visualBuffs">
+      </template>
+      <!-- Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc-->
+      <template v-for="(klass, item) in visualBuffs">
         <span
           v-if="member.stats.buffs[item] && showVisualBuffs"
           :class="klass"
         ></span>
-      </template><!-- Show flower ALL THE TIME!!!--><!-- See https://github.com/HabitRPG/habitica/issues/7133--><span :class="'hair_flower_' + member.preferences.hair.flower"></span><!-- Show avatar only if not currently affected by visual buff--><template v-if="showAvatar()">
-        <span :class="['chair_' + member.preferences.chair, specialMountClass]"></span><span :class="[getGearClass('back'), specialMountClass]"></span><span :class="[skinClass, specialMountClass]"></span><span :class="[member.preferences.size + '_shirt_' + member.preferences.shirt, specialMountClass]"></span><span :class="['head_0', specialMountClass]"></span><span :class="[member.preferences.size + '_' + getGearClass('armor'), specialMountClass]"></span><span :class="[getGearClass('back_collar'), specialMountClass]"></span><template v-for="type in ['bangs', 'base', 'mustache', 'beard']">
-          <!-- eslint-disable-next-line max-len--><span :class="['hair_' + type + '_' + member.preferences.hair[type] + '_' + member.preferences.hair.color, specialMountClass]"></span>
-        </template><span :class="[getGearClass('body'), specialMountClass]"></span><span :class="[getGearClass('eyewear'), specialMountClass]"></span><span :class="[getGearClass('head'), specialMountClass]"></span><span :class="[getGearClass('headAccessory'), specialMountClass]"></span><span :class="['hair_flower_' + member.preferences.hair.flower, specialMountClass]"></span><span
+      </template>
+      <!-- Show flower ALL THE TIME!!!-->
+      <!-- See https://github.com/HabitRPG/habitica/issues/7133-->
+      <span :class="'hair_flower_' + member.preferences.hair.flower"></span>
+      <!-- Show avatar only if not currently affected by visual buff-->
+      <template v-if="showAvatar()">
+        <span :class="['chair_' + member.preferences.chair, specialMountClass]"></span>
+        <span :class="[getGearClass('back'), specialMountClass]"></span>
+        <span :class="[skinClass, specialMountClass]"></span>
+        <span
+          :class="[member.preferences.size + '_shirt_' + member.preferences.shirt, specialMountClass]"
+        ></span>
+        <span :class="['head_0', specialMountClass]"></span>
+        <span :class="[member.preferences.size + '_' + getGearClass('armor'), specialMountClass]"></span>
+        <span :class="[getGearClass('back_collar'), specialMountClass]"></span>
+        <template v-for="type in ['bangs', 'base', 'mustache', 'beard']">
+          <!-- eslint-disable-next-line max-len-->
+          <span
+            :class="['hair_' + type + '_' + member.preferences.hair[type] + '_' + member.preferences.hair.color, specialMountClass]"
+          ></span>
+        </template>
+        <span :class="[getGearClass('body'), specialMountClass]"></span>
+        <span :class="[getGearClass('eyewear'), specialMountClass]"></span>
+        <span :class="[getGearClass('head'), specialMountClass]"></span>
+        <span :class="[getGearClass('headAccessory'), specialMountClass]"></span>
+        <span :class="['hair_flower_' + member.preferences.hair.flower, specialMountClass]"></span>
+        <span
           v-if="!hideGear('shield')"
           :class="[getGearClass('shield'), specialMountClass]"
-        ></span><span
+        ></span>
+        <span
           v-if="!hideGear('weapon')"
           :class="[getGearClass('weapon'), specialMountClass]"
         ></span>
-      </template><!-- Resting--><span
+      </template>
+      <!-- Resting-->
+      <span
         v-if="member.preferences.sleep"
         class="zzz"
-      ></span><template v-if="!avatarOnly">
-        <!-- Mount Head--><span
+      ></span>
+      <template v-if="!avatarOnly">
+        <!-- Mount Head-->
+        <span
           v-if="member.items.currentMount"
           :class="'Mount_Head_' + member.items.currentMount"
-        ></span><!-- Pet--><span
+        ></span>
+        <!-- Pet-->
+        <span
           v-if="member.items.currentPet"
           class="current-pet"
           :class="'Pet-' + member.items.currentPet"
         ></span>
       </template>
-    </div><class-badge
+    </div>
+    <class-badge
       v-if="hasClass && !hideClassBadge"
       class="under-avatar"
       :member-class="member.stats.class"
diff --git a/website/client/src/components/avatarModal/body-settings.vue b/website/client/src/components/avatarModal/body-settings.vue
index 6af371d544..acb012feed 100644
--- a/website/client/src/components/avatarModal/body-settings.vue
+++ b/website/client/src/components/avatarModal/body-settings.vue
@@ -8,16 +8,19 @@
       :items="items"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><div v-if="activeSubPage === 'size'">
+    />
+    <div v-if="activeSubPage === 'size'">
       <customize-options
         :items="sizes"
         :current-value="user.preferences.size"
       />
-    </div><div v-if="activeSubPage === 'shirt'">
+    </div>
+    <div v-if="activeSubPage === 'shirt'">
       <customize-options
         :items="freeShirts"
         :current-value="user.preferences.shirt"
-      /><customize-options
+      />
+      <customize-options
         v-if="editing"
         :items="specialShirts"
         :current-value="user.preferences.shirt"
diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue
index 9b3f90b51c..86a6263298 100644
--- a/website/client/src/components/avatarModal/customize-options.vue
+++ b/website/client/src/components/avatarModal/customize-options.vue
@@ -22,32 +22,39 @@
             <div class="redline"></div>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="option.gemLocked"
         class="gem-lock"
       >
         <div
           class="svg-icon gem"
           v-html="icons.gem"
-        ></div><span>{{ option.gem }}</span>
-      </div><div
+        ></div>
+        <span>{{ option.gem }}</span>
+      </div>
+      <div
         v-if="option.goldLocked"
         class="gold-lock"
       >
         <div
           class="svg-icon gold"
           v-html="icons.gold"
-        ></div><span>{{ option.gold }}</span>
+        ></div>
+        <span>{{ option.gold }}</span>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="fullSet"
       class="purchase-set"
       @click="unlock()"
     >
-      <span class="label">{{ $t('purchaseAll') }}</span><div
+      <span class="label">{{ $t('purchaseAll') }}</span>
+      <div
         class="svg-icon gem"
         v-html="icons.gem"
-      ></div><span class="price">5</span>
+      ></div>
+      <span class="price">5</span>
     </div>
   </div>
 </template>
diff --git a/website/client/src/components/avatarModal/extra-settings.vue b/website/client/src/components/avatarModal/extra-settings.vue
index 93e29640a0..e7587d13ab 100644
--- a/website/client/src/components/avatarModal/extra-settings.vue
+++ b/website/client/src/components/avatarModal/extra-settings.vue
@@ -8,12 +8,14 @@
       :items="extraSubMenuItems"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><div
+    />
+    <div
       v-if="activeSubPage === 'glasses'"
       id="hair-color"
     >
       <customize-options :items="eyewear" />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'ears'"
       id="animal-ears"
     >
@@ -22,7 +24,8 @@
         :full-set="!animalItemsOwned('headAccessory')"
         @unlock="unlock(animalItemsUnlockString('headAccessory'))"
       />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'tails'"
       id="animal-tails"
     >
@@ -31,17 +34,20 @@
         :full-set="!animalItemsOwned('back')"
         @unlock="unlock(animalItemsUnlockString('back'))"
       />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'headband'"
       id="headband"
     >
       <customize-options :items="headbands" />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'wheelchair'"
       id="wheelchairs"
     >
       <customize-options :items="chairs" />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'flower'"
       id="flowers"
     >
diff --git a/website/client/src/components/avatarModal/hair-settings.vue b/website/client/src/components/avatarModal/hair-settings.vue
index d19957f891..9ff721946c 100644
--- a/website/client/src/components/avatarModal/hair-settings.vue
+++ b/website/client/src/components/avatarModal/hair-settings.vue
@@ -8,14 +8,16 @@
       :items="hairSubMenuItems"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><div
+    />
+    <div
       v-if="activeSubPage === 'color'"
       id="hair-color"
     >
       <customize-options
         :items="freeHairColors"
         :current-value="user.preferences.hair.color"
-      /><div
+      />
+      <div
         v-for="set in seasonalHairColors"
         v-if="editing && set.key !== 'undefined'"
       >
@@ -26,7 +28,8 @@
           @unlock="unlock(`hair.color.${set.keys.join(',hair.color.')}`)"
         />
       </div>
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'style'"
       id="style"
     >
@@ -37,7 +40,8 @@
           @unlock="set.unlock()"
         />
       </div>
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'bangs'"
       id="bangs"
     >
@@ -45,14 +49,16 @@
         :items="hairBangs"
         :current-value="user.preferences.hair.bangs"
       />
-    </div><div
+    </div>
+    <div
       v-if="activeSubPage === 'facialhair'"
       id="facialhair"
     >
       <customize-options
         v-if="editing"
         :items="mustacheList"
-      /><customize-options
+      />
+      <customize-options
         v-if="editing"
         :items="beardList"
         :full-set="isPurchaseAllNeeded('hair', ['baseHair5', 'baseHair6'], ['mustache', 'beard'])"
diff --git a/website/client/src/components/avatarModal/skin-settings.vue b/website/client/src/components/avatarModal/skin-settings.vue
index d6cb4e3bb2..be2a1f2386 100644
--- a/website/client/src/components/avatarModal/skin-settings.vue
+++ b/website/client/src/components/avatarModal/skin-settings.vue
@@ -8,10 +8,12 @@
       :items="skinSubMenuItems"
       :active-sub-page="activeSubPage"
       @changeSubPage="changeSubPage($event)"
-    /><customize-options
+    />
+    <customize-options
       :items="freeSkins"
       :current-value="user.preferences.skin"
-    /><div
+    />
+    <div
       v-for="set in seasonalSkins"
       v-if="editing && set.key !== 'undefined'"
     >
diff --git a/website/client/src/components/bannedAccountModal.vue b/website/client/src/components/bannedAccountModal.vue
index dea3f5be53..804d7abbd6 100644
--- a/website/client/src/components/bannedAccountModal.vue
+++ b/website/client/src/components/bannedAccountModal.vue
@@ -11,7 +11,8 @@
           <p v-markdown="bannedMessage"></p>
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-primary"
diff --git a/website/client/src/components/categories/categoryTags.vue b/website/client/src/components/categories/categoryTags.vue
index b2fcd42fd3..4925ee5f18 100644
--- a/website/client/src/components/categories/categoryTags.vue
+++ b/website/client/src/components/categories/categoryTags.vue
@@ -3,14 +3,17 @@
     <span
       v-if="owner"
       class="category-label category-label-blue"
-    >{{ $t('owned') }}</span><span
+    >{{ $t('owned') }}</span>
+    <span
       v-if="member"
       class="category-label category-label-green"
-    >{{ $t('joined') }}</span><span
+    >{{ $t('joined') }}</span>
+    <span
       v-for="category in categories"
       class="category-label"
       :class="{'category-label-purple':isOfficial(category)}"
-    >{{ $t(category.name) }}</span><slot></slot>
+    >{{ $t(category.name) }}</span>
+    <slot></slot>
   </div>
 </template>
 
diff --git a/website/client/src/components/challenges/challengeDetail.vue b/website/client/src/components/challenges/challengeDetail.vue
index 521d8e7905..7a2be62060 100644
--- a/website/client/src/components/challenges/challengeDetail.vue
+++ b/website/client/src/components/challenges/challengeDetail.vue
@@ -1,32 +1,49 @@
 <template>
   <div class="row">
-    <challenge-modal @updatedChallenge="updatedChallenge" /><leave-challenge-modal :challenge-id="challenge._id" /><close-challenge-modal
+    <challenge-modal @updatedChallenge="updatedChallenge" />
+    <leave-challenge-modal :challenge-id="challenge._id" />
+    <close-challenge-modal
       :members="members"
       :challenge-id="challenge._id"
       :prize="challenge.prize"
-    /><challenge-member-progress-modal :challenge-id="challenge._id" /><div class="col-12 col-md-8 standard-page">
+    />
+    <challenge-member-progress-modal :challenge-id="challenge._id" />
+    <div class="col-12 col-md-8 standard-page">
       <div class="row">
         <div class="col-12 col-md-6">
-          <h1 v-markdown="challenge.name"></h1><div>
-            <span class="mr-1 ml-0 d-block"><strong v-once>{{ $t('createdBy') }}:</strong><user-link
-              class="mx-1"
-              :user="challenge.leader"
-            /></span><span
+          <h1 v-markdown="challenge.name"></h1>
+          <div>
+            <span class="mr-1 ml-0 d-block">
+              <strong v-once>{{ $t('createdBy') }}:</strong>
+              <user-link
+                class="mx-1"
+                :user="challenge.leader"
+              />
+            </span>
+            <span
               v-if="challenge.group && challenge.group.name !== 'Tavern'"
               class="mr-1 ml-0 d-block"
-            ><strong v-once>{{ $t(challenge.group.type) }}:</strong><group-link
-              class="mx-1"
-              :group="challenge.group"
-            /></span><!-- @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)--><!-- @TODO: Implement in V2 strong.margin-left(v-once).svg-icon.calendar-icon(v-html="icons.calendarIcon")
+            >
+              <strong v-once>{{ $t(challenge.group.type) }}:</strong>
+              <group-link
+                class="mx-1"
+                :group="challenge.group"
+              />
+            </span>
+            <!-- @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)-->
+            <!-- @TODO: Implement in V2 strong.margin-left(v-once).svg-icon.calendar-icon(v-html="icons.calendarIcon")
 | {{$t('endDate')}}
-// "endDate": "End Date: <% endDate %>",--><!-- span {{challenge.endDate}}-->
-          </div><div class="tags">
+            // "endDate": "End Date: <% endDate %>",-->
+            <!-- span {{challenge.endDate}}-->
+          </div>
+          <div class="tags">
             <span
               v-for="tag in challenge.tags"
               class="tag"
             >{{ tag }}</span>
           </div>
-        </div><div class="col-12 col-md-6 text-right">
+        </div>
+        <div class="col-12 col-md-6 text-right">
           <div
             class="box"
             @click="showMemberModal()"
@@ -34,17 +51,22 @@
             <div
               class="svg-icon member-icon"
               v-html="icons.memberIcon"
-            ></div>{{ challenge.memberCount }}<div
+            ></div>
+            {{ challenge.memberCount }}
+            <div
               v-once
               class="details"
             >
               {{ $t('participantsTitle') }}
             </div>
-          </div><div class="box">
+          </div>
+          <div class="box">
             <div
               class="svg-icon gem-icon"
               v-html="icons.gemIcon"
-            ></div>{{ challenge.prize }}<div
+            ></div>
+            {{ challenge.prize }}
+            <div
               v-once
               class="details"
             >
@@ -52,35 +74,44 @@
             </div>
           </div>
         </div>
-      </div><div class="row challenge-actions">
+      </div>
+      <div class="row challenge-actions">
         <div class="col-12 col-md-6">
-          <strong class="view-progress">{{ $t('viewProgressOf') }}</strong><member-search-dropdown
+          <strong class="view-progress">{{ $t('viewProgressOf') }}</strong>
+          <member-search-dropdown
             :text="$t('selectParticipant')"
             :members="members"
             :challenge-id="challengeId"
             @member-selected="openMemberProgressModal"
           />
-        </div><div class="col-12 col-md-6 text-right">
-          <span v-if="isLeader || isAdmin"><b-dropdown
-            class="create-dropdown"
-            :text="$t('addTaskToChallenge')"
-            :variant="'success'"
-          ><b-dropdown-item
-            v-for="type in columns"
-            :key="type"
-            @click="createTask(type)"
-          >{{ $t(type) }}</b-dropdown-item></b-dropdown><task-modal
-            ref="taskModal"
-            :task="workingTask"
-            :purpose="taskFormPurpose"
-            :challenge-id="challengeId"
-            @cancel="cancelTaskModal()"
-            @taskCreated="taskCreated"
-            @taskEdited="taskEdited"
-            @taskDestroyed="taskDestroyed"
-          /></span>
         </div>
-      </div><div class="row">
+        <div class="col-12 col-md-6 text-right">
+          <span v-if="isLeader || isAdmin">
+            <b-dropdown
+              class="create-dropdown"
+              :text="$t('addTaskToChallenge')"
+              :variant="'success'"
+            >
+              <b-dropdown-item
+                v-for="type in columns"
+                :key="type"
+                @click="createTask(type)"
+              >{{ $t(type) }}</b-dropdown-item>
+            </b-dropdown>
+            <task-modal
+              ref="taskModal"
+              :task="workingTask"
+              :purpose="taskFormPurpose"
+              :challenge-id="challengeId"
+              @cancel="cancelTaskModal()"
+              @taskCreated="taskCreated"
+              @taskEdited="taskEdited"
+              @taskDestroyed="taskDestroyed"
+            />
+          </span>
+        </div>
+      </div>
+      <div class="row">
         <task-column
           v-for="column in columns"
           v-if="tasksByType[column].length > 0"
@@ -90,10 +121,11 @@
           :task-list-override="tasksByType[column]"
           :show-options="showOptions"
           @editTask="editTask"
-@taskDestroyed="taskDestroyed"
+          @taskDestroyed="taskDestroyed"
         />
       </div>
-    </div><div class="col-12 col-md-4 sidebar standard-page">
+    </div>
+    <div class="col-12 col-md-4 sidebar standard-page">
       <div
         v-if="canJoin"
         class="button-container"
@@ -105,7 +137,8 @@
         >
           {{ $t('joinChallenge') }}
         </button>
-      </div><div
+      </div>
+      <div
         v-if="isLeader || isAdmin"
         class="button-container"
       >
@@ -116,7 +149,8 @@
         >
           {{ $t('editChallenge') }}
         </button>
-      </div><div
+      </div>
+      <div
         v-if="isLeader || isAdmin"
         class="button-container"
       >
@@ -127,7 +161,8 @@
         >
           {{ $t('clone') }}
         </button>
-      </div><div
+      </div>
+      <div
         v-if="isLeader || isAdmin"
         class="button-container"
       >
@@ -138,7 +173,8 @@
         >
           {{ $t('exportChallengeCsv') }}
         </button>
-      </div><div
+      </div>
+      <div
         v-if="isLeader || isAdmin"
         class="button-container"
       >
@@ -149,13 +185,16 @@
         >
           {{ $t('endChallenge') }}
         </button>
-      </div><div>
+      </div>
+      <div>
         <sidebar-section :title="$t('challengeSummary')">
           <p v-markdown="challenge.summary"></p>
-        </sidebar-section><sidebar-section :title="$t('challengeDescription')">
+        </sidebar-section>
+        <sidebar-section :title="$t('challengeDescription')">
           <p v-markdown="challenge.description"></p>
         </sidebar-section>
-      </div><div
+      </div>
+      <div
         v-if="isMember"
         class="text-center"
       >
diff --git a/website/client/src/components/challenges/challengeItem.vue b/website/client/src/components/challenges/challengeItem.vue
index 52fe8c9903..ac1887e11e 100644
--- a/website/client/src/components/challenges/challengeItem.vue
+++ b/website/client/src/components/challenges/challengeItem.vue
@@ -5,23 +5,30 @@
         <span
           class="svg-icon"
           v-html="icons.gemIcon"
-        ></span><span class="value">{{ challenge.prize }}</span>
-      </div><div class="label">
+        ></span>
+        <span class="value">{{ challenge.prize }}</span>
+      </div>
+      <div class="label">
         {{ $t('prize') }}
       </div>
-    </div><div class="challenge-header">
+    </div>
+    <div class="challenge-header">
       <router-link :to="{ name: 'challenge', params: { challengeId: challenge._id } }">
         <h3
           v-markdown="challenge.name"
           class="challenge-title"
         ></h3>
-      </router-link><div class="meta-info">
+      </router-link>
+      <div class="meta-info">
         <div class="member-count">
           <div
             class="svg-icon user-icon"
             v-html="icons.memberIcon"
-          ></div><span class="count-label">{{ challenge.memberCount }}</span>
-        </div><div class="divider"></div><div
+          ></div>
+          <span class="count-label">{{ challenge.memberCount }}</span>
+        </div>
+        <div class="divider"></div>
+        <div
           v-if="isOfficial"
           class="official"
         >
@@ -29,35 +36,42 @@
             class="svg-icon user-icon"
             v-html="icons.officialIcon"
           ></div>
-        </div><div
+        </div>
+        <div
           v-if="fullLayout"
           class="owner"
         >
           <div class="owner-item">
-            <strong>{{ $t('createdBy') }}:</strong><user-link
+            <strong>{{ $t('createdBy') }}:</strong>
+            <user-link
               class="mx-1"
               :user="challenge.leader"
             />
-          </div><div
+          </div>
+          <div
             v-if="challenge.group && !isTavern(challenge.group)"
             class="owner-item"
           >
-            <strong>{{ $t(challenge.group.type) }}:</strong><group-link
+            <strong>{{ $t(challenge.group.type) }}:</strong>
+            <group-link
               class="mx-1"
               :group="challenge.group"
             />
           </div>
         </div>
       </div>
-    </div><category-tags
+    </div>
+    <category-tags
       class="challenge-categories"
       :categories="challenge.categories"
       :owner="isOwner"
       :member="isMember"
-    /><div
+    />
+    <div
       v-markdown="challenge.summary"
       class="challenge-description"
-    ></div><div
+    ></div>
+    <div
       v-if="fullLayout"
       class="well-wrapper"
     >
@@ -71,8 +85,10 @@
               class="svg-icon"
               :class="task.label + '-icon'"
               v-html="task.icon"
-            ></div><span class="value">{{ task.value }}</span>
-          </div><div class="label">
+            ></div>
+            <span class="value">{{ task.value }}</span>
+          </div>
+          <div class="label">
             {{ $t(task.label) }}
           </div>
         </div>
diff --git a/website/client/src/components/challenges/challengeMemberProgressModal.vue b/website/client/src/components/challenges/challengeMemberProgressModal.vue
index a195d10456..2cbe9e6e52 100644
--- a/website/client/src/components/challenges/challengeMemberProgressModal.vue
+++ b/website/client/src/components/challenges/challengeMemberProgressModal.vue
@@ -17,7 +17,8 @@
           {{ $t('awardWinners') }}
         </button>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <task-column
         v-for="column in columns"
         :key="column"
diff --git a/website/client/src/components/challenges/challengeModal.vue b/website/client/src/components/challenges/challengeModal.vue
index 8267689a3a..b64ca02f38 100644
--- a/website/client/src/components/challenges/challengeModal.vue
+++ b/website/client/src/components/challenges/challengeModal.vue
@@ -7,39 +7,62 @@
   >
     <div class="form">
       <div class="form-group">
-        <label><strong v-once>{{ $t('name') }} *</strong></label><b-form-input
+        <label>
+          <strong v-once>{{ $t('name') }} *</strong>
+        </label>
+        <b-form-input
           v-model="workingChallenge.name"
           type="text"
           :placeholder="$t('challengeNamePlaceholder')"
         />
-      </div><div class="form-group">
-        <label><strong v-once>{{ $t('shortName') }} *</strong></label><b-form-input
+      </div>
+      <div class="form-group">
+        <label>
+          <strong v-once>{{ $t('shortName') }} *</strong>
+        </label>
+        <b-form-input
           v-model="workingChallenge.shortName"
           type="text"
           :placeholder="$t('shortNamePlaceholder')"
         />
-      </div><div class="form-group">
-        <label><strong v-once>{{ $t('challengeSummary') }} *</strong></label><div class="summary-count">
+      </div>
+      <div class="form-group">
+        <label>
+          <strong v-once>{{ $t('challengeSummary') }} *</strong>
+        </label>
+        <div
+          class="summary-count"
+        >
           {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
-        </div><textarea
+        </div>
+        <textarea
           v-model="workingChallenge.summary"
           class="summary-textarea form-control"
           :placeholder="$t('challengeSummaryPlaceholder')"
         ></textarea>
-      </div><div class="form-group">
-        <label><strong v-once>{{ $t('challengeDescription') }} *</strong></label><a
+      </div>
+      <div class="form-group">
+        <label>
+          <strong v-once>{{ $t('challengeDescription') }} *</strong>
+        </label>
+        <a
           v-markdown="$t('markdownFormattingHelp')"
           class="float-right"
-        ></a><textarea
+        ></a>
+        <textarea
           v-model="workingChallenge.description"
           class="description-textarea form-control"
           :placeholder="$t('challengeDescriptionPlaceholder')"
         ></textarea>
-      </div><div
+      </div>
+      <div
         v-if="creating"
         class="form-group"
       >
-        <label><strong v-once>{{ $t('challengeGuild') }} *</strong></label><select
+        <label>
+          <strong v-once>{{ $t('challengeGuild') }} *</strong>
+        </label>
+        <select
           v-model="workingChallenge.group"
           class="form-control"
         >
@@ -50,24 +73,30 @@
             {{ group.name }}
           </option>
         </select>
-      </div><div
+      </div>
+      <div
         v-if="workingChallenge.categories"
         class="form-group"
       >
-        <label><strong v-once>{{ $t('categories') }} *</strong></label><div
+        <label>
+          <strong v-once>{{ $t('categories') }} *</strong>
+        </label>
+        <div
           class="category-wrap"
           @click.prevent="toggleCategorySelect"
         >
           <span
             v-if="workingChallenge.categories.length === 0"
             class="category-select"
-          >{{ $t('none') }}</span><div
+          >{{ $t('none') }}</span>
+          <div
             v-for="category in workingChallenge.categories"
             class="category-label"
           >
             {{ $t(categoriesHashByKey[category]) }}
           </div>
-        </div><div
+        </div>
+        <div
           v-if="showCategorySelect && creating"
           class="category-box"
         >
@@ -84,46 +113,58 @@
                 class="custom-control-input"
                 type="checkbox"
                 :value="group.key"
-              ><label
+              >
+              <label
                 v-once
                 class="custom-control-label"
                 :for="`challenge-modal-cat-${group.key}`"
               >{{ $t(group.label) }}</label>
             </div>
-          </div><button
+          </div>
+          <button
             class="btn btn-primary"
             @click.prevent="toggleCategorySelect"
           >
             {{ $t('close') }}
           </button>
         </div>
-      </div><!-- @TODO: Implement in V2 .form-grouplabel
+      </div>
+      <!-- @TODO: Implement in V2 .form-grouplabel
   strong(v-once) {{$t('endDate')}}
-b-form-input.end-date-input--><div
-v-if="creating"
-class="form-group"
->
-<label><strong v-once>{{ $t('prize') }}</strong></label><input
-v-model="workingChallenge.prize"
-type="number"
-:min="minPrize"
-:max="maxPrize"
->
-      </div><div class="row footer-wrap">
+      b-form-input.end-date-input-->
+      <div
+        v-if="creating"
+        class="form-group"
+      >
+        <label>
+          <strong v-once>{{ $t('prize') }}</strong>
+        </label>
+        <input
+          v-model="workingChallenge.prize"
+          type="number"
+          :min="minPrize"
+          :max="maxPrize"
+        >
+      </div>
+      <div class="row footer-wrap">
         <div class="col-12 text-center submit-button-wrapper">
           <div
             v-if="insufficientGemsForTavernChallenge"
             class="alert alert-warning"
           >
             You do not have enough gems to create a Tavern challenge
-          </div><!-- @TODO if buy gems button is added, add analytics tracking to it--><!-- see https://github.com/HabitRPG/habitica/blob/develop/website/views/options/social/challenges.jade#L134--><button
+          </div>
+          <!-- @TODO if buy gems button is added, add analytics tracking to it-->
+          <!-- see https://github.com/HabitRPG/habitica/blob/develop/website/views/options/social/challenges.jade#L134-->
+          <button
             v-if="creating && !cloning"
             class="btn btn-primary"
             :disabled="loading"
             @click="createChallenge()"
           >
             {{ $t('createChallengeAddTasks') }}
-          </button><button
+          </button>
+          <button
             v-if="cloning"
             v-once
             class="btn btn-primary"
@@ -131,7 +172,8 @@ type="number"
             @click="createChallenge()"
           >
             {{ $t('createChallengeCloneTasks') }}
-          </button><button
+          </button>
+          <button
             v-if="!creating && !cloning"
             v-once
             class="btn btn-primary"
@@ -139,7 +181,8 @@ type="number"
           >
             {{ $t('updateChallenge') }}
           </button>
-        </div><div class="col-12 text-center">
+        </div>
+        <div class="col-12 text-center">
           <p v-once>
             {{ $t('challengeMinimum') }}
           </p>
diff --git a/website/client/src/components/challenges/closeChallengeModal.vue b/website/client/src/components/challenges/closeChallengeModal.vue
index d2aee3270f..c95d5defd5 100644
--- a/website/client/src/components/challenges/closeChallengeModal.vue
+++ b/website/client/src/components/challenges/closeChallengeModal.vue
@@ -15,21 +15,25 @@
         >
           {{ $t('endChallenge') }}
         </h2>
-      </div><div class="row text-center">
+      </div>
+      <div class="row text-center">
         <div class="col-12">
           <div class="support-habitica">
-          <!-- @TODO: Add challenge achievement badge here-->
+            <!-- @TODO: Add challenge achievement badge here-->
           </div>
-        </div><div class="col-12">
+        </div>
+        <div class="col-12">
           <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
-        </div><div class="col-12">
+        </div>
+        <div class="col-12">
           <member-search-dropdown
             :text="winnerText"
             :members="members"
             :challenge-id="challengeId"
             @member-selected="selectMember"
           />
-        </div><div class="col-12">
+        </div>
+        <div class="col-12">
           <button
             v-once
             class="btn btn-primary"
@@ -37,13 +41,17 @@
           >
             {{ $t('awardWinners') }}
           </button>
-        </div><div class="col-12">
-          <hr><div class="or">
+        </div>
+        <div class="col-12">
+          <hr>
+          <div class="or">
             {{ $t('or') }}
           </div>
-        </div><div class="col-12">
+        </div>
+        <div class="col-12">
           <strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
-        </div><div class="col-12">
+        </div>
+        <div class="col-12">
           <button
             v-once
             class="btn btn-danger"
@@ -52,7 +60,8 @@
             {{ $t('deleteChallenge') }}
           </button>
         </div>
-      </div><div
+      </div>
+      <div
         slot="modal-footer"
         class="footer-wrap"
       ></div>
diff --git a/website/client/src/components/challenges/findChallenges.vue b/website/client/src/components/challenges/findChallenges.vue
index 4f166d1936..be7d3d8cbf 100644
--- a/website/client/src/components/challenges/findChallenges.vue
+++ b/website/client/src/components/challenges/findChallenges.vue
@@ -1,27 +1,33 @@
 <template>
   <div class="row">
-    <challenge-modal @createChallenge="challengeCreated" /><sidebar
+    <challenge-modal @createChallenge="challengeCreated" />
+    <sidebar
       @search="updateSearch"
       @filter="updateFilters"
-    /><div class="col-12 col-md-10 standard-page">
+    />
+    <div class="col-12 col-md-10 standard-page">
       <div class="row header-row">
         <div class="col-md-8 text-left">
           <h1 v-once>
             {{ $t('findChallenges') }}
           </h1>
-        </div><div class="col-md-4">
-<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
-  b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}--><button
-class="btn btn-secondary create-challenge-button float-right"
-@click="createChallenge()"
->
-<div
-class="svg-icon positive-icon"
-v-html="icons.positiveIcon"
-></div><span v-once>{{ $t('createChallenge') }}</span>
-</button>
         </div>
-      </div><div class="row">
+        <div class="col-md-4">
+          <!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}-->
+          <button
+            class="btn btn-secondary create-challenge-button float-right"
+            @click="createChallenge()"
+          >
+            <div
+              class="svg-icon positive-icon"
+              v-html="icons.positiveIcon"
+            ></div>
+            <span v-once>{{ $t('createChallenge') }}</span>
+          </button>
+        </div>
+      </div>
+      <div class="row">
         <div
           v-if="!loading && filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
@@ -30,13 +36,15 @@ v-html="icons.positiveIcon"
             {{ $t('noChallengeMatchFilters') }}
           </h2>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-for="challenge in filteredChallenges"
           class="col-12 col-md-6"
         >
           <challenge-item :challenge="challenge" />
-        </div><mugen-scroll
+        </div>
+        <mugen-scroll
           v-show="loading"
           :handler="infiniteScrollTrigger"
           :should-handle="!loading && canLoadMore"
diff --git a/website/client/src/components/challenges/groupChallenges.vue b/website/client/src/components/challenges/groupChallenges.vue
index 89e9312e94..e6d14df15c 100644
--- a/website/client/src/components/challenges/groupChallenges.vue
+++ b/website/client/src/components/challenges/groupChallenges.vue
@@ -3,7 +3,8 @@
     <challenge-modal
       :group-id="groupId"
       @createChallenge="challengeCreated"
-    /><div
+    />
+    <div
       v-if="challenges.length === 0"
       class="row no-quest-section"
     >
@@ -11,24 +12,29 @@
         <div
           class="svg-icon challenge-icon"
           v-html="icons.challengeIcon"
-        ></div><h4 v-once>
+        ></div>
+        <h4 v-once>
           {{ $t('haveNoChallenges') }}
-        </h4><p v-once>
+        </h4>
+        <p v-once>
           {{ $t('challengeDetails') }}
-        </p><button
+        </p>
+        <button
           class="btn btn-secondary"
           @click="createChallenge()"
         >
           {{ $t('createChallenge') }}
         </button>
       </div>
-    </div><template v-else>
+    </div>
+    <template v-else>
       <challenge-item
         v-for="challenge in challenges"
         :key="challenge._id"
         :challenge="challenge"
         :full-layout="false"
-      /><div class="col-12 text-center">
+      />
+      <div class="col-12 text-center">
         <button
           class="btn btn-secondary"
           @click="createChallenge()"
diff --git a/website/client/src/components/challenges/index.vue b/website/client/src/components/challenges/index.vue
index 7beaf1fbf5..cd4d1411d2 100644
--- a/website/client/src/components/challenges/index.vue
+++ b/website/client/src/components/challenges/index.vue
@@ -7,14 +7,16 @@
         :class="{'active': $route.name === 'myChallenges'}"
       >
         {{ $t('myChallenges') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'findChallenges'}"
         :class="{'active': $route.name === 'findChallenges'}"
       >
         {{ $t('findChallenges') }}
       </router-link>
-    </secondary-menu><div class="col-12">
+    </secondary-menu>
+    <div class="col-12">
       <router-view />
     </div>
   </div>
diff --git a/website/client/src/components/challenges/leaveChallengeModal.vue b/website/client/src/components/challenges/leaveChallengeModal.vue
index 809219fc76..12b046d0bf 100644
--- a/website/client/src/components/challenges/leaveChallengeModal.vue
+++ b/website/client/src/components/challenges/leaveChallengeModal.vue
@@ -6,13 +6,15 @@
     :hide-footer="true"
   >
     <div class="modal-body">
-      <h2>{{ $t('confirmKeepChallengeTasks') }}</h2><div>
+      <h2>{{ $t('confirmKeepChallengeTasks') }}</h2>
+      <div>
         <button
           class="btn btn-primary"
           @click="leaveChallenge('keep')"
         >
           {{ $t('keepThem') }}
-        </button><button
+        </button>
+        <button
           class="btn btn-danger"
           @click="leaveChallenge('remove-all')"
         >
diff --git a/website/client/src/components/challenges/myChallenges.vue b/website/client/src/components/challenges/myChallenges.vue
index 93a046f275..9b000772df 100644
--- a/website/client/src/components/challenges/myChallenges.vue
+++ b/website/client/src/components/challenges/myChallenges.vue
@@ -1,27 +1,33 @@
 <template>
   <div class="row">
-    <challenge-modal @createChallenge="challengeCreated" /><sidebar
+    <challenge-modal @createChallenge="challengeCreated" />
+    <sidebar
       @search="updateSearch"
       @filter="updateFilters"
-    /><div class="col-10 standard-page">
+    />
+    <div class="col-10 standard-page">
       <div class="row header-row">
         <div class="col-md-8 text-left">
           <h1 v-once>
             {{ $t('myChallenges') }}
           </h1>
-        </div><div class="col-md-4">
-<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
-  b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}--><button
-class="btn btn-secondary create-challenge-button float-right"
-@click="createChallenge()"
->
-<div
-class="svg-icon positive-icon"
-v-html="icons.positiveIcon"
-></div><span v-once>{{ $t('createChallenge') }}</span>
-</button>
         </div>
-      </div><div class="row">
+        <div class="col-md-4">
+          <!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
+          b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}-->
+          <button
+            class="btn btn-secondary create-challenge-button float-right"
+            @click="createChallenge()"
+          >
+            <div
+              class="svg-icon positive-icon"
+              v-html="icons.positiveIcon"
+            ></div>
+            <span v-once>{{ $t('createChallenge') }}</span>
+          </button>
+        </div>
+      </div>
+      <div class="row">
         <div
           v-if="!loading && challenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
@@ -29,15 +35,19 @@ v-html="icons.positiveIcon"
           <div
             class="svg-icon"
             v-html="icons.challengeIcon"
-          ></div><h2 v-once>
+          ></div>
+          <h2 v-once>
             {{ $t('noChallengeTitle') }}
-          </h2><p v-once>
+          </h2>
+          <p v-once>
             {{ $t('challengeDescription1') }}
-          </p><p v-once>
+          </p>
+          <p v-once>
             {{ $t('challengeDescription2') }}
           </p>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
@@ -46,13 +56,15 @@ v-html="icons.positiveIcon"
             {{ $t('noChallengeMatchFilters') }}
           </h2>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-for="challenge in filteredChallenges"
           class="col-12 col-md-6"
         >
           <challenge-item :challenge="challenge" />
-        </div><mugen-scroll
+        </div>
+        <mugen-scroll
           v-show="loading"
           :handler="infiniteScrollTrigger"
           :should-handle="!loading && canLoadMore"
diff --git a/website/client/src/components/challenges/sidebar.vue b/website/client/src/components/challenges/sidebar.vue
index 2a4a90330b..0a45047d63 100644
--- a/website/client/src/components/challenges/sidebar.vue
+++ b/website/client/src/components/challenges/sidebar.vue
@@ -7,11 +7,14 @@
         type="text"
         :placeholder="$t('search')"
       >
-    </div><form>
+    </div>
+    <form>
       <h2 v-once>
         {{ $t('filter') }}
-      </h2><div class="form-group">
-        <h3>{{ $t('category') }}</h3><div
+      </h2>
+      <div class="form-group">
+        <h3>{{ $t('category') }}</h3>
+        <div
           v-for="group in categoryOptions"
           :key="group.key"
           class="form-check"
@@ -23,18 +26,21 @@
               class="custom-control-input"
               type="checkbox"
               :value="group.key"
-            ><label
+            >
+            <label
               v-once
               class="custom-control-label"
               :for="group.key"
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="$route.name !== 'findChallenges'"
         class="form-group"
       >
-        <h3>{{ $t('membership') }}</h3><div
+        <h3>{{ $t('membership') }}</h3>
+        <div
           v-for="group in roleOptions"
           :key="group.key"
           class="form-check"
@@ -46,15 +52,18 @@
               class="custom-control-input"
               type="checkbox"
               :value="group.key"
-            ><label
+            >
+            <label
               v-once
               class="custom-control-label"
               :for="group.key"
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div><div class="form-group">
-        <h3>{{ $t('ownership') }}</h3><div
+      </div>
+      <div class="form-group">
+        <h3>{{ $t('ownership') }}</h3>
+        <div
           v-for="group in ownershipOptions"
           :key="group.key"
           class="form-check"
@@ -66,7 +75,8 @@
               class="custom-control-input"
               type="checkbox"
               :value="group.key"
-            ><label
+            >
+            <label
               v-once
               class="custom-control-label"
               :for="group.key"
diff --git a/website/client/src/components/chat/autoComplete.vue b/website/client/src/components/chat/autoComplete.vue
index 3d2785f66c..4baf8592bd 100644
--- a/website/client/src/components/chat/autoComplete.vue
+++ b/website/client/src/components/chat/autoComplete.vue
@@ -12,14 +12,18 @@
       @mouseenter="setHover(result)"
       @mouseleave="resetSelection()"
     >
-      <span><h3
-        class="profile-name"
-        :class="userLevelStyle(result.msg)"
-      >{{ result.displayName }}</h3><div
-        v-if="showTierStyle(result.msg)"
-        class="svg-icon"
-        v-html="tierIcon(result.msg)"
-      ></div></span><span
+      <span>
+        <h3
+          class="profile-name"
+          :class="userLevelStyle(result.msg)"
+        >{{ result.displayName }}</h3>
+        <div
+          v-if="showTierStyle(result.msg)"
+          class="svg-icon"
+          v-html="tierIcon(result.msg)"
+        ></div>
+      </span>
+      <span
         v-if="result.username"
         class="username ml-2"
         :class="{'hover-foreground': result.hover}"
diff --git a/website/client/src/components/chat/chatCard.vue b/website/client/src/components/chat/chatCard.vue
index ba2fba54fb..dd581a6ac4 100644
--- a/website/client/src/components/chat/chatCard.vue
+++ b/website/client/src/components/chat/chatCard.vue
@@ -3,37 +3,49 @@
     <div
       v-if="isUserMentioned"
       class="mentioned-icon"
-    ></div><div
+    ></div>
+    <div
       v-if="!inbox && user.contributor.admin && msg.flagCount"
       class="message-hidden"
     >
       {{ flagCountDescription }}
-    </div><div class="card-body">
+    </div>
+    <div class="card-body">
       <user-link
         :user-id="msg.uuid"
         :name="msg.user"
         :backer="msg.backer"
         :contributor="msg.contributor"
-      /><p class="time">
+      />
+      <p class="time">
         <span
           v-if="msg.username"
           class="mr-1"
-        >@{{ msg.username }}</span><span
+        >@{{ msg.username }}</span>
+        <span
           v-if="msg.username"
           class="mr-1"
-        >•</span><span
-          v-b-tooltip=""
+        >•</span>
+        <span
+          v-b-tooltip
           :title="msg.timestamp | date"
-        >{{ msg.timestamp | timeAgo }}&nbsp;</span><span v-if="msg.client && user.contributor.level >= 4"> ({{ msg.client }})</span>
-      </p><div
+        >{{ msg.timestamp | timeAgo }}&nbsp;</span>
+        <span v-if="msg.client && user.contributor.level >= 4">({{ msg.client }})</span>
+      </p>
+      <div
         class="text"
         v-html="atHighlight(parseMarkdown(msg.text))"
-      ></div><div
+      ></div>
+      <div
         v-if="isMessageReported && (inbox === true)"
         class="reported"
       >
-        <span v-once>{{ $t('reportedMessage') }}</span><br><span v-once>{{ $t('canDeleteNow') }}</span>
-      </div><hr><div
+        <span v-once>{{ $t('reportedMessage') }}</span>
+        <br>
+        <span v-once>{{ $t('canDeleteNow') }}</span>
+      </div>
+      <hr>
+      <div
         v-if="msg.id"
         class="d-flex"
       >
@@ -45,8 +57,10 @@
           <div
             class="svg-icon"
             v-html="icons.copy"
-          ></div><div>{{ $t('copyAsTodo') }}</div>
-        </div><div
+          ></div>
+          <div>{{ $t('copyAsTodo') }}</div>
+        </div>
+        <div
           v-if="(inbox || (user.flags.communityGuidelinesAccepted && msg.uuid !== 'system')) && (!isMessageReported || user.contributor.admin)"
           class="action d-flex align-items-center"
           @click="report(msg)"
@@ -55,10 +69,12 @@
             v-once
             class="svg-icon"
             v-html="icons.report"
-          ></div><div v-once>
+          ></div>
+          <div v-once>
             {{ $t('report') }}
           </div>
-        </div><div
+        </div>
+        <div
           v-if="msg.uuid === user._id || inbox || user.contributor.admin"
           class="action d-flex align-items-center"
           @click="remove()"
@@ -67,10 +83,12 @@
             v-once
             class="svg-icon"
             v-html="icons.delete"
-          ></div><div v-once>
+          ></div>
+          <div v-once>
             {{ $t('delete') }}
           </div>
-        </div><div
+        </div>
+        <div
           v-if="!inbox"
           v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}"
           class="ml-auto d-flex"
@@ -85,8 +103,10 @@
               class="svg-icon"
               :title="$t('liked')"
               v-html="icons.liked"
-            ></div>+{{ likeCount }}
-          </div><div
+            ></div>
+            +{{ likeCount }}
+          </div>
+          <div
             v-if="likeCount === 0"
             class="action d-flex align-items-center mr-0"
             :class="{activeLike: msg.likes[user._id]}"
@@ -98,7 +118,8 @@
               v-html="icons.like"
             ></div>
           </div>
-        </div><span v-if="!msg.likes[user._id] && !inbox">{{ $t('like') }}</span>
+        </div>
+        <span v-if="!msg.likes[user._id] && !inbox">{{ $t('like') }}</span>
       </div>
     </div>
   </div>
diff --git a/website/client/src/components/chat/chatMessages.vue b/website/client/src/components/chat/chatMessages.vue
index bc7fe160ed..737b6cf57c 100644
--- a/website/client/src/components/chat/chatMessages.vue
+++ b/website/client/src/components/chat/chatMessages.vue
@@ -11,21 +11,26 @@
           :group-id="groupId"
         />
       </div>
-    </div><div class="row loadmore">
+    </div>
+    <div class="row loadmore">
       <div v-if="canLoadMore">
-        <div class="loadmore-divider"></div><button
+        <div class="loadmore-divider"></div>
+        <button
           class="btn btn-secondary"
           @click="triggerLoad()"
         >
           {{ $t('loadEarlierMessages') }}
-        </button><div class="loadmore-divider"></div>
-      </div><h2
+        </button>
+        <div class="loadmore-divider"></div>
+      </div>
+      <h2
         v-show="isLoading"
         class="col-12 loading"
       >
         {{ $t('loading') }}
       </h2>
-    </div><div
+    </div>
+    <div
       v-for="(msg, index) in messages"
       v-if="chat && canViewFlag(msg)"
       :class="{row: inbox}"
@@ -44,7 +49,8 @@
           :hide-class-badge="true"
           :class="{'inbox-avatar-left': inbox}"
           @click.native="showMemberModal(msg.uuid)"
-        /><div
+        />
+        <div
           class="card"
           :class="{'col-10': inbox}"
         >
@@ -58,7 +64,8 @@
             @chat-card-mounted="itemWasMounted"
           />
         </div>
-      </div><div
+      </div>
+      <div
         v-if="user._id === msg.uuid"
         class="d-flex"
         :class="{'flex-grow-1': inbox}"
@@ -76,7 +83,8 @@
             @show-member-modal="showMemberModal"
             @chat-card-mounted="itemWasMounted"
           />
-        </div><avatar
+        </div>
+        <avatar
           v-if="msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)"
           :member="msg.userStyles || cachedProfileData[msg.uuid]"
           :avatar-only="true"
diff --git a/website/client/src/components/chat/copyAsTodoModal.vue b/website/client/src/components/chat/copyAsTodoModal.vue
index 494a983c97..42a7f2d1af 100644
--- a/website/client/src/components/chat/copyAsTodoModal.vue
+++ b/website/client/src/components/chat/copyAsTodoModal.vue
@@ -11,24 +11,29 @@
         class="form-control"
         type="text"
       >
-    </div><div class="form-group">
+    </div>
+    <div class="form-group">
       <textarea
         v-model="task.notes"
         class="form-control"
         rows="5"
         focus-element="true"
       ></textarea>
-    </div><hr><task
+    </div>
+    <hr>
+    <task
       v-if="task._id"
       :is-user="isUser"
       :task="task"
-    /><div class="modal-footer">
+    />
+    <div class="modal-footer">
       <button
         class="btn btn-secondary"
         @click="close()"
       >
         {{ $t('close') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-primary"
         @click="saveTodo()"
       >
diff --git a/website/client/src/components/chat/reportFlagModal.vue b/website/client/src/components/chat/reportFlagModal.vue
index c58463d4c1..83682492b1 100644
--- a/website/client/src/components/chat/reportFlagModal.vue
+++ b/website/client/src/components/chat/reportFlagModal.vue
@@ -6,24 +6,34 @@
     :hide-footer="true"
   >
     <div class="modal-body">
-      <strong v-html="$t('abuseFlagModalHeading', reportData)"></strong><blockquote><div v-markdown="abuseObject.text"></div></blockquote><div>
-        <strong>{{ $t('whyReportingPost') }}</strong><span class="optional">{{ $t('optional') }}</span><textarea
+      <strong v-html="$t('abuseFlagModalHeading', reportData)"></strong>
+      <blockquote>
+        <div v-markdown="abuseObject.text"></div>
+      </blockquote>
+      <div>
+        <strong>{{ $t('whyReportingPost') }}</strong>
+        <span class="optional">{{ $t('optional') }}</span>
+        <textarea
           v-model="reportComment"
           class="form-control"
           :placeholder="$t('whyReportingPostPlaceholder')"
         ></textarea>
-      </div><small v-html="$t('abuseFlagModalBody', abuseFlagModalBody)"></small>
-    </div><div class="footer text-center">
+      </div>
+      <small v-html="$t('abuseFlagModalBody', abuseFlagModalBody)"></small>
+    </div>
+    <div class="footer text-center">
       <button
         v-if="user.contributor.admin && abuseObject.flagCount > 0"
         class="pull-left btn btn-danger"
         @click="clearFlagCount()"
       >
         Reset Flag Count
-      </button><a
+      </button>
+      <a
         class="cancel-link"
         @click.prevent="close()"
-      >{{ $t('cancel') }}</a><button
+      >{{ $t('cancel') }}</a>
+      <button
         class="btn btn-danger"
         @click="reportAbuse()"
       >
diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index cbde9a9d7a..3cca7108f8 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -1,7 +1,359 @@
 <!-- eslint-disable -->
 <template>
-<!-- eslint-disable --><b-modal id="avatar-modal" title="" :size="editing ? 'lg' : 'md'" :hide-header="true" :hide-footer="true" :modal-class="{'page-2':modalPage > 1 && !editing}"><div class="section row welcome-section" v-if="modalPage === 1 && !editing"><div class="col-6 offset-3 text-center"><h3 v-once>{{$t('welcomeTo')}}</h3><div class="svg-icon logo" v-html="icons.logoPurple"></div></div></div><div class="avatar-section row" v-if="modalPage > 1" :class="{'page-2': modalPage === 2}"><div class="col-6 offset-3"><div class="user-creation-bg" v-if="!editing"></div><avatar :member="user" :avatarOnly="!editing" :class="{'edit-avatar': editing}"></avatar></div></div><div class="section" v-if="modalPage === 2" :class="{'edit-modal': editing}"><!-- @TODO Implement in V2 .section.row.col-12.text-center
-  button.btn.btn-secondary(v-once) {{$t('randomize')}}--><div class="container section text-center customize-menu" id="options-nav"><div class="row"><div class="menu-container" @click="changeTopPage('body', 'size')" :class="{'col-3': !editing, 'col-2 offset-1': editing, active: activeTopPage === 'body'}"><div class="menu-item"><div class="svg-icon" v-html="icons.bodyIcon"></div></div><strong v-once>{{$t('bodyBody')}}</strong><div class="indicator"></div></div><div class="menu-container" @click="changeTopPage('skin', 'color')" :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'skin'}"><div class="menu-item"><div class="svg-icon" v-html="icons.skinIcon"></div></div><strong v-once>{{$t('skin')}}</strong><div class="indicator"></div></div><div class="menu-container" @click="changeTopPage('hair', 'color')" :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'hair'}"><div class="menu-item"><div class="svg-icon" v-html="icons.hairIcon"></div></div><strong v-once>{{$t('hair')}}</strong><div class="indicator"></div></div><div class="menu-container" @click="changeTopPage('extra', 'glasses')" :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'extra'}"><div class="menu-item"><div class="svg-icon" v-html="icons.accessoriesIcon"></div></div><strong v-once>{{$t('extra')}}</strong><div class="indicator"></div></div><div class="menu-container col-2" @click="changeTopPage('backgrounds', '2019')" v-if="editing" :class="{active: activeTopPage === 'backgrounds'}"><div class="menu-item"><div class="svg-icon" v-html="icons.backgroundsIcon"></div></div><strong v-once>{{$t('backgrounds')}}</strong><div class="indicator"></div></div></div></div><body-settings v-if="activeTopPage === 'body'" :editing="editing"></body-settings><skin-settings v-if="activeTopPage === 'skin'" :editing="editing"></skin-settings><hairSettings v-if="activeTopPage === 'hair'" :editing="editing"></hairSettings><extraSettings v-if="activeTopPage === 'extra'" :editing="editing"></extraSettings><div class="section container customize-section" id="backgrounds" v-if="activeTopPage === 'backgrounds'"><div class="row title-row"><toggle-switch class="backgroundFilterToggle" :label="'Hide locked backgrounds'" v-model="filterBackgrounds"></toggle-switch></div><div class="row text-center title-row" v-if="!filterBackgrounds"><strong>{{backgroundShopSets[0].text}}</strong></div><div class="row title-row" v-if="!filterBackgrounds"><div class="col-12" v-if="showPlainBackgroundBlurb(backgroundShopSets[0].identifier, backgroundShopSets[0].items)">{{ $t('incentiveBackgroundsUnlockedWithCheckins') }}</div><div class="col-2" v-for="bg in backgroundShopSets[0].items" @click="unlock('background.' + bg.key)" :popover-title="bg.text" :popover="bg.notes" popover-trigger="mouseenter"><div class="incentive-background" :class="[`background_${bg.key}`]"><div class="small-rectangle"></div></div></div></div><sub-menu class="text-center" :items="bgSubMenuItems" :activeSubPage="activeSubPage" @changeSubPage="changeSubPage($event)"></sub-menu><div class="row customize-menu" v-if="!filterBackgrounds" v-for="(sets, key) in backgroundShopSetsByYear"><div class="row background-set" v-for="set in sets" v-if="activeSubPage === key"><div class="col-8 offset-2 text-center set-title"><strong>{{set.text}}</strong></div><div class="col-4 text-center customize-option background-button" v-for="bg in set.items" @click="!user.purchased.background[bg.key] ? backgroundSelected(bg) : unlock('background.' + bg.key)" :popover-title="bg.text" :popover="bg.notes" popover-trigger="mouseenter"><div class="background" :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"></div><i class="glyphicon glyphicon-lock" v-if="!user.purchased.background[bg.key]"></i><div class="purchase-background single" v-if="!user.purchased.background[bg.key]"><div class="svg-icon gem" v-html="icons.gem"></div><span class="price">7</span></div><span class="badge badge-pill badge-item badge-svg" :class="{'item-selected-badge': isBackgroundPinned(bg), 'hide': !isBackgroundPinned(bg)}" @click.prevent.stop="togglePinned(bg)" v-if="!user.purchased.background[bg.key]"><span class="svg-icon inline icon-12 color" v-html="icons.pin"></span></span></div><div class="purchase-background set" v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'" @click="unlock(setKeys('background', set.items))"><span class="label">{{ $t('purchaseAll') }}</span><div class="svg-icon gem" v-html="icons.gem"></div><span class="price">15</span></div></div></div><div class="row customize-menu" v-if="filterBackgrounds"><div class="col-4 text-center customize-option background-button" v-for="(bg) in ownedBackgrounds" @click="unlock('background.' + bg.key)" :popover-title="bg.text" :popover="bg.notes" popover-trigger="mouseenter"><div class="background" :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"></div></div></div></div></div><div class="container interests-section" v-if="modalPage === 3 && !editing"><div class="section row"><div class="col-12 text-center"><h2>{{ $t('wantToWorkOn') }}</h2></div></div><div class="section row"><div class="col-6"><div class="task-option"><div class="custom-control custom-checkbox"><input class="custom-control-input" id="work" type="checkbox" value="work" v-model="taskCategories"/><label class="custom-control-label" v-once for="work">{{ $t('work') }}</label></div></div><div class="task-option"><div class="custom-control custom-checkbox"><input class="custom-control-input" id="excercise" type="checkbox" value="exercise" v-model="taskCategories"/><label class="custom-control-label" v-once for="excercise">{{ $t('exercise') }}</label></div></div><div class="task-option"><div class="custom-control custom-checkbox"><input class="custom-control-input" id="health_wellness" type="checkbox" value="health_wellness" v-model="taskCategories"/><label class="custom-control-label" v-once for="health_wellness">{{ $t('health_wellness') }}</label></div></div><div class="task-option"><div class="custom-control custom-checkbox"><input class="custom-control-input" id="school" type="checkbox" value="school" v-model="taskCategories"/><label class="custom-control-label" v-once for="school">{{ $t('school') }}</label></div></div></div><div class="col-6"><div class="task-option"><div class="custom-control custom-checkbox"><input class="custom-control-input" id="chores" type="checkbox" value="chores" v-model="taskCategories"/><label class="custom-control-label" v-once for="chores">{{ $t('chores') }}</label></div></div><div class="task-option"><div class="custom-control custom-checkbox"><input class="custom-control-input" id="creativity" type="checkbox" value="creativity" v-model="taskCategories"/><label class="custom-control-label" v-once for="creativity">{{ $t('creativity') }}</label></div></div><div class="task-option"><div class="custom-control custom-checkbox"><input class="custom-control-input" id="self_care" type="checkbox" value="self_care" v-model="taskCategories"/><label class="custom-control-label" v-once for="self_care">{{ $t('self_care') }}</label></div></div></div></div></div><div class="section d-flex justify-content-center justin-outer-section" :class="{top: modalPage > 1}" v-if="!editing"><div class="justin-section d-flex align-items-center"><div class="featured-label"><span class="rectangle"></span><span class="text">Justin</span><span class="rectangle"></span></div><div class="justin-message"><div class="corner-decoration" :style="{top: '-2px', right: '-2px'}"></div><div class="corner-decoration" :style="{top: '-2px', left: '-2px'}"></div><div class="corner-decoration" :style="{bottom: '-2px', right: '-2px'}"></div><div class="corner-decoration" :style="{bottom: '-2px', left: '-2px'}"></div><div v-if="modalPage === 1"><p v-once v-html="$t('justinIntroMessage1')"></p><p v-once>{{ $t('justinIntroMessageUsername') }}</p></div><div v-if="modalPage === 2"><p>{{ $t('justinIntroMessageAppearance') }}</p></div><div v-if="modalPage === 3"><p v-once>{{ $t('justinIntroMessage3') }}</p></div></div><div class="npc-justin-textbox"></div></div></div><div class="section mr-5 ml-5 first-page-footer" v-if="modalPage === 1"><username-form @usernameConfirmed="modalPage += 1" :avatarIntro="true"></username-form><div class="small text-center" v-html="$t('usernameTOSRequirements')"></div></div><div class="section container footer" v-if="!editing && !(modalPage === 1)"><div class="footer-left"><div class="prev-outer" v-if="modalPage > 1" @click="prev()"><div class="prev-arrow svg-icon" v-html="icons.arrowLeft"></div><div class="prev" v-once>{{ $t('prev') }}</div></div></div><div class="footer-center text-center circles"><div class="circle" :class="{active: modalPage === 1}"></div><div class="circle" :class="{active: modalPage === 2}"></div><div class="circle" :class="{active: modalPage === 3}"></div></div><div class="footer-right"><div class="next-outer" v-if="modalPage < 3" @click="next()"><div class="next" v-once>{{$t('next')}}</div><div class="next-arrow svg-icon" v-html="icons.arrowRight"></div></div><div class="next-outer" v-if="modalPage === 3 && !loading" @click="done()" :class="{disabled: taskCategories.length === 0}"><div class="next" v-once>{{$t('finish')}}</div><div class="next-arrow svg-icon" v-html="icons.arrowRight"></div></div></div></div></b-modal>
+  <!-- eslint-disable -->
+  <b-modal
+    id="avatar-modal"
+    title
+    :size="editing ? 'lg' : 'md'"
+    :hide-header="true"
+    :hide-footer="true"
+    :modal-class="{'page-2':modalPage > 1 && !editing}"
+  >
+    <div class="section row welcome-section" v-if="modalPage === 1 && !editing">
+      <div class="col-6 offset-3 text-center">
+        <h3 v-once>{{$t('welcomeTo')}}</h3>
+        <div class="svg-icon logo" v-html="icons.logoPurple"></div>
+      </div>
+    </div>
+    <div class="avatar-section row" v-if="modalPage > 1" :class="{'page-2': modalPage === 2}">
+      <div class="col-6 offset-3">
+        <div class="user-creation-bg" v-if="!editing"></div>
+        <avatar :member="user" :avatarOnly="!editing" :class="{'edit-avatar': editing}"></avatar>
+      </div>
+    </div>
+    <div class="section" v-if="modalPage === 2" :class="{'edit-modal': editing}">
+      <!-- @TODO Implement in V2 .section.row.col-12.text-center
+      button.btn.btn-secondary(v-once) {{$t('randomize')}}-->
+      <div class="container section text-center customize-menu" id="options-nav">
+        <div class="row">
+          <div
+            class="menu-container"
+            @click="changeTopPage('body', 'size')"
+            :class="{'col-3': !editing, 'col-2 offset-1': editing, active: activeTopPage === 'body'}"
+          >
+            <div class="menu-item">
+              <div class="svg-icon" v-html="icons.bodyIcon"></div>
+            </div>
+            <strong v-once>{{$t('bodyBody')}}</strong>
+            <div class="indicator"></div>
+          </div>
+          <div
+            class="menu-container"
+            @click="changeTopPage('skin', 'color')"
+            :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'skin'}"
+          >
+            <div class="menu-item">
+              <div class="svg-icon" v-html="icons.skinIcon"></div>
+            </div>
+            <strong v-once>{{$t('skin')}}</strong>
+            <div class="indicator"></div>
+          </div>
+          <div
+            class="menu-container"
+            @click="changeTopPage('hair', 'color')"
+            :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'hair'}"
+          >
+            <div class="menu-item">
+              <div class="svg-icon" v-html="icons.hairIcon"></div>
+            </div>
+            <strong v-once>{{$t('hair')}}</strong>
+            <div class="indicator"></div>
+          </div>
+          <div
+            class="menu-container"
+            @click="changeTopPage('extra', 'glasses')"
+            :class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'extra'}"
+          >
+            <div class="menu-item">
+              <div class="svg-icon" v-html="icons.accessoriesIcon"></div>
+            </div>
+            <strong v-once>{{$t('extra')}}</strong>
+            <div class="indicator"></div>
+          </div>
+          <div
+            class="menu-container col-2"
+            @click="changeTopPage('backgrounds', '2019')"
+            v-if="editing"
+            :class="{active: activeTopPage === 'backgrounds'}"
+          >
+            <div class="menu-item">
+              <div class="svg-icon" v-html="icons.backgroundsIcon"></div>
+            </div>
+            <strong v-once>{{$t('backgrounds')}}</strong>
+            <div class="indicator"></div>
+          </div>
+        </div>
+      </div>
+      <body-settings v-if="activeTopPage === 'body'" :editing="editing"></body-settings>
+      <skin-settings v-if="activeTopPage === 'skin'" :editing="editing"></skin-settings>
+      <hairSettings v-if="activeTopPage === 'hair'" :editing="editing"></hairSettings>
+      <extraSettings v-if="activeTopPage === 'extra'" :editing="editing"></extraSettings>
+      <div
+        class="section container customize-section"
+        id="backgrounds"
+        v-if="activeTopPage === 'backgrounds'"
+      >
+        <div class="row title-row">
+          <toggle-switch
+            class="backgroundFilterToggle"
+            :label="'Hide locked backgrounds'"
+            v-model="filterBackgrounds"
+          ></toggle-switch>
+        </div>
+        <div class="row text-center title-row" v-if="!filterBackgrounds">
+          <strong>{{backgroundShopSets[0].text}}</strong>
+        </div>
+        <div class="row title-row" v-if="!filterBackgrounds">
+          <div
+            class="col-12"
+            v-if="showPlainBackgroundBlurb(backgroundShopSets[0].identifier, backgroundShopSets[0].items)"
+          >{{ $t('incentiveBackgroundsUnlockedWithCheckins') }}</div>
+          <div
+            class="col-2"
+            v-for="bg in backgroundShopSets[0].items"
+            @click="unlock('background.' + bg.key)"
+            :popover-title="bg.text"
+            :popover="bg.notes"
+            popover-trigger="mouseenter"
+          >
+            <div class="incentive-background" :class="[`background_${bg.key}`]">
+              <div class="small-rectangle"></div>
+            </div>
+          </div>
+        </div>
+        <sub-menu
+          class="text-center"
+          :items="bgSubMenuItems"
+          :activeSubPage="activeSubPage"
+          @changeSubPage="changeSubPage($event)"
+        ></sub-menu>
+        <div
+          class="row customize-menu"
+          v-if="!filterBackgrounds"
+          v-for="(sets, key) in backgroundShopSetsByYear"
+        >
+          <div class="row background-set" v-for="set in sets" v-if="activeSubPage === key">
+            <div class="col-8 offset-2 text-center set-title">
+              <strong>{{set.text}}</strong>
+            </div>
+            <div
+              class="col-4 text-center customize-option background-button"
+              v-for="bg in set.items"
+              @click="!user.purchased.background[bg.key] ? backgroundSelected(bg) : unlock('background.' + bg.key)"
+              :popover-title="bg.text"
+              :popover="bg.notes"
+              popover-trigger="mouseenter"
+            >
+              <div
+                class="background"
+                :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
+              ></div>
+              <i class="glyphicon glyphicon-lock" v-if="!user.purchased.background[bg.key]"></i>
+              <div class="purchase-background single" v-if="!user.purchased.background[bg.key]">
+                <div class="svg-icon gem" v-html="icons.gem"></div>
+                <span class="price">7</span>
+              </div>
+              <span
+                class="badge badge-pill badge-item badge-svg"
+                :class="{'item-selected-badge': isBackgroundPinned(bg), 'hide': !isBackgroundPinned(bg)}"
+                @click.prevent.stop="togglePinned(bg)"
+                v-if="!user.purchased.background[bg.key]"
+              >
+                <span class="svg-icon inline icon-12 color" v-html="icons.pin"></span>
+              </span>
+            </div>
+            <div
+              class="purchase-background set"
+              v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'"
+              @click="unlock(setKeys('background', set.items))"
+            >
+              <span class="label">{{ $t('purchaseAll') }}</span>
+              <div class="svg-icon gem" v-html="icons.gem"></div>
+              <span class="price">15</span>
+            </div>
+          </div>
+        </div>
+        <div class="row customize-menu" v-if="filterBackgrounds">
+          <div
+            class="col-4 text-center customize-option background-button"
+            v-for="(bg) in ownedBackgrounds"
+            @click="unlock('background.' + bg.key)"
+            :popover-title="bg.text"
+            :popover="bg.notes"
+            popover-trigger="mouseenter"
+          >
+            <div
+              class="background"
+              :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container interests-section" v-if="modalPage === 3 && !editing">
+      <div class="section row">
+        <div class="col-12 text-center">
+          <h2>{{ $t('wantToWorkOn') }}</h2>
+        </div>
+      </div>
+      <div class="section row">
+        <div class="col-6">
+          <div class="task-option">
+            <div class="custom-control custom-checkbox">
+              <input
+                class="custom-control-input"
+                id="work"
+                type="checkbox"
+                value="work"
+                v-model="taskCategories"
+              />
+              <label class="custom-control-label" v-once for="work">{{ $t('work') }}</label>
+            </div>
+          </div>
+          <div class="task-option">
+            <div class="custom-control custom-checkbox">
+              <input
+                class="custom-control-input"
+                id="excercise"
+                type="checkbox"
+                value="exercise"
+                v-model="taskCategories"
+              />
+              <label class="custom-control-label" v-once for="excercise">{{ $t('exercise') }}</label>
+            </div>
+          </div>
+          <div class="task-option">
+            <div class="custom-control custom-checkbox">
+              <input
+                class="custom-control-input"
+                id="health_wellness"
+                type="checkbox"
+                value="health_wellness"
+                v-model="taskCategories"
+              />
+              <label
+                class="custom-control-label"
+                v-once
+                for="health_wellness"
+              >{{ $t('health_wellness') }}</label>
+            </div>
+          </div>
+          <div class="task-option">
+            <div class="custom-control custom-checkbox">
+              <input
+                class="custom-control-input"
+                id="school"
+                type="checkbox"
+                value="school"
+                v-model="taskCategories"
+              />
+              <label class="custom-control-label" v-once for="school">{{ $t('school') }}</label>
+            </div>
+          </div>
+        </div>
+        <div class="col-6">
+          <div class="task-option">
+            <div class="custom-control custom-checkbox">
+              <input
+                class="custom-control-input"
+                id="chores"
+                type="checkbox"
+                value="chores"
+                v-model="taskCategories"
+              />
+              <label class="custom-control-label" v-once for="chores">{{ $t('chores') }}</label>
+            </div>
+          </div>
+          <div class="task-option">
+            <div class="custom-control custom-checkbox">
+              <input
+                class="custom-control-input"
+                id="creativity"
+                type="checkbox"
+                value="creativity"
+                v-model="taskCategories"
+              />
+              <label class="custom-control-label" v-once for="creativity">{{ $t('creativity') }}</label>
+            </div>
+          </div>
+          <div class="task-option">
+            <div class="custom-control custom-checkbox">
+              <input
+                class="custom-control-input"
+                id="self_care"
+                type="checkbox"
+                value="self_care"
+                v-model="taskCategories"
+              />
+              <label class="custom-control-label" v-once for="self_care">{{ $t('self_care') }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="section d-flex justify-content-center justin-outer-section"
+      :class="{top: modalPage > 1}"
+      v-if="!editing"
+    >
+      <div class="justin-section d-flex align-items-center">
+        <div class="featured-label">
+          <span class="rectangle"></span>
+          <span class="text">Justin</span>
+          <span class="rectangle"></span>
+        </div>
+        <div class="justin-message">
+          <div class="corner-decoration" :style="{top: '-2px', right: '-2px'}"></div>
+          <div class="corner-decoration" :style="{top: '-2px', left: '-2px'}"></div>
+          <div class="corner-decoration" :style="{bottom: '-2px', right: '-2px'}"></div>
+          <div class="corner-decoration" :style="{bottom: '-2px', left: '-2px'}"></div>
+          <div v-if="modalPage === 1">
+            <p v-once v-html="$t('justinIntroMessage1')"></p>
+            <p v-once>{{ $t('justinIntroMessageUsername') }}</p>
+          </div>
+          <div v-if="modalPage === 2">
+            <p>{{ $t('justinIntroMessageAppearance') }}</p>
+          </div>
+          <div v-if="modalPage === 3">
+            <p v-once>{{ $t('justinIntroMessage3') }}</p>
+          </div>
+        </div>
+        <div class="npc-justin-textbox"></div>
+      </div>
+    </div>
+    <div class="section mr-5 ml-5 first-page-footer" v-if="modalPage === 1">
+      <username-form @usernameConfirmed="modalPage += 1" :avatarIntro="true"></username-form>
+      <div class="small text-center" v-html="$t('usernameTOSRequirements')"></div>
+    </div>
+    <div class="section container footer" v-if="!editing && !(modalPage === 1)">
+      <div class="footer-left">
+        <div class="prev-outer" v-if="modalPage > 1" @click="prev()">
+          <div class="prev-arrow svg-icon" v-html="icons.arrowLeft"></div>
+          <div class="prev" v-once>{{ $t('prev') }}</div>
+        </div>
+      </div>
+      <div class="footer-center text-center circles">
+        <div class="circle" :class="{active: modalPage === 1}"></div>
+        <div class="circle" :class="{active: modalPage === 2}"></div>
+        <div class="circle" :class="{active: modalPage === 3}"></div>
+      </div>
+      <div class="footer-right">
+        <div class="next-outer" v-if="modalPage < 3" @click="next()">
+          <div class="next" v-once>{{$t('next')}}</div>
+          <div class="next-arrow svg-icon" v-html="icons.arrowRight"></div>
+        </div>
+        <div
+          class="next-outer"
+          v-if="modalPage === 3 && !loading"
+          @click="done()"
+          :class="{disabled: taskCategories.length === 0}"
+        >
+          <div class="next" v-once>{{$t('finish')}}</div>
+          <div class="next-arrow svg-icon" v-html="icons.arrowRight"></div>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/emptyView.vue b/website/client/src/components/emptyView.vue
index 2f97fe30a6..3c3b7b70fc 100644
--- a/website/client/src/components/emptyView.vue
+++ b/website/client/src/components/emptyView.vue
@@ -1,3 +1,4 @@
 <template>
-  <!-- Container component used when you only need an empty view to support children routes--><router-view />
+  <!-- Container component used when you only need an empty view to support children routes-->
+  <router-view />
 </template>
diff --git a/website/client/src/components/group-plans/billing.vue b/website/client/src/components/group-plans/billing.vue
index ee69b72da3..54a3354e53 100644
--- a/website/client/src/components/group-plans/billing.vue
+++ b/website/client/src/components/group-plans/billing.vue
@@ -7,38 +7,56 @@
       <table class="table alert alert-info">
         <tr v-if="group.purchased.plan.dateTerminated">
           <td class="alert alert-warning">
-            <span class="noninteractive-button btn-danger">{{ $t('canceledGroupPlan') }}</span><i class="glyphicon glyphicon-time">{{ $t('groupPlanCanceled') }}</i><strong>{{ dateTerminated }}</strong>
+            <span class="noninteractive-button btn-danger">{{ $t('canceledGroupPlan') }}</span>
+            <i class="glyphicon glyphicon-time">{{ $t('groupPlanCanceled') }}</i>
+            <strong>{{ dateTerminated }}</strong>
           </td>
-        </tr><tr v-if="!group.purchased.plan.dateTerminated">
+        </tr>
+        <tr v-if="!group.purchased.plan.dateTerminated">
           <td>
-            <h3>{{ $t('paymentDetails') }}</h3><p v-if="group.purchased.plan.planId">
+            <h3>{{ $t('paymentDetails') }}</h3>
+            <p v-if="group.purchased.plan.planId">
               {{ $t('groupSubscriptionPrice') }}
             </p>
           </td>
-        </tr><tr v-if="group.purchased.plan.extraMonths">
-          <td><span class="glyphicon glyphicon-credit-card"></span>{{ $t('purchasedGroupPlanPlanExtraMonths', purchasedGroupPlanPlanExtraMonths) }}</td>
-        </tr><tr v-if="group.purchased.plan.consecutive.count || group.purchased.plan.consecutive.offset">
+        </tr>
+        <tr v-if="group.purchased.plan.extraMonths">
           <td>
-            <span class="glyphicon glyphicon-forward"></span>{{ $t('consecutiveSubscription') }}<ul class="list-unstyled">
-              <li>{{ $t('consecutiveMonths') }} {{ group.purchased.plan.consecutive.count + group.purchased.plan.consecutive.offset }}</li><li>{{ $t('gemCapExtra') }} {{ group.purchased.plan.consecutive.gemCapExtra }}</li><li>{{ $t('mysticHourglasses') }} {{ group.purchased.plan.consecutive.trinkets }}</li></li>
+            <span class="glyphicon glyphicon-credit-card"></span>
+            {{ $t('purchasedGroupPlanPlanExtraMonths', purchasedGroupPlanPlanExtraMonths) }}
+          </td>
+        </tr>
+        <tr
+          v-if="group.purchased.plan.consecutive.count || group.purchased.plan.consecutive.offset"
+        >
+          <td>
+            <span class="glyphicon glyphicon-forward"></span>
+            {{ $t('consecutiveSubscription') }}
+            <ul class="list-unstyled">
+              <li>{{ $t('consecutiveMonths') }} {{ group.purchased.plan.consecutive.count + group.purchased.plan.consecutive.offset }}</li>
+              <li>{{ $t('gemCapExtra') }} {{ group.purchased.plan.consecutive.gemCapExtra }}</li>
+              <li>{{ $t('mysticHourglasses') }} {{ group.purchased.plan.consecutive.trinkets }}</li>
             </ul>
           </td>
         </tr>
       </table>
-    </div><div class="col-12 col-md-6 offset-md-3">
+    </div>
+    <div class="col-12 col-md-6 offset-md-3">
       <button
         v-if="group.purchased.plan.dateTerminated"
         class="btn btn-success btn-success"
         @click="upgradeGroup()"
       >
         {{ $t('upgrade') }}
-      </button><div
+      </button>
+      <div
         v-if="!group.purchased.plan.dateTerminated && group.purchased.plan.paymentMethod === 'Stripe'"
         class="btn btn-primary"
         @click="showStripeEdit({groupId: group.id})"
       >
         {{ $t('subUpdateCard') }}
-      </div><div
+      </div>
+      <div
         v-if="!group.purchased.plan.dateTerminated"
         class="btn btn-sm btn-danger"
         @click="cancelSubscriptionConfirm({group: group})"
diff --git a/website/client/src/components/group-plans/createGroupModalPages.vue b/website/client/src/components/group-plans/createGroupModalPages.vue
index 66c8ab1fbb..22b1621157 100644
--- a/website/client/src/components/group-plans/createGroupModalPages.vue
+++ b/website/client/src/components/group-plans/createGroupModalPages.vue
@@ -4,11 +4,13 @@
       v-if="activePage === PAGES.CREATE_GROUP"
       class="col-12"
     >
-      <h2>{{ $t('nameYourGroup') }}</h2><div class="form-group">
+      <h2>{{ $t('nameYourGroup') }}</h2>
+      <div class="form-group">
         <label
           class="control-label"
           for="new-group-name"
-        >{{ $t('name') }}</label><input
+        >{{ $t('name') }}</label>
+        <input
           id="new-group-name"
           v-model="newGroup.name"
           class="form-control input-medium option-content"
@@ -16,15 +18,18 @@
           type="text"
           :placeholder="$t('exampleGroupName')"
         >
-      </div><div class="form-group">
-        <label for="new-group-description">{{ $t('description') }}</label><textarea
+      </div>
+      <div class="form-group">
+        <label for="new-group-description">{{ $t('description') }}</label>
+        <textarea
           id="new-group-description"
           v-model="newGroup.description"
           class="form-control option-content"
           cols="3"
           :placeholder="$t('exampleGroupDesc')"
         ></textarea>
-      </div><div
+      </div>
+      <div
         v-if="newGroup.type === 'guild'"
         class="form-group text-left"
       >
@@ -35,21 +40,25 @@
             type="radio"
             name="new-group-privacy"
             value="private"
-          ><label class="custom-control-label">{{ $t('thisGroupInviteOnly') }}</label>
+          >
+          <label class="custom-control-label">{{ $t('thisGroupInviteOnly') }}</label>
         </div>
-      </div><div class="form-group text-left">
+      </div>
+      <div class="form-group text-left">
         <div class="custom-control custom-checkbox">
           <input
             id="create-group-leaderOnlyChallenges-checkbox"
             v-model="newGroup.leaderOnly.challenges"
             class="custom-control-input"
             type="checkbox"
-          ><label
+          >
+          <label
             class="custom-control-label"
             for="create-group-leaderOnlyChallenges-checkbox"
           >{{ $t('leaderOnlyChallenges') }}</label>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="newGroup.type === 'party'"
         class="form-group"
       >
@@ -58,7 +67,8 @@
           :value="$t('createGroupPlan')"
           @click="createGroup()"
         ></button>
-      </div><div class="form-group">
+      </div>
+      <div class="form-group">
         <button
           class="btn btn-primary btn-lg btn-block"
           :disabled="!newGroupIsReady"
@@ -67,11 +77,13 @@
           {{ $t('createGroupPlan') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="activePage === PAGES.PAY"
       class="col-12"
     >
-      <h2>{{ $t('choosePaymentMethod') }}</h2><div class="payments-column">
+      <h2>{{ $t('choosePaymentMethod') }}</h2>
+      <div class="payments-column">
         <button
           class="purchase btn btn-primary payment-button payment-item"
           @click="pay(PAYMENTS.STRIPE)"
@@ -79,8 +91,10 @@
           <div
             class="svg-icon credit-card-icon"
             v-html="icons.creditCardIcon"
-          ></div>{{ $t('card') }}
-        </button><amazon-button
+          ></div>
+          {{ $t('card') }}
+        </button>
+        <amazon-button
           class="payment-item"
           :amazon-data="pay(PAYMENTS.AMAZON)"
         />
diff --git a/website/client/src/components/group-plans/groupPlanOverviewModal.vue b/website/client/src/components/group-plans/groupPlanOverviewModal.vue
index 4b59dba838..d5b03a4c19 100644
--- a/website/client/src/components/group-plans/groupPlanOverviewModal.vue
+++ b/website/client/src/components/group-plans/groupPlanOverviewModal.vue
@@ -12,10 +12,12 @@
     >
       <h2 v-once>
         {{ $t('gettingStarted') }}
-      </h2><p v-once>
+      </h2>
+      <p v-once>
         {{ $t('congratsOnGroupPlan') }}
       </p>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-12">
         <div
           class="card"
@@ -24,9 +26,11 @@
           <div class="question-head">
             <div class="q">
               Q.
-            </div><div class="title">
+            </div>
+            <div class="title">
               {{ $t('whatsIncludedGroup') }}
-            </div><div
+            </div>
+            <div
               class="arrow float-right"
               @click="toggle('question1')"
             >
@@ -34,20 +38,23 @@
                 v-if="expandedQuestions.question1"
                 class="svg-icon"
                 v-html="icons.upIcon"
-              ></div><div
+              ></div>
+              <div
                 v-else
                 class="svg-icon"
                 v-html="icons.downIcon"
               ></div>
             </div>
-          </div><div
+          </div>
+          <div
             v-if="expandedQuestions.question1"
             class="question-body"
           >
             <p>{{ $t('whatsIncludedGroupDesc') }}</p>
           </div>
         </div>
-      </div><div class="col-12">
+      </div>
+      <div class="col-12">
         <div
           class="card"
           :class="{expanded: expandedQuestions.question2}"
@@ -55,9 +62,11 @@
           <div class="question-head">
             <div class="q">
               Q.
-            </div><div class="title">
+            </div>
+            <div class="title">
               {{ $t('howDoesBillingWork') }}
-            </div><div
+            </div>
+            <div
               class="arrow float-right"
               @click="toggle('question2')"
             >
@@ -65,20 +74,23 @@
                 v-if="expandedQuestions.question2"
                 class="svg-icon"
                 v-html="icons.upIcon"
-              ></div><div
+              ></div>
+              <div
                 v-else
                 class="svg-icon"
                 v-html="icons.downIcon"
               ></div>
             </div>
-          </div><div
+          </div>
+          <div
             v-if="expandedQuestions.question2"
             class="question-body"
           >
             <p>{{ $t('howDoesBillingWorkDesc') }}</p>
           </div>
         </div>
-      </div><div class="col-12">
+      </div>
+      <div class="col-12">
         <div
           class="card"
           :class="{expanded: expandedQuestions.question3}"
@@ -86,9 +98,11 @@
           <div class="question-head">
             <div class="q">
               Q.
-            </div><div class="title">
+            </div>
+            <div class="title">
               {{ $t('howToAssignTask') }}
-            </div><div
+            </div>
+            <div
               class="arrow float-right"
               @click="toggle('question3')"
             >
@@ -96,20 +110,24 @@
                 v-if="expandedQuestions.question3"
                 class="svg-icon"
                 v-html="icons.upIcon"
-              ></div><div
+              ></div>
+              <div
                 v-else
                 class="svg-icon"
                 v-html="icons.downIcon"
               ></div>
             </div>
-          </div><div
+          </div>
+          <div
             v-if="expandedQuestions.question3"
             class="question-body"
           >
-            <p>{{ $t('howToAssignTaskDesc') }}</p><div class="assign-tasks image-example"></div>
+            <p>{{ $t('howToAssignTaskDesc') }}</p>
+            <div class="assign-tasks image-example"></div>
           </div>
         </div>
-      </div><div class="col-12">
+      </div>
+      <div class="col-12">
         <div
           class="card"
           :class="{expanded: expandedQuestions.question4}"
@@ -117,9 +135,11 @@
           <div class="question-head">
             <div class="q">
               Q.
-            </div><div class="title">
+            </div>
+            <div class="title">
               {{ $t('howToRequireApproval') }}
-            </div><div
+            </div>
+            <div
               class="arrow float-right"
               @click="toggle('question4')"
             >
@@ -127,20 +147,26 @@
                 v-if="expandedQuestions.question4"
                 class="svg-icon"
                 v-html="icons.upIcon"
-              ></div><div
+              ></div>
+              <div
                 v-else
                 class="svg-icon"
                 v-html="icons.downIcon"
               ></div>
             </div>
-          </div><div
+          </div>
+          <div
             v-if="expandedQuestions.question4"
             class="question-body"
           >
-            <p>{{ $t('howToRequireApprovalDesc') }}</p><div class="requires-approval image-example"></div><p>{{ $t('howToRequireApprovalDesc2') }}</p><div class="approval-requested image-example"></div>
+            <p>{{ $t('howToRequireApprovalDesc') }}</p>
+            <div class="requires-approval image-example"></div>
+            <p>{{ $t('howToRequireApprovalDesc2') }}</p>
+            <div class="approval-requested image-example"></div>
           </div>
         </div>
-      </div><div class="col-12">
+      </div>
+      <div class="col-12">
         <div
           class="card"
           :class="{expanded: expandedQuestions.question5}"
@@ -148,9 +174,11 @@
           <div class="question-head">
             <div class="q">
               Q.
-            </div><div class="title">
+            </div>
+            <div class="title">
               {{ $t('whatIsGroupManager') }}
-            </div><div
+            </div>
+            <div
               class="arrow float-right"
               @click="toggle('question5')"
             >
@@ -158,20 +186,24 @@
                 v-if="expandedQuestions.question5"
                 class="svg-icon"
                 v-html="icons.upIcon"
-              ></div><div
+              ></div>
+              <div
                 v-else
                 class="svg-icon"
                 v-html="icons.downIcon"
               ></div>
             </div>
-          </div><div
+          </div>
+          <div
             v-if="expandedQuestions.question5"
             class="question-body"
           >
-            <p>{{ $t('whatIsGroupManagerDesc') }}</p><div class="promote-leader image-example"></div>
+            <p>{{ $t('whatIsGroupManagerDesc') }}</p>
+            <div class="promote-leader image-example"></div>
           </div>
         </div>
-      </div><div class="col-12 text-center">
+      </div>
+      <div class="col-12 text-center">
         <button
           class="btn btn-primary close-button"
           @click="close()"
diff --git a/website/client/src/components/group-plans/index.vue b/website/client/src/components/group-plans/index.vue
index 2042849bd5..25b597c2e7 100644
--- a/website/client/src/components/group-plans/index.vue
+++ b/website/client/src/components/group-plans/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="row">
-    <group-form-modal /><secondary-menu class="col-12">
+    <group-form-modal />
+    <secondary-menu class="col-12">
       <router-link
         class="nav-link"
         :to="{name: 'groupPlanDetailTaskInformation', params: {groupId}}"
@@ -8,14 +9,16 @@
         :class="{'active': $route.name === 'groupPlanDetailTaskInformation'}"
       >
         {{ $t('groupTaskBoard') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'groupPlanDetailInformation', params: {groupId}}"
         exact="exact"
         :class="{'active': $route.name === 'groupPlanDetailInformation'}"
       >
         {{ $t('groupInformation') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         v-if="isLeader"
         class="nav-link"
         :to="{name: 'groupPlanBilling', params: {groupId}}"
@@ -24,7 +27,8 @@
       >
         {{ $t('groupBilling') }}
       </router-link>
-    </secondary-menu><div class="col-12">
+    </secondary-menu>
+    <div class="col-12">
       <router-view />
     </div>
   </div>
diff --git a/website/client/src/components/group-plans/taskInformation.vue b/website/client/src/components/group-plans/taskInformation.vue
index bb609c2e74..d98baeedd6 100644
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/website/client/src/components/group-plans/taskInformation.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="standard-page">
-    <group-plan-overview-modal /><task-modal
+    <group-plan-overview-modal />
+    <task-modal
       ref="taskModal"
       :task="workingTask"
       :purpose="taskFormPurpose"
@@ -9,17 +10,21 @@
       @taskCreated="taskCreated"
       @taskEdited="taskEdited"
       @taskDestroyed="taskDestroyed"
-    /><div class="row tasks-navigation">
+    />
+    <div class="row tasks-navigation">
       <div class="col-12 col-md-4">
         <h1>{{ $t('groupTasksTitle') }}</h1>
-      </div><!-- @TODO: Abstract to component!--><div class="col-12 col-md-4">
+      </div>
+      <!-- @TODO: Abstract to component!-->
+      <div class="col-12 col-md-4">
         <input
           v-model="searchText"
           class="form-control input-search"
           type="text"
           :placeholder="$t('search')"
         >
-      </div><div
+      </div>
+      <div
         v-if="canCreateTasks"
         class="create-task-area d-flex"
       >
@@ -42,7 +47,8 @@
               ></div>
             </div>
           </div>
-        </transition><div
+        </transition>
+        <div
           id="create-task-btn"
           class="create-btn diamond-btn btn btn-success"
           :class="{open: openCreateBtn}"
@@ -52,7 +58,8 @@
             class="svg-icon"
             v-html="icons.positive"
           ></div>
-        </div><b-tooltip
+        </div>
+        <b-tooltip
           v-if="!openCreateBtn"
           target="create-task-btn"
           placement="bottom"
@@ -60,7 +67,8 @@
           {{ $t('addTaskToGroupPlan') }}
         </b-tooltip>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <task-column
         v-for="column in columns"
         :key="column"
@@ -71,7 +79,8 @@
         :group="group"
         :search-text="searchText"
         @editTask="editTask"
-@loadGroupCompletedTodos="loadGroupCompletedTodos" @taskDestroyed="taskDestroyed"
+        @loadGroupCompletedTodos="loadGroupCompletedTodos"
+        @taskDestroyed="taskDestroyed"
       />
     </div>
   </div>
diff --git a/website/client/src/components/groups/chat.vue b/website/client/src/components/groups/chat.vue
index 5dc1bba7f8..80d1a6a8f2 100644
--- a/website/client/src/components/groups/chat.vue
+++ b/website/client/src/components/groups/chat.vue
@@ -6,10 +6,12 @@
         :class="{accepted: communityGuidelinesAccepted }"
       >
         {{ label }}
-      </h3><div
+      </h3>
+      <div
         v-markdown="$t('markdownFormattingHelp')"
         class="float-right"
-      ></div><div
+      ></div>
+      <div
         v-if="communityGuidelinesAccepted"
         class="row"
       >
@@ -22,8 +24,14 @@
           @keydown="updateCarretPosition"
           @keyup.ctrl.enter="sendMessageShortcut()"
           @keydown.tab="handleTab($event)"
-@keydown.up="selectPreviousAutocomplete($event)" @keydown.down="selectNextAutocomplete($event)" @keydown.enter="selectAutocomplete($event)" @keydown.esc="handleEscape($event)" @paste="disableMessageSendShortcut()"
-        ></textarea><span>{{ currentLength }} / 3000</span><autocomplete
+          @keydown.up="selectPreviousAutocomplete($event)"
+          @keydown.down="selectNextAutocomplete($event)"
+          @keydown.enter="selectAutocomplete($event)"
+          @keydown.esc="handleEscape($event)"
+          @paste="disableMessageSendShortcut()"
+        ></textarea>
+        <span>{{ currentLength }} / 3000</span>
+        <autocomplete
           ref="autocomplete"
           :text="newMessage"
           :textbox="textbox"
@@ -32,7 +40,9 @@
           :chat="group.chat"
           @select="selectedAutocomplete"
         />
-      </div><community-guidelines /><div class="row chat-actions">
+      </div>
+      <community-guidelines />
+      <div class="row chat-actions">
         <div class="col-6 chat-receive-actions">
           <button
             v-once
@@ -40,14 +50,16 @@
             @click="fetchRecentMessages()"
           >
             {{ $t('fetchRecentMessages') }}
-          </button><button
+          </button>
+          <button
             v-once
             class="btn btn-secondary float-left"
             @click="reverseChat()"
           >
             {{ $t('reverseChat') }}
           </button>
-        </div><div class="col-6 chat-send-actions">
+        </div>
+        <div class="col-6 chat-send-actions">
           <button
             class="btn btn-primary send-chat float-right"
             :disabled="!communityGuidelinesAccepted"
@@ -56,8 +68,11 @@
             {{ $t('send') }}
           </button>
         </div>
-      </div><slot name="additionRow"></slot><div class="row">
-        <div class="hr col-12"></div><chat-message
+      </div>
+      <slot name="additionRow"></slot>
+      <div class="row">
+        <div class="hr col-12"></div>
+        <chat-message
           :chat.sync="group.chat"
           :group-type="group.type"
           :group-id="group._id"
diff --git a/website/client/src/components/groups/communityGuidelines.vue b/website/client/src/components/groups/communityGuidelines.vue
index 8ca7783c22..9249c562a1 100644
--- a/website/client/src/components/groups/communityGuidelines.vue
+++ b/website/client/src/components/groups/communityGuidelines.vue
@@ -7,7 +7,8 @@
       v-once
       class="col col-sm-12 col-xl-8"
       v-html="$t('communityGuidelinesIntro')"
-    ></div><div class="col-md-auto col-md-12 col-xl-4">
+    ></div>
+    <div class="col-md-auto col-md-12 col-xl-4">
       <button
         v-once
         class="btn btn-info btn-follow-guidelines"
diff --git a/website/client/src/components/groups/createPartyModal.vue b/website/client/src/components/groups/createPartyModal.vue
index 315c02bd90..8b00d4e06c 100644
--- a/website/client/src/components/groups/createPartyModal.vue
+++ b/website/client/src/components/groups/createPartyModal.vue
@@ -8,16 +8,19 @@
       slot="modal-header"
       class="header-wrap"
     >
-      <div class="quest_screen"></div><div class="row heading">
+      <div class="quest_screen"></div>
+      <div class="row heading">
         <div class="col-12 text-center pr-5 pl-5">
           <h2 v-once>
             {{ $t('playInPartyTitle') }}
-          </h2><p
+          </h2>
+          <p
             v-once
             class="mb-4"
           >
             {{ $t('playInPartyDescription') }}
-          </p><button
+          </p>
+          <button
             v-once
             class="btn btn-primary"
             @click="createParty()"
@@ -26,11 +29,15 @@
           </button>
         </div>
       </div>
-    </div><div class="row grey-row">
+    </div>
+    <div class="row grey-row">
       <div class="col-12 text-center">
-        <div class="join-party"></div><h2 v-once>
+        <div class="join-party"></div>
+        <h2 v-once>
           {{ $t('wantToJoinPartyTitle') }}
-        </h2><p v-html="$t('wantToJoinPartyDescription')"></p><div
+        </h2>
+        <p v-html="$t('wantToJoinPartyDescription')"></p>
+        <div
           class="form-group"
           @click="copyUsername"
         >
@@ -38,14 +45,18 @@
             <label
               v-once
               class="mr-3"
-            >{{ $t('username') }}</label><div class="flex-grow-1">
+            >{{ $t('username') }}</label>
+            <div class="flex-grow-1">
               <div class="input-group-prepend input-group-text">
-                @<div class="text">
+                @
+                <div class="text">
                   {{ user.auth.local.username }}
-                </div><div
+                </div>
+                <div
                   class="svg-icon copy-icon"
                   v-html="icons.copy"
-                ></div><div
+                ></div>
+                <div
                   v-once
                   class="small"
                 >
diff --git a/website/client/src/components/groups/discovery.vue b/website/client/src/components/groups/discovery.vue
index da485f11b9..a9034700e8 100644
--- a/website/client/src/components/groups/discovery.vue
+++ b/website/client/src/components/groups/discovery.vue
@@ -3,7 +3,8 @@
     <sidebar
       @search="updateSearch"
       @filter="updateFilters"
-    /><div class="standard-page">
+    />
+    <div class="standard-page">
       <div class="header row">
         <div class="col-8">
           <h1
@@ -12,20 +13,24 @@
           >
             {{ $t('publicGuilds') }}
           </h1>
-        </div><div class="col-4">
-<!-- @TODO: Add when we implement recent activity .float-rightspan.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
-class="btn btn-secondary create-group-button float-right"
-@click="createGroup()"
->
-<div
-class="svg-icon positive-icon"
-v-html="icons.positiveIcon"
-></div><span v-once>{{ $t('createGuild2') }}</span>
-</button>
         </div>
-      </div><div class="row">
+        <div class="col-4">
+          <!-- @TODO: Add when we implement recent activity .float-rightspan.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
+            class="btn btn-secondary create-group-button float-right"
+            @click="createGroup()"
+          >
+            <div
+              class="svg-icon positive-icon"
+              v-html="icons.positiveIcon"
+            ></div>
+            <span v-once>{{ $t('createGuild2') }}</span>
+          </button>
+        </div>
+      </div>
+      <div class="row">
         <div
           v-if="!loading && filteredGuilds.length === 0"
           class="no-guilds text-center col-md-6 offset-md-3"
@@ -34,14 +39,16 @@ v-html="icons.positiveIcon"
             {{ $t('noGuildsMatchFilters') }}
           </h2>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-md-12">
           <public-guild-item
             v-for="guild in filteredGuilds"
             :key="guild._id"
             :guild="guild"
             :display-leave="true"
-          /><mugen-scroll
+          />
+          <mugen-scroll
             v-show="loading"
             :handler="fetchGuilds"
             :should-handle="!loading && !this.hasLoadedAllGuilds"
diff --git a/website/client/src/components/groups/group.vue b/website/client/src/components/groups/group.vue
index 1034ed5124..63fecd0dfb 100644
--- a/website/client/src/components/groups/group.vue
+++ b/website/client/src/components/groups/group.vue
@@ -3,16 +3,26 @@
     v-if="group._id"
     class="row"
   >
-    <group-form-modal v-if="isParty" /><start-quest-modal :group="this.group" /><quest-details-modal :group="this.group" /><participant-list-modal :group="this.group" /><group-gems-modal /><div class="col-12 col-sm-8 standard-page">
+    <group-form-modal v-if="isParty" />
+    <start-quest-modal :group="this.group" />
+    <quest-details-modal :group="this.group" />
+    <participant-list-modal :group="this.group" />
+    <group-gems-modal />
+    <div class="col-12 col-sm-8 standard-page">
       <div class="row">
         <div class="col-12 col-md-6 title-details">
-          <h1>{{ group.name }}</h1><div>
-            <span class="mr-1 ml-0"><strong v-once>{{ $t('groupLeader') }}:</strong><user-link
-              class="mx-1"
-              :user="group.leader"
-            /></span>
+          <h1>{{ group.name }}</h1>
+          <div>
+            <span class="mr-1 ml-0">
+              <strong v-once>{{ $t('groupLeader') }}:</strong>
+              <user-link
+                class="mx-1"
+                :user="group.leader"
+              />
+            </span>
           </div>
-        </div><div class="col-12 col-md-6">
+        </div>
+        <div class="col-12 col-md-6">
           <div class="row icon-row">
             <div
               class="col-4 offset-4"
@@ -26,22 +36,27 @@
                   v-if="group.memberCount > 1000"
                   class="svg-icon shield"
                   v-html="icons.goldGuildBadgeIcon"
-                ></div><div
+                ></div>
+                <div
                   v-if="group.memberCount > 100 && group.memberCount < 999"
                   class="svg-icon shield"
                   v-html="icons.silverGuildBadgeIcon"
-                ></div><div
+                ></div>
+                <div
                   v-if="group.memberCount < 100"
                   class="svg-icon shield"
                   v-html="icons.bronzeGuildBadgeIcon"
-                ></div><span class="number">{{ group.memberCount | abbrNum }}</span><div
+                ></div>
+                <span class="number">{{ group.memberCount | abbrNum }}</span>
+                <div
                   v-once
                   class="member-list label"
                 >
                   {{ $t('memberList') }}
                 </div>
               </div>
-            </div><div
+            </div>
+            <div
               v-if="!isParty"
               class="col-4"
             >
@@ -52,7 +67,9 @@
                 <div
                   class="svg-icon gem"
                   v-html="icons.gem"
-                ></div><span class="number">{{ group.balance * 4 }}</span><div
+                ></div>
+                <span class="number">{{ group.balance * 4 }}</span>
+                <div
                   v-once
                   class="label"
                 >
@@ -62,7 +79,8 @@
             </div>
           </div>
         </div>
-      </div><chat
+      </div>
+      <chat
         :label="$t('chat')"
         :group="group"
         :placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')"
@@ -79,7 +97,8 @@
           </div>
         </template>
       </chat>
-    </div><div class="col-12 col-sm-4 sidebar">
+    </div>
+    <div class="col-12 col-sm-4 sidebar">
       <div
         class="row"
         :class="{'guild-background': !isParty}"
@@ -93,7 +112,8 @@
             >
               {{ $t('upgrade') }}
             </button>
-          </div><div class="button-container">
+          </div>
+          <div class="button-container">
             <button
               v-if="isLeader || isAdmin"
               v-once
@@ -103,7 +123,8 @@
             >
               {{ $t('edit') }}
             </button>
-          </div><div class="button-container">
+          </div>
+          <div class="button-container">
             <button
               v-if="!isMember"
               class="btn btn-success btn-success"
@@ -111,38 +132,47 @@
             >
               {{ $t('join') }}
             </button>
-          </div><div class="button-container">
+          </div>
+          <div class="button-container">
             <button
               v-once
               class="btn btn-primary"
               @click="showInviteModal()"
             >
               {{ $t('invite') }}
-            </button><!-- @TODO: hide the invitation button if there's an active group plan and the player is not the leader-->
-          </div><div class="button-container">
+            </button>
+            <!-- @TODO: hide the invitation button if there's an active group plan and the player is not the leader-->
+          </div>
+          <div class="button-container">
             <!-- @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}} // Suggest making the button visible to the leader too - useful for them to test how the feature works or to send a note to themself. -- Alys-->
-          </div><div class="button-container">
+          </div>
+          <div class="button-container">
             <!-- @TODO: V2 button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}} // Suggest removing the isMember restriction - it's okay if non-members donate to a public guild. Also probably allow it for parties if parties can buy imagery. -- Alys-->
           </div>
         </div>
-      </div><div>
+      </div>
+      <div>
         <quest-sidebar-section
           v-if="isParty"
           :group="group"
-        /><sidebar-section
+        />
+        <sidebar-section
           v-if="!isParty"
           :title="$t('guildSummary')"
         >
           <p v-markdown="group.summary"></p>
-        </sidebar-section><sidebar-section :title="$t('groupDescription')">
+        </sidebar-section>
+        <sidebar-section :title="$t('groupDescription')">
           <p v-markdown="group.description"></p>
-        </sidebar-section><sidebar-section
+        </sidebar-section>
+        <sidebar-section
           :title="$t('challenges')"
           :tooltip="$t('challengeDetails')"
         >
           <group-challenges :group-id="searchId" />
         </sidebar-section>
-      </div><div class="text-center">
+      </div>
+      <div class="text-center">
         <button
           v-if="isMember"
           class="btn btn-danger"
diff --git a/website/client/src/components/groups/groupFormModal.vue b/website/client/src/components/groups/groupFormModal.vue
index c6797031da..47734d8145 100644
--- a/website/client/src/components/groups/groupFormModal.vue
+++ b/website/client/src/components/groups/groupFormModal.vue
@@ -7,23 +7,33 @@
   >
     <form @submit.stop.prevent="submit">
       <div class="form-group">
-        <label><strong v-once>{{ $t('name') }} *</strong></label><b-form-input
+        <label>
+          <strong v-once>{{ $t('name') }} *</strong>
+        </label>
+        <b-form-input
           v-model="workingGroup.name"
           type="text"
           :placeholder="$t('newGuildPlaceholder')"
         />
-      </div><div class="form-group">
-        <label><strong v-once>{{ $t('privacySettings') }} *</strong></label><br><div class="custom-control custom-checkbox">
+      </div>
+      <div class="form-group">
+        <label>
+          <strong v-once>{{ $t('privacySettings') }} *</strong>
+        </label>
+        <br>
+        <div class="custom-control custom-checkbox">
           <input
             id="onlyLeaderCreatesChallenges"
             v-model="workingGroup.onlyLeaderCreatesChallenges"
             class="custom-control-input"
             type="checkbox"
-          ><label
+          >
+          <label
             v-once
             class="custom-control-label"
             for="onlyLeaderCreatesChallenges"
-          >{{ $t('onlyLeaderCreatesChallenges') }}</label><div
+          >{{ $t('onlyLeaderCreatesChallenges') }}</label>
+          <div
             id="groupPrivateDescription1"
             class="icon"
             :title="$t('privateDescription')"
@@ -32,93 +42,125 @@
               class="svg-icon"
               v-html="icons.information"
             ></div>
-          </div><b-tooltip
+          </div>
+          <b-tooltip
             :title="$t('onlyLeaderCreatesChallengesDetail')"
             target="groupPrivateDescription1"
           />
-        </div><!-- br--><!-- @TODO Implement in V2 .custom-control.custom-checkboxinput.custom-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged")
+        </div>
+        <!-- br-->
+        <!-- @TODO Implement in V2 .custom-control.custom-checkboxinput.custom-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged")
 label.custom-control-label(v-once) {{ $t('guildLeaderCantBeMessaged') }}
 // "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
 // @TODO discuss the impact of this with moderators before implementing
---><br><div
-v-if="!isParty && !this.workingGroup.id"
-class="custom-control custom-checkbox"
->
-<input
-id="privateGuild"
-v-model="workingGroup.privateGuild"
-class="custom-control-input"
-type="checkbox"
-><label
-v-once
-class="custom-control-label"
-for="privateGuild"
->{{ $t('privateGuild') }}</label><div
-id="groupPrivateDescription2"
-class="icon"
-:title="$t('privateDescription')"
->
-<div
-class="svg-icon"
-v-html="icons.information"
-></div>
-</div><b-tooltip
-:title="$t('privateDescription')"
-                                                                                 target="groupPrivateDescription2"
-/>
-        </div><!-- br--><!-- @TODO: Implement in v2 .custom-control.custom-checkbox(v-if='!creatingParty')input.custom-control-input(type="checkbox", v-model="workingGroup.allowGuildInvitationsFromNonMembers")
+        -->
+        <br>
+        <div
+          v-if="!isParty && !this.workingGroup.id"
+          class="custom-control custom-checkbox"
+        >
+          <input
+            id="privateGuild"
+            v-model="workingGroup.privateGuild"
+            class="custom-control-input"
+            type="checkbox"
+          >
+          <label
+            v-once
+            class="custom-control-label"
+            for="privateGuild"
+          >{{ $t('privateGuild') }}</label>
+          <div
+            id="groupPrivateDescription2"
+            class="icon"
+            :title="$t('privateDescription')"
+          >
+            <div
+              class="svg-icon"
+              v-html="icons.information"
+            ></div>
+          </div>
+          <b-tooltip
+            :title="$t('privateDescription')"
+            target="groupPrivateDescription2"
+          />
+        </div>
+        <!-- br-->
+        <!-- @TODO: Implement in v2 .custom-control.custom-checkbox(v-if='!creatingParty')input.custom-control-input(type="checkbox", v-model="workingGroup.allowGuildInvitationsFromNonMembers")
 label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
 // "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members",
--->
-      </div><div
+        -->
+      </div>
+      <div
         v-if="!isParty"
         class="form-group"
       >
-        <label><strong v-once>{{ $t('guildSummary') }} *</strong></label><div class="summary-count">
+        <label>
+          <strong v-once>{{ $t('guildSummary') }} *</strong>
+        </label>
+        <div
+          class="summary-count"
+        >
           {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
-        </div><textarea
+        </div>
+        <textarea
           v-model="workingGroup.summary"
           class="form-control summary-textarea"
           :placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildSummaryPlaceholder')"
-        ></textarea><!-- @TODO: need summary only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
-      </div><div class="form-group">
-        <label><strong v-once>{{ $t('groupDescription') }} *</strong></label><a
+        ></textarea>
+        <!-- @TODO: need summary only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
+      </div>
+      <div class="form-group">
+        <label>
+          <strong v-once>{{ $t('groupDescription') }} *</strong>
+        </label>
+        <a
           v-markdown="$t('markdownFormattingHelp')"
           class="float-right"
-        ></a><textarea
+        ></a>
+        <textarea
           v-model="workingGroup.description"
           class="form-control description-textarea"
           type="text"
           textarea="textarea"
           :placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildDescriptionPlaceholder')"
         ></textarea>
-      </div><div
+      </div>
+      <div
         v-if="creatingParty && !workingGroup.id"
         class="form-group"
       >
-        <span><toggleSwitch
-          v-model="inviteMembers"
-          :label="$t('inviteMembersNow')"
-        /></span>
-      </div><div
+        <span>
+          <toggleSwitch
+            v-model="inviteMembers"
+            :label="$t('inviteMembersNow')"
+          />
+        </span>
+      </div>
+      <div
         v-if="!creatingParty && !isParty"
         class="form-group"
         style="position: relative;"
       >
-        <label><strong v-once>{{ $t('categories') }} *</strong></label><div
+        <label>
+          <strong v-once>{{ $t('categories') }} *</strong>
+        </label>
+        <div
           class="category-wrap"
           @click.prevent="toggleCategorySelect"
         >
           <span
             v-if="workingGroup.categories.length === 0"
             class="category-select"
-          >{{ $t('none') }}</span><div
+          >{{ $t('none') }}</span>
+          <div
             v-for="category in workingGroup.categories"
             class="category-label"
           >
             {{ $t(categoriesHashByKey[category]) }}
           </div>
-        </div><div
+        </div>
+        <div
           v-if="showCategorySelect"
           class="category-box"
         >
@@ -135,42 +177,54 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
                 class="custom-control-input"
                 type="checkbox"
                 :value="group.key"
-              ><label
+              >
+              <label
                 v-once
                 class="custom-control-label"
                 :for="`category-${group.key}`"
               >{{ $t(group.label) }}</label>
             </div>
-          </div><button
+          </div>
+          <button
             class="btn btn-primary"
             @click.prevent="toggleCategorySelect"
           >
             {{ $t('close') }}
           </button>
-        </div><!-- @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
-      </div><div
+        </div>
+        <!-- @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
+      </div>
+      <div
         v-if="inviteMembers && !workingGroup.id"
         class="form-group"
       >
-        <label><strong v-once>Invite via Email or User ID</strong><p v-once>{{ $t('inviteMembersHowTo') }} *</p></label><div>
+        <label>
+          <strong v-once>Invite via Email or User ID</strong>
+          <p v-once>{{ $t('inviteMembersHowTo') }} *</p>
+        </label>
+        <div>
           <div v-for="(member, index) in membersToInvite">
             <input
               v-model="member.value"
               type="text"
-            ><button @click.prevent="removeMemberToInvite(index)">
+            >
+            <button @click.prevent="removeMemberToInvite(index)">
               Remove
             </button>
-          </div><div>
+          </div>
+          <div>
             <input
               v-model="newMemberToInvite.value"
               type="text"
               placeholder="Email address or User ID"
-            ><button @click.prevent="addMemberToInvite()">
+            >
+            <button @click.prevent="addMemberToInvite()">
               Add
             </button>
           </div>
         </div>
-      </div><div class="form-group text-center">
+      </div>
+      <div class="form-group text-center">
         <div
           v-if="!this.workingGroup.id"
           class="item-with-icon"
@@ -178,20 +232,24 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
           <div
             class="svg-icon"
             v-html="icons.gem"
-          ></div><span class="count">4</span>
-        </div><button
+          ></div>
+          <span class="count">4</span>
+        </div>
+        <button
           v-if="!workingGroup.id"
           class="btn btn-primary btn-md"
           :disabled="!workingGroup.name || !workingGroup.description"
         >
           {{ creatingParty ? $t('createParty') : $t('createGuild') }}
-        </button><button
+        </button>
+        <button
           v-if="workingGroup.id"
           class="btn btn-primary btn-md"
           :disabled="!workingGroup.name || !workingGroup.description"
         >
           {{ isParty ? $t('updateParty') : $t('updateGuild') }}
-        </button><div
+        </button>
+        <div
           v-if="!this.workingGroup.id"
           v-once
           class="gem-description"
diff --git a/website/client/src/components/groups/groupGemsModal.vue b/website/client/src/components/groups/groupGemsModal.vue
index 98eda3b0da..b060ebf8ed 100644
--- a/website/client/src/components/groups/groupGemsModal.vue
+++ b/website/client/src/components/groups/groupGemsModal.vue
@@ -11,7 +11,8 @@
           <h3>{{ $t('groupGemsDesc') }}</h3>
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <div class="col-12 text-center">
         <button
           class="btn btn-primary"
diff --git a/website/client/src/components/groups/groupPlan.vue b/website/client/src/components/groups/groupPlan.vue
index b2fe8ce235..1cce573cc0 100644
--- a/website/client/src/components/groups/groupPlan.vue
+++ b/website/client/src/components/groups/groupPlan.vue
@@ -1,75 +1,99 @@
 <template>
-  <!-- @TODO: Move to group plans folder--><div>
+  <!-- @TODO: Move to group plans folder-->
+  <div>
     <div>
       <div class="header">
         <h1 class="text-center">
           Need more for your Group?
-        </h1><div class="row">
+        </h1>
+        <div class="row">
           <div class="col-8 offset-2 text-center">
             <h2 class="sub-text">
               {{ $t('groupBenefitsDescription') }}
             </h2>
           </div>
         </div>
-      </div><div class="container benefits">
+      </div>
+      <div class="container benefits">
         <div class="row">
           <div class="col-4">
             <div class="box">
               <img
                 class="box1"
                 src="~@/assets/images/group-plans/group-14@3x.png"
-              ><hr><h2>{{ $t('teamBasedTasks') }}</h2><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!</p>
+              >
+              <hr>
+              <h2>{{ $t('teamBasedTasks') }}</h2>
+              <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!</p>
             </div>
-          </div><div class="col-4">
+          </div>
+          <div class="col-4">
             <div class="box">
               <img
                 class="box2"
                 src="~@/assets/images/group-plans/group-12@3x.png"
-              ><hr><h2>Group Management Controls</h2><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.</p>
+              >
+              <hr>
+              <h2>Group Management Controls</h2>
+              <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.</p>
             </div>
-          </div><div class="col-4">
+          </div>
+          <div class="col-4">
             <div class="box">
               <img
                 class="box3"
                 src="~@/assets/images/group-plans/group-13@3x.png"
-              ><hr><h2>In-Game Benefits</h2><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.</p>
+              >
+              <hr>
+              <h2>In-Game Benefits</h2>
+              <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.</p>
             </div>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="upgradingGroup._id"
         id="upgrading-group"
         class="container payment-options"
       >
         <h1 class="text-center purple-header">
           Are you ready to upgrade?
-        </h1><div class="row">
+        </h1>
+        <div class="row">
           <div class="col-12 text-center">
             <div class="purple-box">
               <div class="amount-section">
                 <div class="dollar">
                   $
-                </div><div class="number">
+                </div>
+                <div class="number">
                   9
-                </div><div class="name">
+                </div>
+                <div class="name">
                   Group Owner Subscription
                 </div>
-              </div><div class="plus">
+              </div>
+              <div class="plus">
                 <div
                   class="svg-icon"
                   v-html="icons.positiveIcon"
                 ></div>
-              </div><div class="amount-section">
+              </div>
+              <div class="amount-section">
                 <div class="dollar">
                   $
-                </div><div class="number">
+                </div>
+                <div class="number">
                   3
-                </div><div class="name">
+                </div>
+                <div class="name">
                   Each Individual Group Member
                 </div>
               </div>
-            </div><div class="box payment-providers">
-              <h3>Choose your payment method</h3><div class="payments-column">
+            </div>
+            <div class="box payment-providers">
+              <h3>Choose your payment method</h3>
+              <div class="payments-column">
                 <button
                   class="purchase btn btn-primary payment-button payment-item"
                   @click="pay(PAYMENTS.STRIPE)"
@@ -77,8 +101,10 @@
                   <div
                     class="svg-icon credit-card-icon"
                     v-html="icons.creditCardIcon"
-                  ></div>{{ $t('card') }}
-                </button><amazon-button
+                  ></div>
+                  {{ $t('card') }}
+                </button>
+                <amazon-button
                   class="payment-item"
                   :amazon-data="pay(PAYMENTS.AMAZON)"
                 />
@@ -86,7 +112,8 @@
             </div>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="!upgradingGroup._id"
         class="container col-6 offset-3 create-option"
       >
@@ -94,7 +121,8 @@
           <h1 class="col-12 text-center purple-header">
             Create your Group today!
           </h1>
-        </div><div class="row">
+        </div>
+        <div class="row">
           <div class="col-12 text-center">
             <button
               class="btn btn-primary create-group"
@@ -103,31 +131,41 @@
               Create Your New Group
             </button>
           </div>
-        </div><div class="row pricing">
+        </div>
+        <div class="row pricing">
           <div class="col-5">
             <div class="dollar">
               $
-            </div><div class="number">
-              9
-            </div><div class="name">
-              <div>Group Owner</div><div>Subscription</div>
             </div>
-          </div><div class="col-1">
+            <div class="number">
+              9
+            </div>
+            <div class="name">
+              <div>Group Owner</div>
+              <div>Subscription</div>
+            </div>
+          </div>
+          <div class="col-1">
             <div class="plus">
               +
             </div>
-          </div><div class="col-6">
+          </div>
+          <div class="col-6">
             <div class="dollar">
               $
-            </div><div class="number">
+            </div>
+            <div class="number">
               3
-            </div><div class="name">
-              <div>Each Additional</div><div>Member</div>
+            </div>
+            <div class="name">
+              <div>Each Additional</div>
+              <div>Member</div>
             </div>
           </div>
         </div>
       </div>
-    </div><b-modal
+    </div>
+    <b-modal
       id="group-plan-modal"
       title="Select Payment"
       size="md"
@@ -141,7 +179,8 @@
           <label
             class="control-label"
             for="new-group-name"
-          >Name</label><input
+          >Name</label>
+          <input
             id="new-group-name"
             v-model="newGroup.name"
             class="form-control input-medium option-content"
@@ -149,15 +188,18 @@
             type="text"
             placeholder="Name"
           >
-        </div><div class="form-group">
-          <label for="new-group-description">{{ $t('description') }}</label><textarea
+        </div>
+        <div class="form-group">
+          <label for="new-group-description">{{ $t('description') }}</label>
+          <textarea
             id="new-group-description"
             v-model="newGroup.description"
             class="form-control option-content"
             cols="3"
             :placeholder="$t('description')"
           ></textarea>
-        </div><div
+        </div>
+        <div
           v-if="type === 'guild'"
           class="form-group"
         >
@@ -168,21 +210,25 @@
               type="radio"
               name="new-group-privacy"
               value="private"
-            ><label class="custom-control-label">{{ $t('inviteOnly') }}</label>
+            >
+            <label class="custom-control-label">{{ $t('inviteOnly') }}</label>
           </div>
-        </div><div class="form-group">
+        </div>
+        <div class="form-group">
           <div class="custom-control custom-checkbox">
             <input
               id="create-group-leaderOnlyChallenges-checkbox"
               v-model="newGroup.leaderOnly.challenges"
               class="custom-control-input"
               type="checkbox"
-            ><label
+            >
+            <label
               class="custom-control-label"
               for="create-group-leaderOnlyChallenges-checkbox"
             >{{ $t('leaderOnlyChallenges') }}</label>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="type === 'party'"
           class="form-group"
         >
@@ -191,7 +237,8 @@
             :value="$t('createGroupPlan')"
             @click="createGroup()"
           ></button>
-        </div><div class="form-group">
+        </div>
+        <div class="form-group">
           <button
             class="btn btn-primary btn-lg btn-block"
             :disabled="!newGroupIsReady"
@@ -200,12 +247,14 @@
             {{ $t('createGroupPlan') }}
           </button>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="activePage === PAGES.PAY"
         class="col-12"
       >
         <div class="text-center">
-          <h3>Choose your payment method</h3><div class="payments-column mx-auto">
+          <h3>Choose your payment method</h3>
+          <div class="payments-column mx-auto">
             <button
               class="purchase btn btn-primary payment-button payment-item"
               @click="pay(PAYMENTS.STRIPE)"
@@ -213,8 +262,10 @@
               <div
                 class="svg-icon credit-card-icon"
                 v-html="icons.creditCardIcon"
-              ></div>{{ $t('card') }}
-            </button><amazon-button
+              ></div>
+              {{ $t('card') }}
+            </button>
+            <amazon-button
               class="payment-item"
               :amazon-data="pay(PAYMENTS.AMAZON)"
             />
diff --git a/website/client/src/components/groups/index.vue b/website/client/src/components/groups/index.vue
index 1a8ec42e89..9744b5d960 100644
--- a/website/client/src/components/groups/index.vue
+++ b/website/client/src/components/groups/index.vue
@@ -8,22 +8,26 @@
         :class="{'active': $route.name === 'tavern'}"
       >
         {{ $t('tavern') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'myGuilds'}"
         :class="{'active': $route.name === 'myGuilds'}"
       >
         {{ $t('myGuilds') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'guildsDiscovery'}"
         :class="{'active': $route.name === 'guildsDiscovery'}"
       >
         {{ $t('guildsDiscovery') }}
       </router-link>
-    </secondary-menu><div class="col-12">
+    </secondary-menu>
+    <div class="col-12">
       <router-view />
-    </div><group-form-modal />
+    </div>
+    <group-form-modal />
   </div>
 </template>
 
diff --git a/website/client/src/components/groups/inviteModal.vue b/website/client/src/components/groups/inviteModal.vue
index fd1080befb..c7d8f577d7 100644
--- a/website/client/src/components/groups/inviteModal.vue
+++ b/website/client/src/components/groups/inviteModal.vue
@@ -5,9 +5,11 @@
     :hide-footer="true"
   >
     <div>
-      <strong>{{ $t('inviteEmailUsername') }}</strong><div class="small">
+      <strong>{{ $t('inviteEmailUsername') }}</strong>
+      <div class="small">
         {{ $t('inviteEmailUsernameInfo') }}
-      </div><div v-for="(invite, index) in invites">
+      </div>
+      <div v-for="(invite, index) in invites">
         <div class="input-group">
           <div
             v-if="index === invites.length - 1 && invite.text.length === 0"
@@ -17,7 +19,8 @@
               class="svg-icon positive-icon"
               v-html="icons.positiveIcon"
             ></div>
-          </div><input
+          </div>
+          <input
             v-model="invite.text"
             class="form-control"
             type="text"
@@ -26,18 +29,21 @@
             @keyup="expandInviteList"
             @change="checkInviteList"
           >
-        </div><div
+        </div>
+        <div
           v-if="invite.error"
           class="input-error text-center mt-2"
         >
           {{ invite.error }}
         </div>
       </div>
-    </div><div class="modal-footer d-flex justify-content-center">
+    </div>
+    <div class="modal-footer d-flex justify-content-center">
       <a
         class="mr-3"
         @click="close()"
-      >{{ $t('cancel') }}</a><button
+      >{{ $t('cancel') }}</a>
+      <button
         class="btn btn-primary"
         :class="{disabled: cannotSubmit}"
         :disabled="cannotSubmit"
diff --git a/website/client/src/components/groups/membersModal.vue b/website/client/src/components/groups/membersModal.vue
index 4e876e7b15..6cc52a7a36 100644
--- a/website/client/src/components/groups/membersModal.vue
+++ b/website/client/src/components/groups/membersModal.vue
@@ -1,10 +1,12 @@
 <template>
-  <!-- @TODO: Move this to a member directory--><div>
+  <!-- @TODO: Move this to a member directory-->
+  <div>
     <remove-member-modal
       :member-to-remove="memberToRemove"
       :group-id="this.groupId"
       @member-removed="memberRemoved"
-    /><b-modal
+    />
+    <b-modal
       id="members-modal"
       :title="$t('createGuild')"
       size="md"
@@ -19,7 +21,8 @@
             <h1 v-once>
               {{ $t('members') }}
             </h1>
-          </div><div class="col-6">
+          </div>
+          <div class="col-6">
             <button
               class="close"
               type="button"
@@ -29,7 +32,8 @@
               <span aria-hidden="true">×</span>
             </button>
           </div>
-        </div><div class="row d-flex align-items-center">
+        </div>
+        <div class="row d-flex align-items-center">
           <div class="col-4">
             <input
               v-model="searchTerm"
@@ -37,7 +41,8 @@
               type="text"
               :placeholder="$t('search')"
             >
-          </div><div class="col">
+          </div>
+          <div class="col">
             <select
               class="form-control"
               @change="changeSortOption($event)"
@@ -49,7 +54,8 @@
                 {{ sortOption.text }}
               </option>
             </select>
-          </div><div class="col-3">
+          </div>
+          <div class="col-3">
             <select
               class="form-control"
               @change="changeSortDirection($event)"
@@ -63,12 +69,14 @@
             </select>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="sortDirty && group.type === 'party'"
         class="row apply-options d-flex justify-content-center"
       >
         <a @click="applySortOptions()">{{ $t('applySortToHeader') }}</a>
-      </div><div
+      </div>
+      <div
         v-if="invites.length > 0"
         class="row"
       >
@@ -79,7 +87,8 @@
             @click="viewMembers()"
           >
             {{ $t('members') }}
-          </div><div
+          </div>
+          <div
             class="nav-item"
             :class="{active: selectedPage === 'invites'}"
             @click="viewInvites()"
@@ -87,65 +96,91 @@
             {{ $t('invites') }}
           </div>
         </div>
-      </div><div v-if="selectedPage === 'members'">
+      </div>
+      <div v-if="selectedPage === 'members'">
         <div
           v-for="(member, index) in sortedMembers"
           class="row"
         >
           <div class="col-11 no-padding-left">
             <member-details :member="member" />
-          </div><div class="col-1 actions">
+          </div>
+          <div class="col-1 actions">
             <b-dropdown right="right">
               <div
                 slot="button-content"
                 class="svg-icon inline dots"
                 v-html="icons.dots"
-              ></div><b-dropdown-item @click="sendMessage(member)">
-                <span class="dropdown-icon-item"><div
-                  class="svg-icon inline"
-                  v-html="icons.messageIcon"
-                ></div><span class="text">{{ $t('sendMessage') }}</span></span>
-              </b-dropdown-item><b-dropdown-item
+              ></div>
+              <b-dropdown-item @click="sendMessage(member)">
+                <span class="dropdown-icon-item">
+                  <div
+                    class="svg-icon inline"
+                    v-html="icons.messageIcon"
+                  ></div>
+                  <span class="text">{{ $t('sendMessage') }}</span>
+                </span>
+              </b-dropdown-item>
+              <b-dropdown-item
                 v-if="shouldShowLeaderFunctions(member._id)"
                 @click="promoteToLeader(member)"
               >
-                <span class="dropdown-icon-item"><div
-                  class="svg-icon inline"
-                  v-html="icons.starIcon"
-                ></div><span class="text">{{ $t('promoteToLeader') }}</span></span>
-              </b-dropdown-item><b-dropdown-item
+                <span class="dropdown-icon-item">
+                  <div
+                    class="svg-icon inline"
+                    v-html="icons.starIcon"
+                  ></div>
+                  <span class="text">{{ $t('promoteToLeader') }}</span>
+                </span>
+              </b-dropdown-item>
+              <b-dropdown-item
                 v-if="shouldShowAddManager(member._id)"
                 @click="addManager(member._id)"
               >
-                <span class="dropdown-icon-item"><div
-                  class="svg-icon inline"
-                  v-html="icons.starIcon"
-                ></div><span class="text">{{ $t('addManager') }}</span></span>
-              </b-dropdown-item><b-dropdown-item
+                <span class="dropdown-icon-item">
+                  <div
+                    class="svg-icon inline"
+                    v-html="icons.starIcon"
+                  ></div>
+                  <span class="text">{{ $t('addManager') }}</span>
+                </span>
+              </b-dropdown-item>
+              <b-dropdown-item
                 v-if="shouldShowRemoveManager(member._id)"
                 @click="removeManager(member._id)"
               >
-                <span class="dropdown-icon-item"><div
-                  class="svg-icon inline"
-                  v-html="icons.removeIcon"
-                ></div><span class="text">{{ $t('removeManager2') }}</span></span>
-              </b-dropdown-item><b-dropdown-item
+                <span class="dropdown-icon-item">
+                  <div
+                    class="svg-icon inline"
+                    v-html="icons.removeIcon"
+                  ></div>
+                  <span class="text">{{ $t('removeManager2') }}</span>
+                </span>
+              </b-dropdown-item>
+              <b-dropdown-item
                 v-if="challengeId"
                 @click="viewProgress(member)"
               >
-                <span class="dropdown-icon-item"><span class="text">{{ $t('viewProgress') }}</span></span>
-              </b-dropdown-item><b-dropdown-item
+                <span class="dropdown-icon-item">
+                  <span class="text">{{ $t('viewProgress') }}</span>
+                </span>
+              </b-dropdown-item>
+              <b-dropdown-item
                 v-if="shouldShowLeaderFunctions(member._id)"
                 @click="removeMember(member, index)"
               >
-                <span class="dropdown-icon-item"><div
-                  class="svg-icon inline"
-                  v-html="icons.removeIcon"
-                ></div><span class="text">{{ $t('removeMember') }}</span></span>
+                <span class="dropdown-icon-item">
+                  <div
+                    class="svg-icon inline"
+                    v-html="icons.removeIcon"
+                  ></div>
+                  <span class="text">{{ $t('removeMember') }}</span>
+                </span>
               </b-dropdown-item>
             </b-dropdown>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="isLoadMoreAvailable"
           class="row"
         >
@@ -157,37 +192,45 @@
               {{ $t('loadMore') }}
             </button>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="members.length > 3"
           class="row gradient"
         ></div>
-      </div><div v-if="selectedPage === 'invites'">
+      </div>
+      <div v-if="selectedPage === 'invites'">
         <div
           v-for="(member, index) in invites"
           class="row"
         >
           <div class="col-11 no-padding-left">
             <member-details :member="member" />
-          </div><div class="col-1 actions">
+          </div>
+          <div class="col-1 actions">
             <b-dropdown right="right">
               <div
                 slot="button-content"
                 class="svg-icon inline dots"
                 v-html="icons.dots"
-              ></div><b-dropdown-item
+              ></div>
+              <b-dropdown-item
                 v-if="isLeader"
                 @click="removeInvite(member, index)"
               >
-                <span class="dropdown-icon-item"><div
-                  v-if="isLeader"
-                  class="svg-icon inline"
-                  v-html="icons.removeIcon"
-                ></div><span class="text">{{ $t('removeInvite') }}</span></span>
+                <span class="dropdown-icon-item">
+                  <div
+                    v-if="isLeader"
+                    class="svg-icon inline"
+                    v-html="icons.removeIcon"
+                  ></div>
+                  <span class="text">{{ $t('removeInvite') }}</span>
+                </span>
               </b-dropdown-item>
             </b-dropdown>
           </div>
         </div>
-      </div><div class="modal-footer">
+      </div>
+      <div class="modal-footer">
         <button
           class="btn btn-primary"
           @click="close()"
diff --git a/website/client/src/components/groups/myGuilds.vue b/website/client/src/components/groups/myGuilds.vue
index 682cb7e1e7..7a96d4033e 100644
--- a/website/client/src/components/groups/myGuilds.vue
+++ b/website/client/src/components/groups/myGuilds.vue
@@ -3,7 +3,8 @@
     <sidebar
       @search="updateSearch"
       @filter="updateFilters"
-    /><div class="standard-page">
+    />
+    <div class="standard-page">
       <div class="row">
         <div class="col-md-8 text-left">
           <h1
@@ -11,10 +12,12 @@
             class="page-header"
           >
             {{ $t('myGuilds') }}
-          </h1><h2 v-if="loading && guilds.length === 0">
+          </h1>
+          <h2 v-if="loading && guilds.length === 0">
             {{ $t('loading') }}
           </h2>
-        </div><div class="col-4">
+        </div>
+        <div class="col-4">
           <button
             class="btn btn-secondary create-group-button float-right"
             @click="createGroup()"
@@ -22,13 +25,16 @@
             <div
               class="svg-icon positive-icon"
               v-html="icons.positiveIcon"
-            ></div><span v-once>{{ $t('createGuild2') }}</span>
-          </button><!-- @TODO: Add when we implement recent activity .float-rightspan.dropdown-label {{ $t('sortBy') }}
+            ></div>
+            <span v-once>{{ $t('createGuild2') }}</span>
+          </button>
+          <!-- @TODO: Add when we implement recent activity .float-rightspan.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}}
--->
+          -->
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-if="!loading && guilds.length === 0"
           class="no-guilds text-center col-md-6 offset-md-3"
@@ -36,15 +42,19 @@ b-dropdown(:text="$t('sort')", right=true)
           <div
             class="svg-icon"
             v-html="icons.greyBadge"
-          ></div><h2 v-once>
+          ></div>
+          <h2 v-once>
             {{ $t('noGuildsTitle') }}
-          </h2><p v-once>
+          </h2>
+          <p v-once>
             {{ $t('noGuildsParagraph1') }}
-          </p><p v-once>
+          </p>
+          <p v-once>
             {{ $t('noGuildsParagraph2') }}
           </p>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-if="!loading && guilds.length > 0 && filteredGuilds.length === 0"
           class="no-guilds text-center col-md-6 offset-md-3"
@@ -53,7 +63,8 @@ b-dropdown(:text="$t('sort')", right=true)
             {{ $t('noGuildsMatchFilters') }}
           </h2>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-md-12">
           <public-guild-item
             v-for="guild in filteredGuilds"
diff --git a/website/client/src/components/groups/participantListModal.vue b/website/client/src/components/groups/participantListModal.vue
index 1668f7a043..9d99c397de 100644
--- a/website/client/src/components/groups/participantListModal.vue
+++ b/website/client/src/components/groups/participantListModal.vue
@@ -13,7 +13,8 @@
           <h1 v-once>
             {{ $t('participantsTitle') }}
           </h1>
-        </div><div class="col-6">
+        </div>
+        <div class="col-6">
           <button
             class="close"
             type="button"
@@ -24,14 +25,16 @@
           </button>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-for="member in participants"
       class="row"
     >
       <div class="col-12 no-padding-left">
         <member-details :member="member" />
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="btn btn-primary"
         @click="close()"
diff --git a/website/client/src/components/groups/publicGuildItem.vue b/website/client/src/components/groups/publicGuildItem.vue
index eed0cdd582..59ae35ff8d 100644
--- a/website/client/src/components/groups/publicGuildItem.vue
+++ b/website/client/src/components/groups/publicGuildItem.vue
@@ -15,35 +15,42 @@
                 v-if="guild.memberCount >= 1000"
                 class="svg-icon shield"
                 v-html="icons.goldGuildBadge"
-              ></div><div
+              ></div>
+              <div
                 v-if="guild.memberCount >= 100 && guild.memberCount < 1000"
                 class="svg-icon shield"
                 v-html="icons.silverGuildBadgeIcon"
-              ></div><div
+              ></div>
+              <div
                 v-if="guild.memberCount < 100"
                 class="svg-icon shield"
                 v-html="icons.bronzeGuildBadgeIcon"
-              ></div><div class="member-count">
+              ></div>
+              <div class="member-count">
                 {{ guild.memberCount | abbrNum }}
               </div>
             </div>
-          </div><div class="col-md-10">
+          </div>
+          <div class="col-md-10">
             <div class="row">
               <div class="col-md-8">
                 <router-link :to="{ name: 'guild', params: { groupId: guild._id } }">
                   <h3>{{ guild.name }}</h3>
-                </router-link><p
+                </router-link>
+                <p
                   v-if="guild.summary"
                   class="summary"
                 >
                   {{ guild.summary.substr(0, MAX_SUMMARY_SIZE_FOR_GUILDS) }}
-                </p><p
+                </p>
+                <p
                   v-else
                   class="summary"
                 >
                   {{ guild.name }}
                 </p>
-              </div><div class="col-md-2 cta-container">
+              </div>
+              <div class="col-md-2 cta-container">
                 <button
                   v-if="isMember && displayLeave"
                   v-once
@@ -51,22 +58,26 @@
                   @click.prevent="leave()"
                 >
                   {{ $t('leave') }}
-                </button><button
+                </button>
+                <button
                   v-if="!isMember"
                   v-once
                   class="btn btn-success"
                   @click="join()"
                 >
                   {{ $t('join') }}
-                </button><div
+                </button>
+                <div
                   v-if="displayGemBank"
                   class="item-with-icon gem-bank"
                 >
                   <div
                     class="svg-icon gem"
                     v-html="icons.gem"
-                  ></div><span class="count">{{ guild.balance * 4 }}</span>
-                </div><div
+                  ></div>
+                  <span class="count">{{ guild.balance * 4 }}</span>
+                </div>
+                <div
                   v-if="displayGemBank"
                   v-once
                   class="guild-bank"
@@ -74,7 +85,8 @@
                   {{ $t('guildBank') }}
                 </div>
               </div>
-            </div><div class="row">
+            </div>
+            <div class="row">
               <category-tags
                 v-once
                 class="col-md-12"
@@ -84,7 +96,7 @@
                 <span
                   v-if="showSuggested(guild._id)"
                   class="recommend-text"
-                > {{ $t('suggestedGroup') }}</span>
+                >{{ $t('suggestedGroup') }}</span>
               </category-tags>
             </div>
           </div>
diff --git a/website/client/src/components/groups/questDetailsModal.vue b/website/client/src/components/groups/questDetailsModal.vue
index 10ce6d302b..5c5f025034 100644
--- a/website/client/src/components/groups/questDetailsModal.vue
+++ b/website/client/src/components/groups/questDetailsModal.vue
@@ -9,29 +9,34 @@
     <div class="left-panel content">
       <h3 class="text-center">
         {{ $t('participantsTitle') }}
-      </h3><div class="row">
+      </h3>
+      <div class="row">
         <div class="col-10 offset-1 text-center">
           <span
             v-once
             class="description"
           >{{ $t('participantDesc') }}</span>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-for="member in members"
           class="col-12 member"
         >
-          <strong :class="{'declined-name': member.accepted === false}">{{ member.name }}</strong><div
+          <strong :class="{'declined-name': member.accepted === false}">{{ member.name }}</strong>
+          <div
             v-if="member.accepted === true"
             class="accepted float-right"
           >
             {{ $t('accepted') }}
-          </div><div
+          </div>
+          <div
             v-if="member.accepted === false"
             class="declined float-right"
           >
             {{ $t('declined') }}
-          </div><div
+          </div>
+          <div
             v-if="member.accepted === null"
             class="pending float-right"
           >
@@ -39,9 +44,11 @@
           </div>
         </div>
       </div>
-    </div><div v-if="questData">
+    </div>
+    <div v-if="questData">
       <questDialogContent :item="questData" />
-    </div><div
+    </div>
+    <div
       v-if="canEditQuest"
       class="text-center actions"
     >
@@ -52,8 +59,10 @@
           @click="questConfirm()"
         >
           {{ $t('begin') }}
-        </button><!-- @TODO don't allow the party leader to start the quest until the leader has accepted or rejected the invitation (users get confused and think "begin" means "join quest")-->
-      </div><div>
+        </button>
+        <!-- @TODO don't allow the party leader to start the quest until the leader has accepted or rejected the invitation (users get confused and think "begin" means "join quest")-->
+      </div>
+      <div>
         <div
           v-once
           class="cancel"
@@ -62,7 +71,8 @@
           {{ $t('cancel') }}
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="questData"
       class="side-panel"
     >
diff --git a/website/client/src/components/groups/questSidebarSection.vue b/website/client/src/components/groups/questSidebarSection.vue
index e055ceaae2..4c75f69eec 100644
--- a/website/client/src/components/groups/questSidebarSection.vue
+++ b/website/client/src/components/groups/questSidebarSection.vue
@@ -8,11 +8,14 @@
         <div
           class="svg-icon"
           v-html="icons.questIcon"
-        ></div><h4 v-once>
+        ></div>
+        <h4 v-once>
           {{ $t('youAreNotOnQuest') }}
-        </h4><p v-once>
+        </h4>
+        <p v-once>
           {{ $t('questDescription') }}
-        </p><button
+        </p>
+        <button
           v-once
           class="btn btn-secondary"
           @click="openStartQuestModal()"
@@ -20,7 +23,8 @@
           {{ $t('startAQuest') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="onPendingQuest && !onActiveQuest"
       class="row quest-active-section"
     >
@@ -29,9 +33,12 @@
           class="quest"
           :class="`inventory_quest_scroll_${questData.key}`"
         ></div>
-      </div><div class="col-6 titles">
-        <strong>{{ questData.text() }}</strong><p>{{ acceptedCount }} / {{ group.memberCount }}</p>
-      </div><div class="col-4">
+      </div>
+      <div class="col-6 titles">
+        <strong>{{ questData.text() }}</strong>
+        <p>{{ acceptedCount }} / {{ group.memberCount }}</p>
+      </div>
+      <div class="col-4">
         <button
           class="btn btn-secondary"
           @click="openQuestDetails()"
@@ -39,22 +46,26 @@
           {{ $t('details') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="user.party.quest && user.party.quest.RSVPNeeded"
       class="row quest-active-section quest-invite"
     >
-      <span>{{ $t('wouldYouParticipate') }}</span><button
+      <span>{{ $t('wouldYouParticipate') }}</span>
+      <button
         class="btn btn-primary accept"
         @click="questAccept(group._id)"
       >
         {{ $t('accept') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-primary reject"
         @click="questReject(group._id)"
       >
         {{ $t('reject') }}
       </button>
-    </div><div
+    </div>
+    <div
       v-if="!onPendingQuest && onActiveQuest"
       class="row quest-active-section"
     >
@@ -62,9 +73,11 @@
         <div
           class="quest-boss"
           :class="'quest_' + questData.key"
-        ></div><h3 v-once>
+        ></div>
+        <h3 v-once>
           {{ questData.text() }}
-        </h3><div class="quest-box">
+        </h3>
+        <div class="quest-box">
           <div
             v-if="questData.collect"
             class="collect-info"
@@ -76,27 +89,33 @@
                   @click="openParticipantList()"
                 >{{ $t('participantsTitle') }}</a>
               </div>
-            </div><div
+            </div>
+            <div
               v-for="(value, key) in questData.collect"
               class="row"
             >
               <div class="col-2">
                 <div :class="'quest_' + questData.key + '_' + key"></div>
-              </div><div class="col-10">
-                <strong>{{ value.text() }}</strong><div class="grey-progress-bar">
+              </div>
+              <div class="col-10">
+                <strong>{{ value.text() }}</strong>
+                <div class="grey-progress-bar">
                   <div
                     class="collect-progress-bar"
                     :style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}"
                   ></div>
-                </div><strong>{{ group.quest.progress.collect[key] }} / {{ value.count }}</strong>
+                </div>
+                <strong>{{ group.quest.progress.collect[key] }} / {{ value.count }}</strong>
               </div>
-            </div><div
+            </div>
+            <div
               v-if="userIsOnQuest"
               class="text-right"
             >
               {{ parseFloat(user.party.quest.progress.collectedItems) || 0 }} items found
             </div>
-          </div><div
+          </div>
+          <div
             v-if="questData.boss"
             class="boss-info"
           >
@@ -108,13 +127,15 @@
                 >
                   {{ questData.boss.name() }}
                 </h4>
-              </div><div class="col-6">
+              </div>
+              <div class="col-6">
                 <a
                   class="float-right"
                   @click="openParticipantList()"
                 >{{ $t('participantsTitle') }}</a>
               </div>
-            </div><div class="row">
+            </div>
+            <div class="row">
               <div class="col-12">
                 <div class="grey-progress-bar">
                   <div
@@ -123,16 +144,26 @@
                   ></div>
                 </div>
               </div>
-            </div><div class="row boss-details">
+            </div>
+            <div class="row boss-details">
               <div class="col-6">
-                <span class="float-left">{{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}<!-- current boss hp uses ceil so you don't underestimate damage needed to end quest--></span>
-              </div><div
+                <span class="float-left">
+                  {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
+                  <!-- current boss hp uses ceil so you don't underestimate damage needed to end quest-->
+                </span>
+              </div>
+              <div
                 v-if="userIsOnQuest"
                 class="col-6"
               >
-                <!-- @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.--><span class="float-right">{{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}</span><!-- player's pending damage uses floor so you don't overestimate damage you've already done-->
+                <!-- @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.-->
+                <span
+                  class="float-right"
+                >{{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}</span>
+                <!-- player's pending damage uses floor so you don't overestimate damage you've already done-->
               </div>
-            </div><div
+            </div>
+            <div
               v-if="questData.boss.rage"
               class="row rage-bar-row"
             >
@@ -144,16 +175,20 @@
                   ></div>
                 </div>
               </div>
-            </div><div
+            </div>
+            <div
               v-if="questData.boss.rage"
               class="row boss-details rage-details"
             >
               <div class="col-6">
-                <span class="float-left">{{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}</span>
+                <span
+                  class="float-left"
+                >{{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}</span>
               </div>
             </div>
           </div>
-        </div><button
+        </div>
+        <button
           v-if="canEditQuest"
           v-once
           class="btn btn-secondary"
diff --git a/website/client/src/components/groups/sidebar.vue b/website/client/src/components/groups/sidebar.vue
index ba27cfb328..fe9cad01d9 100644
--- a/website/client/src/components/groups/sidebar.vue
+++ b/website/client/src/components/groups/sidebar.vue
@@ -7,11 +7,14 @@
         type="text"
         :placeholder="$t('search')"
       >
-    </div><form>
+    </div>
+    <form>
       <h2 v-once>
         {{ $t('filter') }}
-      </h2><div class="form-group">
-        <h3>{{ $t('category') }}</h3><div
+      </h2>
+      <div class="form-group">
+        <h3>{{ $t('category') }}</h3>
+        <div
           v-for="group in categoryOptions"
           :key="group.key"
           class="form-check"
@@ -23,15 +26,18 @@
               class="custom-control-input"
               type="checkbox"
               :value="group.key"
-            ><label
+            >
+            <label
               v-once
               class="custom-control-label"
               :for="group.key"
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div><div class="form-group">
-        <h3>{{ $t('role') }}</h3><div
+      </div>
+      <div class="form-group">
+        <h3>{{ $t('role') }}</h3>
+        <div
           v-for="group in roleOptions"
           :key="group.key"
           class="form-check"
@@ -43,15 +49,18 @@
               class="custom-control-input"
               type="checkbox"
               :value="group.key"
-            ><label
+            >
+            <label
               v-once
               class="custom-control-label"
               :for="group.key"
             >{{ $t(group.label) }}</label>
           </div>
         </div>
-      </div><div class="form-group">
-        <h3>{{ $t('guildSize') }}</h3><div
+      </div>
+      <div class="form-group">
+        <h3>{{ $t('guildSize') }}</h3>
+        <div
           v-for="group in guildSizeOptions"
           :key="group.key"
           class="form-check"
@@ -63,7 +72,8 @@
               class="custom-control-input"
               type="checkbox"
               :value="group.key"
-            ><label
+            >
+            <label
               v-once
               class="custom-control-label"
               :for="group.key"
diff --git a/website/client/src/components/groups/startQuestModal.vue b/website/client/src/components/groups/startQuestModal.vue
index e7c3e5b873..38247daada 100644
--- a/website/client/src/components/groups/startQuestModal.vue
+++ b/website/client/src/components/groups/startQuestModal.vue
@@ -9,7 +9,8 @@
     <div class="left-panel content">
       <h3 class="text-center">
         Quests
-      </h3><div class="row">
+      </h3>
+      <div class="row">
         <div
           v-for="(value, key, index) in user.items.quests"
           v-if="value > 0"
@@ -25,15 +26,18 @@
             >
               <h4 class="popover-content-title">
                 {{ quests.quests[key].text() }}
-              </h4><questInfo :quest="quests.quests[key]" />
-            </b-popover><div
+              </h4>
+              <questInfo :quest="quests.quests[key]" />
+            </b-popover>
+            <div
               :id="`inventory_quest_scroll_${key}`"
               class="quest"
               :class="`inventory_quest_scroll_${key}`"
             ></div>
           </div>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-10 offset-1 text-center">
           <span
             v-once
@@ -41,9 +45,11 @@
           >{{ $t('noQuestToStart') }}</span>
         </div>
       </div>
-    </div><div v-if="questData">
+    </div>
+    <div v-if="questData">
       <questDialogContent :item="questData" />
-    </div><div class="text-center">
+    </div>
+    <div class="text-center">
       <button
         class="btn btn-primary"
         :disabled="!Boolean(selectedQuest) || loading"
@@ -51,9 +57,11 @@
       >
         {{ $t('inviteToPartyOrQuest') }}
       </button>
-    </div><div class="text-center">
+    </div>
+    <div class="text-center">
       <p>{{ $t('inviteInformation') }}</p>
-    </div><div
+    </div>
+    <div
       v-if="questData"
       class="side-panel"
     >
diff --git a/website/client/src/components/groups/tavern.vue b/website/client/src/components/groups/tavern.vue
index 3666ba0143..0d38793045 100644
--- a/website/client/src/components/groups/tavern.vue
+++ b/website/client/src/components/groups/tavern.vue
@@ -1,23 +1,28 @@
 <template>
   <div class="row">
-    <world-boss-info-modal /><world-boss-rage-modal /><div class="col-12 col-sm-8 clearfix standard-page">
+    <world-boss-info-modal />
+    <world-boss-rage-modal />
+    <div class="col-12 col-sm-8 clearfix standard-page">
       <div class="row">
         <div class="col-6 title-details">
           <h1 v-once>
             {{ $t('welcomeToTavern') }}
           </h1>
         </div>
-      </div><chat
+      </div>
+      <chat
         :label="$t('tavernChat')"
         :group="group"
         :placeholder="$t('tavernCommunityGuidelinesPlaceholder')"
         @fetchRecentMessages="fetchRecentMessages()"
       />
-    </div><div class="col-12 col-sm-4 sidebar">
+    </div>
+    <div class="col-12 col-sm-4 sidebar">
       <div class="section">
         <div class="grassy-meadow-backdrop">
           <div class="daniel_front"></div>
-        </div><div class="boss-section">
+        </div>
+        <div class="boss-section">
           <div
             v-if="group && group.quest && group.quest.active"
             class="world-boss"
@@ -26,78 +31,111 @@
             <div
               class="corner-decoration"
               :style="{top: '-2px', right: '-2px'}"
-            ></div><div
+            ></div>
+            <div
               class="corner-decoration"
               :style="{top: '-2px', left: '-2px'}"
-            ></div><div
+            ></div>
+            <div
               class="corner-decoration"
               :style="{bottom: '-2px', right: '-2px'}"
-            ></div><div
+            ></div>
+            <div
               class="corner-decoration"
               :style="{bottom: '-2px', left: '-2px'}"
-            ></div><div class="text-center float-bar d-flex align-items-center">
-              <span class="diamond"></span><span
+            ></div>
+            <div class="text-center float-bar d-flex align-items-center">
+              <span class="diamond"></span>
+              <span
                 class="strong reduce"
                 :style="{background: questData.colors.dark}"
-              >{{ $t('worldBossEvent') }}</span><span class="diamond"></span>
-            </div><div class="boss-gradient pb-3 pt-3">
+              >{{ $t('worldBossEvent') }}</span>
+              <span class="diamond"></span>
+            </div>
+            <div class="boss-gradient pb-3 pt-3">
               <p
                 class="text-center reduce"
                 :style="{color: questData.colors.extralight}"
               >
                 {{ $t(`${questData.key}ArtCredit`) }}
-              </p><div
+              </p>
+              <div
                 class="quest-boss"
                 :class="'background_' + questData.key"
               >
                 <div
                   class="quest-boss"
                   :class="'quest_' + questData.key"
-                ></div><div
+                ></div>
+                <div
                   class="quest-boss"
                   :class="'phobia_' + questData.key"
                   :style="{display: 'none'}"
                 ></div>
               </div>
-            </div><div class="p-3">
+            </div>
+            <div class="p-3">
               <div class="row d-flex align-items-center mb-2">
                 <div class="col-sm-6">
                   <strong class="float-left">{{ questData.boss.name() }}</strong>
-                </div><div class="col-sm-6">
-                  <span class="d-flex float-right"><div
-                    class="svg-icon boss-icon"
-                    v-html="icons.swordIcon"
-                  ></div><span
-                    class="ml-1 reduce"
-                    :style="{color: questData.colors.extralight}"
-                  >{{ $t('pendingDamage', {damage: pendingDamage()}) }}</span></span>
                 </div>
-              </div><div class="grey-progress-bar mb-1">
+                <div class="col-sm-6">
+                  <span class="d-flex float-right">
+                    <div
+                      class="svg-icon boss-icon"
+                      v-html="icons.swordIcon"
+                    ></div>
+                    <span
+                      class="ml-1 reduce"
+                      :style="{color: questData.colors.extralight}"
+                    >{{ $t('pendingDamage', {damage: pendingDamage()}) }}</span>
+                  </span>
+                </div>
+              </div>
+              <div class="grey-progress-bar mb-1">
                 <div
                   class="boss-health-bar"
                   :style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}"
                 ></div>
-              </div><span class="d-flex align-items-center"><div
-                class="svg-icon boss-icon"
-                v-html="icons.healthIcon"
-              ></div><span class="reduce ml-1 pt-1">{{ $t('bossHealth', {currentHealth: bossCurrentHealth(), maxHealth: questData.boss.hp.toLocaleString()}) }}</span></span><div class="mt-3 mb-2">
-                <strong class="mr-1">{{ $t('rageAttack') }}</strong><span>{{ questData.boss.rage.title() }}</span>
-              </div><div class="grey-progress-bar mb-1">
+              </div>
+              <span class="d-flex align-items-center">
+                <div
+                  class="svg-icon boss-icon"
+                  v-html="icons.healthIcon"
+                ></div>
+                <span
+                  class="reduce ml-1 pt-1"
+                >{{ $t('bossHealth', {currentHealth: bossCurrentHealth(), maxHealth: questData.boss.hp.toLocaleString()}) }}</span>
+              </span>
+              <div class="mt-3 mb-2">
+                <strong class="mr-1">{{ $t('rageAttack') }}</strong>
+                <span>{{ questData.boss.rage.title() }}</span>
+              </div>
+              <div class="grey-progress-bar mb-1">
                 <div
                   class="boss-health-bar rage-bar"
                   :style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}"
                 ></div>
-              </div><span class="d-flex align-items-center"><div
-                class="svg-icon boss-icon"
-                v-html="icons.rageIcon"
-              ></div><span class="reduce ml-1 pt-1">{{ $t('bossRage', {currentRage: bossCurrentRage(), maxRage: questData.boss.rage.value.toLocaleString()}) }}</span></span><div class="row d-flex align-items-center mb-2 mt-2">
+              </div>
+              <span class="d-flex align-items-center">
+                <div
+                  class="svg-icon boss-icon"
+                  v-html="icons.rageIcon"
+                ></div>
+                <span
+                  class="reduce ml-1 pt-1"
+                >{{ $t('bossRage', {currentRage: bossCurrentRage(), maxRage: questData.boss.rage.value.toLocaleString()}) }}</span>
+              </span>
+              <div class="row d-flex align-items-center mb-2 mt-2">
                 <div class="col-sm-4 d-flex">
-                  <strong class="mr-2">{{ $t('rageStrikes') }}</strong><div
+                  <strong class="mr-2">{{ $t('rageStrikes') }}</strong>
+                  <div
                     v-b-tooltip.hover.top="questData.boss.rage.description()"
                     class="svg-icon boss-icon information-icon m-auto"
                     v-html="icons.informationIcon"
                   ></div>
-                </div><div class="col-sm-8 d-flex align-items-center justify-content-center">
+                </div>
+                <div class="col-sm-8 d-flex align-items-center justify-content-center">
                   <div
                     class="m-auto"
                     @click="showWorldBossRage('seasonalShop')"
@@ -106,12 +144,14 @@
                       v-if="!group.quest.extra.worldDmg.seasonalShop"
                       class="rage-strike"
                       src="~@/assets/images/world-boss/rage_strike@2x.png"
-                    ><img
+                    >
+                    <img
                       v-if="group.quest.extra.worldDmg.seasonalShop"
                       class="rage-strike-active"
                       src="~@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
                     >
-                  </div><div
+                  </div>
+                  <div
                     class="m-auto"
                     @click="showWorldBossRage('market')"
                   >
@@ -119,12 +159,14 @@
                       v-if="!group.quest.extra.worldDmg.market"
                       class="rage-strike"
                       src="~@/assets/images/world-boss/rage_strike@2x.png"
-                    ><img
+                    >
+                    <img
                       v-if="group.quest.extra.worldDmg.market"
                       class="rage-strike-active"
                       src="~@/assets/images/world-boss/rage_strike-market@2x.png"
                     >
-                  </div><div
+                  </div>
+                  <div
                     class="m-auto"
                     @click="showWorldBossRage('quests')"
                   >
@@ -132,19 +174,22 @@
                       v-if="!group.quest.extra.worldDmg.quests"
                       class="rage-strike"
                       src="~@/assets/images/world-boss/rage_strike@2x.png"
-                    ><img
+                    >
+                    <img
                       v-if="group.quest.extra.worldDmg.quests"
                       class="rage-strike-active"
                       src="~@/assets/images/world-boss/rage_strike-quests@2x.png"
                     >
                   </div>
                 </div>
-              </div><div
+              </div>
+              <div
                 class="boss-description p-3"
                 :style="{'border-color': questData.colors.extralight}"
                 @click="sections.worldBoss = !sections.worldBoss"
               >
-                <strong class="float-left">{{ $t('worldBossDescription') }}</strong><div class="float-right">
+                <strong class="float-left">{{ $t('worldBossDescription') }}</strong>
+                <div class="float-right">
                   <div
                     v-if="!sections.worldBoss"
                     class="toggle-down"
@@ -153,7 +198,8 @@
                       class="svg-icon boss-icon"
                       v-html="icons.chevronIcon"
                     ></div>
-                  </div><div
+                  </div>
+                  <div
                     v-if="sections.worldBoss"
                     class="toggle-up"
                   >
@@ -163,33 +209,42 @@
                     ></div>
                   </div>
                 </div>
-              </div><div
+              </div>
+              <div
                 v-if="sections.worldBoss"
                 class="mt-3"
                 v-html="questData.notes()"
               ></div>
             </div>
-          </div><!-- .text-center.mt-4.world-boss-info-button(@click="showWorldBossInfo()") {{$t('whatIsWorldBoss') }}
--->
-        </div><div class="sleep below-header-sections">
-          <strong v-once>{{ $t('sleepDescription') }}</strong><ul>
+          </div>
+          <!-- .text-center.mt-4.world-boss-info-button(@click="showWorldBossInfo()") {{$t('whatIsWorldBoss') }}
+          -->
+        </div>
+        <div class="sleep below-header-sections">
+          <strong v-once>{{ $t('sleepDescription') }}</strong>
+          <ul>
             <li v-once>
               {{ $t('sleepBullet1') }}
-            </li><li v-once>
+            </li>
+            <li v-once>
               {{ $t('sleepBullet2') }}
-            </li><li v-once>
+            </li>
+            <li v-once>
               {{ $t('sleepBullet3') }}
-            </li><li v-once>
+            </li>
+            <li v-once>
               {{ $t('sleepBullet4') }}
             </li>
-          </ul><button
+          </ul>
+          <button
             v-if="!user.preferences.sleep"
             v-once
             class="btn btn-secondary pause-button"
             @click="toggleSleep()"
           >
             {{ $t('pauseDailies') }}
-          </button><button
+          </button>
+          <button
             v-if="user.preferences.sleep"
             v-once
             class="btn btn-secondary pause-button"
@@ -198,7 +253,8 @@
             {{ $t('unpauseDailies') }}
           </button>
         </div>
-      </div><div class="px-3">
+      </div>
+      <div class="px-3">
         <sidebar-section :title="$t('staffAndModerators')">
           <div class="row">
             <div
@@ -212,170 +268,212 @@
                   :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
                 >
                   {{ user.name }}
-                </router-link><div
+                </router-link>
+                <div
                   v-if="user.type === 'Staff'"
                   class="svg-icon staff-icon"
                   v-html="icons.tierStaff"
-                ></div><div
+                ></div>
+                <div
                   v-if="user.type === 'Moderator' && user.name !== 'It's Bailey'"
                   class="svg-icon mod-icon"
                   v-html="icons.tierMod"
-                ></div><div
+                ></div>
+                <div
                   v-if="user.name === 'It's Bailey'"
                   class="svg-icon npc-icon"
                   v-html="icons.tierNPC"
                 ></div>
-              </div><div class="type">
+              </div>
+              <div class="type">
                 {{ user.type }}
               </div>
             </div>
           </div>
-        </sidebar-section><sidebar-section :title="$t('helpfulLinks')">
+        </sidebar-section>
+        <sidebar-section :title="$t('helpfulLinks')">
           <ul>
             <li>
               <a
-                href=""
+                href
                 @click.prevent="modForm()"
               >{{ $t('contactForm') }}</a>
-            </li><li>
+            </li>
+            <li>
               <router-link
                 v-once
                 to="/static/community-guidelines"
               >
                 {{ $t('communityGuidelinesLink') }}
               </router-link>
-            </li><li>
-              <router-link to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601">
+            </li>
+            <li>
+              <router-link
+                to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601"
+              >
                 {{ $t('lookingForGroup') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <router-link
                 v-once
                 to="/static/faq"
               >
                 {{ $t('faq') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <a
-                href=""
+                href
                 v-html="$t('glossary')"
               ></a>
-            </li><li>
+            </li>
+            <li>
               <a
                 v-once
                 href="http://habitica.fandom.com/wiki/Habitica_Wiki"
                 target="_blank"
               >{{ $t('wiki') }}</a>
-            </li><li>
+            </li>
+            <li>
               <a
                 v-once
                 href="https://oldgods.net/habitrpg/habitrpg_user_data_display.html"
                 target="_blank"
               >{{ $t('dataDisplayTool') }}</a>
-            </li><li>
-              <router-link to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac">
+            </li>
+            <li>
+              <router-link
+                to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac"
+              >
                 {{ $t('reportProblem') }}
               </router-link>
-            </li><li>
+            </li>
+            <li>
               <a
                 v-once
                 href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents"
                 target="_blank"
               >{{ $t('requestFeature') }}</a>
-            </li><li>
+            </li>
+            <li>
               <a
-                href=""
+                href
                 v-html="$t('communityForum')"
               ></a>
-            </li><li>
-              <router-link to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a">
+            </li>
+            <li>
+              <router-link
+                to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
+              >
                 {{ $t('askQuestionGuild') }}
               </router-link>
             </li>
           </ul>
-        </sidebar-section><sidebar-section :title="$t('playerTiers')">
+        </sidebar-section>
+        <sidebar-section :title="$t('playerTiers')">
           <div class="row">
             <div class="col-12">
               <p v-once>
                 {{ $t('playerTiersDesc') }}
-              </p><ul class="tier-list">
+              </p>
+              <ul class="tier-list">
                 <li
                   v-once
                   class="tier1"
                 >
-                  {{ $t('tier1') }}<div
+                  {{ $t('tier1') }}
+                  <div
                     class="svg-icon tier1-icon"
                     v-html="icons.tier1"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="tier2"
                 >
-                  {{ $t('tier2') }}<div
+                  {{ $t('tier2') }}
+                  <div
                     class="svg-icon tier2-icon"
                     v-html="icons.tier2"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="tier3"
                 >
-                  {{ $t('tier3') }}<div
+                  {{ $t('tier3') }}
+                  <div
                     class="svg-icon tier3-icon"
                     v-html="icons.tier3"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="tier4"
                 >
-                  {{ $t('tier4') }}<div
+                  {{ $t('tier4') }}
+                  <div
                     class="svg-icon tier4-icon"
                     v-html="icons.tier4"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="tier5"
                 >
-                  {{ $t('tier5') }}<div
+                  {{ $t('tier5') }}
+                  <div
                     class="svg-icon tier5-icon"
                     v-html="icons.tier5"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="tier6"
                 >
-                  {{ $t('tier6') }}<div
+                  {{ $t('tier6') }}
+                  <div
                     class="svg-icon tier6-icon"
                     v-html="icons.tier6"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="tier7"
                 >
-                  {{ $t('tier7') }}<div
+                  {{ $t('tier7') }}
+                  <div
                     class="svg-icon tier7-icon"
                     v-html="icons.tier7"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="moderator"
                 >
-                  {{ $t('tierModerator') }}<div
+                  {{ $t('tierModerator') }}
+                  <div
                     class="svg-icon mod-icon"
                     v-html="icons.tierMod"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="staff"
                 >
-                  {{ $t('tierStaff') }}<div
+                  {{ $t('tierStaff') }}
+                  <div
                     class="svg-icon staff-icon"
                     v-html="icons.tierStaff"
                   ></div>
-                </li><li
+                </li>
+                <li
                   v-once
                   class="npc"
                 >
-                  {{ $t('tierNPC') }}<div
+                  {{ $t('tierNPC') }}
+                  <div
                     class="svg-icon npc-icon"
                     v-html="icons.tierNPC"
                   ></div>
diff --git a/website/client/src/components/hall/heroes.vue b/website/client/src/components/hall/heroes.vue
index 32ad1a4456..ba11d5b3a6 100644
--- a/website/client/src/components/hall/heroes.vue
+++ b/website/client/src/components/hall/heroes.vue
@@ -3,9 +3,11 @@
     <small
       class="muted"
       v-html="$t('blurbHallContributors')"
-    ></small><div class="well">
+    ></small>
+    <div class="well">
       <div v-if="user.contributor.admin">
-        <h2>Reward User</h2><div class="row">
+        <h2>Reward User</h2>
+        <div class="row">
           <div
             v-if="!hero.profile"
             class="form col-6"
@@ -17,7 +19,8 @@
                 type="text"
                 :placeholder="'User ID or Username'"
               >
-            </div><div class="form-group">
+            </div>
+            <div class="form-group">
               <button
                 class="btn btn-secondary"
                 @click="loadHero(heroID)"
@@ -26,7 +29,8 @@
               </button>
             </div>
           </div>
-        </div><div class="row">
+        </div>
+        <div class="row">
           <div
             v-if="hero && hero.profile"
             class="form col-6"
@@ -34,38 +38,62 @@
           >
             <router-link :to="{'name': 'userProfile', 'params': {'userId': hero._id}}">
               <h3>@{{ hero.auth.local.username }} &nbsp; / &nbsp; {{ hero.profile.name }}</h3>
-            </router-link><div class="form-group">
-              <label>Contributor Title</label><input
+            </router-link>
+            <div class="form-group">
+              <label>Contributor Title</label>
+              <input
                 v-model="hero.contributor.text"
                 class="form-control"
                 type="text"
-              ><small>Common titles: <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher, Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>. Rare titles: Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson, Statistician, Tinker, Transcriber, Troubadour.</small>
-            </div><div class="form-group">
-              <label>Contributor Tier</label><input
+              >
+              <small>
+                Common titles:
+                <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher, Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>. Rare titles: Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson, Statistician, Tinker, Transcriber, Troubadour.
+              </small>
+            </div>
+            <div class="form-group">
+              <label>Contributor Tier</label>
+              <input
                 v-model="hero.contributor.level"
                 class="form-control"
                 type="number"
-              ><small>1-7 for normal contributors, 8 for moderators, 9 for staff. This determines which items, pets, and mounts are available, and name-tag coloring. Tiers 8 and 9 are automatically given admin status.&nbsp;<a
-                target="_blank"
-                href="https://trello.com/c/wkFzONhE/277-contributor-gear"
-              >More details (1-7)</a>,&nbsp;<a
-                target="_blank"
-                href="https://github.com/HabitRPG/habitica/issues/3801"
-              >more details (8-9)</a></small>
-            </div><div class="form-group">
-              <label>Contributions</label><textarea
+              >
+              <small>
+                1-7 for normal contributors, 8 for moderators, 9 for staff. This determines which items, pets, and mounts are available, and name-tag coloring. Tiers 8 and 9 are automatically given admin status.&nbsp;
+                <a
+                  target="_blank"
+                  href="https://trello.com/c/wkFzONhE/277-contributor-gear"
+                >More details (1-7)</a>,&nbsp;
+                <a
+                  target="_blank"
+                  href="https://github.com/HabitRPG/habitica/issues/3801"
+                >more details (8-9)</a>
+              </small>
+            </div>
+            <div class="form-group">
+              <label>Contributions</label>
+              <textarea
                 v-model="hero.contributor.contributions"
                 class="form-control"
                 cols="5"
               ></textarea>
-            </div><div class="form-group">
-              <label>Balance</label><input
+            </div>
+            <div class="form-group">
+              <label>Balance</label>
+              <input
                 v-model="hero.balance"
                 class="form-control"
                 type="number"
                 step="any"
-              ><small><span>'{{ hero.balance }}' is in USD, <em>not</em> in Gems. E.g., if this number is 1, it means 4 Gems. Only use this option when manually granting Gems to players, don't use it when granting contributor tiers. Contrib tiers will automatically add Gems.</span></small>
-            </div><div class="accordion">
+              >
+              <small>
+                <span>
+                  '{{ hero.balance }}' is in USD,
+                  <em>not</em> in Gems. E.g., if this number is 1, it means 4 Gems. Only use this option when manually granting Gems to players, don't use it when granting contributor tiers. Contrib tiers will automatically add Gems.
+                </span>
+              </small>
+            </div>
+            <div class="accordion">
               <div
                 class="accordion-group"
                 heading="Items"
@@ -76,7 +104,8 @@
                   @click="expandItems = !expandItems"
                 >
                   Update Item
-                </h4><div
+                </h4>
+                <div
                   v-if="expandItems"
                   class="form-group well"
                 >
@@ -85,18 +114,36 @@
                     class="form-control"
                     type="text"
                     placeholder="Path (eg, items.pets.BearCub-Base)"
-                  ><small class="muted">Enter the <strong>item path</strong>. E.g., <code>items.pets.BearCub-Zombie</code> or <code>items.gear.owned.head_special_0</code> or <code>items.gear.equipped.head</code>. You can find all the item paths below.</small><br><input
+                  >
+                  <small class="muted">
+                    Enter the
+                    <strong>item path</strong>. E.g.,
+                    <code>items.pets.BearCub-Zombie</code> or
+                    <code>items.gear.owned.head_special_0</code> or
+                    <code>items.gear.equipped.head</code>. You can find all the item paths below.
+                  </small>
+                  <br>
+                  <input
                     v-model="hero.itemVal"
                     class="form-control"
                     type="text"
                     placeholder="Value (eg, 5)"
-                  ><small class="muted">Enter the <strong>item value</strong>. E.g., <code>5</code> or <code>false</code> or <code>head_warrior_3</code>. All values are listed in the All Item Paths section below.</small><div class="accordion">
+                  >
+                  <small class="muted">
+                    Enter the
+                    <strong>item value</strong>. E.g.,
+                    <code>5</code> or
+                    <code>false</code> or
+                    <code>head_warrior_3</code>. All values are listed in the All Item Paths section below.
+                  </small>
+                  <div class="accordion">
                     <div
                       class="accordion-group"
                       heading="All Item Paths"
                     >
                       <pre>{{ allItemPaths }}</pre>
-                    </div><div
+                    </div>
+                    <div
                       class="accordion-group"
                       heading="Current Items"
                     >
@@ -104,7 +151,8 @@
                     </div>
                   </div>
                 </div>
-              </div><div
+              </div>
+              <div
                 class="accordion-group"
                 heading="Auth"
               >
@@ -114,34 +162,49 @@
                   @click="expandAuth = !expandAuth"
                 >
                   Auth
-                </h4><div v-if="expandAuth">
-                  <pre>{{ hero.auth }}</pre><div class="form-group">
+                </h4>
+                <div v-if="expandAuth">
+                  <pre>{{ hero.auth }}</pre>
+                  <div class="form-group">
                     <div class="checkbox">
-                      <label><input
-                        v-if="hero.flags"
-                        v-model="hero.flags.chatShadowMuted"
-                        type="checkbox"
-                      ><strong>Chat Shadow Muting On</strong></label>
+                      <label>
+                        <input
+                          v-if="hero.flags"
+                          v-model="hero.flags.chatShadowMuted"
+                          type="checkbox"
+                        >
+                        <strong>Chat Shadow Muting On</strong>
+                      </label>
                     </div>
-                  </div><div class="form-group">
+                  </div>
+                  <div class="form-group">
                     <div class="checkbox">
-                      <label><input
-                        v-if="hero.flags"
-                        v-model="hero.flags.chatRevoked"
-                        type="checkbox"
-                      ><strong>Chat Privileges Revoked</strong></label>
+                      <label>
+                        <input
+                          v-if="hero.flags"
+                          v-model="hero.flags.chatRevoked"
+                          type="checkbox"
+                        >
+                        <strong>Chat Privileges Revoked</strong>
+                      </label>
                     </div>
-                  </div><div class="form-group">
+                  </div>
+                  <div class="form-group">
                     <div class="checkbox">
-                      <label><input
-                        v-model="hero.auth.blocked"
-                        type="checkbox"
-                      >Blocked</label>
+                      <label>
+                        <input
+                          v-model="hero.auth.blocked"
+                          type="checkbox"
+                        >Blocked
+                      </label>
                     </div>
                   </div>
                 </div>
               </div>
-            </div><!-- h4 Backer Status--><!-- Add backer stuff like tier, disable adds, etcs--><div class="form-group">
+            </div>
+            <!-- h4 Backer Status-->
+            <!-- Add backer stuff like tier, disable adds, etcs-->
+            <div class="form-group">
               <button
                 class="form-control btn btn-primary"
                 @click="saveHero()"
@@ -151,15 +214,21 @@
             </div>
           </div>
         </div>
-      </div><div class="table-responsive">
+      </div>
+      <div class="table-responsive">
         <table class="table table-striped">
           <thead>
             <tr>
-              <th>{{ $t('name') }}</th><th v-if="user.contributor && user.contributor.admin">
+              <th>{{ $t('name') }}</th>
+              <th v-if="user.contributor && user.contributor.admin">
                 {{ $t('UUID') }}
-              </th><th>{{ $t('contribLevel') }}</th><th>{{ $t('title') }}</th><th>{{ $t('contributions') }}</th>
+              </th>
+              <th>{{ $t('contribLevel') }}</th>
+              <th>{{ $t('title') }}</th>
+              <th>{{ $t('contributions') }}</th>
             </tr>
-          </thead><tbody>
+          </thead>
+          <tbody>
             <tr v-for="(hero, index) in heroes">
               <td>
                 <user-link
@@ -168,17 +237,22 @@
                   :popover="$t('gamemaster')"
                   popover-trigger="mouseenter"
                   popover-placement="right"
-                /><user-link
+                />
+                <user-link
                   v-if="!hero.contributor || !hero.contributor.admin"
                   :user="hero"
                 />
-              </td><td
+              </td>
+              <td
                 v-if="user.contributor.admin"
                 class="btn-link"
                 @click="populateContributorInput(hero._id, index)"
               >
                 {{ hero._id }}
-              </td><td>{{ hero.contributor.level }}</td><td>{{ hero.contributor.text }}</td><td>
+              </td>
+              <td>{{ hero.contributor.level }}</td>
+              <td>{{ hero.contributor.text }}</td>
+              <td>
                 <div
                   v-markdown="hero.contributor.contributions"
                   target="_blank"
diff --git a/website/client/src/components/hall/index.vue b/website/client/src/components/hall/index.vue
index db26033fb4..ebc191e2bc 100644
--- a/website/client/src/components/hall/index.vue
+++ b/website/client/src/components/hall/index.vue
@@ -8,14 +8,16 @@
         :class="{'active': $route.name === 'contributors'}"
       >
         {{ $t('hallContributors') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'patrons'}"
         :class="{'active': $route.name === 'patrons'}"
       >
         {{ $t('hallPatrons') }}
       </router-link>
-    </secondary-menu><div class="col-12">
+    </secondary-menu>
+    <div class="col-12">
       <router-view />
     </div>
   </div>
diff --git a/website/client/src/components/hall/patrons.vue b/website/client/src/components/hall/patrons.vue
index 334d43e684..22f32afd4c 100644
--- a/website/client/src/components/hall/patrons.vue
+++ b/website/client/src/components/hall/patrons.vue
@@ -1,27 +1,34 @@
 <template>
   <div class="row">
-    <small class="muted">{{ $t('blurbHallPatrons') }}</small><div class="table-responsive">
+    <small class="muted">{{ $t('blurbHallPatrons') }}</small>
+    <div class="table-responsive">
       <table
         class="table table-striped"
         infinite-scroll="loadMore()"
       >
         <thead>
           <tr>
-            <th>{{ $t('name') }}</th><th v-if="user.contributor.admin">
+            <th>{{ $t('name') }}</th>
+            <th v-if="user.contributor.admin">
               {{ $t('UUID') }}
-            </th><th>{{ $t('backerTier') }}</th>
+            </th>
+            <th>{{ $t('backerTier') }}</th>
           </tr>
-        </thead><tbody>
+        </thead>
+        <tbody>
           <tr v-for="patron in patrons">
             <td>
               <a
                 v-class="userLevelStyle(patron)"
                 class="label label-default"
                 @click="clickMember(patron._id, true)"
-              ></a>{{ patron.profile.name }}
-            </td><td v-if="user.contributor.admin">
+              ></a>
+              {{ patron.profile.name }}
+            </td>
+            <td v-if="user.contributor.admin">
               {{ patron._id }}
-            </td><td>{{ patron.backer.tier }}</td>
+            </td>
+            <td>{{ patron.backer.tier }}</td>
           </tr>
         </tbody>
       </table>
diff --git a/website/client/src/components/header/index.vue b/website/client/src/components/header/index.vue
index 4b8ac2c559..f28afefd11 100644
--- a/website/client/src/components/header/index.vue
+++ b/website/client/src/components/header/index.vue
@@ -3,16 +3,20 @@
     <invite-modal
       :group="inviteModalGroup"
       :group-type="inviteModalGroupType"
-    /><create-party-modal /><div
+    />
+    <create-party-modal />
+    <div
       id="app-header"
       class="row"
       :class="{'hide-header': $route.name === 'groupPlan'}"
     >
-      <members-modal :hide-badge="true" /><member-details
+      <members-modal :hide-badge="true" />
+      <member-details
         :member="user"
         :class-badge-position="'next-to-name'"
         :is-header="true"
-      /><div
+      />
+      <div
         v-if="hasParty"
         class="view-party d-flex align-items-center"
       >
@@ -22,7 +26,8 @@
         >
           {{ $t('viewParty') }}
         </button>
-      </div><div
+      </div>
+      <div
         v-if="hasParty"
         v-resize="1500"
         class="party-members d-flex"
@@ -39,15 +44,19 @@
           :class-badge-position="'hidden'"
           @onHover="expandMember(member._id)"
         />
-      </div><div
+      </div>
+      <div
         v-else
         class="no-party d-flex justify-content-center text-center"
       >
         <div class="align-self-center">
-          <h3>{{ $t('battleWithFriends') }}</h3><span
+          <h3>{{ $t('battleWithFriends') }}</h3>
+          <span
             class="small-text"
             v-html="$t('inviteFriendsParty')"
-          ></span><br><button
+          ></span>
+          <br>
+          <button
             class="btn btn-primary"
             @click="createOrInviteParty()"
           >
diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue
index a798c00b10..0bf4e1b667 100644
--- a/website/client/src/components/header/menu.vue
+++ b/website/client/src/components/header/menu.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <inbox-modal /><creator-intro /><profileModal /><report-flag-modal /><send-gems-modal /><b-navbar
+    <inbox-modal />
+    <creator-intro />
+    <profileModal />
+    <report-flag-modal />
+    <send-gems-modal />
+    <b-navbar
       class="topbar navbar-inverse static-top"
       toggleable="lg"
       type="dark"
@@ -13,21 +18,29 @@
         <div
           class="logo svg-icon d-none d-xl-block"
           v-html="icons.logo"
-        ></div><div class="svg-icon gryphon d-xs-block d-xl-none"></div>
-      </b-navbar-brand><b-navbar-toggle
+        ></div>
+        <div class="svg-icon gryphon d-xs-block d-xl-none"></div>
+      </b-navbar-brand>
+      <b-navbar-toggle
         class="menu-toggle"
         target="menu_collapse"
-      /><div class="quick-menu mobile-only form-inline">
+      />
+      <div class="quick-menu mobile-only form-inline">
         <a
           v-b-tooltip.hover.bottom="$t('sync')"
           class="item-with-icon"
           :aria-label="$t('sync')"
           @click="sync"
-        ><div
-          class="top-menu-icon svg-icon"
-          v-html="icons.sync"
-        ></div></a><notification-menu class="item-with-icon" /><user-dropdown class="item-with-icon" />
-      </div><b-collapse
+        >
+          <div
+            class="top-menu-icon svg-icon"
+            v-html="icons.sync"
+          ></div>
+        </a>
+        <notification-menu class="item-with-icon" />
+        <user-dropdown class="item-with-icon" />
+      </div>
+      <b-collapse
         id="menu_collapse"
         v-model="menuIsOpen"
         class="collapse navbar-collapse"
@@ -41,7 +54,8 @@
             exact="exact"
           >
             {{ $t('tasks') }}
-          </b-nav-item><li
+          </b-nav-item>
+          <li
             class="topbar-item droppable"
             :class="{'active': $route.path.startsWith('/inventory'), 'down': $route.path.startsWith('/inventory') && this.isDesktop()}"
           >
@@ -54,31 +68,36 @@
                 class="chevron-icon-down"
                 v-html="icons.chevronDown"
               ></div>
-            </div><router-link
+            </div>
+            <router-link
               class="nav-link"
               :to="{name: 'items'}"
             >
               {{ $t('inventory') }}
-            </router-link><div class="topbar-dropdown">
+            </router-link>
+            <div class="topbar-dropdown">
               <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'items'}"
                 exact="exact"
               >
                 {{ $t('items') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'equipment'}"
               >
                 {{ $t('equipment') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'stable'}"
               >
                 {{ $t('stable') }}
               </router-link>
             </div>
-          </li><li
+          </li>
+          <li
             class="topbar-item droppable"
             :class="{'active': $route.path.startsWith('/shop'), 'down': $route.path.startsWith('/shop') && this.isDesktop()}"
           >
@@ -91,36 +110,42 @@
                 class="chevron-icon-down"
                 v-html="icons.chevronDown"
               ></div>
-            </div><router-link
+            </div>
+            <router-link
               class="nav-link"
               :to="{name: 'market'}"
             >
               {{ $t('shops') }}
-            </router-link><div class="topbar-dropdown">
+            </router-link>
+            <div class="topbar-dropdown">
               <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'market'}"
                 exact="exact"
               >
                 {{ $t('market') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'quests'}"
               >
                 {{ $t('quests') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'seasonal'}"
               >
                 {{ $t('titleSeasonalShop') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'time'}"
               >
                 {{ $t('titleTimeTravelers') }}
               </router-link>
             </div>
-          </li><b-nav-item
+          </li>
+          <b-nav-item
             v-if="this.user.party._id"
             class="topbar-item"
             :class="{'active': $route.path.startsWith('/party')}"
@@ -128,14 +153,16 @@
             :to="{name: 'party'}"
           >
             {{ $t('party') }}
-          </b-nav-item><b-nav-item
+          </b-nav-item>
+          <b-nav-item
             v-if="!this.user.party._id"
             class="topbar-item"
             :class="{'active': $route.path.startsWith('/party')}"
             @click="openPartyModal()"
           >
             {{ $t('party') }}
-          </b-nav-item><li
+          </b-nav-item>
+          <li
             class="topbar-item droppable"
             :class="{'active': $route.path.startsWith('/groups'), 'down': $route.path.startsWith('/groups') && this.isDesktop()}"
           >
@@ -148,30 +175,35 @@
                 class="chevron-icon-down"
                 v-html="icons.chevronDown"
               ></div>
-            </div><router-link
+            </div>
+            <router-link
               class="nav-link"
               :to="{name: 'tavern'}"
             >
               {{ $t('guilds') }}
-            </router-link><div class="topbar-dropdown">
+            </router-link>
+            <div class="topbar-dropdown">
               <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'tavern'}"
               >
                 {{ $t('tavern') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'myGuilds'}"
               >
                 {{ $t('myGuilds') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'guildsDiscovery'}"
               >
                 {{ $t('guildsDiscovery') }}
               </router-link>
             </div>
-          </li><li
+          </li>
+          <li
             class="topbar-item droppable"
             :class="{'active': $route.path.startsWith('/group-plans'), 'down': $route.path.startsWith('/group-plans') && this.isDesktop()}"
           >
@@ -185,12 +217,14 @@
                 class="chevron-icon-down"
                 v-html="icons.chevronDown"
               ></div>
-            </div><router-link
+            </div>
+            <router-link
               class="nav-link"
               :to="{name: 'groupPlan'}"
             >
               {{ $t('group') }}
-            </router-link><div class="topbar-dropdown">
+            </router-link>
+            <div class="topbar-dropdown">
               <router-link
                 v-for="group in groupPlans"
                 :key="group._id"
@@ -200,7 +234,8 @@
                 {{ group.name }}
               </router-link>
             </div>
-          </li><li
+          </li>
+          <li
             class="topbar-item droppable"
             :class="{'active': $route.path.startsWith('/challenges'), 'down': $route.path.startsWith('/challenges') && this.isDesktop()}"
           >
@@ -213,25 +248,29 @@
                 class="chevron-icon-down"
                 v-html="icons.chevronDown"
               ></div>
-            </div><router-link
+            </div>
+            <router-link
               class="nav-link"
               :to="{name: 'myChallenges'}"
             >
               {{ $t('challenges') }}
-            </router-link><div class="topbar-dropdown">
+            </router-link>
+            <div class="topbar-dropdown">
               <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'myChallenges'}"
               >
                 {{ $t('myChallenges') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'findChallenges'}"
               >
                 {{ $t('findChallenges') }}
               </router-link>
             </div>
-          </li><li
+          </li>
+          <li
             class="topbar-item droppable"
             :class="{'active': $route.path.startsWith('/help'), 'down': $route.path.startsWith('/help') && this.isDesktop()}"
           >
@@ -244,51 +283,61 @@
                 class="chevron-icon-down"
                 v-html="icons.chevronDown"
               ></div>
-            </div><router-link
+            </div>
+            <router-link
               class="nav-link"
               :to="{name: 'faq'}"
             >
               {{ $t('help') }}
-            </router-link><div class="topbar-dropdown">
+            </router-link>
+            <div class="topbar-dropdown">
               <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'faq'}"
               >
                 {{ $t('faq') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'overview'}"
               >
                 {{ $t('overview') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac"
               >
                 {{ $t('reportBug') }}
-              </router-link><router-link
+              </router-link>
+              <router-link
                 class="topbar-dropdown-item dropdown-item"
                 to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
               >
                 {{ $t('askAQuestion') }}
-              </router-link><a
+              </router-link>
+              <a
                 class="topbar-dropdown-item dropdown-item"
                 href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents"
                 target="_blank"
-              >{{ $t('requestAF') }}</a><a
+              >{{ $t('requestAF') }}</a>
+              <a
                 class="topbar-dropdown-item dropdown-item"
                 href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
                 target="_blank"
-              >{{ $t('contributing') }}</a><a
+              >{{ $t('contributing') }}</a>
+              <a
                 class="topbar-dropdown-item dropdown-item"
                 href="http://habitica.fandom.com/wiki/Habitica_Wiki"
                 target="_blank"
-              >{{ $t('wiki') }}</a><a
+              >{{ $t('wiki') }}</a>
+              <a
                 class="topbar-dropdown-item dropdown-item"
                 @click="modForm()"
               >{{ $t('contactForm') }}</a>
             </div>
           </li>
-        </b-navbar-nav><div class="currency-tray form-inline">
+        </b-navbar-nav>
+        <div class="currency-tray form-inline">
           <div
             v-if="userHourglasses > 0"
             class="item-with-icon"
@@ -297,8 +346,10 @@
               v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')"
               class="top-menu-icon svg-icon"
               v-html="icons.hourglasses"
-            ></div><span>{{ userHourglasses }}</span>
-          </div><div class="item-with-icon">
+            ></div>
+            <span>{{ userHourglasses }}</span>
+          </div>
+          <div class="item-with-icon">
             <a
               v-b-tooltip.hover.bottom="$t('gems')"
               class="top-menu-icon svg-icon gem"
@@ -306,28 +357,36 @@
               href="#buy-gems"
               @click.prevent="showBuyGemsModal('gems')"
               v-html="icons.gem"
-            ></a><span>{{ userGems }}</span>
-          </div><div class="item-with-icon gold">
+            ></a>
+            <span>{{ userGems }}</span>
+          </div>
+          <div class="item-with-icon gold">
             <div
               v-b-tooltip.hover.bottom="$t('gold')"
               class="top-menu-icon svg-icon"
               :aria-label="$t('gold')"
               v-html="icons.gold"
-            ></div><span>{{ Math.floor(user.stats.gp * 100) / 100 }}</span>
+            ></div>
+            <span>{{ Math.floor(user.stats.gp * 100) / 100 }}</span>
           </div>
-        </div><div class="form-inline desktop-only">
+        </div>
+        <div class="form-inline desktop-only">
           <a
-            class="item-with-icon"
             v-b-tooltip.hover.bottom="$t('sync')"
+            class="item-with-icon"
             role="link"
             :aria-label="$t('sync')"
             tabindex="0"
             @click="sync"
             @keyup.enter="sync"
-          ><div
-            class="top-menu-icon svg-icon"
-            v-html="icons.sync"
-          ></div></a><notification-menu class="item-with-icon" /><user-dropdown class="item-with-icon" />
+          >
+            <div
+              class="top-menu-icon svg-icon"
+              v-html="icons.sync"
+            ></div>
+          </a>
+          <notification-menu class="item-with-icon" />
+          <user-dropdown class="item-with-icon" />
         </div>
       </b-collapse>
     </b-navbar>
diff --git a/website/client/src/components/header/notifications/base.vue b/website/client/src/components/header/notifications/base.vue
index 79629d2887..ab6ed946fc 100644
--- a/website/client/src/components/header/notifications/base.vue
+++ b/website/client/src/components/header/notifications/base.vue
@@ -9,9 +9,11 @@
       :class="{'is-not-bailey': isNotBailey}"
     >
       <slot name="icon"></slot>
-    </div><div class="notification-content">
+    </div>
+    <div class="notification-content">
       <slot name="content"></slot>
-    </div><div
+    </div>
+    <div
       class="notification-remove"
       @click.stop="canRemove ? remove() : null"
     >
diff --git a/website/client/src/components/header/notifications/cardReceived.vue b/website/client/src/components/header/notifications/cardReceived.vue
index d4128b3ac4..6a07a9a026 100644
--- a/website/client/src/components/header/notifications/cardReceived.vue
+++ b/website/client/src/components/header/notifications/cardReceived.vue
@@ -9,7 +9,8 @@
     <div
       slot="content"
       v-html="$t('cardReceived', {card: cardString})"
-    ></div><div
+    ></div>
+    <div
       slot="icon"
       :class="cardClass"
     ></div>
diff --git a/website/client/src/components/header/notifications/groupTaskApproval.vue b/website/client/src/components/header/notifications/groupTaskApproval.vue
index aae5569b1e..8511837d21 100644
--- a/website/client/src/components/header/notifications/groupTaskApproval.vue
+++ b/website/client/src/components/header/notifications/groupTaskApproval.vue
@@ -6,13 +6,15 @@
     @click="action"
   >
     <div slot="content">
-      <div v-html="notification.data.message"></div><div class="notifications-buttons">
+      <div v-html="notification.data.message"></div>
+      <div class="notifications-buttons">
         <div
           class="btn btn-small btn-success"
           @click.stop="approve()"
         >
           {{ $t('approve') }}
-        </div><div
+        </div>
+        <div
           class="btn btn-small btn-warning"
           @click.stop="needsWork()"
         >
diff --git a/website/client/src/components/header/notifications/guildInvitation.vue b/website/client/src/components/header/notifications/guildInvitation.vue
index 59c2bbc1e3..69817418b3 100644
--- a/website/client/src/components/header/notifications/guildInvitation.vue
+++ b/website/client/src/components/header/notifications/guildInvitation.vue
@@ -6,13 +6,15 @@
     @click="action"
   >
     <div slot="content">
-      <div v-html="textString"></div><div class="notifications-buttons">
+      <div v-html="textString"></div>
+      <div class="notifications-buttons">
         <div
           class="btn btn-small btn-success"
           @click.stop="accept()"
         >
           {{ $t('accept') }}
-        </div><div
+        </div>
+        <div
           class="btn btn-small btn-danger"
           @click.stop="reject()"
         >
diff --git a/website/client/src/components/header/notifications/newChatMessage.vue b/website/client/src/components/header/notifications/newChatMessage.vue
index 319caccb9e..b50b4d3b33 100644
--- a/website/client/src/components/header/notifications/newChatMessage.vue
+++ b/website/client/src/components/header/notifications/newChatMessage.vue
@@ -1,5 +1,6 @@
 <template>
-  <!-- Read automatically from the group page mounted hook--><base-notification
+  <!-- Read automatically from the group page mounted hook-->
+  <base-notification
     :can-remove="canRemove"
     :has-icon="false"
     :notification="notification"
diff --git a/website/client/src/components/header/notifications/newInboxMessage.vue b/website/client/src/components/header/notifications/newInboxMessage.vue
index 7e941b5b3c..52fab1245a 100644
--- a/website/client/src/components/header/notifications/newInboxMessage.vue
+++ b/website/client/src/components/header/notifications/newInboxMessage.vue
@@ -7,7 +7,8 @@
     @click="action"
   >
     <div slot="content">
-      <span v-html="$t('userSentMessage', {user: notification.data.sender.name})"></span><div class="notification-small notification-ellipses">
+      <span v-html="$t('userSentMessage', {user: notification.data.sender.name})"></span>
+      <div class="notification-small notification-ellipses">
         {{ notification.data.excerpt }}
       </div>
     </div>
diff --git a/website/client/src/components/header/notifications/newMysteryItems.vue b/website/client/src/components/header/notifications/newMysteryItems.vue
index 401b6f4ef3..a5f301cdf9 100644
--- a/website/client/src/components/header/notifications/newMysteryItems.vue
+++ b/website/client/src/components/header/notifications/newMysteryItems.vue
@@ -9,7 +9,8 @@
     <div
       slot="content"
       v-html="$t('newSubscriberItem')"
-    ></div><div
+    ></div>
+    <div
       slot="icon"
       :class="mysteryClass"
     ></div>
diff --git a/website/client/src/components/header/notifications/newStuff.vue b/website/client/src/components/header/notifications/newStuff.vue
index 8766b075c9..b1ec2586db 100644
--- a/website/client/src/components/header/notifications/newStuff.vue
+++ b/website/client/src/components/header/notifications/newStuff.vue
@@ -9,8 +9,10 @@
     <div slot="content">
       <div class="notification-bold-purple">
         {{ $t('newBaileyUpdate') }}
-      </div><div>{{ notification.data.title }}</div>
-    </div><div
+      </div>
+      <div>{{ notification.data.title }}</div>
+    </div>
+    <div
       slot="icon"
       class="npc_bailey"
     ></div>
diff --git a/website/client/src/components/header/notifications/partyInvitation.vue b/website/client/src/components/header/notifications/partyInvitation.vue
index 04e6a3682f..f77416c4bf 100644
--- a/website/client/src/components/header/notifications/partyInvitation.vue
+++ b/website/client/src/components/header/notifications/partyInvitation.vue
@@ -5,13 +5,15 @@
     :notification="notification"
   >
     <div slot="content">
-      <div v-html="$t('invitedToParty', {party: notification.data.name})"></div><div class="notifications-buttons">
+      <div v-html="$t('invitedToParty', {party: notification.data.name})"></div>
+      <div class="notifications-buttons">
         <div
           class="btn btn-small btn-success"
           @click.stop="accept()"
         >
           {{ $t('accept') }}
-        </div><div
+        </div>
+        <div
           class="btn btn-small btn-danger"
           @click.stop="reject()"
         >
diff --git a/website/client/src/components/header/notifications/questInvitation.vue b/website/client/src/components/header/notifications/questInvitation.vue
index 0dc8510e27..67935c8da4 100644
--- a/website/client/src/components/header/notifications/questInvitation.vue
+++ b/website/client/src/components/header/notifications/questInvitation.vue
@@ -9,16 +9,19 @@
       <div
         class="message"
         v-html="$t('invitedToQuest', {quest: questName})"
-      ></div><quest-info
+      ></div>
+      <quest-info
         :quest="questData"
         :small-version="true"
-      /><div class="notifications-buttons">
+      />
+      <div class="notifications-buttons">
         <div
           class="btn btn-small btn-success"
           @click.stop="questAccept()"
         >
           {{ $t('accept') }}
-        </div><div
+        </div>
+        <div
           class="btn btn-small btn-danger"
           @click.stop="questReject()"
         >
diff --git a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
index 485d30a20c..f444b8ccf7 100644
--- a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
+++ b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
@@ -9,7 +9,8 @@
     <div
       slot="content"
       v-html="$t('unallocatedStatsPoints', {points: notification.data.points})"
-    ></div><div
+    ></div>
+    <div
       slot="icon"
       class="svg-icon"
       v-html="icons.sparkles"
diff --git a/website/client/src/components/header/notifications/verifyUsername.vue b/website/client/src/components/header/notifications/verifyUsername.vue
index cb4996b360..5cf9e7307a 100644
--- a/website/client/src/components/header/notifications/verifyUsername.vue
+++ b/website/client/src/components/header/notifications/verifyUsername.vue
@@ -12,9 +12,14 @@
     >
       <div class="username-notification-title">
         {{ $t('setUsernameNotificationTitle') }}
-      </div><div>{{ $t('setUsernameNotificationBody') }}</div><div class="current-username-container mx-auto">
-        <label class="font-weight-bold">{{ $t('currentUsername') + " " }}</label><label>@</label><label>{{ user.auth.local.username }}</label>
-      </div><div class="notifications-buttons">
+      </div>
+      <div>{{ $t('setUsernameNotificationBody') }}</div>
+      <div class="current-username-container mx-auto">
+        <label class="font-weight-bold">{{ $t('currentUsername') + " " }}</label>
+        <label>@</label>
+        <label>{{ user.auth.local.username }}</label>
+      </div>
+      <div class="notifications-buttons">
         <div
           class="btn btn-small btn-secondary"
           @click.stop="changeUsername()"
diff --git a/website/client/src/components/header/notifications/worldBoss.vue b/website/client/src/components/header/notifications/worldBoss.vue
index 0cb03bacf9..6562b0bc94 100644
--- a/website/client/src/components/header/notifications/worldBoss.vue
+++ b/website/client/src/components/header/notifications/worldBoss.vue
@@ -13,27 +13,37 @@
       <div class="text">
         <div class="title">
           {{ $t('worldBoss') }}
-        </div><div class="sub-title">
+        </div>
+        <div class="sub-title">
           {{ $t('questDysheartenerText') }}
         </div>
-      </div><div class="d-flex align-items-center justify-content-left">
-        <div><div class="left-hearts"></div></div><div class="float-right">
-          <div class="quest_dysheartener_notification"></div><div class="phobia_dysheartener_notification"></div>
+      </div>
+      <div class="d-flex align-items-center justify-content-left">
+        <div>
+          <div class="left-hearts"></div>
         </div>
-      </div><div class="health-bar d-flex align-items-center justify-content-center">
+        <div class="float-right">
+          <div class="quest_dysheartener_notification"></div>
+          <div class="phobia_dysheartener_notification"></div>
+        </div>
+      </div>
+      <div class="health-bar d-flex align-items-center justify-content-center">
         <div
           class="svg-icon"
           v-html="icons.health"
-        ></div><div class="boss-health-wrap">
+        ></div>
+        <div class="boss-health-wrap">
           <div
             class="boss-health-bar"
             :style="{width: (parseInt(bossHp) / questData.boss.hp) * 100 + '%'}"
           ></div>
-        </div><div class="pending-damage">
+        </div>
+        <div class="pending-damage">
           <div
             class="svg-icon"
             v-html="icons.sword"
-          ></div><span>+{{ parseInt(user.party.quest.progress.up) || 0 }}</span>
+          ></div>
+          <span>+{{ parseInt(user.party.quest.progress.up) || 0 }}</span>
         </div>
       </div>
     </div>
diff --git a/website/client/src/components/header/notificationsDropdown.vue b/website/client/src/components/header/notificationsDropdown.vue
index 2125364785..09bf3f2bd9 100644
--- a/website/client/src/components/header/notificationsDropdown.vue
+++ b/website/client/src/components/header/notificationsDropdown.vue
@@ -15,40 +15,48 @@
           :count="notificationsCount"
           :top="true"
           :gray="!hasUnseenNotifications"
-        /><div
+        />
+        <div
           class="top-menu-icon svg-icon notifications"
           v-html="icons.notifications"
         ></div>
       </div>
-    </div><div slot="dropdown-content">
+    </div>
+    <div slot="dropdown-content">
       <div
         class="dropdown-item dropdown-separated d-flex justify-content-between dropdown-inactive align-items-center"
-        @click.stop=""
+        @click.stop
       >
         <h4
           v-once
           class="dropdown-title"
         >
           {{ $t('notifications') }}
-        </h4><a
+        </h4>
+        <a
           class="small-link standard-link"
           :disabled="notificationsCount === 0"
           @click="dismissAll"
         >{{ $t('dismissAll') }}</a>
-      </div><world-boss /><component
+      </div>
+      <world-boss />
+      <component
         :is="notification.type"
         v-for="notification in notifications"
         :key="notification.id"
         :notification="notification"
         :can-remove="!isActionable(notification)"
-      /><div
+      />
+      <div
         v-if="notificationsCount === 0"
         class="dropdown-item dropdown-separated d-flex justify-content-center dropdown-inactive no-notifications flex-column"
       >
         <div
           class="svg-icon"
           v-html="icons.success"
-        ></div><h2>{{ $t('noNotifications') }}</h2><p>{{ $t('noNotificationsText') }}</p>
+        ></div>
+        <h2>{{ $t('noNotifications') }}</h2>
+        <p>{{ $t('noNotificationsText') }}</p>
       </div>
     </div>
   </menu-dropdown>
diff --git a/website/client/src/components/header/userDropdown.vue b/website/client/src/components/header/userDropdown.vue
index e27f52ff09..b1d91f437a 100644
--- a/website/client/src/components/header/userDropdown.vue
+++ b/website/client/src/components/header/userDropdown.vue
@@ -12,58 +12,77 @@
           v-if="user.inbox.newMessages > 0"
           :count="user.inbox.newMessages"
           :top="true"
-        /><div
+        />
+        <div
           class="top-menu-icon svg-icon user"
           v-html="icons.user"
         ></div>
       </div>
-    </div><div
+    </div>
+    <div
       slot="dropdown-content"
       class="user-dropdown"
     >
       <a
         class="dropdown-item edit-avatar dropdown-separated"
         @click="showAvatar('body', 'size')"
-      ><h3>{{ user.profile.name }}</h3><span class="small-text">{{ $t('editAvatar') }}</span></a><a
+      >
+        <h3>{{ user.profile.name }}</h3>
+        <span class="small-text">{{ $t('editAvatar') }}</span>
+      </a>
+      <a
         class="nav-link dropdown-item dropdown-separated d-flex justify-content-between align-items-center"
         @click.prevent="showInbox()"
-      ><div>{{ $t('messages') }}</div><message-count
-        v-if="user.inbox.newMessages > 0"
-        :count="user.inbox.newMessages"
-      /></a><a
+      >
+        <div>{{ $t('messages') }}</div>
+        <message-count
+          v-if="user.inbox.newMessages > 0"
+          :count="user.inbox.newMessages"
+        />
+      </a>
+      <a
         class="dropdown-item"
         @click="showAvatar('backgrounds', '2019')"
-      >{{ $t('backgrounds') }}</a><a
+      >{{ $t('backgrounds') }}</a>
+      <a
         class="dropdown-item"
         @click="showProfile('stats')"
-      >{{ $t('stats') }}</a><a
+      >{{ $t('stats') }}</a>
+      <a
         class="dropdown-item"
         @click="showProfile('achievements')"
-      >{{ $t('achievements') }}</a><a
+      >{{ $t('achievements') }}</a>
+      <a
         class="dropdown-item dropdown-separated"
         @click="showProfile('profile')"
-      >{{ $t('profile') }}</a><router-link
+      >{{ $t('profile') }}</a>
+      <router-link
         class="dropdown-item"
         :to="{name: 'site'}"
       >
         {{ $t('settings') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="dropdown-item dropdown-separated"
         :to="{name: 'subscription'}"
       >
         {{ $t('subscription') }}
-      </router-link><a
+      </router-link>
+      <a
         class="nav-link dropdown-item dropdown-separated"
         @click.prevent="logout()"
-      >{{ $t('logout') }}</a><li
+      >{{ $t('logout') }}</a>
+      <li
         v-if="!this.user.purchased.plan.customerId"
         @click="showBuyGemsModal('subscribe')"
       >
         <div class="dropdown-item text-center">
           <h3 class="purple">
             {{ $t('needMoreGems') }}
-          </h3><span class="small-text">{{ $t('needMoreGemsInfo') }}</span>
-        </div><div class="learn-background py-2 text-center">
+          </h3>
+          <span class="small-text">{{ $t('needMoreGemsInfo') }}</span>
+        </div>
+        <div class="learn-background py-2 text-center">
           <button class="btn btn-primary btn-lg learn-button">
             {{ $t('learnMore') }}
           </button>
diff --git a/website/client/src/components/inventory/equipment/attributesGrid.vue b/website/client/src/components/inventory/equipment/attributesGrid.vue
index 84b7aa4f2e..00bee8de14 100644
--- a/website/client/src/components/inventory/equipment/attributesGrid.vue
+++ b/website/client/src/components/inventory/equipment/attributesGrid.vue
@@ -9,19 +9,24 @@
         <span
           class="popover-content-attr-cell key"
           :class="{'hasValue': hasSumValue(attr) }"
-        >{{ `${$t(attr)}: ` }}</span><span
+        >{{ `${$t(attr)}: ` }}</span>
+        <span
           class="popover-content-attr-cell label value"
           :class="{'green': hasSumValue(attr) }"
-        >{{ `${stats.sum[attr]}` }}</span><span
+        >{{ `${stats.sum[attr]}` }}</span>
+        <span
           class="popover-content-attr-cell label bold"
           :class="{'hasValue': hasGearValue(attr) }"
-        >{{ $t('gear') }}:</span><span
+        >{{ $t('gear') }}:</span>
+        <span
           class="popover-content-attr-cell label"
           :class="{'hasValue': hasGearValue(attr) }"
-        >{{ stats.gear[attr] }}</span><span
+        >{{ stats.gear[attr] }}</span>
+        <span
           class="popover-content-attr-cell label bold"
           :class="{'hasValue': hasClassBonus(attr) }"
-        >{{ $t('classEquipBonus') }}:</span><span
+        >{{ $t('classEquipBonus') }}:</span>
+        <span
           class="popover-content-attr-cell label"
           :class="{'hasValue': hasClassBonus(attr) }"
         >{{ `${stats.classBonus[attr]}` }}</span>
diff --git a/website/client/src/components/inventory/equipment/attributesPopover.vue b/website/client/src/components/inventory/equipment/attributesPopover.vue
index 3ebc223ff1..4672bddd6f 100644
--- a/website/client/src/components/inventory/equipment/attributesPopover.vue
+++ b/website/client/src/components/inventory/equipment/attributesPopover.vue
@@ -3,23 +3,29 @@
     <div v-if="item.locked">
       <h4 class="popover-content-title">
         {{ `${$t('lockedItem')}` }}
-      </h4><div
+      </h4>
+      <div
         v-if="item.specialClass"
         class="popover-content-text"
       >
         {{ `${$t('classLockedItem')}` }}
-      </div><div
+      </div>
+      <div
         v-else
         class="popover-content-text"
       >
         {{ `${$t('tierLockedItem')}` }}
-      </div><p></p>
-    </div><div v-else>
+      </div>
+      <p></p>
+    </div>
+    <div v-else>
       <h4 class="popover-content-title">
         {{ itemText }}
-      </h4><div class="popover-content-text">
+      </h4>
+      <div class="popover-content-text">
         {{ itemNotes }}
-      </div><attributesGrid
+      </div>
+      <attributesGrid
         :user="user"
         :item="item"
       />
diff --git a/website/client/src/components/inventory/equipment/equipGearModal.vue b/website/client/src/components/inventory/equipment/equipGearModal.vue
index 10a5276856..e0c7a2c916 100644
--- a/website/client/src/components/inventory/equipment/equipGearModal.vue
+++ b/website/client/src/components/inventory/equipment/equipGearModal.vue
@@ -13,7 +13,8 @@
         @click="hideDialog()"
         v-html="icons.close"
       ></span>
-    </div><div
+    </div>
+    <div
       v-if="item != null"
       class="content"
     >
@@ -25,33 +26,42 @@
           :override-avatar-gear="memberOverrideAvatarGear(item)"
           :sprites-margin="'0px auto auto -1px'"
           :show-visual-buffs="false"
-        /><h4 class="title">
+        />
+        <h4 class="title">
           {{ itemText }}
-        </h4><div
+        </h4>
+        <div
           class="text"
           v-html="itemNotes"
-        ></div><span
+        ></div>
+        <span
           v-if="showClassTag"
           class="classTag"
-        ><span
-          class="svg-icon inline icon-24"
-          v-html="icons[itemClass]"
-        ></span><span
-          class="className textCondensed"
-          :class="itemClass"
-        >{{ getClassName(itemClass) }}</span></span><attributesGrid
+        >
+          <span
+            class="svg-icon inline icon-24"
+            v-html="icons[itemClass]"
+          ></span>
+          <span
+            class="className textCondensed"
+            :class="itemClass"
+          >{{ getClassName(itemClass) }}</span>
+        </span>
+        <attributesGrid
           v-if="attributesGridVisible"
           class="attributesGrid"
           :user="user"
           :item="item"
-        /><button
+        />
+        <button
           class="btn btn-primary"
           @click="equipItem()"
         >
           {{ $t(isEquipped ? 'unequip' : 'equip') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       slot="modal-footer"
       class="clearfix"
     ></div>
diff --git a/website/client/src/components/inventory/equipment/index.vue b/website/client/src/components/inventory/equipment/index.vue
index fc96a88ccc..c974b99800 100644
--- a/website/client/src/components/inventory/equipment/index.vue
+++ b/website/client/src/components/inventory/equipment/index.vue
@@ -8,10 +8,13 @@
           type="text"
           :placeholder="$t('search')"
         >
-      </div><div class="form">
+      </div>
+      <div class="form">
         <h2 v-once>
           {{ $t('filter') }}
-        </h2><h3>{{ this.groupBy === 'type' ? $t('equipmentType') : $t('class') }}</h3><div class="form-group">
+        </h2>
+        <h3>{{ this.groupBy === 'type' ? $t('equipmentType') : $t('class') }}</h3>
+        <div class="form-group">
           <div
             v-for="group in itemsGroups"
             :key="group.key"
@@ -23,7 +26,8 @@
                 v-model="viewOptions[group.key].selected"
                 class="custom-control-input"
                 type="checkbox"
-              ><label
+              >
+              <label
                 v-once
                 class="custom-control-label"
                 :for="groupBy + group.key"
@@ -32,15 +36,18 @@
           </div>
         </div>
       </div>
-    </div><div class="standard-page">
+    </div>
+    <div class="standard-page">
       <div class="clearfix">
         <h1
           v-once
           class="float-left mb-4 page-header"
         >
           {{ $t('equipment') }}
-        </h1><div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+        </h1>
+        <div class="float-right">
+          <span class="dropdown-label">{{ $t('sortBy') }}</span>
+          <b-dropdown
             :text="$t(selectedSortGearBy)"
             right="right"
           >
@@ -52,7 +59,9 @@
             >
               {{ $t(sort) }}
             </b-dropdown-item>
-          </b-dropdown><span class="dropdown-label">{{ $t('groupBy2') }}</span><b-dropdown
+          </b-dropdown>
+          <span class="dropdown-label">{{ $t('groupBy2') }}</span>
+          <b-dropdown
             :text="$t(groupBy === 'type' ? 'equipmentType' : 'class')"
             right="right"
           >
@@ -61,7 +70,8 @@
               @click="groupBy = 'type'"
             >
               {{ $t('equipmentType') }}
-            </b-dropdown-item><b-dropdown-item
+            </b-dropdown-item>
+            <b-dropdown-item
               :active="groupBy === 'class'"
               @click="groupBy = 'class'"
             >
@@ -69,7 +79,8 @@
             </b-dropdown-item>
           </b-dropdown>
         </div>
-      </div><drawer
+      </div>
+      <drawer
         :title="$t('equipment')"
         :error-message="(costumeMode && !user.preferences.costume) ? $t('costumeDisabled') : null"
         :open-status="openStatus"
@@ -83,14 +94,16 @@
                 :class="{'drawer-tab-text-active': !costumeMode}"
                 @click="selectDrawerTab('equipment')"
               >{{ $t('equipment') }}</a>
-            </div><div class="clearfix">
+            </div>
+            <div class="clearfix">
               <div class="drawer-tab float-left">
                 <a
                   class="drawer-tab-text"
                   :class="{'drawer-tab-text-active': costumeMode}"
                   @click="selectDrawerTab('costume')"
                 >{{ $t('costume') }}</a>
-              </div><toggle-switch
+              </div>
+              <toggle-switch
                 class="float-right align-with-tab"
                 :label="$t(costumeMode ? 'useCostume' : 'autoEquipBattleGear')"
                 :checked="user.preferences[drawerPreference]"
@@ -99,7 +112,8 @@
               />
             </div>
           </div>
-        </div><div
+        </div>
+        <div
           slot="drawer-slider"
           class="items items-one-line"
         >
@@ -113,14 +127,15 @@
             :label="label"
             :popover-position="'top'"
             :show-popover="flatGear[activeItems[group]] && Boolean(flatGear[activeItems[group]].text)"
-@click="equipItem(flatGear[activeItems[group]])"
+            @click="equipItem(flatGear[activeItems[group]])"
           >
             <template
               slot="popoverContent"
               slot-scope="context"
             >
               <equipmentAttributesPopover :item="context.item" />
-            </template><template
+            </template>
+            <template
               slot="itemBadge"
               slot-scope="context"
             >
@@ -132,7 +147,8 @@
             </template>
           </item>
         </div>
-      </drawer><div
+      </drawer>
+      <div
         v-for="group in itemsGroups"
         v-if="!anyFilterSelected || viewOptions[group.key].selected"
         :key="group.key"
@@ -140,8 +156,11 @@
       >
         <h2 class="mb-3">
           {{ group.label }}
-          <span class="badge badge-pill badge-default">{{ items[group.key].length }}</span>
-        </h2><itemRows
+          <span
+            class="badge badge-pill badge-default"
+          >{{ items[group.key].length }}</span>
+        </h2>
+        <itemRows
           :items="sortItems(items[group.key], selectedSortGearBy)"
           :item-width="94"
           :item-margin="24"
@@ -168,7 +187,8 @@
                   :show="!costumeMode || user.preferences.costume"
                   @click="equipItem(context.item)"
                 />
-              </template><template
+              </template>
+              <template
                 slot="popoverContent"
                 slot-scope="context"
               >
@@ -178,7 +198,8 @@
           </template>
         </itemRows>
       </div>
-    </div><equipGearModal
+    </div>
+    <equipGearModal
       :item="gearToEquip"
       :costume-mode="costumeMode"
       :is-equipped="gearToEquip == null ? false : activeItems[gearToEquip.type] === gearToEquip.key"
diff --git a/website/client/src/components/inventory/items/cards-modal.vue b/website/client/src/components/inventory/items/cards-modal.vue
index ddc55a12a5..83789bf919 100644
--- a/website/client/src/components/inventory/items/cards-modal.vue
+++ b/website/client/src/components/inventory/items/cards-modal.vue
@@ -9,13 +9,19 @@
       <div
         class="pull-right"
         :class="`inventory_special_${cardType}`"
-      ></div><h4>{{ $t(cardType + 'Card') }}</h4>
-    </div><div class="modal-body">
+      ></div>
+      <h4>{{ $t(cardType + 'Card') }}</h4>
+    </div>
+    <div class="modal-body">
       <div style="padding:10px">
-        <p>{{ $t('toAndFromCard', { toName: user.profile.name, fromName}) }}</p><hr><div v-markdown="cardMessage"></div>
+        <p>{{ $t('toAndFromCard', { toName: user.profile.name, fromName}) }}</p>
+        <hr>
+        <div v-markdown="cardMessage"></div>
       </div>
-    </div><div class="modal-footer">
-      <small class="pull-left">{{ $t(cardType + 'CardExplanation') }}</small><button
+    </div>
+    <div class="modal-footer">
+      <small class="pull-left">{{ $t(cardType + 'CardExplanation') }}</small>
+      <button
         class="btn btn-secondary"
         @click="readCard()"
       >
diff --git a/website/client/src/components/inventory/items/index.vue b/website/client/src/components/inventory/items/index.vue
index 5aa534ce46..5b2578867a 100644
--- a/website/client/src/components/inventory/items/index.vue
+++ b/website/client/src/components/inventory/items/index.vue
@@ -12,12 +12,15 @@
           type="text"
           :placeholder="$t('search')"
         >
-      </div><div class="form">
+      </div>
+      <div class="form">
         <h2 v-once>
           {{ $t('filter') }}
-        </h2><h3 v-once>
+        </h2>
+        <h3 v-once>
           {{ $t('equipmentType') }}
-        </h3><div class="form-group">
+        </h3>
+        <div class="form-group">
           <div
             v-for="group in groups"
             :key="group.key"
@@ -29,7 +32,8 @@
                 v-model="group.selected"
                 class="custom-control-input"
                 type="checkbox"
-              ><label
+              >
+              <label
                 v-once
                 class="custom-control-label"
                 :for="group.key"
@@ -38,15 +42,18 @@
           </div>
         </div>
       </div>
-    </div><div class="standard-page">
+    </div>
+    <div class="standard-page">
       <div class="clearfix">
         <h1
           v-once
           class="float-left mb-4 page-header"
         >
           {{ $t('items') }}
-        </h1><div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+        </h1>
+        <div class="float-right">
+          <span class="dropdown-label">{{ $t('sortBy') }}</span>
+          <b-dropdown
             :text="$t(sortBy)"
             right="right"
           >
@@ -55,7 +62,8 @@
               @click="sortBy = 'quantity'"
             >
               {{ $t('quantity') }}
-            </b-dropdown-item><b-dropdown-item
+            </b-dropdown-item>
+            <b-dropdown-item
               :active="sortBy === 'AZ'"
               @click="sortBy = 'AZ'"
             >
@@ -63,7 +71,8 @@
             </b-dropdown-item>
           </b-dropdown>
         </div>
-      </div><div
+      </div>
+      <div
         v-for="group in groups"
         v-if="!anyFilterSelected || group.selected"
         :key="group.key"
@@ -74,7 +83,8 @@
             v-if="group.key != 'special'"
             class="badge badge-pill badge-default"
           >{{ group.quantity }}</span>
-        </h2><itemRows
+        </h2>
+        <itemRows
           v-if="group.key === 'eggs'"
           :items="items[group.key]"
           :item-width="94"
@@ -95,7 +105,9 @@
               :active="currentDraggingEgg == context.item"
               :highlight-border="isHatchable(currentDraggingPotion, context.item)"
               @itemDragOver="onDragOver($event, context.item)"
-@itemDropped="onDrop($event, context.item)" @itemDragLeave="onDragLeave()" @click="onEggClicked($event, context.item)"
+              @itemDropped="onDrop($event, context.item)"
+              @itemDragLeave="onDragLeave()"
+              @click="onEggClicked($event, context.item)"
             >
               <template
                 slot="popoverContent"
@@ -103,13 +115,15 @@
               >
                 <h4 class="popover-content-title">
                   {{ context.item.text }}
-                </h4><div
+                </h4>
+                <div
                   v-if="currentDraggingPotion == null"
                   class="popover-content-text"
                 >
                   {{ context.item.notes }}
                 </div>
-              </template><template
+              </template>
+              <template
                 slot="itemBadge"
                 slot-scope="context"
               >
@@ -120,7 +134,8 @@
               </template>
             </item>
           </template>
-        </itemRows><itemRows
+        </itemRows>
+        <itemRows
           v-else-if="group.key === 'hatchingPotions'"
           :items="items[group.key]"
           :item-width="94"
@@ -141,7 +156,8 @@
               :active="currentDraggingPotion == context.item"
               :highlight-border="isHatchable(context.item, currentDraggingEgg)"
               @itemDragEnd="onDragEnd($event, context.item)"
-@itemDragStart="onDragStart($event, context.item)" @click="onPotionClicked($event, context.item)"
+              @itemDragStart="onDragStart($event, context.item)"
+              @click="onPotionClicked($event, context.item)"
             >
               <template
                 slot="popoverContent"
@@ -149,10 +165,12 @@
               >
                 <h4 class="popover-content-title">
                   {{ context.item.text }}
-                </h4><div class="popover-content-text">
+                </h4>
+                <div class="popover-content-text">
                   {{ context.item.notes }}
                 </div>
-              </template><template
+              </template>
+              <template
                 slot="itemBadge"
                 slot-scope="context"
               >
@@ -163,7 +181,8 @@
               </template>
             </item>
           </template>
-        </itemRows><itemRows
+        </itemRows>
+        <itemRows
           v-else
           :items="items[group.key]"
           :item-width="94"
@@ -192,16 +211,20 @@
                 >
                   <h4 class="popover-content-title">
                     {{ context.item.text }}
-                  </h4><questInfo :quest="context.item" />
-                </div><div v-else>
+                  </h4>
+                  <questInfo :quest="context.item" />
+                </div>
+                <div v-else>
                   <h4 class="popover-content-title">
                     {{ context.item.text }}
-                  </h4><div
+                  </h4>
+                  <div
                     class="popover-content-text"
                     v-html="context.item.notes"
                   ></div>
                 </div>
-              </template><template
+              </template>
+              <template
                 slot="itemBadge"
                 slot-scope="context"
               >
@@ -214,7 +237,9 @@
           </template>
         </itemRows>
       </div>
-    </div><hatchedPetDialog /><div
+    </div>
+    <hatchedPetDialog />
+    <div
       ref="draggingEggInfo"
       class="eggInfo"
     >
@@ -222,13 +247,15 @@
         <div
           class="potion-icon"
           :class="'Pet_Egg_'+currentDraggingEgg.key"
-        ></div><div class="popover">
+        ></div>
+        <div class="popover">
           <div class="popover-content">
             {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="eggClickMode"
       ref="clickEggInfo"
       class="eggInfo mouse"
@@ -237,13 +264,17 @@
         <div
           class="potion-icon"
           :class="'Pet_Egg_'+currentDraggingEgg.key"
-        ></div><div class="popover">
-          <div class="popover-content">
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
             {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       ref="draggingPotionInfo"
       class="hatchingPotionInfo"
     >
@@ -251,13 +282,17 @@
         <div
           class="potion-icon"
           :class="'Pet_HatchingPotion_'+currentDraggingPotion.key"
-        ></div><div class="popover">
-          <div class="popover-content">
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
             {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="potionClickMode"
       ref="clickPotionInfo"
       class="hatchingPotionInfo mouse"
@@ -266,13 +301,18 @@
         <div
           class="potion-icon"
           :class="'Pet_HatchingPotion_'+currentDraggingPotion.key"
-        ></div><div class="popover">
-          <div class="popover-content">
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
             {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
           </div>
         </div>
       </div>
-    </div><startQuestModal :group="user.party" /><cards-modal :card-options="cardOptions" />
+    </div>
+    <startQuestModal :group="user.party" />
+    <cards-modal :card-options="cardOptions" />
   </div>
 </template>
 
diff --git a/website/client/src/components/inventory/stable/foodItem.vue b/website/client/src/components/inventory/stable/foodItem.vue
index 884c438c15..93d1d9c38b 100644
--- a/website/client/src/components/inventory/stable/foodItem.vue
+++ b/website/client/src/components/inventory/stable/foodItem.vue
@@ -12,7 +12,8 @@
         <countBadge
           :show="true"
           :count="itemCount"
-        /><span
+        />
+        <span
           v-drag.food="item.key"
           class="item-content"
           :class="'Pet_Food_'+item.key"
@@ -20,14 +21,16 @@
           @itemDragStart="dragstart($event)"
         ></span>
       </div>
-    </div><b-popover
+    </div>
+    <b-popover
       :target="itemId"
       triggers="hover"
       placement="top"
     >
       <h4 class="popover-content-title">
         {{ itemName || item.text() }}
-      </h4><div
+      </h4>
+      <div
         class="popover-content-text"
         v-html="item.notes()"
       ></div>
diff --git a/website/client/src/components/inventory/stable/hatchedPetDialog.vue b/website/client/src/components/inventory/stable/hatchedPetDialog.vue
index a497def6ac..46158fb994 100644
--- a/website/client/src/components/inventory/stable/hatchedPetDialog.vue
+++ b/website/client/src/components/inventory/stable/hatchedPetDialog.vue
@@ -12,23 +12,28 @@
         class="dialog-header title"
       >
         {{ $t('hatchedPetGeneric') }}
-      </div><div class="inner-content">
+      </div>
+      <div class="inner-content">
         <div class="pet-background">
           <div :class="pet.class"></div>
-        </div><h4 class="title">
+        </div>
+        <h4 class="title">
           {{ pet.name }}
-        </h4><div
+        </h4>
+        <div
           v-if="!hideText"
           v-markdown="$t('hatchedPetHowToUse', { stableUrl: '/inventory/stable' })"
           class="text"
-        ></div><button
+        ></div>
+        <button
           class="btn btn-primary"
           @click="close()"
         >
           {{ $t('onward') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       slot="modal-footer"
       class="clearfix"
     ></div>
diff --git a/website/client/src/components/inventory/stable/hatchingModal.vue b/website/client/src/components/inventory/stable/hatchingModal.vue
index 72341d6e22..e158aa6a05 100644
--- a/website/client/src/components/inventory/stable/hatchingModal.vue
+++ b/website/client/src/components/inventory/stable/hatchingModal.vue
@@ -7,27 +7,33 @@
       <div class="potionEggGroup">
         <div class="potionEggBackground">
           <div :class="'Pet_HatchingPotion_'+hatchablePet.potionKey"></div>
-        </div><div class="potionEggBackground">
+        </div>
+        <div class="potionEggBackground">
           <div :class="'Pet_Egg_'+hatchablePet.eggKey"></div>
         </div>
-      </div><h4 class="title">
+      </div>
+      <h4 class="title">
         {{ hatchablePet.name }}
-      </h4><div
+      </h4>
+      <div
         class="text"
         v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })"
       ></div>
-    </div><span
+    </div>
+    <span
       slot="modal-header"
       class="svg-icon icon-10"
       @click="closeHatchPetDialog()"
       v-html="icons.close"
-    ></span><div slot="modal-footer">
+    ></span>
+    <div slot="modal-footer">
       <button
         class="btn btn-primary"
         @click="hatchPet(hatchablePet)"
       >
         {{ $t('hatch') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-secondary btn-flat"
         @click="closeHatchPetDialog()"
       >
diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index 682cff631c..45c587f1c4 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -9,7 +9,8 @@
         <div
           id="npmMattStable"
           class="npc_matt"
-        ></div><b-popover
+        ></div>
+        <b-popover
           triggers="hover"
           placement="right"
           target="npmMattStable"
@@ -19,26 +20,31 @@
             class="popover-content-title"
           >
             {{ $t('mattBoch') }}
-          </h4><div
+          </h4>
+          <div
             v-once
             class="popover-content-text"
           >
             {{ $t('mattBochText1') }}
           </div>
         </b-popover>
-      </div><div class="form-group">
+      </div>
+      <div class="form-group">
         <input
           v-model="searchText"
           class="form-control input-search"
           type="text"
           :placeholder="$t('search')"
         >
-      </div><div class="form">
+      </div>
+      <div class="form">
         <h2 v-once>
           {{ $t('filter') }}
-        </h2><h3 v-once>
+        </h2>
+        <h3 v-once>
           {{ $t('pets') }}
-        </h3><div class="form-group">
+        </h3>
+        <div class="form-group">
           <div
             v-for="petGroup in petGroups"
             :key="petGroup.key"
@@ -51,16 +57,19 @@
                 class="custom-control-input"
                 type="checkbox"
                 :disabled="viewOptions[petGroup.key].animalCount == 0"
-              ><label
+              >
+              <label
                 v-once
                 class="custom-control-label"
                 :for="petGroup.key"
               >{{ petGroup.label }}</label>
             </div>
           </div>
-        </div><h3 v-once>
+        </div>
+        <h3 v-once>
           {{ $t('mounts') }}
-        </h3><div class="form-group">
+        </h3>
+        <div class="form-group">
           <div
             v-for="mountGroup in mountGroups"
             :key="mountGroup.key"
@@ -73,32 +82,38 @@
                 class="custom-control-input"
                 type="checkbox"
                 :disabled="viewOptions[mountGroup.key].animalCount == 0"
-              ><label
+              >
+              <label
                 v-once
                 class="custom-control-label"
                 :for="mountGroup.key"
               >{{ mountGroup.label }}</label>
             </div>
           </div>
-        </div><div class="form-group clearfix">
+        </div>
+        <div class="form-group clearfix">
           <h3 class="float-left">
             {{ $t('hideMissing') }}
-          </h3><toggle-switch
+          </h3>
+          <toggle-switch
             class="float-right"
             :checked="hideMissing"
             @change="updateHideMissing"
           />
         </div>
       </div>
-    </div><div class="standard-page">
+    </div>
+    <div class="standard-page">
       <div class="clearfix">
         <h1
           v-once
           class="float-left mb-4 page-header"
         >
           {{ $t('stable') }}
-        </h1><div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+        </h1>
+        <div class="float-right">
+          <span class="dropdown-label">{{ $t('sortBy') }}</span>
+          <b-dropdown
             :text="$t(selectedSortBy)"
             right="right"
           >
@@ -112,17 +127,22 @@
             </b-dropdown-item>
           </b-dropdown>
         </div>
-      </div><h2 class="mb-3">
+      </div>
+      <h2 class="mb-3">
         {{ $t('pets') }}
-        <span class="badge badge-pill badge-default">{{ countOwnedAnimals(petGroups[0], 'pet') }}</span>
-      </h2><div
+        <span
+          class="badge badge-pill badge-default"
+        >{{ countOwnedAnimals(petGroups[0], 'pet') }}</span>
+      </h2>
+      <div
         v-for="(petGroup, index) in petGroups"
         v-if="!anyFilterSelected || viewOptions[petGroup.key].selected"
         :key="petGroup.key"
       >
         <h4 v-if="viewOptions[petGroup.key].animalCount !== 0">
           {{ petGroup.label }}
-        </h4><div
+        </h4>
+        <div
           v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)"
           v-if="index === 0 || $_openedItemRows_isToggled(petGroup.key)"
           class="pet-row d-flex"
@@ -155,24 +175,30 @@
               </template>
             </petItem>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="petGroup.key !== 'specialPets' && petGroup.key !== 'wackyPets'"
           class="btn btn-flat btn-show-more"
           @click="setShowMore(petGroup.key)"
         >
           {{ $_openedItemRows_isToggled(petGroup.key) ? $t('showLess') : $t('showMore') }}
         </div>
-      </div><h2>
+      </div>
+      <h2>
         {{ $t('mounts') }}
-        <span class="badge badge-pill badge-default">{{ countOwnedAnimals(mountGroups[0], 'mount') }}</span>
-      </h2><div
+        <span
+          class="badge badge-pill badge-default"
+        >{{ countOwnedAnimals(mountGroups[0], 'mount') }}</span>
+      </h2>
+      <div
         v-for="mountGroup in mountGroups"
         v-if="!anyFilterSelected || viewOptions[mountGroup.key].selected"
         :key="mountGroup.key"
       >
         <h4 v-if="viewOptions[mountGroup.key].animalCount != 0">
           {{ mountGroup.label }}
-        </h4><div
+        </h4>
+        <div
           v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
           v-if="index === 0 || $_openedItemRows_isToggled(mountGroup.key)"
           class="pet-row d-flex"
@@ -188,7 +214,10 @@
               :show-popover="true"
               @click="selectMount(item)"
             >
-              <span slot="popoverContent"><h4 class="popover-content-title">{{ item.name }}</h4></span><template
+              <span slot="popoverContent">
+                <h4 class="popover-content-title">{{ item.name }}</h4>
+              </span>
+              <template
                 slot="itemBadge"
                 slot-scope="context"
               >
@@ -200,14 +229,16 @@
               </template>
             </mountItem>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="mountGroup.key !== 'specialMounts'"
           class="btn btn-flat btn-show-more"
           @click="setShowMore(mountGroup.key)"
         >
           {{ $_openedItemRows_isToggled(mountGroup.key) ? $t('showLess') : $t('showMore') }}
         </div>
-      </div><inventoryDrawer>
+      </div>
+      <inventoryDrawer>
         <template
           slot="item"
           slot-scope="ctx"
@@ -223,7 +254,9 @@
           />
         </template>
       </inventoryDrawer>
-    </div><hatchedPetDialog :hide-text="true" /><div
+    </div>
+    <hatchedPetDialog :hide-text="true" />
+    <div
       ref="dragginFoodInfo"
       class="foodInfo"
     >
@@ -231,13 +264,17 @@
         <div
           class="food-icon"
           :class="'Pet_Food_'+currentDraggingFood.key"
-        ></div><div class="popover">
-          <div class="popover-content">
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
             {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="foodClickMode"
       ref="clickFoodInfo"
       class="foodInfo mouse"
@@ -246,13 +283,19 @@
         <div
           class="food-icon"
           :class="'Pet_Food_'+currentDraggingFood.key"
-        ></div><div class="popover">
-          <div class="popover-content">
+        ></div>
+        <div class="popover">
+          <div
+            class="popover-content"
+          >
             {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
           </div>
         </div>
       </div>
-    </div><mount-raised-modal /><welcome-modal /><hatching-modal :hatchable-pet.sync="hatchablePet" />
+    </div>
+    <mount-raised-modal />
+    <welcome-modal />
+    <hatching-modal :hatchable-pet.sync="hatchablePet" />
   </div>
 </template>
 
diff --git a/website/client/src/components/inventory/stable/mountItem.vue b/website/client/src/components/inventory/stable/mountItem.vue
index b1b4f11abc..3507b86a6a 100644
--- a/website/client/src/components/inventory/stable/mountItem.vue
+++ b/website/client/src/components/inventory/stable/mountItem.vue
@@ -12,12 +12,14 @@
         <slot
           name="itemBadge"
           :item="item"
-        ></slot><span
+        ></slot>
+        <span
           class="item-content"
           :class="itemClass()"
         ></span>
       </div>
-    </div><b-popover
+    </div>
+    <b-popover
       v-if="showPopover"
       :target="itemId"
       triggers="hover"
diff --git a/website/client/src/components/inventory/stable/mountRaisedModal.vue b/website/client/src/components/inventory/stable/mountRaisedModal.vue
index cf380b8e75..719830ba12 100644
--- a/website/client/src/components/inventory/stable/mountRaisedModal.vue
+++ b/website/client/src/components/inventory/stable/mountRaisedModal.vue
@@ -9,22 +9,26 @@
     >
       <div class="dialog-header title">
         {{ $t('raisedPet', {pet: mount.text()}) }}
-      </div><div class="inner-content">
+      </div>
+      <div class="inner-content">
         <div class="pet-background">
           <div
             class="mount"
             :class="`Mount_Icon_${mount.key}`"
           ></div>
-        </div><h4 class="title">
+        </div>
+        <h4 class="title">
           {{ mount.text() }}
-        </h4><button
+        </h4>
+        <button
           class="btn btn-primary onward"
           @click="close()"
         >
           {{ $t('onward') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       slot="modal-footer"
       class="clearfix"
     ></div>
diff --git a/website/client/src/components/memberDetails.vue b/website/client/src/components/memberDetails.vue
index bf73a1a1be..2b47c9b31d 100644
--- a/website/client/src/components/memberDetails.vue
+++ b/website/client/src/components/memberDetails.vue
@@ -12,7 +12,8 @@
         @mouseover.native="$emit('onHover')"
         @mouseout.native="$emit('onHover')"
       />
-    </div><div
+    </div>
+    <div
       class="member-stats"
       :class="{'col-8': !expanded && !isHeader}"
     >
@@ -20,9 +21,11 @@
         <class-badge
           v-if="classBadgePosition === 'next-to-name'"
           :member-class="member.stats.class"
-        /><div class="d-flex flex-column profile-name-character">
+        />
+        <div class="d-flex flex-column profile-name-character">
           <h3 class="character-name">
-            {{ member.profile.name }}<div
+            {{ member.profile.name }}
+            <div
               v-if="isBuffed"
               v-b-tooltip.hover.bottom="$t('buffed')"
               class="is-buffed"
@@ -32,31 +35,37 @@
                 v-html="icons.buff"
               ></div>
             </div>
-          </h3><div class="small-text character-level">
+          </h3>
+          <div class="small-text character-level">
             <span
               v-if="member.auth && member.auth.local && member.auth.local.username"
               class="mr-1"
-            >@{{ member.auth.local.username }}</span><span
+            >@{{ member.auth.local.username }}</span>
+            <span
               v-if="member.auth && member.auth.local && member.auth.local.username"
               class="mr-1"
-            >•</span><span>{{ characterLevel }}</span>
+            >•</span>
+            <span>{{ characterLevel }}</span>
           </div>
         </div>
-      </div><stats-bar
+      </div>
+      <stats-bar
         :icon="icons.health"
         :value="member.stats.hp"
         :max-value="MAX_HEALTH"
         :tooltip="$t('health')"
         progress-class="bg-health"
         :condensed="condensed"
-      /><stats-bar
+      />
+      <stats-bar
         :icon="icons.experience"
         :value="member.stats.exp"
         :max-value="toNextLevel"
         :tooltip="$t('experience')"
         progress-class="bg-experience"
         :condensed="condensed"
-      /><stats-bar
+      />
+      <stats-bar
         v-if="hasClass"
         :icon="icons.mana"
         :value="member.stats.mp"
diff --git a/website/client/src/components/members/groupMemberSearchDropdown.vue b/website/client/src/components/members/groupMemberSearchDropdown.vue
index a62281982d..a51f2ce71e 100644
--- a/website/client/src/components/members/groupMemberSearchDropdown.vue
+++ b/website/client/src/components/members/groupMemberSearchDropdown.vue
@@ -7,7 +7,8 @@
       v-model="searchTerm"
       class="form-control"
       type="text"
-    ><b-dropdown-item
+    >
+    <b-dropdown-item
       v-for="member in memberResults"
       :key="member._id"
       @click="selectMember(member)"
diff --git a/website/client/src/components/members/memberSearchDropdown.vue b/website/client/src/components/members/memberSearchDropdown.vue
index 323ebe1af2..fa2ccf17d0 100644
--- a/website/client/src/components/members/memberSearchDropdown.vue
+++ b/website/client/src/components/members/memberSearchDropdown.vue
@@ -13,7 +13,8 @@
         class="form-control"
         type="text"
       >
-    </b-dropdown-form><b-dropdown-item
+    </b-dropdown-form>
+    <b-dropdown-item
       v-for="member in memberResults"
       :key="member._id"
       @click="selectMember(member)"
diff --git a/website/client/src/components/members/removeMemberModal.vue b/website/client/src/components/members/removeMemberModal.vue
index 73cbd56731..e080d188d6 100644
--- a/website/client/src/components/members/removeMemberModal.vue
+++ b/website/client/src/components/members/removeMemberModal.vue
@@ -8,13 +8,15 @@
     <div class="text-center">
       <h2 class="col-12">
         {{ $t('sureKick') }}
-      </h2><div
+      </h2>
+      <div
         v-if="memberToRemove.profile"
         class="col-12 removing-member"
       >
         {{ memberToRemove.profile.name }}
       </div>
-    </div><div class="modal-body">
+    </div>
+    <div class="modal-body">
       <textarea
         v-model="removeMessage"
         class="form-control"
@@ -22,13 +24,15 @@
         rows="5"
         :placeholder="$t('optionalMessage')"
       ></textarea>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="pull-left btn btn-danger"
         @click="confirmRemoveMember()"
       >
         {{ $t('yesRemove') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-secondary"
         @click="close()"
       >
diff --git a/website/client/src/components/modifyInventory.vue b/website/client/src/components/modifyInventory.vue
index e3d06fb0af..2e88ee5c89 100644
--- a/website/client/src/components/modifyInventory.vue
+++ b/website/client/src/components/modifyInventory.vue
@@ -8,7 +8,8 @@
   >
     <div class="modal-header">
       <h4>Modify Inventory for {{ user.profile.name }}</h4>
-    </div><div class="modal-body">
+    </div>
+    <div class="modal-body">
       <div class="container-fluid">
         <div class="row">
           <div class="col-xs-12">
@@ -18,29 +19,36 @@
               @click="showInv.gear = true"
             >
               Show Gear
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.gear"
               @click="showInv.gear = false"
             >
               Hide Gear
-            </button><h4>Gear</h4><div ng-if="showInv.gear">
+            </button>
+            <h4>Gear</h4>
+            <div ng-if="showInv.gear">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('gear', true)"
               >
                 Own All
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('gear', false)"
               >
                 Previously Own All
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('gear', undefined)"
               >
                 Never Own All
-              </button><hr><ul class="list-group">
+              </button>
+              <hr>
+              <ul class="list-group">
                 <li
                   v-for="item in content.gear.flat"
                   class="list-group-item"
@@ -50,29 +58,41 @@
                     class="pull-left"
                     :class="'shop_' + item.key"
                     style="margin-right: 10px"
-                  ></div>{{ item.text() }}<div class="clearfix">
-                    <label class="radio-inline"><input
-                      type="radio"
-                      :name="'gear-' + item.key"
-                      ng-model="inv.gear[item.key]"
-                      ng-value="true"
-                    >Owned</label><label class="radio-inline"><input
-                      type="radio"
-                      :name="'gear-' + item.key"
-                      ng-model="inv.gear[item.key]"
-                      ng-value="false"
-                    >Previously Owned</label><label class="radio-inline"><input
-                      type="radio"
-                      :name="'gear-' + item.key"
-                      ng-model="inv.gear[item.key]"
-                      ng-value="undefined"
-                    >Never Owned</label>
+                  ></div>
+                  {{ item.text() }}
+                  <div class="clearfix">
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'gear-' + item.key"
+                        ng-model="inv.gear[item.key]"
+                        ng-value="true"
+                      >Owned
+                    </label>
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'gear-' + item.key"
+                        ng-model="inv.gear[item.key]"
+                        ng-value="false"
+                      >Previously Owned
+                    </label>
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'gear-' + item.key"
+                        ng-model="inv.gear[item.key]"
+                        ng-value="undefined"
+                      >Never Owned
+                    </label>
                   </div>
                 </li>
               </ul>
             </div>
           </div>
-        </div><hr><div class="row">
+        </div>
+        <hr>
+        <div class="row">
           <div class="col-xs-12">
             <button
               class="btn btn-secondary pull-right"
@@ -80,29 +100,36 @@
               @click="showInv.special = true"
             >
               Show Special Items
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.special"
               @click="showInv.special = false"
             >
               Hide Special Items
-            </button><h4>Special Items</h4><div ng-if="showInv.special">
+            </button>
+            <h4>Special Items</h4>
+            <div ng-if="showInv.special">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('special', 999)"
               >
                 Set All to 999
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('special', 0)"
               >
                 Set All to 0
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('special', undefined)"
               >
                 Set All to undefined
-              </button><hr><ul class="list-group">
+              </button>
+              <hr>
+              <ul class="list-group">
                 <li
                   v-for="item in content.special"
                   class="list-group-item"
@@ -114,7 +141,9 @@
                       class="pull-left"
                       :class="'inventory_special_' + item.key"
                       style="margin-right: 10px"
-                    ></div><p>{{ item.text() }}</p><input
+                    ></div>
+                    <p>{{ item.text() }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.special[item.key]"
@@ -124,7 +153,9 @@
               </ul>
             </div>
           </div>
-        </div><hr><div class="row">
+        </div>
+        <hr>
+        <div class="row">
           <div class="col-xs-12">
             <button
               class="btn btn-secondary pull-right"
@@ -132,34 +163,43 @@
               @click="showInv.pets = true"
             >
               Show Pets
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.pets"
               @click="showInv.pets = false"
             >
               Hide Pets
-            </button><h4>Pets</h4><div ng-if="showInv.pets">
+            </button>
+            <h4>Pets</h4>
+            <div ng-if="showInv.pets">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('pets', 45)"
               >
                 Set All to 45
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('pets', 0)"
               >
                 Set All to 0
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('pets', -1)"
               >
                 Set All to -1
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('pets', undefined)"
               >
                 Set All to undefined
-              </button><hr><h5>Drop Pets</h5><ul class="list-group">
+              </button>
+              <hr>
+              <h5>Drop Pets</h5>
+              <ul class="list-group">
                 <li
                   v-for="(pet, value) in content.pets"
                   class="list-group-item"
@@ -170,14 +210,18 @@
                       class="pull-left"
                       :class="'Pet-' + pet"
                       style="margin-right: 10px"
-                    ></div><p>{{ pet }}</p><input
+                    ></div>
+                    <p>{{ pet }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.pets[pet]"
                     >
                   </div>
                 </li>
-              </ul><h5>Quest Pets</h5><ul class="list-group">
+              </ul>
+              <h5>Quest Pets</h5>
+              <ul class="list-group">
                 <li
                   v-for="(pet, value) in content.questPets"
                   class="list-group-item"
@@ -188,14 +232,18 @@
                       class="pull-left"
                       :class="'Pet-' + pet"
                       style="margin-right: 10px"
-                    ></div><p>{{ pet }}</p><input
+                    ></div>
+                    <p>{{ pet }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.pets[pet]"
                     >
                   </div>
                 </li>
-              </ul><h5>Special Pets</h5><ul class="list-group">
+              </ul>
+              <h5>Special Pets</h5>
+              <ul class="list-group">
                 <li
                   v-for="(pet, value) in content.specialPets"
                   class="list-group-item"
@@ -206,14 +254,18 @@
                       class="pull-left"
                       :class="'Pet-' + pet"
                       style="margin-right: 10px"
-                    ></div><p>{{ pet }}</p><input
+                    ></div>
+                    <p>{{ pet }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.pets[pet]"
                     >
                   </div>
                 </li>
-              </ul><h5>Premium Pets</h5><ul class="list-group">
+              </ul>
+              <h5>Premium Pets</h5>
+              <ul class="list-group">
                 <li
                   v-for="(pet, value) in content.premiumPets"
                   class="list-group-item"
@@ -224,7 +276,9 @@
                       class="pull-left"
                       :class="'Pet-' + pet"
                       style="margin-right: 10px"
-                    ></div><p>{{ pet }}</p><input
+                    ></div>
+                    <p>{{ pet }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.pets[pet]"
@@ -234,7 +288,9 @@
               </ul>
             </div>
           </div>
-        </div><hr><div class="row">
+        </div>
+        <hr>
+        <div class="row">
           <div class="col-xs-12">
             <button
               class="btn btn-secondary pull-right"
@@ -242,24 +298,31 @@
               @click="showInv.mounts = true"
             >
               Show Mounts
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.mounts"
               @click="showInv.mounts = false"
             >
               Hide Mounts
-            </button><h4>Mounts</h4><div ng-if="showInv.mounts">
+            </button>
+            <h4>Mounts</h4>
+            <div ng-if="showInv.mounts">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('mounts', true)"
               >
                 Set all to Owned
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('mounts', undefined)"
               >
                 Set all to Not Owned
-              </button><hr><h5>Drop Mounts</h5><ul class="list-group">
+              </button>
+              <hr>
+              <h5>Drop Mounts</h5>
+              <ul class="list-group">
                 <li
                   v-for="(mount, value) in content.mounts"
                   class="list-group-item"
@@ -269,21 +332,30 @@
                     class="pull-left"
                     :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
-                  ></div>{{ mount }}<div class="clearfix">
-                    <label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="true"
-                    >Owned</label><label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="undefined"
-                    >Not Owned</label>
+                  ></div>
+                  {{ mount }}
+                  <div class="clearfix">
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="true"
+                      >Owned
+                    </label>
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="undefined"
+                      >Not Owned
+                    </label>
                   </div>
                 </li>
-              </ul><h5>Quest Mounts</h5><ul class="list-group">
+              </ul>
+              <h5>Quest Mounts</h5>
+              <ul class="list-group">
                 <li
                   v-for="(mount, value) in content.questMounts"
                   class="list-group-item"
@@ -293,21 +365,30 @@
                     class="pull-left"
                     :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
-                  ></div>{{ mount }}<div class="clearfix">
-                    <label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="true"
-                    >Owned</label><label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="undefined"
-                    >Not Owned</label>
+                  ></div>
+                  {{ mount }}
+                  <div class="clearfix">
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="true"
+                      >Owned
+                    </label>
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="undefined"
+                      >Not Owned
+                    </label>
                   </div>
                 </li>
-              </ul><h5>Special Mounts</h5><ul class="list-group">
+              </ul>
+              <h5>Special Mounts</h5>
+              <ul class="list-group">
                 <li
                   v-for="(mount, value) in content.specialMounts"
                   class="list-group-item"
@@ -317,21 +398,30 @@
                     class="pull-left"
                     :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
-                  ></div>{{ mount }}<div class="clearfix">
-                    <label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="true"
-                    >Owned</label><label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="undefined"
-                    >Not Owned</label>
+                  ></div>
+                  {{ mount }}
+                  <div class="clearfix">
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="true"
+                      >Owned
+                    </label>
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="undefined"
+                      >Not Owned
+                    </label>
                   </div>
                 </li>
-              </ul><h5>Premium Mounts</h5><ul class="list-group">
+              </ul>
+              <h5>Premium Mounts</h5>
+              <ul class="list-group">
                 <li
                   v-for="(mount, value) in content.premiumMounts"
                   class="list-group-item"
@@ -341,24 +431,33 @@
                     class="pull-left"
                     :class="'Mount_Icon_' + mount"
                     style="margin-right: 10px"
-                  ></div>{{ mount }}<div class="clearfix">
-                    <label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="true"
-                    >Owned</label><label class="radio-inline"><input
-                      type="radio"
-                      :name="'mounts-' + mount"
-                      ng-model="inv.mounts[mount]"
-                      ng-value="undefined"
-                    >Not Owned</label>
+                  ></div>
+                  {{ mount }}
+                  <div class="clearfix">
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="true"
+                      >Owned
+                    </label>
+                    <label class="radio-inline">
+                      <input
+                        type="radio"
+                        :name="'mounts-' + mount"
+                        ng-model="inv.mounts[mount]"
+                        ng-value="undefined"
+                      >Not Owned
+                    </label>
                   </div>
                 </li>
               </ul>
             </div>
           </div>
-        </div><hr><div class="row">
+        </div>
+        <hr>
+        <div class="row">
           <div class="col-xs-12">
             <button
               class="btn btn-secondary pull-right"
@@ -366,29 +465,36 @@
               @click="showInv.hatchingPotions = true"
             >
               Show Hatching Potions
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.hatchingPotions"
               @click="showInv.hatchingPotions = false"
             >
               Hide Hatching Potions
-            </button><h4>Hatching Potions</h4><div ng-if="showInv.hatchingPotions">
+            </button>
+            <h4>Hatching Potions</h4>
+            <div ng-if="showInv.hatchingPotions">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('hatchingPotions', 999)"
               >
                 Set All to 999
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('hatchingPotions', 0)"
               >
                 Set All to 0
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('hatchingPotions', undefined)"
               >
                 Set All to undefined
-              </button><hr><ul class="list-group">
+              </button>
+              <hr>
+              <ul class="list-group">
                 <li
                   v-for="item in content.hatchingPotions"
                   class="list-group-item"
@@ -399,7 +505,9 @@
                       class="pull-left"
                       :class="'Pet_HatchingPotion_' + item.key"
                       style="margin-right: 10px"
-                    ></div><p>{{ item.text() }}</p><input
+                    ></div>
+                    <p>{{ item.text() }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.hatchingPotions[item.key]"
@@ -409,7 +517,9 @@
               </ul>
             </div>
           </div>
-        </div><hr><div class="row">
+        </div>
+        <hr>
+        <div class="row">
           <div class="col-xs-12">
             <button
               class="btn btn-secondary pull-right"
@@ -417,29 +527,36 @@
               @click="showInv.eggs = true"
             >
               Show Eggs
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.eggs"
               @click="showInv.eggs = false"
             >
               Hide Eggs
-            </button><h4>Eggs</h4><div ng-if="showInv.eggs">
+            </button>
+            <h4>Eggs</h4>
+            <div ng-if="showInv.eggs">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('eggs', 999)"
               >
                 Set All to 999
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('eggs', 0)"
               >
                 Set All to 0
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('eggs', undefined)"
               >
                 Set All to undefined
-              </button><hr><ul class="list-group">
+              </button>
+              <hr>
+              <ul class="list-group">
                 <li
                   v-for="item in content.eggs"
                   class="list-group-item"
@@ -450,7 +567,9 @@
                       class="pull-left"
                       :class="'Pet_Egg_' + item.key"
                       style="margin-right: 10px"
-                    ></div><p>{{ item.text() }}</p><input
+                    ></div>
+                    <p>{{ item.text() }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.eggs[item.key]"
@@ -460,7 +579,9 @@
               </ul>
             </div>
           </div>
-        </div><hr><div class="row">
+        </div>
+        <hr>
+        <div class="row">
           <div class="col-xs-12">
             <button
               class="btn btn-secondary pull-right"
@@ -468,29 +589,36 @@
               @click="showInv.food = true"
             >
               Show Food
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.food"
               @click="showInv.food = false"
             >
               Hide Food
-            </button><h4>Food</h4><div ng-if="showInv.food">
+            </button>
+            <h4>Food</h4>
+            <div ng-if="showInv.food">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('food', 999)"
               >
                 Set All to 999
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('food', 0)"
               >
                 Set All to 0
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('food', undefined)"
               >
                 Set All to undefined
-              </button><hr><ul class="list-group">
+              </button>
+              <hr>
+              <ul class="list-group">
                 <li
                   v-for="item in content.food"
                   class="list-group-item"
@@ -501,7 +629,9 @@
                       class="pull-left"
                       :class="'Pet_Food_' + item.key"
                       style="margin-right: 10px"
-                    ></div><p>{{ item.text() }}</p><input
+                    ></div>
+                    <p>{{ item.text() }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.food[item.key]"
@@ -511,7 +641,9 @@
               </ul>
             </div>
           </div>
-        </div><hr><div class="row">
+        </div>
+        <hr>
+        <div class="row">
           <div class="col-xs-12">
             <button
               class="btn btn-secondary pull-right"
@@ -519,29 +651,36 @@
               @click="showInv.quests = true"
             >
               Show Quests
-            </button><button
+            </button>
+            <button
               class="btn btn-secondary pull-right"
               ng-if="showInv.quests"
               @click="showInv.quests = false"
             >
               Hide Quests
-            </button><h4>Quests</h4><div ng-if="showInv.quests">
+            </button>
+            <h4>Quests</h4>
+            <div ng-if="showInv.quests">
               <button
                 class="btn btn-secondary"
                 @click="setAllItems('quests', 999)"
               >
                 Set All to 999
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('quests', 0)"
               >
                 Set All to 0
-              </button><button
+              </button>
+              <button
                 class="btn btn-secondary"
                 @click="setAllItems('quests', undefined)"
               >
                 Set All to undefined
-              </button><hr><ul class="list-group">
+              </button>
+              <hr>
+              <ul class="list-group">
                 <li
                   v-for="item in content.quests"
                   class="list-group-item"
@@ -553,7 +692,9 @@
                       class="pull-left"
                       :class="'inventory_quest_scroll_' + item.key"
                       style="margin-right: 10px"
-                    ></div><p>{{ item.text() }}</p><input
+                    ></div>
+                    <p>{{ item.text() }}</p>
+                    <input
                       class="form-control"
                       type="number"
                       ng-model="inv.quests[item.key]"
@@ -565,13 +706,15 @@
           </div>
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="btn btn-secondary"
         @click="close()"
       >
         {{ $t('close') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-primary"
         @click="close();modifyInventory()"
       >
diff --git a/website/client/src/components/notifications.vue b/website/client/src/components/notifications.vue
index a6b3bf337a..8bfabda78d 100644
--- a/website/client/src/components/notifications.vue
+++ b/website/client/src/components/notifications.vue
@@ -3,7 +3,33 @@
     <yesterdaily-modal
       :yester-dailies="yesterDailies"
       @run-cron="runYesterDailiesAction()"
-    /><armoire-empty /><new-stuff /><death /><low-health /><level-up /><choose-class /><testing /><testingletiant /><rebirth-enabled /><drops-enabled /><contributor /><won-challenge /><ultimate-gear /><streak /><rebirth /><joined-guild /><joined-challenge /><invited-friend /><login-incentives :data="notificationData" /><quest-completed /><quest-invitation /><verify-username /><generic-achievement :data="notificationData" /><just-add-water /><lost-masterclasser /><mind-over-matter />
+    />
+    <armoire-empty />
+    <new-stuff />
+    <death />
+    <low-health />
+    <level-up />
+    <choose-class />
+    <testing />
+    <testingletiant />
+    <rebirth-enabled />
+    <drops-enabled />
+    <contributor />
+    <won-challenge />
+    <ultimate-gear />
+    <streak />
+    <rebirth />
+    <joined-guild />
+    <joined-challenge />
+    <invited-friend />
+    <login-incentives :data="notificationData" />
+    <quest-completed />
+    <quest-invitation />
+    <verify-username />
+    <generic-achievement :data="notificationData" />
+    <just-add-water />
+    <lost-masterclasser />
+    <mind-over-matter />
   </div>
 </template>
 
diff --git a/website/client/src/components/payments/amazonModal.vue b/website/client/src/components/payments/amazonModal.vue
index de9bbb5070..bf5b524415 100644
--- a/website/client/src/components/payments/amazonModal.vue
+++ b/website/client/src/components/payments/amazonModal.vue
@@ -7,16 +7,21 @@
   >
     <h2 class="text-center">
       Continue with Amazon
-    </h2><div
+    </h2>
+    <div
       v-if="amazonPayments.loggedIn"
       id="AmazonPayWallet"
       style="width: 400px; height: 228px;"
-    ></div><template v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'">
-      <br><p v-html="$t('amazonPaymentsRecurring')"></p><div
+    ></div>
+    <template v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'">
+      <br>
+      <p v-html="$t('amazonPaymentsRecurring')"></p>
+      <div
         id="AmazonPayRecurring"
         style="width: 400px; height: 140px;"
       ></div>
-    </template><div class="modal-footer">
+    </template>
+    <div class="modal-footer">
       <div class="text-center">
         <button
           v-if="amazonPaymentsCanCheckout"
diff --git a/website/client/src/components/payments/buyGemsModal.vue b/website/client/src/components/payments/buyGemsModal.vue
index b4554aaa8c..5f06ddddcf 100644
--- a/website/client/src/components/payments/buyGemsModal.vue
+++ b/website/client/src/components/payments/buyGemsModal.vue
@@ -14,43 +14,50 @@
             <h2 class="header-invert mx-auto">
               {{ $t('support') }}
             </h2>
-          </div><div class="row">
+          </div>
+          <div class="row">
             <div
               class="logo svg-icon mx-auto"
               v-html="icons.logo"
             ></div>
           </div>
         </div>
-      </div><div class="d-flex nav justify-content-center">
+      </div>
+      <div class="d-flex nav justify-content-center">
         <div
           class="nav-item text-center"
           :class="{active: selectedPage === 'subscribe'}"
           @click="selectedPage = 'subscribe'"
         >
           {{ $t('subscribe') }}
-        </div><div
+        </div>
+        <div
           class="nav-item text-center"
           :class="{active: selectedPage === 'gems'}"
           @click="selectedPage = 'gems'"
         >
           {{ $t('buyGems') }}
         </div>
-      </div><div v-show="selectedPage === 'gems'">
+      </div>
+      <div v-show="selectedPage === 'gems'">
         <div v-if="hasSubscription">
           <div class="row text-center">
             <h2 class="mx-auto text-leadin">
               {{ $t('subscriptionAlreadySubscribedLeadIn') }}
             </h2>
-          </div><div class="row text-center">
+          </div>
+          <div class="row text-center">
             <div class="col-6 offset-3">
               <p>{{ $t("gemsPurchaseNote") }}</p>
             </div>
           </div>
-        </div><div class="row text-center">
+        </div>
+        <div class="row text-center">
           <h2 class="mx-auto text-leadin">
             {{ $t('gemBenefitLeadin') }}
           </h2>
-        </div><div class="row">
+        </div>
+        <div class="row">
           <div class="col">
             <div class="row">
               <div class="col-md-2 offset-1">
@@ -60,22 +67,11 @@
                     v-html="icons.check"
                   ></div>
                 </div>
-              </div><div class="col-md-8 align-self-center">
+              </div>
+              <div class="col-md-8 align-self-center">
                 <p>{{ $t('gemBenefit1') }}</p>
               </div>
-            </div><div class="row">
-              <div class="col-md-2 offset-1">
-                <div class="d-flex bubble justify-content-center align-items-center">
-                  <div
-                    class="svg-icon check mx-auto"
-                    v-html="icons.check"
-                  ></div>
-                </div>
-              </div><div class="col-md-8 align-self-center">
-                <p>{{ $t('gemBenefit2') }}</p>
-              </div>
             </div>
-          </div><div class="col">
             <div class="row">
               <div class="col-md-2 offset-1">
                 <div class="d-flex bubble justify-content-center align-items-center">
@@ -84,10 +80,14 @@
                     v-html="icons.check"
                   ></div>
                 </div>
-              </div><div class="col-md-8 align-self-center">
-                <p>{{ $t('gemBenefit3') }}</p>
               </div>
-            </div><div class="row">
+              <div class="col-md-8 align-self-center">
+                <p>{{ $t('gemBenefit2') }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <div class="row">
               <div class="col-md-2 offset-1">
                 <div class="d-flex bubble justify-content-center align-items-center">
                   <div
@@ -95,12 +95,27 @@
                     v-html="icons.check"
                   ></div>
                 </div>
-              </div><div class="col-md-8 align-self-center">
+              </div>
+              <div class="col-md-8 align-self-center">
+                <p>{{ $t('gemBenefit3') }}</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-2 offset-1">
+                <div class="d-flex bubble justify-content-center align-items-center">
+                  <div
+                    class="svg-icon check mx-auto"
+                    v-html="icons.check"
+                  ></div>
+                </div>
+              </div>
+              <div class="col-md-8 align-self-center">
                 <p>{{ $t('gemBenefit4') }}</p>
               </div>
             </div>
           </div>
-        </div><div class="card-deck gem-deck">
+        </div>
+        <div class="card-deck gem-deck">
           <div
             class="card text-center col-3"
             :class="{active: gemAmount === 20 }"
@@ -111,12 +126,16 @@
                 style="'height: 55px; width: 47.5px; margin-top: 1.85em;'"
                 v-html="icons.twentyOneGems"
               ></div>
-            </div><div class="card-body">
+            </div>
+            <div class="card-body">
               <div class="gem-count">
                 20
-              </div><div class="gem-text">
+              </div>
+              <div class="gem-text">
                 {{ $t('gems') }}
-              </div><div class="divider"></div><button
+              </div>
+              <div class="divider"></div>
+              <button
                 class="btn btn-primary"
                 @click="gemAmount === 20 ? gemAmount = 0 : gemAmount = 20"
               >
@@ -124,11 +143,13 @@
               </button>
             </div>
           </div>
-        </div><div class="row text-center">
+        </div>
+        <div class="row text-center">
           <h2 class="mx-auto text-payment">
             {{ $t('choosePaymentMethod') }}
           </h2>
-        </div><div class="payments-column">
+        </div>
+        <div class="payments-column">
           <button
             class="purchase btn btn-primary payment-button payment-item"
             @click="showStripe({})"
@@ -136,47 +157,57 @@
             <div
               class="svg-icon credit-card-icon"
               v-html="icons.creditCardIcon"
-            ></div>{{ $t('card') }}
-          </button><button
+            ></div>
+            {{ $t('card') }}
+          </button>
+          <button
             class="btn payment-item paypal-checkout payment-button"
             @click="openPaypal(paypalCheckoutLink, 'gems')"
           >
-            &nbsp;<img
+            &nbsp;
+            <img
               src="~@/assets/images/paypal-checkout.png"
               :alt="$t('paypal')"
             >&nbsp;
-          </button><amazon-button
+          </button>
+          <amazon-button
             class="payment-item"
             :amazon-data="{type: 'single'}"
           />
-        </div><div class="row text-center">
+        </div>
+        <div class="row text-center">
           <div
             class="svg-icon mx-auto"
             style="'height: 24px; width: 24px;'"
             v-html="icons.heart"
           ></div>
-        </div><div class="row text-center text-outtro">
+        </div>
+        <div class="row text-center text-outtro">
           <div class="col-6 offset-3">
             {{ $t('buyGemsSupportsDevs') }}
           </div>
         </div>
-      </div><div v-show="selectedPage === 'subscribe'">
+      </div>
+      <div v-show="selectedPage === 'subscribe'">
         <div v-if="hasSubscription">
           <div class="row text-center">
             <h2 class="mx-auto text-leadin">
               {{ $t('subscriptionAlreadySubscribedLeadIn') }}
             </h2>
-          </div><div class="row text-center">
+          </div>
+          <div class="row text-center">
             <div class="col-10 offset-1">
               <p v-html="$t('subscriptionAlreadySubscribed1')"></p>
             </div>
           </div>
-        </div><div v-if="!hasSubscription">
+        </div>
+        <div v-if="!hasSubscription">
           <div class="row text-center">
             <h2 class="mx-auto text-leadin">
               {{ $t('subscriptionBenefitLeadin') }}
             </h2>
-          </div><div class="row">
+          </div>
+          <div class="row">
             <div class="col">
               <div class="row">
                 <div class="col-md-2 offset-1">
@@ -186,33 +217,11 @@
                       v-html="icons.check"
                     ></div>
                   </div>
-                </div><div class="col-md-8 align-self-center">
+                </div>
+                <div class="col-md-8 align-self-center">
                   <p>{{ $t('subscriptionBenefit1') }}</p>
                 </div>
-              </div><div class="row">
-                <div class="col-md-2 offset-1">
-                  <div class="d-flex bubble justify-content-center align-items-center">
-                    <div
-                      class="svg-icon check mx-auto"
-                      v-html="icons.check"
-                    ></div>
-                  </div>
-                </div><div class="col-md-8 align-self-center">
-                  <p>{{ $t('subscriptionBenefit2') }}</p>
-                </div>
-              </div><div class="row">
-                <div class="col-md-2 offset-1">
-                  <div class="d-flex bubble justify-content-center align-items-center">
-                    <div
-                      class="svg-icon check mx-auto"
-                      v-html="icons.check"
-                    ></div>
-                  </div>
-                </div><div class="col-md-8 align-self-center">
-                  <p>{{ $t('subscriptionBenefit3') }}</p>
-                </div>
               </div>
-            </div><div class="col">
               <div class="row">
                 <div class="col-md-2 offset-1">
                   <div class="d-flex bubble justify-content-center align-items-center">
@@ -221,10 +230,40 @@
                       v-html="icons.check"
                     ></div>
                   </div>
-                </div><div class="col-md-8 align-self-center">
+                </div>
+                <div class="col-md-8 align-self-center">
+                  <p>{{ $t('subscriptionBenefit2') }}</p>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-2 offset-1">
+                  <div class="d-flex bubble justify-content-center align-items-center">
+                    <div
+                      class="svg-icon check mx-auto"
+                      v-html="icons.check"
+                    ></div>
+                  </div>
+                </div>
+                <div class="col-md-8 align-self-center">
+                  <p>{{ $t('subscriptionBenefit3') }}</p>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="row">
+                <div class="col-md-2 offset-1">
+                  <div class="d-flex bubble justify-content-center align-items-center">
+                    <div
+                      class="svg-icon check mx-auto"
+                      v-html="icons.check"
+                    ></div>
+                  </div>
+                </div>
+                <div class="col-md-8 align-self-center">
                   <p>{{ $t('subscriptionBenefit4') }}</p>
                 </div>
-              </div><div class="row">
+              </div>
+              <div class="row">
                 <div class="col-md-2 offset-1">
                   <div class="d-flex bubble justify-content-center align-items-center">
                     <div
@@ -232,10 +271,12 @@
                       v-html="icons.check"
                     ></div>
                   </div>
-                </div><div class="col-md-8 align-self-center">
+                </div>
+                <div class="col-md-8 align-self-center">
                   <p>{{ $t('subscriptionBenefit5') }}</p>
                 </div>
-              </div><div class="row">
+              </div>
+              <div class="row">
                 <div class="col-md-2 offset-1">
                   <div class="d-flex bubble justify-content-center align-items-center">
                     <div
@@ -243,103 +284,136 @@
                       v-html="icons.check"
                     ></div>
                   </div>
-                </div><div class="col-md-8 align-self-center">
+                </div>
+                <div class="col-md-8 align-self-center">
                   <p>{{ $t('subscriptionBenefit6') }}</p>
                 </div>
               </div>
             </div>
-          </div><div class="card-deck">
+          </div>
+          <div class="card-deck">
             <div
               class="card text-center"
               :class="{active: subscriptionPlan === 'basic_earned'}"
             >
               <div class="card-body">
                 <div class="subscription-price">
-                  <span class="superscript">$</span><span>5</span><span class="superscript muted">.00</span>
-                </div><div
+                  <span class="superscript">$</span>
+                  <span>5</span>
+                  <span class="superscript muted">.00</span>
+                </div>
+                <div
                   v-once
                   class="small"
                 >
                   {{ $t('everyMonth') }}
-                </div><div class="divider"></div><p
+                </div>
+                <div class="divider"></div>
+                <p
                   v-markdown="$t('earnGemsMonthly', {cap:25})"
                   class="benefits"
-                ></p><div class="spacer"></div><button
+                ></p>
+                <div class="spacer"></div>
+                <button
                   class="btn btn-primary"
                   @click="subscriptionPlan = 'basic_earned'"
                 >
                   {{ subscriptionPlan === "basic_earned" ? $t('selected') : $t('select') }}
                 </button>
               </div>
-            </div><div
+            </div>
+            <div
               class="card text-center"
               :class="{active: subscriptionPlan === 'basic_3mo'}"
             >
               <div class="card-body">
                 <div class="subscription-price">
-                  <span class="superscript">$</span><span>15</span><span class="superscript muted">.00</span>
-                </div><div
+                  <span class="superscript">$</span>
+                  <span>15</span>
+                  <span class="superscript muted">.00</span>
+                </div>
+                <div
                   v-once
                   class="small"
                 >
                   {{ $t('everyXMonths', {interval: 3}) }}
-                </div><div class="divider"></div><p
+                </div>
+                <div class="divider"></div>
+                <p
                   v-markdown="$t('earnGemsMonthly', {cap:30})"
                   class="benefits"
-                ></p><p
+                ></p>
+                <p
                   v-markdown="$t('receiveMysticHourglass')"
                   class="benefits"
-                ></p><button
+                ></p>
+                <button
                   class="btn btn-primary"
                   @click="subscriptionPlan = 'basic_3mo'"
                 >
                   {{ subscriptionPlan === "basic_3mo" ? $t('selected') : $t('select') }}
                 </button>
               </div>
-            </div><div
+            </div>
+            <div
               class="card text-center"
               :class="{active: subscriptionPlan === 'basic_6mo'}"
             >
               <div class="card-body">
                 <div class="subscription-price">
-                  <span class="superscript">$</span><span>30</span><span class="superscript muted">.00</span>
-                </div><div
+                  <span class="superscript">$</span>
+                  <span>30</span>
+                  <span class="superscript muted">.00</span>
+                </div>
+                <div
                   v-once
                   class="small"
                 >
                   {{ $t('everyXMonths', {interval: 6}) }}
-                </div><div class="divider"></div><p
+                </div>
+                <div class="divider"></div>
+                <p
                   v-markdown="$t('earnGemsMonthly', {cap:35})"
                   class="benefits"
-                ></p><p
+                ></p>
+                <p
                   v-markdown="$t('receiveMysticHourglasses', {amount:2})"
                   class="benefits"
-                ></p><button
+                ></p>
+                <button
                   class="btn btn-primary"
                   @click="subscriptionPlan = 'basic_6mo'"
                 >
                   {{ subscriptionPlan === "basic_6mo" ? $t('selected') : $t('select') }}
                 </button>
               </div>
-            </div><div
+            </div>
+            <div
               class="card text-center"
               :class="{active: subscriptionPlan === 'basic_12mo'}"
             >
               <div class="card-body">
                 <div class="subscription-price">
-                  <span class="superscript">$</span><span>48</span><span class="superscript muted">.00</span>
-                </div><div
+                  <span class="superscript">$</span>
+                  <span>48</span>
+                  <span class="superscript muted">.00</span>
+                </div>
+                <div
                   v-once
                   class="small"
                 >
                   {{ $t('everyYear') }}
-                </div><div class="divider"></div><p
+                </div>
+                <div class="divider"></div>
+                <p
                   v-markdown="$t('earnGemsMonthly', {cap:45})"
                   class="benefits"
-                ></p><p
+                ></p>
+                <p
                   v-markdown="$t('receiveMysticHourglasses', {amount:4})"
                   class="benefits"
-                ></p><button
+                ></p>
+                <button
                   class="btn btn-primary"
                   @click="subscriptionPlan = 'basic_12mo'"
                 >
@@ -347,7 +421,8 @@
                 </button>
               </div>
             </div>
-          </div><div
+          </div>
+          <div
             v-if="subscriptionPlan"
             class="row text-center"
           >
@@ -357,12 +432,14 @@
             >
               {{ $t('choosePaymentMethod') }}
             </h2>
-          </div><div class="row text-center">
+          </div>
+          <div class="row text-center">
             <a
               v-once
               class="mx-auto"
             >{{ $t('haveCouponCode') }}</a>
-          </div><div
+          </div>
+          <div
             v-if="subscriptionPlan"
             class="payments-column"
           >
@@ -373,26 +450,32 @@
               <div
                 class="svg-icon credit-card-icon"
                 v-html="icons.creditCardIcon"
-              ></div>{{ $t('card') }}
-            </button><button
+              ></div>
+              {{ $t('card') }}
+            </button>
+            <button
               class="btn payment-item paypal-checkout payment-button"
               @click="openPaypal(paypalSubscriptionLink, 'subscription')"
             >
-              &nbsp;<img
+              &nbsp;
+              <img
                 src="~@/assets/images/paypal-checkout.png"
                 :alt="$t('paypal')"
               >&nbsp;
-            </button><amazon-button
+            </button>
+            <amazon-button
               class="payment-item"
               :amazon-data="{type: 'subscription', subscription: subscriptionPlan}"
             />
-          </div><div class="row text-center">
+          </div>
+          <div class="row text-center">
             <div
               class="svg-icon mx-auto"
               style="'height: 24px; width: 24px;'"
               v-html="icons.heart"
             ></div>
-          </div><div class="row text-center text-outtro">
+          </div>
+          <div class="row text-center text-outtro">
             <div class="col-6 offset-3">
               {{ $t('subscribeSupportsDevs') }}
             </div>
diff --git a/website/client/src/components/payments/cancelModalConfirm.vue b/website/client/src/components/payments/cancelModalConfirm.vue
index 9956819cf2..545820f1a9 100644
--- a/website/client/src/components/payments/cancelModalConfirm.vue
+++ b/website/client/src/components/payments/cancelModalConfirm.vue
@@ -6,22 +6,30 @@
     :modal-class="['modal-hidden-footer']"
   >
     <div slot="modal-header">
-      <div class="icon-container warning-container d-flex align-items-center justify-content-center">
+      <div
+        class="icon-container warning-container d-flex align-items-center justify-content-center"
+      >
         <div
           v-once
           class="svg-icon warning"
           v-html="icons.warning"
         ></div>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-12 modal-body-col">
-        <h2>{{ config && config.group ? $t('cancelGroupSub') : $t('cancelSub') }}</h2><span class="cancel-text">{{ config && config.group ? $t('confirmCancelGroupPlan') : $t('confirmCancelSub') }}</span><button
+        <h2>{{ config && config.group ? $t('cancelGroupSub') : $t('cancelSub') }}</h2>
+        <span
+          class="cancel-text"
+        >{{ config && config.group ? $t('confirmCancelGroupPlan') : $t('confirmCancelSub') }}</span>
+        <button
           v-once
           class="btn btn-danger mt-4 mb-3"
           @click="close(); cancelSubscription(config)"
         >
           {{ $t('cancelSub') }}
-        </button><a
+        </button>
+        <a
           v-once
           class="standard-link"
           @click="close()"
diff --git a/website/client/src/components/payments/canceledModal.vue b/website/client/src/components/payments/canceledModal.vue
index 29db94c07f..cb4be6a156 100644
--- a/website/client/src/components/payments/canceledModal.vue
+++ b/website/client/src/components/payments/canceledModal.vue
@@ -11,18 +11,26 @@
         class="svg-icon close"
         @click="close()"
         v-html="icons.close"
-      ></div><div class="icon-container check-container d-flex align-items-center justify-content-center">
+      ></div>
+      <div class="icon-container check-container d-flex align-items-center justify-content-center">
         <div
           v-once
           class="svg-icon check"
           v-html="icons.check"
         ></div>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-12 modal-body-col">
-        <h2>{{ $t(isGroup ? 'canceledGroupPlan' : 'subCanceledTitle') }}</h2><div class="details-block">
-          <span>{{ $t('subWillBecomeInactive') }}<br><strong>{{ isGroup ? groupDateTerminated : dateTerminated }}</strong></span>
-        </div><span
+        <h2>{{ $t(isGroup ? 'canceledGroupPlan' : 'subCanceledTitle') }}</h2>
+        <div class="details-block">
+          <span>
+            {{ $t('subWillBecomeInactive') }}
+            <br>
+            <strong>{{ isGroup ? groupDateTerminated : dateTerminated }}</strong>
+          </span>
+        </div>
+        <span
           v-once
           class="auto-renew small-text"
         >{{ $t('paymentCanceledDisputes') }}</span>
diff --git a/website/client/src/components/payments/sendGemsModal.vue b/website/client/src/components/payments/sendGemsModal.vue
index 3e9721b245..8258f28cc6 100644
--- a/website/client/src/components/payments/sendGemsModal.vue
+++ b/website/client/src/components/payments/sendGemsModal.vue
@@ -14,9 +14,16 @@
       >
         <h3 class="panel-heading clearfix">
           <div class="float-right">
-            <span v-if="gift.gems.fromBalance">{{ $t('sendGiftGemsBalance', {number: userLoggedIn.balance * 4}) }}</span><span v-if="!gift.gems.fromBalance">{{ $t('sendGiftCost', {cost: gift.gems.amount / 4}) }}</span>
-          </div>{{ $t('gemsPopoverTitle') }}
-        </h3><div class="panel-body">
+            <span
+              v-if="gift.gems.fromBalance"
+            >{{ $t('sendGiftGemsBalance', {number: userLoggedIn.balance * 4}) }}</span>
+            <span
+              v-if="!gift.gems.fromBalance"
+            >{{ $t('sendGiftCost', {cost: gift.gems.amount / 4}) }}</span>
+          </div>
+          {{ $t('gemsPopoverTitle') }}
+        </h3>
+        <div class="panel-body">
           <div class="row">
             <div class="col-md-6">
               <div class="form-group">
@@ -29,7 +36,8 @@
                   :max="gift.gems.fromBalance ? userLoggedIn.balance * 4 : 9999"
                 >
               </div>
-            </div><div class="col-md-6">
+            </div>
+            <div class="col-md-6">
               <div class="btn-group">
                 <button
                   class="btn btn-secondary"
@@ -37,7 +45,8 @@
                   @click="gift.gems.fromBalance = true"
                 >
                   {{ $t('sendGiftFromBalance') }}
-                </button><button
+                </button>
+                <button
                   class="btn btn-secondary"
                   :class="{active: !gift.gems.fromBalance}"
                   @click="gift.gems.fromBalance = false"
@@ -46,7 +55,8 @@
                 </button>
               </div>
             </div>
-          </div><div class="row">
+          </div>
+          <div class="row">
             <div class="col-md-12">
               <p
                 class="small"
@@ -55,14 +65,16 @@
             </div>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         class="panel panel-default"
         :class="gift.type=='subscription' ? 'panel-primary' : 'transparent'"
         @click="gift.type = 'subscription'"
       >
         <h3 class="panel-heading">
           {{ $t('subscription') }}
-        </h3><div class="panel-body">
+        </h3>
+        <div class="panel-body">
           <div class="row">
             <div class="col-md-12">
               <div class="form-group">
@@ -71,24 +83,30 @@
                   v-if="block.target !== 'group' && block.canSubscribe === true"
                   class="radio"
                 >
-                  <label><input
-                    v-model="gift.subscription.key"
-                    type="radio"
-                    name="subRadio"
-                    :value="block.key"
-                  >{{ $t('sendGiftSubscription', {price: block.price, months: block.months}) }}</label>
+                  <label>
+                    <input
+                      v-model="gift.subscription.key"
+                      type="radio"
+                      name="subRadio"
+                      :value="block.key"
+                    >
+                    {{ $t('sendGiftSubscription', {price: block.price, months: block.months}) }}
+                  </label>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div><textarea
+      </div>
+      <textarea
         v-model="gift.message"
         class="form-control"
         rows="3"
         :placeholder="$t('sendGiftMessagePlaceholder')"
-      ></textarea><!--include ../formatting-help-->
-    </div><div class="modal-footer">
+      ></textarea>
+      <!--include ../formatting-help-->
+    </div>
+    <div class="modal-footer">
       <button
         v-if="fromBal"
         class="btn btn-primary"
@@ -96,7 +114,8 @@
         @click="sendGift()"
       >
         {{ $t("send") }}
-      </button><div
+      </button>
+      <div
         v-else
         class="payments-column mx-auto"
         :class="{'payments-disabled': !gift.subscription.key && gift.gems.amount < 1}"
@@ -109,17 +128,21 @@
           <div
             class="svg-icon credit-card-icon"
             v-html="icons.creditCardIcon"
-          ></div>{{ $t('card') }}
-        </button><button
+          ></div>
+          {{ $t('card') }}
+        </button>
+        <button
           class="btn payment-item paypal-checkout payment-button"
           :disabled="!gift.subscription.key && gift.gems.amount < 1"
           @click="openPaypalGift({gift: gift, giftedTo: userReceivingGems._id, receiverName})"
         >
-          &nbsp;<img
+          &nbsp;
+          <img
             src="~@/assets/images/paypal-checkout.png"
             :alt="$t('paypal')"
           >&nbsp;
-        </button><amazon-button
+        </button>
+        <amazon-button
           class="payment-item mb-0"
           :amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}"
           :amazon-disabled="!gift.subscription.key && gift.gems.amount < 1"
diff --git a/website/client/src/components/payments/successModal.vue b/website/client/src/components/payments/successModal.vue
index 76d724331e..eb5977ac97 100644
--- a/website/client/src/components/payments/successModal.vue
+++ b/website/client/src/components/payments/successModal.vue
@@ -13,48 +13,75 @@
           class="svg-icon check"
           v-html="icons.check"
         ></div>
-      </div><h2>{{ $t(isFromBalance ? 'success' : 'paymentSuccessful') }}</h2>
-    </div><div slot="modal-footer">
+      </div>
+      <h2>{{ $t(isFromBalance ? 'success' : 'paymentSuccessful') }}</h2>
+    </div>
+    <div slot="modal-footer">
       <div
         v-once
         class="small-text"
       >
         {{ $t('giftSubscriptionText4') }}
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-12 modal-body-col">
         <template v-if="paymentData.paymentType === 'gems'">
-          <strong v-once>{{ $t('paymentYouReceived') }}</strong><div class="details-block gems">
+          <strong v-once>{{ $t('paymentYouReceived') }}</strong>
+          <div class="details-block gems">
             <div
               v-once
               class="svg-icon"
               v-html="icons.gem"
-            ></div><span>20</span>
+            ></div>
+            <span>20</span>
           </div>
-        </template><template v-if="paymentData.paymentType === 'gift-gems' || paymentData.paymentType === 'gift-gems-balance'">
-          <span v-html="$t('paymentYouSentGems', {name: paymentData.giftReceiver})"></span><div class="details-block gems">
+        </template>
+        <template
+          v-if="paymentData.paymentType === 'gift-gems' || paymentData.paymentType === 'gift-gems-balance'"
+        >
+          <span v-html="$t('paymentYouSentGems', {name: paymentData.giftReceiver})"></span>
+          <div class="details-block gems">
             <div
               v-once
               class="svg-icon"
               v-html="icons.gem"
-            ></div><span>{{ paymentData.gift.gems.amount }}</span>
+            ></div>
+            <span>{{ paymentData.gift.gems.amount }}</span>
           </div>
-        </template><template v-if="paymentData.paymentType === 'gift-subscription'">
-          <span v-html="$t('paymentYouSentSubscription', {name: paymentData.giftReceiver, months: paymentData.subscription.months})"></span>
-        </template><template v-if="paymentData.paymentType === 'subscription'">
-          <strong v-once>{{ $t('nowSubscribed') }}</strong><div class="details-block">
-            <span v-html="$t('paymentSubBilling', {amount: paymentData.subscription.price, months: paymentData.subscription.months})"></span>
+        </template>
+        <template v-if="paymentData.paymentType === 'gift-subscription'">
+          <span
+            v-html="$t('paymentYouSentSubscription', {name: paymentData.giftReceiver, months: paymentData.subscription.months})"
+          ></span>
+        </template>
+        <template v-if="paymentData.paymentType === 'subscription'">
+          <strong v-once>{{ $t('nowSubscribed') }}</strong>
+          <div class="details-block">
+            <span
+              v-html="$t('paymentSubBilling', {amount: paymentData.subscription.price, months: paymentData.subscription.months})"
+            ></span>
           </div>
-        </template><template v-if="paymentData.paymentType === 'groupPlan'">
-          <span v-html="$t(paymentData.newGroup ? 'groupPlanCreated' : 'groupPlanUpgraded', {groupName: paymentData.group.name})"></span><div class="details-block">
-            <span v-html="$t('paymentSubBilling', {amount: groupPlanCost, months: paymentData.subscription.months})"></span>
+        </template>
+        <template v-if="paymentData.paymentType === 'groupPlan'">
+          <span
+            v-html="$t(paymentData.newGroup ? 'groupPlanCreated' : 'groupPlanUpgraded', {groupName: paymentData.group.name})"
+          ></span>
+          <div class="details-block">
+            <span
+              v-html="$t('paymentSubBilling', {amount: groupPlanCost, months: paymentData.subscription.months})"
+            ></span>
           </div>
-        </template><template v-if="paymentData.paymentType === 'groupPlan' || paymentData.paymentType === 'subscription'">
+        </template>
+        <template
+          v-if="paymentData.paymentType === 'groupPlan' || paymentData.paymentType === 'subscription'"
+        >
           <span
             v-once
             class="small-text auto-renew"
           >{{ $t('paymentAutoRenew') }}</span>
-        </template><button
+        </template>
+        <button
           v-once
           class="btn btn-primary"
           @click="close()"
diff --git a/website/client/src/components/selectMembersModal.vue b/website/client/src/components/selectMembersModal.vue
index 165b2a52b5..19052d5a71 100644
--- a/website/client/src/components/selectMembersModal.vue
+++ b/website/client/src/components/selectMembersModal.vue
@@ -15,7 +15,8 @@
             <h1 v-once>
               {{ $t('selectPartyMember') }}
             </h1>
-          </div><div class="col-6">
+          </div>
+          <div class="col-6">
             <button
               class="close"
               type="button"
@@ -25,7 +26,8 @@
               <span aria-hidden="true">×</span>
             </button>
           </div>
-        </div><div class="row">
+        </div>
+        <div class="row">
           <div class="form-group col-6">
             <input
               v-model="searchTerm"
@@ -33,8 +35,10 @@
               type="text"
               :placeholder="$t('search')"
             >
-          </div><div class="col-4 offset-2">
-            <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+          </div>
+          <div class="col-4 offset-2">
+            <span class="dropdown-label">{{ $t('sortBy') }}</span>
+            <b-dropdown
               :text="$t('sort')"
               right="right"
             >
@@ -48,13 +52,15 @@
             </b-dropdown>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-for="member in sortedMembers"
         class="row"
       >
         <div class="col-10">
           <member-details :member="member" />
-        </div><div class="col-2 actions">
+        </div>
+        <div class="col-2 actions">
           <button
             class="btn btn-primary"
             @click="selectMember(member)"
@@ -62,7 +68,8 @@
             {{ $t('select') }}
           </button>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="members.length > 3"
         class="row gradient"
       ></div>
diff --git a/website/client/src/components/settings/api.vue b/website/client/src/components/settings/api.vue
index d7e68af7b0..7e4958109f 100644
--- a/website/client/src/components/settings/api.vue
+++ b/website/client/src/components/settings/api.vue
@@ -1,45 +1,73 @@
 <template>
   <div class="row standard-page">
     <div class="col-6">
-      <h2>{{ $t('API') }}</h2><p>{{ $t('APIText') }}</p><div class="section">
-        <h6>{{ $t('userId') }}</h6><pre class="prettyprint">{{ user.id }}</pre><h6>{{ $t('APIToken') }}</h6><div class="d-flex align-items-center mb-3">
+      <h2>{{ $t('API') }}</h2>
+      <p>{{ $t('APIText') }}</p>
+      <div class="section">
+        <h6>{{ $t('userId') }}</h6>
+        <pre class="prettyprint">{{ user.id }}</pre>
+        <h6>{{ $t('APIToken') }}</h6>
+        <div class="d-flex align-items-center mb-3">
           <button
             class="btn btn-secondary"
             @click="showApiToken = !showApiToken"
           >
             {{ $t(`${showApiToken ? 'hide' : 'show'}APIToken`) }}
-          </button><pre
+          </button>
+          <pre
             v-if="showApiToken"
             class="prettyprint ml-4 mb-0"
           >{{ apiToken }}</pre>
-        </div><p v-html="$t('APITokenWarning', { hrefTechAssistanceEmail })"></p>
-      </div><div class="section">
-        <h3>{{ $t('thirdPartyApps') }}</h3><ul>
+        </div>
+        <p v-html="$t('APITokenWarning', { hrefTechAssistanceEmail })"></p>
+      </div>
+      <div class="section">
+        <h3>{{ $t('thirdPartyApps') }}</h3>
+        <ul>
           <li>
             <a
               target="_blank"
               href="https://www.beeminder.com/habitica"
-            >{{ $t('beeminder') }}</a><br>{{ $t('beeminderDesc') }}
-          </li><li>
+            >{{ $t('beeminder') }}</a>
+            <br>
+            {{ $t('beeminderDesc') }}
+          </li>
+          <li>
             <a
               target="_blank"
               href="https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb"
-            >{{ $t('chromeChatExtension') }}</a><br>{{ $t('chromeChatExtensionDesc') }}
-          </li><li>
+            >{{ $t('chromeChatExtension') }}</a>
+            <br>
+            {{ $t('chromeChatExtensionDesc') }}
+          </li>
+          <li>
             <a
               target="_blank"
               :href="`https://oldgods.net/habitica/habitrpg_user_data_display.html?uuid=` + user._id"
-            >{{ $t('dataTool') }}</a><br>{{ $t('dataToolDesc') }}
-          </li><li v-html="$t('otherExtensions')">
-            <br>{{ $t('otherDesc') }}
+            >{{ $t('dataTool') }}</a>
+            <br>
+            {{ $t('dataToolDesc') }}
           </li>
-        </ul><hr>
+          <li v-html="$t('otherExtensions')">
+            <br>
+            {{ $t('otherDesc') }}
+          </li>
+        </ul>
+        <hr>
       </div>
-    </div><div class="col-6">
-      <h2>{{ $t('webhooks') }}</h2><p v-html="$t('webhooksInfo')"></p><table class="table table-striped">
+    </div>
+    <div class="col-6">
+      <h2>{{ $t('webhooks') }}</h2>
+      <p v-html="$t('webhooksInfo')"></p>
+      <table class="table table-striped">
         <thead v-if="user.webhooks.length">
-          <tr><th>{{ $t('enabled') }}</th><th>{{ $t('webhookURL') }}</th><th></th></tr>
-        </thead><tbody>
+          <tr>
+            <th>{{ $t('enabled') }}</th>
+            <th>{{ $t('webhookURL') }}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
           <tr v-for="(webhook, index) in user.webhooks">
             <td>
               <input
@@ -47,25 +75,31 @@
                 type="checkbox"
                 @change="saveWebhook(webhook, index)"
               >
-            </td><td>
+            </td>
+            <td>
               <input
                 v-model="webhook.url"
                 class="form-control"
                 type="url"
               >
-            </td><td>
+            </td>
+            <td>
               <a
                 class="btn btn-warning checklist-icons"
                 @click="deleteWebhook(webhook, index)"
-              ><span
-                class="glyphicon glyphicon-trash"
-                :tooltip="$t('delete')"
-              >Delete</span></a><a
+              >
+                <span
+                  class="glyphicon glyphicon-trash"
+                  :tooltip="$t('delete')"
+                >Delete</span>
+              </a>
+              <a
                 class="btn btn-success checklist-icons"
                 @click="saveWebhook(webhook, index)"
               >Update</a>
             </td>
-          </tr><tr>
+          </tr>
+          <tr>
             <td colspan="2">
               <div class="form-horizontal">
                 <div class="form-group col-sm-10">
@@ -75,7 +109,8 @@
                     type="url"
                     :placeholder="$t('webhookURL')"
                   >
-                </div><div class="col-sm-2">
+                </div>
+                <div class="col-sm-2">
                   <button
                     class="btn btn-sm btn-primary"
                     type="submit"
diff --git a/website/client/src/components/settings/dataExport.vue b/website/client/src/components/settings/dataExport.vue
index 630e98868c..e80987b893 100644
--- a/website/client/src/components/settings/dataExport.vue
+++ b/website/client/src/components/settings/dataExport.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="row">
     <div class="col-md-6">
-      <h2>{{ $t('dataExport') }}</h2><small>{{ $t('saveData') }}</small><h4>{{ $t('habitHistory') }}</h4>{{ $t('exportHistory') }}<a href="/export/history.csv">{{ $t('csv') }}</a><h4>{{ $t('userData') }}</h4>{{ $t('exportUserData') }}<a href="/export/userdata.xml">{{ $t('xml') }}</a><a href="/export/userdata.json">{{ $t('json') }}</a>
+      <h2>{{ $t('dataExport') }}</h2>
+      <small>{{ $t('saveData') }}</small>
+      <h4>{{ $t('habitHistory') }}</h4>
+      {{ $t('exportHistory') }}
+      <a href="/export/history.csv">{{ $t('csv') }}</a>
+      <h4>{{ $t('userData') }}</h4>
+      {{ $t('exportUserData') }}
+      <a href="/export/userdata.xml">{{ $t('xml') }}</a>
+      <a href="/export/userdata.json">{{ $t('json') }}</a>
     </div>
   </div>
 </template>
diff --git a/website/client/src/components/settings/deleteModal.vue b/website/client/src/components/settings/deleteModal.vue
index d1290c9552..1d21281fdd 100644
--- a/website/client/src/components/settings/deleteModal.vue
+++ b/website/client/src/components/settings/deleteModal.vue
@@ -6,7 +6,12 @@
     size="md"
   >
     <div class="modal-body">
-      <br><strong v-if="user.auth.local.email">{{ $t('deleteLocalAccountText') }}</strong><strong v-if="!user.auth.local.email">{{ $t('deleteSocialAccountText', {magicWord: 'DELETE'}) }}</strong><div class="row mt-3">
+      <br>
+      <strong v-if="user.auth.local.email">{{ $t('deleteLocalAccountText') }}</strong>
+      <strong
+        v-if="!user.auth.local.email"
+      >{{ $t('deleteSocialAccountText', {magicWord: 'DELETE'}) }}</strong>
+      <div class="row mt-3">
         <div class="col-6">
           <input
             v-model="password"
@@ -14,25 +19,29 @@
             type="password"
           >
         </div>
-      </div><div class="row mt-3">
+      </div>
+      <div class="row mt-3">
         <div
           id="feedback"
           class="col-12 form-group"
         >
-          <label for="feedbackTextArea">{{ $t('feedback') }}</label><textarea
+          <label for="feedbackTextArea">{{ $t('feedback') }}</label>
+          <textarea
             id="feedbackTextArea"
             v-model="feedback"
             class="form-control"
           ></textarea>
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="btn btn-primary"
         @click="close()"
       >
         {{ $t('neverMind') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-danger"
         :disabled="!password"
         @click="deleteAccount()"
diff --git a/website/client/src/components/settings/index.vue b/website/client/src/components/settings/index.vue
index 2a6eaa6063..61e6f4bee7 100644
--- a/website/client/src/components/settings/index.vue
+++ b/website/client/src/components/settings/index.vue
@@ -8,38 +8,44 @@
         :class="{'active': $route.name === 'site'}"
       >
         {{ $t('site') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'api'}"
         :class="{'active': $route.name === 'api'}"
       >
         {{ $t('API') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'dataExport'}"
         :class="{'active': $route.name === 'dataExport'}"
       >
         {{ $t('dataExport') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'promoCode'}"
         :class="{'active': $route.name === 'promoCode'}"
       >
         {{ $t('promoCode') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'subscription'}"
         :class="{'active': $route.name === 'subscription'}"
       >
         {{ $t('subscription') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'notifications'}"
         :class="{'active': $route.name === 'notifications'}"
       >
         {{ $t('notifications') }}
       </router-link>
-    </secondary-menu><div class="col-12">
+    </secondary-menu>
+    <div class="col-12">
       <router-view />
     </div>
   </div>
diff --git a/website/client/src/components/settings/notifications.vue b/website/client/src/components/settings/notifications.vue
index 51ce6ddae4..367b7670ee 100644
--- a/website/client/src/components/settings/notifications.vue
+++ b/website/client/src/components/settings/notifications.vue
@@ -2,34 +2,60 @@
   <div class="row standard-page">
     <div class="col-12">
       <h1>{{ $t('notifications') }}</h1>
-    </div><div class="col-12">
+    </div>
+    <div class="col-12">
       <div class="checkbox">
-        <label><input
-          v-model="user.preferences.pushNotifications.unsubscribeFromAll"
-          type="checkbox"
-          @change="set('pushNotifications', 'unsubscribeFromAll')"
-        ><span>{{ $t('unsubscribeAllPush') }}</span></label>
-      </div><br><div class="checkbox">
-        <label><input
-          v-model="user.preferences.emailNotifications.unsubscribeFromAll"
-          type="checkbox"
-          @change="set('emailNotifications', 'unsubscribeFromAll')"
-        ><span>{{ $t('unsubscribeAllEmails') }}</span></label>
-      </div><small>{{ $t('unsubscribeAllEmailsText') }}</small>
-    </div><div class="col-8">
-      <table class="table"></table><tr><td></td><th><span>{{ $t('email') }}</span></th><th><span>{{ $t('push') }}</span></th></tr><tr v-for="notification in notificationsIds">
-        <td><span>{{ $t(notification) }}</span></td><td>
+        <label>
+          <input
+            v-model="user.preferences.pushNotifications.unsubscribeFromAll"
+            type="checkbox"
+            @change="set('pushNotifications', 'unsubscribeFromAll')"
+          >
+          <span>{{ $t('unsubscribeAllPush') }}</span>
+        </label>
+      </div>
+      <br>
+      <div class="checkbox">
+        <label>
+          <input
+            v-model="user.preferences.emailNotifications.unsubscribeFromAll"
+            type="checkbox"
+            @change="set('emailNotifications', 'unsubscribeFromAll')"
+          >
+          <span>{{ $t('unsubscribeAllEmails') }}</span>
+        </label>
+      </div>
+      <small>{{ $t('unsubscribeAllEmailsText') }}</small>
+    </div>
+    <div class="col-8">
+      <table class="table"></table>
+      <tr>
+        <td></td>
+        <th>
+          <span>{{ $t('email') }}</span>
+        </th>
+        <th>
+          <span>{{ $t('push') }}</span>
+        </th>
+      </tr>
+      <tr v-for="notification in notificationsIds">
+        <td>
+          <span>{{ $t(notification) }}</span>
+        </td>
+        <td>
           <input
             v-model="user.preferences.emailNotifications[notification]"
             type="checkbox"
             @change="set('emailNotifications', notification)"
           >
-        </td><td v-if="onlyEmailsIds.indexOf(notification) === -1">
+        </td>
+        <td v-if="onlyEmailsIds.indexOf(notification) === -1">
           <input
             v-model="user.preferences.pushNotifications[notification]"
             type="checkbox"
             @change="set('pushNotifications', notification)"
-          ><hr>
+          >
+          <hr>
         </td>
       </tr>
     </div>
diff --git a/website/client/src/components/settings/promoCode.vue b/website/client/src/components/settings/promoCode.vue
index 9e559ec82a..71bbea8c75 100644
--- a/website/client/src/components/settings/promoCode.vue
+++ b/website/client/src/components/settings/promoCode.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="row standard-page">
     <div class="col-md-6">
-      <h2>{{ $t('promoCode') }}</h2><div
+      <h2>{{ $t('promoCode') }}</h2>
+      <div
         class="form-inline"
         role="form"
       >
@@ -10,14 +11,21 @@
           class="form-control"
           type="text"
           :placeholder="$t('promoPlaceholder')"
-        ><button
+        >
+        <button
           class="btn btn-primary"
           @click="enterCoupon()"
         >
           {{ $t('submit') }}
         </button>
-      </div><div><small>{{ $t('couponText') }}</small></div><div v-if="user.contributor.sudo">
-        <hr><h4>{{ $t('generateCodes') }}</h4><div
+      </div>
+      <div>
+        <small>{{ $t('couponText') }}</small>
+      </div>
+      <div v-if="user.contributor.sudo">
+        <hr>
+        <h4>{{ $t('generateCodes') }}</h4>
+        <div
           class="form"
           role="form"
         >
@@ -28,21 +36,24 @@
               type="text"
               placeholder="Event code (eg, 'wondercon')"
             >
-          </div><div class="form-group">
+          </div>
+          <div class="form-group">
             <input
               v-model="codes.count"
               class="form-control"
               type="number"
               placeholder="Number of codes to generate (eg, 250)"
             >
-          </div><div class="form-group">
+          </div>
+          <div class="form-group">
             <button
               class="btn btn-primary"
               type="submit"
               @click="generateCodes(codes)"
             >
               {{ $t('generate') }}
-            </button><a
+            </button>
+            <a
               class="btn btn-secondary"
               :href="getCodesUrl"
             >{{ $t('getCodes') }}</a>
diff --git a/website/client/src/components/settings/resetModal.vue b/website/client/src/components/settings/resetModal.vue
index 0d34719be2..d48b14109c 100644
--- a/website/client/src/components/settings/resetModal.vue
+++ b/website/client/src/components/settings/resetModal.vue
@@ -5,13 +5,16 @@
     :hide-footer="true"
     size="md"
   >
-    <p>{{ $t('resetText1') }}</p><p>{{ $t('resetText2') }}</p><div class="modal-footer">
+    <p>{{ $t('resetText1') }}</p>
+    <p>{{ $t('resetText2') }}</p>
+    <div class="modal-footer">
       <button
         class="btn btn-primary"
         @click="close()"
       >
         {{ $t('neverMind') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-danger"
         @click="reset()"
       >
diff --git a/website/client/src/components/settings/restoreModal.vue b/website/client/src/components/settings/restoreModal.vue
index 3fca891ed0..c5d7fd1222 100644
--- a/website/client/src/components/settings/restoreModal.vue
+++ b/website/client/src/components/settings/restoreModal.vue
@@ -5,11 +5,15 @@
     :hide-footer="true"
     size="lg"
   >
-    <p>{{ $t('fixValuesText1') }}</p><p>{{ $t('fixValuesText2') }}</p><div class="form-horizontal">
-      <h3>{{ $t('stats') }}</h3><div class="form-group row">
+    <p>{{ $t('fixValuesText1') }}</p>
+    <p>{{ $t('fixValuesText2') }}</p>
+    <div class="form-horizontal">
+      <h3>{{ $t('stats') }}</h3>
+      <div class="form-group row">
         <div class="col-sm-3">
           <label class="control-label">{{ $t('health') }}</label>
-        </div><div class="col-sm-9">
+        </div>
+        <div class="col-sm-9">
           <input
             v-model="restoreValues.stats.hp"
             class="form-control"
@@ -18,10 +22,12 @@
             data-for="stats.hp"
           >
         </div>
-      </div><div class="form-group row">
+      </div>
+      <div class="form-group row">
         <div class="col-sm-3">
           <label class="control-label">{{ $t('experience') }}</label>
-        </div><div class="col-sm-9">
+        </div>
+        <div class="col-sm-9">
           <input
             v-model="restoreValues.stats.exp"
             class="form-control"
@@ -30,10 +36,12 @@
             data-for="stats.exp"
           >
         </div>
-      </div><div class="form-group row">
+      </div>
+      <div class="form-group row">
         <div class="col-sm-3">
           <label class="control-label">{{ $t('gold') }}</label>
-        </div><div class="col-sm-9">
+        </div>
+        <div class="col-sm-9">
           <input
             v-model="restoreValues.stats.gp"
             class="form-control"
@@ -41,11 +49,14 @@
             step="any"
             data-for="stats.gp"
           >
-        </div><!--input.form-control(type='number', step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
-      </div><div class="form-group row">
+        </div>
+        <!--input.form-control(type='number', step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
+      </div>
+      <div class="form-group row">
         <div class="col-sm-3">
           <label class="control-label">{{ $t('mana') }}</label>
-        </div><div class="col-sm-9">
+        </div>
+        <div class="col-sm-9">
           <input
             v-model="restoreValues.stats.mp"
             class="form-control"
@@ -54,10 +65,12 @@
             data-for="stats.mp"
           >
         </div>
-      </div><div class="form-group row">
+      </div>
+      <div class="form-group row">
         <div class="col-sm-3">
           <label class="control-label">{{ $t('level') }}</label>
-        </div><div class="col-sm-9">
+        </div>
+        <div class="col-sm-9">
           <input
             v-model="restoreValues.stats.lvl"
             class="form-control"
@@ -65,10 +78,13 @@
             data-for="stats.lvl"
           >
         </div>
-      </div><h3>{{ $t('achievements') }}</h3><div class="form-group row">
+      </div>
+      <h3>{{ $t('achievements') }}</h3>
+      <div class="form-group row">
         <div class="col-sm-3">
           <label class="control-label">{{ $t('fix21Streaks') }}</label>
-        </div><div class="col-sm-9">
+        </div>
+        <div class="col-sm-9">
           <input
             v-model="restoreValues.achievements.streak"
             class="form-control"
@@ -77,13 +93,15 @@
           >
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="btn btn-danger"
         @click="close()"
       >
         {{ $t('discardChanges') }}
-      </button><button
+      </button>
+      <button
         class="btn btn-primary"
         @click="restore()"
       >
diff --git a/website/client/src/components/settings/site.vue b/website/client/src/components/settings/site.vue
index 6f12e4d1db..f258f1786f 100644
--- a/website/client/src/components/settings/site.vue
+++ b/website/client/src/components/settings/site.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="row standard-page">
-    <restore-modal /><reset-modal /><delete-modal /><h1 class="col-12">
+    <restore-modal />
+    <reset-modal />
+    <delete-modal />
+    <h1 class="col-12">
       {{ $t('settings') }}
-    </h1><div class="col-sm-6">
+    </h1>
+    <div class="col-sm-6">
       <div class="form-horizontal">
-        <h5>{{ $t('language') }}</h5><select
+        <h5>{{ $t('language') }}</h5>
+        <select
           class="form-control"
           :value="user.preferences.language"
           @change="changeLanguage($event)"
@@ -15,9 +20,17 @@
           >
             {{ lang.name }}
           </option>
-        </select><small>{{ $t('americanEnglishGovern') }}<br><strong v-html="$t('helpWithTranslation')"></strong></small>
-      </div><hr><div class="form-horizontal">
-        <h5>{{ $t('dateFormat') }}</h5><select
+        </select>
+        <small>
+          {{ $t('americanEnglishGovern') }}
+          <br>
+          <strong v-html="$t('helpWithTranslation')"></strong>
+        </small>
+      </div>
+      <hr>
+      <div class="form-horizontal">
+        <h5>{{ $t('dateFormat') }}</h5>
+        <select
           v-model="user.preferences.dateFormat"
           class="form-control"
           @change="set('dateFormat')"
@@ -29,9 +42,12 @@
             {{ dateFormat }}
           </option>
         </select>
-      </div><hr><div class="form-horizontal">
+      </div>
+      <hr>
+      <div class="form-horizontal">
         <div class="form-group">
-          <h5>{{ $t('audioTheme') }}</h5><select
+          <h5>{{ $t('audioTheme') }}</h5>
+          <select
             v-model="user.preferences.sound"
             class="form-control"
             @change="changeAudioTheme"
@@ -43,88 +59,122 @@
               {{ $t(`audioTheme_${sound}`) }}
             </option>
           </select>
-        </div><button
+        </div>
+        <button
           v-once
           class="btn btn-primary btn-xs"
           @click="playAudio"
         >
           {{ $t('demo') }}
         </button>
-      </div><hr><div
+      </div>
+      <hr>
+      <div
         v-if="hasClass"
         class="form-horizontal"
       >
-        <h5>{{ $t('characterBuild') }}</h5><h6 v-once>
-          {{ $t('class') + ': ' }}<!-- @TODO: what is classText--><!-- span(v-if='classText') {{ classText }}&nbsp;--><button
+        <h5>{{ $t('characterBuild') }}</h5>
+        <h6 v-once>
+          {{ $t('class') + ': ' }}
+          <!-- @TODO: what is classText-->
+          <!-- span(v-if='classText') {{ classText }}&nbsp;-->
+          <button
             v-once
             class="btn btn-danger btn-xs"
             @click="changeClassForUser(true)"
           >
             {{ $t('changeClass') }}
-          </button><small class="cost">&nbsp; 3 {{ $t('gems') }}<!-- @TODO add icon span.Pet_Currency_Gem1x.inline-gems--></small>
-        </h6><hr>
-      </div><div>
+          </button>
+          <small class="cost">
+            &nbsp; 3 {{ $t('gems') }}
+            <!-- @TODO add icon span.Pet_Currency_Gem1x.inline-gems-->
+          </small>
+        </h6>
+        <hr>
+      </div>
+      <div>
         <div class="checkbox">
-          <label><input
-            v-model="user.preferences.advancedCollapsed"
-            type="checkbox"
-            @change="set('advancedCollapsed')"
-          ><span
-            class="hint"
-            popover-trigger="mouseenter"
-            popover-placement="right"
-            :popover="$t('startAdvCollapsedPop')"
-          >{{ $t('startAdvCollapsed') }}</span></label>
-        </div><div class="checkbox">
-          <label><input
-            v-model="user.preferences.dailyDueDefaultView"
-            type="checkbox"
-            @change="set('dailyDueDefaultView')"
-          ><span
-            class="hint"
-            popover-trigger="mouseenter"
-            popover-placement="right"
-            :popover="$t('dailyDueDefaultViewPop')"
-          >{{ $t('dailyDueDefaultView') }}</span></label>
-        </div><div
+          <label>
+            <input
+              v-model="user.preferences.advancedCollapsed"
+              type="checkbox"
+              @change="set('advancedCollapsed')"
+            >
+            <span
+              class="hint"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+              :popover="$t('startAdvCollapsedPop')"
+            >{{ $t('startAdvCollapsed') }}</span>
+          </label>
+        </div>
+        <div class="checkbox">
+          <label>
+            <input
+              v-model="user.preferences.dailyDueDefaultView"
+              type="checkbox"
+              @change="set('dailyDueDefaultView')"
+            >
+            <span
+              class="hint"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+              :popover="$t('dailyDueDefaultViewPop')"
+            >{{ $t('dailyDueDefaultView') }}</span>
+          </label>
+        </div>
+        <div
           v-if="party.memberCount === 1"
           class="checkbox"
         >
-          <label><input
-            v-model="user.preferences.displayInviteToPartyWhenPartyIs1"
-            type="checkbox"
-            @change="set('displayInviteToPartyWhenPartyIs1')"
-          ><span
-            class="hint"
-            popover-trigger="mouseenter"
-            popover-placement="right"
-            :popover="$t('displayInviteToPartyWhenPartyIs1')"
-          >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span></label>
-        </div><div class="checkbox">
+          <label>
+            <input
+              v-model="user.preferences.displayInviteToPartyWhenPartyIs1"
+              type="checkbox"
+              @change="set('displayInviteToPartyWhenPartyIs1')"
+            >
+            <span
+              class="hint"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+              :popover="$t('displayInviteToPartyWhenPartyIs1')"
+            >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
+          </label>
+        </div>
+        <div class="checkbox">
           <input
             v-model="user.preferences.suppressModals.levelUp"
             type="checkbox"
             @change="set('suppressModals', 'levelUp')"
-          ><label>{{ $t('suppressLevelUpModal') }}</label>
-        </div><div class="checkbox">
+          >
+          <label>{{ $t('suppressLevelUpModal') }}</label>
+        </div>
+        <div class="checkbox">
           <input
             v-model="user.preferences.suppressModals.hatchPet"
             type="checkbox"
             @change="set('suppressModals', 'hatchPet')"
-          ><label>{{ $t('suppressHatchPetModal') }}</label>
-        </div><div class="checkbox">
+          >
+          <label>{{ $t('suppressHatchPetModal') }}</label>
+        </div>
+        <div class="checkbox">
           <input
             v-model="user.preferences.suppressModals.raisePet"
             type="checkbox"
             @change="set('suppressModals', 'raisePet')"
-          ><label>{{ $t('suppressRaisePetModal') }}</label>
-        </div><div class="checkbox">
+          >
+          <label>{{ $t('suppressRaisePetModal') }}</label>
+        </div>
+        <div class="checkbox">
           <input
             v-model="user.preferences.suppressModals.streak"
             type="checkbox"
             @change="set('suppressModals', 'streak')"
-          ><label>{{ $t('suppressStreakModal') }}</label>
-        </div><hr><button
+          >
+          <label>{{ $t('suppressStreakModal') }}</label>
+        </div>
+        <hr>
+        <button
           class="btn btn-primary mr-2 mb-2"
           popover-trigger="mouseenter"
           popover-placement="right"
@@ -132,7 +182,8 @@
           @click="showBailey()"
         >
           {{ $t('showBailey') }}
-        </button><button
+        </button>
+        <button
           class="btn btn-primary mr-2 mb-2"
           popover-trigger="mouseenter"
           popover-placement="right"
@@ -140,7 +191,8 @@
           @click="openRestoreModal()"
         >
           {{ $t('fixVal') }}
-        </button><button
+        </button>
+        <button
           v-if="user.preferences.disableClasses == true"
           class="btn btn-primary mb-2"
           popover-trigger="mouseenter"
@@ -149,10 +201,14 @@
           @click="changeClassForUser(false)"
         >
           {{ $t('enableClass') }}
-        </button><hr><div>
-          <h5>{{ $t('customDayStart') }}</h5><div class="alert alert-warning">
+        </button>
+        <hr>
+        <div>
+          <h5>{{ $t('customDayStart') }}</h5>
+          <div class="alert alert-warning">
             {{ $t('customDayStartInfo1') }}
-          </div><div class="form-horizontal">
+          </div>
+          <div class="form-horizontal">
             <div class="form-group">
               <div class="col-7">
                 <select
@@ -166,7 +222,8 @@
                     {{ option.name }}
                   </option>
                 </select>
-              </div><div class="col-5">
+              </div>
+              <div class="col-5">
                 <button
                   class="btn btn-block btn-primary mt-1"
                   :disabled="newDayStart === user.preferences.dayStart"
@@ -176,17 +233,23 @@
                 </button>
               </div>
             </div>
-          </div><hr>
-        </div><h5>{{ $t('timezone') }}</h5><div class="form-horizontal">
+          </div>
+          <hr>
+        </div>
+        <h5>{{ $t('timezone') }}</h5>
+        <div class="form-horizontal">
           <div class="form-group">
             <div class="col-12">
-              <p v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})"></p><p v-html="$t('timezoneInfo')"></p>
+              <p v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})"></p>
+              <p v-html="$t('timezoneInfo')"></p>
             </div>
           </div>
         </div>
       </div>
-    </div><div class="col-sm-6">
-      <h2>{{ $t('registration') }}</h2><div class="panel-body">
+    </div>
+    <div class="col-sm-6">
+      <h2>{{ $t('registration') }}</h2>
+      <div class="panel-body">
         <div>
           <ul class="list-inline">
             <li v-for="network in SOCIAL_AUTH_NETWORKS">
@@ -196,13 +259,15 @@
                 @click="socialAuth(network.key, user)"
               >
                 {{ $t('registerWithSocial', {network: network.name}) }}
-              </button><button
+              </button>
+              <button
                 v-if="!hasBackupAuthOption(network.key) && user.auth[network.key].id"
                 class="btn btn-primary mb-2"
                 disabled="disabled"
               >
                 {{ $t('registeredWithSocial', {network: network.name}) }}
-              </button><button
+              </button>
+              <button
                 v-if="hasBackupAuthOption(network.key) && user.auth[network.key].id"
                 class="btn btn-danger"
                 @click="deleteSocialAuth(network)"
@@ -210,8 +275,11 @@
                 {{ $t('detachSocial', {network: network.name}) }}
               </button>
             </li>
-          </ul><hr><div v-if="!user.auth.local.email">
-            <p>{{ $t('addLocalAuth') }}</p><div
+          </ul>
+          <hr>
+          <div v-if="!user.auth.local.email">
+            <p>{{ $t('addLocalAuth') }}</p>
+            <div
               class="form"
               name="localAuth"
               novalidate="novalidate"
@@ -224,7 +292,8 @@
                   :placeholder="$t('email')"
                   required="required"
                 >
-              </div><div class="form-group">
+              </div>
+              <div class="form-group">
                 <input
                   v-model="localAuth.password"
                   class="form-control"
@@ -232,7 +301,8 @@
                   :placeholder="$t('password')"
                   required="required"
                 >
-              </div><div class="form-group">
+              </div>
+              <div class="form-group">
                 <input
                   v-model="localAuth.confirmPassword"
                   class="form-control"
@@ -240,7 +310,8 @@
                   :placeholder="$t('confirmPass')"
                   required="required"
                 >
-              </div><button
+              </div>
+              <button
                 class="btn btn-primary"
                 type="submit"
                 @click="addLocalAuth()"
@@ -249,8 +320,10 @@
               </button>
             </div>
           </div>
-        </div><div class="usersettings">
-          <h5>{{ $t('changeDisplayName') }}</h5><div
+        </div>
+        <div class="usersettings">
+          <h5>{{ $t('changeDisplayName') }}</h5>
+          <div
             class="form"
             name="changeDisplayName"
             novalidate="novalidate"
@@ -263,7 +336,8 @@
                 type="text"
                 :placeholder="$t('newDisplayName')"
                 :class="{'is-invalid input-invalid': displayNameInvalid}"
-              ><div
+              >
+              <div
                 v-if="displayNameIssues.length > 0"
                 class="mb-3"
               >
@@ -274,7 +348,8 @@
                   {{ issue }}
                 </div>
               </div>
-            </div><button
+            </div>
+            <button
               class="btn btn-primary"
               type="submit"
               :disabled="displayNameCannotSubmit"
@@ -282,7 +357,9 @@
             >
               {{ $t('submit') }}
             </button>
-          </div><h5>{{ $t('changeUsername') }}</h5><div
+          </div>
+          <h5>{{ $t('changeUsername') }}</h5>
+          <div
             class="form"
             name="changeUsername"
             novalidate="novalidate"
@@ -292,14 +369,16 @@
               class="iconalert iconalert-success"
             >
               {{ $t('usernameVerifiedConfirmation', {'username': user.auth.local.username}) }}
-            </div><div
+            </div>
+            <div
               v-else
               class="iconalert iconalert-warning"
             >
               <div class="align-middle">
                 <span>{{ $t('usernameNotVerified') }}</span>
               </div>
-            </div><div class="form-group">
+            </div>
+            <div class="form-group">
               <input
                 id="changeUsername"
                 v-model="usernameUpdates.username"
@@ -308,13 +387,16 @@
                 :placeholder="$t('newUsername')"
                 :class="{'is-invalid input-invalid': usernameInvalid}"
                 @blur="restoreEmptyUsername()"
-              ><div
+              >
+              <div
                 v-for="issue in usernameIssues"
                 class="input-error"
               >
                 {{ issue }}
-              </div><small class="form-text text-muted">{{ $t('changeUsernameDisclaimer') }}</small>
-            </div><button
+              </div>
+              <small class="form-text text-muted">{{ $t('changeUsernameDisclaimer') }}</small>
+            </div>
+            <button
               class="btn btn-primary"
               type="submit"
               :disabled="usernameCannotSubmit"
@@ -322,9 +404,11 @@
             >
               {{ $t('saveAndConfirm') }}
             </button>
-          </div><h5 v-if="user.auth.local.email">
+          </div>
+          <h5 v-if="user.auth.local.email">
             {{ $t('changeEmail') }}
-          </h5><div
+          </h5>
+          <div
             v-if="user.auth.local.email"
             class="form"
             name="changeEmail"
@@ -338,23 +422,27 @@
                 type="text"
                 :placeholder="$t('newEmail')"
               >
-            </div><div class="form-group">
+            </div>
+            <div class="form-group">
               <input
                 v-model="emailUpdates.password"
                 class="form-control"
                 type="password"
                 :placeholder="$t('password')"
               >
-            </div><button
+            </div>
+            <button
               class="btn btn-primary"
               type="submit"
               @click="changeUser('email', emailUpdates)"
             >
               {{ $t('submit') }}
             </button>
-          </div><h5 v-if="user.auth.local.email">
+          </div>
+          <h5 v-if="user.auth.local.email">
             {{ $t('changePass') }}
-          </h5><div
+          </h5>
+          <div
             v-if="user.auth.local.email"
             class="form"
             name="changePassword"
@@ -368,30 +456,36 @@
                 type="password"
                 :placeholder="$t('oldPass')"
               >
-            </div><div class="form-group">
+            </div>
+            <div class="form-group">
               <input
                 v-model="passwordUpdates.newPassword"
                 class="form-control"
                 type="password"
                 :placeholder="$t('newPass')"
               >
-            </div><div class="form-group">
+            </div>
+            <div class="form-group">
               <input
                 v-model="passwordUpdates.confirmPassword"
                 class="form-control"
                 type="password"
                 :placeholder="$t('confirmPass')"
               >
-            </div><button
+            </div>
+            <button
               class="btn btn-primary"
               type="submit"
               @click="changeUser('password', passwordUpdates)"
             >
               {{ $t('submit') }}
             </button>
-          </div><hr>
-        </div><div>
-          <h5>{{ $t('dangerZone') }}</h5><div>
+          </div>
+          <hr>
+        </div>
+        <div>
+          <h5>{{ $t('dangerZone') }}</h5>
+          <div>
             <button
               v-b-popover.hover.auto="$t('resetAccPop')"
               class="btn btn-danger mr-2 mb-2"
@@ -400,7 +494,8 @@
               @click="openResetModal()"
             >
               {{ $t('resetAccount') }}
-            </button><button
+            </button>
+            <button
               v-b-popover.hover.auto="$t('deleteAccPop')"
               class="btn btn-danger mb-2"
               popover-trigger="mouseenter"
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index d1d53d1e7b..e7c5a0b626 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -1,53 +1,63 @@
 <template>
   <div class="standard-page">
-    <h1>{{ $t('subscription') }}</h1><div class="row">
+    <h1>{{ $t('subscription') }}</h1>
+    <div class="row">
       <div class="col-6">
-        <h2>{{ $t('benefits') }}</h2><ul>
+        <h2>{{ $t('benefits') }}</h2>
+        <ul>
           <li>
             <span
               class="hint"
               :popover="$t('buyGemsGoldText', {gemCostTranslation})"
               popover-trigger="mouseenter"
               popover-placement="right"
-            >{{ $t('buyGemsGold') }}</span><span
+            >{{ $t('buyGemsGold') }}</span>
+            <span
               v-if="subscription.key !== 'basic_earned'"
               class="badge badge-success"
             >{{ $t('buyGemsGoldCap', buyGemsGoldCap) }}</span>
-          </li><li>
+          </li>
+          <li>
             <span
               class="hint"
               :popover="$t('retainHistoryText')"
               popover-trigger="mouseenter"
               popover-placement="right"
             >{{ $t('retainHistory') }}</span>
-          </li><li>
+          </li>
+          <li>
             <span
               class="hint"
               :popover="$t('doubleDropsText')"
               popover-trigger="mouseenter"
               popover-placement="right"
             >{{ $t('doubleDrops') }}</span>
-          </li><li>
+          </li>
+          <li>
             <span
               class="hint"
               :popover="$t('mysteryItemText')"
               popover-trigger="mouseenter"
               popover-placement="right"
-            >{{ $t('mysteryItem') }}</span><div v-if="subscription.key !== 'basic_earned'">
+            >{{ $t('mysteryItem') }}</span>
+            <div v-if="subscription.key !== 'basic_earned'">
               <div class="badge badge-success">
                 {{ $t('mysticHourglass', mysticHourglass) }}
-              </div><div class="small muted">
+              </div>
+              <div class="small muted">
                 {{ $t('mysticHourglassText') }}
               </div>
             </div>
-          </li><li>
+          </li>
+          <li>
             <span
               class="hint"
               :popover="$t('exclusiveJackalopePetText')"
               popover-trigger="mouseenter"
               popover-placement="right"
             >{{ $t('exclusiveJackalopePet') }}</span>
-          </li><li>
+          </li>
+          <li>
             <span
               class="hint"
               :popover="$t('supportDevsText')"
@@ -56,49 +66,78 @@
             >{{ $t('supportDevs') }}</span>
           </li>
         </ul>
-      </div><div class="col-6">
-        <h2>Plan</h2><table
+      </div>
+      <div class="col-6">
+        <h2>Plan</h2>
+        <table
           v-if="hasSubscription"
           class="table alert alert-info"
         >
           <tr v-if="hasCanceledSubscription">
             <td class="alert alert-warning">
-              <span class="noninteractive-button btn-danger">{{ $t('canceledSubscription') }}</span><i class="glyphicon glyphicon-time"></i> {{ $t('subCanceled') }} &nbsp;<strong>{{ dateTerminated }}</strong>
+              <span class="noninteractive-button btn-danger">{{ $t('canceledSubscription') }}</span>
+              <i class="glyphicon glyphicon-time"></i>
+              {{ $t('subCanceled') }} &nbsp;
+              <strong>{{ dateTerminated }}</strong>
             </td>
-          </tr><tr v-if="!hasCanceledSubscription">
+          </tr>
+          <tr v-if="!hasCanceledSubscription">
             <td>
-              <h4>{{ $t('subscribed') }}</h4><p v-if="hasPlan && !hasGroupPlan">
+              <h4>{{ $t('subscribed') }}</h4>
+              <p v-if="hasPlan && !hasGroupPlan">
                 {{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
-              </p><p v-if="hasGroupPlan">
+              </p>
+              <p v-if="hasGroupPlan">
                 {{ $t('youHaveGroupPlan') }}
               </p>
             </td>
-          </tr><tr v-if="user.purchased.plan.extraMonths">
-            <td><span class="glyphicon glyphicon-credit-card"></span>&nbsp; {{ $t('purchasedPlanExtraMonths', purchasedPlanExtraMonthsDetails) }}</td>
-          </tr><tr v-if="hasConsecutiveSubscription">
+          </tr>
+          <tr v-if="user.purchased.plan.extraMonths">
             <td>
-              <span class="glyphicon glyphicon-forward"></span>&nbsp; {{ $t('consecutiveSubscription') }}<ul class="list-unstyled">
-                <li>{{ $t('consecutiveMonths') }} {{ user.purchased.plan.consecutive.count + user.purchased.plan.consecutive.offset }}</li><li>{{ $t('gemCapExtra') }} {{ user.purchased.plan.consecutive.gemCapExtra }}</li><li>{{ $t('mysticHourglasses') }} {{ user.purchased.plan.consecutive.trinkets }}</li>
+              <span class="glyphicon glyphicon-credit-card"></span>
+              &nbsp; {{ $t('purchasedPlanExtraMonths', purchasedPlanExtraMonthsDetails) }}
+            </td>
+          </tr>
+          <tr v-if="hasConsecutiveSubscription">
+            <td>
+              <span class="glyphicon glyphicon-forward"></span>
+              &nbsp; {{ $t('consecutiveSubscription') }}
+              <ul class="list-unstyled">
+                <li>{{ $t('consecutiveMonths') }} {{ user.purchased.plan.consecutive.count + user.purchased.plan.consecutive.offset }}</li>
+                <li>{{ $t('gemCapExtra') }} {{ user.purchased.plan.consecutive.gemCapExtra }}</li>
+                <li>{{ $t('mysticHourglasses') }} {{ user.purchased.plan.consecutive.trinkets }}</li>
               </ul>
             </td>
           </tr>
-        </table><div v-if="!hasSubscription || hasCanceledSubscription">
+        </table>
+        <div v-if="!hasSubscription || hasCanceledSubscription">
           <h4 v-if="hasCanceledSubscription">
             {{ $t("resubscribe") }}
-          </h4><div class="form-group reduce-top-margin">
+          </h4>
+          <div class="form-group reduce-top-margin">
             <div
               v-for="block in subscriptionBlocksOrdered"
               v-if="block.target !== 'group' && block.canSubscribe === true"
               class="radio"
             >
-              <label><input
-                v-model="subscription.key"
-                type="radio"
-                name="subRadio"
-                :value="block.key"
-              ><span v-if="block.original"><span class="label label-success line-through">${{ block.original }}</span>{{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}</span><span v-if="!block.original">{{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}</span></label>
+              <label>
+                <input
+                  v-model="subscription.key"
+                  type="radio"
+                  name="subRadio"
+                  :value="block.key"
+                >
+                <span v-if="block.original">
+                  <span class="label label-success line-through">${{ block.original }}</span>
+                  {{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
+                </span>
+                <span
+                  v-if="!block.original"
+                >{{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}</span>
+              </label>
             </div>
-          </div><div class="form-inline">
+          </div>
+          <div class="form-inline">
             <div class="form-group">
               <input
                 v-model="subscription.coupon"
@@ -106,7 +145,8 @@
                 type="text"
                 :placeholder="$t('couponPlaceholder')"
               >
-            </div><div class="form-group">
+            </div>
+            <div class="form-group">
               <button
                 class="btn btn-primary"
                 type="button"
@@ -116,28 +156,33 @@
               </button>
             </div>
           </div>
-        </div><div v-if="hasSubscription">
+        </div>
+        <div v-if="hasSubscription">
           <div
             v-if="canEditCardDetails"
             class="btn btn-primary"
             @click="showStripeEdit()"
           >
             {{ $t('subUpdateCard') }}
-          </div><div
+          </div>
+          <div
             v-if="canCancelSubscription && !loading"
             class="btn btn-sm btn-danger"
             @click="cancelSubscriptionConfirm()"
           >
             {{ $t('cancelSub') }}
-          </div><small
+          </div>
+          <small
             v-if="!canCancelSubscription && !hasCanceledSubscription"
             v-html="getCancelSubInfo()"
           ></small>
-        </div><div
+        </div>
+        <div
           v-if="!hasSubscription || hasCanceledSubscription"
           class="subscribe-pay"
         >
-          <h3>{{ $t('subscribeUsing') }}</h3><div class="payments-column">
+          <h3>{{ $t('subscribeUsing') }}</h3>
+          <div class="payments-column">
             <button
               class="purchase btn btn-primary payment-button payment-item"
               :disabled="!subscription.key"
@@ -146,36 +191,45 @@
               <div
                 class="svg-icon credit-card-icon"
                 v-html="icons.creditCardIcon"
-              ></div>{{ $t('card') }}
-            </button><button
+              ></div>
+              {{ $t('card') }}
+            </button>
+            <button
               class="btn payment-item paypal-checkout payment-button"
               :disabled="!subscription.key"
               @click="openPaypal(paypalPurchaseLink, 'subscription')"
             >
-              &nbsp;<img
+              &nbsp;
+              <img
                 src="~@/assets/images/paypal-checkout.png"
                 :alt="$t('paypal')"
               >&nbsp;
-            </button><amazon-button
+            </button>
+            <amazon-button
               class="payment-item"
               :amazon-data="{type: 'subscription', subscription: this.subscription.key, coupon: this.subscription.coupon}"
             />
           </div>
         </div>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-6">
         <h2 v-once>
           {{ $t('giftSubscription') }}
-        </h2><ol>
+        </h2>
+        <ol>
           <li v-once>
             {{ $t('giftSubscriptionText1') }}
-          </li><li v-once>
+          </li>
+          <li v-once>
             {{ $t('giftSubscriptionText2') }}
-          </li><li v-once>
+          </li>
+          <li v-once>
             {{ $t('giftSubscriptionText3') }}
           </li>
-        </ol><h4 v-once>
+        </ol>
+        <h4 v-once>
           {{ $t('giftSubscriptionText4') }}
         </h4>
       </div>
diff --git a/website/client/src/components/settings/usernameForm.vue b/website/client/src/components/settings/usernameForm.vue
index 2e58f3b347..6feeeff868 100644
--- a/website/client/src/components/settings/usernameForm.vue
+++ b/website/client/src/components/settings/usernameForm.vue
@@ -5,7 +5,8 @@
         <label
           class="mr-3"
           for="displayName"
-        >{{ $t('displayName') }}</label><div class="flex-grow-1">
+        >{{ $t('displayName') }}</label>
+        <div class="flex-grow-1">
           <input
             id="displayName"
             v-model="temporaryDisplayName"
@@ -17,7 +18,8 @@
           >
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="displayNameIssues.length > 0"
       class="mb-3"
     >
@@ -27,14 +29,17 @@
       >
         {{ issue }}
       </div>
-    </div><div class="form-group">
+    </div>
+    <div class="form-group">
       <div class="d-flex align-items-center">
         <label
           class="mr-3"
           for="username"
-        >{{ $t('username') }}</label><div class="flex-grow-1">
+        >{{ $t('username') }}</label>
+        <div class="flex-grow-1">
           <div class="input-group-prepend input-group-text">
-            @<input
+            @
+            <input
               id="username"
               v-model="temporaryUsername"
               class="form-control"
@@ -46,7 +51,8 @@
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="usernameIssues.length > 0"
       class="mb-3"
     >
@@ -56,12 +62,14 @@
       >
         {{ issue }}
       </div>
-    </div><div
+    </div>
+    <div
       v-if="!avatarIntro"
       class="small text-center mb-3"
     >
       {{ $t('usernameLimitations') }}
-    </div><div class="row justify-content-center">
+    </div>
+    <div class="row justify-content-center">
       <button
         class="btn btn-primary"
         type="submit"
diff --git a/website/client/src/components/settings/verifyUsername.vue b/website/client/src/components/settings/verifyUsername.vue
index 62d69ec92c..976f44c2ca 100644
--- a/website/client/src/components/settings/verifyUsername.vue
+++ b/website/client/src/components/settings/verifyUsername.vue
@@ -12,14 +12,20 @@
     <div
       class="nametag-header"
       v-html="icons.helloNametag"
-    ></div><h2 class="text-center">
+    ></div>
+    <h2 class="text-center">
       {{ $t('usernameTime') }}
-    </h2><p
+    </h2>
+    <p
       class="text-center"
       v-html="$t('usernameInfo')"
-    ></p><username-form /><div class="scene_veteran_pets center-block"></div><div class="small text-center mb-3">
+    ></p>
+    <username-form />
+    <div class="scene_veteran_pets center-block"></div>
+    <div class="small text-center mb-3">
       {{ $t('verifyUsernameVeteranPet') }}
-    </div><div
+    </div>
+    <div
       class="small text-center tos-footer"
       v-html="$t('usernameTOSRequirements')"
     ></div>
diff --git a/website/client/src/components/shared/inventoryDrawer.vue b/website/client/src/components/shared/inventoryDrawer.vue
index 4d16bf1973..eabf0e49c6 100644
--- a/website/client/src/components/shared/inventoryDrawer.vue
+++ b/website/client/src/components/shared/inventoryDrawer.vue
@@ -15,11 +15,13 @@
             id="petLikeToEatMarket"
             class="drawer-help-text"
           >
-            {{ $t('petLikeToEat') + ' ' }}<span
+            {{ $t('petLikeToEat') + ' ' }}
+            <span
               class="svg-icon inline icon-16"
               v-html="icons.information"
             ></span>
-          </div><b-popover
+          </div>
+          <b-popover
             target="petLikeToEatMarket"
             :placement="'top'"
           >
@@ -31,7 +33,8 @@
           </b-popover>
         </div>
       </drawer-header-tabs>
-    </div><drawer-slider
+    </div>
+    <drawer-slider
       v-if="hasOwnedItemsForType(selectedDrawerItemType)"
       slot="drawer-slider"
       :items="ownedItems(selectedDrawerItemType) || []"
diff --git a/website/client/src/components/shops/_currencyMixin.js b/website/client/src/components/shops/_currencyMixin.js
index c5e9a3f3a4..b582eb09c1 100644
--- a/website/client/src/components/shops/_currencyMixin.js
+++ b/website/client/src/components/shops/_currencyMixin.js
@@ -1,4 +1,4 @@
-import { mapState, mapGetters } from '@/libs/store';
+import { mapGetters, mapState } from '@/libs/store';
 
 export default {
   computed: {
diff --git a/website/client/src/components/shops/balanceInfo.vue b/website/client/src/components/shops/balanceInfo.vue
index 1234227bbc..1656e8a967 100644
--- a/website/client/src/components/shops/balanceInfo.vue
+++ b/website/client/src/components/shops/balanceInfo.vue
@@ -3,10 +3,13 @@
     <span
       v-for="currency of currencies"
       :key="currency.key"
-    ><div
-      class="svg-icon"
-      v-html="currency.icon"
-    ></div><span :class="{'notEnough': currency.notEnough}">{{ currency.value | roundBigNumber }}</span></span>
+    >
+      <div
+        class="svg-icon"
+        v-html="currency.icon"
+      ></div>
+      <span :class="{'notEnough': currency.notEnough}">{{ currency.value | roundBigNumber }}</span>
+    </span>
   </div>
 </template>
 
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 12ca3636bb..31a89af145 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -9,17 +9,21 @@
       class="badge badge-pill badge-dialog"
       :class="{'item-selected-badge': isPinned}"
       @click.prevent.stop="togglePinned()"
-    ><span
-      class="svg-icon inline color icon-10"
-      v-html="icons.pin"
-    ></span></span><div class="close">
+    >
+      <span
+        class="svg-icon inline color icon-10"
+        v-html="icons.pin"
+      ></span>
+    </span>
+    <div class="close">
       <span
         class="svg-icon inline icon-10"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
       ></span>
-    </div><div
+    </div>
+    <div
       v-if="item != null"
       class="content"
     >
@@ -38,19 +42,23 @@
               :override-avatar-gear="getAvatarOverrides(item)"
               :sprites-margin="'0px auto 0px -24px'"
             />
-          </div><item
+          </div>
+          <item
             v-else-if="item.key != 'gem'"
             class="flat bordered-item"
             :item="item"
             :item-content-class="item.class"
             :show-popover="false"
           />
-        </slot><h4 class="title">
+        </slot>
+        <h4 class="title">
           {{ itemText }}
-        </h4><div
+        </h4>
+        <div
           class="text"
           v-html="itemNotes"
-        ></div><slot
+        ></div>
+        <slot
           name="additionalInfo"
           :item="item"
         >
@@ -60,7 +68,8 @@
             :item="item"
             :user="user"
           />
-        </slot><div
+        </slot>
+        <div
           v-if="item.value > 0"
           class="purchase-amount"
         >
@@ -69,7 +78,8 @@
             class="how-many-to-buy"
           >
             <strong>{{ $t('howManyToBuy') }}</strong>
-          </div><div v-if="showAmountToBuy(item)">
+          </div>
+          <div v-if="showAmountToBuy(item)">
             <div class="box">
               <input
                 v-model.number="selectedAmountToBuy"
@@ -77,38 +87,49 @@
                 min="0"
                 step="1"
               >
-            </div><span :class="{'notEnough': notEnoughCurrency}"><span
-              class="svg-icon inline icon-32"
-              aria-hidden="true"
-              v-html="icons[getPriceClass()]"
-            ></span><span
-              class="cost"
-              :class="getPriceClass()"
-            >{{ item.value }}</span></span>
-          </div><div v-else>
+            </div>
+            <span :class="{'notEnough': notEnoughCurrency}">
+              <span
+                class="svg-icon inline icon-32"
+                aria-hidden="true"
+                v-html="icons[getPriceClass()]"
+              ></span>
+              <span
+                class="cost"
+                :class="getPriceClass()"
+              >{{ item.value }}</span>
+            </span>
+          </div>
+          <div v-else>
             <span
               class="svg-icon inline icon-32"
               aria-hidden="true"
               v-html="icons[getPriceClass()]"
-            ></span><span
+            ></span>
+            <span
               class="cost"
               :class="getPriceClass()"
             >{{ item.value }}</span>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="item.key === 'gem'"
           class="gems-left"
         >
-          <strong v-if="gemsLeft > 0">{{ gemsLeft }} {{ $t('gemsRemaining') }}</strong><strong v-if="gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
-        </div><div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
+          <strong v-if="gemsLeft > 0">{{ gemsLeft }} {{ $t('gemsRemaining') }}</strong>
+          <strong v-if="gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
+        </div>
+        <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
           {{ $t('notEnoughGemsToBuy') }}
-        </div><button
+        </div>
+        <button
           v-if="getPriceClass() === 'gems' && !this.enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
           class="btn btn-primary"
           @click="purchaseGems()"
         >
           {{ $t('purchaseGems') }}
-        </button><button
+        </button>
+        <button
           v-else
           class="btn btn-primary"
           :disabled="item.key === 'gem' && gemsLeft === 0 || attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid"
@@ -118,15 +139,18 @@
           {{ $t('buyNow') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="item.event && item.owned == null"
       class="limitedTime"
     >
       <span
         class="svg-icon inline icon-16 clock-icon"
         v-html="icons.clock"
-      ></span><span class="limitedString">{{ limitedString }}</span>
-    </div><div
+      ></span>
+      <span class="limitedString">{{ limitedString }}</span>
+    </div>
+    <div
       v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
       class="free-rebirth d-flex align-items-center"
     >
@@ -134,13 +158,16 @@
         <span
           class="svg-icon inline icon-16 mr-2 pt-015"
           v-html="icons.whiteClock"
-        ></span><span v-html="$t('nextFreeRebirth', {days: nextFreeRebirth})"></span>
+        ></span>
+        <span v-html="$t('nextFreeRebirth', {days: nextFreeRebirth})"></span>
       </div>
-    </div><div
+    </div>
+    <div
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span><balanceInfo
+      <span class="balance float-left">{{ $t('yourBalance') }}</span>
+      <balanceInfo
         class="float-right"
         :with-hourglass="getPriceClass() === 'hourglasses'"
         :currency-needed="getPriceClass()"
diff --git a/website/client/src/components/shops/featuredItemsHeader.vue b/website/client/src/components/shops/featuredItemsHeader.vue
index f94a9cffb0..9c9b29667e 100644
--- a/website/client/src/components/shops/featuredItemsHeader.vue
+++ b/website/client/src/components/shops/featuredItemsHeader.vue
@@ -3,18 +3,25 @@
     <div
       class="background"
       :class="{broken: broken}"
-    ></div><div
+    ></div>
+    <div
       class="background"
       :class="{cracked: broken, broken: broken}"
     >
       <div class="npc">
         <div class="featured-label">
-          <span class="rectangle"></span><span class="text">{{ npcName }}</span><span class="rectangle"></span>
+          <span class="rectangle"></span>
+          <span class="text">{{ npcName }}</span>
+          <span class="rectangle"></span>
         </div>
-      </div><div class="content">
+      </div>
+      <div class="content">
         <div class="featured-label with-border">
-          <span class="rectangle"></span><span class="text">{{ featuredText }}</span><span class="rectangle"></span>
-        </div><div class="items margin-center">
+          <span class="rectangle"></span>
+          <span class="text">{{ featuredText }}</span>
+          <span class="rectangle"></span>
+        </div>
+        <div class="items margin-center">
           <shopItem
             v-for="item in featuredItems"
             :key="item.key"
@@ -33,10 +40,12 @@
                 class="badge badge-pill badge-item badge-svg"
                 :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                 @click.prevent.stop="togglePinned(ctx.item)"
-              ><span
-                class="svg-icon inline icon-12 color"
-                v-html="icons.pin"
-              ></span></span>
+              >
+                <span
+                  class="svg-icon inline icon-12 color"
+                  v-html="icons.pin"
+                ></span>
+              </span>
             </template>
           </shopItem>
         </div>
diff --git a/website/client/src/components/shops/index.vue b/website/client/src/components/shops/index.vue
index 2813bae9e4..d12a19c46e 100644
--- a/website/client/src/components/shops/index.vue
+++ b/website/client/src/components/shops/index.vue
@@ -7,23 +7,27 @@
         exact="exact"
       >
         {{ $t('market') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'quests'}"
       >
         {{ $t('quests') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'seasonal'}"
       >
         {{ $t('titleSeasonalShop') }}
-      </router-link><router-link
+      </router-link>
+      <router-link
         class="nav-link"
         :to="{name: 'time'}"
       >
         {{ $t('titleTimeTravelers') }}
       </router-link>
-    </secondary-menu><div class="col-12">
+    </secondary-menu>
+    <div class="col-12">
       <router-view />
     </div>
   </div>
diff --git a/website/client/src/components/shops/market/categoryItem.vue b/website/client/src/components/shops/market/categoryItem.vue
index 2dcf970eb9..1d7613b08e 100644
--- a/website/client/src/components/shops/market/categoryItem.vue
+++ b/website/client/src/components/shops/market/categoryItem.vue
@@ -4,19 +4,23 @@
       v-if="item.showCount !== false"
       :show="true"
       :count="count"
-    /><div
+    />
+    <div
       v-if="item.key === 'gem'"
       class="badge badge-pill badge-purple gems-left"
     >
       {{ gemsLeft }}
-    </div><span
+    </div>
+    <span
       class="badge badge-pill badge-item badge-svg"
       :class="{'item-selected-badge': item.pinned, 'hide': !item.pinned}"
       @click.prevent.stop="togglePinned(item)"
-    ><span
-      class="svg-icon inline icon-12 color"
-      v-html="icons.pin"
-    ></span></span>
+    >
+      <span
+        class="svg-icon inline icon-12 color"
+        v-html="icons.pin"
+      ></span>
+    </span>
   </div>
 </template>
 
diff --git a/website/client/src/components/shops/market/categoryRow.vue b/website/client/src/components/shops/market/categoryRow.vue
index e0ea4e1769..eb4a79b6c4 100644
--- a/website/client/src/components/shops/market/categoryRow.vue
+++ b/website/client/src/components/shops/market/categoryRow.vue
@@ -8,7 +8,11 @@
       :popover-position="'top'"
       @click="itemSelected(item)"
     >
-      <span slot="popoverContent"><strong v-if="item.key === 'gem' && gemsLeft === 0">{{ $t('maxBuyGems') }}</strong><h4 class="popover-content-title">{{ item.text }}</h4></span><template
+      <span slot="popoverContent">
+        <strong v-if="item.key === 'gem' && gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
+        <h4 class="popover-content-title">{{ item.text }}</h4>
+      </span>
+      <template
         slot="itemBadge"
         slot-scope="ctx"
       >
diff --git a/website/client/src/components/shops/market/equipmentSection.vue b/website/client/src/components/shops/market/equipmentSection.vue
index d4eb03c9c8..8d15a10fab 100644
--- a/website/client/src/components/shops/market/equipmentSection.vue
+++ b/website/client/src/components/shops/market/equipmentSection.vue
@@ -11,11 +11,15 @@
         <span
           slot="item"
           slot-scope="ctx"
-        ><span
-          class="svg-icon inline icon-16"
-          v-html="icons[ctx.item.id]"
-        ></span><span class="text">{{ getClassName(ctx.item.id) }}</span></span>
-      </filter-dropdown><filter-dropdown
+        >
+          <span
+            class="svg-icon inline icon-16"
+            v-html="icons[ctx.item.id]"
+          ></span>
+          <span class="text">{{ getClassName(ctx.item.id) }}</span>
+        </span>
+      </filter-dropdown>
+      <filter-dropdown
         :label="$t('sortBy')"
         :initial-item="selectedSortGearBy"
         :items="sortGearBy"
@@ -24,9 +28,12 @@
         <span
           slot="item"
           slot-scope="ctx"
-        ><span class="text">{{ $t(ctx.item.id) }}</span></span>
+        >
+          <span class="text">{{ $t(ctx.item.id) }}</span>
+        </span>
       </filter-dropdown>
-    </div><itemRows
+    </div>
+    <itemRows
       slot="content"
       class="equipment-rows"
       :items="sortedGearItems"
@@ -54,10 +61,12 @@
               class="badge badge-pill badge-item badge-svg"
               :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
               @click.prevent.stop="togglePinned(ctx.item)"
-            ><span
-              class="svg-icon inline icon-12 color"
-              v-html="icons.pin"
-            ></span></span>
+            >
+              <span
+                class="svg-icon inline icon-12 color"
+                v-html="icons.pin"
+              ></span>
+            </span>
           </template>
         </shopItem>
       </template>
diff --git a/website/client/src/components/shops/market/filter.vue b/website/client/src/components/shops/market/filter.vue
index bf99ae57cc..fe78b4b89e 100644
--- a/website/client/src/components/shops/market/filter.vue
+++ b/website/client/src/components/shops/market/filter.vue
@@ -2,7 +2,8 @@
   <div class="form">
     <h2 v-once>
       {{ $t('filter') }}
-    </h2><div class="form-group">
+    </h2>
+    <div class="form-group">
       <checkbox
         v-for="viewOptionKey in Object.keys(viewOptions)"
         :id="`category-${viewOptionKey}`"
@@ -10,24 +11,28 @@
         :checked.sync="viewOptions[viewOptionKey].selected"
         :text="viewOptions[viewOptionKey].text"
       />
-    </div><div class="form-group clearfix">
+    </div>
+    <div class="form-group clearfix">
       <h3
         v-once
         class="float-left"
       >
         {{ $t('hideLocked') }}
-      </h3><toggle-switch
+      </h3>
+      <toggle-switch
         v-model="lockedChecked"
         class="float-right"
         @change="$emit('update:hideLocked', $event)"
       />
-    </div><div class="form-group clearfix">
+    </div>
+    <div class="form-group clearfix">
       <h3
         v-once
         class="float-left"
       >
         {{ $t('hidePinned') }}
-      </h3><toggle-switch
+      </h3>
+      <toggle-switch
         v-model="pinnedChecked"
         class="float-right"
         @change="$emit('update:hidePinned', $event)"
diff --git a/website/client/src/components/shops/market/index.vue b/website/client/src/components/shops/market/index.vue
index 980d5252e7..c083000fbb 100644
--- a/website/client/src/components/shops/market/index.vue
+++ b/website/client/src/components/shops/market/index.vue
@@ -8,29 +8,34 @@
           type="text"
           :placeholder="$t('search')"
         >
-      </div><market-filter
+      </div>
+      <market-filter
         :hide-locked.sync="hideLocked"
         :hide-pinned.sync="hidePinned"
         :view-options="viewOptions"
       />
-    </div><div slot="page">
+    </div>
+    <div slot="page">
       <featured-items-header
         :broken="broken"
         :npc-name="'Alex'"
         :featured-text="market.featured.text"
         :featured-items="market.featured.items"
         @featuredItemSelected="featuredItemSelected($event)"
-      /><h1
+      />
+      <h1
         v-once
         class="mb-4 page-header"
       >
         {{ $t('market') }}
-      </h1><equipment-section
+      </h1>
+      <equipment-section
         v-if="!anyFilterSelected || viewOptions['equipment'].selected"
         :hide-pinned="hidePinned"
         :hide-locked="hideLocked"
         :search-by="searchTextThrottled"
-      /><layout-section :title="$t('items')">
+      />
+      <layout-section :title="$t('items')">
         <div slot="filters">
           <filter-dropdown
             :label="$t('sortBy')"
@@ -41,21 +46,28 @@
             <span
               slot="item"
               slot-scope="ctx"
-            ><span class="text">{{ $t(ctx.item.id) }}</span></span>
+            >
+              <span class="text">{{ $t(ctx.item.id) }}</span>
+            </span>
           </filter-dropdown>
         </div>
-      </layout-section><div
+      </layout-section>
+      <div
         v-for="category in categories"
         v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
       >
-        <h4>{{ category.text }}</h4><category-row
+        <h4>{{ category.text }}</h4>
+        <category-row
           :hide-pinned="hidePinned"
           :hide-locked="hideLocked"
           :search-by="searchTextThrottled"
           :sort-by="selectedSortItemsBy.id"
           :category="category"
-        /><keys-to-kennel v-if="category.identifier === 'special'" /><div class="fill-height"></div>
-      </div><inventoryDrawer
+        />
+        <keys-to-kennel v-if="category.identifier === 'special'" />
+        <div class="fill-height"></div>
+      </div>
+      <inventoryDrawer
         :show-eggs="true"
         :show-potions="true"
       >
@@ -73,7 +85,8 @@
               slot="itemBadge"
               :show="true"
               :count="ctx.itemCount"
-            /><h4
+            />
+            <h4
               slot="popoverContent"
               class="popover-content-title"
             >
@@ -81,7 +94,8 @@
             </h4>
           </item>
         </template>
-      </inventoryDrawer><sellModal />
+      </inventoryDrawer>
+      <sellModal />
     </div>
   </page-layout>
 </template>
diff --git a/website/client/src/components/shops/market/keysToKennel.vue b/website/client/src/components/shops/market/keysToKennel.vue
index 4689daced1..71862238cd 100644
--- a/website/client/src/components/shops/market/keysToKennel.vue
+++ b/website/client/src/components/shops/market/keysToKennel.vue
@@ -7,14 +7,16 @@
       :empty-item="false"
       popover-position="'top'"
       @click="releasePets()"
-    /><shopItem
+    />
+    <shopItem
       v-if="userHasAllMounts"
       :key="keysToMounts.key"
       :item="keysToMounts"
       :empty-item="false"
       popover-position="'top'"
       @click="releaseMounts()"
-    /><shopItem
+    />
+    <shopItem
       v-if="userHasAllPets && userHasAllMounts"
       :key="keysToBoth.key"
       :item="keysToBoth"
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index 246c79bbd7..8093fae2d7 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -11,7 +11,8 @@
         @click="hideDialog()"
         v-html="icons.close"
       ></span>
-    </div><div
+    </div>
+    <div
       v-if="item"
       class="content"
     >
@@ -27,17 +28,25 @@
             :show="true"
             :count="itemContextToSell.itemCount"
           />
-        </item><h4 class="title">
+        </item>
+        <h4 class="title">
           {{ itemContextToSell.itemName }}
-        </h4><div v-if="item.key === 'Saddle'">
+        </h4>
+        <div v-if="item.key === 'Saddle'">
           <div class="text">
             {{ item.sellWarningNote() }}
-          </div><br>
-        </div><div v-else>
+          </div>
+          <br>
+        </div>
+        <div v-else>
           <div>
             <div class="text">
               {{ item.notes() }}
-            </div><div><b class="how-many-to-sell">{{ $t('howManyToSell') }}</b></div><div>
+            </div>
+            <div>
+              <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
+            </div>
+            <div>
               <b-input
                 v-model="selectedAmountToSell"
                 class="itemsToSell"
@@ -46,12 +55,15 @@
                 min="1"
                 step="1"
                 @keyup.native="preventNegative($event)"
-              /><span
+              />
+              <span
                 class="svg-icon inline icon-32"
                 aria-hidden="true"
                 v-html="icons.gold"
-              ></span><span class="value">{{ item.value }}</span>
-            </div><button
+              ></span>
+              <span class="value">{{ item.value }}</span>
+            </div>
+            <button
               class="btn btn-primary"
               @click="sellItems()"
             >
@@ -60,11 +72,13 @@
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span><balanceInfo class="float-right" />
+      <span class="balance float-left">{{ $t('yourBalance') }}</span>
+      <balanceInfo class="float-right" />
     </div>
   </b-modal>
 </template>
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 6fea62d847..173840f92f 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -9,46 +9,56 @@
       class="badge badge-pill badge-dialog"
       :class="{'item-selected-badge': isPinned}"
       @click.prevent.stop="togglePinned()"
-    ><span
-      class="svg-icon inline color icon-10"
-      v-html="icons.pin"
-    ></span></span><div class="close">
+    >
+      <span
+        class="svg-icon inline color icon-10"
+        v-html="icons.pin"
+      ></span>
+    </span>
+    <div class="close">
       <span
         class="svg-icon inline icon-10"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
       ></span>
-    </div><div
+    </div>
+    <div
       v-if="item != null"
       class="content"
     >
       <div class="inner-content">
-        <questDialogContent :item="item" /><div class="purchase-amount">
+        <questDialogContent :item="item" />
+        <div class="purchase-amount">
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
-          </div><div class="box">
+          </div>
+          <div class="box">
             <input
               v-model.number="selectedAmountToBuy"
               type="number"
               min="0"
               step="1"
             >
-          </div><span
+          </div>
+          <span
             class="svg-icon inline icon-32"
             aria-hidden="true"
             v-html="currencyIcon"
-          ></span><span
+          ></span>
+          <span
             class="value"
             :class="priceType"
           >{{ item.value }}</span>
-        </div><button
+        </div>
+        <button
           v-if="priceType === 'gems' && !this.enoughCurrency(priceType, item.value * selectedAmountToBuy)"
           class="btn btn-primary"
           @click="purchaseGems()"
         >
           {{ $t('purchaseGems') }}
-        </button><button
+        </button>
+        <button
           v-else
           class="btn btn-primary"
           :class="{'notEnough': !this.enoughCurrency(priceType, item.value * selectedAmountToBuy)}"
@@ -58,16 +68,19 @@
           {{ $t('buyNow') }}
         </button>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="item.drop"
       class="right-sidebar"
     >
       <questDialogDrops :item="item" />
-    </div><div
+    </div>
+    <div
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span><balanceInfo
+      <span class="balance float-left">{{ $t('yourBalance') }}</span>
+      <balanceInfo
         class="float-right"
         :with-hourglass="priceType === 'hourglasses'"
         :currency-needed="priceType"
diff --git a/website/client/src/components/shops/quests/index.vue b/website/client/src/components/shops/quests/index.vue
index 4262380a04..806006fc71 100644
--- a/website/client/src/components/shops/quests/index.vue
+++ b/website/client/src/components/shops/quests/index.vue
@@ -8,10 +8,12 @@
           type="text"
           :placeholder="$t('search')"
         >
-      </div><div class="form">
+      </div>
+      <div class="form">
         <h2 v-once>
           {{ $t('filter') }}
-        </h2><div class="form-group">
+        </h2>
+        <div class="form-group">
           <div
             v-for="category in categories"
             :key="category.identifier"
@@ -23,52 +25,65 @@
                 v-model="viewOptions[category.identifier].selected"
                 class="custom-control-input"
                 type="checkbox"
-              ><label
+              >
+              <label
                 v-once
                 class="custom-control-label"
                 :for="`category-${category.identifier}`"
               >{{ category.text }}</label>
             </div>
           </div>
-        </div><div class="form-group clearfix">
+        </div>
+        <div class="form-group clearfix">
           <h3
             v-once
             class="float-left"
           >
             {{ $t('hideLocked') }}
-          </h3><toggle-switch
+          </h3>
+          <toggle-switch
             v-model="hideLocked"
             class="float-right"
           />
-        </div><div class="form-group clearfix">
+        </div>
+        <div class="form-group clearfix">
           <h3
             v-once
             class="float-left"
           >
             {{ $t('hidePinned') }}
-          </h3><toggle-switch
+          </h3>
+          <toggle-switch
             v-model="hidePinned"
             class="float-right"
           />
         </div>
       </div>
-    </div><div class="standard-page">
+    </div>
+    <div class="standard-page">
       <div class="featuredItems">
         <div
           class="background"
           :class="{broken: broken}"
-        ></div><div
+        ></div>
+        <div
           class="background"
           :class="{cracked: broken, broken: broken}"
         >
           <div class="npc">
             <div class="featured-label">
-              <span class="rectangle"></span><span class="text">Ian</span><span class="rectangle"></span>
+              <span class="rectangle"></span>
+              <span class="text">Ian</span>
+              <span class="rectangle"></span>
             </div>
-          </div><div class="content">
+          </div>
+          <div class="content">
             <div class="featured-label with-border">
-              <span class="rectangle"></span><span class="text">{{ shop.featured.text }}</span><span class="rectangle"></span>
-            </div><div class="items margin-center">
+              <span class="rectangle"></span>
+              <span class="text">{{ shop.featured.text }}</span>
+              <span class="rectangle"></span>
+            </div>
+            <div class="items margin-center">
               <shopItem
                 v-for="item in shop.featured.items"
                 :key="item.key"
@@ -88,23 +103,28 @@
                     class="badge badge-pill badge-item badge-svg"
                     :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                     @click.prevent.stop="togglePinned(ctx.item)"
-                  ><span
-                    class="svg-icon inline icon-12 color"
-                    v-html="icons.pin"
-                  ></span></span>
+                  >
+                    <span
+                      class="svg-icon inline icon-12 color"
+                      v-html="icons.pin"
+                    ></span>
+                  </span>
                 </template>
               </shopItem>
             </div>
           </div>
         </div>
-      </div><h1
+      </div>
+      <h1
         v-once
         class="mb-4 page-header"
       >
         {{ $t('quests') }}
-      </h1><div class="clearfix">
+      </h1>
+      <div class="clearfix">
         <div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+          <span class="dropdown-label">{{ $t('sortBy') }}</span>
+          <b-dropdown
             :text="$t(selectedSortItemsBy)"
             right="right"
           >
@@ -118,13 +138,15 @@
             </b-dropdown-item>
           </b-dropdown>
         </div>
-      </div><div
+      </div>
+      <div
         v-for="category in categories"
         v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
       >
         <h2 class="mb-3">
           {{ category.text }}
-        </h2><itemRows
+        </h2>
+        <itemRows
           v-if="category.identifier === 'pet'"
           :items="questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)"
           :item-width="94"
@@ -147,7 +169,13 @@
               <span
                 slot="popoverContent"
                 slot-scope="ctx"
-              ><div class="questPopover"><h4 class="popover-content-title">{{ ctx.item.text }}</h4><questInfo :quest="ctx.item" /></div></span><template
+              >
+                <div class="questPopover">
+                  <h4 class="popover-content-title">{{ ctx.item.text }}</h4>
+                  <questInfo :quest="ctx.item" />
+                </div>
+              </span>
+              <template
                 slot="itemBadge"
                 slot-scope="ctx"
               >
@@ -155,17 +183,21 @@
                   class="badge badge-pill badge-item badge-svg"
                   :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                   @click.prevent.stop="togglePinned(ctx.item)"
-                ><span
-                  class="svg-icon inline icon-12 color"
-                  v-html="icons.pin"
-                ></span></span><countBadge
+                >
+                  <span
+                    class="svg-icon inline icon-12 color"
+                    v-html="icons.pin"
+                  ></span>
+                </span>
+                <countBadge
                   :show="userItems.quests[ctx.item.key] > 0"
                   :count="userItems.quests[ctx.item.key] || 0"
                 />
               </template>
             </shopItem>
           </template>
-        </itemRows><div
+        </itemRows>
+        <div
           v-else-if="category.identifier === 'unlockable' || category.identifier === 'gold'"
           class="grouped-parent"
         >
@@ -174,7 +206,8 @@
             v-if="key !== 'questGroupEarnable'"
             class="group"
           >
-            <h3>{{ $t(key) }}</h3><div class="items">
+            <h3>{{ $t(key) }}</h3>
+            <div class="items">
               <shopItem
                 v-for="item in items"
                 :key="item.key"
@@ -184,28 +217,40 @@
                 :popover-position="'top'"
                 @click="selectItem(item)"
               >
-                <span slot="popoverContent"><div class="questPopover"><div></div><h4
-                  v-if="item.locked"
-                  class="popover-content-title"
-                >{{ `${$t('lockedItem')}` }}</h4><h4
-                  v-else
-                  class="popover-content-title"
-                >{{ item.text }}</h4><div
-                  v-if="item.locked && item.key === 'lostMasterclasser1'"
-                  class="popover-content-text"
-                >{{ `${$t('questUnlockLostMasterclasser')}` }}</div><div
-                  v-if="item.locked && item.unlockCondition && item.unlockCondition.incentiveThreshold"
-                  class="popover-content-text"
-                >{{ `${$t('loginIncentiveQuest', {count: item.unlockCondition.incentiveThreshold})}` }}</div><div
-                  v-if="item.locked && item.previous && isBuyingDependentOnPrevious(item)"
-                  class="popover-content-text"
-                >{{ `${$t('unlockByQuesting', {title: item.previous})}` }}</div><div
-                  v-if="item.lvl > user.stats.lvl"
-                  class="popover-content-text"
-                >{{ `${$t('mustLvlQuest', {level: item.lvl})}` }}</div><questInfo
-                  v-if="!item.locked"
-                  :quest="item"
-                /></div></span><template
+                <span slot="popoverContent">
+                  <div class="questPopover">
+                    <div></div>
+                    <h4
+                      v-if="item.locked"
+                      class="popover-content-title"
+                    >{{ `${$t('lockedItem')}` }}</h4>
+                    <h4
+                      v-else
+                      class="popover-content-title"
+                    >{{ item.text }}</h4>
+                    <div
+                      v-if="item.locked && item.key === 'lostMasterclasser1'"
+                      class="popover-content-text"
+                    >{{ `${$t('questUnlockLostMasterclasser')}` }}</div>
+                    <div
+                      v-if="item.locked && item.unlockCondition && item.unlockCondition.incentiveThreshold"
+                      class="popover-content-text"
+                    >{{ `${$t('loginIncentiveQuest', {count: item.unlockCondition.incentiveThreshold})}` }}</div>
+                    <div
+                      v-if="item.locked && item.previous && isBuyingDependentOnPrevious(item)"
+                      class="popover-content-text"
+                    >{{ `${$t('unlockByQuesting', {title: item.previous})}` }}</div>
+                    <div
+                      v-if="item.lvl > user.stats.lvl"
+                      class="popover-content-text"
+                    >{{ `${$t('mustLvlQuest', {level: item.lvl})}` }}</div>
+                    <questInfo
+                      v-if="!item.locked"
+                      :quest="item"
+                    />
+                  </div>
+                </span>
+                <template
                   slot="itemBadge"
                   slot-scope="ctx"
                 >
@@ -213,10 +258,13 @@
                     class="badge badge-pill badge-item badge-svg"
                     :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                     @click.prevent.stop="togglePinned(ctx.item)"
-                  ><span
-                    class="svg-icon inline icon-12 color"
-                    v-html="icons.pin"
-                  ></span></span><countBadge
+                  >
+                    <span
+                      class="svg-icon inline icon-12 color"
+                      v-html="icons.pin"
+                    ></span>
+                  </span>
+                  <countBadge
                     :show="userItems.quests[ctx.item.key] > 0"
                     :count="userItems.quests[ctx.item.key] || 0"
                   />
@@ -224,7 +272,8 @@
               </shopItem>
             </div>
           </div>
-        </div><div
+        </div>
+        <div
           v-else
           class="items"
         >
@@ -237,7 +286,13 @@
             :popover-position="'top'"
             @click="selectItem(item)"
           >
-            <span slot="popoverContent"><div class="questPopover"><h4 class="popover-content-title">{{ item.text }}</h4><questInfo :quest="item" /></div></span><template
+            <span slot="popoverContent">
+              <div class="questPopover">
+                <h4 class="popover-content-title">{{ item.text }}</h4>
+                <questInfo :quest="item" />
+              </div>
+            </span>
+            <template
               slot="itemBadge"
               slot-scope="ctx"
             >
@@ -245,10 +300,13 @@
                 class="badge badge-pill badge-item badge-svg"
                 :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                 @click.prevent.stop="togglePinned(ctx.item)"
-              ><span
-                class="svg-icon inline icon-12 color"
-                v-html="icons.pin"
-              ></span></span><countBadge
+              >
+                <span
+                  class="svg-icon inline icon-12 color"
+                  v-html="icons.pin"
+                ></span>
+              </span>
+              <countBadge
                 :show="userItems.quests[ctx.item.key] > 0"
                 :count="userItems.quests[ctx.item.key] || 0"
               />
@@ -256,7 +314,8 @@
           </shopItem>
         </div>
       </div>
-    </div><buyModal
+    </div>
+    <buyModal
       :item="selectedItemToBuy || {}"
       :price-type="selectedItemToBuy ? selectedItemToBuy.currency : ''"
       :with-pin="true"
diff --git a/website/client/src/components/shops/quests/questDialogContent.vue b/website/client/src/components/shops/quests/questDialogContent.vue
index 617a4532d2..45783522f5 100644
--- a/website/client/src/components/shops/quests/questDialogContent.vue
+++ b/website/client/src/components/shops/quests/questDialogContent.vue
@@ -3,12 +3,15 @@
     <div
       class="quest-image"
       :class="'quest_' + item.key"
-    ></div><h4 class="title">
+    ></div>
+    <h4 class="title">
       {{ itemText }}
-    </h4><div
+    </h4>
+    <div
       class="text"
       v-html="itemNotes"
-    ></div><questInfo
+    ></div>
+    <questInfo
       class="questInfo"
       :quest="item"
     />
diff --git a/website/client/src/components/shops/quests/questDialogDrops.vue b/website/client/src/components/shops/quests/questDialogDrops.vue
index f9baf02175..7ec7a7ef3f 100644
--- a/website/client/src/components/shops/quests/questDialogDrops.vue
+++ b/website/client/src/components/shops/quests/questDialogDrops.vue
@@ -5,39 +5,53 @@
       class="text-center"
     >
       {{ $t('rewards') }}
-    </h3><div class="reward-item">
+    </h3>
+    <div class="reward-item">
       <span
         class="svg-icon inline icon"
         v-html="icons.experience"
-      ></span><span class="reward-text">{{ $t('amountExperience', { amount: item.drop.exp }) }}</span>
-    </div><div
+      ></span>
+      <span class="reward-text">{{ $t('amountExperience', { amount: item.drop.exp }) }}</span>
+    </div>
+    <div
       v-if="item.drop.gp != 0"
       class="reward-item"
     >
       <span
         class="svg-icon inline icon"
         v-html="icons.gold"
-      ></span><span class="reward-text">{{ $t('amountGold', { amount: item.drop.gp }) }}</span>
-    </div><div
+      ></span>
+      <span class="reward-text">{{ $t('amountGold', { amount: item.drop.gp }) }}</span>
+    </div>
+    <div
       v-for="drop in getDropsList(item.drop.items, false)"
       class="reward-item"
     >
-      <span class="icon"><div :class="getDropIcon(drop)"></div></span><span class="reward-text">{{ getDropName(drop) }}</span>
-    </div><div
+      <span class="icon">
+        <div :class="getDropIcon(drop)"></div>
+      </span>
+      <span class="reward-text">{{ getDropName(drop) }}</span>
+    </div>
+    <div
       v-if="item.drop.unlock"
       class="reward-item text-center"
     >
       <span class="reward-text">{{ item.drop.unlock() }}</span>
-    </div><h3
+    </div>
+    <h3
       v-if="getDropsList(item.drop.items, true).length > 0"
       class="text-center"
     >
       {{ $t('questOwnerRewards') }}
-    </h3><div
+    </h3>
+    <div
       v-for="drop in getDropsList(item.drop.items, true)"
       class="reward-item"
     >
-      <span class="icon"><div :class="getDropIcon(drop)"></div></span><span class="reward-text">{{ getDropName(drop) }}</span>
+      <span class="icon">
+        <div :class="getDropIcon(drop)"></div>
+      </span>
+      <span class="reward-text">{{ getDropName(drop) }}</span>
     </div>
   </div>
 </template>
diff --git a/website/client/src/components/shops/quests/questInfo.vue b/website/client/src/components/shops/quests/questInfo.vue
index 3de5829439..ed06541e51 100644
--- a/website/client/src/components/shops/quests/questInfo.vue
+++ b/website/client/src/components/shops/quests/questInfo.vue
@@ -7,18 +7,23 @@
       v-if="quest.collect"
       class="table-row"
     >
-      <dt>{{ $t('collect') + ':' }}</dt><dd>
+      <dt>{{ $t('collect') + ':' }}</dt>
+      <dd>
         <div v-for="(collect, key) of quest.collect">
           <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
         </div>
       </dd>
-    </div><div
+    </div>
+    <div
       v-if="quest.boss"
       class="table-row"
     >
-      <dt>{{ $t('bossHP') + ':' }}</dt><dd>{{ quest.boss.hp }}</dd>
-    </div><div class="table-row">
-      <dt>{{ $t('difficulty') + ':' }}</dt><dd>
+      <dt>{{ $t('bossHP') + ':' }}</dt>
+      <dd>{{ quest.boss.hp }}</dd>
+    </div>
+    <div class="table-row">
+      <dt>{{ $t('difficulty') + ':' }}</dt>
+      <dd>
         <div
           v-for="star of stars()"
           class="svg-icon inline"
diff --git a/website/client/src/components/shops/seasonal/index.vue b/website/client/src/components/shops/seasonal/index.vue
index b9379c561a..351eeeb7d3 100644
--- a/website/client/src/components/shops/seasonal/index.vue
+++ b/website/client/src/components/shops/seasonal/index.vue
@@ -8,10 +8,12 @@
           type="text"
           :placeholder="$t('search')"
         >
-      </div><div class="form">
+      </div>
+      <div class="form">
         <h2 v-once>
           {{ $t('filter') }}
-        </h2><div class="form-group">
+        </h2>
+        <div class="form-group">
           <checkbox
             v-for="category in filterCategories"
             :id="`category-${category.key}`"
@@ -19,19 +21,22 @@
             :checked.sync="viewOptions[category.key].selected"
             :text="category.value"
           />
-        </div><div class="form-group clearfix">
+        </div>
+        <div class="form-group clearfix">
           <h3
             v-once
             class="float-left"
           >
             {{ $t('hidePinned') }}
-          </h3><toggle-switch
+          </h3>
+          <toggle-switch
             v-model="hidePinned"
             class="float-right"
           />
         </div>
       </div>
-    </div><div class="standard-page">
+    </div>
+    <div class="standard-page">
       <div class="featuredItems">
         <div
           class="background"
@@ -39,23 +44,30 @@
         >
           <div class="npc">
             <div class="featured-label">
-              <span class="rectangle"></span><span class="text">Leslie</span><span class="rectangle"></span>
+              <span class="rectangle"></span>
+              <span class="text">Leslie</span>
+              <span class="rectangle"></span>
             </div>
-          </div><div
+          </div>
+          <div
             v-if="!seasonal.opened"
             class="content"
           >
             <div class="featured-label with-border closed">
-              <span class="rectangle"></span><span
+              <span class="rectangle"></span>
+              <span
                 v-if="!broken"
                 class="text"
                 v-html="seasonal.notes"
-              ></span><span
+              ></span>
+              <span
                 v-if="broken"
                 class="text"
-              >{{ $t('seasonalShopBrokenText') }}</span><span class="rectangle"></span>
+              >{{ $t('seasonalShopBrokenText') }}</span>
+              <span class="rectangle"></span>
             </div>
-          </div><div
+          </div>
+          <div
             v-else-if="seasonal.featured.items.length !== 0"
             class="content"
           >
@@ -63,19 +75,25 @@
               v-if="!featuredGearBought"
               class="featured-label with-border"
             >
-              <span class="rectangle"></span><span
+              <span class="rectangle"></span>
+              <span
                 v-once
                 class="text"
-              >{{ $t('featuredset', { name: seasonal.featured.text }) }}</span><span class="rectangle"></span>
-            </div><div
+              >{{ $t('featuredset', { name: seasonal.featured.text }) }}</span>
+              <span class="rectangle"></span>
+            </div>
+            <div
               v-else
               class="featured-label with-border"
             >
-              <span class="rectangle"></span><span
+              <span class="rectangle"></span>
+              <span
                 v-once
                 class="text"
-              >{{ $t('featuredItems') }}</span><span class="rectangle"></span>
-            </div><div class="items margin-center">
+              >{{ $t('featuredItems') }}</span>
+              <span class="rectangle"></span>
+            </div>
+            <div class="items margin-center">
               <shopItem
                 v-for="item in seasonal.featured.items"
                 :key="item.key"
@@ -89,20 +107,24 @@
             </div>
           </div>
         </div>
-      </div><h1
+      </div>
+      <h1
         v-if="seasonal.opened"
         v-once
         class="mb-4 page-header"
       >
         {{ $t('seasonalShop') }}
-      </h1><div
+      </h1>
+      <div
         v-if="seasonal.opened"
         class="clearfix"
       >
         <h2 class="float-left mb-3">
           {{ $t('classArmor') }}
-        </h2><div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+        </h2>
+        <div class="float-right">
+          <span class="dropdown-label">{{ $t('sortBy') }}</span>
+          <b-dropdown
             :text="$t(selectedSortItemsBy)"
             right="right"
           >
@@ -116,7 +138,8 @@
             </b-dropdown-item>
           </b-dropdown>
         </div>
-      </div><div v-for="(groupSets, categoryGroup) in getGroupedCategories(categories)">
+      </div>
+      <div v-for="(groupSets, categoryGroup) in getGroupedCategories(categories)">
         <h3
           v-if="categoryGroup !== 'spells' && categoryGroup !== 'quests'"
           class="classgroup"
@@ -124,16 +147,19 @@
           <span
             class="svg-icon inline"
             v-html="icons[categoryGroup]"
-          ></span><span
+          ></span>
+          <span
             class="name"
             :class="categoryGroup"
           >{{ getClassName(categoryGroup) }}</span>
-        </h3><div class="grouped-parent">
+        </h3>
+        <div class="grouped-parent">
           <div
             v-for="category in groupSets"
             class="group"
           >
-            <h3>{{ category.text }}</h3><div class="items">
+            <h3>{{ category.text }}</h3>
+            <div class="items">
               <shopItem
                 v-for="item in seasonalItems(category, selectedSortItemsBy, searchTextThrottled, viewOptions, hidePinned)"
                 :key="item.key"
@@ -152,10 +178,12 @@
                     class="badge badge-pill badge-item badge-svg"
                     :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}"
                     @click.prevent.stop="togglePinned(ctx.item)"
-                  ><span
-                    class="svg-icon inline icon-12 color"
-                    v-html="icons.pin"
-                  ></span></span>
+                  >
+                    <span
+                      class="svg-icon inline icon-12 color"
+                      v-html="icons.pin"
+                    ></span>
+                  </span>
                 </template>
               </shopItem>
             </div>
diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue
index 3fda43a4f6..7c6d9d68e1 100644
--- a/website/client/src/components/shops/shopItem.vue
+++ b/website/client/src/components/shops/shopItem.vue
@@ -13,34 +13,43 @@
           name="itemBadge"
           :item="item"
           :emptyItem="emptyItem"
-        ></slot><span
+        ></slot>
+        <span
           v-if="item.event && item.owned == null && showEventBadge"
           class="badge badge-pill badge-item badge-clock"
-        ><span
-          class="svg-icon inline clock"
-          v-html="icons.clock"
-        ></span></span><div class="shop-content">
+        >
+          <span
+            class="svg-icon inline clock"
+            v-html="icons.clock"
+          ></span>
+        </span>
+        <div class="shop-content">
           <span
             v-if="item.locked"
             class="svg-icon inline lock"
             v-html="icons.lock"
-          ></span><span
+          ></span>
+          <span
             v-if="item.isSuggested"
             class="suggestedDot"
-          ></span><div class="image">
+          ></span>
+          <div class="image">
             <div
               v-once
               :class="item.class"
-            ></div><slot
+            ></div>
+            <slot
               name="itemImage"
               :item="item"
             ></slot>
-          </div><div class="price">
+          </div>
+          <div class="price">
             <span
               v-once
               class="svg-icon inline icon-16"
               v-html="icons[currencyClass]"
-            ></span><span
+            ></span>
+            <span
               v-once
               class="price-label"
               :class="currencyClass"
@@ -48,7 +57,8 @@
           </div>
         </div>
       </div>
-    </div><b-popover
+    </div>
+    <b-popover
       v-if="showPopover"
       :target="itemId"
       triggers="hover"
@@ -61,32 +71,38 @@
         <equipmentAttributesPopover
           v-if="item.purchaseType === 'gear'"
           :item="item"
-        /><div
+        />
+        <div
           v-else-if="item.purchaseType === 'quests'"
           class="questPopover"
         >
           <h4 class="popover-content-title">
             {{ item.text }}
-          </h4><questInfo :quest="item" />
-        </div><div v-else>
+          </h4>
+          <questInfo :quest="item" />
+        </div>
+        <div v-else>
           <h4
             v-once
             class="popover-content-title"
           >
             {{ item.text }}
-          </h4><div
+          </h4>
+          <div
             v-if="showNotes && item.key !== 'armoire'"
             v-once
             class="popover-content-text"
           >
             {{ item.notes }}
-          </div><div
+          </div>
+          <div
             v-if="showNotes && item.key === 'armoire'"
             class="popover-content-text"
           >
             {{ item.notes }}
           </div>
-        </div><div
+        </div>
+        <div
           v-if="item.event"
           class="mt-4"
         >
diff --git a/website/client/src/components/sidebarSection.vue b/website/client/src/components/sidebarSection.vue
index 3f661ca13f..2103f35684 100644
--- a/website/client/src/components/sidebarSection.vue
+++ b/website/client/src/components/sidebarSection.vue
@@ -6,7 +6,8 @@
         class="mb-0"
       >
         {{ title }}
-      </h3><div
+      </h3>
+      <div
         v-if="tooltip !== null"
         class="section-info mx-1"
       >
@@ -15,11 +16,13 @@
           class="svg-icon"
           :title="tooltip"
           v-html="icons.information"
-        ></div><b-tooltip
+        ></div>
+        <b-tooltip
           :title="tooltip"
           :target="tooltipId"
         />
-      </div><div
+      </div>
+      <div
         class="section-toggle ml-auto"
         @click="toggle"
       >
@@ -27,13 +30,15 @@
           v-if="visible"
           class="svg-icon"
           v-html="icons.upIcon"
-        ></div><div
+        ></div>
+        <div
           v-else
           class="svg-icon"
           v-html="icons.downIcon"
         ></div>
       </div>
-    </div><div
+    </div>
+    <div
       v-show="visible"
       class="section-body"
     >
diff --git a/website/client/src/components/snackbars/notification.vue b/website/client/src/components/snackbars/notification.vue
index 0cdadaecf0..1406e4e2cc 100644
--- a/website/client/src/components/snackbars/notification.vue
+++ b/website/client/src/components/snackbars/notification.vue
@@ -13,51 +13,62 @@
         <div class="text col-12">
           <div v-html="notification.text"></div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="notification.type === 'streak'"
         class="row"
       >
         <div class="text col-7 offset-1">
           <div>{{ message }}</div>
-        </div><div class="icon col-4">
+        </div>
+        <div class="icon col-4">
           <div
             class="svg-icon"
             v-html="icons.gold"
-          ></div><div v-html="notification.text"></div>
+          ></div>
+          <div v-html="notification.text"></div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="['hp', 'gp', 'xp', 'mp'].indexOf(notification.type) !== -1"
         class="row"
       >
         <div class="text col-7 offset-1">
           <div>{{ message }}</div>
-        </div><div class="icon col-4 d-flex align-items-center">
+        </div>
+        <div class="icon col-4 d-flex align-items-center">
           <div
             v-if="notification.type === 'hp'"
             class="svg-icon"
             v-html="icons.health"
-          ></div><div
+          ></div>
+          <div
             v-if="notification.type === 'gp'"
             class="svg-icon"
             v-html="icons.gold"
-          ></div><div
+          ></div>
+          <div
             v-if="notification.type === 'xp'"
             class="svg-icon"
             v-html="icons.star"
-          ></div><div
+          ></div>
+          <div
             v-if="notification.type === 'mp'"
             class="svg-icon"
             v-html="icons.mana"
-          ></div><div v-html="notification.text"></div>
+          ></div>
+          <div v-html="notification.text"></div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="['info', 'success', 'crit', 'lvl'].indexOf(notification.type) !== -1"
         class="row"
       >
         <div class="text col-12">
           <div v-html="notification.text"></div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="notification.type === 'drop'"
         class="row"
       >
@@ -65,7 +76,8 @@
           <div class="icon-item">
             <div :class="notification.icon"></div>
           </div>
-        </div><div class="text col-8">
+        </div>
+        <div class="text col-8">
           <div v-html="notification.text"></div>
         </div>
       </div>
diff --git a/website/client/src/components/static/app.vue b/website/client/src/components/static/app.vue
index 9467d34f60..5997b32717 100644
--- a/website/client/src/components/static/app.vue
+++ b/website/client/src/components/static/app.vue
@@ -2,14 +2,21 @@
   <div class="container-fluid text-center">
     <div class="row">
       <div class="col-md-6 offset-3">
-        <h1>{{ $t('checkOutMobileApps') }}</h1><div
+        <h1>{{ $t('checkOutMobileApps') }}</h1>
+        <div
           class="promo_habitica"
           style="border-radius:25px;margin:auto;margin-bottom:30px"
-        ></div><a href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"><img
-          alt="Get it on Google Play"
-          src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png"
-          style="width:139px;height:45px;image-rendering:auto;vertical-align:top"
-        ></a><a
+        ></div>
+        <a
+          href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"
+        >
+          <img
+            alt="Get it on Google Play"
+            src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png"
+            style="width:139px;height:45px;image-rendering:auto;vertical-align:top"
+          >
+        </a>
+        <a
           href="https://geo.itunes.apple.com/us/app/habitica/id994882113?mt=8"
           style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg#svgView) no-repeat;background-size:100%;width:152px;height:45px;margin-left:20px;image-rendering:auto"
         ></a>
diff --git a/website/client/src/components/static/clearBrowserData.vue b/website/client/src/components/static/clearBrowserData.vue
index f3d672d2d6..b3c30f7a50 100644
--- a/website/client/src/components/static/clearBrowserData.vue
+++ b/website/client/src/components/static/clearBrowserData.vue
@@ -2,16 +2,21 @@
   <div class="container-fluid text-center">
     <div class="row">
       <div class="col-md-6 offset-3">
-        <h1>{{ $t('clearBrowserData') }}</h1><p v-html="$t('localStorageTryFirst', localStorageTryFirst) "></p><br><p class="text-center">
+        <h1>{{ $t('clearBrowserData') }}</h1>
+        <p v-html="$t('localStorageTryFirst', localStorageTryFirst) "></p>
+        <br >
+        <p class="text-center">
           <button
             class="btn btn-lg btn-danger"
             popover-trigger="mouseover"
             :popover="$t('localStorageClearExplanation')"
             @click="clearLocalStorage()"
           >
-            {{ $t('localStorageClear') }}
-          </button>
-        </p><br><p v-html="$t('localStorageTryNext', localStorageTryNext) "></p>
+{{ $t('localStorageClear') }}
+</button>
+        </p>
+        <br >
+        <p v-html="$t('localStorageTryNext', localStorageTryNext) "></p>
       </div>
     </div>
   </div>
diff --git a/website/client/src/components/static/communityGuidelines.vue b/website/client/src/components/static/communityGuidelines.vue
index fb10c0983c..b173279eff 100644
--- a/website/client/src/components/static/communityGuidelines.vue
+++ b/website/client/src/components/static/communityGuidelines.vue
@@ -1,69 +1,254 @@
 <template>
   <div class="container-fluid">
-    <h1>{{ $t('communityGuidelines') }}</h1><hr><p>{{ $t('lastUpdated') }} March 29, 2018</p><h2 id="welcome">
+    <h1>{{ $t('communityGuidelines') }}</h1>
+    <hr>
+    <p>{{ $t('lastUpdated') }} March 29, 2018</p>
+    <h2 id="welcome">
       {{ $t('commGuideHeadingWelcome') }}
-    </h2><div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/intro.png"><div class="media-body">
-        <p v-html="$t('commGuidePara001')"></p><p v-html="$t('commGuidePara002')"></p>
-      </div>
-    </div><p v-html="$t('commGuidePara003')"></p><p v-html="$t('commGuidePara004')"></p><h2 id="interactions">
-      {{ $t('commGuideHeadingInteractions') }}
-    </h2><div class="media align-items-center">
+    </h2>
+    <div class="media align-items-center">
+      <img src="~@/assets/images/community-guidelines/intro.png">
       <div class="media-body">
-        <p v-html="$t('commGuidePara015')"></p><p v-html="$t('commGuidePara016')"></p>
-      </div><img src="~@/assets/images/community-guidelines/publicSpaces.png">
-    </div><ul><li v-html="$t('commGuideList02A')"></li><li v-html="$t('commGuideList02B')"></li><li v-html="$t('commGuideList02C')"></li><li v-html="$t('commGuideList02D')"></li><li v-html="$t('commGuideList02E')"></li><li v-html="$t('commGuideList02F')"></li><li v-html="$t('commGuideList02G')"></li><li v-html="$t('commGuideList02H')"></li><li v-html="$t('commGuideList02I')"></li><li v-html="$t('commGuideList02J')"></li><li v-html="$t('commGuideList02K')"></li><li v-html="$t('commGuideList02L')"></li></ul><p v-html="$t('commGuidePara019')"></p><p v-html="$t('commGuidePara020')"></p><p v-html="$t('commGuidePara020A')"></p><p v-html="$t('commGuidePara021')"></p><h3 id="tavern">
-      {{ $t('commGuideHeadingTavern') }}
-    </h3><div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/tavern.png"><div class="media-body">
-        <p v-html="$t('commGuidePara022')"></p><p v-html="$t('commGuidePara023')"></p><p v-html="$t('commGuidePara024')"></p>
+        <p v-html="$t('commGuidePara001')"></p>
+        <p v-html="$t('commGuidePara002')"></p>
       </div>
-    </div><div class="media align-items-center">
+    </div>
+    <p v-html="$t('commGuidePara003')"></p>
+    <p v-html="$t('commGuidePara004')"></p>
+    <h2 id="interactions">
+      {{ $t('commGuideHeadingInteractions') }}
+    </h2>
+    <div class="media align-items-center">
+      <div class="media-body">
+        <p v-html="$t('commGuidePara015')"></p>
+        <p v-html="$t('commGuidePara016')"></p>
+      </div>
+      <img src="~@/assets/images/community-guidelines/publicSpaces.png">
+    </div>
+    <ul>
+      <li v-html="$t('commGuideList02A')"></li>
+      <li v-html="$t('commGuideList02B')"></li>
+      <li v-html="$t('commGuideList02C')"></li>
+      <li v-html="$t('commGuideList02D')"></li>
+      <li v-html="$t('commGuideList02E')"></li>
+      <li v-html="$t('commGuideList02F')"></li>
+      <li v-html="$t('commGuideList02G')"></li>
+      <li v-html="$t('commGuideList02H')"></li>
+      <li v-html="$t('commGuideList02I')"></li>
+      <li v-html="$t('commGuideList02J')"></li>
+      <li v-html="$t('commGuideList02K')"></li>
+      <li v-html="$t('commGuideList02L')"></li>
+    </ul>
+    <p v-html="$t('commGuidePara019')"></p>
+    <p v-html="$t('commGuidePara020')"></p>
+    <p v-html="$t('commGuidePara020A')"></p>
+    <p v-html="$t('commGuidePara021')"></p>
+    <h3 id="tavern">
+      {{ $t('commGuideHeadingTavern') }}
+    </h3>
+    <div class="media align-items-center">
+      <img src="~@/assets/images/community-guidelines/tavern.png">
+      <div class="media-body">
+        <p v-html="$t('commGuidePara022')"></p>
+        <p v-html="$t('commGuidePara023')"></p>
+        <p v-html="$t('commGuidePara024')"></p>
+      </div>
+    </div>
+    <div class="media align-items-center">
       <div class="media-body">
         <p v-html="$t('commGuidePara027')"></p>
-      </div><img src="~@/assets/images/community-guidelines/backCorner.png">
-    </div><h3 id="guilds">
+      </div>
+      <img src="~@/assets/images/community-guidelines/backCorner.png">
+    </div>
+    <h3 id="guilds">
       {{ $t('commGuideHeadingPublicGuilds') }}
-    </h3><div class="media align-items-center">
+    </h3>
+    <div class="media align-items-center">
       <div class="media-body">
-        <p v-html="$t('commGuidePara029')"></p><p v-html="$t('commGuidePara031')"></p>
-      </div><img src="~@/assets/images/community-guidelines/publicGuilds.png">
-    </div><p v-html="$t('commGuidePara033')"></p><p v-html="$t('commGuidePara035')"></p><p v-html="$t('commGuidePara036')"></p><p v-html="$t('commGuidePara037')"></p><p v-html="$t('commGuidePara038')"></p><h2 id="infractions-consequences-restoration">
+        <p v-html="$t('commGuidePara029')"></p>
+        <p v-html="$t('commGuidePara031')"></p>
+      </div>
+      <img src="~@/assets/images/community-guidelines/publicGuilds.png">
+    </div>
+    <p v-html="$t('commGuidePara033')"></p>
+    <p v-html="$t('commGuidePara035')"></p>
+    <p v-html="$t('commGuidePara036')"></p>
+    <p v-html="$t('commGuidePara037')"></p>
+    <p v-html="$t('commGuidePara038')"></p>
+    <h2 id="infractions-consequences-restoration">
       {{ $t('commGuideHeadingInfractionsEtc') }}
-    </h2><h3 id="infractions">
+    </h2>
+    <h3 id="infractions">
       {{ $t('commGuideHeadingInfractions') }}
-    </h3><div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/infractions.png"><div class="media-body">
-        <p v-html="$t('commGuidePara050')"></p><p v-html="$t('commGuidePara051')"></p>
-      </div>
-    </div><h4>{{ $t('commGuideHeadingSevereInfractions') }}</h4><p v-html="$t('commGuidePara052')"></p><p v-html="$t('commGuidePara053')"></p><ul><li v-html="$t('commGuideList05A')"></li><li v-html="$t('commGuideList05B')"></li><li v-html="$t('commGuideList05C')"></li><li v-html="$t('commGuideList05D')"></li><li v-html="$t('commGuideList05E')"></li><li v-html="$t('commGuideList05F')"></li><li v-html="$t('commGuideList05G')"></li></ul><h4>{{ $t('commGuideHeadingModerateInfractions') }}</h4><p v-html="$t('commGuidePara054')"></p><p v-html="$t('commGuidePara055')"></p><ul><li v-html="$t('commGuideList06A')"></li><li v-html="$t('commGuideList06B')"></li><li v-html="$t('commGuideList06C')"></li><li v-html="$t('commGuideList06D')"></li><li v-html="$t('commGuideList06E')"></li></ul><h4>{{ $t('commGuideHeadingMinorInfractions') }}</h4><p v-html="$t('commGuidePara056')"></p><p v-html="$t('commGuidePara057')"></p><ul><li v-html="$t('commGuideList07A')"></li><li v-html="$t('commGuideList07B')"></li></ul><p v-html="$t('commGuidePara057A')"></p><h3 id="consequences">
-      {{ $t('commGuideHeadingConsequences') }}
-    </h3><div class="media align-items-center">
+    </h3>
+    <div class="media align-items-center">
+      <img src="~@/assets/images/community-guidelines/infractions.png">
       <div class="media-body">
-        <p v-html="$t('commGuidePara058')"></p><p v-html="$t('commGuidePara059')"></p>
-      </div><img src="~@/assets/images/community-guidelines/consequences.png">
-    </div><p v-html="$t('commGuidePara060')"></p><ul><li v-html="$t('commGuideList08A')"></li><li v-html="$t('commGuideList08B')"></li><li v-html="$t('commGuideList08C')"></li></ul><p v-html="$t('commGuidePara060A')"></p><p v-html="$t('commGuidePara060B')"></p><h4>{{ $t('commGuideHeadingSevereConsequences') }}</h4><ul><li v-html="$t('commGuideList09A')"></li><li v-html="$t('commGuideList09C')"></li></ul><h4>{{ $t('commGuideHeadingModerateConsequences') }}</h4><ul><li>{{ $t('commGuideList10A') }}<ul><li>{{ $t('commGuideList10A1') }}</li></ul></li><li v-html="$t('commGuideList10C')"></li><li v-html="$t('commGuideList10D')"></li><li v-html="$t('commGuideList10E')"></li><li v-html="$t('commGuideList10F')"></li></ul><h4>{{ $t('commGuideHeadingMinorConsequences') }}</h4><ul><li v-html="$t('commGuideList11A')"></li><li v-html="$t('commGuideList11B')"></li><li v-html="$t('commGuideList11C')"></li><li v-html="$t('commGuideList11D')"></li><li v-html="$t('commGuideList11E')"></li></ul><h3 id="restoration">
+        <p v-html="$t('commGuidePara050')"></p>
+        <p v-html="$t('commGuidePara051')"></p>
+      </div>
+    </div>
+    <h4>{{ $t('commGuideHeadingSevereInfractions') }}</h4>
+    <p v-html="$t('commGuidePara052')"></p>
+    <p v-html="$t('commGuidePara053')"></p>
+    <ul>
+      <li v-html="$t('commGuideList05A')"></li>
+      <li v-html="$t('commGuideList05B')"></li>
+      <li v-html="$t('commGuideList05C')"></li>
+      <li v-html="$t('commGuideList05D')"></li>
+      <li v-html="$t('commGuideList05E')"></li>
+      <li v-html="$t('commGuideList05F')"></li>
+      <li v-html="$t('commGuideList05G')"></li>
+    </ul>
+    <h4>{{ $t('commGuideHeadingModerateInfractions') }}</h4>
+    <p v-html="$t('commGuidePara054')"></p>
+    <p v-html="$t('commGuidePara055')"></p>
+    <ul>
+      <li v-html="$t('commGuideList06A')"></li>
+      <li v-html="$t('commGuideList06B')"></li>
+      <li v-html="$t('commGuideList06C')"></li>
+      <li v-html="$t('commGuideList06D')"></li>
+      <li v-html="$t('commGuideList06E')"></li>
+    </ul>
+    <h4>{{ $t('commGuideHeadingMinorInfractions') }}</h4>
+    <p v-html="$t('commGuidePara056')"></p>
+    <p v-html="$t('commGuidePara057')"></p>
+    <ul>
+      <li v-html="$t('commGuideList07A')"></li>
+      <li v-html="$t('commGuideList07B')"></li>
+    </ul>
+    <p v-html="$t('commGuidePara057A')"></p>
+    <h3 id="consequences">
+      {{ $t('commGuideHeadingConsequences') }}
+    </h3>
+    <div class="media align-items-center">
+      <div class="media-body">
+        <p v-html="$t('commGuidePara058')"></p>
+        <p v-html="$t('commGuidePara059')"></p>
+      </div>
+      <img src="~@/assets/images/community-guidelines/consequences.png">
+    </div>
+    <p v-html="$t('commGuidePara060')"></p>
+    <ul>
+      <li v-html="$t('commGuideList08A')"></li>
+      <li v-html="$t('commGuideList08B')"></li>
+      <li v-html="$t('commGuideList08C')"></li>
+    </ul>
+    <p v-html="$t('commGuidePara060A')"></p>
+    <p v-html="$t('commGuidePara060B')"></p>
+    <h4>{{ $t('commGuideHeadingSevereConsequences') }}</h4>
+    <ul>
+      <li v-html="$t('commGuideList09A')"></li>
+      <li v-html="$t('commGuideList09C')"></li>
+    </ul>
+    <h4>{{ $t('commGuideHeadingModerateConsequences') }}</h4>
+    <ul>
+      <li>
+        {{ $t('commGuideList10A') }}
+        <ul>
+          <li>{{ $t('commGuideList10A1') }}</li>
+        </ul>
+      </li>
+      <li v-html="$t('commGuideList10C')"></li>
+      <li v-html="$t('commGuideList10D')"></li>
+      <li v-html="$t('commGuideList10E')"></li>
+      <li v-html="$t('commGuideList10F')"></li>
+    </ul>
+    <h4>{{ $t('commGuideHeadingMinorConsequences') }}</h4>
+    <ul>
+      <li v-html="$t('commGuideList11A')"></li>
+      <li v-html="$t('commGuideList11B')"></li>
+      <li v-html="$t('commGuideList11C')"></li>
+      <li v-html="$t('commGuideList11D')"></li>
+      <li v-html="$t('commGuideList11E')"></li>
+    </ul>
+    <h3 id="restoration">
       {{ $t('commGuideHeadingRestoration') }}
-    </h3><div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/restoration.png"><div class="media-body">
-        <p v-html="$t('commGuidePara061')"></p><p v-html="$t('commGuidePara062')"></p>
+    </h3>
+    <div class="media align-items-center">
+      <img src="~@/assets/images/community-guidelines/restoration.png">
+      <div class="media-body">
+        <p v-html="$t('commGuidePara061')"></p>
+        <p v-html="$t('commGuidePara062')"></p>
       </div>
-    </div><p v-html="$t('commGuidePara063')"></p><h2 id="meet-the-mods">
+    </div>
+    <p v-html="$t('commGuidePara063')"></p>
+    <h2 id="meet-the-mods">
       {{ $t('commGuideHeadingMeet') }}
-    </h2><p v-html="$t('commGuidePara006')"></p><p v-html="$t('commGuidePara007')"></p><p v-html="$t('commGuidePara008')"></p><p v-html="$t('commGuidePara009')"></p><div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/staff.png"><div class="media-body">
-        <ul><li>{{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}</li><li>{{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}</li><li>{{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'caffeinatedvee'}) }}, {{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})</li><li>{{ $t('commGuideAKA', {habitName: 'Lemoness', realName: 'Leslie'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'lemonesstree'}) }})</li><li>{{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}</li><li>{{ $t('commGuideAKA', {habitName: 'paglias', realName: 'Matteo'}) }}</li><li>{{ $t('commGuideAKA', {habitName: 'TheHollidayInn', realName: 'Keith'}) }}</li></ul>
+    </h2>
+    <p v-html="$t('commGuidePara006')"></p>
+    <p v-html="$t('commGuidePara007')"></p>
+    <p v-html="$t('commGuidePara008')"></p>
+    <p v-html="$t('commGuidePara009')"></p>
+    <div class="media align-items-center">
+      <img src="~@/assets/images/community-guidelines/staff.png">
+      <div class="media-body">
+        <ul>
+          <li>{{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}</li>
+          <li>{{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}</li>
+          <li>{{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'caffeinatedvee'}) }}, {{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})</li>
+          <li>{{ $t('commGuideAKA', {habitName: 'Lemoness', realName: 'Leslie'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'lemonesstree'}) }})</li>
+          <li>{{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}</li>
+          <li>{{ $t('commGuideAKA', {habitName: 'paglias', realName: 'Matteo'}) }}</li>
+          <li>{{ $t('commGuideAKA', {habitName: 'TheHollidayInn', realName: 'Keith'}) }}</li>
+        </ul>
       </div>
-    </div><p v-html="$t('commGuidePara010')"></p><div class="media align-items-center">
-      <img src="~@/assets/images/community-guidelines/moderators.png"><div class="media-body">
-        <p v-html="$t('commGuidePara011')"></p><ul><li>Bailey (It's Bailey {{ $t('commGuidePara011a') }})</li><li>Ryan (deilann {{ $t('commGuidePara011b') }})</li><li>Cantras</li><li>Alys (LadyAlys {{ $t('commGuidePara011c') }})</li><li>Fox_town</li><li>Blade ({{ $t('commGuideOnGitHub', {gitHubName: 'crookedneighbor'}) }})</li><li>Daniel the Bard</li><li>shanaqui</li><li>Dewines</li><li>Megan</li><li>Breadstrings</li></ul>
+    </div>
+    <p v-html="$t('commGuidePara010')"></p>
+    <div class="media align-items-center">
+      <img src="~@/assets/images/community-guidelines/moderators.png">
+      <div class="media-body">
+        <p v-html="$t('commGuidePara011')"></p>
+        <ul>
+          <li>Bailey (It's Bailey {{ $t('commGuidePara011a') }})</li>
+          <li>Ryan (deilann {{ $t('commGuidePara011b') }})</li>
+          <li>Cantras</li>
+          <li>Alys (LadyAlys {{ $t('commGuidePara011c') }})</li>
+          <li>Fox_town</li>
+          <li>Blade ({{ $t('commGuideOnGitHub', {gitHubName: 'crookedneighbor'}) }})</li>
+          <li>Daniel the Bard</li>
+          <li>shanaqui</li>
+          <li>Dewines</li>
+          <li>Megan</li>
+          <li>Breadstrings</li>
+        </ul>
       </div>
-    </div><p v-html="$t('commGuidePara012')"></p><p v-html="$t('commGuidePara013')"></p><p>{{ $t('commGuidePara014') }}&nbsp;<em>lefnire, Slappybag, litenull, Shaner, Bobbyroberts99, wc8</em></p><h2 id="final">
+    </div>
+    <p v-html="$t('commGuidePara012')"></p>
+    <p v-html="$t('commGuidePara013')"></p>
+    <p>
+      {{ $t('commGuidePara014') }}&nbsp;
+      <em>lefnire, Slappybag, litenull, Shaner, Bobbyroberts99, wc8</em>
+    </p>
+    <h2 id="final">
       {{ $t('commGuideHeadingFinal') }}
-    </h2><p v-html="$t('commGuidePara067')"></p><p v-html="$t('commGuidePara068')"></p><h2 id="links">
+    </h2>
+    <p v-html="$t('commGuidePara067')"></p>
+    <p v-html="$t('commGuidePara068')"></p>
+    <h2 id="links">
       {{ $t('commGuideHeadingLinks') }}
-    </h2><ul><li v-html="$t('commGuideLink01')"></li><li v-html="$t('commGuideLink02')"></li><li v-html="$t('commGuideLink03')"></li><li v-html="$t('commGuideLink04')"></li><li v-html="$t('commGuideLink05')"></li><li v-html="$t('commGuideLink06')"></li><li v-html="$t('commGuideLink07')"></li></ul><p v-html="$t('commGuidePara069')"></p><ul class="list-2col list-unstyled">
-      <li>Breadstrings</li><li>Draayder</li><li>Kiwibot</li><li>Leephon</li><li>Lemoness</li><li>Luciferian</li><li>Revcleo</li><li>Shaner</li><li>Starsystemic</li><li>UncommonCriminal</li>
+    </h2>
+    <ul>
+      <li v-html="$t('commGuideLink01')"></li>
+      <li v-html="$t('commGuideLink02')"></li>
+      <li v-html="$t('commGuideLink03')"></li>
+      <li v-html="$t('commGuideLink04')"></li>
+      <li v-html="$t('commGuideLink05')"></li>
+      <li v-html="$t('commGuideLink06')"></li>
+      <li v-html="$t('commGuideLink07')"></li>
+    </ul>
+    <p v-html="$t('commGuidePara069')"></p>
+    <ul class="list-2col list-unstyled">
+      <li>Breadstrings</li>
+      <li>Draayder</li>
+      <li>Kiwibot</li>
+      <li>Leephon</li>
+      <li>Lemoness</li>
+      <li>Luciferian</li>
+      <li>Revcleo</li>
+      <li>Shaner</li>
+      <li>Starsystemic</li>
+      <li>UncommonCriminal</li>
     </ul>
   </div>
 </template>
diff --git a/website/client/src/components/static/contact.vue b/website/client/src/components/static/contact.vue
index 99a31a2c04..29087f2138 100644
--- a/website/client/src/components/static/contact.vue
+++ b/website/client/src/components/static/contact.vue
@@ -2,27 +2,50 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-6 offset-3">
-        <h1>{{ $t('contactUs') }}</h1><p>
+        <h1>{{ $t('contactUs') }}</h1>
+        <p>
           {{ $t('reportAccountProblems') }}
-          &colon;&nbsp;<a href="mailto:admin@habitica.com">admin&commat;habitica&period;com</a><br>{{ $t('reportBug') }}
-          &colon;&nbsp;<a
+          &colon;&nbsp;
+          <a href="mailto:admin@habitica.com">admin&commat;habitica&period;com</a>
+          <br>
+          {{ $t('reportBug') }}
+          &colon;&nbsp;
+          <a
             target="_blank"
             href="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac"
-          >Report a Bug guild</a>&nbsp;or&nbsp;<a
+          >Report a Bug guild</a>&nbsp;or&nbsp;
+          <a
             target="_blank"
             href="https://github.com/HabitRPG/habitica/issues?q=is%3Aopen"
-          >GitHub</a><span v-if="this.user"><br>{{ $t('reportCommunityIssues') }}
-            &colon;&nbsp;<a
-              href=""
+          >GitHub</a>
+          <span v-if="this.user">
+            <br>
+            {{ $t('reportCommunityIssues') }}
+            &colon;&nbsp;
+            <a
+              href
               @click.prevent="modForm()"
-            >{{ $t('contactForm') }}</a></span><br>{{ $t('subscriptionPaymentIssues') }}
-          &colon;&nbsp;<a href="mailto:admin@habitica.com">admin&commat;habitica&period;com</a><br>{{ $t('generalQuestionsSite') }}
-          &colon;&nbsp;<a
+            >{{ $t('contactForm') }}</a>
+          </span>
+          <br>
+          {{ $t('subscriptionPaymentIssues') }}
+          &colon;&nbsp;
+          <a href="mailto:admin@habitica.com">admin&commat;habitica&period;com</a>
+          <br>
+          {{ $t('generalQuestionsSite') }}
+          &colon;&nbsp;
+          <a
             target="_blank"
             href="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
-          >Habitica Help guild</a><br>{{ $t('businessInquiries') }}
-          &colon;&nbsp;<a href="mailto:admin@habitica.com">admin@habitica.com</a><br>{{ $t('merchandiseInquiries') }}
-          &colon;&nbsp;<a href="mailto:admin@habitica.com">admin&commat;habitica&period;com</a>
+          >Habitica Help guild</a>
+          <br>
+          {{ $t('businessInquiries') }}
+          &colon;&nbsp;
+          <a href="mailto:admin@habitica.com">admin@habitica.com</a>
+          <br>
+          {{ $t('merchandiseInquiries') }}
+          &colon;&nbsp;
+          <a href="mailto:admin@habitica.com">admin&commat;habitica&period;com</a>
         </p>
       </div>
     </div>
diff --git a/website/client/src/components/static/faq.vue b/website/client/src/components/static/faq.vue
index 78bac7a98f..ad4ac66354 100644
--- a/website/client/src/components/static/faq.vue
+++ b/website/client/src/components/static/faq.vue
@@ -7,7 +7,8 @@
       <div class="col-12 col-md-6 offset-md-3">
         <h1 id="faq-heading">
           {{ $t('frequentlyAskedQuestions') }}
-        </h1><div
+        </h1>
+        <div
           v-for="(heading, index) in headings"
           :key="index"
           class="faq-question"
@@ -19,7 +20,8 @@
             @click="handleClick($event)"
           >
             {{ $t(`faqQuestion${index}`) }}
-          </h2><b-collapse
+          </h2>
+          <b-collapse
             :id="heading"
             :visible="isVisible(heading)"
             accordion="faq"
@@ -30,7 +32,9 @@
               class="card-body"
             ></div>
           </b-collapse>
-        </div><hr><p v-markdown="$t('webFaqStillNeedHelp')"></p>
+        </div>
+        <hr>
+        <p v-markdown="$t('webFaqStillNeedHelp')"></p>
       </div>
     </div>
   </div>
diff --git a/website/client/src/components/static/features.vue b/website/client/src/components/static/features.vue
index f61c3d8377..706ae64305 100644
--- a/website/client/src/components/static/features.vue
+++ b/website/client/src/components/static/features.vue
@@ -4,64 +4,106 @@
       <div class="col-md-12">
         <h1>{{ $t('marketing1Header') }}</h1>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-md-6">
-        <img src="~@/assets/images/marketing/screenshot.png"><h2>{{ $t('marketing1Lead1Title') }}</h2><p>{{ $t('marketing1Lead1') }}</p>
-      </div><div class="col-md-6">
-        <img src="~@/assets/images/marketing/gear.png"><h2>{{ $t('marketing1Lead2Title') }}</h2><p>{{ $t('marketing1Lead2') }}</p><img
+        <img src="~@/assets/images/marketing/screenshot.png">
+        <h2>{{ $t('marketing1Lead1Title') }}</h2>
+        <p>{{ $t('marketing1Lead1') }}</p>
+      </div>
+      <div class="col-md-6">
+        <img src="~@/assets/images/marketing/gear.png">
+        <h2>{{ $t('marketing1Lead2Title') }}</h2>
+        <p>{{ $t('marketing1Lead2') }}</p>
+        <img
           src="~@/assets/images/marketing/drops.png"
           style="max-height: 200px;"
-        ><h2>{{ $t('marketing1Lead3Title') }}</h2><p>{{ $t('marketing1Lead3') }}</p>
+        >
+        <h2>{{ $t('marketing1Lead3Title') }}</h2>
+        <p>{{ $t('marketing1Lead3') }}</p>
       </div>
-    </div><hr><div class="row">
+    </div>
+    <hr>
+    <div class="row">
       <div class="col-md-12">
         <h1>{{ $t('marketing2Header') }}</h1>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-md-6">
-        <img src="~@/assets/images/marketing/guild.png"><h2>{{ $t('marketing2Lead1Title') }}</h2><p>{{ $t('marketing2Lead1') }}</p><img src="~@/assets/images/marketing/vice3.png"><h2>{{ $t('marketing2Lead2Title') }}</h2><p v-markdown="$t('marketing2Lead2')"></p>
-      </div><div class="col-md-6">
-        <img src="~@/assets/images/marketing/challenge.png"><h2>{{ $t('marketing2Lead3Title') }}</h2><p>{{ $t('marketing2Lead3') }}</p>
+        <img src="~@/assets/images/marketing/guild.png">
+        <h2>{{ $t('marketing2Lead1Title') }}</h2>
+        <p>{{ $t('marketing2Lead1') }}</p>
+        <img src="~@/assets/images/marketing/vice3.png">
+        <h2>{{ $t('marketing2Lead2Title') }}</h2>
+        <p v-markdown="$t('marketing2Lead2')"></p>
       </div>
-    </div><hr><div class="row">
+      <div class="col-md-6">
+        <img src="~@/assets/images/marketing/challenge.png">
+        <h2>{{ $t('marketing2Lead3Title') }}</h2>
+        <p>{{ $t('marketing2Lead3') }}</p>
+      </div>
+    </div>
+    <hr>
+    <div class="row">
       <div class="col-md-12">
         <h1>{{ $t('marketing3Header') }}</h1>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-md-6">
-        <img src="~@/assets/images/marketing/android_iphone.png"><h2>{{ $t('footerMobile') }}</h2><p v-markdown="$t('marketing3Lead1')"></p>
-      </div><div class="col-md-6">
-        <img src="~@/assets/images/marketing/integration.png"><h2>{{ $t('marketing3Lead2Title') }}</h2><p v-markdown="$t('marketing3Lead2')"></p>
+        <img src="~@/assets/images/marketing/android_iphone.png">
+        <h2>{{ $t('footerMobile') }}</h2>
+        <p v-markdown="$t('marketing3Lead1')"></p>
       </div>
-    </div><hr><div class="row">
+      <div class="col-md-6">
+        <img src="~@/assets/images/marketing/integration.png">
+        <h2>{{ $t('marketing3Lead2Title') }}</h2>
+        <p v-markdown="$t('marketing3Lead2')"></p>
+      </div>
+    </div>
+    <hr>
+    <div class="row">
       <div class="col-md-12">
         <h1>{{ $t('marketing4Header') }}</h1>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-md-6">
         <div class="media">
-          <img src="~@/assets/images/marketing/education.png"><div class="media-body">
-            <h2>{{ $t('marketing4Lead1Title') }}</h2><p>{{ $t('marketing4Lead1') }}</p>
-          </div>
-        </div>
-      </div><div class="col-md-6">
-        <div class="media">
-          <img src="~@/assets/images/marketing/wellness.png"><div class="media-body">
-            <h2>{{ $t('marketing4Lead2Title') }}</h2><p>{{ $t('marketing4Lead2') }}</p>
+          <img src="~@/assets/images/marketing/education.png">
+          <div class="media-body">
+            <h2>{{ $t('marketing4Lead1Title') }}</h2>
+            <p>{{ $t('marketing4Lead1') }}</p>
           </div>
         </div>
       </div>
-    </div><div class="row">
+      <div class="col-md-6">
+        <div class="media">
+          <img src="~@/assets/images/marketing/wellness.png">
+          <div class="media-body">
+            <h2>{{ $t('marketing4Lead2Title') }}</h2>
+            <p>{{ $t('marketing4Lead2') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
       <div class="col-md-6 offset-md-3">
-        <h2>{{ $t('marketing4Lead3Title') }}</h2><img src="~@/assets/images/marketing/lefnire.png"><p class="span">
-          <span>{{ $t('marketing4Lead3-1') }}</span><button
+        <h2>{{ $t('marketing4Lead3Title') }}</h2>
+        <img src="~@/assets/images/marketing/lefnire.png">
+        <p class="span">
+          <span>{{ $t('marketing4Lead3-1') }}</span>
+          <button
             class="btn btn-primary"
             @click="playButtonClick()"
           >
             {{ $t('playButton') }}
           </button>
-        </p><p class="span">
-          <span>{{ $t('marketing4Lead3-2') }}</span><a
+        </p>
+        <p class="span">
+          <span>{{ $t('marketing4Lead3-2') }}</span>
+          <a
             class="btn btn-primary"
             href="/static/plans"
             target="_blank"
diff --git a/website/client/src/components/static/groupPlans.vue b/website/client/src/components/static/groupPlans.vue
index f7b88a2da3..c58b17f56b 100644
--- a/website/client/src/components/static/groupPlans.vue
+++ b/website/client/src/components/static/groupPlans.vue
@@ -1,73 +1,107 @@
 <template>
   <div class="group-plan-static text-center">
-    <amazon-payments-modal /><div class="container">
+    <amazon-payments-modal />
+    <div class="container">
       <div class="row top">
-        <div class="top-left"></div><div class="col-6 offset-3">
+        <div class="top-left"></div>
+        <div class="col-6 offset-3">
           <img
             class="party"
             src="../../assets/images/group-plans-static/party@3x.png"
-          ><h1>{{ $t('groupPlanTitle') }}</h1><p>{{ $t('groupPlanDesc') }}</p><div class="pricing">
-            <span>Just</span><span class="number">$9</span><span class="bold">per month +</span><span class="number">$3</span><span class="bold">per member*</span>
-          </div><div class="text-center">
+          >
+          <h1>{{ $t('groupPlanTitle') }}</h1>
+          <p>{{ $t('groupPlanDesc') }}</p>
+          <div class="pricing">
+            <span>Just</span>
+            <span class="number">$9</span>
+            <span class="bold">per month +</span>
+            <span class="number">$3</span>
+            <span class="bold">per member*</span>
+          </div>
+          <div class="text-center">
             <button
               class="btn btn-primary cta-button"
               @click="goToNewGroupPage()"
             >
               {{ $t('getStarted') }}
             </button>
-          </div><small>{{ $t('billedMonthly') }}</small>
-        </div><div class="top-right"></div>
-      </div><div class="row">
+          </div>
+          <small>{{ $t('billedMonthly') }}</small>
+        </div>
+        <div class="top-right"></div>
+      </div>
+      <div class="row">
         <div class="text-col col-12 col-md-6 text-left">
-          <h2>{{ $t('teamBasedTasksList') }}</h2><p>{{ $t('teamBasedTasksListDesc') }}</p>
-        </div><div class="col-12 col-md-6">
+          <h2>{{ $t('teamBasedTasksList') }}</h2>
+          <p>{{ $t('teamBasedTasksListDesc') }}</p>
+        </div>
+        <div class="col-12 col-md-6">
           <div
             class="team-based"
             v-html="svg.teamBased"
           ></div>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-12 col-md-6">
           <div
             class="group-management"
             v-html="svg.groupManagement"
           ></div>
-        </div><div class="text-col col-12 col-md-6 text-left">
-          <h2>{{ $t('groupManagementControls') }}</h2><p>{{ $t('groupManagementControlsDesc') }}</p>
         </div>
-      </div><div class="row">
+        <div class="text-col col-12 col-md-6 text-left">
+          <h2>{{ $t('groupManagementControls') }}</h2>
+          <p>{{ $t('groupManagementControlsDesc') }}</p>
+        </div>
+      </div>
+      <div class="row">
         <div class="col-12 col-md-6 offset-md-3 text-center">
           <img
             class="big-gem"
             src="../../assets/images/group-plans-static/big-gem@3x.png"
-          ><h2>{{ $t('inGameBenefits') }}</h2><p>{{ $t('inGameBenefitsDesc') }}</p>
+          >
+          <h2>{{ $t('inGameBenefits') }}</h2>
+          <p>{{ $t('inGameBenefitsDesc') }}</p>
         </div>
-      </div><div class="row">
-        <div class="bot-left"></div><div class="col-6 offset-3">
+      </div>
+      <div class="row">
+        <div class="bot-left"></div>
+        <div class="col-6 offset-3">
           <h2 class="purple">
             {{ $t('inspireYourParty') }}
-          </h2><div class="pricing">
-            <span>Just</span><span class="number">$9</span><span class="bold">per month +</span><span class="number">$3</span><span class="bold">per member*</span>
-          </div><div class="text-center">
+          </h2>
+          <div class="pricing">
+            <span>Just</span>
+            <span class="number">$9</span>
+            <span class="bold">per month +</span>
+            <span class="number">$3</span>
+            <span class="bold">per member*</span>
+          </div>
+          <div class="text-center">
             <button
               class="btn btn-primary cta-button"
               @click="goToNewGroupPage()"
             >
               {{ $t('getStarted') }}
             </button>
-          </div><small>{{ $t('billedMonthly') }}</small>
-        </div><div class="bot-right"></div>
+          </div>
+          <small>{{ $t('billedMonthly') }}</small>
+        </div>
+        <div class="bot-right"></div>
       </div>
-    </div><b-modal
+    </div>
+    <b-modal
       id="group-plan"
-      title=""
+      title
       size="md"
       :hide-footer="true"
       :hide-header="true"
     >
       <div v-if="modalPage === 'account'">
-        <h2>{{ $t('letsMakeAccount') }}</h2><auth-form @authenticate="authenticate()" />
-      </div><div v-if="modalPage === 'purchaseGroup'">
+        <h2>{{ $t('letsMakeAccount') }}</h2>
+        <auth-form @authenticate="authenticate()" />
+      </div>
+      <div v-if="modalPage === 'purchaseGroup'">
         <create-group-modal-pages />
       </div>
     </b-modal>
diff --git a/website/client/src/components/static/header.vue b/website/client/src/components/static/header.vue
index 992a45e1ce..696a8a2460 100644
--- a/website/client/src/components/static/header.vue
+++ b/website/client/src/components/static/header.vue
@@ -9,13 +9,15 @@
           v-if="this.$route.name === 'plans'"
           class="logo svg-icon"
           v-html="icons.purpleLogo"
-        ></div><div
+        ></div>
+        <div
           v-else
           class="logo svg-icon"
           v-html="icons.logo"
         ></div>
       </router-link>
-    </div><div class="collapse navbar-collapse">
+    </div>
+    <div class="collapse navbar-collapse">
       <ul
         v-if="$route.name !== 'home'"
         class="navbar-nav mr-auto"
@@ -29,7 +31,8 @@
             v-once
             class="nav-link"
           >{{ $t('companyAbout') }}</a>
-        </router-link><router-link
+        </router-link>
+        <router-link
           class="nav-item"
           tag="li"
           to="/static/plans"
@@ -38,19 +41,22 @@
             v-once
             class="nav-link"
           >{{ $t('groupPlans') }}</a>
-        </router-link><li class="nav-item">
+        </router-link>
+        <li class="nav-item">
           <a
             class="nav-link"
             href="https://habitica.wordpress.com/"
             target="_blank"
           >{{ $t('companyBlog') }}</a>
-        </li><li class="nav-item">
+        </li>
+        <li class="nav-item">
           <a
             class="nav-link"
             href="http://blog.habitrpg.com/"
             target="_blank"
           >{{ $t('tumblr') }}</a>
-        </li><router-link
+        </li>
+        <router-link
           class="nav-item"
           tag="li"
           to="/static/press-kit"
@@ -59,7 +65,8 @@
             v-once
             class="nav-link"
           >{{ $t('presskit') }}</a>
-        </router-link><router-link
+        </router-link>
+        <router-link
           class="nav-item"
           tag="li"
           to="/static/contact"
@@ -69,7 +76,8 @@
             class="nav-link"
           >{{ $t('contactUs') }}</a>
         </router-link>
-      </ul><ul
+      </ul>
+      <ul
         v-else
         class="navbar-nav mr-auto"
       >
@@ -82,22 +90,26 @@
             v-once
             class="nav-link"
           >{{ $t('getStarted') }}</a>
-        </router-link><li class="nav-item">
+        </router-link>
+        <li class="nav-item">
           <a
             class="nav-link"
             @click="scrollToMobileApp"
           >{{ $t('mobileApps') }}</a>
-        </li><li class="nav-item dropdown">
+        </li>
+        <li class="nav-item dropdown">
           <a
             v-once
             class="nav-link dropdown-toggle"
-          >{{ $t('learnMore') }}</a><div class="dropdown-menu">
+          >{{ $t('learnMore') }}</a>
+          <div class="dropdown-menu">
             <router-link
               class="dropdown-item"
               to="/static/faq"
             >
               {{ $t('faq') }}
-            </router-link><router-link
+            </router-link>
+            <router-link
               class="dropdown-item"
               to="/static/plans"
             >
@@ -105,14 +117,16 @@
             </router-link>
           </div>
         </li>
-      </ul><button
+      </ul>
+      <button
         v-if="$route.name !== 'home'"
         class="btn btn-primary pull-right"
         @click="playButtonClick()"
       >
         {{ $t('playButtonFull') }}
       </button>
-    </div><router-link
+    </div>
+    <router-link
       v-if="$route.name === 'home'"
       class="btn btn-primary login-button pull-right"
       to="/login"
diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
index 0b643cf293..1f0151d437 100644
--- a/website/client/src/components/static/home.vue
+++ b/website/client/src/components/static/home.vue
@@ -3,7 +3,12 @@
     id="front"
     class="static-view"
   >
-    <noscript class="banner">{{ $t('jsDisabledHeadingFull') }}<br/><a href="http://www.enable-javascript.com/" target="_blank">{{ $t('jsDisabledLink') }}</a></noscript><div
+    <noscript class="banner">
+      {{ $t('jsDisabledHeadingFull') }}
+      <br />
+      <a href="http://www.enable-javascript.com/" target="_blank">{{ $t('jsDisabledLink') }}</a>
+    </noscript>
+    <div
       id="intro-signup"
       class="purple-1"
     >
@@ -13,13 +18,17 @@
             <img
               src="~@/assets/images/home/home-main@3x.png"
               width="357px"
-            ><h1>{{ $t('motivateYourself') }}</h1><p class="section-main">
+            >
+            <h1>{{ $t('motivateYourself') }}</h1>
+            <p class="section-main">
               {{ $t('timeToGetThingsDone', {userCountInMillions}) }}
             </p>
-          </div><div class="col-12 col-md-6 col-lg-6">
+          </div>
+          <div class="col-12 col-md-6 col-lg-6">
             <h3 class="text-center">
               {{ $t('singUpForFree') }}
-            </h3><div class="text-center">
+            </h3>
+            <div class="text-center">
               <button
                 class="social-button"
                 @click="socialAuth('facebook')"
@@ -27,66 +36,79 @@
                 <div
                   class="svg-icon social-icon"
                   v-html="icons.facebookIcon"
-                ></div><span>{{ $t('signUpWithSocial', {social: 'Facebook'}) }}</span>
-              </button><button
+                ></div>
+                <span>{{ $t('signUpWithSocial', {social: 'Facebook'}) }}</span>
+              </button>
+              <button
                 class="social-button"
                 @click="socialAuth('google')"
               >
                 <div
                   class="svg-icon social-icon"
                   v-html="icons.googleIcon"
-                ></div><span>{{ $t('signUpWithSocial', {social: 'Google'}) }}</span>
+                ></div>
+                <span>{{ $t('signUpWithSocial', {social: 'Google'}) }}</span>
               </button>
-            </div><div class="strike">
+            </div>
+            <div class="strike">
               <span>{{ $t('or') }}</span>
-            </div><div
+            </div>
+            <div
               class="form"
               @keyup.enter="register()"
             >
               <p class="form-text">
                 {{ $t('usernameLimitations') }}
-              </p><input
+              </p>
+              <input
                 id="usernameInput"
                 v-model="username"
                 class="form-control"
                 type="text"
                 :placeholder="$t('username')"
                 :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
-              ><div
+              >
+              <div
                 v-for="issue in usernameIssues"
                 class="input-error"
               >
                 {{ issue }}
-              </div><input
+              </div>
+              <input
                 v-model="email"
                 class="form-control"
                 type="email"
                 :placeholder="$t('email')"
                 :class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
-              ><input
+              >
+              <input
                 v-model="password"
                 class="form-control"
                 type="password"
                 :placeholder="$t('password')"
                 :class="{'input-valid': password.length > 3}"
-              ><input
+              >
+              <input
                 v-model="passwordConfirm"
                 class="form-control"
                 type="password"
                 :placeholder="$t('confirmPassword')"
                 :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
-              ><p
+              >
+              <p
                 v-once
                 class="form-text"
                 v-html="$t('termsAndAgreement')"
-              ></p><button
+              ></p>
+              <button
                 class="sign-up"
                 @click="register()"
               >
                 {{ $t('signup') }}
               </button>
             </div>
-          </div><div class="col-12">
+          </div>
+          <div class="col-12">
             <div
               class="spacer svg-icon"
               v-html="icons.spacer"
@@ -94,7 +116,8 @@
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       id="gamify-life"
       class="purple-2"
     >
@@ -103,42 +126,55 @@
           class="pixel-horizontal svg-icon"
           v-html="icons.pixelHorizontal"
         ></div>
-      </div><div class="container">
+      </div>
+      <div class="container">
         <div class="row">
           <div class="col-12 col-sm-6 col-md-6 col-lg-6 offset-sm-3 text-center">
-            <h2>{{ $t('gamifyYourLife') }}</h2><p class="section-main">
+            <h2>{{ $t('gamifyYourLife') }}</h2>
+            <p class="section-main">
               {{ $t('aboutHabitica') }}
             </p>
           </div>
-        </div><div class="row">
+        </div>
+        <div class="row">
           <div class="col-12 col-md-4">
             <img
               class="track-habits"
               src="~@/assets/images/home/track-habits@3x.png"
               width="354px"
               height="228px"
-            ><strong>{{ $t('trackYourGoals') }}</strong><p>{{ $t('trackYourGoalsDesc') }}</p>
-          </div><div class="col-12 col-md-4">
+            >
+            <strong>{{ $t('trackYourGoals') }}</strong>
+            <p>{{ $t('trackYourGoalsDesc') }}</p>
+          </div>
+          <div class="col-12 col-md-4">
             <img
               src="~@/assets/images/home/earn-rewards@3x.png"
               width="316px"
               height="244px"
-            ><strong>{{ $t('earnRewards') }}</strong><p>{{ $t('earnRewardsDesc') }}</p>
-          </div><div class="col-12 col-md-4">
+            >
+            <strong>{{ $t('earnRewards') }}</strong>
+            <p>{{ $t('earnRewardsDesc') }}</p>
+          </div>
+          <div class="col-12 col-md-4">
             <img
               src="~@/assets/images/home/battle-monsters@3x.png"
               width="303px"
               height="244px"
-            ><strong>{{ $t('battleMonsters') }}</strong><p>{{ $t('battleMonstersDesc') }}</p>
+            >
+            <strong>{{ $t('battleMonsters') }}</strong>
+            <p>{{ $t('battleMonstersDesc') }}</p>
           </div>
         </div>
-      </div><div class="col-12">
+      </div>
+      <div class="col-12">
         <div
           class="spacer svg-icon"
           v-html="icons.spacer"
         ></div>
       </div>
-    </div><div
+    </div>
+    <div
       id="use-cases"
       class="purple-2"
     >
@@ -147,39 +183,51 @@
           <div class="col-12">
             <h2>{{ $t('playersUseToImprove') }}</h2>
           </div>
-        </div><div class="row">
+        </div>
+        <div class="row">
           <div class="col-12 col-sm-4">
             <img
               src="~@/assets/images/home/health-fitness@3x.png"
               width="300px"
               height="300px"
-            ><strong>{{ $t('healthAndFitness') }}</strong><p>{{ $t('healthAndFitnessDesc') }}</p>
-          </div><div class="col-12 col-sm-4">
+            >
+            <strong>{{ $t('healthAndFitness') }}</strong>
+            <p>{{ $t('healthAndFitnessDesc') }}</p>
+          </div>
+          <div class="col-12 col-sm-4">
             <img
               src="~@/assets/images/home/school-work@3x.png"
               width="300px"
               height="300px"
-            ><strong>{{ $t('schoolAndWork') }}</strong><p>{{ $t('schoolAndWorkDesc') }}</p>
-          </div><div class="col-12 col-sm-4">
+            >
+            <strong>{{ $t('schoolAndWork') }}</strong>
+            <p>{{ $t('schoolAndWorkDesc') }}</p>
+          </div>
+          <div class="col-12 col-sm-4">
             <img
               src="~@/assets/images/home/much-more@3x.png"
               width="300px"
               height="300px"
-            ><strong>{{ $t('muchmuchMore') }}</strong><p>{{ $t('muchmuchMoreDesc') }}</p>
+            >
+            <strong>{{ $t('muchmuchMore') }}</strong>
+            <p>{{ $t('muchmuchMoreDesc') }}</p>
           </div>
         </div>
-      </div><div class="col-12">
+      </div>
+      <div class="col-12">
         <div
           class="spacer svg-icon"
           v-html="icons.spacer"
         ></div>
-      </div><div class="container-fluid">
+      </div>
+      <div class="container-fluid">
         <div
           class="pixel-horizontal-2 svg-icon"
           v-html="icons.pixelHorizontal2"
         ></div>
       </div>
-    </div><div
+    </div>
+    <div
       id="level-up-anywhere"
       class="purple-3"
     >
@@ -187,13 +235,17 @@
         <div class="row">
           <div class="col-12 col-md-6 col-lg-6">
             <div class="iphones"></div>
-          </div><div class="col-12 col-md-6 col-lg-6 text-column">
-            <h2>{{ $t('levelUpAnywhere') }}</h2><p>{{ $t('levelUpAnywhereDesc') }}</p><a
+          </div>
+          <div class="col-12 col-md-6 col-lg-6 text-column">
+            <h2>{{ $t('levelUpAnywhere') }}</h2>
+            <p>{{ $t('levelUpAnywhereDesc') }}</p>
+            <a
               class="app svg-icon"
               href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
               target="_blank"
               v-html="icons.googlePlay"
-            ></a><a
+            ></a>
+            <a
               class="app svg-icon"
               href="https://itunes.apple.com/us/app/habitica-gamified-task-manager/id994882113?mt=8"
               target="_blank"
@@ -201,13 +253,15 @@
             ></a>
           </div>
         </div>
-      </div><div class="container-fluid">
+      </div>
+      <div class="container-fluid">
         <div
           class="pixel-horizontal-3 svg-icon"
           v-html="icons.pixelHorizontal3"
         ></div>
       </div>
-    </div><div
+    </div>
+    <div
       id="call-to-action"
       class="purple-4"
     >
@@ -216,7 +270,8 @@
           <h3 class="col-12">
             {{ $t('joinMany') }}
           </h3>
-        </div><div class="row">
+        </div>
+        <div class="row">
           <div class="col-12 text-center">
             <button
               class="btn btn-primary join-button"
@@ -225,42 +280,52 @@
               {{ $t('joinToday') }}
             </button>
           </div>
-        </div><div class="row featured">
+        </div>
+        <div class="row featured">
           <div class="col-12 text-center">
             <strong>{{ $t('featuredIn') }}</strong>
           </div>
         </div>
-      </div><div class="container-fluid featured">
+      </div>
+      <div class="container-fluid featured">
         <div class="row">
           <div class="col-12 text-center">
             <div
               class="lifehacker svg-icon"
               v-html="icons.lifehacker"
-            ></div><div
+            ></div>
+            <div
               class="thenewyorktimes svg-icon"
               v-html="icons.thenewyorktimes"
-            ></div><div
+            ></div>
+            <div
               class="makeuseof svg-icon"
               v-html="icons.makeuseof"
-            ></div><div
+            ></div>
+            <div
               class="forbes svg-icon"
               v-html="icons.forbes"
-            ></div><div
+            ></div>
+            <div
               class="cnet svg-icon"
               v-html="icons.cnet"
-            ></div><div
+            ></div>
+            <div
               class="kickstarter svg-icon"
               v-html="icons.kickstarter"
-            ></div><div
+            ></div>
+            <div
               class="fast-company svg-icon"
               v-html="icons.fastCompany"
-            ></div><div
+            ></div>
+            <div
               class="discover svg-icon"
               v-html="icons.discover"
             ></div>
           </div>
         </div>
-      </div><div class="container-fluid">
+      </div>
+      <div class="container-fluid">
         <div class="row seamless_stars_varied_opacity_repeat"></div>
       </div>
     </div>
diff --git a/website/client/src/components/static/merch.vue b/website/client/src/components/static/merch.vue
index 7842a2b704..d8ea62ea3b 100644
--- a/website/client/src/components/static/merch.vue
+++ b/website/client/src/components/static/merch.vue
@@ -2,7 +2,9 @@
   <div class="container-fluid">
     <div class="row">
       <div class="col-md-6 offset-3">
-        <h1>{{ $t('merch') }}</h1><!-- @TODO: Visual experience: Separate each merch items with new line? Or to show items in a table?--><div
+        <h1>{{ $t('merch') }}</h1>
+        <!-- @TODO: Visual experience: Separate each merch items with new line? Or to show items in a table?-->
+        <div
           v-for="(merchant, index) in merchants"
           class="col-lg-6 col-md-6 col-sm-12"
         >
@@ -10,17 +12,23 @@
             <img
               v-if="merchant.logo"
               :src="`/static/merch/${merchant.key}-logo.png`"
-            ><h2 v-else>
+            >
+            <h2 v-else>
               {{ merchant.name }}
-            </h2><div>
+            </h2>
+            <div>
               <a
                 :href="merchant.link"
                 target="_blank"
-              ><img
-                class="img-rendering-auto"
-                :src="`/static/merch/${merchant.key}.png`"
-              ></a>
-            </div><p>{{ $t('merch-' + merchant.key + '-summary') }}</p><a
+              >
+                <img
+                  class="img-rendering-auto"
+                  :src="`/static/merch/${merchant.key}.png`"
+                >
+              </a>
+            </div>
+            <p>{{ $t('merch-' + merchant.key + '-summary') }}</p>
+            <a
               class="btn btn-primary"
               :href="merchant.link"
               target="_blank"
diff --git a/website/client/src/components/static/overview.vue b/website/client/src/components/static/overview.vue
index 9181b4ed31..6ae4476213 100644
--- a/website/client/src/components/static/overview.vue
+++ b/website/client/src/components/static/overview.vue
@@ -2,9 +2,16 @@
   <div class="container-fluid static-view">
     <div class="row">
       <div class="col-md-6 offset-3">
-        <h1>{{ $t('overview') }}</h1><p>{{ $t('needTips') }}</p><div v-for="step in stepsNum">
-          <h3>{{ $t('step'+step) }}</h3><p v-markdown="$t('webStep'+step+'Text', stepVars[step])"></p><hr>
-        </div><p v-markdown="$t('overviewQuestions', {faqUrl: '/static/faq/', helpGuildUrl: '/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a'})"></p>
+        <h1>{{ $t('overview') }}</h1>
+        <p>{{ $t('needTips') }}</p>
+        <div v-for="step in stepsNum">
+          <h3>{{ $t('step'+step) }}</h3>
+          <p v-markdown="$t('webStep'+step+'Text', stepVars[step])"></p>
+          <hr>
+        </div>
+        <p
+          v-markdown="$t('overviewQuestions', {faqUrl: '/static/faq/', helpGuildUrl: '/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a'})"
+        ></p>
       </div>
     </div>
   </div>
diff --git a/website/client/src/components/static/pressKit.vue b/website/client/src/components/static/pressKit.vue
index 3ea661315e..42519ba3b2 100644
--- a/website/client/src/components/static/pressKit.vue
+++ b/website/client/src/components/static/pressKit.vue
@@ -1,21 +1,27 @@
 <template>
   <div class="container-fluid">
-    <h1>{{ $t('presskit') }}</h1><p>{{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}</p><p>
+    <h1>{{ $t('presskit') }}</h1>
+    <p>{{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}</p>
+    <p>
       <a
         class="btn btn-lg btn-success"
         href="/static/presskit/presskit.zip"
       >presskit.zip</a>
-    </p><div v-for="(images, category) in imgs">
-      <h2>{{ $t('pk' + category) }}</h2><div v-if="Array.isArray(images)">
+    </p>
+    <div v-for="(images, category) in imgs">
+      <h2>{{ $t('pk' + category) }}</h2>
+      <div v-if="Array.isArray(images)">
         <div v-for="img in images">
           <img
             class="img-fluid img-rendering-auto press-img"
             :src="`/static/presskit/${category}/${img}`"
           >
         </div>
-      </div><div v-else>
+      </div>
+      <div v-else>
         <div v-for="(images, secondaryCategory) in images">
-          <h3>{{ $t('pk' + secondaryCategory) }}</h3><div v-for="img in images">
+          <h3>{{ $t('pk' + secondaryCategory) }}</h3>
+          <div v-for="img in images">
             <img
               class="img-fluid img-rendering-auto press-img"
               :src="`/static/presskit/${category}/${secondaryCategory}/${img}`"
@@ -23,7 +29,9 @@
           </div>
         </div>
       </div>
-    </div><h1>{{ $t('FAQ') }}</h1><div
+    </div>
+    <h1>{{ $t('FAQ') }}</h1>
+    <div
       id="faq"
       role="tablist"
     >
@@ -36,7 +44,8 @@
           tabindex="0"
           role="button"
           v-html="$t(QA.question)"
-        ></h2><b-collapse
+        ></h2>
+        <b-collapse
           :id="QA.question"
           accordion="pkAccordian"
           role="tabpanel"
@@ -44,7 +53,8 @@
           <p v-html="$t(QA.answer)"></p>
         </b-collapse>
       </div>
-    </div><p>{{ $t('pkMoreQuestions') }}</p>
+    </div>
+    <p>{{ $t('pkMoreQuestions') }}</p>
   </div>
 </template>
 
diff --git a/website/client/src/components/static/privacy.vue b/website/client/src/components/static/privacy.vue
index e9909aac26..2f517bfb16 100644
--- a/website/client/src/components/static/privacy.vue
+++ b/website/client/src/components/static/privacy.vue
@@ -1,27 +1,42 @@
 <template>
   <div class="container-fluid">
-    <h1>Privacy Policy</h1><p class="pagemeta">
-      Last updated July 27, 2015<br><small>(Corrected grammar errors and updated company name)</small><br><br>
-    </p><p>
-      <strong>PLEASE READ THIS PRIVACY POLICY CAREFULLY&period;</strong><br>By accessing or otherwise using habitica&period;com or any sub domains thereto &lpar;'the Sites'&rpar;&comma;
+    <h1>Privacy Policy</h1>
+    <p class="pagemeta">
+      Last updated July 27, 2015
+      <br>
+      <small>(Corrected grammar errors and updated company name)</small>
+      <br>
+      <br>
+    </p>
+    <p>
+      <strong>PLEASE READ THIS PRIVACY POLICY CAREFULLY&period;</strong>
+      <br>By accessing or otherwise using habitica&period;com or any sub domains thereto &lpar;'the Sites'&rpar;&comma;
       or using a habitica&period;com or Habitica application on a mobile device &lpar;'the Applications'&rpar;&comma;
       you agree to be bound contractually by this Privacy Policy&period; Individually
       or collectively&comma; the Applications and the Sites may be referred to as
       the 'Services&period;'
-    </p><p>
+    </p>
+    <p>
       To review material modifications and their effective dates scroll
       to the bottom of the page&period;
-    </p><p>
-      <strong>1&period; Privacy Statement&semi; Collection of Personal
-        Information&period;</strong><br>1&period;1 HabitRPG, Inc. owns and operates this business&period; All
+    </p>
+    <p>
+      <strong>
+        1&period; Privacy Statement&semi; Collection of Personal
+        Information&period;
+      </strong>
+      <br>1&period;1 HabitRPG, Inc. owns and operates this business&period; All
       references to 'we'&comma; 'us'&comma; shall be construed to mean HabitRPG, Inc.&period;
-    </p><p>
+    </p>
+    <p>
       1&period;2 We understand that visitors to this website are concerned
       about the privacy of information&period; The following describes our privacy
       policy regarding information&comma; including personal information&comma; that we
       collect through this website&period;
-    </p><p>
-      <strong>2&period; Modification of Privacy Policy&period;</strong><br>We reserve the right to modify this Privacy Policy at any time&comma;
+    </p>
+    <p>
+      <strong>2&period; Modification of Privacy Policy&period;</strong>
+      <br>We reserve the right to modify this Privacy Policy at any time&comma;
       and without prior notice&comma; by posting an amended Privacy Policy that is
       always accessible by clicking on the 'Privacy Policy' link on this
       site&apos;s home page&period; Your continued use of this site indicates your
@@ -33,8 +48,10 @@
       use or disclosure of the personal information previously disclosed by
       you&comma; we will obtain your consent before implementing such revisions with
       respect to such information&period;
-    </p><p>
-      <strong>3&period; Collection of Anonymous&comma; Passive Information&period;</strong><br>We reserve the right to monitor your use of the services&period; As you
+    </p>
+    <p>
+      <strong>3&period; Collection of Anonymous&comma; Passive Information&period;</strong>
+      <br>We reserve the right to monitor your use of the services&period; As you
       navigate through the services&comma; certain anonymous information may be
       passively collected &lpar;that is&comma; gathered without your actively providing
       the information&rpar; using various technologies&comma; such as cookies&comma; Internet
@@ -42,14 +59,16 @@
       logs&comma; clickstream&rpar;&period; The following is a listing and a brief explanation
       of passive information collection methodologies which we may use from
       time to time to better understand how the Services are being used&period;
-    </p><p>
+    </p>
+    <p>
       3&period;1 A 'cookie' is a text file that this site sends to your
       browser in the form of a text file The information generated by the
       cookie about your use of this site &lpar;including your IP address&rpar; will be
       transmitted to and stored&period; Most browsers automatically accept cookies&comma;
       but they usually can be modified to decline cookies if you prefer&semi;
       however&comma; certain features of this site might not work without cookies&period;
-    </p><p>
+    </p>
+    <p>
       3&period;2 'Session' cookies are temporary bits of information that are
       used to improve navigation&comma; block visitors from providing information
       where inappropriate &lpar;the Services 'remembers' previous entries of age or
@@ -57,7 +76,8 @@
       subsequent changes&rpar;&comma; and collect aggregate statistical information on
       the Services&period; They are erased once you exit your Web browser or
       otherwise turn off your computer&period;
-    </p><p>
+    </p>
+    <p>
       3&period;3 'Persistent' cookies are more permanent bits of information
       that are placed on the hard drive of your computer and stay there unless
       you delete the cookie&period; Persistent cookies store information on your
@@ -67,13 +87,15 @@
       Services based on your preferences on an ongoing basis&period; Persistent
       cookies placed by this site in your computer do not hold personal
       information&period;
-    </p><p>
+    </p>
+    <p>
       3&period;4 You can set your browser to accept all cookies&comma; to reject all
       cookies&comma; or to notify you whenever a cookie is offered so that you can
       decide each time whether to accept it&period; To learn more about cookies and
       how to specify your preferences&comma; please search for 'cookie' in the
       'Help' portion of your browser&period;
-    </p><p>
+    </p>
+    <p>
       3&period;5 An Internet Protocol &lpar;IP&rpar; address is a number assigned to
       your computer by your Internet service provider so you can access the
       Internet and is generally considered to be non-personally identifiable
@@ -83,7 +105,8 @@
       problems with a server&comma; report aggregate information&comma; determine the
       fastest route for your computer to use in connecting to a site&comma; and
       administer and improve the Services&period;
-    </p><p>
+    </p>
+    <p>
       3&period;6 'Internet tags' &lpar;also known as Web Beacons&comma; single-pixel
       GIFs&comma; clear GIFs&comma; invisible GIFs&comma; and 1-by-1 GIFs&rpar; are smaller than
       cookies and tell the Web site server information such as the IP address
@@ -91,21 +114,26 @@
       both on online advertisements that bring people to the Services and on
       different pages of the Services&period; Such tags indicate how many times a
       page is opened and which information is consulted&period;
-    </p><p>
+    </p>
+    <p>
       3&period;7 'Navigational data' &lpar;log files&comma; server logs&comma; and clickstream
       data&rpar; are used for system management&comma; to improve the content of the
       Services&comma; market research purposes&comma; and to communicate information to
       visitors&period;
-    </p><p>
-      <strong>4&period; Use and Sharing of Anonymous&comma; Passive Information&period;</strong><br>The Services may make full use of passively collected anonymous
+    </p>
+    <p>
+      <strong>4&period; Use and Sharing of Anonymous&comma; Passive Information&period;</strong>
+      <br>The Services may make full use of passively collected anonymous
       information&comma; including without limitation the right to use such
       information to provide better service to Service users&comma; customize the
       Services based on your preferences&comma; compile and analyze statistics and
       trends&comma; and otherwise administer and improve the Services for your use&period; We
       reserve the right to share this anonymous&comma; passive information in
       aggregated form&period;
-    </p><p>
-      <strong>5&period; 3rd Party Behavioral Ads&semi; Google&apos;s AdSense Network&period;</strong><br>5&period;1 We reserve the right to use anonymous&comma; passive information
+    </p>
+    <p>
+      <strong>5&period; 3rd Party Behavioral Ads&semi; Google&apos;s AdSense Network&period;</strong>
+      <br>5&period;1 We reserve the right to use anonymous&comma; passive information
       about your visits to this and other websites &lpar;not including your name&comma;
       address&comma; email address or telephone number&rpar; for purposes of serving our
       ads and third party ads that are targeted to your interests &lpar;'3rd Party
@@ -119,15 +147,18 @@
       a tracking code&period; You may refuse the use of cookies by selecting the
       appropriate settings on your browser&semi; however&comma; please note that if you
       do this you may not be able to use the full functionality of this site&period;
-    </p><p>
+    </p>
+    <p>
       5&period;2 We reserve the right to participate in Google&apos;s AdSense
       network for purposes of serving 3rd Party Behavioral Ads&period; Google uses
       DoubleClick&apos;s DART cookie for serving 3rd Party Behavioral Ads over the
       AdSense network&period; You may opt out of the use of the DART cookie&period; For
       information regarding how to opt out&comma; go to
       http&colon;&sol;&sol;www&period;google&period;com&sol;privacy&UnderBar;ads&period;html&period;
-    </p><p>
-      <strong>6&period; Use of 3rd Party Analytics&period;</strong><br>We reserve the right to use analytics services provided by
+    </p>
+    <p>
+      <strong>6&period; Use of 3rd Party Analytics&period;</strong>
+      <br>We reserve the right to use analytics services provided by
       third parties&period; These services use 3rd party cookies to collect
       anonymous&comma; passive information about your use of this site &lpar;see
       explanation of cookies in Collection of Anonymous&comma; Passive Information
@@ -136,8 +167,10 @@
       services&period; These web analytics services may also transfer this
       information to third parties where required to do so by law&comma; or where
       such third parties process the information on the service&apos;s behalf&period;
-    </p><p>
-      <strong>7&period; Collection of Personal Information&semi; Categories&period;</strong><br>We will ask you for personal information when you sign up for any
+    </p>
+    <p>
+      <strong>7&period; Collection of Personal Information&semi; Categories&period;</strong>
+      <br>We will ask you for personal information when you sign up for any
       specific benefit or purpose that requires registration&period; Personal
       information that we collect may vary with each registration&comma; and it may
       include one or more of the following categories&colon; name&comma; physical
@@ -145,9 +178,13 @@
       including credit card number&comma; expiration date&comma; and billing address&comma;
       emergency contact information&comma; current medications&comma; allergies&comma; medical
       insurance information&period;
-    </p><p>
-      <strong>8&period; Use And Sharing of Personal Information&colon; General
-        Policy And Exceptions&period;</strong><br>Our general policy is that we will use your personal information&comma;
+    </p>
+    <p>
+      <strong>
+        8&period; Use And Sharing of Personal Information&colon; General
+        Policy And Exceptions&period;
+      </strong>
+      <br>Our general policy is that we will use your personal information&comma;
       including combining your personal information with passive information
       collected from this site&comma; only for&colon; the performance of the services or
       transaction for which it was given&comma; our private&comma; internal reporting for
@@ -155,14 +192,16 @@
       share&comma; sell&comma; or rent your personal information to others&period; The only
       exceptions to this general policy&colon; &lpar;i&rpar; are described in the subsections
       below&comma; and &lpar;ii&rpar; if you explicitly approve through our site&period;
-    </p><p>
+    </p>
+    <p>
       8&period;1 Affiliates And Service Providers&period; We reserve the right to
       provide such information to our affiliates or subsidiaries&comma; or trusted
       service providers for the purpose of hosting our servers or processing
       or archiving personal information for us&period; We require that these parties
       agree to privacy and security safeguards for this information that are
       consistent with this Privacy Policy&period;
-    </p><p>
+    </p>
+    <p>
       8&period;2 Acquisition&semi; Bankruptcy&period; In the event that we are acquired by
       or merged with a third party entity&comma; we reserve the right to transfer
       such information as part of such merger&comma; acquisition&comma; sale&comma; or other
@@ -171,37 +210,47 @@
       creditors&comma; or the application of laws or equitable principles affecting
       creditors&apos; rights generally&comma; we reserve the right to transfer such
       information to protect our rights or as required by law&period;
-    </p><p>
+    </p>
+    <p>
       8&period;3 Enforcement&semi; Legal Process&period; We reserve the right to transfer
       such information if we have a good faith belief that access&comma; use&comma;
       preservation or disclosure of such information is reasonably necessary
       &lpar;i&rpar; to satisfy any applicable law&comma; regulation&comma; legal process or
       enforceable governmental request&comma; or &lpar;ii&rpar; to investigate or enforce
       violations of our rights or the security of this site&period;
-    </p><p>
+    </p>
+    <p>
       8&period;4 Miscellaneous&period; We reserve the right to share personal
       information with the following additional parties&colon; online organizers
       using our tools and resellers of our products and services from whose
       site the sale originated &lpar;even though the sale originates at site of the
       reseller&comma; registration and collection of personal information occurs at
       this site&rpar;&period;
-    </p><p>
-      <strong>9&period; Onward Transfer of Personal Information Outside Your
-        Country of Residence&period;</strong><br>Any personal information which we may collect on this site will
+    </p>
+    <p>
+      <strong>
+        9&period; Onward Transfer of Personal Information Outside Your
+        Country of Residence&period;
+      </strong>
+      <br>Any personal information which we may collect on this site will
       be stored and processed in our servers located only in the United
       States&period; By using this site&comma; if you reside outside the United States&comma; you
       consent to the transfer of personal information outside your country of
       residence to the United States&period;
-    </p><p>
-      <strong>10&period; Security of Personal Information&period;</strong><br>We follow reasonable and appropriate industry standards to
+    </p>
+    <p>
+      <strong>10&period; Security of Personal Information&period;</strong>
+      <br>We follow reasonable and appropriate industry standards to
       protect your personal information and data&period; Unfortunately&comma; no data
       transmission over the Internet or method of data storage can be
       guaranteed 100&percnt; secure&period; Therefore&comma; while we strive to protect your
       personal information by following generally accepted industry standards&comma;
       we cannot ensure or warrant the absolute security of any information you
       transmit to us or archive at this site&period;
-    </p><p>
-      <strong>11&period; Changing And Updating Personal Information&period;</strong><br>Upon request&comma; we will permit you to request or make changes or
+    </p>
+    <p>
+      <strong>11&period; Changing And Updating Personal Information&period;</strong>
+      <br>Upon request&comma; we will permit you to request or make changes or
       updates to your personal information for legitimate purposes&period; We request
       identification prior to approving such requests&period; We reserve the right to
       decline any requests that are unreasonably repetitive or systematic&comma;
@@ -211,15 +260,19 @@
       you establish with this site for purposes of making your own changes or
       updates&comma; and in such case&comma; instructions for making such changes or
       updates will be provided where necessary&period;
-    </p><p>
-      <strong>12&period; Email From This Site&semi; Opt-Out Rights&period;</strong><br>If you supply us with your e-mail address you may receive
+    </p>
+    <p>
+      <strong>12&period; Email From This Site&semi; Opt-Out Rights&period;</strong>
+      <br>If you supply us with your e-mail address you may receive
       periodic messages from us with information specific to the Services and
       required for the normal functioning of the Services as well as for new
       products or services or upcoming events&period; If you prefer not to receive
       periodic email messages&comma; you may opt-out by following the instructions
       on the email&period;
-    </p><p>
-      <strong>13&period; Children&apos;s Online Policy&period;</strong><br>We are committed to preserving online privacy for all of our
+    </p>
+    <p>
+      <strong>13&period; Children&apos;s Online Policy&period;</strong>
+      <br>We are committed to preserving online privacy for all of our
       website visitors&comma; including children&period; This site is a general audience
       site&period; Consistent with the Children&apos;s Online Privacy Protection Act
       &lpar;COPPA&rpar;&comma; we will not knowingly collect any information from&comma; or sell to&comma;
@@ -233,9 +286,13 @@
         target="_blank"
       >admin@habitica.com</a> and be sure to include in
       your message the same login information that your child submitted&period;
-    </p><p>
-      <strong>14&period; Email And Other Messages Through This Site&semi; ECPA
-        Notice&period;</strong><br>This site treats email messages and other electronic messages
+    </p>
+    <p>
+      <strong>
+        14&period; Email And Other Messages Through This Site&semi; ECPA
+        Notice&period;
+      </strong>
+      <br>This site treats email messages and other electronic messages
       that are sent through this site and not viewable by others as
       confidential and private&comma; except as required by law&comma; including without
       limitation&comma; the Electronic Communications Privacy Act of 1986&comma; 18 U&period;S&period;C&period;
@@ -246,9 +303,18 @@
       &lpar;iii&rpar; where we receive information inadvertently which appears to
       pertain to the commission of a crime&period; This site is not considered a
       'secure communications medium' under the ECPA&period;
-    </p><p>
-      <strong>15&period; Contact Us&period;</strong><br>If you have any questions regarding this Privacy Policy&comma; please
+    </p>
+    <p>
+      <strong>15&period; Contact Us&period;</strong>
+      <br>If you have any questions regarding this Privacy Policy&comma; please
       contact the owner and operator of this website business&colon;
-    </p><address><strong>HabitRPG, Inc.</strong><br>11870 Santa Monica Blvd., Suite 106-577<br>Los Angeles, CA 90025<br>Email&colon;&nbsp;<a href="mailto:admin@habitica.com">admin@habitica.com</a></address>
+    </p>
+    <address>
+      <strong>HabitRPG, Inc.</strong>
+      <br>11870 Santa Monica Blvd., Suite 106-577
+      <br>Los Angeles, CA 90025
+      <br>Email&colon;&nbsp;
+      <a href="mailto:admin@habitica.com">admin@habitica.com</a>
+    </address>
   </div>
 </template>
diff --git a/website/client/src/components/static/staticWrapper.vue b/website/client/src/components/static/staticWrapper.vue
index ac5323c27f..8f60a98e6a 100644
--- a/website/client/src/components/static/staticWrapper.vue
+++ b/website/client/src/components/static/staticWrapper.vue
@@ -3,20 +3,24 @@
     <static-header
       v-if="showContentWrap"
       :class="{'home-header': ['home', 'front'].indexOf($route.name) !== -1, 'white-header': this.$route.name === 'plans'}"
-    /><div class="static-wrapper">
+    />
+    <div class="static-wrapper">
       <router-view />
-    </div><div
+    </div>
+    <div
       v-if="showContentWrap"
       :id="footerId"
     >
       <app-footer />
-    </div><div
+    </div>
+    <div
       v-if="showContentWrap && footerId"
       id="bottom-wrap"
       class="purple-4"
     >
       <div id="bottom-background">
-        <div class="seamless_mountains_demo_repeat"></div><div class="midground_foreground_extended2"></div>
+        <div class="seamless_mountains_demo_repeat"></div>
+        <div class="midground_foreground_extended2"></div>
       </div>
     </div>
   </div>
diff --git a/website/client/src/components/static/terms.vue b/website/client/src/components/static/terms.vue
index 61c5aaa38c..3cd52b1768 100644
--- a/website/client/src/components/static/terms.vue
+++ b/website/client/src/components/static/terms.vue
@@ -1,20 +1,28 @@
 <template>
   <div class="container-fluid">
-    <h1>Terms of Use</h1><p class="pagemeta">
-      Last updated July 27, 2015<br><small>(Corrected minimum age requirement to under 13 years of age per COPPA)</small><br><br>
-    </p><p>
+    <h1>Terms of Use</h1>
+    <p class="pagemeta">
+      Last updated July 27, 2015
+      <br>
+      <small>(Corrected minimum age requirement to under 13 years of age per COPPA)</small>
+      <br>
+      <br>
+    </p>
+    <p>
       HabitRPG &lpar;or 'we'&rpar; provides services through our
       software applications for various devices and platforms &lpar;'HabitRPG
       Applications'&rpar; and the HabitRPG&period;com domain&comma; and any sub domains thereto
       &lpar;the 'Sites'&rpar;&period; Individually or collectively&comma; HabitRPG Applications and
       Sites may be referred to as the 'Services'&period;
-    </p><p>
+    </p>
+    <p>
       Please read the following terms and conditions &lpar;'Terms of
       Service'&rpar; carefully&period; These Terms of Service govern your access to and
       use of the Services and HabitRPG Content &lpar;defined below&rpar; and set forth
       the legally binding terms for your use of the Services and HabitRPG
       Content&comma; whether or not you have registered as a Member&period;
-    </p><p>
+    </p>
+    <p>
       Certain areas of the Services &lpar;and your access to or use of
       HabitRPG Content&rpar; may have different terms and conditions posted or may
       require you to agree with and accept additional terms and conditions&period; If
@@ -23,7 +31,8 @@
       Content&comma; the latter terms and conditions will take precedence with
       respect to your use of or access to that area of the Services or HabitRPG
       Content&period;
-    </p><p>
+    </p>
+    <p>
       YOU ACKNOWLEDGE AND AGREE THAT&comma; BY CLICKING ON THE 'I AGREE' OR
       'I ACCEPT' BUTTON&comma; OR BY ACCESSING OR USING THE SERVICES OR BY
       DOWNLOADING OR POSTING ANY CONTENT FROM OR ON THE SITES OR THROUGH THE
@@ -32,8 +41,10 @@
       AND AGREE TO OUR PRIVACY POLICY AS DESCRIBED BELOW&period; IF YOU DO NOT AGREE
       TO THESE TERMS&comma; THEN YOU HAVE NO RIGHT TO ACCESS OR USE THE SERVICES OR
       HABITRPG CONTENT&period;
-    </p><p>
-      <strong>Modification</strong><br>HabitRPG reserves the right&comma; at its sole discretion&comma; to modify&comma;
+    </p>
+    <p>
+      <strong>Modification</strong>
+      <br>HabitRPG reserves the right&comma; at its sole discretion&comma; to modify&comma;
       discontinue or terminate the Services&comma; including any portion thereof on
       a global or individual basis&comma; or to modify these Terms of Service&comma; at
       any time and without prior notice&period; If we modify these Terms of Service&comma;
@@ -44,8 +55,10 @@
       are indicating that you agree to be bound by the modified Terms of
       Service&period; If the modified Terms of Service are not acceptable to you&comma;
       your only recourse is to cease using the Services&period;
-    </p><p>
-      <strong>Eligibility and HabitRPG Account Registration</strong><br>In order to access certain features of the Sites and Services&comma; and to
+    </p>
+    <p>
+      <strong>Eligibility and HabitRPG Account Registration</strong>
+      <br>In order to access certain features of the Sites and Services&comma; and to
       post any Public User Content &lpar;defined below&rpar; on the Sites or through the
       Services&comma; you must register to create an account &lpar;'HabitRPG Account'&rpar; and
       become a 'Member'&period; In compliance with privacy laws&comma; we do not allow
@@ -67,15 +80,20 @@
       any unauthorized use of your HabitRPG Account&period; We are not liable for any
       damages or losses caused by someone using your account without your
       permission&period;
-    </p><p>
-      <strong>Privacy</strong><br>See <a href="/static/privacy">HabitRPG&apos;s Privacy Policy</a> for
+    </p>
+    <p>
+      <strong>Privacy</strong>
+      <br>See
+      <a href="/static/privacy">HabitRPG&apos;s Privacy Policy</a> for
       information and notices concerning HabitRPG&apos;s collection and use of your
       personal information&period; If you have any questions about the HabitRPG
       Privacy Policy&comma; please contact HabitRPG at privacy AT HabitRPG&period;com&period; By
       accessing the Services you are agreeing to the terms of our Privacy
       Policy&period;
-    </p><p>
-      <strong>Content</strong><br>Certain types of content are made available through the Services&period;
+    </p>
+    <p>
+      <strong>Content</strong>
+      <br>Certain types of content are made available through the Services&period;
       'HabitRPG Content' means&comma; collectively&comma; the text&comma; data&comma; graphics&comma; images&comma;
       illustrations&comma; forms and look and feel attributes&comma; HabitRPG trademarks
       and logos and other content made available through the Services&comma;
@@ -95,8 +113,10 @@
       material&period; Nevertheless&comma; you agree to use the Services at your sole risk
       and that we shall not have any liability to you for content that may be
       found to be offensive&comma; indecent&comma; or objectionable&period;
-    </p><p>
-      <strong>Ownership</strong><br>The Services and HabitRPG Content are protected by copyright&comma; trademark&comma;
+    </p>
+    <p>
+      <strong>Ownership</strong>
+      <br>The Services and HabitRPG Content are protected by copyright&comma; trademark&comma;
       and other laws of the United States and foreign countries&period; Except as
       expressly provided in these Terms of Service&comma; HabitRPG and its licensors
       exclusively own all right&comma; title and interest in and to the Services and
@@ -104,8 +124,10 @@
       You will not remove&comma; alter or obscure any copyright&comma; trademark&comma; service
       mark or other proprietary rights notices incorporated in or accompanying
       the Services or HabitRPG Content&period;
-    </p><p>
-      <strong>HabitRPG License</strong><br>Subject to your compliance with the terms and conditions of these Terms
+    </p>
+    <p>
+      <strong>HabitRPG License</strong>
+      <br>Subject to your compliance with the terms and conditions of these Terms
       of Service&comma; HabitRPG grants you a limited&comma; non-exclusive&comma;
       non-transferable license&comma; without the right to sublicense&comma; to access&comma;
       use&comma; view&comma; download and print&comma; where applicable&comma; the Services and any
@@ -122,8 +144,10 @@
       devices that you own or control&comma; and you may not distribute or make the
       HabitRPG Applications available over a network where it could be used by
       multiple devices at the same time&period;
-    </p><p>
-      <strong>Public User Content</strong><br>By making available any Public User Content through the Services&comma; you hereby
+    </p>
+    <p>
+      <strong>Public User Content</strong>
+      <br>By making available any Public User Content through the Services&comma; you hereby
       grant to HabitRPG a worldwide&comma; irrevocable&comma; perpetual&comma; non-exclusive&comma;
       transferable&comma; royalty-free license&comma; with the right to sublicense&comma; to
       use&comma; copy&comma; adapt&comma; modify&comma; distribute&comma; license&comma; sell&comma; transfer&comma; publicly
@@ -132,7 +156,8 @@
       HabitRPG does not claim any ownership rights in any such Public User Content and
       nothing in these Terms of Service will be deemed to restrict any rights
       that you may have to use and exploit any such Public User Content&period;
-    </p><p>
+    </p>
+    <p>
       You acknowledge and agree that you are solely responsible for all
       Public User Content that you make available through the Services&period; Accordingly&comma;
       you represent and warrant that&colon; &lpar;i&rpar; you either are the sole and
@@ -147,7 +172,8 @@
       trademark&comma; trade secret&comma; moral rights or other intellectual property
       rights&comma; or rights of publicity or privacy&comma; or result in the violation of
       any applicable law or regulation&period;
-    </p><p>
+    </p>
+    <p>
       Copyrighted Materials&colon; No Infringing Use&period; You will not use the
       Services to offer&comma; display&comma; distribute&comma; transmit&comma; route&comma; provide
       connections to or store any material that infringes copyrighted works or
@@ -157,14 +183,18 @@
       of the accounts of users who repeatedly infringe or are believed to be
       or are charged with repeatedly infringing the rights of copyright
       holders&period;
-    </p><p>
-      <strong>Notify Us of Infringers</strong><br>If you believe that something on the Services violates your copyright&comma;
+    </p>
+    <p>
+      <strong>Notify Us of Infringers</strong>
+      <br>If you believe that something on the Services violates your copyright&comma;
       notify our copyright agent in writing&period; The contact information for our
       copyright agent is at the bottom of this section&period;
-    </p><p>
+    </p>
+    <p>
       In order for us to take action&comma; you must do the following in your
       notice&colon;
-    </p><p>
+    </p>
+    <p>
       &lpar;1&rpar; provide your physical or electronic signature&semi; &lpar;2&rpar; identify
       the copyrighted work that you believe is being infringed&semi; &lpar;3&rpar; identify
       the item on the Services that you think is infringing your work and
@@ -178,11 +208,23 @@
       provide in your notice is accurate&comma; and that &lpar;under penalty of perjury&rpar;&comma;
       you are authorized to act on behalf of the copyright owner whose work is
       being infringed&period;
-    </p><p>Here is the contact information for our copyright agent&colon;</p><p>Copyright Enforcement<br>HabitRPG, Inc.<br>11870 Santa Monica Blvd., Suite 106-577<br>Los Angeles, CA 90025<br>E-Mail&colon; <a href="mailto:admin@habitica.com">admin@habitica.com</a></p><p>
+    </p>
+    <p>Here is the contact information for our copyright agent&colon;</p>
+    <p>
+      Copyright Enforcement
+      <br>HabitRPG, Inc.
+      <br>11870 Santa Monica Blvd., Suite 106-577
+      <br>Los Angeles, CA 90025
+      <br>E-Mail&colon;
+      <a href="mailto:admin@habitica.com">admin@habitica.com</a>
+    </p>
+    <p>
       Again&comma; we cannot take action unless you give us all the required
       information&period;
-    </p><p>
-      <strong>Ratings and Comments & Feedback&period;</strong><br>You can rate and make comments about content made available through the
+    </p>
+    <p>
+      <strong>Ratings and Comments & Feedback&period;</strong>
+      <br>You can rate and make comments about content made available through the
       Services &lpar;'Comments'&rpar;&period; HabitRPG advises you to exercise caution and good
       judgment when leaving such Comments&period; Once you complete and submit your
       Comments to the Services you will not be able to go back and edit your
@@ -208,8 +250,10 @@
       reasonably request to assist HabitRPG to acquire&comma; perfect&comma; and maintain
       its intellectual property rights and other legal protections for the
       Comments and Feedback&period;
-    </p><p>
-      <strong>Interactions between Users</strong><br>You are solely responsible for your interactions &lpar;including any
+    </p>
+    <p>
+      <strong>Interactions between Users</strong>
+      <br>You are solely responsible for your interactions &lpar;including any
       disputes&rpar; with other users&period; You understand that HabitRPG does not in any
       way screen HabitRPG users&comma; except to only allow people aged 13 and over
       to create accounts&period; You are solely responsible for&comma; and will exercise
@@ -227,10 +271,14 @@
       improper activity&comma; including&comma; without limitation&comma; granting authorized
       HabitRPG representatives access to any password-protected portions of
       your HabitRPG Account&period;
-    </p><p>
-      <strong>General Prohibitions</strong><br>You agree not to do any of the following while using the Services or
-      HabitRPG Content&colon;<br>
-    </p><ul>
+    </p>
+    <p>
+      <strong>General Prohibitions</strong>
+      <br>You agree not to do any of the following while using the Services or
+      HabitRPG Content&colon;
+      <br>
+    </p>
+    <ul>
       <li>
         Post&comma; upload&comma; publish&comma; submit or transmit any text&comma; graphics&comma;
         images&comma; software&comma; music&comma; audio&comma; video&comma; information or other material
@@ -248,27 +296,32 @@
         limited to activities that promote or provide instructional information
         regarding the manufacture or purchase of illegal weapons or illegal
         substances&rpar;&period;
-      </li><li>
+      </li>
+      <li>
         Use&comma; display&comma; mirror&comma; frame or utilize framing techniques to
         enclose the Services&comma; or any individual element or materials within the
         Services&comma; HabitRPG&apos;s name&comma; any HabitRPG trademark&comma; logo or other
         proprietary information&comma; the content of any text or the layout and
         design of any page or form contained on a page&comma; without HabitRPG&apos;s
         express written consent&semi;
-      </li><li>
+      </li>
+      <li>
         Access&comma; tamper with&comma; or use non-public areas of the Services&comma;
         HabitRPG&apos;s computer systems&comma; or the technical delivery systems of
         HabitRPG&apos;s providers&semi;
-      </li><li>
+      </li>
+      <li>
         Attempt to probe&comma; scan&comma; or test the vulnerability of any
         HabitRPG system or network or breach any security or authentication
         measures&semi;
-      </li><li>
+      </li>
+      <li>
         Avoid&comma; bypass&comma; remove&comma; deactivate&comma; impair&comma; descramble or
         otherwise circumvent any technological measure implemented by HabitRPG
         or any of HabitRPG&apos;s providers or any other third party &lpar;including
         another user&rpar; to protect the Services or HabitRPG Content&semi;
-      </li><li>
+      </li>
+      <li>
         Attempt to access or search the Services or HabitRPG Content or
         download HabitRPG Content from the Services through the use of any
         engine&comma; software&comma; tool&comma; agent&comma; device or mechanism &lpar;including spiders&comma;
@@ -276,43 +329,53 @@
         software and&sol;or search agents provided by HabitRPG or other generally
         available third party web browsers &lpar;such as Google Chrome&comma; Microsoft
         Internet Explorer&comma; Mozilla Firefox&comma; Safari or Opera&rpar;&semi;
-      </li><li>
+      </li>
+      <li>
         Send any unsolicited or unauthorized advertising&comma; promotional
         materials&comma; email&comma; junk mail&comma; spam&comma; chain letters or other form of
         solicitation&semi;
-      </li><li>
+      </li>
+      <li>
         Use any meta tags or other hidden text or metadata utilizing a
         HabitRPG trademark&comma; logo URL or product name without HabitRPG&apos;s express
         written consent&semi;
-      </li><li>
+      </li>
+      <li>
         Use the Services or HabitRPG Content for any commercial purpose
         or the benefit of any third party or in any manner not permitted by
         these Terms of Service&semi;
-      </li><li>
+      </li>
+      <li>
         Forge any TCP&sol;IP packet header or any part of the header
         information in any email or newsgroup posting&comma; or in any way use the
         Services or HabitRPG Content to send altered&comma; deceptive or false
         source-identifying information&semi;
-      </li><li>
+      </li>
+      <li>
         Attempt to decipher&comma; decompile&comma; disassemble or reverse
         engineer any of the software used to provide the Services or HabitRPG
         Content&semi;
-      </li><li>
+      </li>
+      <li>
         Interfere with&comma; or attempt to interfere with&comma; the access of
         any user&comma; host or network&comma; including&comma; without limitation&comma; sending a
         virus&comma; overloading&comma; flooding&comma; spamming&comma; or mail-bombing the Services&semi;
-      </li><li>
+      </li>
+      <li>
         Collect or store any personally identifiable information from
         the Services from other users of the Services without their express
         permission&semi;
-      </li><li>
+      </li>
+      <li>
         Impersonate or misrepresent your affiliation with any person
         or entity&semi; Violate any applicable law or regulation&semi; or
-      </li><li>
+      </li>
+      <li>
         Encourage or enable any other individual to do any of the
         foregoing&period;
       </li>
-    </ul><p>
+    </ul>
+    <p>
       HabitRPG will have the right to investigate and prosecute
       violations of any of the above&comma; including intellectual property rights
       infringement and Services security issues&comma; to the fullest extent of the
@@ -328,8 +391,10 @@
       HabitRPG Content&comma; including&comma; any Public User Content&comma; that HabitRPG&comma; in its sole
       discretion&comma; considers to be in violation of these Terms of Service or
       otherwise harmful to the Services&period;
-    </p><p>
-      <strong>Links</strong><br>The Services may contain links to third-party websites or resources&period; You
+    </p>
+    <p>
+      <strong>Links</strong>
+      <br>The Services may contain links to third-party websites or resources&period; You
       acknowledge and agree that HabitRPG is not responsible or liable for&colon; &lpar;i&rpar;
       the availability or accuracy of such websites or resources&semi; or &lpar;ii&rpar; the
       content&comma; products&comma; or services on or available from such websites or
@@ -338,8 +403,10 @@
       products&comma; or services available from such websites or resources&period; You
       acknowledge sole responsibility for and assume all risk arising from
       your use of any such websites or resources&period;
-    </p><p>
-      <strong>Termination and HabitRPG Account&semi; Cancellation</strong><br>Without limiting other remedies&comma; HabitRPG may at any time suspend or
+    </p>
+    <p>
+      <strong>Termination and HabitRPG Account&semi; Cancellation</strong>
+      <br>Without limiting other remedies&comma; HabitRPG may at any time suspend or
       terminate your HabitRPG Account and refuse to provide access to the
       Services&period; In addition&comma; HabitRPG may notify authorities or take any
       actions it deems appropriate&comma; without notice to you&comma; if HabitRPG suspects
@@ -350,11 +417,13 @@
       using the Services that may be illegal or cause liability&comma; harm&comma;
       embarrassment&comma; harassment&comma; abuse or disruption for you&comma; HabitRPG Users&comma;
       HabitRPG or any other third parties or the Services&period;
-    </p><p>
+    </p>
+    <p>
       You may terminate your HabitRPG Account at any time and for any
       reason by sending email to support AT HabitRPG&period;com&period; Upon any termination
       by a Member&comma; the related account will no longer be accessible&period;
-    </p><p>
+    </p>
+    <p>
       After any termination&comma; you understand and acknowledge that we
       will have no further obligation to provide the Services and all licenses
       and other rights granted to you by these Terms of Service will
@@ -366,20 +435,24 @@
       ACCESSED BY YOU&period; Furthermore&comma; HabitRPG will have no obligation to
       maintain any information stored in our database related to your account
       or to forward any information to you or any third party&period;
-    </p><p>
+    </p>
+    <p>
       Any suspension&comma; termination or cancellation will not affect your
       obligations to HabitRPG under these Terms of Service &lpar;including&comma; without
       limitation&comma; proprietary rights and ownership&comma; indemnification and
       limitation of liability&rpar;&comma; which by their sense and context are intended
       to survive such suspension&comma; termination or cancellation&period;
-    </p><p>
-      <strong>Disclaimers</strong><br>THE SERVICES&comma; HABITRPG CONTENT AND PUBLIC USER CONTENT ARE PROVIDED 'AS IS'&comma;
+    </p>
+    <p>
+      <strong>Disclaimers</strong>
+      <br>THE SERVICES&comma; HABITRPG CONTENT AND PUBLIC USER CONTENT ARE PROVIDED 'AS IS'&comma;
       WITHOUT WARRANTY OF ANY KIND&comma; EITHER EXPRESS OR IMPLIED&period; WITHOUT
       LIMITING THE FOREGOING&comma; HABITRPG EXPLICITLY DISCLAIMS ANY WARRANTIES OF
       MERCHANTABILITY&comma; FITNESS FOR A PARTICULAR PURPOSE&comma; QUIET ENJOYMENT OR
       NON-INFRINGEMENT&comma; AND ANY WARRANTIES ARISING OUT OF COURSE OF DEALING OR
       USAGE OF TRADE&period;
-    </p><p>
+    </p>
+    <p>
       HABITRPG MAKES NO WARRANTY THAT THE SERVICES&comma; HABITRPG CONTENT OR
       PUBLIC USER CONTENT WILL MEET YOUR REQUIREMENTS OR BE AVAILABLE ON AN
       UNINTERRUPTED&comma; SECURE&comma; OR ERROR-FREE BASIS&period; HABITRPG MAKES NO WARRANTY
@@ -387,20 +460,25 @@
       OBTAINED THROUGH THE SERVICES OR THE ACCURACY&comma; TIMELINESS&comma; TRUTHFULNESS&comma;
       COMPLETENESS OR RELIABILITY OF ANY CONTENT OBTAINED THROUGH THE
       SERVICES&period;
-    </p><p>
+    </p>
+    <p>
       NO ADVICE OR INFORMATION&comma; WHETHER ORAL OR WRITTEN&comma; OBTAINED FROM
       HABITRPG OR THROUGH THE SERVICES&comma; HABITRPG CONTENT OR PUBLIC USER CONTENT&comma; WILL
       CREATE ANY WARRANTY NOT EXPRESSLY MADE HEREIN&period;
-    </p><p>
-      <strong>Indemnity</strong><br>You agree to defend&comma; indemnify&comma; and hold HabitRPG&comma; its officers&comma;
+    </p>
+    <p>
+      <strong>Indemnity</strong>
+      <br>You agree to defend&comma; indemnify&comma; and hold HabitRPG&comma; its officers&comma;
       directors&comma; employees and agents&comma; harmless from and against any claims&comma;
       liabilities&comma; damages&comma; losses&comma; and expenses&comma; including&comma; without
       limitation&comma; reasonable legal and accounting fees&comma; arising out of or in
       any way connected with Public User Content you submit to HabitRPG&comma; your access
       to or use of the Services or HabitRPG Content&comma; or your violation of these
       Terms of Service&period;
-    </p><p>
-      <strong>Limitation of Liability</strong><br>YOU ACKNOWLEDGE AND AGREE THAT&comma; TO THE MAXIMUM EXTENT PERMITTED BY LAW&comma;
+    </p>
+    <p>
+      <strong>Limitation of Liability</strong>
+      <br>YOU ACKNOWLEDGE AND AGREE THAT&comma; TO THE MAXIMUM EXTENT PERMITTED BY LAW&comma;
       THE ENTIRE RISK ARISING OUT OF YOUR ACCESS TO AND USE OF THE SERVICES
       AND CONTENT THEREIN REMAINS WITH YOU&period; NEITHER HABITRPG NOR ANY OTHER
       PARTY INVOLVED IN CREATING&comma; PRODUCING&comma; OR DELIVERING THE SERVICES OR
@@ -419,7 +497,8 @@
       ENTIRELY WITH YOU&period; FURTHER&comma; HABITRPG WILL HAVE NO LIABILITY TO YOU OR TO
       ANY THIRD PARTY FOR ANY PUBLIC USER CONTENT OR THIRD-PARTY CONTENT UPLOADED
       ONTO OR DOWNLOADED FROM THE SITES OR THROUGH THE SERVICES&period;
-    </p><p>
+    </p>
+    <p>
       IN NO EVENT WILL HABITRPG&apos;S AGGREGATE LIABILITY ARISING OUT OF OR
       IN CONNECTION WITH THESE TERMS OF SERVICE OR FROM THE USE OF OR
       INABILITY TO USE THE SITE&comma; SERVICES OR CONTENT THEREIN EXCEED ONE
@@ -428,26 +507,33 @@
       YOU&period; SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF
       LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES&comma; SO THE ABOVE
       LIMITATION MAY NOT APPLY TO YOU&period;
-    </p><p>
-      <strong>Proprietary Rights Notices</strong><br>All trademarks&comma; service marks&comma; logos&comma; trade names and any other
+    </p>
+    <p>
+      <strong>Proprietary Rights Notices</strong>
+      <br>All trademarks&comma; service marks&comma; logos&comma; trade names and any other
       proprietary designations of HabitRPG used herein are trademarks or
       registered trademarks of HabitRPG&period; Any other trademarks&comma; service marks&comma;
       logos&comma; trade names and any other proprietary designations are the
       trademarks or registered trademarks of their respective parties&period;
-    </p><p>
-      <strong>Controlling Law and Jurisdiction</strong><br>These Terms of Service and any action related thereto will be governed
+    </p>
+    <p>
+      <strong>Controlling Law and Jurisdiction</strong>
+      <br>These Terms of Service and any action related thereto will be governed
       by the laws of the State of California without regard to its conflict of
       laws provisions&period; The exclusive jurisdiction and venue of any action with
       respect to the subject matter of these Terms of Service will be the
       courts having jurisdiction over disputes arising in Santa Clara County&comma;
       California&comma; and each of the parties hereto waives any objection to
       jurisdiction and venue in such courts&period;
-    </p><p>
+    </p>
+    <p>
       YOU AGREE THAT IF YOU WANT TO SUE US&comma; YOU MUST FILE YOUR LAWSUIT
       WITHIN ONE YEAR AFTER THE EVENT THAT GAVE RISE TO YOUR LAWSUIT&period;
       OTHERWISE&comma; YOUR LAWSUIT WILL BE PERMANENTLY BARRED&period;
-    </p><p>
-      <strong>Export Control</strong><br>You may not use or otherwise export or re-export the Services except as
+    </p>
+    <p>
+      <strong>Export Control</strong>
+      <br>You may not use or otherwise export or re-export the Services except as
       authorized by United States law and the laws of the jurisdiction in
       which the Services were obtained&period; In particular&comma; but without limitation&comma;
       the Services may not be exported or re-exported &lpar;a&rpar; into any U&period;S&period;
@@ -459,22 +545,28 @@
       any purposes prohibited by United States law&comma; including&comma; without
       limitation&comma; the development&comma; design&comma; manufacture or production of
       nuclear&comma; missiles&comma; or chemical or biological weapons&period;
-    </p><p>
-      <strong>Entire Agreement</strong><br>These Terms of Service constitute the entire and exclusive understanding
+    </p>
+    <p>
+      <strong>Entire Agreement</strong>
+      <br>These Terms of Service constitute the entire and exclusive understanding
       and agreement between HabitRPG and you regarding the Services and HabitRPG
       Content&comma; and these Terms of Service supersede and replace any and all
       prior oral or written understandings or agreements between HabitRPG and
       you regarding the Services and HabitRPG Content&period;
-    </p><p>
-      <strong>Assignment</strong><br>You may not assign or transfer these Terms of Service&comma; by operation of
+    </p>
+    <p>
+      <strong>Assignment</strong>
+      <br>You may not assign or transfer these Terms of Service&comma; by operation of
       law or otherwise&comma; without HabitRPG&apos;s prior written consent&period; Any attempt
       by you to assign or transfer these Terms of Service&comma; without such
       consent&comma; will be null and of no effect&period; HabitRPG may freely assign these
       Terms of Service&period; Subject to the foregoing&comma; these Terms of Service will
       bind and inure to the benefit of the parties&comma; their successors and
       permitted assigns&period;
-    </p><p>
-      <strong>Notices</strong><br>You consent to the use of&colon; &lpar;i&rpar; electronic means to complete these Terms
+    </p>
+    <p>
+      <strong>Notices</strong>
+      <br>You consent to the use of&colon; &lpar;i&rpar; electronic means to complete these Terms
       of Service and to deliver any notices or other communications permitted
       or required hereunder&semi; and &lpar;ii&rpar; electronic records to store information
       related to these Terms of Service or your use of the Services&period; Any
@@ -484,8 +576,10 @@
       address that you provide&rpar; or &lpar;y&rpar; by posting to the Sites or Services&period;
       For notices made by e-mail&comma; the date of receipt will be deemed the date
       on which such notice is transmitted&period;
-    </p><p>
-      <strong>General</strong><br>The failure of HabitRPG to enforce any right or provision of these Terms
+    </p>
+    <p>
+      <strong>General</strong>
+      <br>The failure of HabitRPG to enforce any right or provision of these Terms
       of Service will not constitute a waiver of future enforcement of that
       right or provision&period; The waiver of any such right or provision will be
       effective only if in writing and signed by a duly authorized
@@ -497,9 +591,12 @@
       invalid or unenforceable&comma; that provision will be enforced to the maximum
       extent permissible and the other provisions of these Terms of Service
       will remain in full force and effect&period;
-    </p><p>
-      <strong>Contacting Us</strong><br>If you have any questions about these Terms of Service&comma; please contact
-      us at <a href="mailto:admin@habitica.com">admin@habitica.com</a>
+    </p>
+    <p>
+      <strong>Contacting Us</strong>
+      <br>If you have any questions about these Terms of Service&comma; please contact
+      us at
+      <a href="mailto:admin@habitica.com">admin@habitica.com</a>
     </p>
   </div>
 </template>
diff --git a/website/client/src/components/tasks/approvalFooter.vue b/website/client/src/components/tasks/approvalFooter.vue
index ccc0fc79df..aa1505bc53 100644
--- a/website/client/src/components/tasks/approvalFooter.vue
+++ b/website/client/src/components/tasks/approvalFooter.vue
@@ -1,13 +1,15 @@
 <template>
   <div>
-    <approval-modal :task="task" /><div
+    <approval-modal :task="task" />
+    <div
       v-if="!approvalRequested && !multipleApprovalsRequested"
       class="claim-bottom-message d-flex align-items-center"
     >
       <div
         class="mr-auto ml-2"
         v-html="message"
-      ></div><div
+      ></div>
+      <div
         v-if="!userIsAssigned"
         class="ml-auto mr-2"
       >
@@ -15,7 +17,8 @@
           class="claim-color"
           @click="claim()"
         >{{ $t('claim') }}</a>
-      </div><div
+      </div>
+      <div
         v-if="userIsAssigned"
         class="ml-auto mr-2"
       >
@@ -24,15 +27,18 @@
           @click="unassign()"
         >{{ $t('removeClaim') }}</a>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="approvalRequested && userIsManager"
       class="claim-bottom-message d-flex align-items-center justify-content-around"
     >
       <a
         class="approve-color"
         @click="approve()"
-      >{{ $t('approveTask') }}</a><a @click="needsWork()">{{ $t('needsWork') }}</a>
-    </div><div
+      >{{ $t('approveTask') }}</a>
+      <a @click="needsWork()">{{ $t('needsWork') }}</a>
+    </div>
+    <div
       v-if="multipleApprovalsRequested && userIsManager"
       class="claim-bottom-message d-flex align-items-center"
     >
diff --git a/website/client/src/components/tasks/approvalModal.vue b/website/client/src/components/tasks/approvalModal.vue
index 056a0af247..72e0193afc 100644
--- a/website/client/src/components/tasks/approvalModal.vue
+++ b/website/client/src/components/tasks/approvalModal.vue
@@ -12,14 +12,16 @@
       >
         <div class="col-8">
           <strong>{{ approval.userId.profile.name }}</strong>
-        </div><div class="col-2">
+        </div>
+        <div class="col-2">
           <button
             class="btn btn-primary"
             @click="approve(index)"
           >
             {{ $t('approve') }}
           </button>
-        </div><div class="col-2">
+        </div>
+        <div class="col-2">
           <button
             class="btn btn-secondary"
             @click="needsWork(index)"
@@ -28,7 +30,8 @@
           </button>
         </div>
       </div>
-    </div><div class="modal-footer">
+    </div>
+    <div class="modal-footer">
       <button
         class="btn btn-secondary"
         @click="close()"
diff --git a/website/client/src/components/tasks/brokenTaskModal.vue b/website/client/src/components/tasks/brokenTaskModal.vue
index 193e909408..37b232f8d9 100644
--- a/website/client/src/components/tasks/brokenTaskModal.vue
+++ b/website/client/src/components/tasks/brokenTaskModal.vue
@@ -9,53 +9,65 @@
       v-if="brokenChallengeTask && brokenChallengeTask.challenge"
       class="modal-body"
     >
-      <div v-if="brokenChallengeTask.challenge.broken === 'TASK_DELETED' || brokenChallengeTask.challenge.broken === 'CHALLENGE_TASK_NOT_FOUND'">
-        <h2>{{ $t('brokenTask') }}</h2><div>
+      <div
+        v-if="brokenChallengeTask.challenge.broken === 'TASK_DELETED' || brokenChallengeTask.challenge.broken === 'CHALLENGE_TASK_NOT_FOUND'"
+      >
+        <h2>{{ $t('brokenTask') }}</h2>
+        <div>
           <button
             class="btn btn-primary"
             @click="unlink('keep')"
           >
             {{ $t('keepIt') }}
-          </button><button
+          </button>
+          <button
             class="btn btn-danger"
             @click="removeTask(obj)"
           >
             {{ $t('removeIt') }}
           </button>
         </div>
-      </div><div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_DELETED'">
-        <h2>{{ $t('brokenChallenge') }}</h2><div>
+      </div>
+      <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_DELETED'">
+        <h2>{{ $t('brokenChallenge') }}</h2>
+        <div>
           <button
             class="btn btn-primary"
             @click="unlink('keep-all')"
           >
             {{ $t('keepThem') }}
-          </button><button
+          </button>
+          <button
             class="btn btn-danger"
             @click="unlink('remove-all')"
           >
             {{ $t('removeThem') }}
           </button>
         </div>
-      </div><div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_CLOSED'">
-        <h2 v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})"></h2><div>
+      </div>
+      <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_CLOSED'">
+        <h2 v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})"></h2>
+        <div>
           <button
             class="btn btn-primary"
             @click="unlink('keep-all')"
           >
             {{ $t('keepThem') }}
-          </button><button
+          </button>
+          <button
             class="btn btn-danger"
             @click="unlink('remove-all')"
           >
             {{ $t('removeThem') }}
           </button>
         </div>
-      </div><!-- @TODO: I ported this over, but do we use it anymore?--><!--div(v-if='brokenChallengeTask.challenge.broken === "UNSUBSCRIBED"')p {{ $t('unsubChallenge') }}
+      </div>
+      <!-- @TODO: I ported this over, but do we use it anymore?-->
+      <!--div(v-if='brokenChallengeTask.challenge.broken === "UNSUBSCRIBED"')p {{ $t('unsubChallenge') }}
 p
   a(@click="unlink('keep-all')") {{ $t('keepThem') }}
   | &nbsp;|&nbsp;
-  a(@click="unlink('remove-all')") {{ $t('removeThem') }}-->
+      a(@click="unlink('remove-all')") {{ $t('removeThem') }}-->
     </div>
   </b-modal>
 </template>
diff --git a/website/client/src/components/tasks/clearCompletedTodos.vue b/website/client/src/components/tasks/clearCompletedTodos.vue
index f308463eba..bb2621e93a 100644
--- a/website/client/src/components/tasks/clearCompletedTodos.vue
+++ b/website/client/src/components/tasks/clearCompletedTodos.vue
@@ -2,7 +2,8 @@
   <div class="text-center delete-completed">
     <div class="help-text">
       {{ $t('clearCompletedDescription') }}
-    </div><div
+    </div>
+    <div
       class="btn btn-danger"
       @click="clearTodos()"
     >
diff --git a/website/client/src/components/tasks/column.vue b/website/client/src/components/tasks/column.vue
index 881dd0965b..a9e252742b 100644
--- a/website/client/src/components/tasks/column.vue
+++ b/website/client/src/components/tasks/column.vue
@@ -3,21 +3,25 @@
     class="tasks-column"
     :class="type"
   >
-    <b-modal ref="editTaskModal" /><buy-quest-modal
+    <b-modal ref="editTaskModal" />
+    <buy-quest-modal
       v-if="type === 'reward'"
       :item="selectedItemToBuy || {}"
       :price-type="selectedItemToBuy ? selectedItemToBuy.currency : ''"
       :with-pin="true"
       @change="resetItemToBuy($event)"
-    /><div class="d-flex align-items-center">
+    />
+    <div class="d-flex align-items-center">
       <h2 class="column-title">
         {{ $t(typeLabel) }}
-      </h2><div
+      </h2>
+      <div
         v-if="badgeCount > 0"
         class="badge badge-pill badge-purple column-badge mx-1"
       >
         {{ badgeCount }}
-      </div><div class="filters d-flex justify-content-end">
+      </div>
+      <div class="filters d-flex justify-content-end">
         <div
           v-for="filter in typeFilters"
           class="filter small-text"
@@ -27,7 +31,8 @@
           {{ $t(filter) }}
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       ref="tasksWrapper"
       class="tasks-list"
     >
@@ -41,13 +46,18 @@
         @keypress.enter="quickAdd"
         @focus="quickAddFocused = true"
         @blur="quickAddFocused = false"
-      ></textarea><transition name="quick-add-tip-slide">
+      ></textarea>
+      <transition name="quick-add-tip-slide">
         <div
           v-show="quickAddFocused"
           class="quick-add-tip small-text"
           v-html="$t('addMultipleTip', {taskType: $t(typeLabel)})"
         ></div>
-      </transition><clear-completed-todos v-if="activeFilter.label === 'complete2' && isUser === true && taskList.length > 0" /><div
+      </transition>
+      <clear-completed-todos
+        v-if="activeFilter.label === 'complete2' && isUser === true && taskList.length > 0"
+      />
+      <div
         v-if="isUser === true"
         ref="columnBackground"
         class="column-background"
@@ -58,12 +68,15 @@
           class="svg-icon"
           :class="`icon-${type}`"
           v-html="icons[type]"
-        ></div><h3 v-once>
+        ></div>
+        <h3 v-once>
           {{ $t('theseAreYourTasks', {taskType: $t(typeLabel)}) }}
-        </h3><div class="small-text">
+        </h3>
+        <div class="small-text">
           {{ $t(`${type}sDesc`) }}
         </div>
-      </div><draggable
+      </div>
+      <draggable
         ref="tasksList"
         class="sortable-tasks"
         :options="{disabled: activeFilter.label === 'scheduled' || !isUser, scrollSensitivity: 64}"
@@ -82,7 +95,8 @@
           @moveTo="moveTo"
           @taskDestroyed="taskDestroyed"
         />
-      </draggable><template v-if="hasRewardsList">
+      </draggable>
+      <template v-if="hasRewardsList">
         <draggable
           ref="rewardsList"
           class="reward-items"
@@ -107,10 +121,12 @@
                 class="badge badge-pill badge-item badge-svg"
                 :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.highlightBorder}"
                 @click.prevent.stop="togglePinned(ctx.item)"
-              ><span
-                class="svg-icon inline icon-12 color"
-                v-html="icons.pin"
-              ></span></span>
+              >
+                <span
+                  class="svg-icon inline icon-12 color"
+                  v-html="icons.pin"
+                ></span>
+              </span>
             </template>
           </shopItem>
         </draggable>
diff --git a/website/client/src/components/tasks/spells.vue b/website/client/src/components/tasks/spells.vue
index 4e0f2d1a4a..d2cb17cc67 100644
--- a/website/client/src/components/tasks/spells.vue
+++ b/website/client/src/components/tasks/spells.vue
@@ -9,17 +9,21 @@
         <div class="col-8 details">
           <p class="title">
             {{ spell.text() }}
-          </p><p class="notes">
+          </p>
+          <p class="notes">
             {{ `Click on a ${spell.target} to cast!` }}
-          </p><!-- @TODO make that translatable-->
-        </div><div class="col-4 mana">
+          </p>
+          <!-- @TODO make that translatable-->
+        </div>
+        <div class="col-4 mana">
           <div
             class="img"
             :class="`shop_${spell.key} shop-sprite item-img`"
           ></div>
         </div>
       </div>
-    </div><div class="drawer-wrapper d-flex justify-content-center">
+    </div>
+    <div class="drawer-wrapper d-flex justify-content-center">
       <drawer
         v-if="user.stats.class && !user.preferences.disableClasses"
         v-mousePosition="30"
@@ -40,16 +44,20 @@
               >
                 <div class="spell col-12 row">
                   <div class="col-8 details">
-                    <a :class="{'disabled': spellDisabled(key)}"></a><div
+                    <a :class="{'disabled': spellDisabled(key)}"></a>
+                    <div
                       class="img"
                       :class="`shop_${skill.key} shop-sprite item-img`"
-                    ></div><span class="title">{{ skill.text() }}</span>
-                  </div><div class="col-4 mana">
+                    ></div>
+                    <span class="title">{{ skill.text() }}</span>
+                  </div>
+                  <div class="col-4 mana">
                     <div class="mana-text">
                       <div
                         class="svg-icon"
                         v-html="icons.mana"
-                      ></div><div>{{ skill.mana }}</div>
+                      ></div>
+                      <div>{{ skill.mana }}</div>
                     </div>
                   </div>
                 </div>
diff --git a/website/client/src/components/tasks/tagsPopup.vue b/website/client/src/components/tasks/tagsPopup.vue
index 2097267f3d..16e59b4670 100644
--- a/website/client/src/components/tasks/tagsPopup.vue
+++ b/website/client/src/components/tasks/tagsPopup.vue
@@ -8,7 +8,8 @@
     >
       <div class="tags-header">
         <strong v-once>{{ $t(tagsType.key) }}</strong>
-      </div><div class="tags-list container">
+      </div>
+      <div class="tags-list container">
         <div class="row">
           <div
             v-for="(tag, tagIndex) in tagsType.tags"
@@ -21,7 +22,8 @@
                 class="custom-control-input"
                 type="checkbox"
                 :value="tag.id"
-              ><label
+              >
+              <label
                 v-markdown="tag.name"
                 class="custom-control-label"
                 :title="tag.name"
@@ -31,11 +33,13 @@
           </div>
         </div>
       </div>
-    </div><div class="tags-footer">
+    </div>
+    <div class="tags-footer">
       <span
         class="clear-tags"
         @click="clearTags()"
-      >{{ $t("clearTags") }}</span><span
+      >{{ $t("clearTags") }}</span>
+      <span
         class="close-tags"
         @click="close()"
       >{{ $t("close") }}</span>
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index 6ea8e84a84..e37611ba86 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -9,11 +9,13 @@
         v-if="task.group.id"
         :task="task"
         :group="group"
-      /><div
+      />
+      <div
         class="d-flex"
         :class="{'task-not-scoreable': isUser !== true}"
       >
-        <!-- Habits left side control--><div
+        <!-- Habits left side control-->
+        <div
           v-if="task.type === 'habit'"
           class="left-control d-flex align-items-center justify-content-center"
           :class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.up.bg]"
@@ -28,13 +30,16 @@
               class="svg-icon lock"
               :class="controlClass.up.icon"
               v-html="icons.lock"
-            ></div><div
+            ></div>
+            <div
               v-else
               class="svg-icon positive"
               v-html="icons.positive"
             ></div>
           </div>
-        </div><!-- Dailies and todos left side control--><div
+        </div>
+        <!-- Dailies and todos left side control-->
+        <div
           v-if="task.type === 'daily' || task.type === 'todo'"
           class="left-control d-flex justify-content-center"
           :class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.bg]"
@@ -49,14 +54,17 @@
               class="svg-icon lock"
               :class="controlClass.icon"
               v-html="icons.lock"
-            ></div><div
+            ></div>
+            <div
               v-else
               class="svg-icon check"
               :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}"
               v-html="icons.check"
             ></div>
           </div>
-        </div><!-- Task title, description and icons--><div
+        </div>
+        <!-- Task title, description and icons-->
+        <div
           class="task-content"
           :class="contentClass"
         >
@@ -70,7 +78,8 @@
                 v-markdown="task.text"
                 class="task-title"
                 :class="{ 'has-notes': task.notes }"
-              ></h3><menu-dropdown
+              ></h3>
+              <menu-dropdown
                 v-if="!isRunningYesterdailies && showOptions"
                 ref="taskDropdown"
                 v-b-tooltip.hover.top="$t('options')"
@@ -82,51 +91,69 @@
                     class="svg-icon dropdown-icon"
                     v-html="icons.menu"
                   ></div>
-                </div><div slot="dropdown-content">
+                </div>
+                <div slot="dropdown-content">
                   <div
                     ref="editTaskItem"
                     class="dropdown-item edit-task-item"
                   >
-                    <span class="dropdown-icon-item"><span
-                      class="svg-icon inline edit-icon"
-                      v-html="icons.edit"
-                    ></span><span class="text">{{ $t('edit') }}</span></span>
-                  </div><div
+                    <span class="dropdown-icon-item">
+                      <span
+                        class="svg-icon inline edit-icon"
+                        v-html="icons.edit"
+                      ></span>
+                      <span class="text">{{ $t('edit') }}</span>
+                    </span>
+                  </div>
+                  <div
                     v-if="isUser"
                     class="dropdown-item"
                     @click="moveToTop"
                   >
-                    <span class="dropdown-icon-item"><span
-                      class="svg-icon inline push-to-top"
-                      v-html="icons.top"
-                    ></span><span class="text">{{ $t('taskToTop') }}</span></span>
-                  </div><div
+                    <span class="dropdown-icon-item">
+                      <span
+                        class="svg-icon inline push-to-top"
+                        v-html="icons.top"
+                      ></span>
+                      <span class="text">{{ $t('taskToTop') }}</span>
+                    </span>
+                  </div>
+                  <div
                     v-if="isUser"
                     class="dropdown-item"
                     @click="moveToBottom"
                   >
-                    <span class="dropdown-icon-item"><span
-                      class="svg-icon inline push-to-bottom"
-                      v-html="icons.bottom"
-                    ></span><span class="text">{{ $t('taskToBottom') }}</span></span>
-                  </div><div
+                    <span class="dropdown-icon-item">
+                      <span
+                        class="svg-icon inline push-to-bottom"
+                        v-html="icons.bottom"
+                      ></span>
+                      <span class="text">{{ $t('taskToBottom') }}</span>
+                    </span>
+                  </div>
+                  <div
                     v-if="canDelete(task)"
                     class="dropdown-item"
                     @click="destroy"
                   >
-                    <span class="dropdown-icon-item delete-task-item"><span
-                      class="svg-icon inline delete"
-                      v-html="icons.delete"
-                    ></span><span class="text">{{ $t('delete') }}</span></span>
+                    <span class="dropdown-icon-item delete-task-item">
+                      <span
+                        class="svg-icon inline delete"
+                        v-html="icons.delete"
+                      ></span>
+                      <span class="text">{{ $t('delete') }}</span>
+                    </span>
                   </div>
                 </div>
               </menu-dropdown>
-            </div><div
+            </div>
+            <div
               v-markdown="task.notes"
               class="task-notes small-text"
               :class="{'has-checklist': task.notes && hasChecklist}"
             ></div>
-          </div><div
+          </div>
+          <div
             v-if="canViewchecklist"
             class="checklist"
             :class="{isOpen: !task.collapseChecklist}"
@@ -142,9 +169,11 @@
                 <div
                   class="svg-icon"
                   v-html="icons.checklist"
-                ></div><span>{{ checklistProgress }}</span>
+                ></div>
+                <span>{{ checklistProgress }}</span>
               </div>
-            </div><div
+            </div>
+            <div
               v-for="item in task.checklist"
               v-if="!task.collapseChecklist"
               class="custom-control custom-checkbox checklist-item"
@@ -157,13 +186,15 @@
                 :checked="item.completed"
                 :disabled="castingSpell || !isUser"
                 @change="toggleChecklistItem(item)"
-              ><label
+              >
+              <label
                 v-markdown="item.text"
                 class="custom-control-label"
                 :for="`checklist-${item.id}-${random}`"
               ></label>
             </div>
-          </div><div class="icons small-text d-flex align-items-center">
+          </div>
+          <div class="icons small-text d-flex align-items-center">
             <div
               v-if="task.type === 'todo' && task.date"
               class="d-flex align-items-center"
@@ -173,8 +204,10 @@
                 v-b-tooltip.hover.bottom="$t('dueDate')"
                 class="svg-icon calendar"
                 v-html="icons.calendar"
-              ></div><span>{{ dueIn }}</span>
-            </div><div class="icons-right d-flex justify-content-end">
+              ></div>
+              <span>{{ dueIn }}</span>
+            </div>
+            <div class="icons-right d-flex justify-content-end">
               <div
                 v-if="showStreak"
                 class="d-flex align-items-center"
@@ -183,17 +216,24 @@
                   v-b-tooltip.hover.bottom="$t('streakCounter')"
                   class="svg-icon streak"
                   v-html="icons.streak"
-                ></div><span v-if="task.type === 'daily'">{{ task.streak }}</span><span v-if="task.type === 'habit'"><span
-                  v-if="task.up"
-                  class="m-0"
-                >+{{ task.counterUp }}</span><span
-                  v-if="task.up && task.down"
-                  class="m-0"
-                >&nbsp;|&nbsp;</span><span
-                  v-if="task.down"
-                  class="m-0"
-                >-{{ task.counterDown }}</span></span>
-              </div><div
+                ></div>
+                <span v-if="task.type === 'daily'">{{ task.streak }}</span>
+                <span v-if="task.type === 'habit'">
+                  <span
+                    v-if="task.up"
+                    class="m-0"
+                  >+{{ task.counterUp }}</span>
+                  <span
+                    v-if="task.up && task.down"
+                    class="m-0"
+                  >&nbsp;|&nbsp;</span>
+                  <span
+                    v-if="task.down"
+                    class="m-0"
+                  >-{{ task.counterDown }}</span>
+                </span>
+              </div>
+              <div
                 v-if="task.challenge && task.challenge.id"
                 class="d-flex align-items-center"
               >
@@ -202,14 +242,16 @@
                   v-b-tooltip.hover.bottom="shortName"
                   class="svg-icon challenge"
                   v-html="icons.challenge"
-                ></div><div
+                ></div>
+                <div
                   v-if="task.challenge.broken"
                   v-b-tooltip.hover.bottom="$t('brokenChaLink')"
                   class="svg-icon challenge broken"
                   @click="handleBrokenTask(task)"
                   v-html="icons.brokenChallengeIcon"
                 ></div>
-              </div><div
+              </div>
+              <div
                 v-if="hasTags"
                 :id="`tags-icon-${task._id}`"
                 class="d-flex align-items-center"
@@ -218,7 +260,8 @@
                   class="svg-icon tags"
                   v-html="icons.tags"
                 ></div>
-              </div><b-popover
+              </div>
+              <b-popover
                 v-if="hasTags"
                 :target="`tags-icon-${task._id}`"
                 triggers="hover"
@@ -231,7 +274,8 @@
                       class="tags-popover-title"
                     >
                       {{ `${$t('tags')}:` }}
-                    </div><div
+                    </div>
+                    <div
                       v-for="tag in getTagsFor(task)"
                       v-markdown="tag"
                       class="tag-label"
@@ -241,7 +285,9 @@
               </b-popover>
             </div>
           </div>
-        </div><!-- Habits right side control--><div
+        </div>
+        <!-- Habits right side control-->
+        <div
           v-if="task.type === 'habit'"
           class="right-control d-flex align-items-center justify-content-center"
           :class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.down.bg]"
@@ -256,13 +302,16 @@
               class="svg-icon lock"
               :class="controlClass.down.icon"
               v-html="icons.lock"
-            ></div><div
+            ></div>
+            <div
               v-else
               class="svg-icon negative"
               v-html="icons.negative"
             ></div>
           </div>
-        </div><!-- Rewards right side control--><div
+        </div>
+        <!-- Rewards right side control-->
+        <div
           v-if="task.type === 'reward'"
           class="right-control d-flex align-items-center justify-content-center reward-control"
           :class="controlClass.bg"
@@ -271,11 +320,13 @@
           <div
             class="svg-icon"
             v-html="icons.gold"
-          ></div><div class="small-text">
+          ></div>
+          <div class="small-text">
             {{ task.value }}
           </div>
         </div>
-      </div><approval-footer
+      </div>
+      <approval-footer
         v-if="task.group.id"
         :task="task"
         :group="group"
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index 9800e7c91d..0db09c94f1 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -18,12 +18,14 @@
       <div class="clearfix">
         <h1 class="float-left">
           {{ title }}
-        </h1><div class="float-right d-flex align-items-center">
+        </h1>
+        <div class="float-right d-flex align-items-center">
           <span
             v-once
             class="cancel-task-btn mr-2"
             @click="cancel()"
-          >{{ $t('cancel') }}</span><button
+          >{{ $t('cancel') }}</span>
+          <button
             v-once
             class="btn btn-secondary"
             @click="submit()"
@@ -31,8 +33,10 @@
             {{ $t('save') }}
           </button>
         </div>
-      </div><div class="form-group">
-        <label v-once>{{ `${$t('text')}*` }}</label><input
+      </div>
+      <div class="form-group">
+        <label v-once>{{ `${$t('text')}*` }}</label>
+        <input
           ref="inputToFocus"
           v-model="task.text"
           class="form-control title-input"
@@ -41,20 +45,28 @@
           spellcheck="true"
           :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
         >
-      </div><div class="form-group">
+      </div>
+      <div class="form-group">
         <label
           v-once
           class="d-flex align-items-center justify-content-between"
-        ><span>{{ $t('notes') }}</span><small v-once><a
-          target="_blank"
-          href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet"
-        >{{ $t('markdownHelpLink') }}</a></small></label><textarea
+        >
+          <span>{{ $t('notes') }}</span>
+          <small v-once>
+            <a
+              target="_blank"
+              href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet"
+            >{{ $t('markdownHelpLink') }}</a>
+          </small>
+        </label>
+        <textarea
           v-model="task.notes"
           class="form-control"
           rows="3"
         ></textarea>
       </div>
-    </div><div
+    </div>
+    <div
       class="task-modal-content"
       @click="handleClick($event)"
     >
@@ -68,13 +80,15 @@
           class="option mt-0"
         >
           <div class="form-group">
-            <label v-once>{{ $t('cost') }}</label><div class="input-group">
+            <label v-once>{{ $t('cost') }}</label>
+            <div class="input-group">
               <div class="input-group-prepend input-group-icon align-items-center">
                 <div
                   class="svg-icon gold"
                   v-html="icons.gold"
                 ></div>
-              </div><input
+              </div>
+              <input
                 v-model="task.value"
                 class="form-control"
                 type="number"
@@ -85,11 +99,14 @@
               >
             </div>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="checklistEnabled"
           class="option mt-0"
         >
-          <label v-once>{{ $t('checklist') }}</label><br><draggable
+          <label v-once>{{ $t('checklist') }}</label>
+          <br>
+          <draggable
             v-model="checklist"
             :options="{handle: '.grippy', filter: '.task-dropdown'}"
             @update="sortedChecklist"
@@ -98,26 +115,32 @@
               v-for="(item, $index) in checklist"
               class="inline-edit-input-group checklist-group input-group"
             >
-              <span class="grippy"></span><input
+              <span class="grippy"></span>
+              <input
                 v-model="item.text"
                 class="inline-edit-input checklist-item form-control"
                 type="text"
-              ><span
+              >
+              <span
                 class="input-group-append"
                 @click="removeChecklistItem($index)"
-              ><div
-                class="svg-icon destroy-icon"
-                v-html="icons.destroy"
-              ></div></span>
+              >
+                <div
+                  class="svg-icon destroy-icon"
+                  v-html="icons.destroy"
+                ></div>
+              </span>
             </div>
-          </draggable><input
+          </draggable>
+          <input
             v-model="newChecklistItem"
             class="inline-edit-input checklist-item form-control"
             type="text"
             :placeholder="$t('newChecklistItem')"
             @keydown.enter="addChecklistItem($event)"
           >
-        </div><div
+        </div>
+        <div
           v-if="task.type === 'habit'"
           class="d-flex justify-content-center"
         >
@@ -137,13 +160,15 @@
                   v-html="icons.positive"
                 ></div>
               </div>
-            </div><div
+            </div>
+            <div
               class="option-item-label"
               :class="task.up ? cssClass('text') : ''"
             >
               {{ $t('positive') }}
             </div>
-          </div><div
+          </div>
+          <div
             class="option-item habit-control"
             :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
             @click="toggleDownDirection()"
@@ -159,19 +184,25 @@
                   v-html="icons.negative"
                 ></div>
               </div>
-            </div><div
+            </div>
+            <div
               class="option-item-label"
               :class="task.down ? cssClass('text') : ''"
             >
               {{ $t('negative') }}
             </div>
           </div>
-        </div><template v-if="task.type !== 'reward'">
-          <label v-once><span class="float-left">{{ $t('difficulty') }}</span><div
-            v-b-tooltip.hover.righttop="$t('difficultyHelp')"
-            class="svg-icon info-icon"
-            v-html="icons.information"
-          ></div></label><div class="d-flex justify-content-center difficulty-options">
+        </div>
+        <template v-if="task.type !== 'reward'">
+          <label v-once>
+            <span class="float-left">{{ $t('difficulty') }}</span>
+            <div
+              v-b-tooltip.hover.righttop="$t('difficultyHelp')"
+              class="svg-icon info-icon"
+              v-html="icons.information"
+            ></div>
+          </label>
+          <div class="d-flex justify-content-center difficulty-options">
             <div
               class="option-item"
               :class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')"
@@ -185,13 +216,15 @@
                   class="svg-icon difficulty-trivial-icon"
                   v-html="icons.difficultyTrivial"
                 ></div>
-              </div><div
+              </div>
+              <div
                 class="option-item-label"
                 :class="task.priority === 0.1 ? cssClass('text') : ''"
               >
                 {{ $t('trivial') }}
               </div>
-            </div><div
+            </div>
+            <div
               class="option-item"
               :class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')"
               @click="setDifficulty(1)"
@@ -204,13 +237,15 @@
                   class="svg-icon difficulty-normal-icon"
                   v-html="icons.difficultyNormal"
                 ></div>
-              </div><div
+              </div>
+              <div
                 class="option-item-label"
                 :class="task.priority === 1 ? cssClass('text') : ''"
               >
                 {{ $t('easy') }}
               </div>
-            </div><div
+            </div>
+            <div
               class="option-item"
               :class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')"
               @click="setDifficulty(1.5)"
@@ -223,13 +258,15 @@
                   class="svg-icon difficulty-medium-icon"
                   v-html="icons.difficultyMedium"
                 ></div>
-              </div><div
+              </div>
+              <div
                 class="option-item-label"
                 :class="task.priority === 1.5 ? cssClass('text') : ''"
               >
                 {{ $t('medium') }}
               </div>
-            </div><div
+            </div>
+            <div
               class="option-item"
               :class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')"
               @click="setDifficulty(2)"
@@ -242,7 +279,8 @@
                   class="svg-icon difficulty-hard-icon"
                   v-html="icons.difficultyHard"
                 ></div>
-              </div><div
+              </div>
+              <div
                 class="option-item-label"
                 :class="task.priority === 2 ? cssClass('text') : ''"
               >
@@ -250,12 +288,14 @@
               </div>
             </div>
           </div>
-        </template><div
+        </template>
+        <div
           v-if="task.type === 'todo'"
           class="option"
         >
           <div class="form-group">
-            <label v-once>{{ $t('dueDate') }}</label><datepicker
+            <label v-once>{{ $t('dueDate') }}</label>
+            <datepicker
               v-model="task.date"
               :calendar-icon="icons.calendar"
               :clear-button="true"
@@ -266,12 +306,14 @@
               :highlighted="calendarHighlights"
             />
           </div>
-        </div><div
+        </div>
+        <div
           v-if="task.type === 'daily'"
           class="option"
         >
           <div class="form-group">
-            <label v-once>{{ $t('startDate') }}</label><datepicker
+            <label v-once>{{ $t('startDate') }}</label>
+            <datepicker
               v-model="task.startDate"
               :calendar-icon="icons.calendar"
               :clear-button="false"
@@ -281,12 +323,14 @@
               :highlighted="calendarHighlights"
             />
           </div>
-        </div><div
+        </div>
+        <div
           v-if="task.type === 'daily'"
           class="option"
         >
           <div class="form-group">
-            <label v-once>{{ $t('repeats') }}</label><b-dropdown
+            <label v-once>{{ $t('repeats') }}</label>
+            <b-dropdown
               class="inline-dropdown"
               :text="$t(task.frequency)"
             >
@@ -300,8 +344,10 @@
                 {{ $t(frequency) }}
               </b-dropdown-item>
             </b-dropdown>
-          </div><div class="form-group">
-            <label v-once>{{ $t('repeatEvery') }}</label><div class="input-group">
+          </div>
+          <div class="form-group">
+            <label v-once>{{ $t('repeatEvery') }}</label>
+            <div class="input-group">
               <input
                 v-model="task.everyX"
                 class="form-control"
@@ -310,16 +356,19 @@
                 max="9999"
                 required="required"
                 :disabled="challengeAccessRequired"
-              ><div class="input-group-append input-group-text">
+              >
+              <div class="input-group-append input-group-text">
                 {{ repeatSuffix }}
               </div>
             </div>
-          </div><template v-if="task.frequency === 'weekly'">
+          </div>
+          <template v-if="task.frequency === 'weekly'">
             <div class="form-group">
               <label
                 v-once
                 class="d-block"
-              >{{ $t('repeatOn') }}</label><div
+              >{{ $t('repeatOn') }}</label>
+              <div
                 v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']"
                 :key="dayNumber"
                 class="form-check-inline weekday-check mr-0"
@@ -331,7 +380,8 @@
                     class="custom-control-input"
                     type="checkbox"
                     :disabled="challengeAccessRequired"
-                  ><label
+                  >
+                  <label
                     v-once
                     class="custom-control-label"
                     :for="`weekday-${dayNumber}`"
@@ -339,11 +389,13 @@
                 </div>
               </div>
             </div>
-          </template><template v-if="task.frequency === 'monthly'">
+          </template>
+          <template v-if="task.frequency === 'monthly'">
             <label
               v-once
               class="d-block"
-            >{{ $t('repeatOn') }}</label><div class="form-radio">
+            >{{ $t('repeatOn') }}</label>
+            <div class="form-radio">
               <div class="custom-control custom-radio custom-control-inline">
                 <input
                   id="repeat-dayOfMonth"
@@ -352,11 +404,13 @@
                   type="radio"
                   value="dayOfMonth"
                   name="repeatsOn"
-                ><label
+                >
+                <label
                   class="custom-control-label"
                   for="repeat-dayOfMonth"
                 >{{ $t('dayOfMonth') }}</label>
-              </div><div class="custom-control custom-radio custom-control-inline">
+              </div>
+              <div class="custom-control custom-radio custom-control-inline">
                 <input
                   id="repeat-dayOfWeek"
                   v-model="repeatsOn"
@@ -364,14 +418,16 @@
                   type="radio"
                   value="dayOfWeek"
                   name="repeatsOn"
-                ><label
+                >
+                <label
                   class="custom-control-label"
                   for="repeat-dayOfWeek"
                 >{{ $t('dayOfWeek') }}</label>
               </div>
             </div>
           </template>
-        </div><div
+        </div>
+        <div
           v-if="isUserTask"
           class="tags-select option"
         >
@@ -379,7 +435,8 @@
             <label
               v-once
               class="col-12"
-            >{{ $t('tags') }}</label><div class="col-12">
+            >{{ $t('tags') }}</label>
+            <div class="col-12">
               <div
                 class="category-wrap"
                 :class="{ active: showTagsSelect }"
@@ -388,33 +445,44 @@
                 <span
                   v-if="task.tags && task.tags.length === 0"
                   class="category-select"
-                ><div class="tags-none">{{ $t('none') }}</div><div class="dropdown-toggle"></div></span><span
+                >
+                  <div class="tags-none">{{ $t('none') }}</div>
+                  <div class="dropdown-toggle"></div>
+                </span>
+                <span
                   v-else
                   class="category-select"
-                ><div
-                  v-for="tagName in truncatedSelectedTags"
-                  v-markdown="tagName"
-                  class="category-label"
-                  :title="tagName"
-                ></div><div
-                  v-if="remainingSelectedTags.length > 0"
-                  class="tags-more"
-                >+{{ $t('more', { count: remainingSelectedTags.length }) }}</div><div class="dropdown-toggle"></div></span>
+                >
+                  <div
+                    v-for="tagName in truncatedSelectedTags"
+                    v-markdown="tagName"
+                    class="category-label"
+                    :title="tagName"
+                  ></div>
+                  <div
+                    v-if="remainingSelectedTags.length > 0"
+                    class="tags-more"
+                  >+{{ $t('more', { count: remainingSelectedTags.length }) }}</div>
+                  <div class="dropdown-toggle"></div>
+                </span>
               </div>
             </div>
-          </div><tags-popup
+          </div>
+          <tags-popup
             v-if="showTagsSelect"
             ref="popup"
             v-model="task.tags"
             :tags="user.tags"
             @close="closeTagsPopup()"
           />
-        </div><div
+        </div>
+        <div
           v-if="task.type === 'habit'"
           class="option"
         >
           <div class="form-group">
-            <label v-once>{{ $t('resetStreak') }}</label><b-dropdown
+            <label v-once>{{ $t('resetStreak') }}</label>
+            <b-dropdown
               class="inline-dropdown"
               :text="$t(task.frequency)"
               :disabled="challengeAccessRequired"
@@ -429,7 +497,8 @@
               </b-dropdown-item>
             </b-dropdown>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="groupId"
           class="option group-options"
         >
@@ -437,7 +506,8 @@
             v-if="task.type === 'todo'"
             class="form-group"
           >
-            <label v-once>{{ $t('sharedCompletion') }}</label><b-dropdown
+            <label v-once>{{ $t('sharedCompletion') }}</label>
+            <b-dropdown
               class="inline-dropdown"
               :text="$t(sharedCompletion)"
             >
@@ -450,11 +520,13 @@
                 {{ $t(completionOption) }}
               </b-dropdown-item>
             </b-dropdown>
-          </div><div class="form-group row">
+          </div>
+          <div class="form-group row">
             <label
               v-once
               class="col-12"
-            >{{ $t('assignedTo') }}</label><div class="col-12 mt-2">
+            >{{ $t('assignedTo') }}</label>
+            <div class="col-12 mt-2">
               <div
                 class="category-wrap"
                 @click="showAssignedSelect = !showAssignedSelect"
@@ -462,14 +534,18 @@
                 <span
                   v-if="assignedMembers && assignedMembers.length === 0"
                   class="category-select"
-                >{{ $t('none') }}</span><span
+                >{{ $t('none') }}</span>
+                <span
                   v-else
                   class="category-select"
-                ><span
-                  v-for="memberId in assignedMembers"
-                  class="mr-1"
-                >{{ memberNamesById[memberId] }}</span></span>
-              </div><div
+                >
+                  <span
+                    v-for="memberId in assignedMembers"
+                    class="mr-1"
+                  >{{ memberNamesById[memberId] }}</span>
+                </span>
+              </div>
+              <div
                 v-if="showAssignedSelect"
                 class="category-box"
               >
@@ -488,14 +564,16 @@
                           type="checkbox"
                           :value="member._id"
                           @change="toggleAssignment(member._id)"
-                        ><label
+                        >
+                        <label
                           v-once
                           class="custom-control-label"
                           :for="`assigned-${member._id}`"
                         >{{ member.profile.name }}</label>
                       </div>
                     </div>
-                  </div><div class="row">
+                  </div>
+                  <div class="row">
                     <button
                       class="btn btn-primary"
                       @click.stop.prevent="showAssignedSelect = !showAssignedSelect"
@@ -506,14 +584,17 @@
                 </div>
               </div>
             </div>
-          </div><div class="form-group">
-            <label v-once>{{ $t('approvalRequired') }}</label><toggle-switch
+          </div>
+          <div class="form-group">
+            <label v-once>{{ $t('approvalRequired') }}</label>
+            <toggle-switch
               class="d-inline-block"
               :checked="requiresApproval"
               @change="updateRequiresApproval"
             />
           </div>
-        </div><div
+        </div>
+        <div
           v-if="task.type !== 'reward'"
           class="advanced-settings"
         >
@@ -521,14 +602,16 @@
             class="advanced-settings-toggle d-flex justify-content-between align-items-center"
             @click="showAdvancedOptions = !showAdvancedOptions"
           >
-            <h3>{{ $t('advancedSettings') }}</h3><div class="toggle-up">
+            <h3>{{ $t('advancedSettings') }}</h3>
+            <div class="toggle-up">
               <div
                 class="svg-icon"
                 :class="{'toggle-open': showAdvancedOptions}"
                 v-html="icons.down"
               ></div>
             </div>
-          </div><b-collapse
+          </div>
+          <b-collapse
             id="advancedOptionsCollapse"
             v-model="showAdvancedOptions"
           >
@@ -538,13 +621,15 @@
                 class="option"
               >
                 <div class="form-group">
-                  <label v-once>{{ $t('restoreStreak') }}</label><div class="input-group">
+                  <label v-once>{{ $t('restoreStreak') }}</label>
+                  <div class="input-group">
                     <div class="input-group-prepend streak-addon input-group-icon">
                       <div
                         class="svg-icon"
                         v-html="icons.streak"
                       ></div>
-                    </div><input
+                    </div>
+                    <input
                       v-model="task.streak"
                       class="form-control"
                       type="number"
@@ -553,12 +638,14 @@
                     >
                   </div>
                 </div>
-              </div><div
+              </div>
+              <div
                 v-if="task.type === 'habit' && isUserTask && purpose === 'edit' && (task.up || task.down)"
                 class="option"
               >
                 <div class="form-group">
-                  <label v-once>{{ $t('restoreStreak') }}</label><div class="row">
+                  <label v-once>{{ $t('restoreStreak') }}</label>
+                  <div class="row">
                     <div
                       v-if="task.up"
                       class="col-6"
@@ -569,7 +656,8 @@
                             class="svg-icon"
                             v-html="icons.positive"
                           ></div>
-                        </div><input
+                        </div>
+                        <input
                           v-model="task.counterUp"
                           class="form-control"
                           type="number"
@@ -577,7 +665,8 @@
                           required="required"
                         >
                       </div>
-                    </div><div
+                    </div>
+                    <div
                       v-if="task.down"
                       class="col-6"
                     >
@@ -587,7 +676,8 @@
                             class="svg-icon"
                             v-html="icons.negative"
                           ></div>
-                        </div><input
+                        </div>
+                        <input
                           v-model="task.counterDown"
                           class="form-control"
                           type="number"
@@ -598,17 +688,19 @@
                     </div>
                   </div>
                 </div>
-              </div><!--.option(v-if="isUserTask && task.type !== 'reward'").form-group
+              </div>
+              <!--.option(v-if="isUserTask && task.type !== 'reward'").form-group
   label(v-once)
     span.float-left {{ $t('attributeAllocation') }}
     .svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop.html="$t('attributeAllocationHelp')")
   .attributes
     .custom-control.custom-radio.custom-control-inline(v-for="attr in ATTRIBUTES", :key="attr")
       input.custom-control-input(:id="`attribute-${attr}`", type="radio", :value="attr", v-model="task.attribute", :disabled="user.preferences.allocationMode !== 'taskbased'")
-      label.custom-control-label.attr-description(:for="`attribute-${attr}`", v-once, v-b-popover.hover="$t(`${attr}Text`)") {{ $t(attributesStrings[attr]) }}-->
+              label.custom-control-label.attr-description(:for="`attribute-${attr}`", v-once, v-b-popover.hover="$t(`${attr}Text`)") {{ $t(attributesStrings[attr]) }}-->
             </div>
           </b-collapse>
-        </div><div
+        </div>
+        <div
           v-if="purpose !== 'create' && !challengeAccessRequired"
           class="delete-task-btn d-flex justify-content-center align-items-middle"
           @click="destroy()"
@@ -616,10 +708,12 @@
           <div
             class="svg-icon d-inline-b"
             v-html="icons.destroy"
-          ></div><span>{{ $t('deleteTask') }}</span>
+          ></div>
+          <span>{{ $t('deleteTask') }}</span>
         </div>
       </form>
-    </div><div
+    </div>
+    <div
       slot="modal-footer"
       class="task-modal-footer d-flex justify-content-center align-items-center"
       @click="handleClick($event)"
@@ -630,7 +724,8 @@
         @click="cancel()"
       >
         {{ $t('cancel') }}
-      </div><button
+      </div>
+      <button
         v-once
         class="btn btn-primary"
         @click="submit()"
diff --git a/website/client/src/components/tasks/user.vue b/website/client/src/components/tasks/user.vue
index b101e03338..4d6478443a 100644
--- a/website/client/src/components/tasks/user.vue
+++ b/website/client/src/components/tasks/user.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="row user-tasks-page">
-    <broken-task-modal /><task-modal
+    <broken-task-modal />
+    <task-modal
       ref="taskModal"
       :task="editingTask || creatingTask"
       :purpose="creatingTask !== null ? 'create' : 'edit'"
       @cancel="cancelTaskModal()"
-    /><div class="col-12">
+    />
+    <div class="col-12">
       <div class="row tasks-navigation">
         <div class="col-12 col-md-4 offset-md-4">
           <div class="d-flex">
@@ -14,7 +16,8 @@
               class="form-control input-search"
               type="text"
               :placeholder="$t('search')"
-            ><button
+            >
+            <button
               class="btn btn-secondary dropdown-toggle ml-2 d-flex align-items-center search-button"
               type="button"
               :class="{active: selectedTags.length > 0}"
@@ -23,9 +26,11 @@
               <div
                 class="svg-icon filter-icon mr-2"
                 v-html="icons.filter"
-              ></div><span v-once>{{ $t('tags') }}</span>
+              ></div>
+              <span v-once>{{ $t('tags') }}</span>
             </button>
-          </div><div
+          </div>
+          <div
             v-if="isFilterPanelOpen"
             class="filter-panel"
             @mouseleave="checkMouseOver"
@@ -37,12 +42,14 @@
               class="tags-category d-flex"
             >
               <div class="tags-header">
-                <strong v-once>{{ $t(tagsType.key) }}</strong><a
+                <strong v-once>{{ $t(tagsType.key) }}</strong>
+                <a
                   v-if="tagsType.key !== 'groups' && !editingTags"
                   class="d-block"
                   @click="editTags(tagsType.key)"
                 >{{ $t('editTags2') }}</a>
-              </div><div class="tags-list container">
+              </div>
+              <div class="tags-list container">
                 <div
                   class="row"
                   :class="{'no-gutters': !editingTags}"
@@ -61,11 +68,13 @@
                           <div
                             class="svg-icon inline drag"
                             v-html="icons.drag"
-                          ></div><input
+                          ></div>
+                          <input
                             v-model="tag.name"
                             class="tag-edit-input inline-edit-input form-control"
                             type="text"
-                          ><div
+                          >
+                          <div
                             class="input-group-append"
                             @click="removeTag(tagIndex, tagsType.key)"
                           >
@@ -75,7 +84,8 @@
                             ></div>
                           </div>
                         </div>
-                      </div><div class="col-6 dragSpace">
+                      </div>
+                      <div class="col-6 dragSpace">
                         <input
                           v-model="newTag"
                           class="new-tag-item edit-tag-item inline-edit-input form-control"
@@ -85,7 +95,8 @@
                         >
                       </div>
                     </draggable>
-                  </template><template v-if="editingTags && tagsType.key === 'challenges'">
+                  </template>
+                  <template v-if="editingTags && tagsType.key === 'challenges'">
                     <div
                       v-for="(tag, tagIndex) in tagsSnap[tagsType.key]"
                       class="col-6"
@@ -95,7 +106,8 @@
                           v-model="tag.name"
                           class="tag-edit-input inline-edit-input form-control"
                           type="text"
-                        ><div
+                        >
+                        <div
                           class="input-group-append"
                           @click="removeTag(tagIndex, tagsType.key)"
                         >
@@ -106,7 +118,8 @@
                         </div>
                       </div>
                     </div>
-                  </template><template v-if="!editingTags || tagsType.key === 'groups'">
+                  </template>
+                  <template v-if="!editingTags || tagsType.key === 'groups'">
                     <div
                       v-for="(tag, tagIndex) in tagsType.tags"
                       class="col-6"
@@ -118,7 +131,8 @@
                           type="checkbox"
                           :checked="isTagSelected(tag)"
                           @change="toggleTag(tag)"
-                        ><label
+                        >
+                        <label
                           v-markdown="tag.name"
                           class="custom-control-label"
                           :for="`tag-${tag.id}`"
@@ -128,27 +142,31 @@
                   </template>
                 </div>
               </div>
-            </div><div class="filter-panel-footer clearfix">
+            </div>
+            <div class="filter-panel-footer clearfix">
               <template v-if="editingTags === true">
                 <div class="text-center">
                   <a
                     v-once
                     class="mr-3 btn-filters-primary"
                     @click="saveTags()"
-                  >{{ $t('saveEdits') }}</a><a
+                  >{{ $t('saveEdits') }}</a>
+                  <a
                     v-once
                     class="btn-filters-secondary"
                     @click="cancelTagsEditing()"
                   >{{ $t('cancel') }}</a>
                 </div>
-              </template><template v-else>
+              </template>
+              <template v-else>
                 <div class="float-left">
                   <a
                     v-once
                     class="btn-filters-danger"
                     @click="resetFilters()"
                   >{{ $t('resetFilters') }}</a>
-                </div><div class="float-right">
+                </div>
+                <div class="float-right">
                   <a
                     v-once
                     class="btn-filters-secondary"
@@ -158,7 +176,8 @@
               </template>
             </div>
           </div>
-        </div><div class="create-task-area d-flex">
+        </div>
+        <div class="create-task-area d-flex">
           <transition name="slide-tasks-btns">
             <div
               v-if="openCreateBtn"
@@ -178,7 +197,8 @@
                 ></div>
               </div>
             </div>
-          </transition><div
+          </transition>
+          <div
             id="create-task-btn"
             class="create-btn diamond-btn btn btn-success"
             :class="{open: openCreateBtn}"
@@ -188,7 +208,8 @@
               class="svg-icon"
               v-html="icons.positive"
             ></div>
-          </div><b-tooltip
+          </div>
+          <b-tooltip
             v-if="!openCreateBtn"
             target="create-task-btn"
             placement="bottom"
@@ -196,7 +217,8 @@
             {{ $t('addTaskToUser') }}
           </b-tooltip>
         </div>
-      </div><div class="row tasks-columns">
+      </div>
+      <div class="row tasks-columns">
         <task-column
           v-for="column in columns"
           :key="column"
@@ -209,7 +231,8 @@
           @openBuyDialog="openBuyDialog($event)"
         />
       </div>
-    </div><spells />
+    </div>
+    <spells />
   </div>
 </template>
 
diff --git a/website/client/src/components/ui/checkbox.vue b/website/client/src/components/ui/checkbox.vue
index 66ddf700da..fd710ca31c 100644
--- a/website/client/src/components/ui/checkbox.vue
+++ b/website/client/src/components/ui/checkbox.vue
@@ -6,7 +6,8 @@
         v-model="isChecked"
         class="custom-control-input"
         type="checkbox"
-      ><label
+      >
+      <label
         v-once
         class="custom-control-label"
         :for="id"
diff --git a/website/client/src/components/ui/customMenuDropdown.vue b/website/client/src/components/ui/customMenuDropdown.vue
index 3406684ef7..240b9ce5ad 100644
--- a/website/client/src/components/ui/customMenuDropdown.vue
+++ b/website/client/src/components/ui/customMenuDropdown.vue
@@ -14,7 +14,8 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
   >
     <div class="habitica-menu-dropdown-toggle">
       <slot name="dropdown-toggle"></slot>
-    </div><div
+    </div>
+    <div
       class="dropdown-menu"
       :class="{'dropdown-menu-right': right}"
     >
diff --git a/website/client/src/components/ui/drawer.vue b/website/client/src/components/ui/drawer.vue
index 8adce06f67..eaab0f6616 100644
--- a/website/client/src/components/ui/drawer.vue
+++ b/website/client/src/components/ui/drawer.vue
@@ -4,12 +4,14 @@
       class="drawer-title"
       @click="toggle()"
     >
-      {{ title }}<div
+      {{ title }}
+      <div
         class="drawer-toggle-icon svg-icon icon-10"
         :class="{ closed: !isOpen }"
         v-html="isOpen ? icons.minimize : icons.expand"
       ></div>
-    </div><transition
+    </div>
+    <transition
       name="slide-up"
       @afterLeave="adjustPagePadding"
       @afterEnter="adjustPagePadding"
@@ -18,8 +20,10 @@
         v-show="isOpen"
         class="drawer-content"
       >
-        <slot name="drawer-header"></slot><div class="drawer-slider">
-          <slot name="drawer-slider"></slot><div
+        <slot name="drawer-header"></slot>
+        <div class="drawer-slider">
+          <slot name="drawer-slider"></slot>
+          <div
             v-if="errorMessage != null"
             class="message"
           >
diff --git a/website/client/src/components/ui/drawerHeaderTabs.vue b/website/client/src/components/ui/drawerHeaderTabs.vue
index 95bf6da5b0..6a04f70d4f 100644
--- a/website/client/src/components/ui/drawerHeaderTabs.vue
+++ b/website/client/src/components/ui/drawerHeaderTabs.vue
@@ -12,7 +12,8 @@
           @click="changeTab(index)"
         >{{ tab.label }}</a>
       </li>
-    </ul><aside class="help-item">
+    </ul>
+    <aside class="help-item">
       <slot name="right-item"></slot>
     </aside>
   </div>
diff --git a/website/client/src/components/ui/drawerSlider.vue b/website/client/src/components/ui/drawerSlider.vue
index 36060a7105..05d9b26eb9 100644
--- a/website/client/src/components/ui/drawerSlider.vue
+++ b/website/client/src/components/ui/drawerSlider.vue
@@ -5,20 +5,27 @@
       class="slider-button-area left-button"
       @mousedown.left="shiftRight"
     >
-      <a class="slider-button"><div
-        class="svg-icon"
-        v-html="icons.previous"
-      ></div></a>
-    </div><div
+      <a class="slider-button">
+        <div
+          class="svg-icon"
+          v-html="icons.previous"
+        ></div>
+      </a>
+    </div>
+    <div
       v-if="scrollButtonsVisible()"
       class="slider-button-area right-button"
       @mousedown.left="shiftLeft"
     >
-      <a class="slider-button"><div
-        class="svg-icon"
-        v-html="icons.next"
-      ></div></a>
-    </div><!-- 120 = width of the left/right buttons--><div
+      <a class="slider-button">
+        <div
+          class="svg-icon"
+          v-html="icons.next"
+        ></div>
+      </a>
+    </div>
+    <!-- 120 = width of the left/right buttons-->
+    <div
       v-resize="500"
       class="sliding-content"
       @resized="currentWidth = $event.width - 120"
@@ -29,7 +36,8 @@
             v-if="shouldAddVerticalLine(item)"
             class="vertical-divider"
             :style="dividerMargins"
-          ></div><slot
+          ></div>
+          <slot
             name="item"
             :item="item"
           ></slot>
diff --git a/website/client/src/components/ui/filterDropdown.vue b/website/client/src/components/ui/filterDropdown.vue
index a8093e2035..3b8163243c 100644
--- a/website/client/src/components/ui/filterDropdown.vue
+++ b/website/client/src/components/ui/filterDropdown.vue
@@ -1,19 +1,31 @@
 <template>
-  <span><span class="dropdown-label">{{ label }}</span><b-dropdown right="right"><span
-    slot="text"
-    :class="{'dropdown-icon-item': withIcon}"
-  ><slot
-    name="item"
-    :item="selectedItem"
-  ></slot></span><b-dropdown-item
-    v-for="item in items"
-    :key="item.id"
-    :active="selectedItem.id === item.id"
-    @click="selectItem(item)"
-  ><span :class="{'dropdown-icon-item': withIcon}"><slot
-    name="item"
-    :item="item"
-  ></slot></span></b-dropdown-item></b-dropdown></span>
+  <span>
+    <span class="dropdown-label">{{ label }}</span>
+    <b-dropdown right="right">
+      <span
+        slot="text"
+        :class="{'dropdown-icon-item': withIcon}"
+      >
+        <slot
+          name="item"
+          :item="selectedItem"
+        ></slot>
+      </span>
+      <b-dropdown-item
+        v-for="item in items"
+        :key="item.id"
+        :active="selectedItem.id === item.id"
+        @click="selectItem(item)"
+      >
+        <span :class="{'dropdown-icon-item': withIcon}">
+          <slot
+            name="item"
+            :item="item"
+          ></slot>
+        </span>
+      </b-dropdown-item>
+    </b-dropdown>
+  </span>
 </template>
 
 <script>
diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue
index eeb87b472e..f0479722d9 100644
--- a/website/client/src/components/ui/itemRows.vue
+++ b/website/client/src/components/ui/itemRows.vue
@@ -11,17 +11,20 @@
           :item="item"
         ></slot>
       </template>
-    </div><div v-if="items.length === 0">
+    </div>
+    <div v-if="items.length === 0">
       <p v-once>
         {{ noItemsLabel }}
       </p>
-    </div><div
+    </div>
+    <div
       v-if="items.length > itemsPerRow"
       class="btn btn-flat btn-show-more"
       @click="toggleItemsToShow()"
     >
       {{ showAll ? $t('showLess') : $t('showMore') }}
-    </div><div
+    </div>
+    <div
       v-else
       class="fill-height"
     ></div>
diff --git a/website/client/src/components/ui/layoutSection.vue b/website/client/src/components/ui/layoutSection.vue
index bf9aa0d482..cabc28e630 100644
--- a/website/client/src/components/ui/layoutSection.vue
+++ b/website/client/src/components/ui/layoutSection.vue
@@ -3,10 +3,13 @@
     <div class="clearfix">
       <h2 class="float-left mb-3 filters-title">
         {{ title }}
-      </h2><div class="filters float-right">
+      </h2>
+      <div class="filters float-right">
         <slot name="filters"></slot>
       </div>
-    </div><br><slot name="content"></slot>
+    </div>
+    <br>
+    <slot name="content"></slot>
   </div>
 </template>
 
diff --git a/website/client/src/components/ui/pageLayout.vue b/website/client/src/components/ui/pageLayout.vue
index fba3d4be35..8ea3ea380f 100644
--- a/website/client/src/components/ui/pageLayout.vue
+++ b/website/client/src/components/ui/pageLayout.vue
@@ -5,7 +5,8 @@
       class="standard-sidebar d-none d-sm-block"
     >
       <slot name="sidebar"></slot>
-    </div><div class="standard-page">
+    </div>
+    <div class="standard-page">
       <slot name="page"></slot>
     </div>
   </div>
diff --git a/website/client/src/components/ui/statsbar.vue b/website/client/src/components/ui/statsbar.vue
index 53072b191f..667e4e3cbb 100644
--- a/website/client/src/components/ui/statsbar.vue
+++ b/website/client/src/components/ui/statsbar.vue
@@ -8,13 +8,16 @@
     <div
       class="svg-icon"
       v-html="icon"
-    ></div><div class="progress">
+    ></div>
+    <div class="progress">
       <div
         class="progress-bar"
         :class="progressClass"
         :style="{width: `${percent(value, maxValue)}%`}"
       ></div>
-    </div><span class="small-text">{{ value | statFloor }} / {{ maxValue }}</span><b-tooltip
+    </div>
+    <span class="small-text">{{ value | statFloor }} / {{ maxValue }}</span>
+    <b-tooltip
       class="myClass"
       :target="() => $refs.container"
       :container="elementId"
diff --git a/website/client/src/components/ui/toggleSwitch.vue b/website/client/src/components/ui/toggleSwitch.vue
index 977ff1042d..c1c06036dc 100644
--- a/website/client/src/components/ui/toggleSwitch.vue
+++ b/website/client/src/components/ui/toggleSwitch.vue
@@ -10,7 +10,8 @@
         :class="hoverText ? 'hasPopOver' : ''"
       >
         {{ label }}
-      </div><div class="toggle-switch float-left">
+      </div>
+      <div class="toggle-switch float-left">
         <input
           :id="toggleId"
           class="toggle-switch-checkbox"
@@ -18,12 +19,17 @@
           :checked="isChecked"
           :value="value"
           @change="handleChange"
-        ><label
+        >
+        <label
           class="toggle-switch-label"
           :for="toggleId"
-        ><span class="toggle-switch-inner"></span><span class="toggle-switch-switch"></span></label>
+        >
+          <span class="toggle-switch-inner"></span>
+          <span class="toggle-switch-switch"></span>
+        </label>
       </div>
-    </div><b-popover
+    </div>
+    <b-popover
       v-if="hoverText"
       :target="containerId"
       triggers="hover"
diff --git a/website/client/src/components/userLink.vue b/website/client/src/components/userLink.vue
index de37583b0b..4ba9be6c4b 100644
--- a/website/client/src/components/userLink.vue
+++ b/website/client/src/components/userLink.vue
@@ -6,7 +6,8 @@
     :to="{'name': 'userProfile', 'params': {'userId': id}}"
     :class="levelStyle()"
   >
-    {{ displayName }}<div
+    {{ displayName }}
+    <div
       class="svg-icon"
       v-html="tierIcon()"
     ></div>
diff --git a/website/client/src/components/userMenu/achievements.vue b/website/client/src/components/userMenu/achievements.vue
index 3eb6d12719..e1ee93c829 100644
--- a/website/client/src/components/userMenu/achievements.vue
+++ b/website/client/src/components/userMenu/achievements.vue
@@ -6,7 +6,8 @@
     >
       <h2 class="col-12">
         {{ $t(key+'Achievs') }}
-      </h2><div
+      </h2>
+      <div
         v-for="achievment in category.achievements"
         class="col-3 text-center"
       >
@@ -33,21 +34,27 @@
               >
                 {{ achievment.optionalCount }}
               </div>
-            </div><div
+            </div>
+            <div
               v-if="!achievment.earned"
               class="achievement achievement-unearned2x"
             ></div>
           </div>
         </div>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-6">
-        <h2>Challeges Won</h2><div v-for="chal in user.achievements.challenges">
+        <h2>Challeges Won</h2>
+        <div v-for="chal in user.achievements.challenges">
           <span>{{ chal }}</span>
         </div>
-      </div><div class="col-6">
-        <h2>Quests Completed</h2><div v-for="(value, key) in user.achievements.quests">
-          <span>{{ content.quests[k].text() }}</span><span>{{ value }}</span>
+      </div>
+      <div class="col-6">
+        <h2>Quests Completed</h2>
+        <div v-for="(value, key) in user.achievements.quests">
+          <span>{{ content.quests[k].text() }}</span>
+          <span>{{ value }}</span>
         </div>
       </div>
     </div>
diff --git a/website/client/src/components/userMenu/inbox.vue b/website/client/src/components/userMenu/inbox.vue
index c706530c40..2ef60422c9 100644
--- a/website/client/src/components/userMenu/inbox.vue
+++ b/website/client/src/components/userMenu/inbox.vue
@@ -1,7 +1,7 @@
 <template>
   <b-modal
     id="inbox-modal"
-    title=""
+    title
     :hide-footer="true"
     size="lg"
     @shown="onModalShown"
@@ -19,7 +19,8 @@
                 class="svg-icon envelope"
                 v-html="icons.messageIcon"
               ></div>
-            </div><div class="col-6">
+            </div>
+            <div class="col-6">
               <h2
                 v-once
                 class="text-center"
@@ -28,7 +29,8 @@
               </h2>
             </div>
           </div>
-        </div><div class="col-4 offset-3">
+        </div>
+        <div class="col-4 offset-3">
           <toggle-switch
             class="float-right"
             :label="optTextSet.switchDescription"
@@ -36,7 +38,8 @@
             :hover-text="optTextSet.popoverText"
             @change="toggleOpt()"
           />
-        </div><div class="col-1">
+        </div>
+        <div class="col-1">
           <div class="close">
             <span
               class="svg-icon inline icon-10"
@@ -47,26 +50,31 @@
           </div>
         </div>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-4 sidebar">
         <div class="search-section">
           <b-form-input
             v-model="search"
             :placeholder="$t('search')"
           />
-        </div><div
+        </div>
+        <div
           v-if="filtersConversations.length === 0"
           class="empty-messages text-center"
         >
           <div
             class="svg-icon envelope"
             v-html="icons.messageIcon"
-          ></div><h4 v-once>
+          ></div>
+          <h4 v-once>
             {{ $t('emptyMessagesLine1') }}
-          </h4><p v-if="!user.flags.chatRevoked">
+          </h4>
+          <p v-if="!user.flags.chatRevoked">
             {{ $t('emptyMessagesLine2') }}
           </p>
-        </div><div
+        </div>
+        <div
           v-if="filtersConversations.length > 0"
           class="conversations"
         >
@@ -78,22 +86,29 @@
           >
             <div>
               <h3 :class="userLevelStyle(conversation)">
-                {{ conversation.name }}<div
+                {{ conversation.name }}
+                <div
                   class="svg-icon"
                   v-html="tierIcon(conversation)"
                 ></div>
               </h3>
-            </div><div class="time">
+            </div>
+            <div class="time">
               <span
                 v-if="conversation.username"
                 class="mr-1"
-              >@{{ conversation.username }} •</span><span v-if="conversation.date">{{ conversation.date | timeAgo }}</span>
-            </div><div class="messagePreview">
+              >@{{ conversation.username }} •</span>
+              <span v-if="conversation.date">{{ conversation.date | timeAgo }}</span>
+            </div>
+            <div
+              class="messagePreview"
+            >
               {{ conversation.lastMessageText ? removeTags(parseMarkdown(conversation.lastMessageText)) : '' }}
             </div>
           </div>
         </div>
-      </div><div class="col-8 messages d-flex flex-column justify-content-between">
+      </div>
+      <div class="col-8 messages d-flex flex-column justify-content-between">
         <div
           v-if="!selectedConversation.key"
           class="empty-messages text-center"
@@ -101,13 +116,17 @@
           <div
             class="svg-icon envelope"
             v-html="icons.messageIcon"
-          ></div><h4>{{ placeholderTexts.title }}</h4><p v-html="placeholderTexts.description"></p>
-        </div><div
+          ></div>
+          <h4>{{ placeholderTexts.title }}</h4>
+          <p v-html="placeholderTexts.description"></p>
+        </div>
+        <div
           v-if="selectedConversation && selectedConversationMessages.length === 0"
           class="empty-messages text-center"
         >
           <p>{{ $t('beginningOfConversation', {userName: selectedConversation.name}) }}</p>
-        </div><chat-messages
+        </div>
+        <chat-messages
           v-if="selectedConversation && selectedConversationMessages.length > 0"
           ref="chatscroll"
           class="message-scroll"
@@ -116,13 +135,16 @@
           :can-load-more="canLoadMore"
           :is-loading="messagesLoading"
           @message-removed="messageRemoved"
-@triggerLoad="infiniteScrollTrigger"
-        /><div
+          @triggerLoad="infiniteScrollTrigger"
+        />
+        <div
           v-if="user.inbox.optOut && selectedConversation.key"
           class="pm-disabled-caption text-center"
         >
-          <h4>{{ $t('PMDisabledCaptionTitle') }}</h4><p>{{ $t('PMDisabledCaptionText') }}</p>
-        </div><div
+          <h4>{{ $t('PMDisabledCaptionTitle') }}</h4>
+          <p>{{ $t('PMDisabledCaptionText') }}</p>
+        </div>
+        <div
           v-if="selectedConversation.key && !user.flags.chatRevoked"
           class="new-message-row"
         >
@@ -130,12 +152,14 @@
             v-model="newMessage"
             maxlength="3000"
             @keyup.ctrl.enter="sendPrivateMessage()"
-          ></textarea><button
+          ></textarea>
+          <button
             class="btn btn-secondary"
             @click="sendPrivateMessage()"
           >
             {{ $t('send') }}
-          </button><div class="row">
+          </button>
+          <div class="row">
             <span class="ml-3">{{ currentLength }} / 3000</span>
           </div>
         </div>
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 844044cd79..a87df724cf 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -14,7 +14,8 @@
             class="svg-icon message-icon"
             v-html="icons.message"
           ></div>
-        </button><button
+        </button>
+        <button
           v-b-tooltip.hover.bottom="$t('sendGems')"
           class="btn btn-secondary gift-icon"
           @click="openSendGemsModal()"
@@ -23,7 +24,8 @@
             class="svg-icon gift-icon"
             v-html="icons.gift"
           ></div>
-        </button><button
+        </button>
+        <button
           v-if="user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
           v-b-tooltip.hover.right="$t('blockWarning')"
           class="btn btn-secondary remove-icon"
@@ -33,7 +35,8 @@
             class="svg-icon remove-icon"
             v-html="icons.remove"
           ></div>
-        </button><button
+        </button>
+        <button
           v-if="user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1"
           v-b-tooltip.hover.right="$t('unblock')"
           class="btn btn-secondary positive-icon"
@@ -43,7 +46,8 @@
             class="svg-icon positive-icon"
             v-html="icons.positive"
           ></div>
-        </button><button
+        </button>
+        <button
           v-if="this.userLoggedIn.contributor.admin"
           v-b-tooltip.hover.right="'Admin - Toggle Tools'"
           class="btn btn-secondary positive-icon"
@@ -54,7 +58,8 @@
             v-html="icons.staff"
           ></div>
         </button>
-      </div><div
+      </div>
+      <div
         v-if="this.userLoggedIn.contributor.admin && adminToolsLoaded"
         class="row admin-profile-actions"
       >
@@ -64,39 +69,46 @@
             v-b-tooltip.hover.bottom="'Turn on Shadow Muting'"
             class="admin-action"
             @click="adminTurnOnShadowMuting()"
-          >shadow-mute</span><span
+          >shadow-mute</span>
+          <span
             v-if="hero.flags && hero.flags.chatShadowMuted"
             v-b-tooltip.hover.bottom="'Turn off Shadow Muting'"
             class="admin-action"
             @click="adminTurnOffShadowMuting()"
-          >un-shadow-mute</span><span
+          >un-shadow-mute</span>
+          <span
             v-if="!hero.flags || (hero.flags && !hero.flags.chatRevoked)"
             v-b-tooltip.hover.bottom="'Revoke Chat Privileges'"
             class="admin-action"
             @click="adminRevokeChat()"
-          >mute</span><span
+          >mute</span>
+          <span
             v-if="hero.flags && hero.flags.chatRevoked"
             v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'"
             class="admin-action"
             @click="adminReinstateChat()"
-          >un-mute</span><span
+          >un-mute</span>
+          <span
             v-if="!hero.auth.blocked"
             v-b-tooltip.hover.bottom="'Ban User'"
             class="admin-action"
             @click="adminBlockUser()"
-          >ban</span><span
+          >ban</span>
+          <span
             v-if="hero.auth.blocked"
             v-b-tooltip.hover.bottom="'Un-Ban User'"
             class="admin-action"
             @click="adminUnblockUser()"
           >un-ban</span>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-12">
           <member-details :member="user" />
         </div>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-12 col-md-6 offset-md-3 text-center nav">
         <div
           class="nav-item"
@@ -104,13 +116,15 @@
           @click="selectPage('profile')"
         >
           {{ $t('profile') }}
-        </div><div
+        </div>
+        <div
           class="nav-item"
           :class="{active: selectedPage === 'stats'}"
           @click="selectPage('stats')"
         >
           {{ $t('stats') }}
-        </div><div
+        </div>
+        <div
           class="nav-item"
           :class="{active: selectedPage === 'achievements'}"
           @click="selectPage('achievements')"
@@ -118,7 +132,8 @@
           {{ $t('achievements') }}
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-show="selectedPage === 'profile'"
       v-if="user.profile"
       id="userProfile"
@@ -127,14 +142,16 @@
       <div class="row">
         <div class="col-12 col-md-8">
           <div class="header mb-3">
-            <h1>{{ user.profile.name }}</h1><div
+            <h1>{{ user.profile.name }}</h1>
+            <div
               v-if="user.auth && user.auth.local && user.auth.local.username"
               class="name"
             >
               @{{ user.auth.local.username }}
             </div>
           </div>
-        </div><div class="col-12 col-md-4">
+        </div>
+        <div class="col-12 col-md-4">
           <button
             v-if="user._id === userLoggedIn._id"
             class="btn btn-secondary"
@@ -144,49 +161,64 @@
             {{ $t('edit') }}
           </button>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="!editing"
         class="row"
       >
         <div class="col-12 col-md-8">
           <div class="about profile-section">
-            <h2>{{ $t('about') }}</h2><p
+            <h2>{{ $t('about') }}</h2>
+            <p
               v-if="user.profile.blurb"
               v-markdown="user.profile.blurb"
-            ></p><p v-else>
+            ></p>
+            <p v-else>
               {{ $t('noDescription') }}
             </p>
-          </div><div class="photo profile-section">
-            <h2>{{ $t('photo') }}</h2><img
+          </div>
+          <div class="photo profile-section">
+            <h2>{{ $t('photo') }}</h2>
+            <img
               v-if="user.profile.imageUrl"
               class="img-rendering-auto"
               :src="user.profile.imageUrl"
-            ><p v-else>
+            >
+            <p v-else>
               {{ $t('noPhoto') }}
             </p>
           </div>
-        </div><div class="col-12 col-md-4">
+        </div>
+        <div class="col-12 col-md-4">
           <div class="info profile-section">
-            <h2>{{ $t('info') }}</h2><div class="info-item">
+            <h2>{{ $t('info') }}</h2>
+            <div class="info-item">
               <div class="info-item-label">
                 {{ $t('joined') }}:
-              </div><div class="info-item-value">
+              </div>
+              <div class="info-item-value">
                 {{ userJoinedDate }}
               </div>
-            </div><div class="info-item">
+            </div>
+            <div class="info-item">
               <div class="info-item-label">
                 {{ $t('totalLogins') }}:
-              </div><div class="info-item-value">
+              </div>
+              <div class="info-item-value">
                 {{ user.loginIncentives }}
               </div>
-            </div><div class="info-item">
+            </div>
+            <div class="info-item">
               <div class="info-item-label">
                 {{ $t('latestCheckin') }}:
-              </div><div class="info-item-value">
+              </div>
+              <div class="info-item-value">
                 {{ userLastLoggedIn }}
               </div>
-            </div><div class="info-item">
-              {{ getProgressDisplay() }}<div class="progress">
+            </div>
+            <div class="info-item">
+              {{ getProgressDisplay() }}
+              <div class="progress">
                 <div
                   class="progress-bar"
                   role="progressbar"
@@ -199,45 +231,58 @@
                 </div>
               </div>
             </div>
-          </div><!-- @TODO: Implement in V2 .social-->
+          </div>
+          <!-- @TODO: Implement in V2 .social-->
         </div>
-      </div><div
+      </div>
+      <div
         v-if="editing"
         class="row"
       >
-        <h1>{{ $t('editProfile') }}</h1><div class="col-12">
+        <h1>{{ $t('editProfile') }}</h1>
+        <div class="col-12">
           <div
             class="alert alert-info alert-sm"
             v-html="$t('communityGuidelinesWarning', managerEmail)"
-          ></div><!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak--><div class="form-group">
-            <label>{{ $t('displayName') }}</label><input
+          ></div>
+          <!-- TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak-->
+          <div class="form-group">
+            <label>{{ $t('displayName') }}</label>
+            <input
               v-model="editingProfile.name"
               class="form-control"
               type="text"
               :placeholder="$t('fullName')"
             >
-          </div><div class="form-group">
-            <label>{{ $t('photoUrl') }}</label><input
+          </div>
+          <div class="form-group">
+            <label>{{ $t('photoUrl') }}</label>
+            <input
               v-model="editingProfile.imageUrl"
               class="form-control"
               type="url"
               :placeholder="$t('imageUrl')"
             >
-          </div><div class="form-group">
-            <label>{{ $t('about') }}</label><textarea
+          </div>
+          <div class="form-group">
+            <label>{{ $t('about') }}</label>
+            <textarea
               v-model="editingProfile.blurb"
               class="form-control"
               rows="5"
               :placeholder="$t('displayBlurbPlaceholder')"
-            ></textarea><!-- include ../../shared/formatting-help-->
+            ></textarea>
+            <!-- include ../../shared/formatting-help-->
           </div>
-        </div><div class="col-12 text-center">
+        </div>
+        <div class="col-12 text-center">
           <button
             class="btn btn-primary"
             @click="save()"
           >
             {{ $t("save") }}
-          </button><button
+          </button>
+          <button
             class="btn btn-warning"
             @click="editing = false"
           >
@@ -245,7 +290,8 @@
           </button>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-show="selectedPage === 'achievements'"
       v-if="user.achievements"
       id="achievements"
@@ -257,7 +303,8 @@
       >
         <h2 class="col-12 text-center">
           {{ $t(key+'Achievs') }}
-        </h2><div
+        </h2>
+        <div
           v-for="(achievement, key) in category.achievements"
           class="col-12 col-md-3 text-center"
         >
@@ -273,11 +320,13 @@
             >
               <h4 class="popover-content-title">
                 {{ achievement.title }}
-              </h4><div
+              </h4>
+              <div
                 class="popover-content-text"
                 v-html="achievement.text"
               ></div>
-            </b-popover><div
+            </b-popover>
+            <div
               v-if="achievement.earned"
               class="achievement"
               :class="achievement.icon + '2x'"
@@ -288,34 +337,44 @@
               >
                 {{ achievement.optionalCount }}
               </div>
-            </div><div
+            </div>
+            <div
               v-if="!achievement.earned"
               class="achievement achievement-unearned achievement-unearned2x"
             ></div>
           </div>
         </div>
-      </div><hr class="col-12"><div class="row">
+      </div>
+      <hr class="col-12">
+      <div class="row">
         <div
           v-if="user.achievements.challenges"
           class="col-12 col-md-6"
         >
-          <div class="achievement-icon achievement-karaoke"></div><h2 class="text-center">
+          <div class="achievement-icon achievement-karaoke"></div>
+          <h2 class="text-center">
             {{ $t('challengesWon') }}
-          </h2><div v-for="chal in user.achievements.challenges">
-            <span v-markdown="chal"></span><hr>
+          </h2>
+          <div v-for="chal in user.achievements.challenges">
+            <span v-markdown="chal"></span>
+            <hr>
           </div>
-        </div><div
+        </div>
+        <div
           v-if="user.achievements.quests"
           class="col-12 col-md-6"
         >
-          <div class="achievement-icon achievement-alien"></div><h2 class="text-center">
+          <div class="achievement-icon achievement-alien"></div>
+          <h2 class="text-center">
             {{ $t('questsCompleted') }}
-          </h2><div v-for="(value, key) in user.achievements.quests">
+          </h2>
+          <div v-for="(value, key) in user.achievements.quests">
             <span>{{ content.quests[key].text() }} ({{ value }})</span>
           </div>
         </div>
       </div>
-    </div><profileStats
+    </div>
+    <profileStats
       v-show="selectedPage === 'stats'"
       v-if="user.preferences"
       :user="user"
diff --git a/website/client/src/components/userMenu/profileStats.vue b/website/client/src/components/userMenu/profileStats.vue
index 8a1fb5a2f5..c6515cd083 100644
--- a/website/client/src/components/userMenu/profileStats.vue
+++ b/website/client/src/components/userMenu/profileStats.vue
@@ -7,7 +7,8 @@
       <div class="col-12 col-md-6">
         <h2 class="text-center">
           {{ $t('equipment') }}
-        </h2><div class="well">
+        </h2>
+        <div class="well">
           <div
             v-for="(label, key) in equipTypes"
             class="col-12 col-md-4 item-wrapper"
@@ -19,7 +20,8 @@
               :class="{white: equippedItems[key] && equippedItems[key].indexOf('base_0') === -1}"
             >
               <div :class="`shop_${equippedItems[key]}`"></div>
-            </div><b-popover
+            </div>
+            <b-popover
               v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1"
               :target="key"
               triggers="hover"
@@ -28,39 +30,48 @@
             >
               <h4 class="popover-title-only">
                 {{ getGearTitle(equippedItems[key]) }}
-              </h4><attributesGrid
+              </h4>
+              <attributesGrid
                 class="attributesGrid"
                 :item="content.gear.flat[equippedItems[key]]"
                 :user="user"
               />
-            </b-popover><h3 v-if="label !== 'skip'">
+            </b-popover>
+            <h3 v-if="label !== 'skip'">
               {{ label }}
             </h3>
           </div>
         </div>
-      </div><div class="col-12 col-md-6">
+      </div>
+      <div class="col-12 col-md-6">
         <h2 class="text-center">
           {{ $t('costume') }}
-        </h2><div class="well">
-          <!-- Use similar for loop for costume items, except show background if label is 'skip'.--><div
+        </h2>
+        <div class="well">
+          <!-- Use similar for loop for costume items, except show background if label is 'skip'.-->
+          <div
             v-for="(label, key) in equipTypes"
             class="col-12 col-md-4 item-wrapper"
           >
-            <!-- Append a "C" to the key name since HTML IDs have to be unique.--><div
+            <!-- Append a "C" to the key name since HTML IDs have to be unique.-->
+            <div
               v-if="label !== 'skip'"
               :id="key + 'C'"
               class="box"
               :class="{white: costumeItems[key] && costumeItems[key].indexOf('base_0') === -1}"
             >
               <div :class="`shop_${costumeItems[key]}`"></div>
-            </div><!-- Show background on 8th tile rather than a piece of equipment.--><div
+            </div>
+            <!-- Show background on 8th tile rather than a piece of equipment.-->
+            <div
               v-if="label === 'skip'"
               class="box"
               :class="{white: user.preferences.background}"
               style="overflow:hidden"
             >
               <div :class="'icon_background_' + user.preferences.background"></div>
-            </div><b-popover
+            </div>
+            <b-popover
               v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1"
               :target="key + 'C'"
               triggers="hover"
@@ -69,27 +80,32 @@
             >
               <h4 class="popover-title-only">
                 {{ getGearTitle(costumeItems[key]) }}
-              </h4><attributesGrid
+              </h4>
+              <attributesGrid
                 class="attributesGrid"
                 :item="content.gear.flat[costumeItems[key]]"
                 :user="user"
               />
-            </b-popover><h3 v-if="label !== 'skip'">
+            </b-popover>
+            <h3 v-if="label !== 'skip'">
               {{ label }}
-            </h3><h3 v-else>
+            </h3>
+            <h3 v-else>
               {{ $t('background') }}
             </h3>
           </div>
         </div>
       </div>
-    </div><div class="row pet-mount-row">
+    </div>
+    <div class="row pet-mount-row">
       <div class="col-12 col-md-6">
         <h2
           v-once
           class="text-center"
         >
           {{ $t('pets') }}
-        </h2><div class="well pet-mount-well">
+        </h2>
+        <div class="well pet-mount-well">
           <div class="row col-12">
             <div class="col-12 col-md-4">
               <div
@@ -101,18 +117,29 @@
                   :class="`Pet-${user.items.currentPet}`"
                 ></div>
               </div>
-            </div><div class="col-12 col-md-8">
-              <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div><div><strong>{{ $t('petsFound') }}:</strong>{{ totalCount(user.items.pets) }}</div><div><strong>{{ $t('beastMasterProgress') }}:</strong>{{ beastMasterProgress(user.items.pets) }}</div>
+            </div>
+            <div class="col-12 col-md-8">
+              <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
+              <div>
+                <strong>{{ $t('petsFound') }}:</strong>
+                {{ totalCount(user.items.pets) }}
+              </div>
+              <div>
+                <strong>{{ $t('beastMasterProgress') }}:</strong>
+                {{ beastMasterProgress(user.items.pets) }}
+              </div>
             </div>
           </div>
         </div>
-      </div><div class="col-12 col-md-6">
+      </div>
+      <div class="col-12 col-md-6">
         <h2
           v-once
           class="text-center"
         >
           {{ $t('mounts') }}
-        </h2><div class="well pet-mount-well">
+        </h2>
+        <div class="well pet-mount-well">
           <div class="row col-12">
             <div class="col-12 col-md-4">
               <div
@@ -124,19 +151,31 @@
                   :class="`Mount_Icon_${user.items.currentMount}`"
                 ></div>
               </div>
-            </div><div class="col-12 col-md-8">
-              <div>{{ formatAnimal(user.items.currentMount, 'mount') }}</div><div><strong>{{ $t('mountsTamed') }}:</strong><span>{{ totalCount(user.items.mounts) }}</span></div><div><strong>{{ $t('mountMasterProgress') }}:</strong><span>{{ mountMasterProgress(user.items.mounts) }}</span></div>
+            </div>
+            <div class="col-12 col-md-8">
+              <div>{{ formatAnimal(user.items.currentMount, 'mount') }}</div>
+              <div>
+                <strong>{{ $t('mountsTamed') }}:</strong>
+                <span>{{ totalCount(user.items.mounts) }}</span>
+              </div>
+              <div>
+                <strong>{{ $t('mountMasterProgress') }}:</strong>
+                <span>{{ mountMasterProgress(user.items.mounts) }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       id="attributes"
       class="row"
     >
-      <hr class="col-12"><h2 class="col-12">
+      <hr class="col-12">
+      <h2 class="col-12">
         {{ $t('attributes') }}
-      </h2><div
+      </h2>
+      <div
         v-for="(statInfo, stat) in stats"
         class="col-12 col-md-6"
       >
@@ -148,20 +187,43 @@
               popover-placement="right"
               :popover="$t(statInfo.popover)"
               popover-trigger="mouseenter"
-            ></span><div
+            ></span>
+            <div
               class="stat-title"
               :class="stat"
             >
               {{ $t(statInfo.title) }}
-            </div><strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
-          </div><div class="col-12 col-md-6">
+            </div>
+            <strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
+          </div>
+          <div class="col-12 col-md-6">
             <ul class="bonus-stats">
-              <li><strong>{{ $t('level') }}:</strong>{{ statsComputed.levelBonus[stat] }}</li><li><strong>{{ $t('equipment') }}:</strong>{{ statsComputed.gearBonus[stat] }}</li><li><strong>{{ $t('class') }}:</strong>{{ statsComputed.classBonus[stat] }}</li><li><strong>{{ $t('allocated') }}:</strong>{{ totalAllocatedStats(stat) }}</li><li><strong>{{ $t('buffs') }}:</strong>{{ user.stats.buffs[stat] }}</li>
+              <li>
+                <strong>{{ $t('level') }}:</strong>
+                {{ statsComputed.levelBonus[stat] }}
+              </li>
+              <li>
+                <strong>{{ $t('equipment') }}:</strong>
+                {{ statsComputed.gearBonus[stat] }}
+              </li>
+              <li>
+                <strong>{{ $t('class') }}:</strong>
+                {{ statsComputed.classBonus[stat] }}
+              </li>
+              <li>
+                <strong>{{ $t('allocated') }}:</strong>
+                {{ totalAllocatedStats(stat) }}
+              </li>
+              <li>
+                <strong>{{ $t('buffs') }}:</strong>
+                {{ user.stats.buffs[stat] }}
+              </li>
             </ul>
           </div>
         </div>
       </div>
-    </div><div
+    </div>
+    <div
       v-if="showAllocation"
       id="allocation"
     >
@@ -171,15 +233,18 @@
             v-if="userLevel100Plus"
             v-once
             v-html="$t('noMoreAllocate')"
-          ></h3><h3>
-            {{ $t('statPoints') }}<div
+          ></h3>
+          <h3>
+            {{ $t('statPoints') }}
+            <div
               v-if="user.stats.points || userLevel100Plus"
               class="counter badge badge-pill"
             >
               {{ pointsRemaining }}
             </div>
           </h3>
-        </div><div class="col-12 col-md-6">
+        </div>
+        <div class="col-12 col-md-6">
           <div class="float-right">
             <toggle-switch
               v-model="user.preferences.automaticAllocation"
@@ -188,7 +253,8 @@
             />
           </div>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div
           v-for="(statInfo, stat) in allocateStatsList"
           class="col-12 col-md-3"
@@ -197,19 +263,23 @@
             <div class="col-9">
               <div :class="stat">
                 {{ $t(stats[stat].title) }}
-              </div><div class="number">
+              </div>
+              <div class="number">
                 {{ totalAllocatedStats(stat) }}
-              </div><div class="points">
+              </div>
+              <div class="points">
                 {{ $t('pts') }}
               </div>
-            </div><div class="col-3">
+            </div>
+            <div class="col-3">
               <div>
                 <div
                   v-if="showStatsSave"
                   class="up"
                   @click="allocate(stat)"
                 ></div>
-              </div><div>
+              </div>
+              <div>
                 <div
                   v-if="showStatsSave"
                   class="down"
@@ -219,7 +289,8 @@
             </div>
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="showStatsSave"
         class="row save-row"
       >
diff --git a/website/client/src/components/userMenu/stats.vue b/website/client/src/components/userMenu/stats.vue
index 7f12d40dac..ba12979dd0 100644
--- a/website/client/src/components/userMenu/stats.vue
+++ b/website/client/src/components/userMenu/stats.vue
@@ -1,96 +1,140 @@
 <template>
   <div class="standard-page">
-    <h1>Stats</h1><div class="row">
+    <h1>Stats</h1>
+    <div class="row">
       <div class="col-6">
         <h2 class="text-center">
           Equipment
-        </h2><div class="well row">
+        </h2>
+        <div class="well row">
           <div class="col-4"></div>
         </div>
-      </div><div class="col-6">
+      </div>
+      <div class="col-6">
         <h2 class="text-center">
           Costume
         </h2>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-6">
         <h2 class="text-center">
           Pet
         </h2>
-      </div><div class="col-6">
+      </div>
+      <div class="col-6">
         <h2 class="text-center">
           Mount
         </h2>
       </div>
-    </div><div class="row">
-      <hr class="col-12"><h2 class="col-12">
+    </div>
+    <div class="row">
+      <hr class="col-12">
+      <h2 class="col-12">
         Attributes
-      </h2><div class="col-6"></div><div class="col-6"></div>
-    </div><div class="row">
-      <div class="col-6"></div><div class="col-6"></div>
-    </div><div class="row">
+      </h2>
+      <div class="col-6"></div>
+      <div class="col-6"></div>
+    </div>
+    <div class="row">
+      <div class="col-6"></div>
+      <div class="col-6"></div>
+    </div>
+    <div class="row">
       <div class="col-4">
-        <div><h3>Basics</h3><ul><li>Health: {{ user.stats.hp }}/{{ user.stats.maxHealth }}</li><li>Mana: {{ user.stats.mp }}/{{ user.stats.maxMP }}</li><li>Gold: {{ user.stats.gp }}</li><li>Level: {{ user.stats.lvl }}</li><li>Experience: {{ user.stats.exp }}</li></ul></div><div v-if="user.flags.itemsEnabled">
-          <h3>Battle Gear</h3><ul>
+        <div>
+          <h3>Basics</h3>
+          <ul>
+            <li>Health: {{ user.stats.hp }}/{{ user.stats.maxHealth }}</li>
+            <li>Mana: {{ user.stats.mp }}/{{ user.stats.maxMP }}</li>
+            <li>Gold: {{ user.stats.gp }}</li>
+            <li>Level: {{ user.stats.lvl }}</li>
+            <li>Experience: {{ user.stats.exp }}</li>
+          </ul>
+        </div>
+        <div v-if="user.flags.itemsEnabled">
+          <h3>Battle Gear</h3>
+          <ul>
             <li
               v-for="(key, itemType) in user.items.gear.equipped"
               v-if="flatGear[key]"
             >
-              <strong>{{ flatGear[key].text() }}</strong><strong v-if="flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int">:&nbsp;<span
-                v-for="stat in ['str','con','per','int']"
-                v-if="flatGear[key][stat]"
-              >{{ flatGear[key][stat] }} {{ $t(stat) }}&nbsp;</span></strong>
+              <strong>{{ flatGear[key].text() }}</strong>
+              <strong
+                v-if="flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int"
+              >
+                :&nbsp;
+                <span
+                  v-for="stat in ['str','con','per','int']"
+                  v-if="flatGear[key][stat]"
+                >{{ flatGear[key][stat] }} {{ $t(stat) }}&nbsp;</span>
+              </strong>
             </li>
           </ul>
-        </div><div v-if="user.preferences.costume">
+        </div>
+        <div v-if="user.preferences.costume">
           <h4 v-once>
             {{ $t('costume') }}
-          </h4><div>
+          </h4>
+          <div>
             <div ng-repeat="(key, itemType) in user.items.gear.costume">
               <strong>{{ flatGear[key].text() }}</strong>
             </div>
           </div>
-        </div><div>
-          <h3>Background</h3><ul>
+        </div>
+        <div>
+          <h3>Background</h3>
+          <ul>
             <li v-if="!user.preferences.background">
               None
-            </li><li v-if="user.preferences.background">
+            </li>
+            <li v-if="user.preferences.background">
               {{ user.preferences.background }}
             </li>
           </ul>
-        </div><div ng-if="user.flags.dropsEnabled">
+        </div>
+        <div ng-if="user.flags.dropsEnabled">
           <h3 v-once>
             {{ $t('pets') }}
-          </h3><ul>
+          </h3>
+          <ul>
             <li ng-if="user.items.currentPet">
               {{ $t('activePet') }}:
               {{ formatAnimal(user.items.currentPet, 'pet') }}
-            </li><li>
+            </li>
+            <li>
               {{ $t('petsFound') }}:
               {{ totalCount(user.items.pets) }}
-            </li><li>
+            </li>
+            <li>
               {{ $t('beastMasterProgress') }}:
               {{ beastMasterProgress(user.items.pets) }}
             </li>
-          </ul><h3 v-once>
+          </ul>
+          <h3 v-once>
             {{ $t('mounts') }}
-          </h3><ul>
+          </h3>
+          <ul>
             <li v-if="user.items.currentMount">
               {{ $t('activeMount') }}:
               {{ formatAnimal(user.items.currentMount, 'mount') }}
-            </li><li>
+            </li>
+            <li>
               {{ $t('mountsTamed') }}:
               {{ totalCount(user.items.mounts) }}
-            </li><li>
+            </li>
+            <li>
               {{ $t('mountMasterProgress') }}:
               {{ mountMasterProgress(user.items.mounts) }}
             </li>
           </ul>
         </div>
-      </div><div class="col-4">
+      </div>
+      <div class="col-4">
         <h3 v-once>
           {{ $t('attributes') }}
-        </h3><div
+        </h3>
+        <div
           v-for="(statInfo, stat) in stats"
           class="row"
         >
@@ -101,28 +145,37 @@
               popover-placement="right"
               :popover="$t(statInfo.popover)"
               popover-trigger="mouseenter"
-            ><strong>{{ $t(statInfo.title) }}</strong></span><strong>: {{ statsComputed[stat] }}</strong>
-          </div><div class="col-6">
+            >
+              <strong>{{ $t(statInfo.title) }}</strong>
+            </span>
+            <strong>: {{ statsComputed[stat] }}</strong>
+          </div>
+          <div class="col-6">
             <ul class="bonus-stats">
               <li>
                 {{ $t('levelBonus') }}
                 {{ statsComputed.levelBonus[stat] }}
-              </li><li>
+              </li>
+              <li>
                 {{ $t('gearBonus') }}
                 {{ statsComputed.gearBonus[stat] }}
-              </li><li>
+              </li>
+              <li>
                 {{ $t('classBonus') }}
                 {{ statsComputed.classBonus[stat] }}
-              </li><li>
+              </li>
+              <li>
                 {{ $t('allocatedPoints') }}
                 {{ user.stats[stat] }}
-              </li><li>
+              </li>
+              <li>
                 {{ $t('buffs') }}
                 {{ user.stats.buffs[stat] }}
               </li>
             </ul>
           </div>
-        </div><div v-if="user.stats.buffs.stealth">
+        </div>
+        <div v-if="user.stats.buffs.stealth">
           <strong
             v-once
             class="hint"
@@ -130,8 +183,10 @@
             popover-trigger="mouseenter"
             popover-placement="right"
             :popover="$t('stealthNewDay')"
-          >{{ $t('stealth') }}</strong><strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
-        </div><div v-if="user.stats.buffs.streaks">
+          >{{ $t('stealth') }}</strong>
+          <strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
+        </div>
+        <div v-if="user.stats.buffs.streaks">
           <div>
             <strong
               class="hint"
@@ -139,96 +194,127 @@
               popover-trigger="mouseenter"
               popover-placement="right"
               :popover="$t('streaksFrozenText')"
-            ></strong>{{ $t('streaksFrozen') }}
+            ></strong>
+            {{ $t('streaksFrozen') }}
           </div>
         </div>
-      </div><div
+      </div>
+      <div
         v-if="hasClass"
         class="col-4"
       >
         <h3 v-once>
           {{ $t('characterBuild') }}
-        </h3><h4 v-once>
-          {{ $t('class') + ': ' }}<span>{{ classText }}&nbsp;</span><button
+        </h3>
+        <h4 v-once>
+          {{ $t('class') + ': ' }}
+          <span>{{ classText }}&nbsp;</span>
+          <button
             v-once
             class="btn btn-danger btn-xs"
             @click="changeClass(null)"
           >
             {{ $t('changeClass') }}
-          </button><small class="cost">3<span class="Pet_Currency_Gem1x inline-gems"></span></small>
-        </h4><div>
+          </button>
+          <small class="cost">
+            3
+            <span class="Pet_Currency_Gem1x inline-gems"></span>
+          </small>
+        </h4>
+        <div>
           <div>
             <p
               v-if="userLevel100Plus"
               v-once
             >
               {{ $t('noMoreAllocate') }}
-            </p><p v-if="user.stats.points || userLevel100Plus">
-              <strong class="inline">{{ user.stats.points }}&nbsp;</strong><strong
+            </p>
+            <p v-if="user.stats.points || userLevel100Plus">
+              <strong class="inline">{{ user.stats.points }}&nbsp;</strong>
+              <strong
                 class="hint"
                 popover-trigger="mouseenter"
                 popover-placement="right"
                 :popover="$t('levelPopover')"
               >{{ $t('unallocated') }}</strong>
             </p>
-          </div><div>
+          </div>
+          <div>
             <fieldset class="auto-allocate">
               <div class="checkbox">
-                <label><input
-                  v-model="user.preferences.automaticAllocation"
-                  type="checkbox"
-                  @change="set({'preferences.automaticAllocation': user.preferences.automaticAllocation, 'preferences.allocationMode': 'taskbased'})"
-                ><span
-                  class="hint"
-                  popover-trigger="mouseenter"
-                  popover-placement="right"
-                  :popover="$t('autoAllocationPop')"
-                >{{ $t('autoAllocation') }}</span></label>
-              </div><form
+                <label>
+                  <input
+                    v-model="user.preferences.automaticAllocation"
+                    type="checkbox"
+                    @change="set({'preferences.automaticAllocation': user.preferences.automaticAllocation, 'preferences.allocationMode': 'taskbased'})"
+                  >
+                  <span
+                    class="hint"
+                    popover-trigger="mouseenter"
+                    popover-placement="right"
+                    :popover="$t('autoAllocationPop')"
+                  >{{ $t('autoAllocation') }}</span>
+                </label>
+              </div>
+              <form
                 v-if="user.preferences.automaticAllocation"
                 style="margin-left:1em"
               >
                 <div class="radio">
-                  <label><input
-                    v-model="user.preferences.allocationMode"
-                    type="radio"
-                    name="allocationMode"
-                    value="flat"
-                    @change="set({'preferences.allocationMode': 'flat'})"
-                  ><span
-                    class="hint"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                    :popover="$t('evenAllocationPop')"
-                  >{{ $t('evenAllocation') }}</span></label>
-                </div><div class="radio">
-                  <label><input
-                    v-model="user.preferences.allocationMode"
-                    type="radio"
-                    name="allocationMode"
-                    value="classbased"
-                    @change="set({'preferences.allocationMode': 'classbased'})"
-                  ><span
-                    class="hint"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                    :popover="$t('classAllocationPop')"
-                  >{{ $t('classAllocation') }}</span></label>
-                </div><div class="radio">
-                  <label><input
-                    v-model="user.preferences.allocationMode"
-                    type="radio"
-                    name="allocationMode"
-                    value="taskbased"
-                    @change="set({'preferences.allocationMode': 'taskbased'})"
-                  ><span
-                    class="hint"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                    :popover="$t('taskAllocationPop')"
-                  >{{ $t('taskAllocation') }}</span></label>
+                  <label>
+                    <input
+                      v-model="user.preferences.allocationMode"
+                      type="radio"
+                      name="allocationMode"
+                      value="flat"
+                      @change="set({'preferences.allocationMode': 'flat'})"
+                    >
+                    <span
+                      class="hint"
+                      popover-trigger="mouseenter"
+                      popover-placement="right"
+                      :popover="$t('evenAllocationPop')"
+                    >{{ $t('evenAllocation') }}</span>
+                  </label>
                 </div>
-              </form><div v-if="user.preferences.automaticAllocation && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)">
+                <div class="radio">
+                  <label>
+                    <input
+                      v-model="user.preferences.allocationMode"
+                      type="radio"
+                      name="allocationMode"
+                      value="classbased"
+                      @change="set({'preferences.allocationMode': 'classbased'})"
+                    >
+                    <span
+                      class="hint"
+                      popover-trigger="mouseenter"
+                      popover-placement="right"
+                      :popover="$t('classAllocationPop')"
+                    >{{ $t('classAllocation') }}</span>
+                  </label>
+                </div>
+                <div class="radio">
+                  <label>
+                    <input
+                      v-model="user.preferences.allocationMode"
+                      type="radio"
+                      name="allocationMode"
+                      value="taskbased"
+                      @change="set({'preferences.allocationMode': 'taskbased'})"
+                    >
+                    <span
+                      class="hint"
+                      popover-trigger="mouseenter"
+                      popover-placement="right"
+                      :popover="$t('taskAllocationPop')"
+                    >{{ $t('taskAllocation') }}</span>
+                  </label>
+                </div>
+              </form>
+              <div
+                v-if="user.preferences.automaticAllocation && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)"
+              >
                 <button
                   class="btn btn-primary btn-xs"
                   popover-trigger="mouseenter"
@@ -236,12 +322,14 @@
                   :popover="$t('distributePointsPop')"
                   @click="allocateNow({})"
                 >
-                  <span class="glyphicon glyphicon-download"></span>&nbsp;
+                  <span class="glyphicon glyphicon-download"></span>
+                  &nbsp;
                   {{ $t('distributePoints') }}
                 </button>
               </div>
             </fieldset>
-          </div><div
+          </div>
+          <div
             v-for="(statInfo, stat) in allocateStatsList"
             class="row"
           >
@@ -251,8 +339,10 @@
                 popover-trigger="mouseenter"
                 popover-placement="right"
                 :popover="$t(statInfo.popover)"
-              ></span>{{ $t(statInfo.title) + user.stats[stat] }}
-            </div><div
+              ></span>
+              {{ $t(statInfo.title) + user.stats[stat] }}
+            </div>
+            <div
               v-if="user.stats.points"
               class="col-4"
               @click="allocate(stat)"
diff --git a/website/client/src/components/world-boss/worldBossInfoModal.vue b/website/client/src/components/world-boss/worldBossInfoModal.vue
index 323c411825..ecb3a9f343 100644
--- a/website/client/src/components/world-boss/worldBossInfoModal.vue
+++ b/website/client/src/components/world-boss/worldBossInfoModal.vue
@@ -1,21 +1,27 @@
 <template>
   <b-modal
     id="world-boss-info"
-    title=""
+    title
     size="md"
     :hide-footer="true"
     :hide-header="true"
   >
     <div class="modal-header d-flex">
-      <div class="left-hearts"></div><div class="quest_dysheartener_modal"></div><div class="phobia_dysheartener_modal"></div><div class="right-hearts"></div>
-    </div><div class="modal-body">
+      <div class="left-hearts"></div>
+      <div class="quest_dysheartener_modal"></div>
+      <div class="phobia_dysheartener_modal"></div>
+      <div class="right-hearts"></div>
+    </div>
+    <div class="modal-body">
       <div class="row">
         <div class="col-12 text-center">
-          <h2>{{ $t('whatIsWorldBoss') }}</h2><p class="text-center">
+          <h2>{{ $t('whatIsWorldBoss') }}</h2>
+          <p class="text-center">
             {{ $t('worldBossDesc') }}
           </p>
         </div>
-      </div><div class="row">
+      </div>
+      <div class="row">
         <div class="col-12">
           <div
             v-for="bullet in bullets"
@@ -26,13 +32,15 @@
                 class="svg-icon red-check"
                 v-html="icons.redCheck"
               ></div>
-            </div><div class="info">
+            </div>
+            <div class="info">
               {{ $t(bullet) }}
             </div>
           </div>
         </div>
       </div>
-    </div><div class="row">
+    </div>
+    <div class="row">
       <div class="col-12 text-center">
         <a
           class="footer-link"
diff --git a/website/client/src/components/world-boss/worldBossRageModal.vue b/website/client/src/components/world-boss/worldBossRageModal.vue
index 1d5eca3db0..56c473d9d8 100644
--- a/website/client/src/components/world-boss/worldBossRageModal.vue
+++ b/website/client/src/components/world-boss/worldBossRageModal.vue
@@ -1,7 +1,7 @@
 <template>
   <b-modal
     id="world-boss-rage"
-    title=""
+    title
     :hide-footer="true"
     :hide-header="true"
   >
@@ -10,43 +10,54 @@
         <div class="reduce">
           {{ $t('seasonalShopRageStrikeHeader') }}
         </div>
-      </div><img
+      </div>
+      <img
         class="npc-background"
         src="~@/assets/images/npc/broken/rage-strike-seasonalShop-scaled@2x.png"
-      ><div class="modal-body">
+      >
+      <div class="modal-body">
         <div class="row">
           <div class="col-12 text-center padding-24">
-            <h2>{{ $t('seasonalShopRageStrikeLead') }}</h2><p>{{ $t('seasonalShopRageStrikeRecap') }}</p>
+            <h2>{{ $t('seasonalShopRageStrikeLead') }}</h2>
+            <p>{{ $t('seasonalShopRageStrikeRecap') }}</p>
           </div>
         </div>
       </div>
-    </div><div v-if="npc === 'market'">
+    </div>
+    <div v-if="npc === 'market'">
       <div class="modal-header d-flex align-items-center justify-content-center">
         <div class="reduce">
           {{ $t('marketRageStrikeHeader') }}
         </div>
-      </div><img
+      </div>
+      <img
         class="npc-background"
         src="~@/assets/images/npc/broken/rage-strike-market-scaled@2x.png"
-      ><div class="modal-body">
+      >
+      <div class="modal-body">
         <div class="row">
           <div class="col-12 text-center padding-24">
-            <h2>{{ $t('marketRageStrikeLead') }}</h2><p>{{ $t('marketRageStrikeRecap') }}</p>
+            <h2>{{ $t('marketRageStrikeLead') }}</h2>
+            <p>{{ $t('marketRageStrikeRecap') }}</p>
           </div>
         </div>
       </div>
-    </div><div v-if="npc === 'quests'">
+    </div>
+    <div v-if="npc === 'quests'">
       <div class="modal-header d-flex align-items-center justify-content-center">
         <div class="reduce">
           {{ $t('questsRageStrikeHeader') }}
         </div>
-      </div><img
+      </div>
+      <img
         class="npc-background"
         src="~@/assets/images/npc/broken/rage-strike-quests-scaled@2x.png"
-      ><div class="modal-body">
+      >
+      <div class="modal-body">
         <div class="row">
           <div class="col-12 text-center padding-24">
-            <h2>{{ $t('questsRageStrikeLead') }}</h2><p>{{ $t('questsRageStrikeRecap') }}</p>
+            <h2>{{ $t('questsRageStrikeLead') }}</h2>
+            <p>{{ $t('questsRageStrikeRecap') }}</p>
           </div>
         </div>
       </div>
diff --git a/website/client/src/components/yesterdailyModal.vue b/website/client/src/components/yesterdailyModal.vue
index 1f76228289..761791eb4e 100644
--- a/website/client/src/components/yesterdailyModal.vue
+++ b/website/client/src/components/yesterdailyModal.vue
@@ -10,9 +10,11 @@
   >
     <h1 class="header-welcome text-center">
       {{ $t('welcomeBack') }}
-    </h1><p class="call-to-action text-center">
+    </h1>
+    <p class="call-to-action text-center">
       {{ $t('checkOffYesterDailies') }}
-    </p><div class="tasks-list">
+    </p>
+    <div class="tasks-list">
       <task
         v-for="task in tasksByType.daily"
         :key="task.id"
@@ -20,7 +22,8 @@
         :is-user="true"
         :due-date="dueDate"
       />
-    </div><div class="start-day text-center">
+    </div>
+    <div class="start-day text-center">
       <button
         class="btn btn-primary"
         @click="close()"