From 07349c70bc23bdb190b7f6754b8ece2662cf00e4 Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Sat, 12 Oct 2019 16:33:05 +0200
Subject: [PATCH] pug to html

---
 website/client/.eslintrc.js                   |   10 +
 website/client/package-lock.json              |  544 ++-------
 website/client/package.json                   |    1 -
 website/client/src/app.vue                    |  116 +-
 website/client/src/components/404.vue         |   32 +-
 .../achievements/achievementAvatar.vue        |   12 +-
 .../achievements/achievementFooter.vue        |   41 +-
 .../components/achievements/armoireEmpty.vue  |   35 +-
 .../components/achievements/chooseClass.vue   |  137 ++-
 .../components/achievements/contributor.vue   |   37 +-
 .../src/components/achievements/death.vue     |   80 +-
 .../components/achievements/dropsEnabled.vue  |   35 +-
 .../achievements/genericAchievement.vue       |   29 +-
 .../components/achievements/invitedFriend.vue |   31 +-
 .../achievements/joinedChallenge.vue          |   31 +-
 .../components/achievements/joinedGuild.vue   |   31 +-
 .../components/achievements/justAddWater.vue  |   29 +-
 .../src/components/achievements/levelUp.vue   |   72 +-
 .../achievements/login-incentives.vue         |  123 +-
 .../achievements/lostMasterclasser.vue        |   29 +-
 .../src/components/achievements/lowHealth.vue |   81 +-
 .../achievements/mindOverMatter.vue           |   29 +-
 .../src/components/achievements/newStuff.vue  |   46 +-
 .../achievements/questCompleted.vue           |   47 +-
 .../achievements/questInvitation.vue          |  107 +-
 .../src/components/achievements/rebirth.vue   |   38 +-
 .../achievements/rebirthEnabled.vue           |   32 +-
 .../src/components/achievements/streak.vue    |   47 +-
 .../src/components/achievements/testing.vue   |   48 +-
 .../achievements/testingletiant.vue           |   46 +-
 .../components/achievements/ultimateGear.vue  |   78 +-
 .../src/components/achievements/welcome.vue   |   70 +-
 .../components/achievements/wonChallenge.vue  |   75 +-
 website/client/src/components/appFooter.vue   |  366 ++++--
 .../client/src/components/auth/authForm.vue   |  152 ++-
 .../components/auth/registerLoginReset.vue    |  350 ++++--
 website/client/src/components/avatar.vue      |   96 +-
 .../components/avatarModal/body-settings.vue  |   48 +-
 .../avatarModal/customize-options.vue         |   74 +-
 .../components/avatarModal/extra-settings.vue |   85 +-
 .../components/avatarModal/hair-settings.vue  |  103 +-
 .../components/avatarModal/skin-settings.vue  |   40 +-
 .../src/components/avatarModal/sub-menu.vue   |   21 +-
 .../src/components/bannedAccountModal.vue     |   33 +-
 .../components/categories/categoryTags.vue    |   24 +-
 .../components/challenges/challengeDetail.vue |  252 ++--
 .../components/challenges/challengeItem.vue   |  120 +-
 .../challengeMemberProgressModal.vue          |   40 +-
 .../components/challenges/challengeModal.vue  |  216 +++-
 .../challenges/closeChallengeModal.vue        |   83 +-
 .../components/challenges/findChallenges.vue  |   84 +-
 .../components/challenges/groupChallenges.vue |   53 +-
 .../src/components/challenges/index.vue       |   28 +-
 .../challenges/leaveChallengeModal.vue        |   30 +-
 .../components/challenges/myChallenges.vue    |  108 +-
 .../src/components/challenges/sidebar.vue     |  111 +-
 .../src/components/chat/autoComplete.vue      |   41 +-
 .../client/src/components/chat/chatCard.vue   |  138 ++-
 .../src/components/chat/chatMessages.vue      |  140 ++-
 .../src/components/chat/copyAsTodoModal.vue   |   49 +-
 .../src/components/chat/reportFlagModal.vue   |   49 +-
 .../client/src/components/creatorIntro.vue    |  258 +---
 website/client/src/components/emptyView.vue   |    5 +-
 .../src/components/group-plans/billing.vue    |   83 +-
 .../group-plans/createGroupModalPages.vue     |  118 +-
 .../group-plans/groupPlanOverviewModal.vue    |  246 +++-
 .../src/components/group-plans/index.vue      |   46 +-
 .../group-plans/taskInformation.vue           |  126 +-
 website/client/src/components/groupLink.vue   |   12 +-
 website/client/src/components/groups/chat.vue |  115 +-
 .../components/groups/communityGuidelines.vue |   25 +-
 .../components/groups/createPartyModal.vue    |   82 +-
 .../src/components/groups/discovery.vue       |   86 +-
 .../client/src/components/groups/group.vue    |  224 ++--
 .../src/components/groups/groupFormModal.vue  |  303 +++--
 .../src/components/groups/groupGemsModal.vue  |   33 +-
 .../src/components/groups/groupPlan.vue       |  330 +++--
 .../client/src/components/groups/index.vue    |   38 +-
 .../src/components/groups/inviteModal.vue     |   70 +-
 .../src/components/groups/membersModal.vue    |  274 +++--
 .../client/src/components/groups/myGuilds.vue |   99 +-
 .../src/components/groups/newPartyModal.pug   |   20 -
 .../groups/participantListModal.vue           |   56 +-
 .../src/components/groups/publicGuildItem.vue |  122 +-
 .../components/groups/questDetailsModal.vue   |   94 +-
 .../components/groups/questSidebarSection.vue |  231 +++-
 .../client/src/components/groups/sidebar.vue  |  109 +-
 .../src/components/groups/startQuestModal.vue |   88 +-
 .../client/src/components/groups/tavern.vue   |  550 ++++++---
 website/client/src/components/hall/heroes.vue |  291 +++--
 website/client/src/components/hall/index.vue  |   29 +-
 .../client/src/components/hall/patrons.vue    |   46 +-
 .../client/src/components/header/index.vue    |   96 +-
 website/client/src/components/header/menu.vue |  422 +++++--
 .../components/header/notifications/base.vue  |   40 +-
 .../header/notifications/cardReceived.vue     |   26 +-
 .../notifications/groupTaskApproval.vue       |   35 +-
 .../notifications/groupTaskApproved.vue       |   23 +-
 .../notifications/groupTaskAssigned.vue       |   22 +-
 .../header/notifications/groupTaskClaimed.vue |   22 +-
 .../notifications/groupTaskNeedsWork.vue      |   23 +-
 .../header/notifications/guildInvitation.vue  |   35 +-
 .../header/notifications/justAddWater.vue     |   18 +-
 .../notifications/lostMasterclasser.vue       |   18 +-
 .../header/notifications/mindOverMatter.vue   |   18 +-
 .../header/notifications/newChatMessage.vue   |   23 +-
 .../header/notifications/newInboxMessage.vue  |   25 +-
 .../header/notifications/newMysteryItems.vue  |   26 +-
 .../header/notifications/newStuff.vue         |   29 +-
 .../header/notifications/partyInvitation.vue  |   33 +-
 .../header/notifications/questInvitation.vue  |   42 +-
 .../notifications/unallocatedStatsPoints.vue  |   27 +-
 .../header/notifications/verifyUsername.vue   |   43 +-
 .../header/notifications/worldBoss.vue        |   65 +-
 .../header/notificationsDropdown.vue          |   85 +-
 .../src/components/header/userDropdown.vue    |   99 +-
 .../inventory/equipment/attributesGrid.vue    |   40 +-
 .../inventory/equipment/attributesPopover.vue |   38 +-
 .../inventory/equipment/equipGearModal.vue    |   92 +-
 .../components/inventory/equipment/index.vue  |  312 +++--
 .../client/src/components/inventory/index.vue |   32 +-
 .../client/src/components/inventory/item.vue  |   66 +-
 .../inventory/items/cards-modal.vue           |   38 +-
 .../src/components/inventory/items/index.vue  |  438 ++++---
 .../components/inventory/stable/foodItem.vue  |   56 +-
 .../inventory/stable/hatchedPetDialog.vue     |   46 +-
 .../inventory/stable/hatchingModal.vue        |   51 +-
 .../src/components/inventory/stable/index.vue |  416 ++++---
 .../components/inventory/stable/mountItem.vue |   46 +-
 .../inventory/stable/mountRaisedModal.vue     |   41 +-
 .../components/inventory/stable/petItem.vue   |   97 +-
 .../inventory/stable/welcomeModal.vue         |   33 +-
 .../client/src/components/memberDetails.vue   |  121 +-
 .../src/components/members/classBadge.vue     |   10 +-
 .../members/groupMemberSearchDropdown.vue     |   22 +-
 .../members/memberSearchDropdown.vue          |   29 +-
 .../components/members/removeMemberModal.vue  |   51 +-
 .../client/src/components/modifyInventory.vue |  834 +++++++++----
 .../client/src/components/notifications.vue   |   39 +-
 website/client/src/components/parentPage.vue  |   10 +-
 .../src/components/payments/amazonButton.vue  |    7 +-
 .../src/components/payments/amazonModal.vue   |   43 +-
 .../src/components/payments/buyGemsModal.vue  |  545 ++++++---
 .../payments/cancelModalConfirm.vue           |   46 +-
 .../src/components/payments/canceledModal.vue |   50 +-
 .../src/components/payments/sendGemsModal.vue |  191 ++-
 .../src/components/payments/successModal.vue  |  104 +-
 .../client/src/components/secondaryMenu.vue   |    7 +-
 .../src/components/selectMembersModal.vue     |  101 +-
 .../client/src/components/settings/api.vue    |  157 ++-
 .../src/components/settings/dataExport.vue    |   18 +-
 .../src/components/settings/deleteModal.vue   |   59 +-
 .../client/src/components/settings/index.vue  |   57 +-
 .../src/components/settings/notifications.vue |   74 +-
 .../src/components/settings/promoCode.vue     |   73 +-
 .../src/components/settings/resetModal.vue    |   28 +-
 .../src/components/settings/restoreModal.vue  |  139 ++-
 .../client/src/components/settings/site.vue   |  591 ++++++---
 .../src/components/settings/subscription.vue  |  275 +++--
 .../src/components/settings/usernameForm.vue  |  105 +-
 .../components/settings/verifyUsername.vue    |   42 +-
 .../src/components/shared/inventoryDrawer.vue |   95 +-
 .../src/components/shops/balanceInfo.vue      |   16 +-
 .../client/src/components/shops/buyModal.vue  |  231 ++--
 .../components/shops/featuredItemsHeader.vue  |   78 +-
 website/client/src/components/shops/index.vue |   38 +-
 .../components/shops/market/categoryItem.vue  |   34 +-
 .../components/shops/market/categoryRow.vue   |   31 +-
 .../shops/market/equipmentSection.vue         |  113 +-
 .../src/components/shops/market/filter.vue    |   59 +-
 .../src/components/shops/market/index.vue     |  141 ++-
 .../components/shops/market/keysToKennel.vue  |   51 +-
 .../src/components/shops/market/sellModal.vue |  110 +-
 .../components/shops/quests/buyQuestModal.vue |  121 +-
 .../src/components/shops/quests/index.vue     |  442 ++++---
 .../shops/quests/questDialogContent.vue       |   23 +-
 .../shops/quests/questDialogDrops.vue         |   62 +-
 .../src/components/shops/quests/questInfo.vue |   49 +-
 .../src/components/shops/seasonal/index.vue   |  258 ++--
 .../client/src/components/shops/shopItem.vue  |  136 ++-
 .../components/shops/timeTravelers/index.vue  |  253 ++--
 .../client/src/components/sidebarSection.vue  |   64 +-
 .../src/components/snackbars/notification.vue |  104 +-
 .../components/snackbars/notifications.vue    |   16 +-
 website/client/src/components/static/app.vue  |   28 +-
 .../components/static/clearBrowserData.vue    |   31 +-
 .../components/static/communityGuidelines.vue |  271 ++---
 .../client/src/components/static/contact.vue  |   66 +-
 website/client/src/components/static/faq.vue  |   47 +-
 .../client/src/components/static/features.vue |  145 ++-
 .../src/components/static/groupPlans.vue      |  131 +-
 .../client/src/components/static/header.vue   |  154 ++-
 website/client/src/components/static/home.vue |  386 ++++--
 .../client/src/components/static/merch.vue    |   48 +-
 .../client/src/components/static/newStuff.vue |    7 +-
 .../client/src/components/static/overview.vue |   21 +-
 .../client/src/components/static/pressKit.vue |   73 +-
 .../client/src/components/static/privacy.vue  |  551 ++++-----
 .../src/components/static/staticWrapper.vue   |   36 +-
 .../client/src/components/static/terms.vue    | 1071 ++++++++---------
 .../src/components/tasks/approvalFooter.vue   |   55 +-
 .../src/components/tasks/approvalHeader.vue   |   14 +-
 .../src/components/tasks/approvalModal.vue    |   51 +-
 .../src/components/tasks/brokenTaskModal.vue  |   85 +-
 .../components/tasks/clearCompletedTodos.vue  |   15 +-
 .../client/src/components/tasks/column.vue    |  194 +--
 .../client/src/components/tasks/spells.vue    |   99 +-
 .../client/src/components/tasks/tagsPopup.vue |   61 +-
 website/client/src/components/tasks/task.vue  |  394 ++++--
 .../client/src/components/tasks/taskModal.vue |  880 ++++++++++----
 website/client/src/components/tasks/user.vue  |  316 +++--
 website/client/src/components/ui/checkbox.vue |   20 +-
 .../client/src/components/ui/countBadge.vue   |    9 +-
 .../src/components/ui/customMenuDropdown.vue  |   25 +-
 website/client/src/components/ui/drawer.vue   |   45 +-
 .../src/components/ui/drawerHeaderTabs.vue    |   30 +-
 .../client/src/components/ui/drawerSlider.vue |   61 +-
 .../src/components/ui/filterDropdown.vue      |   31 +-
 website/client/src/components/ui/itemRows.vue |   42 +-
 .../src/components/ui/layoutSection.vue       |   22 +-
 .../client/src/components/ui/pageLayout.vue   |   17 +-
 .../client/src/components/ui/starBadge.vue    |   13 +-
 website/client/src/components/ui/statsbar.vue |   32 +-
 .../client/src/components/ui/toggleSwitch.vue |   58 +-
 website/client/src/components/userLink.vue    |   21 +-
 .../src/components/userMenu/achievements.vue  |   79 +-
 .../client/src/components/userMenu/inbox.vue  |  212 ++--
 .../src/components/userMenu/profile.vue       |  469 +++++---
 .../src/components/userMenu/profileModal.vue  |   18 +-
 .../src/components/userMenu/profilePage.vue   |   13 +-
 .../src/components/userMenu/profileStats.vue  |  384 +++---
 .../client/src/components/userMenu/stats.vue  |  476 ++++----
 .../world-boss/worldBossInfoModal.vue         |   65 +-
 .../world-boss/worldBossRageModal.vue         |   83 +-
 .../src/components/yesterdailyModal.vue       |   52 +-
 website/client/vue.config.js                  |   17 -
 236 files changed, 16708 insertions(+), 9648 deletions(-)
 delete mode 100644 website/client/src/components/groups/newPartyModal.pug

diff --git a/website/client/.eslintrc.js b/website/client/.eslintrc.js
index ff10689de7..cf743eba98 100644
--- a/website/client/.eslintrc.js
+++ b/website/client/.eslintrc.js
@@ -10,6 +10,16 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'import/no-unresolved': 'off',
+    'vue/no-v-html': 'off',
+    'vue/html-self-closing': ['error', {
+      html: {
+        void: 'never',
+        normal: 'never',
+        component: 'always',
+      },
+      svg: 'never',
+      math: 'never',
+    }],
   },
   parserOptions: {
     parser: 'babel-eslint',
diff --git a/website/client/package-lock.json b/website/client/package-lock.json
index b7cfc62013..8c36980e3a 100644
--- a/website/client/package-lock.json
+++ b/website/client/package-lock.json
@@ -1025,21 +1025,6 @@
         }
       }
     },
-    "@types/babel-types": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.7.tgz",
-      "integrity": "sha512-dBtBbrc+qTHy1WdfHYjBwRln4+LWqASWakLHsWHR2NWHIFkv4W3O070IGoGLEBrJBvct3r0L1BUPuvURi7kYUQ==",
-      "dev": true
-    },
-    "@types/babylon": {
-      "version": "6.16.5",
-      "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.5.tgz",
-      "integrity": "sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==",
-      "dev": true,
-      "requires": {
-        "@types/babel-types": "*"
-      }
-    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -1078,7 +1063,8 @@
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
-      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
+      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
+      "dev": true
     },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
@@ -1643,6 +1629,7 @@
       "version": "6.10.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
       "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
+      "dev": true,
       "requires": {
         "fast-deep-equal": "^2.0.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1659,29 +1646,8 @@
     "ajv-keywords": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
-      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ=="
-    },
-    "align-text": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
-      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2",
-        "longest": "^1.0.1",
-        "repeat-string": "^1.5.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
+      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
+      "dev": true
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -1841,12 +1807,6 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
-    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -2097,32 +2057,6 @@
         }
       }
     },
-    "babel-types": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
-      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "esutils": "^2.0.2",
-        "lodash": "^4.17.4",
-        "to-fast-properties": "^1.0.3"
-      },
-      "dependencies": {
-        "to-fast-properties": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
-          "dev": true
-        }
-      }
-    },
-    "babylon": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-      "dev": true
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -2220,7 +2154,8 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
     },
     "binary-extensions": {
       "version": "1.13.1",
@@ -2311,7 +2246,8 @@
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
     },
     "bootstrap": {
       "version": "4.3.1",
@@ -2742,16 +2678,6 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
-    "center-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
-      "dev": true,
-      "requires": {
-        "align-text": "^0.1.3",
-        "lazy-cache": "^1.0.3"
-      }
-    },
     "chai": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz",
@@ -2776,15 +2702,6 @@
         "supports-color": "^5.3.0"
       }
     },
-    "character-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
-      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
-      "dev": true,
-      "requires": {
-        "is-regex": "^1.0.3"
-      }
-    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -2991,6 +2908,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
       "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dev": true,
       "requires": {
         "@types/q": "^1.5.1",
         "chalk": "^2.4.1",
@@ -3167,18 +3085,6 @@
         "bluebird": "^3.1.1"
       }
     },
-    "constantinople": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz",
-      "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==",
-      "dev": true,
-      "requires": {
-        "@types/babel-types": "^7.0.0",
-        "@types/babylon": "^6.16.2",
-        "babel-types": "^6.26.0",
-        "babylon": "^6.18.0"
-      }
-    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -3512,6 +3418,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
       "integrity": "sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==",
+      "dev": true,
       "requires": {
         "boolbase": "^1.0.0",
         "css-what": "^2.1.2",
@@ -3522,12 +3429,14 @@
     "css-select-base-adapter": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
     },
     "css-tree": {
       "version": "1.0.0-alpha.33",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz",
       "integrity": "sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==",
+      "dev": true,
       "requires": {
         "mdn-data": "2.0.4",
         "source-map": "^0.5.3"
@@ -3542,7 +3451,8 @@
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
+      "dev": true
     },
     "cssesc": {
       "version": "2.0.0",
@@ -3631,6 +3541,7 @@
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.1.tgz",
       "integrity": "sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==",
+      "dev": true,
       "requires": {
         "css-tree": "1.0.0-alpha.29"
       },
@@ -3639,6 +3550,7 @@
           "version": "1.0.0-alpha.29",
           "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz",
           "integrity": "sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==",
+          "dev": true,
           "requires": {
             "mdn-data": "~1.1.0",
             "source-map": "^0.5.3"
@@ -3647,7 +3559,8 @@
         "mdn-data": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
-          "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA=="
+          "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
+          "dev": true
         }
       }
     },
@@ -3857,6 +3770,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
       "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "dev": true,
       "requires": {
         "object-keys": "^1.0.12"
       }
@@ -4034,12 +3948,6 @@
         "esutils": "^2.0.2"
       }
     },
-    "doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
-      "dev": true
-    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -4059,6 +3967,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
       "integrity": "sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==",
+      "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
         "entities": "^2.0.0"
@@ -4067,7 +3976,8 @@
         "domelementtype": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
-          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
+          "dev": true
         }
       }
     },
@@ -4080,7 +3990,8 @@
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "dev": true
     },
     "domexception": {
       "version": "1.0.1",
@@ -4104,6 +4015,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
       "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "dev": true,
       "requires": {
         "dom-serializer": "0",
         "domelementtype": "1"
@@ -4211,7 +4123,8 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+      "dev": true
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -4242,7 +4155,8 @@
     "entities": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
-      "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
+      "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
+      "dev": true
     },
     "errno": {
       "version": "0.1.7",
@@ -4275,6 +4189,7 @@
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.15.0.tgz",
       "integrity": "sha512-bhkEqWJ2t2lMeaJDuk7okMkJWI/yqgH/EoGwpcvv0XW9RWQsRspI4wt6xuyuvMvvQE3gg/D9HXppgk21w78GyQ==",
+      "dev": true,
       "requires": {
         "es-to-primitive": "^1.2.0",
         "function-bind": "^1.1.1",
@@ -4292,6 +4207,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
       "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
+      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -4783,7 +4699,8 @@
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+      "dev": true
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -4802,7 +4719,8 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "dev": true
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -4856,6 +4774,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.2.0.tgz",
       "integrity": "sha512-+xZnaK5R8kBJrHK0/6HRlrKNamvVS5rjyuju+rnyxRGuwUJwpAMsVzUl5dz6rK8brkzjV6JpcFNjp6NqV0g1OQ==",
+      "dev": true,
       "requires": {
         "loader-utils": "^1.2.3",
         "schema-utils": "^2.0.0"
@@ -4865,6 +4784,7 @@
           "version": "2.4.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.4.1.tgz",
           "integrity": "sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==",
+          "dev": true,
           "requires": {
             "ajv": "^6.10.2",
             "ajv-keywords": "^3.4.1"
@@ -5686,7 +5606,8 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -5860,6 +5781,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -5889,7 +5811,8 @@
     "has-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
-      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
+      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
+      "dev": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -6514,7 +6437,8 @@
     "is-callable": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA=="
+      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
+      "dev": true
     },
     "is-ci": {
       "version": "1.2.1",
@@ -6562,7 +6486,8 @@
     "is-date-object": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
+      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
+      "dev": true
     },
     "is-descriptor": {
       "version": "0.1.6",
@@ -6589,24 +6514,6 @@
       "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
       "dev": true
     },
-    "is-expression": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz",
-      "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=",
-      "dev": true,
-      "requires": {
-        "acorn": "~4.0.2",
-        "object-assign": "^4.0.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "4.0.13",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
-          "dev": true
-        }
-      }
-    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -6709,6 +6616,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
       "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
+      "dev": true,
       "requires": {
         "has": "^1.0.1"
       }
@@ -6738,6 +6646,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
       "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.0"
       }
@@ -6816,12 +6725,6 @@
         "easy-stack": "^1.0.0"
       }
     },
-    "js-stringify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
-      "dev": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6832,6 +6735,7 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
       "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -6840,7 +6744,8 @@
         "esprima": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
         }
       }
     },
@@ -6924,7 +6829,8 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -6974,16 +6880,6 @@
         "verror": "1.10.0"
       }
     },
-    "jstransformer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
-      "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
-      "dev": true,
-      "requires": {
-        "is-promise": "^2.0.0",
-        "promise": "^7.0.1"
-      }
-    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -7015,12 +6911,6 @@
         "launch-editor": "^2.2.1"
       }
     },
-    "lazy-cache": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
-      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
-      "dev": true
-    },
     "lcid": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
@@ -7115,6 +7005,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
       "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^2.0.0",
@@ -7125,6 +7016,7 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -7203,12 +7095,6 @@
       "integrity": "sha512-p0b6mOGKcGa+7nnmKbpzR6qloPbrgLcnio++E+14Vo/XffOGwZtRpUhr8dTH/x2oCMmEoIU0Zwm3ZauhvYD17g==",
       "dev": true
     },
-    "longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true
-    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -7321,7 +7207,8 @@
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+      "dev": true
     },
     "mdurl": {
       "version": "1.0.1",
@@ -7512,7 +7399,8 @@
     "minimist": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "dev": true
     },
     "mississippi": {
       "version": "3.0.0",
@@ -7557,6 +7445,7 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -7564,7 +7453,8 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
         }
       }
     },
@@ -8134,6 +8024,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
       "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dev": true,
       "requires": {
         "boolbase": "~1.0.0"
       }
@@ -8207,7 +8098,8 @@
     "object-inspect": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
-      "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ=="
+      "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==",
+      "dev": true
     },
     "object-is": {
       "version": "1.0.1",
@@ -8218,7 +8110,8 @@
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
     },
     "object-visit": {
       "version": "1.0.1",
@@ -8245,6 +8138,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
       "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
+      "dev": true,
       "requires": {
         "define-properties": "^1.1.2",
         "es-abstract": "^1.5.1"
@@ -8263,6 +8157,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.0.tgz",
       "integrity": "sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==",
+      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.12.0",
@@ -9297,15 +9192,6 @@
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "dev": true
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -9354,189 +9240,6 @@
         "safe-buffer": "^5.1.2"
       }
     },
-    "pug": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.4.tgz",
-      "integrity": "sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==",
-      "dev": true,
-      "requires": {
-        "pug-code-gen": "^2.0.2",
-        "pug-filters": "^3.1.1",
-        "pug-lexer": "^4.1.0",
-        "pug-linker": "^3.0.6",
-        "pug-load": "^2.0.12",
-        "pug-parser": "^5.0.1",
-        "pug-runtime": "^2.0.5",
-        "pug-strip-comments": "^1.0.4"
-      }
-    },
-    "pug-attrs": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.4.tgz",
-      "integrity": "sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==",
-      "dev": true,
-      "requires": {
-        "constantinople": "^3.0.1",
-        "js-stringify": "^1.0.1",
-        "pug-runtime": "^2.0.5"
-      }
-    },
-    "pug-code-gen": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.2.tgz",
-      "integrity": "sha512-kROFWv/AHx/9CRgoGJeRSm+4mLWchbgpRzTEn8XCiwwOy6Vh0gAClS8Vh5TEJ9DBjaP8wCjS3J6HKsEsYdvaCw==",
-      "dev": true,
-      "requires": {
-        "constantinople": "^3.1.2",
-        "doctypes": "^1.1.0",
-        "js-stringify": "^1.0.1",
-        "pug-attrs": "^2.0.4",
-        "pug-error": "^1.3.3",
-        "pug-runtime": "^2.0.5",
-        "void-elements": "^2.0.1",
-        "with": "^5.0.0"
-      }
-    },
-    "pug-error": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.3.tgz",
-      "integrity": "sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==",
-      "dev": true
-    },
-    "pug-filters": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.1.tgz",
-      "integrity": "sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==",
-      "dev": true,
-      "requires": {
-        "clean-css": "^4.1.11",
-        "constantinople": "^3.0.1",
-        "jstransformer": "1.0.0",
-        "pug-error": "^1.3.3",
-        "pug-walk": "^1.1.8",
-        "resolve": "^1.1.6",
-        "uglify-js": "^2.6.1"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-          "dev": true
-        },
-        "cliui": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
-          "dev": true,
-          "requires": {
-            "center-align": "^0.1.1",
-            "right-align": "^0.1.1",
-            "wordwrap": "0.0.2"
-          }
-        },
-        "uglify-js": {
-          "version": "2.8.29",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
-          "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
-          "dev": true,
-          "requires": {
-            "source-map": "~0.5.1",
-            "uglify-to-browserify": "~1.0.0",
-            "yargs": "~3.10.0"
-          }
-        },
-        "wordwrap": {
-          "version": "0.0.2",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
-          "dev": true
-        },
-        "yargs": {
-          "version": "3.10.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
-          "dev": true,
-          "requires": {
-            "camelcase": "^1.0.2",
-            "cliui": "^2.1.0",
-            "decamelize": "^1.0.0",
-            "window-size": "0.1.0"
-          }
-        }
-      }
-    },
-    "pug-lexer": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.1.0.tgz",
-      "integrity": "sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==",
-      "dev": true,
-      "requires": {
-        "character-parser": "^2.1.1",
-        "is-expression": "^3.0.0",
-        "pug-error": "^1.3.3"
-      }
-    },
-    "pug-linker": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.6.tgz",
-      "integrity": "sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==",
-      "dev": true,
-      "requires": {
-        "pug-error": "^1.3.3",
-        "pug-walk": "^1.1.8"
-      }
-    },
-    "pug-load": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.12.tgz",
-      "integrity": "sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.0",
-        "pug-walk": "^1.1.8"
-      }
-    },
-    "pug-parser": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.1.tgz",
-      "integrity": "sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==",
-      "dev": true,
-      "requires": {
-        "pug-error": "^1.3.3",
-        "token-stream": "0.0.1"
-      }
-    },
-    "pug-plain-loader": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pug-plain-loader/-/pug-plain-loader-1.0.0.tgz",
-      "integrity": "sha512-mDfq/qvJJ0xdug38mZ1ObW0BQTx9kAHnKqotXC+C00XQkKmsWaMe90JUg/kN4lS6MU7tpVsMZ+rmcnBSPfDtHA==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.1.0"
-      }
-    },
-    "pug-runtime": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.5.tgz",
-      "integrity": "sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==",
-      "dev": true
-    },
-    "pug-strip-comments": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz",
-      "integrity": "sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==",
-      "dev": true,
-      "requires": {
-        "pug-error": "^1.3.3"
-      }
-    },
-    "pug-walk": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.8.tgz",
-      "integrity": "sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==",
-      "dev": true
-    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -9573,12 +9276,14 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
     },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
     },
     "qs": {
       "version": "6.5.2",
@@ -10013,15 +9718,6 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
-    "right-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
-      "dev": true,
-      "requires": {
-        "align-text": "^0.1.1"
-      }
-    },
     "rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -10138,7 +9834,8 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
     },
     "saxes": {
       "version": "3.1.11",
@@ -10403,7 +10100,8 @@
     "simple-html-tokenizer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
-      "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4="
+      "integrity": "sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=",
+      "dev": true
     },
     "simple-swizzle": {
       "version": "0.2.2",
@@ -10633,7 +10331,8 @@
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
     },
     "source-map-resolve": {
       "version": "0.5.2",
@@ -10787,7 +10486,8 @@
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
     },
     "stackframe": {
       "version": "1.1.0",
@@ -10925,6 +10625,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz",
       "integrity": "sha512-FJ6b7EgdKxxbDxc79cOlok6Afd++TTs5szo+zJTUyow3ycrRfJVE2pq3vcN53XexvKZu/DJMDfeI/qMiZTrjTw==",
+      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "function-bind": "^1.1.1"
@@ -10934,6 +10635,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz",
       "integrity": "sha512-fXZTSV55dNBwv16uw+hh5jkghxSnc5oHq+5K/gXgizHwAvMetdAJlHqqoFC1FSDVPYWLkAKl2cxpUT41sV7nSg==",
+      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "function-bind": "^1.1.1"
@@ -11017,6 +10719,7 @@
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.0.tgz",
       "integrity": "sha512-rynplY2eXFrdNomL1FvyTFQlP+dx0WqbzHglmNtA9M4IHRC3no2aPAl3ny9lUpJzFzFMZfWRK5YIclNU+FRePA==",
+      "dev": true,
       "requires": {
         "loader-utils": "^0.2.11",
         "object-assign": "^4.0.1",
@@ -11026,17 +10729,20 @@
         "big.js": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
+          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+          "dev": true
         },
         "json5": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+          "dev": true
         },
         "loader-utils": {
           "version": "0.2.17",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
           "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "dev": true,
           "requires": {
             "big.js": "^3.1.3",
             "emojis-list": "^2.0.0",
@@ -11056,6 +10762,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-3.0.2.tgz",
       "integrity": "sha512-MUJFVU2uuOTZW6Eq6NuXZxhaIyWiuKtZMcT90nCkcvIZPGGc0CYyZWYP/rtXUkja5qagNMpxDwdZ/tuC6ywfWg==",
+      "dev": true,
       "requires": {
         "file-loader": "~4.2.0",
         "loader-utils": "~1.2.3"
@@ -11065,6 +10772,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
       "integrity": "sha512-MLfUA6O+qauLDbym+mMZgtXCGRfIxyQoeH6IKVcFslyODEe/ElJNwr0FohQ3xG4C6HK6bk3KYPPXwHVJk3V5NQ==",
+      "dev": true,
       "requires": {
         "chalk": "^2.4.1",
         "coa": "^2.0.2",
@@ -11085,6 +10793,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/svgo-loader/-/svgo-loader-2.2.1.tgz",
       "integrity": "sha512-9dyz/h6ae04pAVRz7QY8bLXtMbwA19NPpCPfCixgW0qXNDCOlHbDRqvtT5/2gzRxfuibWCUP6ZBQmZWF9rjWhQ==",
+      "dev": true,
       "requires": {
         "js-yaml": "^3.13.1",
         "loader-utils": "^1.0.3"
@@ -11317,12 +11026,6 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
       "dev": true
     },
-    "token-stream": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
-      "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=",
-      "dev": true
-    },
     "toposort": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
@@ -11455,13 +11158,6 @@
         }
       }
     },
-    "uglify-to-browserify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true,
-      "optional": true
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -11547,7 +11243,8 @@
     "unquote": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ="
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
     },
     "unset-value": {
       "version": "1.0.0",
@@ -11605,6 +11302,7 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -11699,6 +11397,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
       "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+      "dev": true,
       "requires": {
         "define-properties": "^1.1.2",
         "object.getownpropertydescriptors": "^2.0.3"
@@ -11765,12 +11464,6 @@
       "integrity": "sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==",
       "dev": true
     },
-    "void-elements": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
-      "dev": true
-    },
     "vue": {
       "version": "2.6.10",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
@@ -12357,47 +12050,6 @@
         "string-width": "^1.0.2 || 2"
       }
     },
-    "window-size": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-      "dev": true
-    },
-    "with": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz",
-      "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=",
-      "dev": true,
-      "requires": {
-        "acorn": "^3.1.0",
-        "acorn-globals": "^3.0.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
-          "dev": true
-        },
-        "acorn-globals": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
-          "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
-          "dev": true,
-          "requires": {
-            "acorn": "^4.0.4"
-          },
-          "dependencies": {
-            "acorn": {
-              "version": "4.0.13",
-              "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-              "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
-              "dev": true
-            }
-          }
-        }
-      }
-    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/website/client/package.json b/website/client/package.json
index 89cbec465b..24f2353c0c 100644
--- a/website/client/package.json
+++ b/website/client/package.json
@@ -43,7 +43,6 @@
     "eslint-plugin-vue": "^5.0.0",
     "inspectpack": "^4.2.2",
     "pug": "^2.0.4",
-    "pug-plain-loader": "^1.0.0",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "svg-inline-loader": "^0.8.0",
diff --git a/website/client/src/app.vue b/website/client/src/app.vue
index 531f37984f..a1c9ed3dde 100644
--- a/website/client/src/app.vue
+++ b/website/client/src/app.vue
@@ -1,52 +1,70 @@
-<template lang="pug">
-div
-  #loading-screen-inapp(v-if='loading')
-    .row
-      .col-12.text-center
-        svg#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')
-      .col-12.text-center
-        h2 {{$t('tipTitle', {tipNumber: currentTipNumber})}}
-        p {{currentTip}}
-  #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)
-      template(v-if="isUserLoaded")
-        .resting-banner(v-show="showRestingBanner", ref="restingBanner")
-          span.content
-            span.label.d-inline.d-sm-none {{ $t('innCheckOutBannerShort') }}
-            span.label.d-none.d-sm-inline {{ $t('innCheckOutBanner') }}
-            span.separator  |
-            span.resume(@click="resumeDamage()") {{ $t('resumeDamage') }}
-          .closepadding(@click="hideBanner()")
-            span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close")
-        notifications-display
-        app-menu
-        .container-fluid
-          app-header
-          buyModal(
-            :item="selectedItemToBuy || {}",
-            :withPin="true",
-            @buyPressed="customPurchase($event)",
-            :genericPurchase="genericPurchase(selectedItemToBuy)",
-
-          )
-          selectMembersModal(
-            :item="selectedSpellToBuy || {}",
-            :group="user.party",
-            @memberSelected="memberSelected($event)",
-          )
-
-          div(:class='{sticky: user.preferences.stickyHeader}')
-            router-view
-        app-footer
-        audio#sound(autoplay, ref="sound")
+<template>
+  <div>
+    <div
+      v-if="loading"
+      id="loading-screen-inapp"
+    >
+      <div class="row">
+        <div class="col-12 text-center">
+          <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>
+        </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>
+        <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
+              class="closepadding"
+              @click="hideBanner()"
+            >
+              <span
+                class="svg-icon inline icon-10"
+                aria-hidden="true"
+                v-html="icons.close"
+              ></span>
+            </div>
+          </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
+              :item="selectedSpellToBuy || {}"
+              :group="user.party"
+              @memberSelected="memberSelected($event)"
+            /><div :class="{sticky: user.preferences.stickyHeader}">
+              <router-view />
+            </div>
+          </div><app-footer /><audio
+            id="sound"
+            ref="sound"
+            autoplay="autoplay"
+          ></audio>
+        </template>
+      </template>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/404.vue b/website/client/src/components/404.vue
index 3e014475de..a97717a471 100644
--- a/website/client/src/components/404.vue
+++ b/website/client/src/components/404.vue
@@ -1,16 +1,22 @@
-<template lang="pug">
-.row
-  .col-12.text-center
-    // @TODO i18n. How to setup the strings with the router-link inside?
-    img.not-found-img(src='~@/assets/images/404.png')
-    h1.not-found Sometimes even the bravest adventurer gets lost.
-    h2.not-found Looks like this link is broken or the page may have moved, sorry!
-    h2.not-found
-      | Head back to the
-      <router-link to="/">Homepage</router-link>
-      | or
-      <router-link :to="contactUsLink">Contact Us</router-link>
-      | about the issue.
+<template>
+  <div class="row">
+    <div class="col-12 text-center">
+      <!-- @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">
+        Sometimes even the bravest adventurer gets lost.
+      </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="/">
+          Homepage
+        </router-link>or<router-link :to="contactUsLink">
+          Contact Us
+        </router-link>about the issue.
+      </h2>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/achievements/achievementAvatar.vue b/website/client/src/components/achievements/achievementAvatar.vue
index ce60092a2f..5c32fdb2e3 100644
--- a/website/client/src/components/achievements/achievementAvatar.vue
+++ b/website/client/src/components/achievements/achievementAvatar.vue
@@ -1,7 +1,11 @@
-<template lang="pug">
-  div(:class='achievementClass')
-    //- +generatedAvatar({sleep: false})
-    avatar(:member='user', :avatarOnly='true', :withBackground='true')
+<template>
+  <div :class="achievementClass">
+    <avatar
+      :member="user"
+      :avatar-only="true"
+      :with-background="true"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/achievements/achievementFooter.vue b/website/client/src/components/achievements/achievementFooter.vue
index da75a68147..9170eaff1f 100644
--- a/website/client/src/components/achievements/achievementFooter.vue
+++ b/website/client/src/components/achievements/achievementFooter.vue
@@ -1,16 +1,31 @@
-<template lang="pug">
-.modal-footer(style='margin-top:0', ng-init='loadWidgets()')
-  .container-fluid.share-buttons
-    .row
-      .col-12.text-center
-        a.twitter-share-button.share-button(:href='twitterLink', target='_blank')
-          .social-icon.twitter.svg-icon(v-html='icons.twitter')
-          | {{ $t('tweet') }}
-        a.fb-share-button.share-button(:href='facebookLink', target='_blank')
-          .social-icon.facebook.svg-icon(v-html='icons.facebook')
-          | {{ $t('share') }}
-        // @TODO: Still want this? .col-4
-          a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')
+<template>
+  <div
+    class="modal-footer"
+    style="margin-top:0"
+    ng-init="loadWidgets()"
+  >
+    <div class="container-fluid share-buttons">
+      <div class="row">
+        <div class="col-12 text-center">
+          <a
+            class="twitter-share-button share-button"
+            :href="twitterLink"
+            target="_blank"
+          ><div
+            class="social-icon twitter svg-icon"
+            v-html="icons.twitter"
+          ></div>{{ $t('tweet') }}</a><a
+            class="fb-share-button share-button"
+            :href="facebookLink"
+            target="_blank"
+          ><div
+            class="social-icon facebook svg-icon"
+            v-html="icons.facebook"
+          ></div>{{ $t('share') }}</a><!-- @TODO: Still want this? .col-4a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')-->
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/armoireEmpty.vue b/website/client/src/components/achievements/armoireEmpty.vue
index dca69af311..20a4350f1e 100644
--- a/website/client/src/components/achievements/armoireEmpty.vue
+++ b/website/client/src/components/achievements/armoireEmpty.vue
@@ -1,14 +1,27 @@
-<template lang="pug">
-  b-modal#armoire-empty(:title="$t('armoireText')", size='lg', :hide-footer="true")
-    .modal-body
-      .row
-        .col-6.offset-3
-          .shop_armoire
-          p {{$t('armoireLastItem')}}
-          p {{$t('armoireNotesEmpty')}}
-    .modal-footer
-      .col-12.text-center
-          button.btn.btn-primary(@click='close()') {{$t('close')}}
+<template>
+  <b-modal
+    id="armoire-empty"
+    :title="$t('armoireText')"
+    size="lg"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="row">
+        <div class="col-6 offset-3">
+          <div class="shop_armoire"></div><p>{{ $t('armoireLastItem') }}</p><p>{{ $t('armoireNotesEmpty') }}</p>
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('close') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/chooseClass.vue b/website/client/src/components/achievements/chooseClass.vue
index c6a33ade4a..4668c185a7 100644
--- a/website/client/src/components/achievements/chooseClass.vue
+++ b/website/client/src/components/achievements/chooseClass.vue
@@ -1,54 +1,89 @@
-<template lang="pug">
-  b-modal#choose-class(
-    size='lg',
-    :hide-header='true',
-    :hide-footer='true',
-    :no-close-on-esc='true',
-    :no-close-on-backdrop='true',
-  )
-    .modal-body.select-class
-      h1.header-purple.text-center {{ $t('chooseClass') }}
-      .container-fluid
-        br
-        .row
-          .col-md-3(v-for='heroClass in classes')
-            div(@click='selectedClass = heroClass')
-              avatar(
-                :member='user',
-                :avatarOnly='true',
-                :withBackground='false',
-                :overrideAvatarGear='classGear(heroClass)',
-                :hideClassBadge='true',
-                :spritesMargin='"1.8em 1.5em"',
-                :overrideTopPadding='"0px"',
-                :showVisualBuffs='false',
-                :class='selectionBox(selectedClass, heroClass)',
-              )
-        br
-        .d-flex.justify-content-center(v-for='heroClass in classes')
-          .d-inline-flex(v-if='selectedClass === heroClass')
-            .class-badge.d-flex.justify-content-center
-              .svg-icon.align-self-center(v-html='icons[heroClass]')
-            .class-name(:class='`${heroClass}-color`') {{ $t(heroClass) }}
-        div(v-for='heroClass in classes')
-          .class-explanation.text-center(
-            v-if='selectedClass === heroClass'
-          ) {{ $t(`${heroClass}Text`) }}
-        .text-center(v-markdown='$t("chooseClassLearnMarkdown")')
-        .modal-actions.text-center
-          button.btn.btn-primary.d-inline-block(
-            v-if='!selectedClass',
-            :disabled='true'
-          ) {{ $t('select') }}
-          button.btn.btn-primary.d-inline-block(
-            v-else,
-            @click='clickSelectClass(selectedClass); close();'
-          ) {{ $t('selectClass', {heroClass: $t(selectedClass)}) }}
-          .opt-out-wrapper
-            span#classOptOutBtn.danger(
-              @click='clickDisableClasses(); close();'
-            ) {{ $t('optOutOfClasses') }}
-          span.opt-out-description {{ $t('optOutOfClassesText') }}
+<template>
+  <b-modal
+    id="choose-class"
+    size="lg"
+    :hide-header="true"
+    :hide-footer="true"
+    :no-close-on-esc="true"
+    :no-close-on-backdrop="true"
+  >
+    <div class="modal-body select-class">
+      <h1 class="header-purple text-center">
+        {{ $t('chooseClass') }}
+      </h1><div class="container-fluid">
+        <br><div class="row">
+          <div
+            v-for="heroClass in classes"
+            class="col-md-3"
+          >
+            <div @click="selectedClass = heroClass">
+              <avatar
+                :member="user"
+                :avatar-only="true"
+                :with-background="false"
+                :override-avatar-gear="classGear(heroClass)"
+                :hide-class-badge="true"
+                :sprites-margin="'1.8em 1.5em'"
+                :override-top-padding="'0px'"
+                :show-visual-buffs="false"
+                :class="selectionBox(selectedClass, heroClass)"
+              />
+            </div>
+          </div>
+        </div><br><div
+          v-for="heroClass in classes"
+          class="d-flex justify-content-center"
+        >
+          <div
+            v-if="selectedClass === heroClass"
+            class="d-inline-flex"
+          >
+            <div class="class-badge d-flex justify-content-center">
+              <div
+                class="svg-icon align-self-center"
+                v-html="icons[heroClass]"
+              ></div>
+            </div><div
+              class="class-name"
+              :class="`${heroClass}-color`"
+            >
+              {{ $t(heroClass) }}
+            </div>
+          </div>
+        </div><div v-for="heroClass in classes">
+          <div
+            v-if="selectedClass === heroClass"
+            class="class-explanation text-center"
+          >
+            {{ $t(`${heroClass}Text`) }}
+          </div>
+        </div><div
+          v-markdown="$t('chooseClassLearnMarkdown')"
+          class="text-center"
+        ></div><div class="modal-actions text-center">
+          <button
+            v-if="!selectedClass"
+            class="btn btn-primary d-inline-block"
+            :disabled="true"
+          >
+            {{ $t('select') }}
+          </button><button
+            v-else
+            class="btn btn-primary d-inline-block"
+            @click="clickSelectClass(selectedClass); close();"
+          >
+            {{ $t('selectClass', {heroClass: $t(selectedClass)}) }}
+          </button><div class="opt-out-wrapper">
+            <span
+              id="classOptOutBtn"
+              class="danger"
+              @click="clickDisableClasses(); close();"
+            >{{ $t('optOutOfClasses') }}</span>
+          </div><span class="opt-out-description">{{ $t('optOutOfClassesText') }}</span>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/achievements/contributor.vue b/website/client/src/components/achievements/contributor.vue
index aeeb4e68aa..50271afa41 100644
--- a/website/client/src/components/achievements/contributor.vue
+++ b/website/client/src/components/achievements/contributor.vue
@@ -1,16 +1,27 @@
-<template lang="pug">
-  b-modal#contributor(:title="$t('modalContribAchievement')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        | {{ $t('contribModal', {name: user.profile.name, level: user.contributor.level}) }}
-        br
-        a(:href="$t('conRewardsURL')", target='_blank') {{ $t('contribLink') }}
-        br
-        button.btn.btn-primary(style='margin-top:1em' @click='close()') {{ $t('huzzah') }}
-        br
-    achievement-footer
+<template>
+  <b-modal
+    id="contributor"
+    :title="$t('modalContribAchievement')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        {{ $t('contribModal', {name: user.profile.name, level: user.contributor.level}) }}<br><a
+          :href="$t('conRewardsURL')"
+          target="_blank"
+        >{{ $t('contribLink') }}</a><br><button
+          class="btn btn-primary"
+          style="margin-top:1em"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button><br>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/death.vue b/website/client/src/components/achievements/death.vue
index e73c46fb9b..810190bd0f 100644
--- a/website/client/src/components/achievements/death.vue
+++ b/website/client/src/components/achievements/death.vue
@@ -1,30 +1,56 @@
-<template lang="pug">
-  b-modal#death(
-    :title="$t('lostAllHealth')",
-    size='md',
-    :hide-footer="true",
-    no-close-on-esc,
-    no-close-on-backdrop,
-  )
-    .row
-      .col-12
-        .hero-stats
-          .meter-label(:tooltip="$t('health')")
-            span.glyphicon.glyphicon-heart
-          .meter.health(:tooltip='Math.round(user.stats.hp * 100) / 100')
-            .bar(:style='barStyle')
-          // span.meter-text.value
-            | {{Math.ceil(user.stats.hp)}} / {{maxHealth}}
-          avatar(:member='user', :sleep='true', :avatarOnly='true', :withBackground='true')
-          // @TOOD: Sleep +generatedAvatar({sleep:true})
-          span(class='knockout')
-      .col-6.offset-3
-        h4.dont-despair {{ $t('dontDespair') }}
-        p.death-penalty {{ $t('deathPenaltyDetails') }}
-    .modal-footer
-      .col-12.text-center
-        button.btn.btn-danger(@click='revive()') {{ $t('refillHealthTryAgain') }}
-        h4.text-center(v-html="$t('dyingOftenTips')")
+<template>
+  <b-modal
+    id="death"
+    :title="$t('lostAllHealth')"
+    size="md"
+    :hide-footer="true"
+    no-close-on-esc="no-close-on-esc"
+    no-close-on-backdrop="no-close-on-backdrop"
+  >
+    <div class="row">
+      <div class="col-12">
+        <div class="hero-stats">
+          <div
+            class="meter-label"
+            :tooltip="$t('health')"
+          >
+            <span class="glyphicon glyphicon-heart"></span>
+          </div><div
+            class="meter health"
+            :tooltip="Math.round(user.stats.hp * 100) / 100"
+          >
+            <div
+              class="bar"
+              :style="barStyle"
+            ></div>
+          </div><!-- span.meter-text.value| {{Math.ceil(user.stats.hp)}} / {{maxHealth}}--><avatar
+            :member="user"
+            :sleep="true"
+            :avatar-only="true"
+            :with-background="true"
+          /><!-- @TOOD: Sleep +generatedAvatar({sleep:true})--><span class="knockout"></span>
+        </div>
+      </div><div class="col-6 offset-3">
+        <h4 class="dont-despair">
+          {{ $t('dontDespair') }}
+        </h4><p class="death-penalty">
+          {{ $t('deathPenaltyDetails') }}
+        </p>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-danger"
+          @click="revive()"
+        >
+          {{ $t('refillHealthTryAgain') }}
+        </button><h4
+          class="text-center"
+          v-html="$t('dyingOftenTips')"
+        ></h4>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/dropsEnabled.vue b/website/client/src/components/achievements/dropsEnabled.vue
index 2f6a9e3540..9aa4bcdec0 100644
--- a/website/client/src/components/achievements/dropsEnabled.vue
+++ b/website/client/src/components/achievements/dropsEnabled.vue
@@ -1,16 +1,25 @@
-<template lang="pug">
-  b-modal#drops-enabled(:title="$t('dropsEnabled')", size='lg', :hide-footer="true")
-    .modal-body
-      .col-6.offset-3.text-center
-        p
-          .item-drop-icon(class='Pet_Egg_Wolf')
-          span(v-html='firstDropText')
-        p
-          .item-drop-icon(class='Pet_Currency_Gem')
-          span(v-html="$t('useGems')")
-    .modal-footer
-      .col-12.text-center
-        button.btn.btn-primary(@click='close()') {{ $t('close') }}
+<template>
+  <b-modal
+    id="drops-enabled"
+    :title="$t('dropsEnabled')"
+    size="lg"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-6 offset-3 text-center">
+        <p></p><div class="item-drop-icon Pet_Egg_Wolf"></div><span v-html="firstDropText"></span></p><p></p><div class="item-drop-icon Pet_Currency_Gem"></div><span v-html="$t('useGems')"></span></p>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('close') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/genericAchievement.vue b/website/client/src/components/achievements/genericAchievement.vue
index ffb3fb1c90..2d4ddc99b0 100644
--- a/website/client/src/components/achievements/genericAchievement.vue
+++ b/website/client/src/components/achievements/genericAchievement.vue
@@ -1,12 +1,23 @@
-<template lang="pug">
-  b-modal#generic-achievement(:title='data.message', size='md', :hide-footer='true')
-    .modal-body
-      .col-12
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        p(v-html='data.modalText')
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="generic-achievement"
+    :title="data.message"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <p v-html="data.modalText"></p><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/invitedFriend.vue b/website/client/src/components/achievements/invitedFriend.vue
index 24522181c2..8741b2dd49 100644
--- a/website/client/src/components/achievements/invitedFriend.vue
+++ b/website/client/src/components/achievements/invitedFriend.vue
@@ -1,14 +1,23 @@
-<template lang="pug">
-  b-modal#invited-friend(:title="$t('modalAchievement')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        // @TODO: +achievementAvatar('friends',0)
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        p {{ $t('invitedFriendText') }}
-        br
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="invited-friend"
+    :title="$t('modalAchievement')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <!-- @TODO: +achievementAvatar('friends',0)--><achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <p>{{ $t('invitedFriendText') }}</p><br><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/joinedChallenge.vue b/website/client/src/components/achievements/joinedChallenge.vue
index 703e3e4c72..b9097afaf2 100644
--- a/website/client/src/components/achievements/joinedChallenge.vue
+++ b/website/client/src/components/achievements/joinedChallenge.vue
@@ -1,14 +1,23 @@
-<template lang="pug">
-  b-modal#joined-challenge(:title="$t('modalAchievement')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        // @TODO: +achievementAvatar('challenge',0)
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        p {{ $t('joinedChallengeText') }}
-        br
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="joined-challenge"
+    :title="$t('modalAchievement')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <!-- @TODO: +achievementAvatar('challenge',0)--><achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <p>{{ $t('joinedChallengeText') }}</p><br><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/joinedGuild.vue b/website/client/src/components/achievements/joinedGuild.vue
index 2896b617f5..d723a37bbb 100644
--- a/website/client/src/components/achievements/joinedGuild.vue
+++ b/website/client/src/components/achievements/joinedGuild.vue
@@ -1,14 +1,23 @@
-<template lang="pug">
-  b-modal#joined-guild(:title="$t('modalAchievement')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        // @TODO: +achievementAvatar('guild',0)
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        p {{ $t('joinedGuildText') }}
-        br
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="joined-guild"
+    :title="$t('modalAchievement')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <!-- @TODO: +achievementAvatar('guild',0)--><achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <p>{{ $t('joinedGuildText') }}</p><br><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/justAddWater.vue b/website/client/src/components/achievements/justAddWater.vue
index ad7a1e1d08..eee45c3311 100644
--- a/website/client/src/components/achievements/justAddWater.vue
+++ b/website/client/src/components/achievements/justAddWater.vue
@@ -1,12 +1,23 @@
-<template lang="pug">
-  b-modal#just-add-water(:title='title', size='md', :hide-footer='true')
-    .modal-body
-      .col-12
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        p {{ $t('achievementJustAddWaterModalText') }}
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="just-add-water"
+    :title="title"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <p>{{ $t('achievementJustAddWaterModalText') }}</p><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/levelUp.vue b/website/client/src/components/achievements/levelUp.vue
index 1495a56f4a..e84214da2a 100644
--- a/website/client/src/components/achievements/levelUp.vue
+++ b/website/client/src/components/achievements/levelUp.vue
@@ -1,30 +1,48 @@
-<template lang="pug">
-  b-modal#level-up(:title="$t('levelUpShare')", size='sm', :hide-footer="true", :hide-header="true")
-    .modal-body.text-center
-      h2 {{ $t('reachedLevel', {level: user.stats.lvl}) }}
-
-      avatar.avatar(:member='user')
-
-      p.text {{ $t('levelup') }}
-
-      button.btn.btn-primary(@click='close()') {{ $t('onwards') }}
-      br
-      // @TODO: Keep this? .checkbox
-        input(type='checkbox', v-model=
-        'user.preferences.suppressModals.levelUp', @change='changeLevelupSuppress()')
-        label(style='display:inline-block') {{ $t('dontShowAgain') }}
-
-    .container-fluid.share-buttons
-      .row
-        .col-12.text-center
-          a.twitter-share-button.share-button(:href='twitterLink', target='_blank')
-            .social-icon.twitter.svg-icon(v-html='icons.twitter')
-            | {{ $t('tweet') }}
-          a.fb-share-button.share-button(:href='facebookLink', target='_blank')
-            .social-icon.facebook.svg-icon(v-html='icons.facebook')
-            | {{ $t('share') }}
-        // @TODO: Still want this? .col-4
-          a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')
+<template>
+  <b-modal
+    id="level-up"
+    :title="$t('levelUpShare')"
+    size="sm"
+    :hide-footer="true"
+    :hide-header="true"
+  >
+    <div class="modal-body text-center">
+      <h2>{{ $t('reachedLevel', {level: user.stats.lvl}) }}</h2><avatar
+        class="avatar"
+        :member="user"
+      /><p class="text">
+        {{ $t('levelup') }}
+      </p><button
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('onwards') }}
+      </button><br><!-- @TODO: Keep this? .checkboxinput(type='checkbox', v-model=
+'user.preferences.suppressModals.levelUp', @change='changeLevelupSuppress()')
+label(style='display:inline-block') {{ $t('dontShowAgain') }}
+-->
+    </div><div class="container-fluid share-buttons">
+      <div class="row">
+        <div class="col-12 text-center">
+          <a
+            class="twitter-share-button share-button"
+            :href="twitterLink"
+            target="_blank"
+          ><div
+            class="social-icon twitter svg-icon"
+            v-html="icons.twitter"
+          ></div>{{ $t('tweet') }}</a><a
+            class="fb-share-button share-button"
+            :href="facebookLink"
+            target="_blank"
+          ><div
+            class="social-icon facebook svg-icon"
+            v-html="icons.facebook"
+          ></div>{{ $t('share') }}</a>
+        </div><!-- @TODO: Still want this? .col-4a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')-->
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/achievements/login-incentives.vue b/website/client/src/components/achievements/login-incentives.vue
index a88c8d81ca..c58664b161 100644
--- a/website/client/src/components/achievements/login-incentives.vue
+++ b/website/client/src/components/achievements/login-incentives.vue
@@ -1,40 +1,89 @@
-<template lang="pug">
-b-modal#login-incentives(:title="data.message", size='md', :hide-footer="true")
-  .modal-body
-    .row
-      h3.col-12.text-center(
-        v-if='data.rewardText'
-      ) {{ $t('unlockedReward', {reward: data.rewardText}) }}
-    .row.reward-row
-      .col-12
-        avatar.avatar(:member='user', :avatarOnly='true', :withBackground='true')
-      .text-center.col-12(v-if='nextReward')
-        .reward-wrap(v-if="!data.rewardText")
-          div(v-if="nextReward.rewardKey.length === 1", :class="nextReward.rewardKey[0]")
-          .reward(
-            v-for="reward in nextReward.rewardKey",
-            v-if="nextReward.rewardKey.length > 1",
-            :class='reward'
-          )
-        .reward-wrap(v-if="data.rewardText")
-          div(v-if="data.rewardKey.length === 1", :class="data.rewardKey[0]")
-          .reward(
-            v-for="reward in data.rewardKey",
-            v-if="data.rewardKey.length > 1",
-            :class='reward'
-          )
-      .col-12.text-center(v-if="data && data.nextRewardAt")
-        h4 {{ $t('countLeft', {count: data.nextRewardAt - user.loginIncentives}) }}
-    .row
-      .col-12.text-center(v-if='data.rewardText')
-        p {{ $t('earnedRewardForDevotion', {reward: data.rewardText}) }}
-      .col-12.text-center
-        p {{ $t('incentivesDescription') }}
-      .col-12.text-center(v-if="data && data.nextRewardAt")
-        h3 {{ $t('nextRewardUnlocksIn', {numberOfCheckinsLeft: data.nextRewardAt - user.loginIncentives}) }}
-  .modal-footer
-    .col-12.text-center
-      button.btn.btn-primary(@click='close()') {{ $t('awesome') }}
+<template>
+  <b-modal
+    id="login-incentives"
+    :title="data.message"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="row">
+        <h3
+          v-if="data.rewardText"
+          class="col-12 text-center"
+        >
+          {{ $t('unlockedReward', {reward: data.rewardText}) }}
+        </h3>
+      </div><div class="row reward-row">
+        <div class="col-12">
+          <avatar
+            class="avatar"
+            :member="user"
+            :avatar-only="true"
+            :with-background="true"
+          />
+        </div><div
+          v-if="nextReward"
+          class="text-center col-12"
+        >
+          <div
+            v-if="!data.rewardText"
+            class="reward-wrap"
+          >
+            <div
+              v-if="nextReward.rewardKey.length === 1"
+              :class="nextReward.rewardKey[0]"
+            ></div><div
+              v-for="reward in nextReward.rewardKey"
+              v-if="nextReward.rewardKey.length > 1"
+              class="reward"
+              :class="reward"
+            ></div>
+          </div><div
+            v-if="data.rewardText"
+            class="reward-wrap"
+          >
+            <div
+              v-if="data.rewardKey.length === 1"
+              :class="data.rewardKey[0]"
+            ></div><div
+              v-for="reward in data.rewardKey"
+              v-if="data.rewardKey.length > 1"
+              class="reward"
+              :class="reward"
+            ></div>
+          </div>
+        </div><div
+          v-if="data && data.nextRewardAt"
+          class="col-12 text-center"
+        >
+          <h4>{{ $t('countLeft', {count: data.nextRewardAt - user.loginIncentives}) }}</h4>
+        </div>
+      </div><div class="row">
+        <div
+          v-if="data.rewardText"
+          class="col-12 text-center"
+        >
+          <p>{{ $t('earnedRewardForDevotion', {reward: data.rewardText}) }}</p>
+        </div><div class="col-12 text-center">
+          <p>{{ $t('incentivesDescription') }}</p>
+        </div><div
+          v-if="data && data.nextRewardAt"
+          class="col-12 text-center"
+        >
+          <h3>{{ $t('nextRewardUnlocksIn', {numberOfCheckinsLeft: data.nextRewardAt - user.loginIncentives}) }}</h3>
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('awesome') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/lostMasterclasser.vue b/website/client/src/components/achievements/lostMasterclasser.vue
index 8ebe1d6eb4..091e0a3cdb 100644
--- a/website/client/src/components/achievements/lostMasterclasser.vue
+++ b/website/client/src/components/achievements/lostMasterclasser.vue
@@ -1,12 +1,23 @@
-<template lang="pug">
-  b-modal#lost-masterclasser(:title='title', size='md', :hide-footer='true')
-    .modal-body
-      .col-12
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        p {{ $t('achievementLostMasterclasserModalText') }}
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="lost-masterclasser"
+    :title="title"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <p>{{ $t('achievementLostMasterclasserModalText') }}</p><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/lowHealth.vue b/website/client/src/components/achievements/lowHealth.vue
index 76d552ceb2..a7c2971997 100644
--- a/website/client/src/components/achievements/lowHealth.vue
+++ b/website/client/src/components/achievements/lowHealth.vue
@@ -1,29 +1,58 @@
-<template lang="pug">
-  b-modal#low-health(:title="$t('losingHealthWarning')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12.text-center
-        .meter-label(:tooltip="$t('health')")
-          span.glyphicon.glyphicon-heart
-        .meter.health(:tooltip='Math.round(user.stats.hp * 100) / 100')
-          .bar(:style='barStyle')
-          span.meter-text.value
-            | {{healthLeft}}
-      .col-12
-        avatar(:member='user', :avatarOnly='true', :withBackground='true')
-      .col-12
-        p {{ $t('losingHealthWarning2') }}
-        h4 {{ $t('toRegainHealth') }}
-        ul
-          li.spaced {{ $t('lowHealthTips1') }}
-          li.spaced {{ $t('lowHealthTips2') }}
-        h4 {{ $t('losingHealthQuickly') }}
-        ul
-          li.spaced {{ $t('lowHealthTips3') }}
-          li.spaced {{ $t('lowHealthTips4') }}
-        h4 {{ $t('goodLuck') }}
-    .modal-footer
-      .col-12.text-center
-        button.btn.btn-primary(@click='acknowledgeHealthWarning()') {{ $t('ok') }}
+<template>
+  <b-modal
+    id="low-health"
+    :title="$t('losingHealthWarning')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12 text-center">
+        <div
+          class="meter-label"
+          :tooltip="$t('health')"
+        >
+          <span class="glyphicon glyphicon-heart"></span>
+        </div><div
+          class="meter health"
+          :tooltip="Math.round(user.stats.hp * 100) / 100"
+        >
+          <div
+            class="bar"
+            :style="barStyle"
+          ></div><span class="meter-text value">{{ healthLeft }}</span>
+        </div>
+      </div><div class="col-12">
+        <avatar
+          :member="user"
+          :avatar-only="true"
+          :with-background="true"
+        />
+      </div><div class="col-12">
+        <p>{{ $t('losingHealthWarning2') }}</p><h4>{{ $t('toRegainHealth') }}</h4><ul>
+          <li class="spaced">
+            {{ $t('lowHealthTips1') }}
+          </li><li class="spaced">
+            {{ $t('lowHealthTips2') }}
+          </li>
+        </ul><h4>{{ $t('losingHealthQuickly') }}</h4><ul>
+          <li class="spaced">
+            {{ $t('lowHealthTips3') }}
+          </li><li class="spaced">
+            {{ $t('lowHealthTips4') }}
+          </li>
+        </ul><h4>{{ $t('goodLuck') }}</h4>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="acknowledgeHealthWarning()"
+        >
+          {{ $t('ok') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/mindOverMatter.vue b/website/client/src/components/achievements/mindOverMatter.vue
index 80ad2266ff..1ccaa8516d 100644
--- a/website/client/src/components/achievements/mindOverMatter.vue
+++ b/website/client/src/components/achievements/mindOverMatter.vue
@@ -1,12 +1,23 @@
-<template lang="pug">
-  b-modal#mind-over-matter(:title='title', size='md', :hide-footer='true')
-    .modal-body
-      .col-12
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        p {{ $t('achievementMindOverMatterModalText') }}
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="mind-over-matter"
+    :title="title"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <p>{{ $t('achievementMindOverMatterModalText') }}</p><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/newStuff.vue b/website/client/src/components/achievements/newStuff.vue
index fa106a234b..a56eac6c93 100644
--- a/website/client/src/components/achievements/newStuff.vue
+++ b/website/client/src/components/achievements/newStuff.vue
@@ -1,17 +1,35 @@
-<template lang="pug">
-  b-modal#new-stuff(
-    size='lg',
-    :hide-header='true',
-    :hide-footer='true',
-    no-close-on-esc,
-    no-close-on-backdrop
-  )
-    .modal-body
-      .static-view(v-html='html')
-    .modal-footer
-      a.btn.btn-info(href='http://habitica.fandom.com/wiki/Whats_New', target='_blank') {{ this.$t('newsArchive') }}
-      button.btn.btn-secondary(@click='tellMeLater()') {{ this.$t('tellMeLater') }}
-      button.btn.btn-warning(@click='dismissAlert();') {{ this.$t('dismissAlert') }}
+<template>
+  <b-modal
+    id="new-stuff"
+    size="lg"
+    :hide-header="true"
+    :hide-footer="true"
+    no-close-on-esc="no-close-on-esc"
+    no-close-on-backdrop="no-close-on-backdrop"
+  >
+    <div class="modal-body">
+      <div
+        class="static-view"
+        v-html="html"
+      ></div>
+    </div><div class="modal-footer">
+      <a
+        class="btn btn-info"
+        href="http://habitica.fandom.com/wiki/Whats_New"
+        target="_blank"
+      >{{ this.$t('newsArchive') }}</a><button
+        class="btn btn-secondary"
+        @click="tellMeLater()"
+      >
+        {{ this.$t('tellMeLater') }}
+      </button><button
+        class="btn btn-warning"
+        @click="dismissAlert();"
+      >
+        {{ this.$t('dismissAlert') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/achievements/questCompleted.vue b/website/client/src/components/achievements/questCompleted.vue
index 48c46da661..359b79f0a9 100644
--- a/website/client/src/components/achievements/questCompleted.vue
+++ b/website/client/src/components/achievements/questCompleted.vue
@@ -1,18 +1,35 @@
-<template lang="pug">
-  b-modal#quest-completed(v-if='user.party.quest.completed', :title="title",
-    size='md', :hide-footer="true", :no-close-on-esc="true", :no-close-on-backdrop="true",
-    @hide='hide')
-    .modal-body.text-center
-      .quest(:class='`quest_${user.party.quest.completed}`')
-      p(
-        v-if='questData.completion && typeof questData.completion === "function"',
-        v-html='questData.completion()'
-      )
-      .quest-rewards.text-center
-        h3(v-once) {{ $t('paymentYouReceived') }}
-        questDialogDrops(:item="questData")
-    .modal-footer
-      button.btn.btn-primary(@click='setQuestCompleted()') {{ $t('ok') }}
+<template>
+  <b-modal
+    v-if="user.party.quest.completed"
+    id="quest-completed"
+    :title="title"
+    size="md"
+    :hide-footer="true"
+    :no-close-on-esc="true"
+    :no-close-on-backdrop="true"
+    @hide="hide"
+  >
+    <div class="modal-body text-center">
+      <div
+        class="quest"
+        :class="`quest_${user.party.quest.completed}`"
+      ></div><p
+        v-if="questData.completion && typeof questData.completion === 'function'"
+        v-html="questData.completion()"
+      ></p><div class="quest-rewards text-center">
+        <h3 v-once>
+          {{ $t('paymentYouReceived') }}
+        </h3><questDialogDrops :item="questData" />
+      </div>
+    </div><div class="modal-footer">
+      <button
+        class="btn btn-primary"
+        @click="setQuestCompleted()"
+      >
+        {{ $t('ok') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/questInvitation.vue b/website/client/src/components/achievements/questInvitation.vue
index e6cfff0daf..219e3db649 100644
--- a/website/client/src/components/achievements/questInvitation.vue
+++ b/website/client/src/components/achievements/questInvitation.vue
@@ -1,47 +1,66 @@
-<template lang="pug">
-  b-modal#quest-invitation(v-if='user.party.quest.key && quests[user.party.quest.key]', :title="$t('questInvitation')", size='lg', :hide-footer="true")
-    .modal-header
-      h4 {{ $t('questInvitation') }}
-        |&nbsp;{{quests[user.party.quest.key].text()}}
-    .modal-body
-      .pull-right-sm.text-center
-        .col-centered(:class='`quest_${quests[user.party.quest.key].key}`')
-        div(ng-if='quests[user.party.quest.key].boss')
-          h4 {{quests[user.party.quest.key].boss.name()}}
-          p
-            strong {{ $t('bossHP') }} + ': '
-            | {{quests[user.party.quest.key].boss.hp}}
-          p
-            strong {{ $t('bossStrength') }} + ': '
-            | {{quests[user.party.quest.key].boss.str}}
-        div(ng-if='quests[user.party.quest.key].collect')
-          p(ng-repeat='(k,v) in quests[user.party.quest.key].collect')
-            strong {{ $t('collect') }} + ': '
-            | {{quests[user.party.quest.key].collect[k].count}} {{quests[user.party.quest.key].collect[k].text()}}
-      div(ng-bind-html='quests[user.party.quest.key].notes()')
-      .quest-rewards(:key='user.party.quest.key', header-participant="$t('rewardsAllParticipants')", header-quest-owner="$t('rewardsQuestOwner')")
-      hr
-      h5 {{headerParticipant}}
-      table.table.table-striped
-        tr(ng-repeat='drop in _.reject(quest.drop.items, \'onlyOwner\')')
-          td {{drop.text()}}
-        tr(ng-if='quest.drop.exp > 0')
-          td {{quest.drop.exp}}&nbsp;
-            | {{ $t('experience') }}
-        tr(ng-if='quest.drop.gp > 0')
-          td {{quest.drop.gp}}&nbsp;
-            | {{ $t('gold') }}
-        tr(ng-if='quest.drop.unlock()')
-          td {{quest.drop.unlock()}}
-      div(ng-if='getQuestOwnerRewards(quest).length > 0')
-        h5 {{headerQuestOwner}}
-        table.table.table-striped
-          tr(ng-repeat='drop in getQuestOwnerRewards(quest)')
-            td {{drop.text()}}
-    .modal-footer
-      button.btn.btn-secondary(ng-click='questHold = true; $close()') {{ $t('askLater') }}
-      button.btn.btn-secondary(ng-click='questReject(); $close()') {{ $t('reject') }}
-      button.btn.btn-primary(ng-click='questAccept(); $close()') {{ $t('accept') }}
+<template>
+  <b-modal
+    v-if="user.party.quest.key && quests[user.party.quest.key]"
+    id="quest-invitation"
+    :title="$t('questInvitation')"
+    size="lg"
+    :hide-footer="true"
+  >
+    <div class="modal-header">
+      <h4>{{ $t('questInvitation') }}&nbsp;{{ quests[user.party.quest.key].text() }}</h4>
+    </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() }}
+          </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">
+        <tr ng-repeat="drop in _.reject(quest.drop.items, 'onlyOwner')">
+          <td>{{ drop.text() }}</td>
+        </tr><tr ng-if="quest.drop.exp > 0">
+          <td>{{ quest.drop.exp }}&nbsp;{{ $t('experience') }}</td>
+        </tr><tr ng-if="quest.drop.gp > 0">
+          <td>{{ quest.drop.gp }}&nbsp;{{ $t('gold') }}</td>
+        </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">
+          <tr ng-repeat="drop in getQuestOwnerRewards(quest)">
+            <td>{{ drop.text() }}</td>
+          </tr>
+        </table>
+      </div>
+    </div><div class="modal-footer">
+      <button
+        class="btn btn-secondary"
+        ng-click="questHold = true; $close()"
+      >
+        {{ $t('askLater') }}
+      </button><button
+        class="btn btn-secondary"
+        ng-click="questReject(); $close()"
+      >
+        {{ $t('reject') }}
+      </button><button
+        class="btn btn-primary"
+        ng-click="questAccept(); $close()"
+      >
+        {{ $t('accept') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <script>
diff --git a/website/client/src/components/achievements/rebirth.vue b/website/client/src/components/achievements/rebirth.vue
index 68612857dc..b68f9be475 100644
--- a/website/client/src/components/achievements/rebirth.vue
+++ b/website/client/src/components/achievements/rebirth.vue
@@ -1,17 +1,27 @@
-<template lang="pug">
-  b-modal#rebirth(:title="$t('modalAchievement')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        // @TODO: +achievementAvatar('sun',0)
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        div(v-if='user.achievements.rebirthLevel < 100')
-          | {{ $t('rebirthAchievement', {number: user.achievements.rebirths, level: user.achievements.rebirthLevel}) }}
-        div(v-if='user.achievements.rebirthLevel >= 100')
-          | {{ $t('rebirthAchievement100', {number: user.achievements.rebirths}) }}
-        br
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="rebirth"
+    :title="$t('modalAchievement')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <!-- @TODO: +achievementAvatar('sun',0)--><achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <div v-if="user.achievements.rebirthLevel < 100">
+          {{ $t('rebirthAchievement', {number: user.achievements.rebirths, level: user.achievements.rebirthLevel}) }}
+        </div><div v-if="user.achievements.rebirthLevel >= 100">
+          {{ $t('rebirthAchievement100', {number: user.achievements.rebirths}) }}
+        </div><br><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/rebirthEnabled.vue b/website/client/src/components/achievements/rebirthEnabled.vue
index 4e69bda00e..696e75bc41 100644
--- a/website/client/src/components/achievements/rebirthEnabled.vue
+++ b/website/client/src/components/achievements/rebirthEnabled.vue
@@ -1,13 +1,25 @@
-<template lang="pug">
-  b-modal#rebirth-enabled(:title="$t('rebirthNew')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        .rebirth_orb
-        p
-          span {{ $t('rebirthUnlock') }}
-    .modal-footer
-      .col-12.text-center
-        button.btn.btn-primary(@click='close()') {{ $t('close') }}
+<template>
+  <b-modal
+    id="rebirth-enabled"
+    :title="$t('rebirthNew')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <div class="rebirth_orb"></div><p><span>{{ $t('rebirthUnlock') }}</span></p>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('close') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/streak.vue b/website/client/src/components/achievements/streak.vue
index 198cf3ebea..84a8ae3a25 100644
--- a/website/client/src/components/achievements/streak.vue
+++ b/website/client/src/components/achievements/streak.vue
@@ -1,20 +1,33 @@
-<template lang="pug">
-  b-modal#streak(:title="$t('streakAchievement')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        // @TODO: +achievementAvatar('thermometer',2.5)
-        achievement-avatar.avatar
-      .col-6.offset-3.text-center
-        h3(v-if='user.achievements.streak === 1') {{ $t('firstStreakAchievement') }}
-        h3(v-if='user.achievements.streak > 1') {{ $t('streakAchievementCount', {streaks: user.achievements.streak}) }}
-        p {{ $t('twentyOneDays') }}
-        p {{ $t('dontBreakStreak') }}
-        br
-        button.btn.btn-primary(@click='close()') {{ $t('dontStop') }}
-        .checkbox
-          input(type='checkbox', v-model='user.preferences.suppressModals.streak', @change='suppressModals')
-          label {{ $t('dontShowAgain') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="streak"
+    :title="$t('streakAchievement')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <!-- @TODO: +achievementAvatar('thermometer',2.5)--><achievement-avatar class="avatar" />
+      </div><div class="col-6 offset-3 text-center">
+        <h3 v-if="user.achievements.streak === 1">
+          {{ $t('firstStreakAchievement') }}
+        </h3><h3 v-if="user.achievements.streak > 1">
+          {{ $t('streakAchievementCount', {streaks: user.achievements.streak}) }}
+        </h3><p>{{ $t('twentyOneDays') }}</p><p>{{ $t('dontBreakStreak') }}</p><br><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('dontStop') }}
+        </button><div class="checkbox">
+          <input
+            v-model="user.preferences.suppressModals.streak"
+            type="checkbox"
+            @change="suppressModals"
+          ><label>{{ $t('dontShowAgain') }}</label>
+        </div>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/testing.vue b/website/client/src/components/achievements/testing.vue
index ab1eda8eb7..14e5785a85 100644
--- a/website/client/src/components/achievements/testing.vue
+++ b/website/client/src/components/achievements/testing.vue
@@ -1,17 +1,37 @@
-<template lang="pug">
-  b-modal#testing(:title="$t('guildReminderTitle')", size='lg', :hide-footer="true")
-    .modal-body.text-center
-      br
-      .scene_guilds
-      br
-      h4 {{ $t('guildReminderText1') }}
-    .modal-footer
-      .container-fluid
-        .row
-          .col-6.text-center
-            button.btn.btn-secondary(@click='close()') {{ $t('guildReminderDismiss') }}
-          .col-6.text-center(@click='close()')
-            .btn.btn-primary(@click='takeMethere()') {{ $t('guildReminderCTA') }}
+<template>
+  <b-modal
+    id="testing"
+    :title="$t('guildReminderTitle')"
+    size="lg"
+    :hide-footer="true"
+  >
+    <div class="modal-body text-center">
+      <br><div class="scene_guilds"></div><br><h4>{{ $t('guildReminderText1') }}</h4>
+    </div><div class="modal-footer">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-6 text-center">
+            <button
+              class="btn btn-secondary"
+              @click="close()"
+            >
+              {{ $t('guildReminderDismiss') }}
+            </button>
+          </div><div
+            class="col-6 text-center"
+            @click="close()"
+          >
+            <div
+              class="btn btn-primary"
+              @click="takeMethere()"
+            >
+              {{ $t('guildReminderCTA') }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/testingletiant.vue b/website/client/src/components/achievements/testingletiant.vue
index 0251527d7e..4217fa03b9 100644
--- a/website/client/src/components/achievements/testingletiant.vue
+++ b/website/client/src/components/achievements/testingletiant.vue
@@ -1,18 +1,34 @@
-<template lang="pug">
-  b-modal#testingletiant(:title="$t('guildReminderTitle')", size='lg', :hide-footer="true")
-    .modal-content
-    .modal-body.text-center
-      br
-      .scene_guilds
-      br
-      h4 {{ $t('guildReminderText2') }}
-    .modal-footer
-      .container-fluid
-        .row
-          .col-6.text-center
-            button.btn.btn-secondary(@click='close()') {{ $t('guildReminderDismiss') }}
-          .col-6.text-center
-            .btn.btn-primary(@click='takeMethere()') {{ $t('guildReminderCTA') }}
+<template>
+  <b-modal
+    id="testingletiant"
+    :title="$t('guildReminderTitle')"
+    size="lg"
+    :hide-footer="true"
+  >
+    <div class="modal-content"></div><div class="modal-body text-center">
+      <br><div class="scene_guilds"></div><br><h4>{{ $t('guildReminderText2') }}</h4>
+    </div><div class="modal-footer">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-6 text-center">
+            <button
+              class="btn btn-secondary"
+              @click="close()"
+            >
+              {{ $t('guildReminderDismiss') }}
+            </button>
+          </div><div class="col-6 text-center">
+            <div
+              class="btn btn-primary"
+              @click="takeMethere()"
+            >
+              {{ $t('guildReminderCTA') }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/ultimateGear.vue b/website/client/src/components/achievements/ultimateGear.vue
index 1d0e03576e..bb23eaa3a6 100644
--- a/website/client/src/components/achievements/ultimateGear.vue
+++ b/website/client/src/components/achievements/ultimateGear.vue
@@ -1,35 +1,49 @@
-<template lang="pug">
-  b-modal#ultimate-gear(:title="$t('modalAchievement')", size='md', :hide-footer="true")
-    .modal-body
-      .col-12
-        // @TODO: +achievementAvatar('armor',2.5)
-        achievement-avatar.avatar
-      .col-12.text-center
-        p {{ $t('gearAchievement') }}
-        br
-        table.multi-achievement
-          tr
-            td(v-if='user.achievements.ultimateGearSets.healer').multi-achievement
-              .achievement-ultimate-healer2x.multi-achievement
-              | {{ $t('healer') }}
-            td(v-if='user.achievements.ultimateGearSets.wizard').multi-achievement
-              .achievement-ultimate-mage2x.multi-achievement
-              | {{ $t('mage') }}
-            td(v-if='user.achievements.ultimateGearSets.rogue').multi-achievement
-              .achievement-ultimate-rogue2x.multi-achievement
-              | {{ $t('rogue') }}
-            td(v-if='user.achievements.ultimateGearSets.warrior').multi-achievement
-              .achievement-ultimate-warrior2x.multi-achievement
-              | {{ $t('warrior') }}
-        br
-        div(v-if='!(user.achievements.ultimateGearSets.healer && user.achievements.ultimateGearSets.wizard && user.achievements.ultimateGearSets.rogue && user.achievements.ultimateGearSets.warrior)')
-          p(v-html="$t('moreGearAchievements')")
-          br
-        .shop_armoire
-        p(v-html='$t("armoireUnlocked")')
-        br
-        button.btn.btn-primary(@click='close()') {{ $t('huzzah') }}
-    achievement-footer
+<template>
+  <b-modal
+    id="ultimate-gear"
+    :title="$t('modalAchievement')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="col-12">
+        <!-- @TODO: +achievementAvatar('armor',2.5)--><achievement-avatar class="avatar" />
+      </div><div class="col-12 text-center">
+        <p>{{ $t('gearAchievement') }}</p><br><table class="multi-achievement">
+          <tr>
+            <td
+              v-if="user.achievements.ultimateGearSets.healer"
+              class="multi-achievement"
+            >
+              <div class="achievement-ultimate-healer2x multi-achievement"></div>{{ $t('healer') }}
+            </td><td
+              v-if="user.achievements.ultimateGearSets.wizard"
+              class="multi-achievement"
+            >
+              <div class="achievement-ultimate-mage2x multi-achievement"></div>{{ $t('mage') }}
+            </td><td
+              v-if="user.achievements.ultimateGearSets.rogue"
+              class="multi-achievement"
+            >
+              <div class="achievement-ultimate-rogue2x multi-achievement"></div>{{ $t('rogue') }}
+            </td><td
+              v-if="user.achievements.ultimateGearSets.warrior"
+              class="multi-achievement"
+            >
+              <div class="achievement-ultimate-warrior2x multi-achievement"></div>{{ $t('warrior') }}
+            </td>
+          </tr>
+        </table><br><div v-if="!(user.achievements.ultimateGearSets.healer && user.achievements.ultimateGearSets.wizard && user.achievements.ultimateGearSets.rogue && user.achievements.ultimateGearSets.warrior)">
+          <p v-html="$t('moreGearAchievements')"></p><br>
+        </div><div class="shop_armoire"></div><p v-html="$t('armoireUnlocked')"></p><br><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('huzzah') }}
+        </button>
+      </div>
+    </div><achievement-footer />
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/achievements/welcome.vue b/website/client/src/components/achievements/welcome.vue
index 62bded79c7..f53c9608ee 100644
--- a/website/client/src/components/achievements/welcome.vue
+++ b/website/client/src/components/achievements/welcome.vue
@@ -1,33 +1,43 @@
-<template lang="pug">
-  b-modal#welcome(:title="$t('welcomeToHabit')", size='lg', :hide-footer="true")
-    .modal-body.container-fluid
-      .row
-        .col-4.col-centered
-          span(style='display:flex')
-            h1
-              | &#9312;
-            h3(style='margin:auto auto auto .5em') {{ $t('welcome1') }}
-          .welcome_basic_avatars(style='margin: 1.5em auto 1.5em')
-          h4 {{ $t('welcome1notes') }}
-        .col-4.col-centered
-          span(style='display:flex')
-            h1
-              | &#9313;
-            h3(style='margin:.3em auto auto .5em') {{ $t('welcome2') }}
-          .welcome_sample_tasks(style='margin: 2.5em auto 1.5em')
-          h4 {{ $t('welcome2notes') }}
-        .col-4.col-centered
-          span(style='display:flex')
-            h1
-              | &#9314;
-            h3(style='margin:auto auto auto .5em') {{ $t('welcome3') }}
-          .welcome_promo_party(style='margin: 1em auto 1em')
-          h4 {{ $t('welcome3notes') }}
-    .modal-footer.text-center(style='margin-top:0')
-      .col-3
-      .col-6
-        button.btn.btn-primary.btn-lg.flex-column(@click='ready()') {{ $t('imReady') }}
-      .col-3
+<template>
+  <b-modal
+    id="welcome"
+    :title="$t('welcomeToHabit')"
+    size="lg"
+    :hide-footer="true"
+  >
+    <div class="modal-body container-fluid">
+      <div class="row">
+        <div class="col-4 col-centered">
+          <span style="display:flex"><h1>&#9312;</h1><h3 style="margin:auto auto auto .5em">{{ $t('welcome1') }}</h3></span><div
+            class="welcome_basic_avatars"
+            style="margin: 1.5em auto 1.5em"
+          ></div><h4>{{ $t('welcome1notes') }}</h4>
+        </div><div class="col-4 col-centered">
+          <span style="display:flex"><h1>&#9313;</h1><h3 style="margin:.3em auto auto .5em">{{ $t('welcome2') }}</h3></span><div
+            class="welcome_sample_tasks"
+            style="margin: 2.5em auto 1.5em"
+          ></div><h4>{{ $t('welcome2notes') }}</h4>
+        </div><div class="col-4 col-centered">
+          <span style="display:flex"><h1>&#9314;</h1><h3 style="margin:auto auto auto .5em">{{ $t('welcome3') }}</h3></span><div
+            class="welcome_promo_party"
+            style="margin: 1em auto 1em"
+          ></div><h4>{{ $t('welcome3notes') }}</h4>
+        </div>
+      </div>
+    </div><div
+      class="modal-footer text-center"
+      style="margin-top:0"
+    >
+      <div class="col-3"></div><div class="col-6">
+        <button
+          class="btn btn-primary btn-lg flex-column"
+          @click="ready()"
+        >
+          {{ $t('imReady') }}
+        </button>
+      </div><div class="col-3"></div>
+    </div>
+  </b-modal>
 </template>
 
 <script>
diff --git a/website/client/src/components/achievements/wonChallenge.vue b/website/client/src/components/achievements/wonChallenge.vue
index aefc16050d..b5a9f33e79 100644
--- a/website/client/src/components/achievements/wonChallenge.vue
+++ b/website/client/src/components/achievements/wonChallenge.vue
@@ -1,25 +1,56 @@
-<template lang="pug">
-  b-modal#won-challenge(:title="$t('wonChallenge')", size='md', :hide-footer="true")
-    .modal-body.text-center
-      h4(v-markdown='user.achievements.challenges[user.achievements.challenges.length - 1]')
-      .row
-        .col-4
-          .achievement-karaoke-2x
-        .col-4
-          // @TODO: +generatedAvatar({sleep: false})
-          avatar.avatar(:member='user', :avatar-only='true')
-        .col-4
-          .achievement-karaoke-2x
-      p {{ $t('congratulations') }}
-      br
-      button.btn.btn-primary(@click='close()') {{ $t('hurray') }}
-    .modal-footer
-      .col-3
-        a.twitter-share-button(href='https://twitter.com/intent/tweet?text=#{tweet}&via=habitica&url=#{env.BASE_URL}/social/won-challenge&count=none') {{ $t('tweet') }}
-      .col-4(style='margin-left:.8em')
-        .fb-share-button(data-href='#{env.BASE_URL}/social/won-challenge', data-layout='button')
-      .col-4(style='margin-left:.8em')
-        a.tumblr-share-button(data-href='#{env.BASE_URL}/social/won-challenge', data-notes='none')
+<template>
+  <b-modal
+    id="won-challenge"
+    :title="$t('wonChallenge')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body text-center">
+      <h4 v-markdown="user.achievements.challenges[user.achievements.challenges.length - 1]"></h4><div class="row">
+        <div class="col-4">
+          <div class="achievement-karaoke-2x"></div>
+        </div><div class="col-4">
+          <!-- @TODO: +generatedAvatar({sleep: false})--><avatar
+            class="avatar"
+            :member="user"
+            :avatar-only="true"
+          />
+        </div><div class="col-4">
+          <div class="achievement-karaoke-2x"></div>
+        </div>
+      </div><p>{{ $t('congratulations') }}</p><br><button
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('hurray') }}
+      </button>
+    </div><div class="modal-footer">
+      <div class="col-3">
+        <a
+          class="twitter-share-button"
+          href="https://twitter.com/intent/tweet?text=#{tweet}&via=habitica&url=#{env.BASE_URL}/social/won-challenge&count=none"
+        >{{ $t('tweet') }}</a>
+      </div><div
+        class="col-4"
+        style="margin-left:.8em"
+      >
+        <div
+          class="fb-share-button"
+          data-href="#{env.BASE_URL}/social/won-challenge"
+          data-layout="button"
+        ></div>
+      </div><div
+        class="col-4"
+        style="margin-left:.8em"
+      >
+        <a
+          class="tumblr-share-button"
+          data-href="#{env.BASE_URL}/social/won-challenge"
+          data-notes="none"
+        ></a>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index 0dc47bb714..96146bf5f8 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -1,117 +1,255 @@
-<template lang="pug">
-.row.footer-row
-  buy-gems-modal(v-if='user')
-  //modify-inventory(v-if="isUserLoaded")
-  footer.col-12.expanded
-    .row
-      .col-12.col-md-2
-        h3
-          a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') {{ $t('mobileIOS') }}
-        h3
-          a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') {{ $t('mobileAndroid') }}
-      .col-12.col-md-2
-        h3 {{ $t('footerCompany') }}
-        ul
-          li
-           router-link(to='/static/features') {{ $t('companyAbout') }}
-          li
-            a(href='https://habitica.wordpress.com/', target='_blank') {{ $t('companyBlog') }}
-          li
-            a(href='http://blog.habitrpg.com/', target='_blank') {{ $t('tumblr') }}
-          li
-           router-link(to='/static/faq') {{ $t('FAQ') }}
-          li
-            a(href='http://habitica.fandom.com/wiki/Whats_New', target='_blank') {{ $t('oldNews') }}
-          li
-           router-link(to='/static/merch') {{ $t('merch') }}
-          li
-           router-link(to='/static/press-kit') {{ $t('presskit') }}
-          li
-           router-link(to='/static/contact') {{ $t('contactUs') }}
-      .col-12.col-md-2
-        h3 {{ $t('footerCommunity') }}
-        ul
-          li
-            a(target="_blanck", href="/static/community-guidelines") {{ $t('communityGuidelines') }}
-          li
-            router-link(to='/hall/contributors') {{ $t('hall') }}
-          li
-            router-link(
-              to='/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac'
-            ) {{ $t('reportBug') }}
-          li
-            a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', target='_blank') {{ $t('requestFeature') }}
-          li(v-html='$t("communityExtensions")')
-          li(v-html='$t("communityForum")')
-          li
-            a(href='https://www.facebook.com/Habitica', target='_blank') {{ $t('communityFacebook') }}
-          li
-            a(href='https://www.instagram.com/habitica', target='_blank') {{ $t('communityInstagram') }}
-      .col-12.col-md-6
-        .row
-          .col-6
-            h3 {{ $t('footerDevs') }}
-            ul
-              li
-                a(href='/apidoc', target='_blank') {{ $t('APIv3') }}
-              li
-                a(:href="getDataDisplayToolUrl", target='_blank') {{ $t('dataDisplayTool') }}
-              li
-                a(href='http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths', target='_blank') {{ $t('guidanceForBlacksmiths') }}
-          .col-6.social
-            h3 {{ $t('footerSocial') }}
-            .icons
-              a.social-circle(href='https://twitter.com/habitica', target='_blank')
-                .social-icon.svg-icon(v-html='icons.twitter')
-              a.social-circle(href='https://www.instagram.com/habitica/', target='_blank')
-                .social-icon.svg-icon.instagram(v-html='icons.instagram')
-              a.social-circle(href='https://www.facebook.com/Habitica', target='_blank')
-                .social-icon.facebook.svg-icon(v-html='icons.facebook')
-        .row
-          .col-12.col-md-8 {{ $t('donateText3') }}
-          .col-12.col-md-4
-            button.btn.btn-contribute.btn-flat(@click="donate()", v-if="user")
-              .svg-icon.heart(v-html="icons.heart")
-              .text {{ $t('companyDonate') }}
-            .btn.btn-contribute.btn-flat(v-else)
-              a(href='http://habitica.fandom.com/wiki/Contributing_to_Habitica', target='_blank')
-                .svg-icon.heart(v-html="icons.heart")
-                .text {{ $t('companyContribute') }}
-    .row
-      .col-12
-        hr
-    .row
-      .col-12.col-md-5
-        | © 2019 Habitica. All rights reserved.
-        .debug.float-left(v-if="!IS_PRODUCTION && isUserLoaded")
-          button.btn.btn-primary(@click="debugMenuShown = !debugMenuShown") Toggle Debug Menu
-          .debug-group(v-if="debugMenuShown")
-            a.btn.btn-secondary(@click="setHealthLow()") Health = 1
-            a.btn.btn-secondary(@click="addMissedDay(1)") +1 Missed Day
-            a.btn.btn-secondary(@click="addMissedDay(2)") +2 Missed Days
-            a.btn.btn-secondary(@click="addMissedDay(8)") +8 Missed Days
-            a.btn.btn-secondary(@click="addMissedDay(32)") +32 Missed Days
-            a.btn.btn-secondary(@click="addTenGems()") +10 Gems
-            a.btn.btn-secondary(@click="addHourglass()") +1 Mystic Hourglass
-            a.btn.btn-secondary(@click="addGold()") +500GP
-            a.btn.btn-secondary(@click="plusTenHealth()") + 10HP
-            a.btn.btn-secondary(@click="addMana()") +MP
-            a.btn.btn-secondary(@click="addLevelsAndGold()") +Exp +GP +MP
-            a.btn.btn-secondary(@click="addExp()") +Exp
-            a.btn.btn-secondary(@click="addOneLevel()") +1 Level
-            a.btn.btn-secondary(
-              @click="addQuestProgress()",
-              tooltip="+1000 to boss quests. 300 items to collection quests"
-            ) Quest Progress Up
-            a.btn.btn-secondary(@click="makeAdmin()") Make Admin
-            a.btn.btn-secondary(@click="openModifyInventoryModal()") Modify Inventory
-      .col-12.col-md-2.text-center
-        .logo.svg-icon(v-html='icons.gryphon')
-      .col-12.col-md-5.text-right
-        span.ml-4
-          a(target="_blanck", href="/static/privacy") {{ $t('privacy') }}
-        span.ml-4
-          a(target="_blanck", href="/static/terms") {{ $t('terms') }}
+<template>
+  <div class="row footer-row">
+    <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>
+            <a
+              href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
+              target="_blank"
+            >{{ $t('mobileIOS') }}</a>
+          </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>
+            <li>
+              <router-link to="/static/features">
+                {{ $t('companyAbout') }}
+              </router-link>
+            </li><li>
+              <a
+                href="https://habitica.wordpress.com/"
+                target="_blank"
+              >{{ $t('companyBlog') }}</a>
+            </li><li>
+              <a
+                href="http://blog.habitrpg.com/"
+                target="_blank"
+              >{{ $t('tumblr') }}</a>
+            </li><li>
+              <router-link to="/static/faq">
+                {{ $t('FAQ') }}
+              </router-link>
+            </li><li>
+              <a
+                href="http://habitica.fandom.com/wiki/Whats_New"
+                target="_blank"
+              >{{ $t('oldNews') }}</a>
+            </li><li>
+              <router-link to="/static/merch">
+                {{ $t('merch') }}
+              </router-link>
+            </li><li>
+              <router-link to="/static/press-kit">
+                {{ $t('presskit') }}
+              </router-link>
+            </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>
+            <li>
+              <a
+                target="_blanck"
+                href="/static/community-guidelines"
+              >{{ $t('communityGuidelines') }}</a>
+            </li><li>
+              <router-link to="/hall/contributors">
+                {{ $t('hall') }}
+              </router-link>
+            </li><li>
+              <router-link to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac">
+                {{ $t('reportBug') }}
+              </router-link>
+            </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>
+              <a
+                href="https://www.facebook.com/Habitica"
+                target="_blank"
+              >{{ $t('communityFacebook') }}</a>
+            </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 class="row">
+            <div class="col-6">
+              <h3>{{ $t('footerDevs') }}</h3><ul>
+                <li>
+                  <a
+                    href="/apidoc"
+                    target="_blank"
+                  >{{ $t('APIv3') }}</a>
+                </li><li>
+                  <a
+                    :href="getDataDisplayToolUrl"
+                    target="_blank"
+                  >{{ $t('dataDisplayTool') }}</a>
+                </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">
+                <a
+                  class="social-circle"
+                  href="https://twitter.com/habitica"
+                  target="_blank"
+                ><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
+                  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>
+            </div>
+          </div><div class="row">
+            <div class="col-12 col-md-8">
+              {{ $t('donateText3') }}
+            </div><div class="col-12 col-md-4">
+              <button
+                v-if="user"
+                class="btn btn-contribute btn-flat"
+                @click="donate()"
+              >
+                <div
+                  class="svg-icon heart"
+                  v-html="icons.heart"
+                ></div><div class="text">
+                  {{ $t('companyDonate') }}
+                </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>
+            </div>
+          </div>
+        </div>
+      </div><div class="row">
+        <div class="col-12">
+          <hr>
+        </div>
+      </div><div class="row">
+        <div class="col-12 col-md-5">
+          © 2019 Habitica. All rights reserved.<div
+            v-if="!IS_PRODUCTION && isUserLoaded"
+            class="debug float-left"
+          >
+            <button
+              class="btn btn-primary"
+              @click="debugMenuShown = !debugMenuShown"
+            >
+              Toggle Debug Menu
+            </button><div
+              v-if="debugMenuShown"
+              class="debug-group"
+            >
+              <a
+                class="btn btn-secondary"
+                @click="setHealthLow()"
+              >Health = 1</a><a
+                class="btn btn-secondary"
+                @click="addMissedDay(1)"
+              >+1 Missed Day</a><a
+                class="btn btn-secondary"
+                @click="addMissedDay(2)"
+              >+2 Missed Days</a><a
+                class="btn btn-secondary"
+                @click="addMissedDay(8)"
+              >+8 Missed Days</a><a
+                class="btn btn-secondary"
+                @click="addMissedDay(32)"
+              >+32 Missed Days</a><a
+                class="btn btn-secondary"
+                @click="addTenGems()"
+              >+10 Gems</a><a
+                class="btn btn-secondary"
+                @click="addHourglass()"
+              >+1 Mystic Hourglass</a><a
+                class="btn btn-secondary"
+                @click="addGold()"
+              >+500GP</a><a
+                class="btn btn-secondary"
+                @click="plusTenHealth()"
+              >+ 10HP</a><a
+                class="btn btn-secondary"
+                @click="addMana()"
+              >+MP</a><a
+                class="btn btn-secondary"
+                @click="addLevelsAndGold()"
+              >+Exp +GP +MP</a><a
+                class="btn btn-secondary"
+                @click="addExp()"
+              >+Exp</a><a
+                class="btn btn-secondary"
+                @click="addOneLevel()"
+              >+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
+                class="btn btn-secondary"
+                @click="makeAdmin()"
+              >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
+            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>
+    </footer>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/auth/authForm.vue b/website/client/src/components/auth/authForm.vue
index af9c53473b..4489b8fe64 100644
--- a/website/client/src/components/auth/authForm.vue
+++ b/website/client/src/components/auth/authForm.vue
@@ -1,34 +1,124 @@
-<template lang="pug">
-.form
-  .form-group.row.text-center
-    .col-12.col-md-6
-      .btn.btn-secondary.social-button(@click='socialAuth("facebook")')
-        .svg-icon.social-icon(v-html="icons.facebookIcon")
-        span {{registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
-    .col-12.col-md-6
-      .btn.btn-secondary.social-button(@click='socialAuth("google")')
-        .svg-icon.social-icon(v-html="icons.googleIcon")
-        span {{registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
-  .form-group(v-if='registering')
-    label(for='usernameInput', v-once) {{$t('username')}}
-    input#usernameInput.form-control(type='text', :placeholder='$t("usernamePlaceholder")', v-model='username', :class='{"input-valid": usernameValid, "input-invalid": usernameInvalid}')
-  .form-group(v-if='!registering')
-    label(for='usernameInput', v-once) {{$t('emailOrUsername')}}
-    input#usernameInput.form-control(type='text', :placeholder='$t("emailOrUsername")', v-model='username')
-  .form-group(v-if='registering')
-    label(for='emailInput', v-once) {{$t('email')}}
-    input#emailInput.form-control(type='email', :placeholder='$t("emailPlaceholder")', v-model='email', :class='{"input-invalid": emailInvalid, "input-valid": emailValid}')
-  .form-group
-    label(for='passwordInput', v-once) {{$t('password')}}
-    a.float-right.forgot-password(v-once, v-if='!registering', @click='forgotPassword = true') {{$t('forgotPassword')}}
-    input#passwordInput.form-control(type='password', :placeholder='$t(registering ? "passwordPlaceholder" : "password")', v-model='password')
-  .form-group(v-if='registering')
-    label(for='confirmPasswordInput', v-once) {{$t('confirmPassword')}}
-    input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm', :class='{"input-invalid": passwordConfirmInvalid, "input-valid": passwordConfirmValid}')
-    small.form-text(v-once, v-html="$t('termsAndAgreement')")
-  .text-center
-    .btn.btn-info(@click='register()', v-if='registering', v-once) {{$t('joinHabitica')}}
-    .btn.btn-info(@click='login()', v-if='!registering', v-once) {{$t('login')}}
+<template>
+  <div class="form">
+    <div class="form-group row text-center">
+      <div class="col-12 col-md-6">
+        <div
+          class="btn btn-secondary social-button"
+          @click="socialAuth('facebook')"
+        >
+          <div
+            class="svg-icon social-icon"
+            v-html="icons.facebookIcon"
+          ></div><span>{{ registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'}) }}</span>
+        </div>
+      </div><div class="col-12 col-md-6">
+        <div
+          class="btn btn-secondary social-button"
+          @click="socialAuth('google')"
+        >
+          <div
+            class="svg-icon social-icon"
+            v-html="icons.googleIcon"
+          ></div><span>{{ registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'}) }}</span>
+        </div>
+      </div>
+    </div><div
+      v-if="registering"
+      class="form-group"
+    >
+      <label
+        v-once
+        for="usernameInput"
+      >{{ $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-if="!registering"
+      class="form-group"
+    >
+      <label
+        v-once
+        for="usernameInput"
+      >{{ $t('emailOrUsername') }}</label><input
+        id="usernameInput"
+        v-model="username"
+        class="form-control"
+        type="text"
+        :placeholder="$t('emailOrUsername')"
+      >
+    </div><div
+      v-if="registering"
+      class="form-group"
+    >
+      <label
+        v-once
+        for="emailInput"
+      >{{ $t('email') }}</label><input
+        id="emailInput"
+        v-model="email"
+        class="form-control"
+        type="email"
+        :placeholder="$t('emailPlaceholder')"
+        :class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
+      >
+    </div><div class="form-group">
+      <label
+        v-once
+        for="passwordInput"
+      >{{ $t('password') }}</label><a
+        v-if="!registering"
+        v-once
+        class="float-right forgot-password"
+        @click="forgotPassword = true"
+      >{{ $t('forgotPassword') }}</a><input
+        id="passwordInput"
+        v-model="password"
+        class="form-control"
+        type="password"
+        :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
+      >
+    </div><div
+      v-if="registering"
+      class="form-group"
+    >
+      <label
+        v-once
+        for="confirmPasswordInput"
+      >{{ $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
+        v-once
+        class="form-text"
+        v-html="$t('termsAndAgreement')"
+      ></small>
+    </div><div class="text-center">
+      <div
+        v-if="registering"
+        v-once
+        class="btn btn-info"
+        @click="register()"
+      >
+        {{ $t('joinHabitica') }}
+      </div><div
+        v-if="!registering"
+        v-once
+        class="btn btn-info"
+        @click="login()"
+      >
+        {{ $t('login') }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/auth/registerLoginReset.vue b/website/client/src/components/auth/registerLoginReset.vue
index 956cc682c4..dd4c98ef2d 100644
--- a/website/client/src/components/auth/registerLoginReset.vue
+++ b/website/client/src/components/auth/registerLoginReset.vue
@@ -1,93 +1,263 @@
-<template lang="pug">
-.form-wrapper
-  #top-background
-    .seamless_stars_varied_opacity_repeat
-
-  form#login-form(
-    @submit.prevent='handleSubmit',
-    @keyup.enter="handleSubmit",
-    v-if="!forgotPassword && !resetPasswordSetNewOne",
-  )
-    .text-center
-      div
-        .svg-icon.gryphon
-      div
-        .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
-    .form-group.row.text-center
-      .col-12.col-md-6
-        .btn.btn-secondary.social-button(@click='socialAuth("facebook")')
-          .svg-icon.social-icon(v-html="icons.facebookIcon")
-          .text {{registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
-      .col-12.col-md-6
-        .btn.btn-secondary.social-button(@click='socialAuth("google")')
-          .svg-icon.social-icon(v-html="icons.googleIcon")
-          .text {{registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
-    .form-group(v-if='registering')
-      label(for='usernameInput', v-once) {{$t('username')}}
-      input#usernameInput.form-control(type='text', :placeholder='$t("usernamePlaceholder")', v-model='username', :class='{"input-valid": usernameValid, "input-invalid": usernameInvalid}')
-      .input-error(v-for="issue in usernameIssues") {{ issue }}
-    .form-group(v-if='!registering')
-      label(for='usernameInput', v-once) {{$t('emailOrUsername')}}
-      input#usernameInput.form-control(type='text', :placeholder='$t("emailOrUsername")', v-model='username')
-    .form-group(v-if='registering')
-      label(for='emailInput', v-once) {{$t('email')}}
-      input#emailInput.form-control(type='email', :placeholder='$t("emailPlaceholder")', v-model='email', :class='{"input-invalid": emailInvalid, "input-valid": emailValid}')
-    .form-group
-      label(for='passwordInput', v-once) {{$t('password')}}
-      a.float-right.forgot-password(v-once, v-if='!registering', @click='forgotPassword = true') {{$t('forgotPassword')}}
-      input#passwordInput.form-control(type='password', :placeholder='$t(registering ? "passwordPlaceholder" : "password")', v-model='password')
-    .form-group(v-if='registering')
-      label(for='confirmPasswordInput', v-once) {{$t('confirmPassword')}}
-      input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm', :class='{"input-invalid": passwordConfirmInvalid, "input-valid": passwordConfirmValid}')
-      small.form-text(v-once, v-html="$t('termsAndAgreement')")
-    .text-center
-      .btn.btn-info(@click='register()', v-if='registering', v-once) {{$t('joinHabitica')}}
-      .btn.btn-info(@click='login()', v-if='!registering', v-once) {{$t('login')}}
-      .toggle-links
-        router-link(:to="{name: 'login'}", v-if='registering', exact)
-          a.toggle-link(v-once, v-html="$t('alreadyHaveAccountLogin')")
-        router-link(:to="{name: 'register'}",  v-if='!registering', exact)
-          a.toggle-link(v-once, v-html="$t('dontHaveAccountSignup')")
-
-  form#forgot-form(v-on:submit.prevent='handleSubmit', @keyup.enter="handleSubmit", v-if='forgotPassword')
-    .text-center
-      div
-        .svg-icon.gryphon
-      div
-        .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
-      .header
-        h2(v-once) {{ $t('emailNewPass') }}
-        p(v-once) {{ $t('forgotPasswordSteps') }}
-    .form-group.row.text-center
-      label(for='usernameInput', v-once) {{$t('email')}}
-      input#usernameInput.form-control(type='text', :placeholder='$t("emailPlaceholder")', v-model='username')
-    .text-center
-      .btn.btn-info(@click='forgotPasswordLink()', v-once) {{$t('sendLink')}}
-
-  form#reset-password-set-new-one-form(v-on:submit.prevent='handleSubmit', @keyup.enter="handleSubmit", v-if='resetPasswordSetNewOne')
-    .text-center
-      div
-        .svg-icon.gryphon
-      div
-        .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
-      .header
-        h2 {{ $t('passwordResetPage') }}
-    .form-group
-      label(for='passwordInput', v-once) {{$t('newPass')}}
-      input#passwordInput.form-control(type='password', :placeholder="$t('password')", v-model='password')
-    .form-group
-      label(for='confirmPasswordInput', v-once) {{$t('confirmPass')}}
-      input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm')
-    .text-center
-      .btn.btn-info(
-        @click='resetPasswordSetNewOneLink()',
-        :enabled="!resetPasswordSetNewOneData.hasError"
-      )  {{$t('setNewPass')}}
-
-  #bottom-wrap(:class="`bottom-wrap-${!registering ? 'login' : 'register'}`")
-    #bottom-background
-      .seamless_mountains_demo_repeat
-      .midground_foreground_extended2
+<template>
+  <div class="form-wrapper">
+    <div id="top-background">
+      <div class="seamless_stars_varied_opacity_repeat"></div>
+    </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
+            class="svg-icon habitica-logo"
+            v-html="icons.habiticaIcon"
+          ></div>
+        </div>
+      </div><div class="form-group row text-center">
+        <div class="col-12 col-md-6">
+          <div
+            class="btn btn-secondary social-button"
+            @click="socialAuth('facebook')"
+          >
+            <div
+              class="svg-icon social-icon"
+              v-html="icons.facebookIcon"
+            ></div><div class="text">
+              {{ registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'}) }}
+            </div>
+          </div>
+        </div><div class="col-12 col-md-6">
+          <div
+            class="btn btn-secondary social-button"
+            @click="socialAuth('google')"
+          >
+            <div
+              class="svg-icon social-icon"
+              v-html="icons.googleIcon"
+            ></div><div class="text">
+              {{ registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'}) }}
+            </div>
+          </div>
+        </div>
+      </div><div
+        v-if="registering"
+        class="form-group"
+      >
+        <label
+          v-once
+          for="usernameInput"
+        >{{ $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
+          v-for="issue in usernameIssues"
+          class="input-error"
+        >
+          {{ issue }}
+        </div>
+      </div><div
+        v-if="!registering"
+        class="form-group"
+      >
+        <label
+          v-once
+          for="usernameInput"
+        >{{ $t('emailOrUsername') }}</label><input
+          id="usernameInput"
+          v-model="username"
+          class="form-control"
+          type="text"
+          :placeholder="$t('emailOrUsername')"
+        >
+      </div><div
+        v-if="registering"
+        class="form-group"
+      >
+        <label
+          v-once
+          for="emailInput"
+        >{{ $t('email') }}</label><input
+          id="emailInput"
+          v-model="email"
+          class="form-control"
+          type="email"
+          :placeholder="$t('emailPlaceholder')"
+          :class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
+        >
+      </div><div class="form-group">
+        <label
+          v-once
+          for="passwordInput"
+        >{{ $t('password') }}</label><a
+          v-if="!registering"
+          v-once
+          class="float-right forgot-password"
+          @click="forgotPassword = true"
+        >{{ $t('forgotPassword') }}</a><input
+          id="passwordInput"
+          v-model="password"
+          class="form-control"
+          type="password"
+          :placeholder="$t(registering ? 'passwordPlaceholder' : 'password')"
+        >
+      </div><div
+        v-if="registering"
+        class="form-group"
+      >
+        <label
+          v-once
+          for="confirmPasswordInput"
+        >{{ $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
+          v-once
+          class="form-text"
+          v-html="$t('termsAndAgreement')"
+        ></small>
+      </div><div class="text-center">
+        <div
+          v-if="registering"
+          v-once
+          class="btn btn-info"
+          @click="register()"
+        >
+          {{ $t('joinHabitica') }}
+        </div><div
+          v-if="!registering"
+          v-once
+          class="btn btn-info"
+          @click="login()"
+        >
+          {{ $t('login') }}
+        </div><div class="toggle-links">
+          <router-link
+            v-if="registering"
+            :to="{name: 'login'}"
+            exact="exact"
+          >
+            <a
+              v-once
+              class="toggle-link"
+              v-html="$t('alreadyHaveAccountLogin')"
+            ></a>
+          </router-link><router-link
+            v-if="!registering"
+            :to="{name: 'register'}"
+            exact="exact"
+          >
+            <a
+              v-once
+              class="toggle-link"
+              v-html="$t('dontHaveAccountSignup')"
+            ></a>
+          </router-link>
+        </div>
+      </div>
+    </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
+            class="svg-icon habitica-logo"
+            v-html="icons.habiticaIcon"
+          ></div>
+        </div><div class="header">
+          <h2 v-once>
+            {{ $t('emailNewPass') }}
+          </h2><p v-once>
+            {{ $t('forgotPasswordSteps') }}
+          </p>
+        </div>
+      </div><div class="form-group row text-center">
+        <label
+          v-once
+          for="usernameInput"
+        >{{ $t('email') }}</label><input
+          id="usernameInput"
+          v-model="username"
+          class="form-control"
+          type="text"
+          :placeholder="$t('emailPlaceholder')"
+        >
+      </div><div class="text-center">
+        <div
+          v-once
+          class="btn btn-info"
+          @click="forgotPasswordLink()"
+        >
+          {{ $t('sendLink') }}
+        </div>
+      </div>
+    </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
+            class="svg-icon habitica-logo"
+            v-html="icons.habiticaIcon"
+          ></div>
+        </div><div class="header">
+          <h2>{{ $t('passwordResetPage') }}</h2>
+        </div>
+      </div><div class="form-group">
+        <label
+          v-once
+          for="passwordInput"
+        >{{ $t('newPass') }}</label><input
+          id="passwordInput"
+          v-model="password"
+          class="form-control"
+          type="password"
+          :placeholder="$t('password')"
+        >
+      </div><div class="form-group">
+        <label
+          v-once
+          for="confirmPasswordInput"
+        >{{ $t('confirmPass') }}</label><input
+          id="confirmPasswordInput"
+          v-model="passwordConfirm"
+          class="form-control"
+          type="password"
+          :placeholder="$t('confirmPasswordPlaceholder')"
+        >
+      </div><div class="text-center">
+        <div
+          class="btn btn-info"
+          :enabled="!resetPasswordSetNewOneData.hasError"
+          @click="resetPasswordSetNewOneLink()"
+        >
+          {{ $t('setNewPass') }}
+        </div>
+      </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>
+    </div>
+  </div>
 </template>
 
 <style>
diff --git a/website/client/src/components/avatar.vue b/website/client/src/components/avatar.vue
index 9cca1f76eb..69118b25d5 100644
--- a/website/client/src/components/avatar.vue
+++ b/website/client/src/components/avatar.vue
@@ -1,49 +1,53 @@
-<template lang="pug">
-.avatar(:style="{width, height, paddingTop}", :class="backgroundClass", @click.prevent='castEnd()')
-  .character-sprites(:style='{margin: spritesMargin}')
-    template(v-if="!avatarOnly")
-      // Mount Body
-      span(v-if="member.items.currentMount", :class="'Mount_Body_' + member.items.currentMount")
-
-    // 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")
-
-    // Show flower ALL THE TIME!!!
-    // See https://github.com/HabitRPG/habitica/issues/7133
-    span(:class="'hair_flower_' + member.preferences.hair.flower")
-
-    // Show avatar only if not currently affected by visual buff
-    template(v-if="showAvatar()")
-      span(:class="['chair_' + member.preferences.chair, specialMountClass]")
-      span(:class="[getGearClass('back'), specialMountClass]")
-      span(:class="[skinClass, specialMountClass]")
-      span(
-        :class="[member.preferences.size + '_shirt_' + member.preferences.shirt, specialMountClass]"
-      )
-      span(:class="['head_0', specialMountClass]")
-      span(:class="[member.preferences.size + '_' + getGearClass('armor'), specialMountClass]")
-      span(:class="[getGearClass('back_collar'), specialMountClass]")
-      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(:class="[getGearClass('body'), specialMountClass]")
-      span(:class="[getGearClass('eyewear'), specialMountClass]")
-      span(:class="[getGearClass('head'), specialMountClass]")
-      span(:class="[getGearClass('headAccessory'), specialMountClass]")
-      span(:class="['hair_flower_' + member.preferences.hair.flower, specialMountClass]")
-      span(v-if="!hideGear('shield')", :class="[getGearClass('shield'), specialMountClass]")
-      span(v-if="!hideGear('weapon')", :class="[getGearClass('weapon'), specialMountClass]")
-
-    // Resting
-    span.zzz(v-if="member.preferences.sleep")
-
-    template(v-if="!avatarOnly")
-      // Mount Head
-      span(v-if="member.items.currentMount", :class="'Mount_Head_' + member.items.currentMount")
-      // Pet
-      span.current-pet(v-if="member.items.currentPet", :class="'Pet-' + member.items.currentPet")
-  class-badge.under-avatar(v-if="hasClass && !hideClassBadge", :member-class="member.stats.class")
+<template>
+  <div
+    class="avatar"
+    :style="{width, height, paddingTop}"
+    :class="backgroundClass"
+    @click.prevent="castEnd()"
+  >
+    <div
+      class="character-sprites"
+      :style="{margin: spritesMargin}"
+    >
+      <template v-if="!avatarOnly">
+        <!-- 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">
+        <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
+          v-if="!hideGear('shield')"
+          :class="[getGearClass('shield'), specialMountClass]"
+        ></span><span
+          v-if="!hideGear('weapon')"
+          :class="[getGearClass('weapon'), specialMountClass]"
+        ></span>
+      </template><!-- Resting--><span
+        v-if="member.preferences.sleep"
+        class="zzz"
+      ></span><template v-if="!avatarOnly">
+        <!-- Mount Head--><span
+          v-if="member.items.currentMount"
+          :class="'Mount_Head_' + member.items.currentMount"
+        ></span><!-- Pet--><span
+          v-if="member.items.currentPet"
+          class="current-pet"
+          :class="'Pet-' + member.items.currentPet"
+        ></span>
+      </template>
+    </div><class-badge
+      v-if="hasClass && !hideClassBadge"
+      class="under-avatar"
+      :member-class="member.stats.class"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/avatarModal/body-settings.vue b/website/client/src/components/avatarModal/body-settings.vue
index fcd4a35a2e..6af371d544 100644
--- a/website/client/src/components/avatarModal/body-settings.vue
+++ b/website/client/src/components/avatarModal/body-settings.vue
@@ -1,23 +1,31 @@
-<template lang="pug">
-  #body.section.customize-section
-    sub-menu.text-center(:items="items", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
-    div(v-if='activeSubPage === "size"')
-      customize-options(
-        :items="sizes",
-        :currentValue="user.preferences.size"
-      )
-    div(v-if='activeSubPage === "shirt"')
-      customize-options(
-        :items="freeShirts",
-        :currentValue="user.preferences.shirt"
-      )
-      customize-options(
-        v-if='editing',
-        :items='specialShirts',
-        :currentValue="user.preferences.shirt",
-        :fullSet='!userOwnsSet("shirt", specialShirtKeys)',
-        @unlock='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)'
-      )
+<template>
+  <div
+    id="body"
+    class="section customize-section"
+  >
+    <sub-menu
+      class="text-center"
+      :items="items"
+      :active-sub-page="activeSubPage"
+      @changeSubPage="changeSubPage($event)"
+    /><div v-if="activeSubPage === 'size'">
+      <customize-options
+        :items="sizes"
+        :current-value="user.preferences.size"
+      />
+    </div><div v-if="activeSubPage === 'shirt'">
+      <customize-options
+        :items="freeShirts"
+        :current-value="user.preferences.shirt"
+      /><customize-options
+        v-if="editing"
+        :items="specialShirts"
+        :current-value="user.preferences.shirt"
+        :full-set="!userOwnsSet('shirt', specialShirtKeys)"
+        @unlock="unlock(`shirt.${specialShirtKeys.join(',shirt.')}`)"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/avatarModal/customize-options.vue b/website/client/src/components/avatarModal/customize-options.vue
index ed26b3a5b7..9b3f90b51c 100644
--- a/website/client/src/components/avatarModal/customize-options.vue
+++ b/website/client/src/components/avatarModal/customize-options.vue
@@ -1,25 +1,55 @@
-<template lang="pug">
-  .customize-options(:class="{'background-set': fullSet}")
-    .outer-option-background(
-      v-for='option in items',
-      :key='option.key',
-      @click='option.click(option)',
-      :class='{locked: option.gemLocked || option.goldLocked, premium: Boolean(option.gem), active: option.active || currentValue === option.key, none: option.none, hide: option.hide }'
-    )
-      .option
-        .sprite.customize-option(:class='option.class')
-          .redline-outer(v-if="option.none")
-            .redline
-      .gem-lock(v-if='option.gemLocked')
-        .svg-icon.gem(v-html='icons.gem')
-        span {{ option.gem }}
-      .gold-lock(v-if='option.goldLocked')
-        .svg-icon.gold(v-html='icons.gold')
-        span {{ option.gold }}
-    .purchase-set(v-if='fullSet', @click='unlock()')
-      span.label {{ $t('purchaseAll') }}
-      .svg-icon.gem(v-html='icons.gem')
-      span.price 5
+<template>
+  <div
+    class="customize-options"
+    :class="{'background-set': fullSet}"
+  >
+    <div
+      v-for="option in items"
+      :key="option.key"
+      class="outer-option-background"
+      :class="{locked: option.gemLocked || option.goldLocked, premium: Boolean(option.gem), active: option.active || currentValue === option.key, none: option.none, hide: option.hide }"
+      @click="option.click(option)"
+    >
+      <div class="option">
+        <div
+          class="sprite customize-option"
+          :class="option.class"
+        >
+          <div
+            v-if="option.none"
+            class="redline-outer"
+          >
+            <div class="redline"></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
+        v-if="option.goldLocked"
+        class="gold-lock"
+      >
+        <div
+          class="svg-icon gold"
+          v-html="icons.gold"
+        ></div><span>{{ option.gold }}</span>
+      </div>
+    </div><div
+      v-if="fullSet"
+      class="purchase-set"
+      @click="unlock()"
+    >
+      <span class="label">{{ $t('purchaseAll') }}</span><div
+        class="svg-icon gem"
+        v-html="icons.gem"
+      ></div><span class="price">5</span>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/avatarModal/extra-settings.vue b/website/client/src/components/avatarModal/extra-settings.vue
index 89a6566dec..93e29640a0 100644
--- a/website/client/src/components/avatarModal/extra-settings.vue
+++ b/website/client/src/components/avatarModal/extra-settings.vue
@@ -1,38 +1,53 @@
-<template lang="pug">
-  #extra.section.container.customize-section
-    sub-menu.text-center(:items="extraSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
-
-    #hair-color(v-if='activeSubPage === "glasses"')
-      customize-options(
-        :items="eyewear"
-      )
-
-    #animal-ears(v-if='activeSubPage === "ears"')
-      customize-options(
-        :items="animalItems('headAccessory')",
-        :fullSet='!animalItemsOwned("headAccessory")',
-        @unlock='unlock(animalItemsUnlockString("headAccessory"))'
-      )
-
-    #animal-tails(v-if='activeSubPage === "tails"')
-      customize-options(
-        :items="animalItems('back')",
-        :fullSet='!animalItemsOwned("back")',
-        @unlock='unlock(animalItemsUnlockString("back"))'
-      )
-    #headband(v-if='activeSubPage === "headband"')
-      customize-options(
-        :items="headbands",
-      )
-
-    #wheelchairs(v-if='activeSubPage === "wheelchair"')
-      customize-options(
-        :items="chairs",
-      )
-    #flowers(v-if='activeSubPage === "flower"')
-      customize-options(
-        :items="flowers",
-      )
+<template>
+  <div
+    id="extra"
+    class="section container customize-section"
+  >
+    <sub-menu
+      class="text-center"
+      :items="extraSubMenuItems"
+      :active-sub-page="activeSubPage"
+      @changeSubPage="changeSubPage($event)"
+    /><div
+      v-if="activeSubPage === 'glasses'"
+      id="hair-color"
+    >
+      <customize-options :items="eyewear" />
+    </div><div
+      v-if="activeSubPage === 'ears'"
+      id="animal-ears"
+    >
+      <customize-options
+        :items="animalItems('headAccessory')"
+        :full-set="!animalItemsOwned('headAccessory')"
+        @unlock="unlock(animalItemsUnlockString('headAccessory'))"
+      />
+    </div><div
+      v-if="activeSubPage === 'tails'"
+      id="animal-tails"
+    >
+      <customize-options
+        :items="animalItems('back')"
+        :full-set="!animalItemsOwned('back')"
+        @unlock="unlock(animalItemsUnlockString('back'))"
+      />
+    </div><div
+      v-if="activeSubPage === 'headband'"
+      id="headband"
+    >
+      <customize-options :items="headbands" />
+    </div><div
+      v-if="activeSubPage === 'wheelchair'"
+      id="wheelchairs"
+    >
+      <customize-options :items="chairs" />
+    </div><div
+      v-if="activeSubPage === 'flower'"
+      id="flowers"
+    >
+      <customize-options :items="flowers" />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/avatarModal/hair-settings.vue b/website/client/src/components/avatarModal/hair-settings.vue
index b202cb25ae..d19957f891 100644
--- a/website/client/src/components/avatarModal/hair-settings.vue
+++ b/website/client/src/components/avatarModal/hair-settings.vue
@@ -1,44 +1,65 @@
-<template lang="pug">
-  #hair.section.customize-section
-    sub-menu.text-center(:items="hairSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
-
-    #hair-color(v-if='activeSubPage === "color"')
-      customize-options(
-        :items="freeHairColors",
-        :currentValue="user.preferences.hair.color"
-      )
-
-      div(v-if='editing && set.key !== "undefined"', v-for='set in seasonalHairColors')
-        customize-options(
-          :items='set.options',
-          :currentValue="user.preferences.skin",
-          :fullSet='!hideSet(set) && !userOwnsSet("hair", set.keys, "color")',
-          @unlock='unlock(`hair.color.${set.keys.join(",hair.color.")}`)'
-        )
-
-    #style(v-if='activeSubPage === "style"')
-      div(v-for='set in styleSets')
-        customize-options(
-          :items='set.options',
-          :fullSet='set.fullSet',
-          @unlock='set.unlock()'
-        )
-    #bangs(v-if='activeSubPage === "bangs"')
-      customize-options(
-        :items='hairBangs',
-        :currentValue="user.preferences.hair.bangs"
-      )
-    #facialhair(v-if='activeSubPage === "facialhair"')
-      customize-options(
-        v-if='editing',
-        :items='mustacheList'
-      )
-      customize-options(
-        v-if='editing',
-        :items='beardList',
-        :fullSet='isPurchaseAllNeeded("hair", ["baseHair5", "baseHair6"], ["mustache", "beard"])',
-        @unlock='unlock(`hair.mustache.${baseHair5Keys.join(",hair.mustache.")},hair.beard.${baseHair6Keys.join(",hair.beard.")}`)'
-      )
+<template>
+  <div
+    id="hair"
+    class="section customize-section"
+  >
+    <sub-menu
+      class="text-center"
+      :items="hairSubMenuItems"
+      :active-sub-page="activeSubPage"
+      @changeSubPage="changeSubPage($event)"
+    /><div
+      v-if="activeSubPage === 'color'"
+      id="hair-color"
+    >
+      <customize-options
+        :items="freeHairColors"
+        :current-value="user.preferences.hair.color"
+      /><div
+        v-for="set in seasonalHairColors"
+        v-if="editing && set.key !== 'undefined'"
+      >
+        <customize-options
+          :items="set.options"
+          :current-value="user.preferences.skin"
+          :full-set="!hideSet(set) && !userOwnsSet('hair', set.keys, 'color')"
+          @unlock="unlock(`hair.color.${set.keys.join(',hair.color.')}`)"
+        />
+      </div>
+    </div><div
+      v-if="activeSubPage === 'style'"
+      id="style"
+    >
+      <div v-for="set in styleSets">
+        <customize-options
+          :items="set.options"
+          :full-set="set.fullSet"
+          @unlock="set.unlock()"
+        />
+      </div>
+    </div><div
+      v-if="activeSubPage === 'bangs'"
+      id="bangs"
+    >
+      <customize-options
+        :items="hairBangs"
+        :current-value="user.preferences.hair.bangs"
+      />
+    </div><div
+      v-if="activeSubPage === 'facialhair'"
+      id="facialhair"
+    >
+      <customize-options
+        v-if="editing"
+        :items="mustacheList"
+      /><customize-options
+        v-if="editing"
+        :items="beardList"
+        :full-set="isPurchaseAllNeeded('hair', ['baseHair5', 'baseHair6'], ['mustache', 'beard'])"
+        @unlock="unlock(`hair.mustache.${baseHair5Keys.join(',hair.mustache.')},hair.beard.${baseHair6Keys.join(',hair.beard.')}`)"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/avatarModal/skin-settings.vue b/website/client/src/components/avatarModal/skin-settings.vue
index ade49993d2..d6cb4e3bb2 100644
--- a/website/client/src/components/avatarModal/skin-settings.vue
+++ b/website/client/src/components/avatarModal/skin-settings.vue
@@ -1,18 +1,28 @@
-<template lang="pug">
-  #skin.section.customize-section
-    sub-menu.text-center(:items="skinSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
-    customize-options(
-      :items="freeSkins",
-      :currentValue="user.preferences.skin"
-    )
-
-    div(v-if='editing && set.key !== "undefined"', v-for='set in seasonalSkins')
-      customize-options(
-        :items='set.options',
-        :currentValue="user.preferences.skin",
-        :fullSet='!hideSet(set) && !userOwnsSet("skin", set.keys)',
-        @unlock='unlock(`skin.${set.keys.join(",skin.")}`)'
-      )
+<template>
+  <div
+    id="skin"
+    class="section customize-section"
+  >
+    <sub-menu
+      class="text-center"
+      :items="skinSubMenuItems"
+      :active-sub-page="activeSubPage"
+      @changeSubPage="changeSubPage($event)"
+    /><customize-options
+      :items="freeSkins"
+      :current-value="user.preferences.skin"
+    /><div
+      v-for="set in seasonalSkins"
+      v-if="editing && set.key !== 'undefined'"
+    >
+      <customize-options
+        :items="set.options"
+        :current-value="user.preferences.skin"
+        :full-set="!hideSet(set) && !userOwnsSet('skin', set.keys)"
+        @unlock="unlock(`skin.${set.keys.join(',skin.')}`)"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/avatarModal/sub-menu.vue b/website/client/src/components/avatarModal/sub-menu.vue
index 239d703fd8..a8a5f1adf1 100644
--- a/website/client/src/components/avatarModal/sub-menu.vue
+++ b/website/client/src/components/avatarModal/sub-menu.vue
@@ -1,12 +1,15 @@
-<template lang="pug">
-  .sub-menu.text-center
-    .sub-menu-item(
-      v-for="item of items",
-      :key="item.id",
-      @click='$emit("changeSubPage", item.id)',
-      :class='{active: activeSubPage === item.id}'
-    )
-      strong(v-once) {{ item.label }}
+<template>
+  <div class="sub-menu text-center">
+    <div
+      v-for="item of items"
+      :key="item.id"
+      class="sub-menu-item"
+      :class="{active: activeSubPage === item.id}"
+      @click="$emit('changeSubPage', item.id)"
+    >
+      <strong v-once>{{ item.label }}</strong>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/bannedAccountModal.vue b/website/client/src/components/bannedAccountModal.vue
index 191a18e211..dea3f5be53 100644
--- a/website/client/src/components/bannedAccountModal.vue
+++ b/website/client/src/components/bannedAccountModal.vue
@@ -1,12 +1,27 @@
-<template lang="pug">
-  b-modal#banned-account(:title="$t('accountSuspendedTitle')", size='md', :hide-footer="true")
-    .modal-body
-      .row
-        .col-12
-          p(v-markdown='bannedMessage')
-    .modal-footer
-      .col-12.text-center
-          button.btn.btn-primary(@click='close()') {{$t('close')}}
+<template>
+  <b-modal
+    id="banned-account"
+    :title="$t('accountSuspendedTitle')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="row">
+        <div class="col-12">
+          <p v-markdown="bannedMessage"></p>
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('close') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/categories/categoryTags.vue b/website/client/src/components/categories/categoryTags.vue
index 698e1024b2..b2fcd42fd3 100644
--- a/website/client/src/components/categories/categoryTags.vue
+++ b/website/client/src/components/categories/categoryTags.vue
@@ -1,15 +1,17 @@
-<template lang="pug">
-  .categories
-    span.category-label.category-label-blue(v-if='owner')
-      | {{ $t('owned') }}
-    span.category-label.category-label-green(v-if='member')
-      | {{ $t('joined') }}
-    span.category-label(
-      v-for='category in categories',
+<template>
+  <div class="categories">
+    <span
+      v-if="owner"
+      class="category-label category-label-blue"
+    >{{ $t('owned') }}</span><span
+      v-if="member"
+      class="category-label category-label-green"
+    >{{ $t('joined') }}</span><span
+      v-for="category in categories"
+      class="category-label"
       :class="{'category-label-purple':isOfficial(category)}"
-    )
-     | {{ $t(category.name) }}
-    slot
+    >{{ $t(category.name) }}</span><slot></slot>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/challenges/challengeDetail.vue b/website/client/src/components/challenges/challengeDetail.vue
index e141f60a4f..521d8e7905 100644
--- a/website/client/src/components/challenges/challengeDetail.vue
+++ b/website/client/src/components/challenges/challengeDetail.vue
@@ -1,84 +1,174 @@
-<template lang="pug">
-.row
-  challenge-modal(@updatedChallenge='updatedChallenge')
-  leave-challenge-modal(:challengeId='challenge._id')
-  close-challenge-modal(:members='members', :challengeId='challenge._id', :prize='challenge.prize')
-  challenge-member-progress-modal(:challengeId='challenge._id')
-  .col-12.col-md-8.standard-page
-    .row
-      .col-12.col-md-6
-        h1(v-markdown='challenge.name')
-        div
-          span.mr-1.ml-0.d-block
-            strong(v-once) {{ $t('createdBy') }}:
-            user-link.mx-1(:user="challenge.leader")
-          span.mr-1.ml-0.d-block(v-if="challenge.group && challenge.group.name !== 'Tavern'")
-            strong(v-once) {{ $t(challenge.group.type) }}:
-            group-link.mx-1(:group="challenge.group")
-          // @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}}
-        .tags
-          span.tag(v-for='tag in challenge.tags') {{tag}}
-      .col-12.col-md-6.text-right
-        .box(@click="showMemberModal()")
-          .svg-icon.member-icon(v-html="icons.memberIcon")
-          | {{challenge.memberCount}}
-          .details(v-once) {{$t('participantsTitle')}}
-        .box
-          .svg-icon.gem-icon(v-html="icons.gemIcon")
-          | {{challenge.prize}}
-          .details(v-once) {{$t('prize')}}
-    .row.challenge-actions
-      .col-12.col-md-6
-        strong.view-progress {{ $t('viewProgressOf') }}
-        member-search-dropdown(:text="$t('selectParticipant')", :members='members', :challengeId='challengeId', @member-selected='openMemberProgressModal')
-      .col-12.col-md-6.text-right
-        span(v-if='isLeader || isAdmin')
-          b-dropdown.create-dropdown(:text="$t('addTaskToChallenge')", :variant="'success'")
-            b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
-              | {{$t(type)}}
-          task-modal(
-            :task="workingTask",
-            :purpose="taskFormPurpose",
-            @cancel="cancelTaskModal()",
-            ref="taskModal",
-            :challengeId="challengeId",
-            @taskCreated='taskCreated',
-            @taskEdited='taskEdited',
-            @taskDestroyed='taskDestroyed'
-          )
-    .row
-      task-column.col-12.col-sm-6(
-        v-for="column in columns",
-        :type="column",
-        :key="column",
-        :taskListOverride='tasksByType[column]',
-        :showOptions="showOptions",
-        @editTask="editTask",
-        @taskDestroyed="taskDestroyed",
-        v-if='tasksByType[column].length > 0')
-  .col-12.col-md-4.sidebar.standard-page
-    .button-container(v-if='canJoin')
-      button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-primary(v-once, @click='edit()') {{$t('editChallenge')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-primary(v-once, @click='cloneChallenge()') {{$t('clone')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-primary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
-    .button-container(v-if='isLeader || isAdmin')
-      button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
-    div
-      sidebar-section(:title="$t('challengeSummary')")
-        p(v-markdown='challenge.summary')
-      sidebar-section(:title="$t('challengeDescription')")
-        p(v-markdown='challenge.description')
-    .text-center(v-if='isMember')
-      button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
+<template>
+  <div class="row">
+    <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">
+      <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
+              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")
+| {{$t('endDate')}}
+// "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
+            class="box"
+            @click="showMemberModal()"
+          >
+            <div
+              class="svg-icon member-icon"
+              v-html="icons.memberIcon"
+            ></div>{{ challenge.memberCount }}<div
+              v-once
+              class="details"
+            >
+              {{ $t('participantsTitle') }}
+            </div>
+          </div><div class="box">
+            <div
+              class="svg-icon gem-icon"
+              v-html="icons.gemIcon"
+            ></div>{{ challenge.prize }}<div
+              v-once
+              class="details"
+            >
+              {{ $t('prize') }}
+            </div>
+          </div>
+        </div>
+      </div><div class="row challenge-actions">
+        <div class="col-12 col-md-6">
+          <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">
+        <task-column
+          v-for="column in columns"
+          v-if="tasksByType[column].length > 0"
+          :key="column"
+          class="col-12 col-sm-6"
+          :type="column"
+          :task-list-override="tasksByType[column]"
+          :show-options="showOptions"
+          @editTask="editTask"
+@taskDestroyed="taskDestroyed"
+        />
+      </div>
+    </div><div class="col-12 col-md-4 sidebar standard-page">
+      <div
+        v-if="canJoin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-success"
+          @click="joinChallenge()"
+        >
+          {{ $t('joinChallenge') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="edit()"
+        >
+          {{ $t('editChallenge') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="cloneChallenge()"
+        >
+          {{ $t('clone') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="exportChallengeCsv()"
+        >
+          {{ $t('exportChallengeCsv') }}
+        </button>
+      </div><div
+        v-if="isLeader || isAdmin"
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-danger"
+          @click="closeChallenge()"
+        >
+          {{ $t('endChallenge') }}
+        </button>
+      </div><div>
+        <sidebar-section :title="$t('challengeSummary')">
+          <p v-markdown="challenge.summary"></p>
+        </sidebar-section><sidebar-section :title="$t('challengeDescription')">
+          <p v-markdown="challenge.description"></p>
+        </sidebar-section>
+      </div><div
+        v-if="isMember"
+        class="text-center"
+      >
+        <button
+          v-once
+          class="btn btn-danger"
+          @click="leaveChallenge()"
+        >
+          {{ $t('leaveChallenge') }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/challenges/challengeItem.vue b/website/client/src/components/challenges/challengeItem.vue
index d682eb9946..52fe8c9903 100644
--- a/website/client/src/components/challenges/challengeItem.vue
+++ b/website/client/src/components/challenges/challengeItem.vue
@@ -1,42 +1,84 @@
-<template lang="pug">
-.challenge
-  .challenge-prize
-    .number
-      span.svg-icon(v-html="icons.gemIcon")
-      span.value {{challenge.prize}}
-    .label {{ $t('prize') }}
-  .challenge-header
-    router-link(
-      :to="{ name: 'challenge', params: { challengeId: challenge._id } }"
-    )
-      h3.challenge-title(v-markdown='challenge.name')
-    .meta-info
-      .member-count
-        .svg-icon.user-icon(v-html="icons.memberIcon")
-        span.count-label {{challenge.memberCount}}
-      .divider
-      .official(v-if="isOfficial")
-        .svg-icon.user-icon(v-html="icons.officialIcon")
-      .owner(v-if="fullLayout")
-        .owner-item
-          strong {{ $t('createdBy') }}:
-          user-link.mx-1(:user="challenge.leader")
-        .owner-item(v-if="challenge.group && !isTavern(challenge.group)")
-          strong {{ $t(challenge.group.type) }}:
-          group-link.mx-1(:group="challenge.group")
-  category-tags.challenge-categories(
-    :categories="challenge.categories",
-    :owner="isOwner",
-    :member="isMember",
-  )
-  .challenge-description(v-markdown='challenge.summary')
-  .well-wrapper(v-if="fullLayout")
-    .well
-      div(v-for="task in tasksData", :class="{'muted': task.value === 0}")
-        .number
-          .svg-icon(v-html="task.icon", :class="task.label + '-icon'")
-          span.value {{ task.value }}
-        .label {{$t(task.label)}}
+<template>
+  <div class="challenge">
+    <div class="challenge-prize">
+      <div class="number">
+        <span
+          class="svg-icon"
+          v-html="icons.gemIcon"
+        ></span><span class="value">{{ challenge.prize }}</span>
+      </div><div class="label">
+        {{ $t('prize') }}
+      </div>
+    </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">
+        <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
+          v-if="isOfficial"
+          class="official"
+        >
+          <div
+            class="svg-icon user-icon"
+            v-html="icons.officialIcon"
+          ></div>
+        </div><div
+          v-if="fullLayout"
+          class="owner"
+        >
+          <div class="owner-item">
+            <strong>{{ $t('createdBy') }}:</strong><user-link
+              class="mx-1"
+              :user="challenge.leader"
+            />
+          </div><div
+            v-if="challenge.group && !isTavern(challenge.group)"
+            class="owner-item"
+          >
+            <strong>{{ $t(challenge.group.type) }}:</strong><group-link
+              class="mx-1"
+              :group="challenge.group"
+            />
+          </div>
+        </div>
+      </div>
+    </div><category-tags
+      class="challenge-categories"
+      :categories="challenge.categories"
+      :owner="isOwner"
+      :member="isMember"
+    /><div
+      v-markdown="challenge.summary"
+      class="challenge-description"
+    ></div><div
+      v-if="fullLayout"
+      class="well-wrapper"
+    >
+      <div class="well">
+        <div
+          v-for="task in tasksData"
+          :class="{'muted': task.value === 0}"
+        >
+          <div class="number">
+            <div
+              class="svg-icon"
+              :class="task.label + '-icon'"
+              v-html="task.icon"
+            ></div><span class="value">{{ task.value }}</span>
+          </div><div class="label">
+            {{ $t(task.label) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/challenges/challengeMemberProgressModal.vue b/website/client/src/components/challenges/challengeMemberProgressModal.vue
index 7c76144b56..a195d10456 100644
--- a/website/client/src/components/challenges/challengeMemberProgressModal.vue
+++ b/website/client/src/components/challenges/challengeMemberProgressModal.vue
@@ -1,14 +1,32 @@
-<template lang="pug">
-  b-modal#challenge-member-modal(title="User Progress", size='lg')
-    .row.award-row(v-if='isLeader || isAdmin')
-      .col-12.text-center
-        button.btn.btn-primary(v-once, @click='closeChallenge()') {{ $t('awardWinners') }}
-    .row
-      task-column.col-6(
-        v-for="column in columns",
-        :type="column",
-        :key="column",
-        :taskListOverride='tasksByType[column]')
+<template>
+  <b-modal
+    id="challenge-member-modal"
+    title="User Progress"
+    size="lg"
+  >
+    <div
+      v-if="isLeader || isAdmin"
+      class="row award-row"
+    >
+      <div class="col-12 text-center">
+        <button
+          v-once
+          class="btn btn-primary"
+          @click="closeChallenge()"
+        >
+          {{ $t('awardWinners') }}
+        </button>
+      </div>
+    </div><div class="row">
+      <task-column
+        v-for="column in columns"
+        :key="column"
+        class="col-6"
+        :type="column"
+        :task-list-override="tasksByType[column]"
+      />
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/challenges/challengeModal.vue b/website/client/src/components/challenges/challengeModal.vue
index 8a5d07d6e6..8267689a3a 100644
--- a/website/client/src/components/challenges/challengeModal.vue
+++ b/website/client/src/components/challenges/challengeModal.vue
@@ -1,66 +1,152 @@
-<template lang="pug">
-  b-modal#challenge-modal(:title="title", size='lg', @shown="shown")
-    .form
-      .form-group
-        label
-          strong(v-once) {{$t('name')}} *
-        b-form-input(type="text", :placeholder="$t('challengeNamePlaceholder')", v-model="workingChallenge.name")
-      .form-group
-        label
-          strong(v-once) {{$t('shortName')}} *
-        b-form-input(type="text", :placeholder="$t('shortNamePlaceholder')", v-model="workingChallenge.shortName")
-      .form-group
-        label
-          strong(v-once) {{$t('challengeSummary')}} *
-        div.summary-count {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
-        textarea.summary-textarea.form-control(:placeholder="$t('challengeSummaryPlaceholder')", v-model="workingChallenge.summary")
-      .form-group
-        label
-          strong(v-once) {{$t('challengeDescription')}} *
-        a.float-right(v-markdown='$t("markdownFormattingHelp")')
-        textarea.description-textarea.form-control(:placeholder="$t('challengeDescriptionPlaceholder')", v-model="workingChallenge.description")
-      .form-group(v-if='creating')
-        label
-          strong(v-once) {{$t('challengeGuild')}} *
-        select.form-control(v-model='workingChallenge.group')
-          option(v-for='group in groups', :value='group._id') {{group.name}}
-      .form-group(v-if='workingChallenge.categories')
-        label
-          strong(v-once) {{$t('categories')}} *
-        div.category-wrap(@click.prevent="toggleCategorySelect")
-          span.category-select(v-if='workingChallenge.categories.length === 0') {{$t('none')}}
-          .category-label(v-for='category in workingChallenge.categories') {{$t(categoriesHashByKey[category])}}
-        .category-box(v-if="showCategorySelect && creating")
-          .form-check(
-            v-for="group in categoryOptions",
-            :key="group.key",
-            v-if='group.key !== "habitica_official" || user.contributor.admin'
-          )
-            .custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox",
-                :value="group.key",
-                :id="`challenge-modal-cat-${group.key}`",
-                 v-model="workingChallenge.categories")
-              label.custom-control-label(v-once, :for="`challenge-modal-cat-${group.key}`") {{ $t(group.label) }}
-          button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
-      // @TODO: Implement in V2 .form-group
-        label
-          strong(v-once) {{$t('endDate')}}
-        b-form-input.end-date-input
-      .form-group(v-if='creating')
-        label
-          strong(v-once) {{$t('prize')}}
-        input(type='number', :min='minPrize', :max='maxPrize', v-model="workingChallenge.prize")
-      .row.footer-wrap
-        .col-12.text-center.submit-button-wrapper
-          .alert.alert-warning(v-if='insufficientGemsForTavernChallenge') You do not have enough gems to create a Tavern challenge
-          // @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.btn.btn-primary(v-if='creating && !cloning', @click='createChallenge()', :disabled='loading') {{$t('createChallengeAddTasks')}}
-          button.btn.btn-primary(v-once, v-if='cloning', @click='createChallenge()', :disabled='loading') {{$t('createChallengeCloneTasks')}}
-          button.btn.btn-primary(v-once, v-if='!creating && !cloning', @click='updateChallenge()') {{$t('updateChallenge')}}
-        .col-12.text-center
-          p(v-once) {{$t('challengeMinimum')}}
+<template>
+  <b-modal
+    id="challenge-modal"
+    :title="title"
+    size="lg"
+    @shown="shown"
+  >
+    <div class="form">
+      <div class="form-group">
+        <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
+          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">
+          {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
+        </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
+          v-markdown="$t('markdownFormattingHelp')"
+          class="float-right"
+        ></a><textarea
+          v-model="workingChallenge.description"
+          class="description-textarea form-control"
+          :placeholder="$t('challengeDescriptionPlaceholder')"
+        ></textarea>
+      </div><div
+        v-if="creating"
+        class="form-group"
+      >
+        <label><strong v-once>{{ $t('challengeGuild') }} *</strong></label><select
+          v-model="workingChallenge.group"
+          class="form-control"
+        >
+          <option
+            v-for="group in groups"
+            :value="group._id"
+          >
+            {{ group.name }}
+          </option>
+        </select>
+      </div><div
+        v-if="workingChallenge.categories"
+        class="form-group"
+      >
+        <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
+            v-for="category in workingChallenge.categories"
+            class="category-label"
+          >
+            {{ $t(categoriesHashByKey[category]) }}
+          </div>
+        </div><div
+          v-if="showCategorySelect && creating"
+          class="category-box"
+        >
+          <div
+            v-for="group in categoryOptions"
+            v-if="group.key !== 'habitica_official' || user.contributor.admin"
+            :key="group.key"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="`challenge-modal-cat-${group.key}`"
+                v-model="workingChallenge.categories"
+                class="custom-control-input"
+                type="checkbox"
+                :value="group.key"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="`challenge-modal-cat-${group.key}`"
+              >{{ $t(group.label) }}</label>
+            </div>
+          </div><button
+            class="btn btn-primary"
+            @click.prevent="toggleCategorySelect"
+          >
+            {{ $t('close') }}
+          </button>
+        </div>
+      </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">
+        <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
+            v-if="creating && !cloning"
+            class="btn btn-primary"
+            :disabled="loading"
+            @click="createChallenge()"
+          >
+            {{ $t('createChallengeAddTasks') }}
+          </button><button
+            v-if="cloning"
+            v-once
+            class="btn btn-primary"
+            :disabled="loading"
+            @click="createChallenge()"
+          >
+            {{ $t('createChallengeCloneTasks') }}
+          </button><button
+            v-if="!creating && !cloning"
+            v-once
+            class="btn btn-primary"
+            @click="updateChallenge()"
+          >
+            {{ $t('updateChallenge') }}
+          </button>
+        </div><div class="col-12 text-center">
+          <p v-once>
+            {{ $t('challengeMinimum') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang='scss'>
@@ -245,8 +331,8 @@ export default {
       return this.$t('editingChallenge');
     },
     charactersRemaining () {
-      const currentLength = this.workingChallenge.summary 
-        ? this.workingChallenge.summary.length 
+      const currentLength = this.workingChallenge.summary
+        ? this.workingChallenge.summary.length
         : 0;
       return MAX_SUMMARY_SIZE_FOR_CHALLENGES - currentLength;
     },
diff --git a/website/client/src/components/challenges/closeChallengeModal.vue b/website/client/src/components/challenges/closeChallengeModal.vue
index 0f065b86bc..d2aee3270f 100644
--- a/website/client/src/components/challenges/closeChallengeModal.vue
+++ b/website/client/src/components/challenges/closeChallengeModal.vue
@@ -1,26 +1,63 @@
-<template lang="pug">
-div
-  b-modal#close-challenge-modal(:title="$t('createGuild')", size='md')
-    .header-wrap(slot="modal-header")
-      h2.text-center(v-once) {{$t('endChallenge')}}
-    .row.text-center
-      .col-12
-        .support-habitica
-          // @TODO: Add challenge achievement badge here
-      .col-12
-        strong(v-once) {{$t('selectChallengeWinnersDescription')}}
-      .col-12
-        member-search-dropdown(:text='winnerText', :members='members', :challengeId='challengeId', @member-selected='selectMember')
-      .col-12
-        button.btn.btn-primary(v-once, @click='closeChallenge') {{$t('awardWinners')}}
-      .col-12
-        hr
-        .or {{$t('or')}}
-      .col-12
-        strong(v-once) {{$t('doYouWantedToDeleteChallenge')}}
-      .col-12
-        button.btn.btn-danger(v-once, @click='deleteChallenge()') {{$t('deleteChallenge')}}
-    .footer-wrap(slot="modal-footer")
+<template>
+  <div>
+    <b-modal
+      id="close-challenge-modal"
+      :title="$t('createGuild')"
+      size="md"
+    >
+      <div
+        slot="modal-header"
+        class="header-wrap"
+      >
+        <h2
+          v-once
+          class="text-center"
+        >
+          {{ $t('endChallenge') }}
+        </h2>
+      </div><div class="row text-center">
+        <div class="col-12">
+          <div class="support-habitica">
+          <!-- @TODO: Add challenge achievement badge here-->
+          </div>
+        </div><div class="col-12">
+          <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
+        </div><div class="col-12">
+          <member-search-dropdown
+            :text="winnerText"
+            :members="members"
+            :challenge-id="challengeId"
+            @member-selected="selectMember"
+          />
+        </div><div class="col-12">
+          <button
+            v-once
+            class="btn btn-primary"
+            @click="closeChallenge"
+          >
+            {{ $t('awardWinners') }}
+          </button>
+        </div><div class="col-12">
+          <hr><div class="or">
+            {{ $t('or') }}
+          </div>
+        </div><div class="col-12">
+          <strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
+        </div><div class="col-12">
+          <button
+            v-once
+            class="btn btn-danger"
+            @click="deleteChallenge()"
+          >
+            {{ $t('deleteChallenge') }}
+          </button>
+        </div>
+      </div><div
+        slot="modal-footer"
+        class="footer-wrap"
+      ></div>
+    </b-modal>
+  </div>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/challenges/findChallenges.vue b/website/client/src/components/challenges/findChallenges.vue
index b2d9d00c99..4f166d1936 100644
--- a/website/client/src/components/challenges/findChallenges.vue
+++ b/website/client/src/components/challenges/findChallenges.vue
@@ -1,33 +1,57 @@
-<template lang="pug">
-.row
-  challenge-modal(v-on:createChallenge='challengeCreated')
-  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
-  .col-12.col-md-10.standard-page
-    .row.header-row
-      .col-md-8.text-left
-        h1(v-once) {{$t('findChallenges')}}
-      .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.btn.btn-secondary.create-challenge-button.float-right(@click='createChallenge()')
-          .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once) {{$t('createChallenge')}}
-
-    .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='!loading && filteredChallenges.length === 0')
-        h2(v-once) {{$t('noChallengeMatchFilters')}}
-
-    .row
-      .col-12.col-md-6(v-for='challenge in filteredChallenges')
-        challenge-item(:challenge='challenge')
-      mugen-scroll(
-        :handler="infiniteScrollTrigger",
-        :should-handle="!loading && canLoadMore",
-        :threshold="1",
-        v-show="loading",
-      )
-        h2.col-12.loading(v-once) {{ $t('loading') }}
+<template>
+  <div class="row">
+    <challenge-modal @createChallenge="challengeCreated" /><sidebar
+      @search="updateSearch"
+      @filter="updateFilters"
+    /><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
+          v-if="!loading && filteredChallenges.length === 0"
+          class="no-challenges text-center col-md-6 offset-3"
+        >
+          <h2 v-once>
+            {{ $t('noChallengeMatchFilters') }}
+          </h2>
+        </div>
+      </div><div class="row">
+        <div
+          v-for="challenge in filteredChallenges"
+          class="col-12 col-md-6"
+        >
+          <challenge-item :challenge="challenge" />
+        </div><mugen-scroll
+          v-show="loading"
+          :handler="infiniteScrollTrigger"
+          :should-handle="!loading && canLoadMore"
+          :threshold="1"
+        >
+          <h2
+            v-once
+            class="col-12 loading"
+          >
+            {{ $t('loading') }}
+          </h2>
+        </mugen-scroll>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/challenges/groupChallenges.vue b/website/client/src/components/challenges/groupChallenges.vue
index 95dcdc74b6..89e9312e94 100644
--- a/website/client/src/components/challenges/groupChallenges.vue
+++ b/website/client/src/components/challenges/groupChallenges.vue
@@ -1,16 +1,43 @@
-<template lang="pug">
-div
-  challenge-modal(:groupId='groupId', v-on:createChallenge='challengeCreated')
-  .row.no-quest-section(v-if='challenges.length === 0')
-    .col-12.text-center
-      .svg-icon.challenge-icon(v-html="icons.challengeIcon")
-      h4(v-once) {{ $t('haveNoChallenges') }}
-      p(v-once) {{ $t('challengeDetails') }}
-      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
-  template(v-else)
-    challenge-item(v-for='challenge in challenges',:challenge='challenge',:key='challenge._id',:fullLayout='false')
-    .col-12.text-center
-      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
+<template>
+  <div>
+    <challenge-modal
+      :group-id="groupId"
+      @createChallenge="challengeCreated"
+    /><div
+      v-if="challenges.length === 0"
+      class="row no-quest-section"
+    >
+      <div class="col-12 text-center">
+        <div
+          class="svg-icon challenge-icon"
+          v-html="icons.challengeIcon"
+        ></div><h4 v-once>
+          {{ $t('haveNoChallenges') }}
+        </h4><p v-once>
+          {{ $t('challengeDetails') }}
+        </p><button
+          class="btn btn-secondary"
+          @click="createChallenge()"
+        >
+          {{ $t('createChallenge') }}
+        </button>
+      </div>
+    </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">
+        <button
+          class="btn btn-secondary"
+          @click="createChallenge()"
+        >
+          {{ $t('createChallenge') }}
+        </button>
+      </div>
+    </template>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/challenges/index.vue b/website/client/src/components/challenges/index.vue
index c82d7488d8..7beaf1fbf5 100644
--- a/website/client/src/components/challenges/index.vue
+++ b/website/client/src/components/challenges/index.vue
@@ -1,11 +1,23 @@
-<template lang="pug">
-.row
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'myChallenges'}", :class="{'active': $route.name === 'myChallenges'}") {{ $t('myChallenges') }}
-    router-link.nav-link(:to="{name: 'findChallenges'}", :class="{'active': $route.name === 'findChallenges'}") {{ $t('findChallenges') }}
-
-  .col-12
-    router-view
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'myChallenges'}"
+        :class="{'active': $route.name === 'myChallenges'}"
+      >
+        {{ $t('myChallenges') }}
+      </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">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/challenges/leaveChallengeModal.vue b/website/client/src/components/challenges/leaveChallengeModal.vue
index f2309c6984..809219fc76 100644
--- a/website/client/src/components/challenges/leaveChallengeModal.vue
+++ b/website/client/src/components/challenges/leaveChallengeModal.vue
@@ -1,10 +1,26 @@
-<template lang="pug">
-  b-modal#leave-challenge-modal(:title="$t('leaveChallenge')", size='sm', :hide-footer="true")
-    .modal-body
-      h2 {{ $t('confirmKeepChallengeTasks') }}
-      div
-        button.btn.btn-primary(@click='leaveChallenge("keep")') {{ $t('keepThem') }}
-        button.btn.btn-danger(@click='leaveChallenge("remove-all")') {{ $t('removeThem') }}
+<template>
+  <b-modal
+    id="leave-challenge-modal"
+    :title="$t('leaveChallenge')"
+    size="sm"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <h2>{{ $t('confirmKeepChallengeTasks') }}</h2><div>
+        <button
+          class="btn btn-primary"
+          @click="leaveChallenge('keep')"
+        >
+          {{ $t('keepThem') }}
+        </button><button
+          class="btn btn-danger"
+          @click="leaveChallenge('remove-all')"
+        >
+          {{ $t('removeThem') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/challenges/myChallenges.vue b/website/client/src/components/challenges/myChallenges.vue
index 42760beef5..93a046f275 100644
--- a/website/client/src/components/challenges/myChallenges.vue
+++ b/website/client/src/components/challenges/myChallenges.vue
@@ -1,41 +1,73 @@
-<template lang="pug">
-.row
-  challenge-modal(v-on:createChallenge='challengeCreated')
-  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
-
-  .col-10.standard-page
-    .row.header-row
-      .col-md-8.text-left
-        h1(v-once) {{$t('myChallenges')}}
-      .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.btn.btn-secondary.create-challenge-button.float-right(@click='createChallenge()')
-          .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once) {{$t('createChallenge')}}
-
-    .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='!loading && challenges.length === 0')
-        .svg-icon(v-html="icons.challengeIcon")
-        h2(v-once) {{$t('noChallengeTitle')}}
-        p(v-once) {{$t('challengeDescription1')}}
-        p(v-once) {{$t('challengeDescription2')}}
-
-    .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='!loading && challenges.length > 0 && filteredChallenges.length === 0')
-        h2(v-once) {{$t('noChallengeMatchFilters')}}
-
-    .row
-      .col-12.col-md-6(v-for='challenge in filteredChallenges')
-        challenge-item(:challenge='challenge')
-      mugen-scroll(
-        :handler="infiniteScrollTrigger",
-        :should-handle="!loading && canLoadMore",
-        :threshold="1",
-        v-show="loading",
-      )
-        h2.col-12.loading(v-once) {{ $t('loading') }}
+<template>
+  <div class="row">
+    <challenge-modal @createChallenge="challengeCreated" /><sidebar
+      @search="updateSearch"
+      @filter="updateFilters"
+    /><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
+          v-if="!loading && challenges.length === 0"
+          class="no-challenges text-center col-md-6 offset-3"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.challengeIcon"
+          ></div><h2 v-once>
+            {{ $t('noChallengeTitle') }}
+          </h2><p v-once>
+            {{ $t('challengeDescription1') }}
+          </p><p v-once>
+            {{ $t('challengeDescription2') }}
+          </p>
+        </div>
+      </div><div class="row">
+        <div
+          v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
+          class="no-challenges text-center col-md-6 offset-3"
+        >
+          <h2 v-once>
+            {{ $t('noChallengeMatchFilters') }}
+          </h2>
+        </div>
+      </div><div class="row">
+        <div
+          v-for="challenge in filteredChallenges"
+          class="col-12 col-md-6"
+        >
+          <challenge-item :challenge="challenge" />
+        </div><mugen-scroll
+          v-show="loading"
+          :handler="infiniteScrollTrigger"
+          :should-handle="!loading && canLoadMore"
+          :threshold="1"
+        >
+          <h2
+            v-once
+            class="col-12 loading"
+          >
+            {{ $t('loading') }}
+          </h2>
+        </mugen-scroll>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/challenges/sidebar.vue b/website/client/src/components/challenges/sidebar.vue
index ecd46e493a..2a4a90330b 100644
--- a/website/client/src/components/challenges/sidebar.vue
+++ b/website/client/src/components/challenges/sidebar.vue
@@ -1,36 +1,81 @@
-<template lang="pug">
-.standard-sidebar.d-none.d-sm-block
-  .form-group
-    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-  form
-    h2(v-once) {{ $t('filter') }}
-    .form-group
-      h3 {{ $t('category') }}
-      .form-check(
-        v-for="group in categoryOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
-    .form-group(v-if='$route.name !== "findChallenges"')
-      h3 {{ $t('membership') }}
-      .form-check(
-        v-for="group in roleOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
-    .form-group
-      h3 {{ $t('ownership') }}
-      .form-check(
-        v-for="group in ownershipOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="ownershipFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
+<template>
+  <div class="standard-sidebar d-none d-sm-block">
+    <div class="form-group">
+      <input
+        v-model="searchTerm"
+        class="form-control search"
+        type="text"
+        :placeholder="$t('search')"
+      >
+    </div><form>
+      <h2 v-once>
+        {{ $t('filter') }}
+      </h2><div class="form-group">
+        <h3>{{ $t('category') }}</h3><div
+          v-for="group in categoryOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="categoryFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><label
+              v-once
+              class="custom-control-label"
+              :for="group.key"
+            >{{ $t(group.label) }}</label>
+          </div>
+        </div>
+      </div><div
+        v-if="$route.name !== 'findChallenges'"
+        class="form-group"
+      >
+        <h3>{{ $t('membership') }}</h3><div
+          v-for="group in roleOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="roleFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><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
+          v-for="group in ownershipOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="ownershipFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><label
+              v-once
+              class="custom-control-label"
+              :for="group.key"
+            >{{ $t(group.label) }}</label>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/chat/autoComplete.vue b/website/client/src/components/chat/autoComplete.vue
index b830b76e9a..3d2785f66c 100644
--- a/website/client/src/components/chat/autoComplete.vue
+++ b/website/client/src/components/chat/autoComplete.vue
@@ -1,16 +1,31 @@
-<template lang="pug">
-.autocomplete-selection(v-if='searchResults.length > 0', :style='autocompleteStyle')
-  .autocomplete-results.d-flex.align-items-center(
-    v-for='result in searchResults',
-    @click='select(result)',
-    @mouseenter='setHover(result)',
-    @mouseleave='resetSelection()',
-    :class='{"hover-background": result.hover}',
-  )
-    span
-      h3.profile-name(:class='userLevelStyle(result.msg)') {{ result.displayName }}
-      .svg-icon(v-html="tierIcon(result.msg)", v-if='showTierStyle(result.msg)')
-    span.username.ml-2(v-if='result.username', :class='{"hover-foreground": result.hover}') @{{ result.username }}
+<template>
+  <div
+    v-if="searchResults.length > 0"
+    class="autocomplete-selection"
+    :style="autocompleteStyle"
+  >
+    <div
+      v-for="result in searchResults"
+      class="autocomplete-results d-flex align-items-center"
+      :class="{'hover-background': result.hover}"
+      @click="select(result)"
+      @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
+        v-if="result.username"
+        class="username ml-2"
+        :class="{'hover-foreground': result.hover}"
+      >@{{ result.username }}</span>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/chat/chatCard.vue b/website/client/src/components/chat/chatCard.vue
index 75fd43fc29..ba2fba54fb 100644
--- a/website/client/src/components/chat/chatCard.vue
+++ b/website/client/src/components/chat/chatCard.vue
@@ -1,37 +1,107 @@
-<template lang="pug">
-div
-  .mentioned-icon(v-if='isUserMentioned')
-  .message-hidden(v-if='!inbox && user.contributor.admin && msg.flagCount') {{flagCountDescription}}
-  .card-body
-    user-link(:userId="msg.uuid", :name="msg.user", :backer="msg.backer", :contributor="msg.contributor")
-    p.time
-      span.mr-1(v-if="msg.username") @{{ msg.username }}
-      span.mr-1(v-if="msg.username") •
-      span(v-b-tooltip="", :title="msg.timestamp | date") {{ msg.timestamp | timeAgo }}&nbsp;
-      span(v-if="msg.client && user.contributor.level >= 4")  ({{ msg.client }})
-    .text(v-html='atHighlight(parseMarkdown(msg.text))')
-    .reported(v-if="isMessageReported && (inbox === true)")
-      span(v-once) {{ $t('reportedMessage')}}
-      br
-      span(v-once) {{ $t('canDeleteNow') }}
-    hr
-    .d-flex(v-if='msg.id')
-      .action.d-flex.align-items-center(v-if='!inbox', @click='copyAsTodo(msg)')
-        .svg-icon(v-html="icons.copy")
-        div {{$t('copyAsTodo')}}
-      .action.d-flex.align-items-center(v-if='(inbox || (user.flags.communityGuidelinesAccepted && msg.uuid !== "system")) && (!isMessageReported || user.contributor.admin)', @click='report(msg)')
-        .svg-icon(v-html="icons.report", v-once)
-        div(v-once) {{$t('report')}}
-      .action.d-flex.align-items-center(v-if='msg.uuid === user._id || inbox || user.contributor.admin', @click='remove()')
-        .svg-icon(v-html="icons.delete", v-once)
-        div(v-once) {{$t('delete')}}
-      .ml-auto.d-flex(v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}", v-if='!inbox')
-        .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount > 0', :class='{activeLike: msg.likes[user._id]}')
-          .svg-icon(v-html="icons.liked", :title='$t("liked")')
-          | +{{ likeCount }}
-        .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount === 0', :class='{activeLike: msg.likes[user._id]}')
-          .svg-icon(v-html="icons.like", :title='$t("like")')
-      span(v-if='!msg.likes[user._id] && !inbox') {{ $t('like') }}
+<template>
+  <div>
+    <div
+      v-if="isUserMentioned"
+      class="mentioned-icon"
+    ></div><div
+      v-if="!inbox && user.contributor.admin && msg.flagCount"
+      class="message-hidden"
+    >
+      {{ flagCountDescription }}
+    </div><div class="card-body">
+      <user-link
+        :user-id="msg.uuid"
+        :name="msg.user"
+        :backer="msg.backer"
+        :contributor="msg.contributor"
+      /><p class="time">
+        <span
+          v-if="msg.username"
+          class="mr-1"
+        >@{{ msg.username }}</span><span
+          v-if="msg.username"
+          class="mr-1"
+        >•</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
+        class="text"
+        v-html="atHighlight(parseMarkdown(msg.text))"
+      ></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
+        v-if="msg.id"
+        class="d-flex"
+      >
+        <div
+          v-if="!inbox"
+          class="action d-flex align-items-center"
+          @click="copyAsTodo(msg)"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.copy"
+          ></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)"
+        >
+          <div
+            v-once
+            class="svg-icon"
+            v-html="icons.report"
+          ></div><div v-once>
+            {{ $t('report') }}
+          </div>
+        </div><div
+          v-if="msg.uuid === user._id || inbox || user.contributor.admin"
+          class="action d-flex align-items-center"
+          @click="remove()"
+        >
+          <div
+            v-once
+            class="svg-icon"
+            v-html="icons.delete"
+          ></div><div v-once>
+            {{ $t('delete') }}
+          </div>
+        </div><div
+          v-if="!inbox"
+          v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}"
+          class="ml-auto d-flex"
+        >
+          <div
+            v-if="likeCount > 0"
+            class="action d-flex align-items-center mr-0"
+            :class="{activeLike: msg.likes[user._id]}"
+            @click="like()"
+          >
+            <div
+              class="svg-icon"
+              :title="$t('liked')"
+              v-html="icons.liked"
+            ></div>+{{ likeCount }}
+          </div><div
+            v-if="likeCount === 0"
+            class="action d-flex align-items-center mr-0"
+            :class="{activeLike: msg.likes[user._id]}"
+            @click="like()"
+          >
+            <div
+              class="svg-icon"
+              :title="$t('like')"
+              v-html="icons.like"
+            ></div>
+          </div>
+        </div><span v-if="!msg.likes[user._id] && !inbox">{{ $t('like') }}</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/chat/chatMessages.vue b/website/client/src/components/chat/chatMessages.vue
index 0b59da5d15..bc7fe160ed 100644
--- a/website/client/src/components/chat/chatMessages.vue
+++ b/website/client/src/components/chat/chatMessages.vue
@@ -1,53 +1,93 @@
-<template lang="pug">
-.container-fluid(ref="container")
-  .row
-    .col-12
-      copy-as-todo-modal(:group-type='groupType', :group-name='groupName', :group-id='groupId')
-  .row.loadmore
-    div(v-if="canLoadMore")
-      .loadmore-divider
-      button.btn.btn-secondary(@click='triggerLoad()') {{ $t('loadEarlierMessages') }}
-      .loadmore-divider
-    h2.col-12.loading(v-show="isLoading") {{ $t('loading') }}
-  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
-    .d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
-      avatar.avatar-left(
-        v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
-        :member="msg.userStyles || cachedProfileData[msg.uuid]",
-        :avatarOnly="true",
-        :overrideTopPadding='"14px"',
-        :hideClassBadge='true',
-        @click.native="showMemberModal(msg.uuid)",
-        :class='{"inbox-avatar-left": inbox}'
-      )
-      .card(:class='{"col-10": inbox}')
-        chat-card(
-          :msg='msg',
-          :inbox='inbox',
-          :groupId='groupId',
-          @message-liked='messageLiked',
-          @message-removed='messageRemoved',
-          @show-member-modal='showMemberModal',
-          @chat-card-mounted='itemWasMounted')
-    .d-flex(v-if='user._id === msg.uuid', :class='{"flex-grow-1": inbox}')
-      .card(:class='{"col-10": inbox}')
-        chat-card(
-          :msg='msg',
-          :inbox='inbox',
-          :groupId='groupId',
-          @message-liked='messageLiked',
-          @message-removed='messageRemoved',
-          @show-member-modal='showMemberModal',
-          @chat-card-mounted='itemWasMounted')
-      avatar(
-        v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
-        :member="msg.userStyles || cachedProfileData[msg.uuid]",
-        :avatarOnly="true",
-        :hideClassBadge='true',
-        :overrideTopPadding='"14px"',
-        @click.native="showMemberModal(msg.uuid)",
-        :class='{"inbox-avatar-right": inbox}'
-      )
+<template>
+  <div
+    ref="container"
+    class="container-fluid"
+  >
+    <div class="row">
+      <div class="col-12">
+        <copy-as-todo-modal
+          :group-type="groupType"
+          :group-name="groupName"
+          :group-id="groupId"
+        />
+      </div>
+    </div><div class="row loadmore">
+      <div v-if="canLoadMore">
+        <div class="loadmore-divider"></div><button
+          class="btn btn-secondary"
+          @click="triggerLoad()"
+        >
+          {{ $t('loadEarlierMessages') }}
+        </button><div class="loadmore-divider"></div>
+      </div><h2
+        v-show="isLoading"
+        class="col-12 loading"
+      >
+        {{ $t('loading') }}
+      </h2>
+    </div><div
+      v-for="(msg, index) in messages"
+      v-if="chat && canViewFlag(msg)"
+      :class="{row: inbox}"
+    >
+      <div
+        v-if="user._id !== msg.uuid"
+        class="d-flex"
+        :class="{'flex-grow-1': inbox}"
+      >
+        <avatar
+          v-if="msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)"
+          class="avatar-left"
+          :member="msg.userStyles || cachedProfileData[msg.uuid]"
+          :avatar-only="true"
+          :override-top-padding="'14px'"
+          :hide-class-badge="true"
+          :class="{'inbox-avatar-left': inbox}"
+          @click.native="showMemberModal(msg.uuid)"
+        /><div
+          class="card"
+          :class="{'col-10': inbox}"
+        >
+          <chat-card
+            :msg="msg"
+            :inbox="inbox"
+            :group-id="groupId"
+            @message-liked="messageLiked"
+            @message-removed="messageRemoved"
+            @show-member-modal="showMemberModal"
+            @chat-card-mounted="itemWasMounted"
+          />
+        </div>
+      </div><div
+        v-if="user._id === msg.uuid"
+        class="d-flex"
+        :class="{'flex-grow-1': inbox}"
+      >
+        <div
+          class="card"
+          :class="{'col-10': inbox}"
+        >
+          <chat-card
+            :msg="msg"
+            :inbox="inbox"
+            :group-id="groupId"
+            @message-liked="messageLiked"
+            @message-removed="messageRemoved"
+            @show-member-modal="showMemberModal"
+            @chat-card-mounted="itemWasMounted"
+          />
+        </div><avatar
+          v-if="msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)"
+          :member="msg.userStyles || cachedProfileData[msg.uuid]"
+          :avatar-only="true"
+          :hide-class-badge="true"
+          :override-top-padding="'14px'"
+          :class="{'inbox-avatar-right': inbox}"
+          @click.native="showMemberModal(msg.uuid)"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/chat/copyAsTodoModal.vue b/website/client/src/components/chat/copyAsTodoModal.vue
index deb19024df..494a983c97 100644
--- a/website/client/src/components/chat/copyAsTodoModal.vue
+++ b/website/client/src/components/chat/copyAsTodoModal.vue
@@ -1,14 +1,41 @@
-<template lang="pug">
-  b-modal#copyAsTodo(:title="$t('copyMessageAsToDo')", :hide-footer="true", size='md')
-    .form-group
-      input.form-control(type='text', v-model='task.text')
-    .form-group
-      textarea.form-control(rows='5', v-model='task.notes' focus-element='true')
-    hr
-    task(v-if='task._id', :isUser="isUser", :task="task")
-    .modal-footer
-      button.btn.btn-secondary(@click='close()') {{ $t('close') }}
-      button.btn.btn-primary(@click='saveTodo()') {{ $t('submit') }}
+<template>
+  <b-modal
+    id="copyAsTodo"
+    :title="$t('copyMessageAsToDo')"
+    :hide-footer="true"
+    size="md"
+  >
+    <div class="form-group">
+      <input
+        v-model="task.text"
+        class="form-control"
+        type="text"
+      >
+    </div><div class="form-group">
+      <textarea
+        v-model="task.notes"
+        class="form-control"
+        rows="5"
+        focus-element="true"
+      ></textarea>
+    </div><hr><task
+      v-if="task._id"
+      :is-user="isUser"
+      :task="task"
+    /><div class="modal-footer">
+      <button
+        class="btn btn-secondary"
+        @click="close()"
+      >
+        {{ $t('close') }}
+      </button><button
+        class="btn btn-primary"
+        @click="saveTodo()"
+      >
+        {{ $t('submit') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <script>
diff --git a/website/client/src/components/chat/reportFlagModal.vue b/website/client/src/components/chat/reportFlagModal.vue
index 0f7478995b..c58463d4c1 100644
--- a/website/client/src/components/chat/reportFlagModal.vue
+++ b/website/client/src/components/chat/reportFlagModal.vue
@@ -1,19 +1,36 @@
-<template lang="pug">
-  b-modal#report-flag(:title='$t("abuseFlagModalHeading")', size='md', :hide-footer='true')
-    .modal-body
-      strong(v-html="$t('abuseFlagModalHeading', reportData)")
-      blockquote
-        div(v-markdown='abuseObject.text')
-      div
-        strong {{$t('whyReportingPost')}}
-        span.optional {{$t('optional')}}
-        textarea.form-control(v-model='reportComment', :placeholder='$t("whyReportingPostPlaceholder")')
-      small(v-html="$t('abuseFlagModalBody', abuseFlagModalBody)")
-    .footer.text-center
-      button.pull-left.btn.btn-danger(@click='clearFlagCount()', v-if='user.contributor.admin && abuseObject.flagCount > 0')
-        | Reset Flag Count
-      a.cancel-link(@click.prevent='close()') {{ $t('cancel') }}
-      button.btn.btn-danger(@click='reportAbuse()') {{ $t('report') }}
+<template>
+  <b-modal
+    id="report-flag"
+    :title="$t('abuseFlagModalHeading')"
+    size="md"
+    :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
+          v-model="reportComment"
+          class="form-control"
+          :placeholder="$t('whyReportingPostPlaceholder')"
+        ></textarea>
+      </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
+        class="cancel-link"
+        @click.prevent="close()"
+      >{{ $t('cancel') }}</a><button
+        class="btn btn-danger"
+        @click="reportAbuse()"
+      >
+        {{ $t('report') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style>
diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index 6020414b13..cbde9a9d7a 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -1,259 +1,7 @@
 <!-- eslint-disable -->
-<template lang="pug">
-<!-- eslint-disable -->
-b-modal#avatar-modal(
-  title="",
-  :size='editing ? "lg" : "md"',
-  :hide-header='true',
-  :hide-footer='true',
-  :modal-class="{'page-2':modalPage > 1 && !editing}",
-)
-  .section.row.welcome-section(v-if='modalPage === 1 && !editing')
-    .col-6.offset-3.text-center
-      h3(v-once) {{$t('welcomeTo')}}
-      .svg-icon.logo(v-html='icons.logoPurple')
-
-  .avatar-section.row(v-if='modalPage > 1', :class='{"page-2": modalPage === 2}')
-    .col-6.offset-3
-      .user-creation-bg(v-if='!editing')
-      avatar(:member='user', :avatarOnly='!editing', :class='{"edit-avatar": editing}')
-
-  .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')}}
-    #options-nav.container.section.text-center.customize-menu
-      .row
-        .menu-container(
-          @click='changeTopPage("body", "size")',
-          :class='{"col-3": !editing, "col-2 offset-1": editing, active: activeTopPage === "body"}'
-        )
-          .menu-item
-            .svg-icon(v-html='icons.bodyIcon')
-          strong(v-once) {{$t('bodyBody')}}
-          .indicator
-        .menu-container(
-          @click='changeTopPage("skin", "color")',
-          :class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "skin"}'
-        )
-          .menu-item
-            .svg-icon(v-html='icons.skinIcon')
-          strong(v-once) {{$t('skin')}}
-          .indicator
-        .menu-container(
-          @click='changeTopPage("hair", "color")',
-          :class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "hair"}'
-        )
-          .menu-item
-            .svg-icon(v-html='icons.hairIcon')
-          strong(v-once) {{$t('hair')}}
-          .indicator
-        .menu-container(
-          @click='changeTopPage("extra", "glasses")',
-          :class='{"col-3": !editing, "col-2": editing, active: activeTopPage === "extra"}'
-        )
-          .menu-item
-            .svg-icon(v-html='icons.accessoriesIcon')
-          strong(v-once) {{$t('extra')}}
-          .indicator
-        .menu-container.col-2(
-          @click='changeTopPage("backgrounds", "2019")',
-          v-if='editing',
-          :class='{active: activeTopPage === "backgrounds"}'
-        )
-          .menu-item
-            .svg-icon(v-html='icons.backgroundsIcon')
-          strong(v-once) {{$t('backgrounds')}}
-          .indicator
-
-    body-settings(
-      v-if='activeTopPage === "body"',
-      :editing="editing",
-    )
-
-    skin-settings(
-      v-if='activeTopPage === "skin"',
-      :editing="editing",
-    )
-
-    hairSettings(
-      v-if='activeTopPage === "hair"',
-      :editing="editing"
-    )
-
-    extraSettings(
-      v-if='activeTopPage === "extra"',
-      :editing="editing"
-    )
-
-    #backgrounds.section.container.customize-section(v-if='activeTopPage === "backgrounds"')
-      .row.title-row
-        toggle-switch.backgroundFilterToggle(
-          :label="'Hide locked backgrounds'",
-          v-model='filterBackgrounds',
-        )
-      .row.text-center.title-row(v-if='!filterBackgrounds')
-        strong {{backgroundShopSets[0].text}}
-      .row.title-row(v-if='!filterBackgrounds')
-        .col-12(
-          v-if='showPlainBackgroundBlurb(backgroundShopSets[0].identifier, backgroundShopSets[0].items)'
-        ) {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
-        .col-2(v-for='bg in backgroundShopSets[0].items',
-          @click='unlock("background." + bg.key)',
-          :popover-title='bg.text',
-          :popover='bg.notes',
-          popover-trigger='mouseenter')
-          .incentive-background(:class='[`background_${bg.key}`]')
-            .small-rectangle
-      sub-menu.text-center(
-        :items="bgSubMenuItems",
-        :activeSubPage="activeSubPage",
-        @changeSubPage="changeSubPage($event)"
-      )
-      .row.customize-menu(v-if='!filterBackgrounds' v-for='(sets, key) in backgroundShopSetsByYear')
-        .row.background-set(v-for='set in sets', v-if='activeSubPage === key')
-          .col-8.offset-2.text-center.set-title
-            strong {{set.text}}
-          .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'
-          )
-            .background(:class='[`background_${bg.key}`, backgroundLockedStatus(bg.key)]')
-            i.glyphicon.glyphicon-lock(v-if='!user.purchased.background[bg.key]')
-            .purchase-background.single(v-if='!user.purchased.background[bg.key]')
-              .svg-icon.gem(v-html='icons.gem')
-              span.price 7
-            span.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.svg-icon.inline.icon-12.color(v-html="icons.pin")
-          .purchase-background.set(
-            v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"',
-            @click='unlock(setKeys("background", set.items))'
-          )
-            span.label {{ $t('purchaseAll') }}
-            .svg-icon.gem(v-html='icons.gem')
-            span.price 15
-      .row.customize-menu(v-if='filterBackgrounds')
-        .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')
-          .background(:class='[`background_${bg.key}`, backgroundLockedStatus(bg.key)]'
-          )
-
-  .container.interests-section(v-if='modalPage === 3 && !editing')
-    .section.row
-      .col-12.text-center
-        h2 {{ $t('wantToWorkOn') }}
-    .section.row
-      .col-6
-        .task-option
-          .custom-control.custom-checkbox
-            input.custom-control-input#work(type="checkbox", value='work', v-model='taskCategories')
-            label.custom-control-label(v-once, for="work") {{ $t('work') }}
-        .task-option
-          .custom-control.custom-checkbox
-            input.custom-control-input#excercise(
-              type="checkbox",
-              value='exercise',
-              v-model='taskCategories'
-            )
-            label.custom-control-label(v-once, for="excercise") {{ $t('exercise') }}
-        .task-option
-          .custom-control.custom-checkbox
-            input.custom-control-input#health_wellness(
-              type="checkbox",
-              value='health_wellness',
-              v-model='taskCategories'
-            )
-            label.custom-control-label(v-once, for="health_wellness") {{ $t('health_wellness') }}
-        .task-option
-          .custom-control.custom-checkbox
-            input.custom-control-input#school(
-              type="checkbox",
-              value='school',
-              v-model='taskCategories'
-            )
-            label.custom-control-label(v-once, for="school") {{ $t('school') }}
-      .col-6
-        .task-option
-          .custom-control.custom-checkbox
-            input.custom-control-input#chores(
-              type="checkbox",
-              value='chores',
-              v-model='taskCategories'
-            )
-            label.custom-control-label(v-once, for="chores") {{ $t('chores') }}
-        .task-option
-          .custom-control.custom-checkbox
-            input.custom-control-input#creativity(
-              type="checkbox",
-              value='creativity',
-              v-model='taskCategories'
-            )
-            label.custom-control-label(v-once, for="creativity") {{ $t('creativity') }}
-        .task-option
-          .custom-control.custom-checkbox
-            input.custom-control-input#self_care(
-              type="checkbox",
-              value='self_care',
-              v-model='taskCategories'
-            )
-            label.custom-control-label(v-once, for="self_care") {{ $t('self_care') }}
-
-  .section.d-flex.justify-content-center.justin-outer-section(
-    :class='{top: modalPage > 1}',
-    v-if='!editing'
-  )
-    .justin-section.d-flex.align-items-center
-      .featured-label
-        span.rectangle
-        span.text Justin
-        span.rectangle
-      .justin-message
-        .corner-decoration(:style="{top: '-2px', right: '-2px'}")
-        .corner-decoration(:style="{top: '-2px', left: '-2px'}")
-        .corner-decoration(:style="{bottom: '-2px', right: '-2px'}")
-        .corner-decoration(:style="{bottom: '-2px', left: '-2px'}")
-        div(v-if='modalPage === 1')
-          p(v-once, v-html='$t("justinIntroMessage1")')
-          p(v-once) {{ $t('justinIntroMessageUsername') }}
-        div(v-if='modalPage === 2')
-          p {{ $t('justinIntroMessageAppearance') }}
-        div(v-if='modalPage === 3')
-          p(v-once) {{ $t('justinIntroMessage3') }}
-      .npc-justin-textbox
-  .section.mr-5.ml-5.first-page-footer(v-if='modalPage === 1')
-    username-form(@usernameConfirmed='modalPage += 1', :avatarIntro='true')
-    .small.text-center(v-html="$t('usernameTOSRequirements')")
-
-  .section.container.footer(v-if='!editing && !(modalPage === 1)')
-    .footer-left
-      div.prev-outer(v-if='modalPage > 1', @click='prev()')
-        .prev-arrow.svg-icon(v-html='icons.arrowLeft')
-        .prev(v-once) {{ $t('prev') }}
-    .footer-center.text-center.circles
-      .circle(:class="{active: modalPage === 1}")
-      .circle(:class="{active: modalPage === 2}")
-      .circle(:class="{active: modalPage === 3}")
-    .footer-right
-      div.next-outer(v-if='modalPage < 3', @click='next()')
-        .next(v-once) {{$t('next')}}
-        .next-arrow.svg-icon(v-html='icons.arrowRight')
-      div.next-outer(
-        v-if='modalPage === 3 && !loading',
-        @click='done()',
-        :class="{disabled: taskCategories.length === 0}"
-      )
-        .next(v-once) {{$t('finish')}}
-        .next-arrow.svg-icon(v-html='icons.arrowRight')
+<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>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/emptyView.vue b/website/client/src/components/emptyView.vue
index e95e4f5f2a..2f97fe30a6 100644
--- a/website/client/src/components/emptyView.vue
+++ b/website/client/src/components/emptyView.vue
@@ -1,4 +1,3 @@
-<template lang="pug">
-// Container component used when you only need an empty view to support children routes
-router-view
+<template>
+  <!-- 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 af4f258720..ee69b72da3 100644
--- a/website/client/src/components/group-plans/billing.vue
+++ b/website/client/src/components/group-plans/billing.vue
@@ -1,35 +1,52 @@
-<template lang="pug">
-.row.standard-page(v-if='groupIsSubscribed && isLeader')
-  .col-12.col-md-6.offset-md-3
-    table.table.alert.alert-info
-      tr(v-if='group.purchased.plan.dateTerminated')
-        td.alert.alert-warning
-          span.noninteractive-button.btn-danger {{ $t('canceledGroupPlan') }}
-          i.glyphicon.glyphicon-time {{ $t('groupPlanCanceled') }}
-          strong {{dateTerminated}}
-      tr(v-if='!group.purchased.plan.dateTerminated')
-        td
-          h3 {{ $t('paymentDetails') }}
-          p(v-if='group.purchased.plan.planId') {{ $t('groupSubscriptionPrice') }}
-      tr(v-if='group.purchased.plan.extraMonths')
-        td
-          span.glyphicon.glyphicon-credit-card
-          | {{ $t('purchasedGroupPlanPlanExtraMonths', purchasedGroupPlanPlanExtraMonths) }}
-      tr(v-if='group.purchased.plan.consecutive.count || group.purchased.plan.consecutive.offset')
-        td
-          span.glyphicon.glyphicon-forward
-          | {{ $t('consecutiveSubscription') }}
-          ul.list-unstyled
-            li {{ $t('consecutiveMonths') }} {{group.purchased.plan.consecutive.count + group.purchased.plan.consecutive.offset}}
-            li {{ $t('gemCapExtra') }} {{group.purchased.plan.consecutive.gemCapExtra}}
-                li {{ $t('mysticHourglasses') }} {{group.purchased.plan.consecutive.trinkets}}
-  .col-12.col-md-6.offset-md-3
-    button.btn.btn-success(class='btn-success', v-if='group.purchased.plan.dateTerminated', @click='upgradeGroup()')
-      | {{ $t('upgrade') }}
-    .btn.btn-primary(v-if='!group.purchased.plan.dateTerminated && group.purchased.plan.paymentMethod === "Stripe"',
-      @click='showStripeEdit({groupId: group.id})') {{ $t('subUpdateCard') }}
-    .btn.btn-sm.btn-danger(v-if='!group.purchased.plan.dateTerminated',
-      @click='cancelSubscriptionConfirm({group: group})') {{ $t('cancelGroupSub') }}
+<template>
+  <div
+    v-if="groupIsSubscribed && isLeader"
+    class="row standard-page"
+  >
+    <div class="col-12 col-md-6 offset-md-3">
+      <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>
+          </td>
+        </tr><tr v-if="!group.purchased.plan.dateTerminated">
+          <td>
+            <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">
+          <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>
+            </ul>
+          </td>
+        </tr>
+      </table>
+    </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
+        v-if="!group.purchased.plan.dateTerminated && group.purchased.plan.paymentMethod === 'Stripe'"
+        class="btn btn-primary"
+        @click="showStripeEdit({groupId: group.id})"
+      >
+        {{ $t('subUpdateCard') }}
+      </div><div
+        v-if="!group.purchased.plan.dateTerminated"
+        class="btn btn-sm btn-danger"
+        @click="cancelSubscriptionConfirm({group: group})"
+      >
+        {{ $t('cancelGroupSub') }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -52,7 +69,7 @@ export default {
       return this.user._id === this.group.leader._id;
     },
     groupIsSubscribed () {
-      return this.group.purchased && this.group.purchased.plan 
+      return this.group.purchased && this.group.purchased.plan
         && this.group.purchased.plan.customerId;
     },
     dateTerminated () {
diff --git a/website/client/src/components/group-plans/createGroupModalPages.vue b/website/client/src/components/group-plans/createGroupModalPages.vue
index 4d15f5cd8e..66c8ab1fbb 100644
--- a/website/client/src/components/group-plans/createGroupModalPages.vue
+++ b/website/client/src/components/group-plans/createGroupModalPages.vue
@@ -1,32 +1,92 @@
-<template lang="pug">
-.create-group-modal-pages
-  .col-12(v-if='activePage === PAGES.CREATE_GROUP')
-    h2 {{ $t('nameYourGroup') }}
-    .form-group
-      label.control-label(for='new-group-name') {{ $t('name') }}
-      input.form-control#new-group-name.input-medium.option-content(required, type='text', :placeholder="$t('exampleGroupName')", v-model='newGroup.name')
-    .form-group
-      label(for='new-group-description') {{ $t('description') }}
-      textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('exampleGroupDesc')", v-model='newGroup.description')
-    .form-group.text-left(v-if='newGroup.type === "guild"')
-      .custom-control.custom-radio
-        input.custom-control-input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
-        label.custom-control-label {{ $t('thisGroupInviteOnly') }}
-    .form-group.text-left
-      .custom-control.custom-checkbox
-        input.custom-control-input(type='checkbox', v-model='newGroup.leaderOnly.challenges' id='create-group-leaderOnlyChallenges-checkbox')
-        label.custom-control-label(for='create-group-leaderOnlyChallenges-checkbox') {{ $t('leaderOnlyChallenges') }}
-    .form-group(v-if='newGroup.type === "party"')
-      button.btn.btn-secondary.form-control(@click='createGroup()', :value="$t('createGroupPlan')")
-    .form-group
-      button.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('createGroupPlan') }}
-  .col-12(v-if='activePage === PAGES.PAY')
-    h2 {{ $t('choosePaymentMethod') }}
-    .payments-column
-      button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)')
-        .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
-        | {{ $t('card') }}
-      amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
+<template>
+  <div class="create-group-modal-pages">
+    <div
+      v-if="activePage === PAGES.CREATE_GROUP"
+      class="col-12"
+    >
+      <h2>{{ $t('nameYourGroup') }}</h2><div class="form-group">
+        <label
+          class="control-label"
+          for="new-group-name"
+        >{{ $t('name') }}</label><input
+          id="new-group-name"
+          v-model="newGroup.name"
+          class="form-control input-medium option-content"
+          required="required"
+          type="text"
+          :placeholder="$t('exampleGroupName')"
+        >
+      </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
+        v-if="newGroup.type === 'guild'"
+        class="form-group text-left"
+      >
+        <div class="custom-control custom-radio">
+          <input
+            v-model="newGroup.privacy"
+            class="custom-control-input"
+            type="radio"
+            name="new-group-privacy"
+            value="private"
+          ><label class="custom-control-label">{{ $t('thisGroupInviteOnly') }}</label>
+        </div>
+      </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
+            class="custom-control-label"
+            for="create-group-leaderOnlyChallenges-checkbox"
+          >{{ $t('leaderOnlyChallenges') }}</label>
+        </div>
+      </div><div
+        v-if="newGroup.type === 'party'"
+        class="form-group"
+      >
+        <button
+          class="btn btn-secondary form-control"
+          :value="$t('createGroupPlan')"
+          @click="createGroup()"
+        ></button>
+      </div><div class="form-group">
+        <button
+          class="btn btn-primary btn-lg btn-block"
+          :disabled="!newGroupIsReady"
+          @click="createGroup()"
+        >
+          {{ $t('createGroupPlan') }}
+        </button>
+      </div>
+    </div><div
+      v-if="activePage === PAGES.PAY"
+      class="col-12"
+    >
+      <h2>{{ $t('choosePaymentMethod') }}</h2><div class="payments-column">
+        <button
+          class="purchase btn btn-primary payment-button payment-item"
+          @click="pay(PAYMENTS.STRIPE)"
+        >
+          <div
+            class="svg-icon credit-card-icon"
+            v-html="icons.creditCardIcon"
+          ></div>{{ $t('card') }}
+        </button><amazon-button
+          class="payment-item"
+          :amazon-data="pay(PAYMENTS.AMAZON)"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/group-plans/groupPlanOverviewModal.vue b/website/client/src/components/group-plans/groupPlanOverviewModal.vue
index 55219b39fe..4b59dba838 100644
--- a/website/client/src/components/group-plans/groupPlanOverviewModal.vue
+++ b/website/client/src/components/group-plans/groupPlanOverviewModal.vue
@@ -1,66 +1,186 @@
-<template lang="pug">
-b-modal#group-plan-overview(title="Empty", size='lg', hide-footer=true, @shown='shown()')
-  .header-wrap.text-center(slot="modal-header")
-    h2(v-once) {{ $t('gettingStarted') }}
-    p(v-once) {{ $t('congratsOnGroupPlan') }}
-  .row
-    .col-12
-      .card(:class='{expanded: expandedQuestions.question1}')
-        .question-head
-          .q Q.
-          .title {{ $t('whatsIncludedGroup') }}
-          .arrow.float-right(@click='toggle("question1")')
-            .svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question1')
-            .svg-icon(v-html="icons.downIcon", v-else)
-        .question-body(v-if='expandedQuestions.question1')
-          p {{ $t('whatsIncludedGroupDesc') }}
-    .col-12
-      .card(:class='{expanded: expandedQuestions.question2}')
-        .question-head
-          .q Q.
-          .title {{ $t('howDoesBillingWork') }}
-          .arrow.float-right(@click='toggle("question2")')
-            .svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question2')
-            .svg-icon(v-html="icons.downIcon", v-else)
-        .question-body(v-if='expandedQuestions.question2')
-          p {{ $t('howDoesBillingWorkDesc') }}
-    .col-12
-      .card(:class='{expanded: expandedQuestions.question3}')
-        .question-head
-          .q Q.
-          .title {{ $t('howToAssignTask') }}
-          .arrow.float-right(@click='toggle("question3")')
-            .svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question3')
-            .svg-icon(v-html="icons.downIcon", v-else)
-        .question-body(v-if='expandedQuestions.question3')
-          p {{ $t('howToAssignTaskDesc') }}
-          .assign-tasks.image-example
-    .col-12
-      .card(:class='{expanded: expandedQuestions.question4}')
-        .question-head
-          .q Q.
-          .title {{ $t('howToRequireApproval') }}
-          .arrow.float-right(@click='toggle("question4")')
-            .svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question4')
-            .svg-icon(v-html="icons.downIcon", v-else)
-        .question-body(v-if='expandedQuestions.question4')
-          p {{ $t('howToRequireApprovalDesc') }}
-          .requires-approval.image-example
-          p {{ $t('howToRequireApprovalDesc2') }}
-          .approval-requested.image-example
-    .col-12
-      .card(:class='{expanded: expandedQuestions.question5}')
-        .question-head
-          .q Q.
-          .title {{ $t('whatIsGroupManager') }}
-          .arrow.float-right(@click='toggle("question5")')
-            .svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question5')
-            .svg-icon(v-html="icons.downIcon", v-else)
-        .question-body(v-if='expandedQuestions.question5')
-          p {{ $t('whatIsGroupManagerDesc') }}
-          .promote-leader.image-example
-    .col-12.text-center
-      button.btn.btn-primary.close-button(@click='close()') {{ $t('goToTaskBoard') }}
+<template>
+  <b-modal
+    id="group-plan-overview"
+    title="Empty"
+    size="lg"
+    hide-footer="hide-footer"
+    @shown="shown()"
+  >
+    <div
+      slot="modal-header"
+      class="header-wrap text-center"
+    >
+      <h2 v-once>
+        {{ $t('gettingStarted') }}
+      </h2><p v-once>
+        {{ $t('congratsOnGroupPlan') }}
+      </p>
+    </div><div class="row">
+      <div class="col-12">
+        <div
+          class="card"
+          :class="{expanded: expandedQuestions.question1}"
+        >
+          <div class="question-head">
+            <div class="q">
+              Q.
+            </div><div class="title">
+              {{ $t('whatsIncludedGroup') }}
+            </div><div
+              class="arrow float-right"
+              @click="toggle('question1')"
+            >
+              <div
+                v-if="expandedQuestions.question1"
+                class="svg-icon"
+                v-html="icons.upIcon"
+              ></div><div
+                v-else
+                class="svg-icon"
+                v-html="icons.downIcon"
+              ></div>
+            </div>
+          </div><div
+            v-if="expandedQuestions.question1"
+            class="question-body"
+          >
+            <p>{{ $t('whatsIncludedGroupDesc') }}</p>
+          </div>
+        </div>
+      </div><div class="col-12">
+        <div
+          class="card"
+          :class="{expanded: expandedQuestions.question2}"
+        >
+          <div class="question-head">
+            <div class="q">
+              Q.
+            </div><div class="title">
+              {{ $t('howDoesBillingWork') }}
+            </div><div
+              class="arrow float-right"
+              @click="toggle('question2')"
+            >
+              <div
+                v-if="expandedQuestions.question2"
+                class="svg-icon"
+                v-html="icons.upIcon"
+              ></div><div
+                v-else
+                class="svg-icon"
+                v-html="icons.downIcon"
+              ></div>
+            </div>
+          </div><div
+            v-if="expandedQuestions.question2"
+            class="question-body"
+          >
+            <p>{{ $t('howDoesBillingWorkDesc') }}</p>
+          </div>
+        </div>
+      </div><div class="col-12">
+        <div
+          class="card"
+          :class="{expanded: expandedQuestions.question3}"
+        >
+          <div class="question-head">
+            <div class="q">
+              Q.
+            </div><div class="title">
+              {{ $t('howToAssignTask') }}
+            </div><div
+              class="arrow float-right"
+              @click="toggle('question3')"
+            >
+              <div
+                v-if="expandedQuestions.question3"
+                class="svg-icon"
+                v-html="icons.upIcon"
+              ></div><div
+                v-else
+                class="svg-icon"
+                v-html="icons.downIcon"
+              ></div>
+            </div>
+          </div><div
+            v-if="expandedQuestions.question3"
+            class="question-body"
+          >
+            <p>{{ $t('howToAssignTaskDesc') }}</p><div class="assign-tasks image-example"></div>
+          </div>
+        </div>
+      </div><div class="col-12">
+        <div
+          class="card"
+          :class="{expanded: expandedQuestions.question4}"
+        >
+          <div class="question-head">
+            <div class="q">
+              Q.
+            </div><div class="title">
+              {{ $t('howToRequireApproval') }}
+            </div><div
+              class="arrow float-right"
+              @click="toggle('question4')"
+            >
+              <div
+                v-if="expandedQuestions.question4"
+                class="svg-icon"
+                v-html="icons.upIcon"
+              ></div><div
+                v-else
+                class="svg-icon"
+                v-html="icons.downIcon"
+              ></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>
+          </div>
+        </div>
+      </div><div class="col-12">
+        <div
+          class="card"
+          :class="{expanded: expandedQuestions.question5}"
+        >
+          <div class="question-head">
+            <div class="q">
+              Q.
+            </div><div class="title">
+              {{ $t('whatIsGroupManager') }}
+            </div><div
+              class="arrow float-right"
+              @click="toggle('question5')"
+            >
+              <div
+                v-if="expandedQuestions.question5"
+                class="svg-icon"
+                v-html="icons.upIcon"
+              ></div><div
+                v-else
+                class="svg-icon"
+                v-html="icons.downIcon"
+              ></div>
+            </div>
+          </div><div
+            v-if="expandedQuestions.question5"
+            class="question-body"
+          >
+            <p>{{ $t('whatIsGroupManagerDesc') }}</p><div class="promote-leader image-example"></div>
+          </div>
+        </div>
+      </div><div class="col-12 text-center">
+        <button
+          class="btn btn-primary close-button"
+          @click="close()"
+        >
+          {{ $t('goToTaskBoard') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style>
diff --git a/website/client/src/components/group-plans/index.vue b/website/client/src/components/group-plans/index.vue
index 7d8fc5508a..2042849bd5 100644
--- a/website/client/src/components/group-plans/index.vue
+++ b/website/client/src/components/group-plans/index.vue
@@ -1,19 +1,33 @@
-<template lang="pug">
-.row
-  group-form-modal
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'groupPlanDetailTaskInformation', params: {groupId}}",
-      exact, :class="{'active': $route.name === 'groupPlanDetailTaskInformation'}") {{ $t('groupTaskBoard') }}
-    router-link.nav-link(:to="{name: 'groupPlanDetailInformation', params: {groupId}}",
-      exact, :class="{'active': $route.name === 'groupPlanDetailInformation'}") {{ $t('groupInformation') }}
-    router-link.nav-link(
-      v-if='isLeader',
-      :to="{name: 'groupPlanBilling', params: {groupId}}",
-      exact,
-      :class="{'active': $route.name === 'groupPlanBilling'}") {{ $t('groupBilling') }}
-
-  .col-12
-    router-view
+<template>
+  <div class="row">
+    <group-form-modal /><secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'groupPlanDetailTaskInformation', params: {groupId}}"
+        exact="exact"
+        :class="{'active': $route.name === 'groupPlanDetailTaskInformation'}"
+      >
+        {{ $t('groupTaskBoard') }}
+      </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
+        v-if="isLeader"
+        class="nav-link"
+        :to="{name: 'groupPlanBilling', params: {groupId}}"
+        exact="exact"
+        :class="{'active': $route.name === 'groupPlanBilling'}"
+      >
+        {{ $t('groupBilling') }}
+      </router-link>
+    </secondary-menu><div class="col-12">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/group-plans/taskInformation.vue b/website/client/src/components/group-plans/taskInformation.vue
index 0231d2fa37..bb609c2e74 100644
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/website/client/src/components/group-plans/taskInformation.vue
@@ -1,52 +1,80 @@
-<template lang="pug">
-.standard-page
-  group-plan-overview-modal
-  task-modal(
-    :task="workingTask",
-    :purpose="taskFormPurpose",
-    @cancel="cancelTaskModal()",
-    ref="taskModal",
-    :groupId="groupId",
-    v-on:taskCreated='taskCreated',
-    v-on:taskEdited='taskEdited',
-    v-on:taskDestroyed='taskDestroyed'
-  )
-  .row.tasks-navigation
-    .col-12.col-md-4
-      h1 {{ $t('groupTasksTitle') }}
-    // @TODO: Abstract to component!
-    .col-12.col-md-4
-      input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
-    .create-task-area.d-flex(v-if='canCreateTasks')
-      transition(name="slide-tasks-btns")
-        .d-flex(v-if="openCreateBtn")
-          .create-task-btn.diamond-btn(
-            v-for="type in columns",
-            :key="type",
-            @click="createTask(type)",
-            v-b-tooltip.hover.bottom="$t(type)",
-          )
-            .svg-icon(v-html="icons[type]", :class='`icon-${type}`')
-
-      #create-task-btn.create-btn.diamond-btn.btn.btn-success(
-        @click="openCreateBtn = !openCreateBtn",
-        :class="{open: openCreateBtn}",
-      )
-        .svg-icon(v-html="icons.positive")
-      b-tooltip(target="create-task-btn", placement="bottom", v-if="!openCreateBtn") {{ $t('addTaskToGroupPlan') }}
-
-  .row
-    task-column.col-12.col-md-3(
-      v-for="column in columns",
-      :type="column",
-      :key="column",
-      :taskListOverride='tasksByType[column]',
-      :showOptions="showOptions"
-      v-on:editTask="editTask",
-      v-on:loadGroupCompletedTodos="loadGroupCompletedTodos",
-      v-on:taskDestroyed="taskDestroyed",
-      :group='group',
-      :searchText="searchText")
+<template>
+  <div class="standard-page">
+    <group-plan-overview-modal /><task-modal
+      ref="taskModal"
+      :task="workingTask"
+      :purpose="taskFormPurpose"
+      :group-id="groupId"
+      @cancel="cancelTaskModal()"
+      @taskCreated="taskCreated"
+      @taskEdited="taskEdited"
+      @taskDestroyed="taskDestroyed"
+    /><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">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><div
+        v-if="canCreateTasks"
+        class="create-task-area d-flex"
+      >
+        <transition name="slide-tasks-btns">
+          <div
+            v-if="openCreateBtn"
+            class="d-flex"
+          >
+            <div
+              v-for="type in columns"
+              :key="type"
+              v-b-tooltip.hover.bottom="$t(type)"
+              class="create-task-btn diamond-btn"
+              @click="createTask(type)"
+            >
+              <div
+                class="svg-icon"
+                :class="`icon-${type}`"
+                v-html="icons[type]"
+              ></div>
+            </div>
+          </div>
+        </transition><div
+          id="create-task-btn"
+          class="create-btn diamond-btn btn btn-success"
+          :class="{open: openCreateBtn}"
+          @click="openCreateBtn = !openCreateBtn"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.positive"
+          ></div>
+        </div><b-tooltip
+          v-if="!openCreateBtn"
+          target="create-task-btn"
+          placement="bottom"
+        >
+          {{ $t('addTaskToGroupPlan') }}
+        </b-tooltip>
+      </div>
+    </div><div class="row">
+      <task-column
+        v-for="column in columns"
+        :key="column"
+        class="col-12 col-md-3"
+        :type="column"
+        :task-list-override="tasksByType[column]"
+        :show-options="showOptions"
+        :group="group"
+        :search-text="searchText"
+        @editTask="editTask"
+@loadGroupCompletedTodos="loadGroupCompletedTodos" @taskDestroyed="taskDestroyed"
+      />
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groupLink.vue b/website/client/src/components/groupLink.vue
index c339f1711a..97f3bdb8d9 100644
--- a/website/client/src/components/groupLink.vue
+++ b/website/client/src/components/groupLink.vue
@@ -1,8 +1,10 @@
-<template lang="pug">
-  b-link(
-    v-if='group',
-    @click.prevent='goToGroup'
-    ) {{group.name}}
+<template>
+  <b-link
+    v-if="group"
+    @click.prevent="goToGroup"
+  >
+    {{ group.name }}
+  </b-link>
 </template>
 
 <script>
diff --git a/website/client/src/components/groups/chat.vue b/website/client/src/components/groups/chat.vue
index a515b11abc..5dc1bba7f8 100644
--- a/website/client/src/components/groups/chat.vue
+++ b/website/client/src/components/groups/chat.vue
@@ -1,50 +1,71 @@
-<template lang="pug">
-  .row.chat-row
-    .col-12
-      h3.float-left.label(:class="{accepted: communityGuidelinesAccepted }") {{ label }}
-      div.float-right(v-markdown='$t("markdownFormattingHelp")')
-
-      .row(v-if="communityGuidelinesAccepted")
-        textarea(:placeholder='placeholder',
-                  v-model='newMessage',
-                  ref='user-entry',
-                  :class='{"user-entry": newMessage}',
-                  @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()',
-                  maxlength='3000'
-                )
-        span {{ currentLength }} / 3000
-        autocomplete(
-                ref='autocomplete',
-                :text='newMessage',
-                v-on:select="selectedAutocomplete",
-                :textbox='textbox',
-                :coords='coords',
-                :caretPosition = 'caretPosition',
-                :chat='group.chat')
-
-      community-guidelines
-
-      .row.chat-actions
-        .col-6.chat-receive-actions
-          button.btn.btn-secondary.float-left.fetch(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
-          button.btn.btn-secondary.float-left(v-once, @click='reverseChat()') {{ $t('reverseChat') }}
-        .col-6.chat-send-actions
-          button.btn.btn-primary.send-chat.float-right(:disabled="!communityGuidelinesAccepted", @click='sendMessage()') {{ $t('send') }}
-
-      slot(
-        name="additionRow",
-      )
-
-      .row
-        .hr.col-12
-        chat-message(:chat.sync='group.chat', :group-type='group.type', :group-id='group._id', :group-name='group.name')
+<template>
+  <div class="row chat-row">
+    <div class="col-12">
+      <h3
+        class="float-left label"
+        :class="{accepted: communityGuidelinesAccepted }"
+      >
+        {{ label }}
+      </h3><div
+        v-markdown="$t('markdownFormattingHelp')"
+        class="float-right"
+      ></div><div
+        v-if="communityGuidelinesAccepted"
+        class="row"
+      >
+        <textarea
+          ref="user-entry"
+          v-model="newMessage"
+          :placeholder="placeholder"
+          :class="{'user-entry': newMessage}"
+          maxlength="3000"
+          @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
+          ref="autocomplete"
+          :text="newMessage"
+          :textbox="textbox"
+          :coords="coords"
+          :caret-position="caretPosition"
+          :chat="group.chat"
+          @select="selectedAutocomplete"
+        />
+      </div><community-guidelines /><div class="row chat-actions">
+        <div class="col-6 chat-receive-actions">
+          <button
+            v-once
+            class="btn btn-secondary float-left fetch"
+            @click="fetchRecentMessages()"
+          >
+            {{ $t('fetchRecentMessages') }}
+          </button><button
+            v-once
+            class="btn btn-secondary float-left"
+            @click="reverseChat()"
+          >
+            {{ $t('reverseChat') }}
+          </button>
+        </div><div class="col-6 chat-send-actions">
+          <button
+            class="btn btn-primary send-chat float-right"
+            :disabled="!communityGuidelinesAccepted"
+            @click="sendMessage()"
+          >
+            {{ $t('send') }}
+          </button>
+        </div>
+      </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"
+          :group-name="group.name"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/groups/communityGuidelines.vue b/website/client/src/components/groups/communityGuidelines.vue
index f5a010b24c..8ca7783c22 100644
--- a/website/client/src/components/groups/communityGuidelines.vue
+++ b/website/client/src/components/groups/communityGuidelines.vue
@@ -1,9 +1,22 @@
-<template lang="pug">
-.row.community-guidelines(v-if='!communityGuidelinesAccepted')
-  div.col.col-sm-12.col-xl-8(v-once, v-html="$t('communityGuidelinesIntro')")
-
-  div.col-md-auto.col-md-12.col-xl-4
-    button.btn.btn-info.btn-follow-guidelines(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
+<template>
+  <div
+    v-if="!communityGuidelinesAccepted"
+    class="row community-guidelines"
+  >
+    <div
+      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">
+      <button
+        v-once
+        class="btn btn-info btn-follow-guidelines"
+        @click="acceptCommunityGuidelines()"
+      >
+        {{ $t('acceptCommunityGuidelines') }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/groups/createPartyModal.vue b/website/client/src/components/groups/createPartyModal.vue
index 078854c658..315c02bd90 100644
--- a/website/client/src/components/groups/createPartyModal.vue
+++ b/website/client/src/components/groups/createPartyModal.vue
@@ -1,25 +1,63 @@
-<template lang="pug">
-b-modal#create-party-modal(size='lg', hide-footer=true)
-  .header-wrap(slot="modal-header")
-    .quest_screen
-    .row.heading
-      .col-12.text-center.pr-5.pl-5
-        h2(v-once) {{ $t('playInPartyTitle') }}
-        p.mb-4(v-once) {{ $t('playInPartyDescription') }}
-        button.btn.btn-primary(v-once, @click='createParty()') {{ $t('createParty') }}
-  .row.grey-row
-    .col-12.text-center
-      .join-party
-      h2(v-once) {{ $t('wantToJoinPartyTitle') }}
-      p(v-html='$t("wantToJoinPartyDescription")')
-      .form-group(@click='copyUsername')
-        .d-flex.align-items-center
-          label.mr-3(v-once) {{ $t('username') }}
-          .flex-grow-1
-            .input-group-prepend.input-group-text @
-              .text {{ user.auth.local.username }}
-              .svg-icon.copy-icon(v-html='icons.copy')
-              .small(v-once) {{ $t('copy') }}
+<template>
+  <b-modal
+    id="create-party-modal"
+    size="lg"
+    hide-footer="hide-footer"
+  >
+    <div
+      slot="modal-header"
+      class="header-wrap"
+    >
+      <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
+            v-once
+            class="mb-4"
+          >
+            {{ $t('playInPartyDescription') }}
+          </p><button
+            v-once
+            class="btn btn-primary"
+            @click="createParty()"
+          >
+            {{ $t('createParty') }}
+          </button>
+        </div>
+      </div>
+    </div><div class="row grey-row">
+      <div class="col-12 text-center">
+        <div class="join-party"></div><h2 v-once>
+          {{ $t('wantToJoinPartyTitle') }}
+        </h2><p v-html="$t('wantToJoinPartyDescription')"></p><div
+          class="form-group"
+          @click="copyUsername"
+        >
+          <div class="d-flex align-items-center">
+            <label
+              v-once
+              class="mr-3"
+            >{{ $t('username') }}</label><div class="flex-grow-1">
+              <div class="input-group-prepend input-group-text">
+                @<div class="text">
+                  {{ user.auth.local.username }}
+                </div><div
+                  class="svg-icon copy-icon"
+                  v-html="icons.copy"
+                ></div><div
+                  v-once
+                  class="small"
+                >
+                  {{ $t('copy') }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style>
diff --git a/website/client/src/components/groups/discovery.vue b/website/client/src/components/groups/discovery.vue
index 0024626c74..da485f11b9 100644
--- a/website/client/src/components/groups/discovery.vue
+++ b/website/client/src/components/groups/discovery.vue
@@ -1,34 +1,58 @@
-<template lang="pug">
-.row
-  sidebar(@search="updateSearch", @filter="updateFilters")
-
-  .standard-page
-    .header.row
-      .col-8
-        h1.page-header.float-left(v-once) {{ $t('publicGuilds') }}
-      .col-4
-        // @TODO: Add when we implement recent activity .float-right
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
-        button.btn.btn-secondary.create-group-button.float-right(@click='createGroup()')
-          .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once) {{$t('createGuild2')}}
-
-    .row
-      .no-guilds.text-center.col-md-6.offset-md-3(v-if='!loading && filteredGuilds.length === 0')
-        h2(v-once) {{$t('noGuildsMatchFilters')}}
-
-    .row
-      .col-md-12
-        public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-leave='true')
-        mugen-scroll(
-          :handler="fetchGuilds",
-          :should-handle="!loading && !this.hasLoadedAllGuilds",
-          :handle-on-mount="true",
-          v-show="loading",
-        )
-          span(v-once) {{ $t('loading') }}
+<template>
+  <div class="row">
+    <sidebar
+      @search="updateSearch"
+      @filter="updateFilters"
+    /><div class="standard-page">
+      <div class="header row">
+        <div class="col-8">
+          <h1
+            v-once
+            class="page-header float-left"
+          >
+            {{ $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
+          v-if="!loading && filteredGuilds.length === 0"
+          class="no-guilds text-center col-md-6 offset-md-3"
+        >
+          <h2 v-once>
+            {{ $t('noGuildsMatchFilters') }}
+          </h2>
+        </div>
+      </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
+            v-show="loading"
+            :handler="fetchGuilds"
+            :should-handle="!loading && !this.hasLoadedAllGuilds"
+            :handle-on-mount="true"
+          >
+            <span v-once>{{ $t('loading') }}</span>
+          </mugen-scroll>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groups/group.vue b/website/client/src/components/groups/group.vue
index 166e2cead0..1034ed5124 100644
--- a/website/client/src/components/groups/group.vue
+++ b/website/client/src/components/groups/group.vue
@@ -1,72 +1,158 @@
-<template lang="pug">
-.row(v-if="group._id")
-  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
-  .col-12.col-sm-8.standard-page
-    .row
-      .col-12.col-md-6.title-details
-        h1 {{group.name}}
-        div
-          span.mr-1.ml-0
-            strong(v-once) {{$t('groupLeader')}}:
-            user-link.mx-1(:user="group.leader")
-      .col-12.col-md-6
-        .row.icon-row
-          .col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
-            .item-with-icon(@click="showMemberModal()")
-              .svg-icon.shield(v-html="icons.goldGuildBadgeIcon", v-if='group.memberCount > 1000')
-              .svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='group.memberCount > 100 && group.memberCount < 999')
-              .svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='group.memberCount < 100')
-              span.number {{ group.memberCount | abbrNum }}
-              div.member-list.label(v-once) {{ $t('memberList') }}
-          .col-4(v-if='!isParty')
-            .item-with-icon(@click='showGroupGems()')
-              .svg-icon.gem(v-html="icons.gem")
-              span.number {{group.balance * 4}}
-              div.label(v-once) {{ $t('guildBank') }}
-    chat(
-      :label="$t('chat')",
-      :group="group",
-      :placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')",
-      @fetchRecentMessages="fetchRecentMessages()"
-    )
-      template(slot="additionRow")
-        .row(v-if='showNoNotificationsMessage')
-          .col-12.no-notifications
-            | {{$t('groupNoNotifications')}}
-  .col-12.col-sm-4.sidebar
-    .row(:class='{"guild-background": !isParty}')
-      .col-12.buttons-wrapper
-        .button-container
-          button.btn.btn-success(class='btn-success', v-if='isLeader && !group.purchased.active', @click='upgradeGroup()')
-            | {{ $t('upgrade') }}
-        .button-container
-          button.btn.btn-primary(b-btn, @click="updateGuild", v-once, v-if='isLeader || isAdmin') {{ $t('edit') }}
-        .button-container
-          button.btn.btn-success(class='btn-success', v-if='!isMember', @click='join()') {{ $t('join') }}
-        .button-container
-          button.btn.btn-primary(v-once, @click='showInviteModal()') {{$t('invite')}}
-          // @TODO: hide the invitation button if there's an active group plan and the player is not the leader
-        .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
-        .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
-      quest-sidebar-section(:group='group', v-if='isParty')
-      sidebar-section(:title="$t('guildSummary')", v-if='!isParty')
-        p(v-markdown='group.summary')
-      sidebar-section(:title="$t('groupDescription')")
-        p(v-markdown='group.description')
-      sidebar-section(
-        :title="$t('challenges')",
-        :tooltip="$t('challengeDetails')"
-      )
-        group-challenges(:groupId='searchId')
-    div.text-center
-      button.btn.btn-danger(v-if='isMember', @click='clickLeave()') {{ isParty ? $t('leaveParty') : $t('leaveGroup') }}
+<template>
+  <div
+    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">
+      <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>
+          </div>
+        </div><div class="col-12 col-md-6">
+          <div class="row icon-row">
+            <div
+              class="col-4 offset-4"
+              :class="{ 'offset-8': isParty }"
+            >
+              <div
+                class="item-with-icon"
+                @click="showMemberModal()"
+              >
+                <div
+                  v-if="group.memberCount > 1000"
+                  class="svg-icon shield"
+                  v-html="icons.goldGuildBadgeIcon"
+                ></div><div
+                  v-if="group.memberCount > 100 && group.memberCount < 999"
+                  class="svg-icon shield"
+                  v-html="icons.silverGuildBadgeIcon"
+                ></div><div
+                  v-if="group.memberCount < 100"
+                  class="svg-icon shield"
+                  v-html="icons.bronzeGuildBadgeIcon"
+                ></div><span class="number">{{ group.memberCount | abbrNum }}</span><div
+                  v-once
+                  class="member-list label"
+                >
+                  {{ $t('memberList') }}
+                </div>
+              </div>
+            </div><div
+              v-if="!isParty"
+              class="col-4"
+            >
+              <div
+                class="item-with-icon"
+                @click="showGroupGems()"
+              >
+                <div
+                  class="svg-icon gem"
+                  v-html="icons.gem"
+                ></div><span class="number">{{ group.balance * 4 }}</span><div
+                  v-once
+                  class="label"
+                >
+                  {{ $t('guildBank') }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><chat
+        :label="$t('chat')"
+        :group="group"
+        :placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')"
+        @fetchRecentMessages="fetchRecentMessages()"
+      >
+        <template slot="additionRow">
+          <div
+            v-if="showNoNotificationsMessage"
+            class="row"
+          >
+            <div class="col-12 no-notifications">
+              {{ $t('groupNoNotifications') }}
+            </div>
+          </div>
+        </template>
+      </chat>
+    </div><div class="col-12 col-sm-4 sidebar">
+      <div
+        class="row"
+        :class="{'guild-background': !isParty}"
+      >
+        <div class="col-12 buttons-wrapper">
+          <div class="button-container">
+            <button
+              v-if="isLeader && !group.purchased.active"
+              class="btn btn-success btn-success"
+              @click="upgradeGroup()"
+            >
+              {{ $t('upgrade') }}
+            </button>
+          </div><div class="button-container">
+            <button
+              v-if="isLeader || isAdmin"
+              v-once
+              class="btn btn-primary"
+              b-btn="b-btn"
+              @click="updateGuild"
+            >
+              {{ $t('edit') }}
+            </button>
+          </div><div class="button-container">
+            <button
+              v-if="!isMember"
+              class="btn btn-success btn-success"
+              @click="join()"
+            >
+              {{ $t('join') }}
+            </button>
+          </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">
+            <!-- @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">
+            <!-- @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>
+        <quest-sidebar-section
+          v-if="isParty"
+          :group="group"
+        /><sidebar-section
+          v-if="!isParty"
+          :title="$t('guildSummary')"
+        >
+          <p v-markdown="group.summary"></p>
+        </sidebar-section><sidebar-section :title="$t('groupDescription')">
+          <p v-markdown="group.description"></p>
+        </sidebar-section><sidebar-section
+          :title="$t('challenges')"
+          :tooltip="$t('challengeDetails')"
+        >
+          <group-challenges :group-id="searchId" />
+        </sidebar-section>
+      </div><div class="text-center">
+        <button
+          v-if="isMember"
+          class="btn btn-danger"
+          @click="clickLeave()"
+        >
+          {{ isParty ? $t('leaveParty') : $t('leaveGroup') }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groups/groupFormModal.vue b/website/client/src/components/groups/groupFormModal.vue
index afe7c09e56..c6797031da 100644
--- a/website/client/src/components/groups/groupFormModal.vue
+++ b/website/client/src/components/groups/groupFormModal.vue
@@ -1,103 +1,206 @@
-<template lang="pug">
-  b-modal#guild-form(:title="title", :hide-footer="true", size='lg')
-    form(@submit.stop.prevent="submit")
-      .form-group
-        label
-          strong(v-once) {{$t('name')}} *
-        b-form-input(type="text", :placeholder="$t('newGuildPlaceholder')", v-model="workingGroup.name")
-      .form-group
-        label
-          strong(v-once) {{$t('privacySettings')}} *
-        br
-        .custom-control.custom-checkbox
-          input.custom-control-input#onlyLeaderCreatesChallenges(type="checkbox", v-model="workingGroup.onlyLeaderCreatesChallenges")
-          label.custom-control-label(v-once, for="onlyLeaderCreatesChallenges") {{ $t('onlyLeaderCreatesChallenges') }}
-          #groupPrivateDescription1.icon(:title="$t('privateDescription')")
-            .svg-icon(v-html='icons.information')
-          b-tooltip(
-            :title="$t('onlyLeaderCreatesChallengesDetail')",
-            target="groupPrivateDescription1",
-          )
-
-        // br
-        // @TODO Implement in V2 .custom-control.custom-checkbox
-          input.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
-        .custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id')
-          input.custom-control-input#privateGuild(type="checkbox", v-model="workingGroup.privateGuild")
-          label.custom-control-label(v-once, for="privateGuild") {{ $t('privateGuild') }}
-          #groupPrivateDescription2.icon(:title="$t('privateDescription')")
-            .svg-icon(v-html='icons.information')
-          b-tooltip(
-            :title="$t('privateDescription')",
-            target="groupPrivateDescription2",
-          )
-
-        // 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",
-
-      .form-group(v-if='!isParty')
-        label
-          strong(v-once) {{$t('guildSummary')}} *
-        div.summary-count {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
-        textarea.form-control.summary-textarea(:placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildSummaryPlaceholder')", v-model="workingGroup.summary")
-        // @TODO: need summary only for PUBLIC GUILDS, not for tavern, private guilds, or party
-
-      .form-group
-        label
-          strong(v-once) {{$t('groupDescription')}} *
-        a.float-right(v-markdown='$t("markdownFormattingHelp")')
-        textarea.form-control.description-textarea(type="text", textarea, :placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildDescriptionPlaceholder')", v-model="workingGroup.description")
-
-      .form-group(v-if='creatingParty && !workingGroup.id')
-        span
-          toggleSwitch(:label="$t('inviteMembersNow')", v-model='inviteMembers')
-
-      .form-group(style='position: relative;', v-if='!creatingParty && !isParty')
-        label
-          strong(v-once) {{$t('categories')}} *
-        div.category-wrap(@click.prevent="toggleCategorySelect")
-          span.category-select(v-if='workingGroup.categories.length === 0') {{$t('none')}}
-          .category-label(v-for='category in workingGroup.categories') {{$t(categoriesHashByKey[category])}}
-        .category-box(v-if="showCategorySelect")
-          .form-check(
-            v-for="group in categoryOptions",
-            :key="group.key",
-            v-if='group.key !== "habitica_official" || user.contributor.admin'
-          )
-            .custom-control.custom-checkbox
-              input.custom-control-input(:id="`category-${group.key}`", type="checkbox", :value="group.key", v-model="workingGroup.categories")
-              label.custom-control-label(v-once, :for="`category-${group.key}`") {{ $t(group.label) }}
-          button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
-        // @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party
-
-      .form-group(v-if='inviteMembers && !workingGroup.id')
-        label
-          strong(v-once) Invite via Email or User ID
-          p(v-once) {{$t('inviteMembersHowTo')}} *
-
-        div
-          div(v-for='(member, index) in membersToInvite')
-            input(type='text', v-model='member.value')
-            button(@click.prevent='removeMemberToInvite(index)') Remove
-          div
-            input(type='text', placeholder='Email address or User ID', v-model='newMemberToInvite.value')
-            button(@click.prevent='addMemberToInvite()') Add
-
-      .form-group.text-center
-        div.item-with-icon(v-if='!this.workingGroup.id')
-          .svg-icon(v-html="icons.gem")
-          span.count 4
-        button.btn.btn-primary.btn-md(v-if='!workingGroup.id', :disabled='!workingGroup.name || !workingGroup.description') {{ creatingParty ? $t('createParty') : $t('createGuild') }}
-        button.btn.btn-primary.btn-md(v-if='workingGroup.id', :disabled='!workingGroup.name || !workingGroup.description') {{ isParty ? $t('updateParty') : $t('updateGuild') }}
-        .gem-description(v-once, v-if='!this.workingGroup.id') {{ $t('guildGemCostInfo') }}
+<template>
+  <b-modal
+    id="guild-form"
+    :title="title"
+    :hide-footer="true"
+    size="lg"
+  >
+    <form @submit.stop.prevent="submit">
+      <div class="form-group">
+        <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">
+          <input
+            id="onlyLeaderCreatesChallenges"
+            v-model="workingGroup.onlyLeaderCreatesChallenges"
+            class="custom-control-input"
+            type="checkbox"
+          ><label
+            v-once
+            class="custom-control-label"
+            for="onlyLeaderCreatesChallenges"
+          >{{ $t('onlyLeaderCreatesChallenges') }}</label><div
+            id="groupPrivateDescription1"
+            class="icon"
+            :title="$t('privateDescription')"
+          >
+            <div
+              class="svg-icon"
+              v-html="icons.information"
+            ></div>
+          </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")
+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")
+label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
+// "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members",
+-->
+      </div><div
+        v-if="!isParty"
+        class="form-group"
+      >
+        <label><strong v-once>{{ $t('guildSummary') }} *</strong></label><div class="summary-count">
+          {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
+        </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
+          v-markdown="$t('markdownFormattingHelp')"
+          class="float-right"
+        ></a><textarea
+          v-model="workingGroup.description"
+          class="form-control description-textarea"
+          type="text"
+          textarea="textarea"
+          :placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildDescriptionPlaceholder')"
+        ></textarea>
+      </div><div
+        v-if="creatingParty && !workingGroup.id"
+        class="form-group"
+      >
+        <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
+          class="category-wrap"
+          @click.prevent="toggleCategorySelect"
+        >
+          <span
+            v-if="workingGroup.categories.length === 0"
+            class="category-select"
+          >{{ $t('none') }}</span><div
+            v-for="category in workingGroup.categories"
+            class="category-label"
+          >
+            {{ $t(categoriesHashByKey[category]) }}
+          </div>
+        </div><div
+          v-if="showCategorySelect"
+          class="category-box"
+        >
+          <div
+            v-for="group in categoryOptions"
+            v-if="group.key !== 'habitica_official' || user.contributor.admin"
+            :key="group.key"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="`category-${group.key}`"
+                v-model="workingGroup.categories"
+                class="custom-control-input"
+                type="checkbox"
+                :value="group.key"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="`category-${group.key}`"
+              >{{ $t(group.label) }}</label>
+            </div>
+          </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
+        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>
+          <div v-for="(member, index) in membersToInvite">
+            <input
+              v-model="member.value"
+              type="text"
+            ><button @click.prevent="removeMemberToInvite(index)">
+              Remove
+            </button>
+          </div><div>
+            <input
+              v-model="newMemberToInvite.value"
+              type="text"
+              placeholder="Email address or User ID"
+            ><button @click.prevent="addMemberToInvite()">
+              Add
+            </button>
+          </div>
+        </div>
+      </div><div class="form-group text-center">
+        <div
+          v-if="!this.workingGroup.id"
+          class="item-with-icon"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.gem"
+          ></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
+          v-if="workingGroup.id"
+          class="btn btn-primary btn-md"
+          :disabled="!workingGroup.name || !workingGroup.description"
+        >
+          {{ isParty ? $t('updateParty') : $t('updateGuild') }}
+        </button><div
+          v-if="!this.workingGroup.id"
+          v-once
+          class="gem-description"
+        >
+          {{ $t('guildGemCostInfo') }}
+        </div>
+      </div>
+    </form>
+  </b-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groups/groupGemsModal.vue b/website/client/src/components/groups/groupGemsModal.vue
index 769451d6b9..98eda3b0da 100644
--- a/website/client/src/components/groups/groupGemsModal.vue
+++ b/website/client/src/components/groups/groupGemsModal.vue
@@ -1,12 +1,27 @@
-<template lang="pug">
-  b-modal#group-gems-modal(:title="$t('groupGems')", size='md', :hide-footer="true")
-    .modal-body
-      .row
-        .col-6.offset-3
-          h3 {{ $t('groupGemsDesc') }}
-    .modal-footer
-      .col-12.text-center
-          button.btn.btn-primary(@click='close()') {{$t('close')}}
+<template>
+  <b-modal
+    id="group-gems-modal"
+    :title="$t('groupGems')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div class="row">
+        <div class="col-6 offset-3">
+          <h3>{{ $t('groupGemsDesc') }}</h3>
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <div class="col-12 text-center">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('close') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/groups/groupPlan.vue b/website/client/src/components/groups/groupPlan.vue
index 0b5998665f..b2fe8ce235 100644
--- a/website/client/src/components/groups/groupPlan.vue
+++ b/website/client/src/components/groups/groupPlan.vue
@@ -1,108 +1,228 @@
-<template lang="pug">
-// @TODO: Move to group plans folder
-div
-  div
-    .header
-      h1.text-center Need more for your Group?
-      .row
-        .col-8.offset-2.text-center
-          h2.sub-text {{ $t('groupBenefitsDescription') }}
-    .container.benefits
-      .row
-        .col-4
-          .box
-            img.box1(src='~@/assets/images/group-plans/group-14@3x.png')
-            hr
-            h2 {{ $t('teamBasedTasks') }}
-            p Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!
-
-        .col-4
-          .box
-            img.box2(src='~@/assets/images/group-plans/group-12@3x.png')
-            hr
-            h2 Group Management Controls
-            p Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.
-
-        .col-4
-          .box
-            img.box3(src='~@/assets/images/group-plans/group-13@3x.png')
-            hr
-            h2 In-Game Benefits
-            p Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.
-
-    #upgrading-group.container.payment-options(v-if='upgradingGroup._id')
-      h1.text-center.purple-header Are you ready to upgrade?
-      .row
-        .col-12.text-center
-          .purple-box
-            .amount-section
-              .dollar $
-              .number 9
-              .name Group Owner Subscription
-            .plus
-              .svg-icon(v-html="icons.positiveIcon")
-            .amount-section
-              .dollar $
-              .number 3
-              .name Each Individual Group Member
-
-          .box.payment-providers
-            h3 Choose your payment method
-            .payments-column
-              button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)')
-                .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
-                | {{ $t('card') }}
-              amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
-    .container.col-6.offset-3.create-option(v-if='!upgradingGroup._id')
-      .row
-        h1.col-12.text-center.purple-header Create your Group today!
-      .row
-        .col-12.text-center
-          button.btn.btn-primary.create-group(@click='launchModal("create")') Create Your New Group
-      .row.pricing
-        .col-5
-          .dollar $
-          .number 9
-          .name
-            div Group Owner
-            div Subscription
-        .col-1
-          .plus +
-        .col-6
-          .dollar $
-          .number 3
-          .name
-            div Each Additional
-            div Member
-
-  b-modal#group-plan-modal(title="Select Payment", size='md', hide-footer=true)
-    .col-12(v-if='activePage === PAGES.CREATE_GROUP')
-      .form-group
-        label.control-label(for='new-group-name') Name
-        input.form-control#new-group-name.input-medium.option-content(required, type='text', placeholder="Name", v-model='newGroup.name')
-      .form-group
-        label(for='new-group-description') {{ $t('description') }}
-        textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('description')", v-model='newGroup.description')
-      .form-group(v-if='type === "guild"')
-        .custom-control.custom-radio
-          input.custom-control-input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
-          label.custom-control-label {{ $t('inviteOnly') }}
-      .form-group
-        .custom-control.custom-checkbox
-          input.custom-control-input(type='checkbox', v-model='newGroup.leaderOnly.challenges' id='create-group-leaderOnlyChallenges-checkbox')
-          label.custom-control-label(for='create-group-leaderOnlyChallenges-checkbox') {{ $t('leaderOnlyChallenges') }}
-      .form-group(v-if='type === "party"')
-        button.btn.btn-secondary.form-control(@click='createGroup()', :value="$t('createGroupPlan')")
-      .form-group
-        button.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('createGroupPlan') }}
-    .col-12(v-if='activePage === PAGES.PAY')
-      .text-center
-        h3 Choose your payment method
-        .payments-column.mx-auto
-          button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)')
-            .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
-            | {{ $t('card') }}
-          amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
+<template>
+  <!-- @TODO: Move to group plans folder--><div>
+    <div>
+      <div class="header">
+        <h1 class="text-center">
+          Need more for your Group?
+        </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 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>
+            </div>
+          </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>
+            </div>
+          </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>
+            </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">
+          <div class="col-12 text-center">
+            <div class="purple-box">
+              <div class="amount-section">
+                <div class="dollar">
+                  $
+                </div><div class="number">
+                  9
+                </div><div class="name">
+                  Group Owner Subscription
+                </div>
+              </div><div class="plus">
+                <div
+                  class="svg-icon"
+                  v-html="icons.positiveIcon"
+                ></div>
+              </div><div class="amount-section">
+                <div class="dollar">
+                  $
+                </div><div class="number">
+                  3
+                </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">
+                <button
+                  class="purchase btn btn-primary payment-button payment-item"
+                  @click="pay(PAYMENTS.STRIPE)"
+                >
+                  <div
+                    class="svg-icon credit-card-icon"
+                    v-html="icons.creditCardIcon"
+                  ></div>{{ $t('card') }}
+                </button><amazon-button
+                  class="payment-item"
+                  :amazon-data="pay(PAYMENTS.AMAZON)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><div
+        v-if="!upgradingGroup._id"
+        class="container col-6 offset-3 create-option"
+      >
+        <div class="row">
+          <h1 class="col-12 text-center purple-header">
+            Create your Group today!
+          </h1>
+        </div><div class="row">
+          <div class="col-12 text-center">
+            <button
+              class="btn btn-primary create-group"
+              @click="launchModal('create')"
+            >
+              Create Your New Group
+            </button>
+          </div>
+        </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="plus">
+              +
+            </div>
+          </div><div class="col-6">
+            <div class="dollar">
+              $
+            </div><div class="number">
+              3
+            </div><div class="name">
+              <div>Each Additional</div><div>Member</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><b-modal
+      id="group-plan-modal"
+      title="Select Payment"
+      size="md"
+      hide-footer="hide-footer"
+    >
+      <div
+        v-if="activePage === PAGES.CREATE_GROUP"
+        class="col-12"
+      >
+        <div class="form-group">
+          <label
+            class="control-label"
+            for="new-group-name"
+          >Name</label><input
+            id="new-group-name"
+            v-model="newGroup.name"
+            class="form-control input-medium option-content"
+            required="required"
+            type="text"
+            placeholder="Name"
+          >
+        </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
+          v-if="type === 'guild'"
+          class="form-group"
+        >
+          <div class="custom-control custom-radio">
+            <input
+              v-model="newGroup.privacy"
+              class="custom-control-input"
+              type="radio"
+              name="new-group-privacy"
+              value="private"
+            ><label class="custom-control-label">{{ $t('inviteOnly') }}</label>
+          </div>
+        </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
+              class="custom-control-label"
+              for="create-group-leaderOnlyChallenges-checkbox"
+            >{{ $t('leaderOnlyChallenges') }}</label>
+          </div>
+        </div><div
+          v-if="type === 'party'"
+          class="form-group"
+        >
+          <button
+            class="btn btn-secondary form-control"
+            :value="$t('createGroupPlan')"
+            @click="createGroup()"
+          ></button>
+        </div><div class="form-group">
+          <button
+            class="btn btn-primary btn-lg btn-block"
+            :disabled="!newGroupIsReady"
+            @click="createGroup()"
+          >
+            {{ $t('createGroupPlan') }}
+          </button>
+        </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">
+            <button
+              class="purchase btn btn-primary payment-button payment-item"
+              @click="pay(PAYMENTS.STRIPE)"
+            >
+              <div
+                class="svg-icon credit-card-icon"
+                v-html="icons.creditCardIcon"
+              ></div>{{ $t('card') }}
+            </button><amazon-button
+              class="payment-item"
+              :amazon-data="pay(PAYMENTS.AMAZON)"
+            />
+          </div>
+        </div>
+      </div>
+    </b-modal>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groups/index.vue b/website/client/src/components/groups/index.vue
index e0d825709b..1a8ec42e89 100644
--- a/website/client/src/components/groups/index.vue
+++ b/website/client/src/components/groups/index.vue
@@ -1,14 +1,30 @@
-<template lang="pug">
-.row
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'tavern'}", exact, :class="{'active': $route.name === 'tavern'}") {{ $t('tavern') }}
-    router-link.nav-link(:to="{name: 'myGuilds'}", :class="{'active': $route.name === 'myGuilds'}") {{ $t('myGuilds') }}
-    router-link.nav-link(:to="{name: 'guildsDiscovery'}", :class="{'active': $route.name === 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
-
-  .col-12
-    router-view
-
-  group-form-modal
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'tavern'}"
+        exact="exact"
+        :class="{'active': $route.name === 'tavern'}"
+      >
+        {{ $t('tavern') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'myGuilds'}"
+        :class="{'active': $route.name === 'myGuilds'}"
+      >
+        {{ $t('myGuilds') }}
+      </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">
+      <router-view />
+    </div><group-form-modal />
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/groups/inviteModal.vue b/website/client/src/components/groups/inviteModal.vue
index 946787cf19..fd1080befb 100644
--- a/website/client/src/components/groups/inviteModal.vue
+++ b/website/client/src/components/groups/inviteModal.vue
@@ -1,24 +1,52 @@
-<template lang="pug">
-  b-modal#invite-modal(:title='$t(`inviteTo${groupType}`)', :hide-footer='true')
-    div
-      strong {{ $t('inviteEmailUsername') }}
-      .small {{ $t('inviteEmailUsernameInfo') }}
-      div(v-for='(invite, index) in invites')
-        .input-group
-          .d-flex.align-items-center.justify-content-center(v-if='index === invites.length - 1 && invite.text.length === 0')
-            .svg-icon.positive-icon(v-html='icons.positiveIcon')
-          input.form-control(
-            type='text',
-            :placeholder='$t("emailOrUsernameInvite")',
-            v-model='invite.text',
-            v-on:keyup='expandInviteList',
-            v-on:change='checkInviteList',
-            :class='{"input-valid": invite.valid, "is-invalid input-invalid": invite.valid === false}',
-          )
-        .input-error.text-center.mt-2(v-if="invite.error") {{ invite.error }}
-    .modal-footer.d-flex.justify-content-center
-      a.mr-3(@click='close()') {{ $t('cancel') }}
-      button.btn.btn-primary(@click='sendInvites()', :class='{disabled: cannotSubmit}', :disabled='cannotSubmit') {{ $t('sendInvitations') }}
+<template>
+  <b-modal
+    id="invite-modal"
+    :title="$t(`inviteTo${groupType}`)"
+    :hide-footer="true"
+  >
+    <div>
+      <strong>{{ $t('inviteEmailUsername') }}</strong><div class="small">
+        {{ $t('inviteEmailUsernameInfo') }}
+      </div><div v-for="(invite, index) in invites">
+        <div class="input-group">
+          <div
+            v-if="index === invites.length - 1 && invite.text.length === 0"
+            class="d-flex align-items-center justify-content-center"
+          >
+            <div
+              class="svg-icon positive-icon"
+              v-html="icons.positiveIcon"
+            ></div>
+          </div><input
+            v-model="invite.text"
+            class="form-control"
+            type="text"
+            :placeholder="$t('emailOrUsernameInvite')"
+            :class="{'input-valid': invite.valid, 'is-invalid input-invalid': invite.valid === false}"
+            @keyup="expandInviteList"
+            @change="checkInviteList"
+          >
+        </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">
+      <a
+        class="mr-3"
+        @click="close()"
+      >{{ $t('cancel') }}</a><button
+        class="btn btn-primary"
+        :class="{disabled: cannotSubmit}"
+        :disabled="cannotSubmit"
+        @click="sendInvites()"
+      >
+        {{ $t('sendInvitations') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/groups/membersModal.vue b/website/client/src/components/groups/membersModal.vue
index 09033ea1b5..4e876e7b15 100644
--- a/website/client/src/components/groups/membersModal.vue
+++ b/website/client/src/components/groups/membersModal.vue
@@ -1,78 +1,202 @@
-<template lang="pug">
-// @TODO: Move this to a member directory
-div
-  remove-member-modal(:member-to-remove='memberToRemove', :group-id='this.groupId' @member-removed='memberRemoved')
-  b-modal#members-modal(:title="$t('createGuild')", size='md', :hide-footer='true')
-    .header-wrap(slot="modal-header")
-      .row
-        .col-6
-          h1(v-once) {{$t('members')}}
-        .col-6
-          button(type="button" aria-label="Close" class="close", @click='close()')
-            span(aria-hidden="true") ×
-      .row.d-flex.align-items-center
-        .col-4
-          input.form-control.input-search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-        .col
-          select.form-control(@change='changeSortOption($event)')
-            option(v-for='sortOption in sortOptions', :value='sortOption.value') {{sortOption.text}}
-        .col-3
-          select.form-control(@change='changeSortDirection($event)')
-            option(v-for='sortDirection in sortDirections', :value='sortDirection.value') {{sortDirection.text}}
-
-    .row.apply-options.d-flex.justify-content-center(v-if='sortDirty && group.type === "party"')
-      a(@click='applySortOptions()') {{ $t('applySortToHeader') }}
-    .row(v-if='invites.length > 0')
-      .col-6.offset-3.nav
-        .nav-item(@click='viewMembers()', :class="{active: selectedPage === 'members'}") {{ $t('members') }}
-        .nav-item(@click='viewInvites()', :class="{active: selectedPage === 'invites'}") {{ $t('invites') }}
-    div(v-if='selectedPage === "members"')
-      .row(v-for='(member, index) in sortedMembers')
-        .col-11.no-padding-left
-          member-details(:member='member')
-        .col-1.actions
-          b-dropdown(right=true)
-            .svg-icon.inline.dots(slot='button-content', v-html="icons.dots")
-            b-dropdown-item(@click='sendMessage(member)')
-              span.dropdown-icon-item
-                .svg-icon.inline(v-html="icons.messageIcon")
-                span.text {{$t('sendMessage')}}
-            b-dropdown-item(@click='promoteToLeader(member)', v-if='shouldShowLeaderFunctions(member._id)')
-              span.dropdown-icon-item
-                .svg-icon.inline(v-html="icons.starIcon")
-                span.text {{$t('promoteToLeader')}}
-            b-dropdown-item(@click='addManager(member._id)', v-if='shouldShowAddManager(member._id)')
-              span.dropdown-icon-item
-                .svg-icon.inline(v-html="icons.starIcon")
-                span.text {{$t('addManager')}}
-            b-dropdown-item(@click='removeManager(member._id)', v-if='shouldShowRemoveManager(member._id)')
-              span.dropdown-icon-item
-                .svg-icon.inline(v-html="icons.removeIcon")
-                span.text {{$t('removeManager2')}}
-            b-dropdown-item(@click='viewProgress(member)', v-if='challengeId')
-              span.dropdown-icon-item
-                span.text {{ $t('viewProgress') }}
-            b-dropdown-item(@click='removeMember(member, index)', v-if='shouldShowLeaderFunctions(member._id)')
-              span.dropdown-icon-item
-                .svg-icon.inline(v-html="icons.removeIcon")
-                span.text {{$t('removeMember')}}
-      .row(v-if='isLoadMoreAvailable')
-        .col-12.text-center
-          button.btn.btn-secondary(@click='loadMoreMembers()') {{ $t('loadMore') }}
-      .row.gradient(v-if='members.length > 3')
-    div(v-if='selectedPage === "invites"')
-      .row(v-for='(member, index) in invites')
-        .col-11.no-padding-left
-          member-details(:member='member')
-        .col-1.actions
-          b-dropdown(right=true)
-            .svg-icon.inline.dots(slot='button-content', v-html="icons.dots")
-            b-dropdown-item(@click='removeInvite(member, index)', v-if='isLeader')
-              span.dropdown-icon-item
-                .svg-icon.inline(v-html="icons.removeIcon", v-if='isLeader')
-                span.text {{$t('removeInvite')}}
-    .modal-footer
-      button.btn.btn-primary(@click='close()') {{ $t('close') }}
+<template>
+  <!-- @TODO: Move this to a member directory--><div>
+    <remove-member-modal
+      :member-to-remove="memberToRemove"
+      :group-id="this.groupId"
+      @member-removed="memberRemoved"
+    /><b-modal
+      id="members-modal"
+      :title="$t('createGuild')"
+      size="md"
+      :hide-footer="true"
+    >
+      <div
+        slot="modal-header"
+        class="header-wrap"
+      >
+        <div class="row">
+          <div class="col-6">
+            <h1 v-once>
+              {{ $t('members') }}
+            </h1>
+          </div><div class="col-6">
+            <button
+              class="close"
+              type="button"
+              aria-label="Close"
+              @click="close()"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+        </div><div class="row d-flex align-items-center">
+          <div class="col-4">
+            <input
+              v-model="searchTerm"
+              class="form-control input-search"
+              type="text"
+              :placeholder="$t('search')"
+            >
+          </div><div class="col">
+            <select
+              class="form-control"
+              @change="changeSortOption($event)"
+            >
+              <option
+                v-for="sortOption in sortOptions"
+                :value="sortOption.value"
+              >
+                {{ sortOption.text }}
+              </option>
+            </select>
+          </div><div class="col-3">
+            <select
+              class="form-control"
+              @change="changeSortDirection($event)"
+            >
+              <option
+                v-for="sortDirection in sortDirections"
+                :value="sortDirection.value"
+              >
+                {{ sortDirection.text }}
+              </option>
+            </select>
+          </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
+        v-if="invites.length > 0"
+        class="row"
+      >
+        <div class="col-6 offset-3 nav">
+          <div
+            class="nav-item"
+            :class="{active: selectedPage === 'members'}"
+            @click="viewMembers()"
+          >
+            {{ $t('members') }}
+          </div><div
+            class="nav-item"
+            :class="{active: selectedPage === 'invites'}"
+            @click="viewInvites()"
+          >
+            {{ $t('invites') }}
+          </div>
+        </div>
+      </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">
+            <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
+                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
+                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
+                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
+                v-if="challengeId"
+                @click="viewProgress(member)"
+              >
+                <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>
+              </b-dropdown-item>
+            </b-dropdown>
+          </div>
+        </div><div
+          v-if="isLoadMoreAvailable"
+          class="row"
+        >
+          <div class="col-12 text-center">
+            <button
+              class="btn btn-secondary"
+              @click="loadMoreMembers()"
+            >
+              {{ $t('loadMore') }}
+            </button>
+          </div>
+        </div><div
+          v-if="members.length > 3"
+          class="row gradient"
+        ></div>
+      </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">
+            <b-dropdown right="right">
+              <div
+                slot="button-content"
+                class="svg-icon inline dots"
+                v-html="icons.dots"
+              ></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>
+              </b-dropdown-item>
+            </b-dropdown>
+          </div>
+        </div>
+      </div><div class="modal-footer">
+        <button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('close') }}
+        </button>
+      </div>
+    </b-modal>
+  </div>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/groups/myGuilds.vue b/website/client/src/components/groups/myGuilds.vue
index b3e4c157c1..682cb7e1e7 100644
--- a/website/client/src/components/groups/myGuilds.vue
+++ b/website/client/src/components/groups/myGuilds.vue
@@ -1,35 +1,70 @@
-<template lang="pug">
-.row
-  sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
-
-  .standard-page
-    .row
-      .col-md-8.text-left
-        h1.page-header(v-once) {{ $t('myGuilds') }}
-        h2(v-if='loading && guilds.length === 0') {{ $t('loading') }}
-      .col-4
-        button.btn.btn-secondary.create-group-button.float-right(@click='createGroup()')
-          .svg-icon.positive-icon(v-html="icons.positiveIcon")
-          span(v-once) {{$t('createGuild2')}}
-        // @TODO: Add when we implement recent activity .float-right
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
-
-    .row
-      .no-guilds.text-center.col-md-6.offset-md-3(v-if='!loading && guilds.length === 0')
-        .svg-icon(v-html='icons.greyBadge')
-        h2(v-once) {{$t('noGuildsTitle')}}
-        p(v-once) {{$t('noGuildsParagraph1')}}
-        p(v-once) {{$t('noGuildsParagraph2')}}
-
-    .row
-      .no-guilds.text-center.col-md-6.offset-md-3(v-if='!loading && guilds.length > 0 && filteredGuilds.length === 0')
-        h2(v-once) {{$t('noGuildsMatchFilters')}}
-
-    .row
-      .col-md-12
-        public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-gem-bank='true')
+<template>
+  <div class="row">
+    <sidebar
+      @search="updateSearch"
+      @filter="updateFilters"
+    /><div class="standard-page">
+      <div class="row">
+        <div class="col-md-8 text-left">
+          <h1
+            v-once
+            class="page-header"
+          >
+            {{ $t('myGuilds') }}
+          </h1><h2 v-if="loading && guilds.length === 0">
+            {{ $t('loading') }}
+          </h2>
+        </div><div class="col-4">
+          <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><!-- @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
+          v-if="!loading && guilds.length === 0"
+          class="no-guilds text-center col-md-6 offset-md-3"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.greyBadge"
+          ></div><h2 v-once>
+            {{ $t('noGuildsTitle') }}
+          </h2><p v-once>
+            {{ $t('noGuildsParagraph1') }}
+          </p><p v-once>
+            {{ $t('noGuildsParagraph2') }}
+          </p>
+        </div>
+      </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"
+        >
+          <h2 v-once>
+            {{ $t('noGuildsMatchFilters') }}
+          </h2>
+        </div>
+      </div><div class="row">
+        <div class="col-md-12">
+          <public-guild-item
+            v-for="guild in filteredGuilds"
+            :key="guild._id"
+            :guild="guild"
+            :display-gem-bank="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groups/newPartyModal.pug b/website/client/src/components/groups/newPartyModal.pug
deleted file mode 100644
index 7cecf2c272..0000000000
--- a/website/client/src/components/groups/newPartyModal.pug
+++ /dev/null
@@ -1,20 +0,0 @@
-<template lang="pug">
-div
-  button.btn.btn-primary(b-btn, @click="$root.$emit('bv::show::modal','new-party-modal')") {{ $t('viewMembers') }}
-
-  b-modal#new-party-modal(:title="$t('createGuild')", size='lg')
-    .header-wrap(slot="modal-header")
-      .row
-        .col-6
-          h1(v-once) {{$t('members')}}
-        .col-6
-          button(type="button" aria-label="Close" class="close")
-            span(aria-hidden="true") ×
-      .row
-        .form-group.col-6
-          input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-        .col-4.offset-2
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(v-for='sortOption in sortOptions', @click='sort(sortOption.value)', :key='sortOption.value') {{sortOption.text}}
-</template>
diff --git a/website/client/src/components/groups/participantListModal.vue b/website/client/src/components/groups/participantListModal.vue
index 414be32710..1668f7a043 100644
--- a/website/client/src/components/groups/participantListModal.vue
+++ b/website/client/src/components/groups/participantListModal.vue
@@ -1,17 +1,45 @@
-<template lang="pug">
-  b-modal#participant-list(size='md', :hide-footer='true')
-    .header-wrap(slot="modal-header")
-      .row
-        .col-6
-          h1(v-once) {{ $t('participantsTitle') }}
-        .col-6
-          button(type="button" aria-label="Close" class="close", @click='close()')
-            span(aria-hidden="true") ×
-    .row(v-for='member in participants')
-      .col-12.no-padding-left
-        member-details(:member='member')
-    .modal-footer
-      button.btn.btn-primary(@click='close()') {{ $t('close') }}
+<template>
+  <b-modal
+    id="participant-list"
+    size="md"
+    :hide-footer="true"
+  >
+    <div
+      slot="modal-header"
+      class="header-wrap"
+    >
+      <div class="row">
+        <div class="col-6">
+          <h1 v-once>
+            {{ $t('participantsTitle') }}
+          </h1>
+        </div><div class="col-6">
+          <button
+            class="close"
+            type="button"
+            aria-label="Close"
+            @click="close()"
+          >
+            <span aria-hidden="true">×</span>
+          </button>
+        </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">
+      <button
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('close') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/groups/publicGuildItem.vue b/website/client/src/components/groups/publicGuildItem.vue
index e89a99ba95..eed0cdd582 100644
--- a/website/client/src/components/groups/publicGuildItem.vue
+++ b/website/client/src/components/groups/publicGuildItem.vue
@@ -1,31 +1,97 @@
-<template lang="pug">
-router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
-  .card
-    .card-body
-      .row
-        .col-md-2.badge-column
-          .shield-wrap(:class="{gold: guild.memberCount >= 1000, silver: guild.memberCount >= 100 && guild.memberCount < 1000}")
-            .svg-icon.shield(v-html="icons.goldGuildBadge", v-if='guild.memberCount >= 1000')
-            .svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='guild.memberCount >= 100 && guild.memberCount < 1000')
-            .svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='guild.memberCount < 100')
-            .member-count {{ guild.memberCount | abbrNum }}
-        .col-md-10
-          .row
-            .col-md-8
-                router-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
-                  h3 {{ guild.name }}
-                p.summary(v-if='guild.summary') {{guild.summary.substr(0, MAX_SUMMARY_SIZE_FOR_GUILDS)}}
-                p.summary(v-else) {{ guild.name }}
-            .col-md-2.cta-container
-              button.btn.btn-danger(v-if='isMember && displayLeave' @click.prevent='leave()', v-once) {{ $t('leave') }}
-              button.btn.btn-success(v-if='!isMember'  @click='join()', v-once) {{ $t('join') }}
-              div.item-with-icon.gem-bank(v-if='displayGemBank')
-                .svg-icon.gem(v-html="icons.gem")
-                span.count {{ guild.balance * 4 }}
-              div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
-          .row
-            category-tags.col-md-12(:categories="guild.categories", :owner="isOwner", v-once)
-              span.recommend-text(v-if='showSuggested(guild._id)')  {{$t('suggestedGroup')}}
+<template>
+  <router-link
+    class="card-link"
+    :to="{ name: 'guild', params: { groupId: guild._id } }"
+  >
+    <div class="card">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-2 badge-column">
+            <div
+              class="shield-wrap"
+              :class="{gold: guild.memberCount >= 1000, silver: guild.memberCount >= 100 && guild.memberCount < 1000}"
+            >
+              <div
+                v-if="guild.memberCount >= 1000"
+                class="svg-icon shield"
+                v-html="icons.goldGuildBadge"
+              ></div><div
+                v-if="guild.memberCount >= 100 && guild.memberCount < 1000"
+                class="svg-icon shield"
+                v-html="icons.silverGuildBadgeIcon"
+              ></div><div
+                v-if="guild.memberCount < 100"
+                class="svg-icon shield"
+                v-html="icons.bronzeGuildBadgeIcon"
+              ></div><div class="member-count">
+                {{ guild.memberCount | abbrNum }}
+              </div>
+            </div>
+          </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
+                  v-if="guild.summary"
+                  class="summary"
+                >
+                  {{ guild.summary.substr(0, MAX_SUMMARY_SIZE_FOR_GUILDS) }}
+                </p><p
+                  v-else
+                  class="summary"
+                >
+                  {{ guild.name }}
+                </p>
+              </div><div class="col-md-2 cta-container">
+                <button
+                  v-if="isMember && displayLeave"
+                  v-once
+                  class="btn btn-danger"
+                  @click.prevent="leave()"
+                >
+                  {{ $t('leave') }}
+                </button><button
+                  v-if="!isMember"
+                  v-once
+                  class="btn btn-success"
+                  @click="join()"
+                >
+                  {{ $t('join') }}
+                </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
+                  v-if="displayGemBank"
+                  v-once
+                  class="guild-bank"
+                >
+                  {{ $t('guildBank') }}
+                </div>
+              </div>
+            </div><div class="row">
+              <category-tags
+                v-once
+                class="col-md-12"
+                :categories="guild.categories"
+                :owner="isOwner"
+              >
+                <span
+                  v-if="showSuggested(guild._id)"
+                  class="recommend-text"
+                > {{ $t('suggestedGroup') }}</span>
+              </category-tags>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </router-link>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groups/questDetailsModal.vue b/website/client/src/components/groups/questDetailsModal.vue
index 41c3a5f7be..10ce6d302b 100644
--- a/website/client/src/components/groups/questDetailsModal.vue
+++ b/website/client/src/components/groups/questDetailsModal.vue
@@ -1,26 +1,74 @@
-<template lang="pug">
-  b-modal#quest-details(title="Empty", size='md', :hide-footer="true", :hide-header="true")
-    .left-panel.content
-      h3.text-center {{ $t('participantsTitle') }}
-      .row
-        .col-10.offset-1.text-center
-          span.description(v-once) {{ $t('participantDesc') }}
-      .row
-        .col-12.member(v-for='member in members')
-          strong(:class="{'declined-name': member.accepted === false}") {{member.name}}
-          .accepted.float-right(v-if='member.accepted === true') {{ $t('accepted') }}
-          .declined.float-right(v-if='member.accepted === false') {{ $t('declined') }}
-          .pending.float-right(v-if='member.accepted === null') {{ $t('pending') }}
-    div(v-if='questData')
-      questDialogContent(:item="questData")
-    div.text-center.actions(v-if='canEditQuest')
-      div
-        button.btn.btn-secondary(v-once, @click="questConfirm()") {{ $t('begin') }}
-        // @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
-        .cancel(v-once, @click="questCancel()") {{ $t('cancel') }}
-    .side-panel(v-if='questData')
-      questDialogDrops(:item="questData")
+<template>
+  <b-modal
+    id="quest-details"
+    title="Empty"
+    size="md"
+    :hide-footer="true"
+    :hide-header="true"
+  >
+    <div class="left-panel content">
+      <h3 class="text-center">
+        {{ $t('participantsTitle') }}
+      </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
+          v-for="member in members"
+          class="col-12 member"
+        >
+          <strong :class="{'declined-name': member.accepted === false}">{{ member.name }}</strong><div
+            v-if="member.accepted === true"
+            class="accepted float-right"
+          >
+            {{ $t('accepted') }}
+          </div><div
+            v-if="member.accepted === false"
+            class="declined float-right"
+          >
+            {{ $t('declined') }}
+          </div><div
+            v-if="member.accepted === null"
+            class="pending float-right"
+          >
+            {{ $t('pending') }}
+          </div>
+        </div>
+      </div>
+    </div><div v-if="questData">
+      <questDialogContent :item="questData" />
+    </div><div
+      v-if="canEditQuest"
+      class="text-center actions"
+    >
+      <div>
+        <button
+          v-once
+          class="btn btn-secondary"
+          @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>
+        <div
+          v-once
+          class="cancel"
+          @click="questCancel()"
+        >
+          {{ $t('cancel') }}
+        </div>
+      </div>
+    </div><div
+      v-if="questData"
+      class="side-panel"
+    >
+      <questDialogDrops :item="questData" />
+    </div>
+  </b-modal>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/groups/questSidebarSection.vue b/website/client/src/components/groups/questSidebarSection.vue
index 7eb2e897ee..e055ceaae2 100644
--- a/website/client/src/components/groups/questSidebarSection.vue
+++ b/website/client/src/components/groups/questSidebarSection.vue
@@ -1,68 +1,169 @@
-<template lang="pug">
-sidebar-section(:title="$t('questDetailsTitle')")
-  .row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
-    .col-12.text-center
-      .svg-icon(v-html="icons.questIcon")
-      h4(v-once) {{ $t('youAreNotOnQuest') }}
-      p(v-once) {{ $t('questDescription') }}
-      button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
-  .row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
-    .col-2
-      .quest(:class='`inventory_quest_scroll_${questData.key}`')
-    .col-6.titles
-      strong {{ questData.text() }}
-      p {{acceptedCount}} / {{group.memberCount}}
-    .col-4
-      button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
-  .row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
-    span {{ $t('wouldYouParticipate') }}
-    button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
-    button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
-  .row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
-    .col-12.text-center
-      .quest-boss(:class="'quest_' + questData.key")
-      h3(v-once) {{ questData.text() }}
-      .quest-box
-        .collect-info(v-if='questData.collect')
-          .row
-            .col-12
-              a.float-right(@click="openParticipantList()") {{ $t('participantsTitle') }}
-          .row(v-for='(value, key) in questData.collect')
-            .col-2
-              div(:class="'quest_' + questData.key + '_' + key")
-            .col-10
-              strong {{value.text()}}
-              .grey-progress-bar
-                .collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
-              strong {{group.quest.progress.collect[key]}} / {{value.count}}
-          div.text-right(v-if='userIsOnQuest') {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
-        .boss-info(v-if='questData.boss')
-          .row
-            .col-6
-              h4.float-left(v-once) {{ questData.boss.name() }}
-            .col-6
-              a.float-right(@click="openParticipantList()") {{ $t('participantsTitle') }}
-          .row
-            .col-12
-              .grey-progress-bar
-                .boss-health-bar(:style="{width: bossHpPercent + '%'}")
-          .row.boss-details
-            .col-6
-              span.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
-            .col-6(v-if='userIsOnQuest')
-              // @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
-              span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
-              // player's pending damage uses floor so you don't overestimate damage you've already done
-          .row.rage-bar-row(v-if='questData.boss.rage')
-            .col-12
-              .grey-progress-bar
-                .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
-          .row.boss-details.rage-details(v-if='questData.boss.rage')
-              .col-6
-                span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
-      button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
+<template>
+  <sidebar-section :title="$t('questDetailsTitle')">
+    <div
+      v-if="!onPendingQuest && !onActiveQuest"
+      class="row no-quest-section"
+    >
+      <div class="col-12 text-center">
+        <div
+          class="svg-icon"
+          v-html="icons.questIcon"
+        ></div><h4 v-once>
+          {{ $t('youAreNotOnQuest') }}
+        </h4><p v-once>
+          {{ $t('questDescription') }}
+        </p><button
+          v-once
+          class="btn btn-secondary"
+          @click="openStartQuestModal()"
+        >
+          {{ $t('startAQuest') }}
+        </button>
+      </div>
+    </div><div
+      v-if="onPendingQuest && !onActiveQuest"
+      class="row quest-active-section"
+    >
+      <div class="col-2">
+        <div
+          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">
+        <button
+          class="btn btn-secondary"
+          @click="openQuestDetails()"
+        >
+          {{ $t('details') }}
+        </button>
+      </div>
+    </div><div
+      v-if="user.party.quest && user.party.quest.RSVPNeeded"
+      class="row quest-active-section quest-invite"
+    >
+      <span>{{ $t('wouldYouParticipate') }}</span><button
+        class="btn btn-primary accept"
+        @click="questAccept(group._id)"
+      >
+        {{ $t('accept') }}
+      </button><button
+        class="btn btn-primary reject"
+        @click="questReject(group._id)"
+      >
+        {{ $t('reject') }}
+      </button>
+    </div><div
+      v-if="!onPendingQuest && onActiveQuest"
+      class="row quest-active-section"
+    >
+      <div class="col-12 text-center">
+        <div
+          class="quest-boss"
+          :class="'quest_' + questData.key"
+        ></div><h3 v-once>
+          {{ questData.text() }}
+        </h3><div class="quest-box">
+          <div
+            v-if="questData.collect"
+            class="collect-info"
+          >
+            <div class="row">
+              <div class="col-12">
+                <a
+                  class="float-right"
+                  @click="openParticipantList()"
+                >{{ $t('participantsTitle') }}</a>
+              </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
+                    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>
+            </div><div
+              v-if="userIsOnQuest"
+              class="text-right"
+            >
+              {{ parseFloat(user.party.quest.progress.collectedItems) || 0 }} items found
+            </div>
+          </div><div
+            v-if="questData.boss"
+            class="boss-info"
+          >
+            <div class="row">
+              <div class="col-6">
+                <h4
+                  v-once
+                  class="float-left"
+                >
+                  {{ questData.boss.name() }}
+                </h4>
+              </div><div class="col-6">
+                <a
+                  class="float-right"
+                  @click="openParticipantList()"
+                >{{ $t('participantsTitle') }}</a>
+              </div>
+            </div><div class="row">
+              <div class="col-12">
+                <div class="grey-progress-bar">
+                  <div
+                    class="boss-health-bar"
+                    :style="{width: bossHpPercent + '%'}"
+                  ></div>
+                </div>
+              </div>
+            </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
+                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-->
+              </div>
+            </div><div
+              v-if="questData.boss.rage"
+              class="row rage-bar-row"
+            >
+              <div class="col-12">
+                <div class="grey-progress-bar">
+                  <div
+                    class="boss-health-bar rage-bar"
+                    :style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}"
+                  ></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>
+              </div>
+            </div>
+          </div>
+        </div><button
+          v-if="canEditQuest"
+          v-once
+          class="btn btn-secondary"
+          @click="questAbort()"
+        >
+          {{ $t('abort') }}
+        </button>
+      </div>
+    </div>
+  </sidebar-section>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/groups/sidebar.vue b/website/client/src/components/groups/sidebar.vue
index d1708b3003..ba27cfb328 100644
--- a/website/client/src/components/groups/sidebar.vue
+++ b/website/client/src/components/groups/sidebar.vue
@@ -1,37 +1,78 @@
-<template lang="pug">
-.standard-sidebar.d-none.d-sm-block
-  .form-group
-    input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-
-  form
-    h2(v-once) {{ $t('filter') }}
-    .form-group
-      h3 {{ $t('category') }}
-      .form-check(
-        v-for="group in categoryOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
-    .form-group
-      h3 {{ $t('role') }}
-      .form-check(
-        v-for="group in roleOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
-    .form-group
-      h3 {{ $t('guildSize') }}
-      .form-check(
-        v-for="group in guildSizeOptions",
-        :key="group.key",
-      )
-        .custom-control.custom-checkbox
-          input.custom-control-input(type="checkbox", :value='group.key' v-model="guildSizeFilters", :id="group.key")
-          label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
+<template>
+  <div class="standard-sidebar d-none d-sm-block">
+    <div class="form-group">
+      <input
+        v-model="searchTerm"
+        class="form-control search"
+        type="text"
+        :placeholder="$t('search')"
+      >
+    </div><form>
+      <h2 v-once>
+        {{ $t('filter') }}
+      </h2><div class="form-group">
+        <h3>{{ $t('category') }}</h3><div
+          v-for="group in categoryOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="categoryFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><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
+          v-for="group in roleOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="roleFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><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
+          v-for="group in guildSizeOptions"
+          :key="group.key"
+          class="form-check"
+        >
+          <div class="custom-control custom-checkbox">
+            <input
+              :id="group.key"
+              v-model="guildSizeFilters"
+              class="custom-control-input"
+              type="checkbox"
+              :value="group.key"
+            ><label
+              v-once
+              class="custom-control-label"
+              :for="group.key"
+            >{{ $t(group.label) }}</label>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/groups/startQuestModal.vue b/website/client/src/components/groups/startQuestModal.vue
index 1f1ffccc39..e7c3e5b873 100644
--- a/website/client/src/components/groups/startQuestModal.vue
+++ b/website/client/src/components/groups/startQuestModal.vue
@@ -1,31 +1,65 @@
-<template lang="pug">
-  b-modal#start-quest-modal(title="Empty", size='md', :hide-footer="true", :hide-header="true")
-    .left-panel.content
-      h3.text-center Quests
-      .row
-        .col-4.quest-col(
-          v-for='(value, key, index) in user.items.quests',
-          @click='selectQuest({key})',
-          :class="{selected: key === selectedQuest}", v-if='value > 0')
-          .quest-wrapper
-            b-popover(
+<template>
+  <b-modal
+    id="start-quest-modal"
+    title="Empty"
+    size="md"
+    :hide-footer="true"
+    :hide-header="true"
+  >
+    <div class="left-panel content">
+      <h3 class="text-center">
+        Quests
+      </h3><div class="row">
+        <div
+          v-for="(value, key, index) in user.items.quests"
+          v-if="value > 0"
+          class="col-4 quest-col"
+          :class="{selected: key === selectedQuest}"
+          @click="selectQuest({key})"
+        >
+          <div class="quest-wrapper">
+            <b-popover
               :target="`inventory_quest_scroll_${key}`"
-               placement="top"
-               triggers="hover")
-                 h4.popover-content-title {{ quests.quests[key].text() }}
-                 questInfo(:quest="quests.quests[key]")
-            .quest(:class="`inventory_quest_scroll_${key}`", :id="`inventory_quest_scroll_${key}`")
-      .row
-        .col-10.offset-1.text-center
-          span.description(v-once) {{ $t('noQuestToStart') }}
-    div(v-if='questData')
-      questDialogContent(:item="questData")
-    div.text-center
-      button.btn.btn-primary(@click='questInit()', :disabled="!Boolean(selectedQuest) || loading") {{$t('inviteToPartyOrQuest')}}
-    div.text-center
-      p {{$t('inviteInformation')}}
-    .side-panel(v-if='questData')
-      questDialogDrops(:item="questData")
+              placement="top"
+              triggers="hover"
+            >
+              <h4 class="popover-content-title">
+                {{ quests.quests[key].text() }}
+              </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 class="col-10 offset-1 text-center">
+          <span
+            v-once
+            class="description"
+          >{{ $t('noQuestToStart') }}</span>
+        </div>
+      </div>
+    </div><div v-if="questData">
+      <questDialogContent :item="questData" />
+    </div><div class="text-center">
+      <button
+        class="btn btn-primary"
+        :disabled="!Boolean(selectedQuest) || loading"
+        @click="questInit()"
+      >
+        {{ $t('inviteToPartyOrQuest') }}
+      </button>
+    </div><div class="text-center">
+      <p>{{ $t('inviteInformation') }}</p>
+    </div><div
+      v-if="questData"
+      class="side-panel"
+    >
+      <questDialogDrops :item="questData" />
+    </div>
+  </b-modal>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/groups/tavern.vue b/website/client/src/components/groups/tavern.vue
index b2c2aae514..3666ba0143 100644
--- a/website/client/src/components/groups/tavern.vue
+++ b/website/client/src/components/groups/tavern.vue
@@ -1,164 +1,392 @@
-<template lang="pug">
-.row
-  world-boss-info-modal
-  world-boss-rage-modal
-  .col-12.col-sm-8.clearfix.standard-page
-    .row
-      .col-6.title-details
-        h1(v-once) {{ $t('welcomeToTavern') }}
-
-    chat(
-      :label="$t('tavernChat')",
-      :group="group",
-      :placeholder="$t('tavernCommunityGuidelinesPlaceholder')",
-      @fetchRecentMessages="fetchRecentMessages()"
-    )
-  .col-12.col-sm-4.sidebar
-    .section
-      .grassy-meadow-backdrop
-        .daniel_front
-
-      .boss-section
-        .world-boss(v-if='group && group.quest && group.quest.active', :style="{background: questData.colors.dark, 'border-color': questData.colors.extralight, 'outline-color': questData.colors.light}")
-          .corner-decoration(:style="{top: '-2px', right: '-2px'}")
-          .corner-decoration(:style="{top: '-2px', left: '-2px'}")
-          .corner-decoration(:style="{bottom: '-2px', right: '-2px'}")
-          .corner-decoration(:style="{bottom: '-2px', left: '-2px'}")
-          .text-center.float-bar.d-flex.align-items-center
-            span.diamond
-            span.strong.reduce(:style="{background: questData.colors.dark}") {{ $t('worldBossEvent') }}
-            span.diamond
-          .boss-gradient.pb-3.pt-3
-            p.text-center.reduce(:style="{color: questData.colors.extralight}") {{ $t(`${questData.key}ArtCredit`) }}
-            .quest-boss(:class="'background_' + questData.key")
-              .quest-boss(:class="'quest_' + questData.key")
-              .quest-boss(:class="'phobia_' + questData.key", :style="{display: 'none'}")
-          .p-3
-            .row.d-flex.align-items-center.mb-2
-              .col-sm-6
-                strong.float-left {{ questData.boss.name() }}
-              .col-sm-6
-                span.d-flex.float-right
-                  .svg-icon.boss-icon(v-html="icons.swordIcon")
-                  span.ml-1.reduce(:style="{color: questData.colors.extralight}") {{ $t('pendingDamage', {damage: pendingDamage()}) }}
-            .grey-progress-bar.mb-1
-              .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
-            span.d-flex.align-items-center
-              .svg-icon.boss-icon(v-html="icons.healthIcon")
-              span.reduce.ml-1.pt-1 {{ $t('bossHealth', {currentHealth: bossCurrentHealth(), maxHealth: questData.boss.hp.toLocaleString()}) }}
-            .mt-3.mb-2
-              strong.mr-1 {{ $t('rageAttack') }}
-              span {{ questData.boss.rage.title() }}
-            .grey-progress-bar.mb-1
-              .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
-            span.d-flex.align-items-center
-              .svg-icon.boss-icon(v-html="icons.rageIcon")
-              span.reduce.ml-1.pt-1 {{ $t('bossRage', {currentRage: bossCurrentRage(), maxRage: questData.boss.rage.value.toLocaleString()}) }}
-            .row.d-flex.align-items-center.mb-2.mt-2
-              .col-sm-4.d-flex
-                strong.mr-2 {{ $t('rageStrikes') }}
-                .svg-icon.boss-icon.information-icon.m-auto(v-html="icons.informationIcon", v-b-tooltip.hover.top="questData.boss.rage.description()")
-              .col-sm-8.d-flex.align-items-center.justify-content-center
-                .m-auto(@click="showWorldBossRage('seasonalShop')")
-                  img.rage-strike(src="~@/assets/images/world-boss/rage_strike@2x.png", v-if="!group.quest.extra.worldDmg.seasonalShop")
-                  img.rage-strike-active(src="~@/assets/images/world-boss/rage_strike-seasonalShop@2x.png", v-if="group.quest.extra.worldDmg.seasonalShop")
-                .m-auto(@click="showWorldBossRage('market')")
-                  img.rage-strike(src="~@/assets/images/world-boss/rage_strike@2x.png", v-if="!group.quest.extra.worldDmg.market")
-                  img.rage-strike-active(src="~@/assets/images/world-boss/rage_strike-market@2x.png", v-if="group.quest.extra.worldDmg.market")
-                .m-auto(@click="showWorldBossRage('quests')")
-                  img.rage-strike(src="~@/assets/images/world-boss/rage_strike@2x.png", v-if="!group.quest.extra.worldDmg.quests")
-                  img.rage-strike-active(src="~@/assets/images/world-boss/rage_strike-quests@2x.png", v-if="group.quest.extra.worldDmg.quests")
-            .boss-description.p-3(:style="{'border-color': questData.colors.extralight}", @click="sections.worldBoss = !sections.worldBoss")
-              strong.float-left {{ $t('worldBossDescription') }}
-              .float-right
-                .toggle-down(v-if="!sections.worldBoss")
-                  .svg-icon.boss-icon(v-html="icons.chevronIcon")
-                .toggle-up(v-if="sections.worldBoss")
-                  .svg-icon.boss-icon.reverse(v-html="icons.chevronIcon")
-            .mt-3(v-if="sections.worldBoss", v-html="questData.notes()")
-        // .text-center.mt-4
-          .world-boss-info-button(@click="showWorldBossInfo()") {{$t('whatIsWorldBoss') }}
-
-      .sleep.below-header-sections
-        strong(v-once) {{ $t('sleepDescription') }}
-        ul
-          li(v-once) {{ $t('sleepBullet1') }}
-          li(v-once) {{ $t('sleepBullet2') }}
-          li(v-once) {{ $t('sleepBullet3') }}
-          li(v-once) {{ $t('sleepBullet4') }}
-        button.btn.btn-secondary.pause-button(v-if='!user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('pauseDailies') }}
-        button.btn.btn-secondary.pause-button(v-if='user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('unpauseDailies') }}
-    .px-3
-      sidebar-section(:title="$t('staffAndModerators')")
-        .row
-          .col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
-            div
-              router-link.title(:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}") {{user.name}}
-              .svg-icon.staff-icon(v-html="icons.tierStaff", v-if='user.type === "Staff"')
-              .svg-icon.mod-icon(v-html="icons.tierMod", v-if='user.type === "Moderator" && user.name !== "It\'s Bailey"')
-              .svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
-            .type {{user.type}}
-
-      sidebar-section(:title="$t('helpfulLinks')")
-        ul
-          li
-            a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
-          li
-           router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
-          li
-            router-link(to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601") {{ $t('lookingForGroup') }}
-          li
-           router-link(to='/static/faq', v-once) {{ $t('faq') }}
-          li
-            a(href='', v-html="$t('glossary')")
-          li
-            a(href='http://habitica.fandom.com/wiki/Habitica_Wiki' target='_blank', v-once) {{ $t('wiki') }}
-          li
-            a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', target='_blank', v-once) {{ $t('dataDisplayTool') }}
-          li
-            router-link(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportProblem') }}
-          li
-            a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', target='_blank', v-once) {{ $t('requestFeature') }}
-          li
-            a(href='', v-html="$t('communityForum')")
-          li
-            router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
-
-      sidebar-section(:title="$t('playerTiers')")
-        .row
-          .col-12
-            p(v-once) {{ $t('playerTiersDesc') }}
-            ul.tier-list
-              li.tier1(v-once)
-               | {{ $t('tier1') }}
-               .svg-icon.tier1-icon(v-html="icons.tier1")
-              li.tier2(v-once)
-                | {{ $t('tier2') }}
-                .svg-icon.tier2-icon(v-html="icons.tier2")
-              li.tier3(v-once)
-                | {{ $t('tier3') }}
-                .svg-icon.tier3-icon(v-html="icons.tier3")
-              li.tier4(v-once)
-                | {{ $t('tier4') }}
-                .svg-icon.tier4-icon(v-html="icons.tier4")
-              li.tier5(v-once)
-                | {{ $t('tier5') }}
-                .svg-icon.tier5-icon(v-html="icons.tier5")
-              li.tier6(v-once)
-                | {{ $t('tier6') }}
-                .svg-icon.tier6-icon(v-html="icons.tier6")
-              li.tier7(v-once)
-                | {{ $t('tier7') }}
-                .svg-icon.tier7-icon(v-html="icons.tier7")
-              li.moderator(v-once)
-                | {{ $t('tierModerator') }}
-                .svg-icon.mod-icon(v-html="icons.tierMod")
-              li.staff(v-once)
-                | {{ $t('tierStaff') }}
-                .svg-icon.staff-icon(v-html="icons.tierStaff")
-              li.npc(v-once)
-                | {{ $t('tierNPC') }}
-                .svg-icon.npc-icon(v-html="icons.tierNPC")
+<template>
+  <div class="row">
+    <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
+        :label="$t('tavernChat')"
+        :group="group"
+        :placeholder="$t('tavernCommunityGuidelinesPlaceholder')"
+        @fetchRecentMessages="fetchRecentMessages()"
+      />
+    </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
+            v-if="group && group.quest && group.quest.active"
+            class="world-boss"
+            :style="{background: questData.colors.dark, 'border-color': questData.colors.extralight, 'outline-color': questData.colors.light}"
+          >
+            <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 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">
+              <p
+                class="text-center reduce"
+                :style="{color: questData.colors.extralight}"
+              >
+                {{ $t(`${questData.key}ArtCredit`) }}
+              </p><div
+                class="quest-boss"
+                :class="'background_' + questData.key"
+              >
+                <div
+                  class="quest-boss"
+                  :class="'quest_' + questData.key"
+                ></div><div
+                  class="quest-boss"
+                  :class="'phobia_' + questData.key"
+                  :style="{display: 'none'}"
+                ></div>
+              </div>
+            </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="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
+                  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 class="col-sm-4 d-flex">
+                  <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
+                    class="m-auto"
+                    @click="showWorldBossRage('seasonalShop')"
+                  >
+                    <img
+                      v-if="!group.quest.extra.worldDmg.seasonalShop"
+                      class="rage-strike"
+                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                    ><img
+                      v-if="group.quest.extra.worldDmg.seasonalShop"
+                      class="rage-strike-active"
+                      src="~@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
+                    >
+                  </div><div
+                    class="m-auto"
+                    @click="showWorldBossRage('market')"
+                  >
+                    <img
+                      v-if="!group.quest.extra.worldDmg.market"
+                      class="rage-strike"
+                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                    ><img
+                      v-if="group.quest.extra.worldDmg.market"
+                      class="rage-strike-active"
+                      src="~@/assets/images/world-boss/rage_strike-market@2x.png"
+                    >
+                  </div><div
+                    class="m-auto"
+                    @click="showWorldBossRage('quests')"
+                  >
+                    <img
+                      v-if="!group.quest.extra.worldDmg.quests"
+                      class="rage-strike"
+                      src="~@/assets/images/world-boss/rage_strike@2x.png"
+                    ><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
+                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">
+                  <div
+                    v-if="!sections.worldBoss"
+                    class="toggle-down"
+                  >
+                    <div
+                      class="svg-icon boss-icon"
+                      v-html="icons.chevronIcon"
+                    ></div>
+                  </div><div
+                    v-if="sections.worldBoss"
+                    class="toggle-up"
+                  >
+                    <div
+                      class="svg-icon boss-icon reverse"
+                      v-html="icons.chevronIcon"
+                    ></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>
+            <li v-once>
+              {{ $t('sleepBullet1') }}
+            </li><li v-once>
+              {{ $t('sleepBullet2') }}
+            </li><li v-once>
+              {{ $t('sleepBullet3') }}
+            </li><li v-once>
+              {{ $t('sleepBullet4') }}
+            </li>
+          </ul><button
+            v-if="!user.preferences.sleep"
+            v-once
+            class="btn btn-secondary pause-button"
+            @click="toggleSleep()"
+          >
+            {{ $t('pauseDailies') }}
+          </button><button
+            v-if="user.preferences.sleep"
+            v-once
+            class="btn btn-secondary pause-button"
+            @click="toggleSleep()"
+          >
+            {{ $t('unpauseDailies') }}
+          </button>
+        </div>
+      </div><div class="px-3">
+        <sidebar-section :title="$t('staffAndModerators')">
+          <div class="row">
+            <div
+              v-for="user in staff"
+              class="col-4 staff"
+              :class="{staff: user.type === 'Staff', moderator: user.type === 'Moderator', bailey: user.name === 'It's Bailey'}"
+            >
+              <div>
+                <router-link
+                  class="title"
+                  :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
+                >
+                  {{ user.name }}
+                </router-link><div
+                  v-if="user.type === 'Staff'"
+                  class="svg-icon staff-icon"
+                  v-html="icons.tierStaff"
+                ></div><div
+                  v-if="user.type === 'Moderator' && user.name !== 'It's Bailey'"
+                  class="svg-icon mod-icon"
+                  v-html="icons.tierMod"
+                ></div><div
+                  v-if="user.name === 'It's Bailey'"
+                  class="svg-icon npc-icon"
+                  v-html="icons.tierNPC"
+                ></div>
+              </div><div class="type">
+                {{ user.type }}
+              </div>
+            </div>
+          </div>
+        </sidebar-section><sidebar-section :title="$t('helpfulLinks')">
+          <ul>
+            <li>
+              <a
+                href=""
+                @click.prevent="modForm()"
+              >{{ $t('contactForm') }}</a>
+            </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">
+                {{ $t('lookingForGroup') }}
+              </router-link>
+            </li><li>
+              <router-link
+                v-once
+                to="/static/faq"
+              >
+                {{ $t('faq') }}
+              </router-link>
+            </li><li>
+              <a
+                href=""
+                v-html="$t('glossary')"
+              ></a>
+            </li><li>
+              <a
+                v-once
+                href="http://habitica.fandom.com/wiki/Habitica_Wiki"
+                target="_blank"
+              >{{ $t('wiki') }}</a>
+            </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">
+                {{ $t('reportProblem') }}
+              </router-link>
+            </li><li>
+              <a
+                v-once
+                href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents"
+                target="_blank"
+              >{{ $t('requestFeature') }}</a>
+            </li><li>
+              <a
+                href=""
+                v-html="$t('communityForum')"
+              ></a>
+            </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')">
+          <div class="row">
+            <div class="col-12">
+              <p v-once>
+                {{ $t('playerTiersDesc') }}
+              </p><ul class="tier-list">
+                <li
+                  v-once
+                  class="tier1"
+                >
+                  {{ $t('tier1') }}<div
+                    class="svg-icon tier1-icon"
+                    v-html="icons.tier1"
+                  ></div>
+                </li><li
+                  v-once
+                  class="tier2"
+                >
+                  {{ $t('tier2') }}<div
+                    class="svg-icon tier2-icon"
+                    v-html="icons.tier2"
+                  ></div>
+                </li><li
+                  v-once
+                  class="tier3"
+                >
+                  {{ $t('tier3') }}<div
+                    class="svg-icon tier3-icon"
+                    v-html="icons.tier3"
+                  ></div>
+                </li><li
+                  v-once
+                  class="tier4"
+                >
+                  {{ $t('tier4') }}<div
+                    class="svg-icon tier4-icon"
+                    v-html="icons.tier4"
+                  ></div>
+                </li><li
+                  v-once
+                  class="tier5"
+                >
+                  {{ $t('tier5') }}<div
+                    class="svg-icon tier5-icon"
+                    v-html="icons.tier5"
+                  ></div>
+                </li><li
+                  v-once
+                  class="tier6"
+                >
+                  {{ $t('tier6') }}<div
+                    class="svg-icon tier6-icon"
+                    v-html="icons.tier6"
+                  ></div>
+                </li><li
+                  v-once
+                  class="tier7"
+                >
+                  {{ $t('tier7') }}<div
+                    class="svg-icon tier7-icon"
+                    v-html="icons.tier7"
+                  ></div>
+                </li><li
+                  v-once
+                  class="moderator"
+                >
+                  {{ $t('tierModerator') }}<div
+                    class="svg-icon mod-icon"
+                    v-html="icons.tierMod"
+                  ></div>
+                </li><li
+                  v-once
+                  class="staff"
+                >
+                  {{ $t('tierStaff') }}<div
+                    class="svg-icon staff-icon"
+                    v-html="icons.tierStaff"
+                  ></div>
+                </li><li
+                  v-once
+                  class="npc"
+                >
+                  {{ $t('tierNPC') }}<div
+                    class="svg-icon npc-icon"
+                    v-html="icons.tierNPC"
+                  ></div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </sidebar-section>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/hall/heroes.vue b/website/client/src/components/hall/heroes.vue
index 06b50ef035..32ad1a4456 100644
--- a/website/client/src/components/hall/heroes.vue
+++ b/website/client/src/components/hall/heroes.vue
@@ -1,102 +1,195 @@
-<template lang="pug">
-.row.standard-page
-  small.muted(v-html="$t('blurbHallContributors')")
-  .well
-    div(v-if='user.contributor.admin')
-      h2 Reward User
-
-      .row
-        .form.col-6(v-if='!hero.profile')
-          .form-group
-            input.form-control(type='text', v-model='heroID', :placeholder="'User ID or Username'")
-          .form-group
-            button.btn.btn-secondary(@click='loadHero(heroID)')
-              | Load User
-
-      .row
-        .form.col-6(v-if='hero && hero.profile', submit='saveHero(hero)')
-          router-link(:to="{'name': 'userProfile', 'params': {'userId': hero._id}}")
-            h3 @{{hero.auth.local.username}} &nbsp; / &nbsp; {{hero.profile.name}}
-          .form-group
-            label Contributor Title
-            input.form-control(type='text', v-model='hero.contributor.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.
-          .form-group
-            label Contributor Tier
-            input.form-control(type='number', v-model='hero.contributor.level')
-            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)
-              |,&nbsp;
-              a(target='_blank', href='https://github.com/HabitRPG/habitica/issues/3801') more details (8-9)
-          .form-group
-            label Contributions
-            textarea.form-control(cols=5, v-model='hero.contributor.contributions')
-
-          .form-group
-            label Balance
-            input.form-control(type='number', step="any", v-model='hero.balance')
-            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.
-          .accordion
-            .accordion-group(heading='Items')
-              h4.expand-toggle(:class="{'open': expandItems}", @click="expandItems = !expandItems") Update Item
-              .form-group.well(v-if="expandItems")
-                input.form-control(type='text',placeholder='Path (eg, items.pets.BearCub-Base)',v-model='hero.itemPath')
-                small.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.
-                br
-                input.form-control(type='text',placeholder='Value (eg, 5)',v-model='hero.itemVal')
-                small.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.
-                .accordion
-                  .accordion-group(heading='All Item Paths')
-                    pre {{allItemPaths}}
-                  .accordion-group(heading='Current Items')
-                    pre {{hero.items}}
-            .accordion-group(heading='Auth')
-              h4.expand-toggle(:class="{'open': expandAuth}", @click="expandAuth = !expandAuth") Auth
-              div(v-if="expandAuth")
-                pre {{hero.auth}}
-                .form-group
-                  .checkbox
-                    label
-                      input(type='checkbox', v-if='hero.flags', v-model='hero.flags.chatShadowMuted')
-                      strong Chat Shadow Muting On
-                .form-group
-                  .checkbox
-                    label
-                      input(type='checkbox', v-if='hero.flags', v-model='hero.flags.chatRevoked')
-                      strong Chat Privileges Revoked
-                .form-group
-                  .checkbox
-                    label
-                      input(type='checkbox', v-model='hero.auth.blocked')
-                      | Blocked
-
-          // h4 Backer Status
-          // Add backer stuff like tier, disable adds, etcs
-          .form-group
-            button.form-control.btn.btn-primary(@click='saveHero()')
-              | Save
-
-    .table-responsive
-      table.table.table-striped
-        thead
-          tr
-            th {{ $t('name') }}
-            th(v-if='user.contributor && user.contributor.admin') {{ $t('UUID') }}
-            th {{ $t('contribLevel') }}
-            th {{ $t('title') }}
-            th {{ $t('contributions') }}
-        tbody
-          tr(v-for='(hero, index) in heroes')
-            td
-              user-link(v-if='hero.contributor && hero.contributor.admin', :user='hero', :popover="$t('gamemaster')", popover-trigger='mouseenter', popover-placement='right')
-              user-link(v-if='!hero.contributor || !hero.contributor.admin', :user='hero')
-            td(v-if='user.contributor.admin', @click='populateContributorInput(hero._id, index)').btn-link {{hero._id}}
-            td {{hero.contributor.level}}
-            td {{hero.contributor.text}}
-            td
-              div(v-markdown='hero.contributor.contributions', target='_blank')
+<template>
+  <div class="row standard-page">
+    <small
+      class="muted"
+      v-html="$t('blurbHallContributors')"
+    ></small><div class="well">
+      <div v-if="user.contributor.admin">
+        <h2>Reward User</h2><div class="row">
+          <div
+            v-if="!hero.profile"
+            class="form col-6"
+          >
+            <div class="form-group">
+              <input
+                v-model="heroID"
+                class="form-control"
+                type="text"
+                :placeholder="'User ID or Username'"
+              >
+            </div><div class="form-group">
+              <button
+                class="btn btn-secondary"
+                @click="loadHero(heroID)"
+              >
+                Load User
+              </button>
+            </div>
+          </div>
+        </div><div class="row">
+          <div
+            v-if="hero && hero.profile"
+            class="form col-6"
+            submit="saveHero(hero)"
+          >
+            <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
+                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
+                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
+                v-model="hero.contributor.contributions"
+                class="form-control"
+                cols="5"
+              ></textarea>
+            </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">
+              <div
+                class="accordion-group"
+                heading="Items"
+              >
+                <h4
+                  class="expand-toggle"
+                  :class="{'open': expandItems}"
+                  @click="expandItems = !expandItems"
+                >
+                  Update Item
+                </h4><div
+                  v-if="expandItems"
+                  class="form-group well"
+                >
+                  <input
+                    v-model="hero.itemPath"
+                    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
+                    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">
+                    <div
+                      class="accordion-group"
+                      heading="All Item Paths"
+                    >
+                      <pre>{{ allItemPaths }}</pre>
+                    </div><div
+                      class="accordion-group"
+                      heading="Current Items"
+                    >
+                      <pre>{{ hero.items }}</pre>
+                    </div>
+                  </div>
+                </div>
+              </div><div
+                class="accordion-group"
+                heading="Auth"
+              >
+                <h4
+                  class="expand-toggle"
+                  :class="{'open': expandAuth}"
+                  @click="expandAuth = !expandAuth"
+                >
+                  Auth
+                </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>
+                    </div>
+                  </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>
+                    </div>
+                  </div><div class="form-group">
+                    <div class="checkbox">
+                      <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">
+              <button
+                class="form-control btn btn-primary"
+                @click="saveHero()"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      </div><div class="table-responsive">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <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>
+            </tr>
+          </thead><tbody>
+            <tr v-for="(hero, index) in heroes">
+              <td>
+                <user-link
+                  v-if="hero.contributor && hero.contributor.admin"
+                  :user="hero"
+                  :popover="$t('gamemaster')"
+                  popover-trigger="mouseenter"
+                  popover-placement="right"
+                /><user-link
+                  v-if="!hero.contributor || !hero.contributor.admin"
+                  :user="hero"
+                />
+              </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>
+                <div
+                  v-markdown="hero.contributor.contributions"
+                  target="_blank"
+                ></div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/hall/index.vue b/website/client/src/components/hall/index.vue
index 3251c14e17..db26033fb4 100644
--- a/website/client/src/components/hall/index.vue
+++ b/website/client/src/components/hall/index.vue
@@ -1,11 +1,24 @@
-<template lang="pug">
-.row
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'contributors'}", exact, :class="{'active': $route.name === 'contributors'}") {{ $t('hallContributors') }}
-    router-link.nav-link(:to="{name: 'patrons'}", :class="{'active': $route.name === 'patrons'}") {{ $t('hallPatrons') }}
-
-  .col-12
-    router-view
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'contributors'}"
+        exact="exact"
+        :class="{'active': $route.name === 'contributors'}"
+      >
+        {{ $t('hallContributors') }}
+      </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">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/hall/patrons.vue b/website/client/src/components/hall/patrons.vue
index 85234bbf01..334d43e684 100644
--- a/website/client/src/components/hall/patrons.vue
+++ b/website/client/src/components/hall/patrons.vue
@@ -1,20 +1,32 @@
-<template lang="pug">
-.row
-  small.muted {{ $t('blurbHallPatrons') }}
-  .table-responsive
-    table.table.table-striped(infinite-scroll="loadMore()")
-      thead
-        tr
-          th {{ $t('name') }}
-          th(v-if='user.contributor.admin') {{ $t('UUID') }}
-          th {{ $t('backerTier') }}
-      tbody
-        tr(v-for='patron in patrons')
-          td
-            a.label.label-default(v-class='userLevelStyle(patron)', @click='clickMember(patron._id, true)')
-            | {{patron.profile.name}}
-          td(v-if='user.contributor.admin') {{patron._id}}
-          td {{patron.backer.tier}}
+<template>
+  <div class="row">
+    <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">
+              {{ $t('UUID') }}
+            </th><th>{{ $t('backerTier') }}</th>
+          </tr>
+        </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">
+              {{ patron._id }}
+            </td><td>{{ patron.backer.tier }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/index.vue b/website/client/src/components/header/index.vue
index 11b2962749..4b8ac2c559 100644
--- a/website/client/src/components/header/index.vue
+++ b/website/client/src/components/header/index.vue
@@ -1,40 +1,62 @@
-<template lang="pug">
-div
-  invite-modal(:group='inviteModalGroup', :groupType='inviteModalGroupType')
-  create-party-modal
-  #app-header.row(:class="{'hide-header': $route.name === 'groupPlan'}")
-    members-modal(:hide-badge="true")
-    member-details(
-      :member="user",
-      :class-badge-position="'next-to-name'",
-      :is-header="true",
-    )
-    .view-party.d-flex.align-items-center(
-      v-if="hasParty",
-    )
-      button.btn.btn-primary.view-party-button(@click='showPartyMembers()') {{ $t('viewParty') }}
-    .party-members.d-flex(
-      v-if="hasParty",
-      v-resize="1500",
-      @resized="setPartyMembersWidth($event)"
-    )
-      member-details(
-        v-for="(member, $index) in sortedPartyMembers",
-        :key="member._id",
-        v-if="member._id !== user._id && $index < membersToShow",
-        :member="member",
-        condensed=true,
-        @onHover="expandMember(member._id)",
-        :expanded="member._id === expandedMember",
-        :is-header="true",
-        :class-badge-position="'hidden'",
-      )
-    .no-party.d-flex.justify-content-center.text-center(v-else)
-      .align-self-center
-        h3 {{ $t('battleWithFriends') }}
-        span.small-text(v-html="$t('inviteFriendsParty')")
-        br
-        button.btn.btn-primary(@click='createOrInviteParty()') {{ user.party._id ? $t('inviteFriends') : $t('startAParty') }}
+<template>
+  <div>
+    <invite-modal
+      :group="inviteModalGroup"
+      :group-type="inviteModalGroupType"
+    /><create-party-modal /><div
+      id="app-header"
+      class="row"
+      :class="{'hide-header': $route.name === 'groupPlan'}"
+    >
+      <members-modal :hide-badge="true" /><member-details
+        :member="user"
+        :class-badge-position="'next-to-name'"
+        :is-header="true"
+      /><div
+        v-if="hasParty"
+        class="view-party d-flex align-items-center"
+      >
+        <button
+          class="btn btn-primary view-party-button"
+          @click="showPartyMembers()"
+        >
+          {{ $t('viewParty') }}
+        </button>
+      </div><div
+        v-if="hasParty"
+        v-resize="1500"
+        class="party-members d-flex"
+        @resized="setPartyMembersWidth($event)"
+      >
+        <member-details
+          v-for="(member, $index) in sortedPartyMembers"
+          v-if="member._id !== user._id && $index < membersToShow"
+          :key="member._id"
+          :member="member"
+          condensed="condensed"
+          :expanded="member._id === expandedMember"
+          :is-header="true"
+          :class-badge-position="'hidden'"
+          @onHover="expandMember(member._id)"
+        />
+      </div><div
+        v-else
+        class="no-party d-flex justify-content-center text-center"
+      >
+        <div class="align-self-center">
+          <h3>{{ $t('battleWithFriends') }}</h3><span
+            class="small-text"
+            v-html="$t('inviteFriendsParty')"
+          ></span><br><button
+            class="btn btn-primary"
+            @click="createOrInviteParty()"
+          >
+            {{ user.party._id ? $t('inviteFriends') : $t('startAParty') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue
index d8f3064028..a798c00b10 100644
--- a/website/client/src/components/header/menu.vue
+++ b/website/client/src/components/header/menu.vue
@@ -1,91 +1,337 @@
-<template lang="pug">
-div
-  inbox-modal
-  creator-intro
-  profileModal
-  report-flag-modal
-  send-gems-modal
-  b-navbar.topbar.navbar-inverse.static-top(toggleable="lg", type="dark", :class="navbarZIndexClass")
-    b-navbar-brand.brand(aria-label="Habitica")
-      .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
-      .svg-icon.gryphon.d-xs-block.d-xl-none
-    b-navbar-toggle(target='menu_collapse').menu-toggle
-    .quick-menu.mobile-only.form-inline
-      a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')", :aria-label="$t('sync')")
-        .top-menu-icon.svg-icon(v-html="icons.sync")
-      notification-menu.item-with-icon
-      user-dropdown.item-with-icon
-    b-collapse#menu_collapse(v-model="menuIsOpen").collapse.navbar-collapse
-      b-navbar-nav.menu-list
-        b-nav-item.topbar-item(:class="{'active': $route.path === '/'}" tag="li", :to="{name: 'tasks'}", exact) {{ $t('tasks') }}
-        li.topbar-item(:class="{'active': $route.path.startsWith('/inventory'), 'down': $route.path.startsWith('/inventory') && this.isDesktop()}").droppable
-          .chevron.rotate(@click='dropdownMobile($event)')
-            .chevron-icon-down(v-html="icons.chevronDown", v-once)
-          router-link.nav-link(:to="{name: 'items'}") {{ $t('inventory') }}
-          .topbar-dropdown
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'items'}", exact) {{ $t('items') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
-        li.topbar-item(:class="{'active': $route.path.startsWith('/shop'), 'down': $route.path.startsWith('/shop') && this.isDesktop()}").droppable
-          .chevron.rotate(@click='dropdownMobile($event)')
-            .chevron-icon-down(v-html="icons.chevronDown", v-once)
-          router-link.nav-link(:to="{name: 'market'}") {{ $t('shops') }}
-          .topbar-dropdown
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'market'}", exact) {{ $t('market') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'quests'}") {{ $t('quests') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'seasonal'}") {{ $t('titleSeasonalShop') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'time'}") {{ $t('titleTimeTravelers') }}
-        b-nav-item.topbar-item(:class="{'active': $route.path.startsWith('/party')}" tag="li", :to="{name: 'party'}", v-if='this.user.party._id') {{ $t('party') }}
-        b-nav-item.topbar-item(:class="{'active': $route.path.startsWith('/party')}" @click='openPartyModal()', v-if='!this.user.party._id') {{ $t('party') }}
-        li.topbar-item(:class="{'active': $route.path.startsWith('/groups'), 'down': $route.path.startsWith('/groups') && this.isDesktop()}").droppable
-          .chevron.rotate(@click='dropdownMobile($event)')
-            .chevron-icon-down(v-html="icons.chevronDown", v-once)
-          router-link.nav-link(:to="{name: 'tavern'}") {{ $t('guilds') }}
-          .topbar-dropdown
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
-        li.topbar-item(:class="{'active': $route.path.startsWith('/group-plans'), 'down': $route.path.startsWith('/group-plans') && this.isDesktop()}").droppable
-          .chevron.rotate(v-if="groupPlans.length > 0", @click='dropdownMobile($event)')
-            .chevron-icon-down(v-html="icons.chevronDown", v-once)
-          router-link.nav-link(:to="{name: 'groupPlan'}") {{ $t('group') }}
-          .topbar-dropdown
-            router-link.topbar-dropdown-item.dropdown-item(v-for='group in groupPlans', :key='group._id', :to="{name: 'groupPlanDetailTaskInformation', params: {groupId: group._id}}") {{ group.name }}
-        li.topbar-item(:class="{'active': $route.path.startsWith('/challenges'), 'down': $route.path.startsWith('/challenges') && this.isDesktop()}").droppable
-          .chevron.rotate(@click='dropdownMobile($event)')
-            .chevron-icon-down(v-html="icons.chevronDown", v-once)
-          router-link.nav-link(:to="{name: 'myChallenges'}") {{ $t('challenges') }}
-          .topbar-dropdown
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'myChallenges'}") {{ $t('myChallenges') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'findChallenges'}") {{ $t('findChallenges') }}
-        li.topbar-item(:class="{'active': $route.path.startsWith('/help'), 'down': $route.path.startsWith('/help') && this.isDesktop()}").droppable
-          .chevron.rotate(@click='dropdownMobile($event)')
-            .chevron-icon-down(v-html="icons.chevronDown", v-once)
-          router-link.nav-link(:to="{name: 'faq'}") {{ $t('help') }}
-          .topbar-dropdown
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'faq'}") {{ $t('faq') }}
-            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'overview'}") {{ $t('overview') }}
-            router-link.topbar-dropdown-item.dropdown-item(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportBug') }}
-            router-link.topbar-dropdown-item.dropdown-item(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askAQuestion') }}
-            a.topbar-dropdown-item.dropdown-item(href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents", target='_blank') {{ $t('requestAF') }}
-            a.topbar-dropdown-item.dropdown-item(href="http://habitica.fandom.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
-            a.topbar-dropdown-item.dropdown-item(href="http://habitica.fandom.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
-            a.topbar-dropdown-item.dropdown-item(@click='modForm()') {{ $t('contactForm') }}
-      .currency-tray.form-inline
-        .item-with-icon(v-if="userHourglasses > 0")
-          .top-menu-icon.svg-icon(v-html="icons.hourglasses", v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')")
-          span {{ userHourglasses }}
-        .item-with-icon
-          a.top-menu-icon.svg-icon.gem(:aria-label="$t('gems')", href="#buy-gems" v-html="icons.gem", @click.prevent='showBuyGemsModal("gems")', v-b-tooltip.hover.bottom="$t('gems')")
-          span {{userGems}}
-        .item-with-icon.gold
-          .top-menu-icon.svg-icon(:aria-label="$t('gold')", v-html="icons.gold", v-b-tooltip.hover.bottom="$t('gold')")
-          span {{Math.floor(user.stats.gp * 100) / 100}}
-      .form-inline.desktop-only
-        a.item-with-icon(@click="sync", @keyup.enter="sync", role="link", :aria-label="$t('sync')", tabindex="0", v-b-tooltip.hover.bottom="$t('sync')")
-          .top-menu-icon.svg-icon(v-html="icons.sync")
-        notification-menu.item-with-icon
-        user-dropdown.item-with-icon
+<template>
+  <div>
+    <inbox-modal /><creator-intro /><profileModal /><report-flag-modal /><send-gems-modal /><b-navbar
+      class="topbar navbar-inverse static-top"
+      toggleable="lg"
+      type="dark"
+      :class="navbarZIndexClass"
+    >
+      <b-navbar-brand
+        class="brand"
+        aria-label="Habitica"
+      >
+        <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
+        class="menu-toggle"
+        target="menu_collapse"
+      /><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
+        id="menu_collapse"
+        v-model="menuIsOpen"
+        class="collapse navbar-collapse"
+      >
+        <b-navbar-nav class="menu-list">
+          <b-nav-item
+            class="topbar-item"
+            :class="{'active': $route.path === '/'}"
+            tag="li"
+            :to="{name: 'tasks'}"
+            exact="exact"
+          >
+            {{ $t('tasks') }}
+          </b-nav-item><li
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/inventory'), 'down': $route.path.startsWith('/inventory') && this.isDesktop()}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div><router-link
+              class="nav-link"
+              :to="{name: 'items'}"
+            >
+              {{ $t('inventory') }}
+            </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
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'equipment'}"
+              >
+                {{ $t('equipment') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'stable'}"
+              >
+                {{ $t('stable') }}
+              </router-link>
+            </div>
+          </li><li
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/shop'), 'down': $route.path.startsWith('/shop') && this.isDesktop()}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div><router-link
+              class="nav-link"
+              :to="{name: 'market'}"
+            >
+              {{ $t('shops') }}
+            </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
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'quests'}"
+              >
+                {{ $t('quests') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'seasonal'}"
+              >
+                {{ $t('titleSeasonalShop') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'time'}"
+              >
+                {{ $t('titleTimeTravelers') }}
+              </router-link>
+            </div>
+          </li><b-nav-item
+            v-if="this.user.party._id"
+            class="topbar-item"
+            :class="{'active': $route.path.startsWith('/party')}"
+            tag="li"
+            :to="{name: 'party'}"
+          >
+            {{ $t('party') }}
+          </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
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/groups'), 'down': $route.path.startsWith('/groups') && this.isDesktop()}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div><router-link
+              class="nav-link"
+              :to="{name: 'tavern'}"
+            >
+              {{ $t('guilds') }}
+            </router-link><div class="topbar-dropdown">
+              <router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'tavern'}"
+              >
+                {{ $t('tavern') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'myGuilds'}"
+              >
+                {{ $t('myGuilds') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'guildsDiscovery'}"
+              >
+                {{ $t('guildsDiscovery') }}
+              </router-link>
+            </div>
+          </li><li
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/group-plans'), 'down': $route.path.startsWith('/group-plans') && this.isDesktop()}"
+          >
+            <div
+              v-if="groupPlans.length > 0"
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div><router-link
+              class="nav-link"
+              :to="{name: 'groupPlan'}"
+            >
+              {{ $t('group') }}
+            </router-link><div class="topbar-dropdown">
+              <router-link
+                v-for="group in groupPlans"
+                :key="group._id"
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'groupPlanDetailTaskInformation', params: {groupId: group._id}}"
+              >
+                {{ group.name }}
+              </router-link>
+            </div>
+          </li><li
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/challenges'), 'down': $route.path.startsWith('/challenges') && this.isDesktop()}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div><router-link
+              class="nav-link"
+              :to="{name: 'myChallenges'}"
+            >
+              {{ $t('challenges') }}
+            </router-link><div class="topbar-dropdown">
+              <router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'myChallenges'}"
+              >
+                {{ $t('myChallenges') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'findChallenges'}"
+              >
+                {{ $t('findChallenges') }}
+              </router-link>
+            </div>
+          </li><li
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/help'), 'down': $route.path.startsWith('/help') && this.isDesktop()}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div><router-link
+              class="nav-link"
+              :to="{name: 'faq'}"
+            >
+              {{ $t('help') }}
+            </router-link><div class="topbar-dropdown">
+              <router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'faq'}"
+              >
+                {{ $t('faq') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'overview'}"
+              >
+                {{ $t('overview') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac"
+              >
+                {{ $t('reportBug') }}
+              </router-link><router-link
+                class="topbar-dropdown-item dropdown-item"
+                to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
+              >
+                {{ $t('askAQuestion') }}
+              </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
+                class="topbar-dropdown-item dropdown-item"
+                href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
+                target="_blank"
+              >{{ $t('contributing') }}</a><a
+                class="topbar-dropdown-item dropdown-item"
+                href="http://habitica.fandom.com/wiki/Habitica_Wiki"
+                target="_blank"
+              >{{ $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">
+          <div
+            v-if="userHourglasses > 0"
+            class="item-with-icon"
+          >
+            <div
+              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">
+            <a
+              v-b-tooltip.hover.bottom="$t('gems')"
+              class="top-menu-icon svg-icon gem"
+              :aria-label="$t('gems')"
+              href="#buy-gems"
+              @click.prevent="showBuyGemsModal('gems')"
+              v-html="icons.gem"
+            ></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>
+        </div><div class="form-inline desktop-only">
+          <a
+            class="item-with-icon"
+            v-b-tooltip.hover.bottom="$t('sync')"
+            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>
+      </b-collapse>
+    </b-navbar>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/header/notifications/base.vue b/website/client/src/components/header/notifications/base.vue
index 7a5bbec0cd..79629d2887 100644
--- a/website/client/src/components/header/notifications/base.vue
+++ b/website/client/src/components/header/notifications/base.vue
@@ -1,19 +1,27 @@
-<template lang="pug">
-.notification.dropdown-item.dropdown-separated.d-flex.justify-content-between(
-  @click="clicked"
-)
-  .notification-icon.d-flex.justify-content-center.align-items-center(
-    v-if="hasIcon",
-    :class="{'is-not-bailey': isNotBailey}",
-  )
-    slot(name="icon")
-  .notification-content
-    slot(name="content")
-  .notification-remove(@click.stop="canRemove ? remove() : null",)
-    .svg-icon(
-      v-if="canRemove",
-      v-html="icons.close",
-    )
+<template>
+  <div
+    class="notification dropdown-item dropdown-separated d-flex justify-content-between"
+    @click="clicked"
+  >
+    <div
+      v-if="hasIcon"
+      class="notification-icon d-flex justify-content-center align-items-center"
+      :class="{'is-not-bailey': isNotBailey}"
+    >
+      <slot name="icon"></slot>
+    </div><div class="notification-content">
+      <slot name="content"></slot>
+    </div><div
+      class="notification-remove"
+      @click.stop="canRemove ? remove() : null"
+    >
+      <div
+        v-if="canRemove"
+        class="svg-icon"
+        v-html="icons.close"
+      ></div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss"> // Not scoped because the classes could be used in i18n strings
diff --git a/website/client/src/components/header/notifications/cardReceived.vue b/website/client/src/components/header/notifications/cardReceived.vue
index f7c2351cdf..d4128b3ac4 100644
--- a/website/client/src/components/header/notifications/cardReceived.vue
+++ b/website/client/src/components/header/notifications/cardReceived.vue
@@ -1,13 +1,19 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="true",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action"
-)
-  div(slot="content", v-html="$t('cardReceived', {card: cardString})")
-  div(slot="icon", :class="cardClass")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="true"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div
+      slot="content"
+      v-html="$t('cardReceived', {card: cardString})"
+    ></div><div
+      slot="icon"
+      :class="cardClass"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/groupTaskApproval.vue b/website/client/src/components/header/notifications/groupTaskApproval.vue
index 2b378c410b..aae5569b1e 100644
--- a/website/client/src/components/header/notifications/groupTaskApproval.vue
+++ b/website/client/src/components/header/notifications/groupTaskApproval.vue
@@ -1,15 +1,26 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  @click="action",
-)
-  div(slot="content")
-    div(v-html="notification.data.message")
-    .notifications-buttons
-      .btn.btn-small.btn-success(@click.stop="approve()") {{ $t('approve') }}
-      .btn.btn-small.btn-warning(@click.stop="needsWork()") {{ $t('needsWork') }}
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    @click="action"
+  >
+    <div slot="content">
+      <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
+          class="btn btn-small btn-warning"
+          @click.stop="needsWork()"
+        >
+          {{ $t('needsWork') }}
+        </div>
+      </div>
+    </div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/groupTaskApproved.vue b/website/client/src/components/header/notifications/groupTaskApproved.vue
index bbd6000e36..0788ef948e 100644
--- a/website/client/src/components/header/notifications/groupTaskApproved.vue
+++ b/website/client/src/components/header/notifications/groupTaskApproved.vue
@@ -1,12 +1,17 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action",
-)
-  .notification-green(slot="content", v-html="notification.data.message")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div
+      slot="content"
+      class="notification-green"
+      v-html="notification.data.message"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/groupTaskAssigned.vue b/website/client/src/components/header/notifications/groupTaskAssigned.vue
index 7d1fc32bad..d4de7364f9 100644
--- a/website/client/src/components/header/notifications/groupTaskAssigned.vue
+++ b/website/client/src/components/header/notifications/groupTaskAssigned.vue
@@ -1,12 +1,16 @@
-<template lang="pug">
-  base-notification(
-    :can-remove="canRemove",
-    :has-icon="false",
-    :notification="notification",
-    :read-after-click="true",
-    @click="action",
-  )
-    div(slot="content", v-html="notification.data.message")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div
+      slot="content"
+      v-html="notification.data.message"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/groupTaskClaimed.vue b/website/client/src/components/header/notifications/groupTaskClaimed.vue
index e3768668d6..e23e3be164 100644
--- a/website/client/src/components/header/notifications/groupTaskClaimed.vue
+++ b/website/client/src/components/header/notifications/groupTaskClaimed.vue
@@ -1,12 +1,16 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action",
-)
-  div(slot="content", v-html="notification.data.message")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div
+      slot="content"
+      v-html="notification.data.message"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/groupTaskNeedsWork.vue b/website/client/src/components/header/notifications/groupTaskNeedsWork.vue
index 45175bead8..7dcd4650c3 100644
--- a/website/client/src/components/header/notifications/groupTaskNeedsWork.vue
+++ b/website/client/src/components/header/notifications/groupTaskNeedsWork.vue
@@ -1,12 +1,17 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action",
-)
-  .notification-yellow(slot="content", v-html="notification.data.message")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div
+      slot="content"
+      class="notification-yellow"
+      v-html="notification.data.message"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/guildInvitation.vue b/website/client/src/components/header/notifications/guildInvitation.vue
index 1ac067d926..59c2bbc1e3 100644
--- a/website/client/src/components/header/notifications/guildInvitation.vue
+++ b/website/client/src/components/header/notifications/guildInvitation.vue
@@ -1,15 +1,26 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  @click="action",
-)
-  div(slot="content")
-    div(v-html="textString")
-    .notifications-buttons
-      .btn.btn-small.btn-success(@click.stop="accept()") {{ $t('accept') }}
-      .btn.btn-small.btn-danger(@click.stop="reject()") {{ $t('reject') }}
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    @click="action"
+  >
+    <div slot="content">
+      <div v-html="textString"></div><div class="notifications-buttons">
+        <div
+          class="btn btn-small btn-success"
+          @click.stop="accept()"
+        >
+          {{ $t('accept') }}
+        </div><div
+          class="btn btn-small btn-danger"
+          @click.stop="reject()"
+        >
+          {{ $t('reject') }}
+        </div>
+      </div>
+    </div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/justAddWater.vue b/website/client/src/components/header/notifications/justAddWater.vue
index 81a2b0e3d5..30ae799aa1 100644
--- a/website/client/src/components/header/notifications/justAddWater.vue
+++ b/website/client/src/components/header/notifications/justAddWater.vue
@@ -1,11 +1,15 @@
-<template lang="pug">
-  base-notification(
-    :can-remove="canRemove",
-    :notification="notification",
-    :read-after-click="true",
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :notification="notification"
+    :read-after-click="true"
     @click="action"
-  )
-    div(slot="content", v-html="achievementString")
+  >
+    <div
+      slot="content"
+      v-html="achievementString"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/lostMasterclasser.vue b/website/client/src/components/header/notifications/lostMasterclasser.vue
index 9c76589cfb..3570055765 100644
--- a/website/client/src/components/header/notifications/lostMasterclasser.vue
+++ b/website/client/src/components/header/notifications/lostMasterclasser.vue
@@ -1,11 +1,15 @@
-<template lang="pug">
-  base-notification(
-    :can-remove="canRemove",
-    :notification="notification",
-    :read-after-click="true",
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :notification="notification"
+    :read-after-click="true"
     @click="action"
-  )
-    div(slot="content", v-html="achievementString")
+  >
+    <div
+      slot="content"
+      v-html="achievementString"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/mindOverMatter.vue b/website/client/src/components/header/notifications/mindOverMatter.vue
index a294475b36..700185a198 100644
--- a/website/client/src/components/header/notifications/mindOverMatter.vue
+++ b/website/client/src/components/header/notifications/mindOverMatter.vue
@@ -1,11 +1,15 @@
-<template lang="pug">
-  base-notification(
-    :can-remove="canRemove",
-    :notification="notification",
-    :read-after-click="true",
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :notification="notification"
+    :read-after-click="true"
     @click="action"
-  )
-    div(slot="content", v-html="achievementString")
+  >
+    <div
+      slot="content"
+      v-html="achievementString"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/newChatMessage.vue b/website/client/src/components/header/notifications/newChatMessage.vue
index 558033fa01..319caccb9e 100644
--- a/website/client/src/components/header/notifications/newChatMessage.vue
+++ b/website/client/src/components/header/notifications/newChatMessage.vue
@@ -1,13 +1,16 @@
-<template lang="pug">
-// Read automatically from the group page mounted hook
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  :read-after-click="false",
-  @click="action"
-)
-  div(slot="content", v-html="string")
+<template>
+  <!-- Read automatically from the group page mounted hook--><base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    :read-after-click="false"
+    @click="action"
+  >
+    <div
+      slot="content"
+      v-html="string"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/newInboxMessage.vue b/website/client/src/components/header/notifications/newInboxMessage.vue
index 3ee3ec4f3b..7e941b5b3c 100644
--- a/website/client/src/components/header/notifications/newInboxMessage.vue
+++ b/website/client/src/components/header/notifications/newInboxMessage.vue
@@ -1,14 +1,17 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action"
-)
-  div(slot="content")
-    span(v-html="$t('userSentMessage', {user: notification.data.sender.name})")
-    .notification-small.notification-ellipses {{ notification.data.excerpt }}
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div slot="content">
+      <span v-html="$t('userSentMessage', {user: notification.data.sender.name})"></span><div class="notification-small notification-ellipses">
+        {{ notification.data.excerpt }}
+      </div>
+    </div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/newMysteryItems.vue b/website/client/src/components/header/notifications/newMysteryItems.vue
index 1202daaca6..401b6f4ef3 100644
--- a/website/client/src/components/header/notifications/newMysteryItems.vue
+++ b/website/client/src/components/header/notifications/newMysteryItems.vue
@@ -1,13 +1,19 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="true",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action"
-)
-  div(slot="content", v-html="$t('newSubscriberItem')")
-  div(slot="icon", :class="mysteryClass")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="true"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div
+      slot="content"
+      v-html="$t('newSubscriberItem')"
+    ></div><div
+      slot="icon"
+      :class="mysteryClass"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/newStuff.vue b/website/client/src/components/header/notifications/newStuff.vue
index bc919fb5d0..8766b075c9 100644
--- a/website/client/src/components/header/notifications/newStuff.vue
+++ b/website/client/src/components/header/notifications/newStuff.vue
@@ -1,15 +1,20 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="true",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action"
-)
-  div(slot="content")
-    .notification-bold-purple {{ $t('newBaileyUpdate') }}
-    div {{ notification.data.title }}
-  .npc_bailey(slot="icon")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="true"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div slot="content">
+      <div class="notification-bold-purple">
+        {{ $t('newBaileyUpdate') }}
+      </div><div>{{ notification.data.title }}</div>
+    </div><div
+      slot="icon"
+      class="npc_bailey"
+    ></div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/partyInvitation.vue b/website/client/src/components/header/notifications/partyInvitation.vue
index 8cbaf45e78..04e6a3682f 100644
--- a/website/client/src/components/header/notifications/partyInvitation.vue
+++ b/website/client/src/components/header/notifications/partyInvitation.vue
@@ -1,14 +1,25 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-)
-  div(slot="content")
-    div(v-html="$t('invitedToParty', {party: notification.data.name})")
-    .notifications-buttons
-      .btn.btn-small.btn-success(@click.stop="accept()") {{ $t('accept') }}
-      .btn.btn-small.btn-danger(@click.stop="reject()") {{ $t('reject') }}
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+  >
+    <div slot="content">
+      <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
+          class="btn btn-small btn-danger"
+          @click.stop="reject()"
+        >
+          {{ $t('reject') }}
+        </div>
+      </div>
+    </div>
+  </base-notification>
 </template>
 
 <script>
diff --git a/website/client/src/components/header/notifications/questInvitation.vue b/website/client/src/components/header/notifications/questInvitation.vue
index bc67a538e7..0dc8510e27 100644
--- a/website/client/src/components/header/notifications/questInvitation.vue
+++ b/website/client/src/components/header/notifications/questInvitation.vue
@@ -1,16 +1,32 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="false",
-  :notification="notification",
-  @click="action",
-)
-  div(slot="content")
-    .message(v-html="$t('invitedToQuest', {quest: questName})")
-    quest-info(:quest="questData", :small-version="true")
-    .notifications-buttons
-      .btn.btn-small.btn-success(@click.stop="questAccept()") {{ $t('accept') }}
-      .btn.btn-small.btn-danger(@click.stop="questReject()") {{ $t('reject') }}
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="false"
+    :notification="notification"
+    @click="action"
+  >
+    <div slot="content">
+      <div
+        class="message"
+        v-html="$t('invitedToQuest', {quest: questName})"
+      ></div><quest-info
+        :quest="questData"
+        :small-version="true"
+      /><div class="notifications-buttons">
+        <div
+          class="btn btn-small btn-success"
+          @click.stop="questAccept()"
+        >
+          {{ $t('accept') }}
+        </div><div
+          class="btn btn-small btn-danger"
+          @click.stop="questReject()"
+        >
+          {{ $t('reject') }}
+        </div>
+      </div>
+    </div>
+  </base-notification>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
index 203c4727d4..485d30a20c 100644
--- a/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
+++ b/website/client/src/components/header/notifications/unallocatedStatsPoints.vue
@@ -1,13 +1,20 @@
-<template lang="pug">
-base-notification(
-  :can-remove="canRemove",
-  :has-icon="true",
-  :notification="notification",
-  :read-after-click="true",
-  @click="action"
-)
-  div(slot="content", v-html="$t('unallocatedStatsPoints', {points: notification.data.points})")
-  .svg-icon(slot="icon", v-html="icons.sparkles")
+<template>
+  <base-notification
+    :can-remove="canRemove"
+    :has-icon="true"
+    :notification="notification"
+    :read-after-click="true"
+    @click="action"
+  >
+    <div
+      slot="content"
+      v-html="$t('unallocatedStatsPoints', {points: notification.data.points})"
+    ></div><div
+      slot="icon"
+      class="svg-icon"
+      v-html="icons.sparkles"
+    ></div>
+  </base-notification>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/header/notifications/verifyUsername.vue b/website/client/src/components/header/notifications/verifyUsername.vue
index aec3a35e80..cb4996b360 100644
--- a/website/client/src/components/header/notifications/verifyUsername.vue
+++ b/website/client/src/components/header/notifications/verifyUsername.vue
@@ -1,20 +1,29 @@
-<template lang="pug">
-  base-notification(
-  :can-remove="false",
-  :has-icon="false",
-  :read-after-click="false",
-  :notification="{}",
-  @click="action",
-  )
-    div.text-center(slot="content")
-      div.username-notification-title {{ $t('setUsernameNotificationTitle') }}
-      div {{ $t('setUsernameNotificationBody') }}
-      div.current-username-container.mx-auto
-        label.font-weight-bold {{ $t('currentUsername') + " " }}
-        label @
-        label {{ user.auth.local.username }}
-      .notifications-buttons
-        .btn.btn-small.btn-secondary(@click.stop="changeUsername()") {{ $t('goToSettings') }}
+<template>
+  <base-notification
+    :can-remove="false"
+    :has-icon="false"
+    :read-after-click="false"
+    :notification="{}"
+    @click="action"
+  >
+    <div
+      slot="content"
+      class="text-center"
+    >
+      <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
+          class="btn btn-small btn-secondary"
+          @click.stop="changeUsername()"
+        >
+          {{ $t('goToSettings') }}
+        </div>
+      </div>
+    </div>
+  </base-notification>
 </template>
 <style lang='scss'>
   @import '../../../assets/scss/colors.scss';
diff --git a/website/client/src/components/header/notifications/worldBoss.vue b/website/client/src/components/header/notifications/worldBoss.vue
index 11f96612e4..0cb03bacf9 100644
--- a/website/client/src/components/header/notifications/worldBoss.vue
+++ b/website/client/src/components/header/notifications/worldBoss.vue
@@ -1,28 +1,43 @@
-<template lang="pug">
-base-notification(
-  :can-remove="false",
-  :notification="{}",
-  :read-after-click="false",
-  @click="action",
-  v-if="worldBoss.active"
-)
-  .background(slot="content")
-    .text
-      .title {{ $t('worldBoss') }}
-      .sub-title {{ $t('questDysheartenerText') }}
-    .d-flex.align-items-center.justify-content-left
-      div
-        .left-hearts
-      .float-right
-        .quest_dysheartener_notification
-        .phobia_dysheartener_notification
-    .health-bar.d-flex.align-items-center.justify-content-center
-      .svg-icon(v-html="icons.health")
-      .boss-health-wrap
-        .boss-health-bar(:style="{width: (parseInt(bossHp) / questData.boss.hp) * 100 + '%'}")
-      .pending-damage
-        .svg-icon(v-html="icons.sword")
-        span +{{parseInt(user.party.quest.progress.up) || 0}}
+<template>
+  <base-notification
+    v-if="worldBoss.active"
+    :can-remove="false"
+    :notification="{}"
+    :read-after-click="false"
+    @click="action"
+  >
+    <div
+      slot="content"
+      class="background"
+    >
+      <div class="text">
+        <div class="title">
+          {{ $t('worldBoss') }}
+        </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><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
+            class="boss-health-bar"
+            :style="{width: (parseInt(bossHp) / questData.boss.hp) * 100 + '%'}"
+          ></div>
+        </div><div class="pending-damage">
+          <div
+            class="svg-icon"
+            v-html="icons.sword"
+          ></div><span>+{{ parseInt(user.party.quest.progress.up) || 0 }}</span>
+        </div>
+      </div>
+    </div>
+  </base-notification>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/header/notificationsDropdown.vue b/website/client/src/components/header/notificationsDropdown.vue
index c62d8c2d0b..2125364785 100644
--- a/website/client/src/components/header/notificationsDropdown.vue
+++ b/website/client/src/components/header/notificationsDropdown.vue
@@ -1,34 +1,57 @@
-<template lang="pug">
-menu-dropdown.item-notifications(:right="true", @toggled="handleOpenStatusChange", :openStatus="openStatus")
-  div(slot="dropdown-toggle")
-    div(:aria-label="$t('notifications')", v-b-tooltip.hover.bottom="$t('notifications')")
-      message-count(
-        v-if='notificationsCount > 0',
-        :count="notificationsCount",
-        :top="true",
-        :gray="!hasUnseenNotifications",
-      )
-      .top-menu-icon.svg-icon.notifications(v-html="icons.notifications")
-  div(slot="dropdown-content")
-    .dropdown-item.dropdown-separated.d-flex.justify-content-between.dropdown-inactive.align-items-center(
-      @click.stop=""
-    )
-      h4.dropdown-title(v-once) {{ $t('notifications') }}
-      a.small-link.standard-link(@click="dismissAll", :disabled="notificationsCount === 0") {{ $t('dismissAll') }}
-    world-boss
-    component(
-      :is="notification.type",
-      :key="notification.id",
-      v-for="notification in notifications",
-      :notification="notification",
-      :can-remove="!isActionable(notification)",
-    )
-    .dropdown-item.dropdown-separated.d-flex.justify-content-center.dropdown-inactive.no-notifications.flex-column(
-      v-if="notificationsCount === 0"
-    )
-      .svg-icon(v-html="icons.success")
-      h2 {{ $t('noNotifications') }}
-      p {{ $t('noNotificationsText') }}
+<template>
+  <menu-dropdown
+    class="item-notifications"
+    :right="true"
+    :open-status="openStatus"
+    @toggled="handleOpenStatusChange"
+  >
+    <div slot="dropdown-toggle">
+      <div
+        v-b-tooltip.hover.bottom="$t('notifications')"
+        :aria-label="$t('notifications')"
+      >
+        <message-count
+          v-if="notificationsCount > 0"
+          :count="notificationsCount"
+          :top="true"
+          :gray="!hasUnseenNotifications"
+        /><div
+          class="top-menu-icon svg-icon notifications"
+          v-html="icons.notifications"
+        ></div>
+      </div>
+    </div><div slot="dropdown-content">
+      <div
+        class="dropdown-item dropdown-separated d-flex justify-content-between dropdown-inactive align-items-center"
+        @click.stop=""
+      >
+        <h4
+          v-once
+          class="dropdown-title"
+        >
+          {{ $t('notifications') }}
+        </h4><a
+          class="small-link standard-link"
+          :disabled="notificationsCount === 0"
+          @click="dismissAll"
+        >{{ $t('dismissAll') }}</a>
+      </div><world-boss /><component
+        :is="notification.type"
+        v-for="notification in notifications"
+        :key="notification.id"
+        :notification="notification"
+        :can-remove="!isActionable(notification)"
+      /><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>
+    </div>
+  </menu-dropdown>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/header/userDropdown.vue b/website/client/src/components/header/userDropdown.vue
index 372c3dbcb7..e27f52ff09 100644
--- a/website/client/src/components/header/userDropdown.vue
+++ b/website/client/src/components/header/userDropdown.vue
@@ -1,29 +1,76 @@
-<template lang="pug">
-menu-dropdown.item-user(:right="true")
-  div(slot="dropdown-toggle")
-    div(:aria-label="$t('user')", v-b-tooltip.hover.bottom="$t('user')")
-      message-count(v-if='user.inbox.newMessages > 0', :count="user.inbox.newMessages", :top="true")
-      .top-menu-icon.svg-icon.user(v-html="icons.user")
-  .user-dropdown(slot="dropdown-content")
-    a.dropdown-item.edit-avatar.dropdown-separated(@click='showAvatar("body", "size")')
-      h3 {{ user.profile.name }}
-      span.small-text {{ $t('editAvatar') }}
-    a.nav-link.dropdown-item.dropdown-separated.d-flex.justify-content-between.align-items-center(@click.prevent='showInbox()')
-      div {{ $t('messages') }}
-      message-count(v-if='user.inbox.newMessages > 0', :count="user.inbox.newMessages")
-    a.dropdown-item(@click='showAvatar("backgrounds", "2019")') {{ $t('backgrounds') }}
-    a.dropdown-item(@click='showProfile("stats")') {{ $t('stats') }}
-    a.dropdown-item(@click='showProfile("achievements")') {{ $t('achievements') }}
-    a.dropdown-item.dropdown-separated(@click='showProfile("profile")') {{ $t('profile') }}
-    router-link.dropdown-item(:to="{name: 'site'}") {{ $t('settings') }}
-    router-link.dropdown-item.dropdown-separated(:to="{name: 'subscription'}") {{ $t('subscription') }}
-    a.nav-link.dropdown-item.dropdown-separated(@click.prevent='logout()') {{ $t('logout') }}
-    li(v-if='!this.user.purchased.plan.customerId', @click='showBuyGemsModal("subscribe")')
-      .dropdown-item.text-center
-        h3.purple {{ $t('needMoreGems') }}
-        span.small-text {{ $t('needMoreGemsInfo') }}
-      .learn-background.py-2.text-center
-        button.btn.btn-primary.btn-lg.learn-button {{ $t('learnMore') }}
+<template>
+  <menu-dropdown
+    class="item-user"
+    :right="true"
+  >
+    <div slot="dropdown-toggle">
+      <div
+        v-b-tooltip.hover.bottom="$t('user')"
+        :aria-label="$t('user')"
+      >
+        <message-count
+          v-if="user.inbox.newMessages > 0"
+          :count="user.inbox.newMessages"
+          :top="true"
+        /><div
+          class="top-menu-icon svg-icon user"
+          v-html="icons.user"
+        ></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
+        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
+        class="dropdown-item"
+        @click="showAvatar('backgrounds', '2019')"
+      >{{ $t('backgrounds') }}</a><a
+        class="dropdown-item"
+        @click="showProfile('stats')"
+      >{{ $t('stats') }}</a><a
+        class="dropdown-item"
+        @click="showProfile('achievements')"
+      >{{ $t('achievements') }}</a><a
+        class="dropdown-item dropdown-separated"
+        @click="showProfile('profile')"
+      >{{ $t('profile') }}</a><router-link
+        class="dropdown-item"
+        :to="{name: 'site'}"
+      >
+        {{ $t('settings') }}
+      </router-link><router-link
+        class="dropdown-item dropdown-separated"
+        :to="{name: 'subscription'}"
+      >
+        {{ $t('subscription') }}
+      </router-link><a
+        class="nav-link dropdown-item dropdown-separated"
+        @click.prevent="logout()"
+      >{{ $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">
+          <button class="btn btn-primary btn-lg learn-button">
+            {{ $t('learnMore') }}
+          </button>
+        </div>
+      </li>
+    </div>
+  </menu-dropdown>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/inventory/equipment/attributesGrid.vue b/website/client/src/components/inventory/equipment/attributesGrid.vue
index f5f09bbaed..84b7aa4f2e 100644
--- a/website/client/src/components/inventory/equipment/attributesGrid.vue
+++ b/website/client/src/components/inventory/equipment/attributesGrid.vue
@@ -1,25 +1,33 @@
-<template lang="pug">
-  div.attributes-group
-    .popover-content-attr(v-for="attr in ATTRIBUTES", :key="attr")
-      .group-content
-        span.popover-content-attr-cell.key(
+<template>
+  <div class="attributes-group">
+    <div
+      v-for="attr in ATTRIBUTES"
+      :key="attr"
+      class="popover-content-attr"
+    >
+      <div class="group-content">
+        <span
+          class="popover-content-attr-cell key"
           :class="{'hasValue': hasSumValue(attr) }"
-        ) {{ `${$t(attr)}: ` }}
-        span.popover-content-attr-cell.label.value(
+        >{{ `${$t(attr)}: ` }}</span><span
+          class="popover-content-attr-cell label value"
           :class="{'green': hasSumValue(attr) }"
-        ) {{ `${stats.sum[attr]}` }}
-        span.popover-content-attr-cell.label.bold(
+        >{{ `${stats.sum[attr]}` }}</span><span
+          class="popover-content-attr-cell label bold"
           :class="{'hasValue': hasGearValue(attr) }"
-        ) {{ $t('gear') }}:
-        span.popover-content-attr-cell.label(
+        >{{ $t('gear') }}:</span><span
+          class="popover-content-attr-cell label"
           :class="{'hasValue': hasGearValue(attr) }"
-        ) {{ stats.gear[attr] }}
-        span.popover-content-attr-cell.label.bold(
+        >{{ stats.gear[attr] }}</span><span
+          class="popover-content-attr-cell label bold"
           :class="{'hasValue': hasClassBonus(attr) }"
-        ) {{ $t('classEquipBonus') }}:
-        span.popover-content-attr-cell.label(
+        >{{ $t('classEquipBonus') }}:</span><span
+          class="popover-content-attr-cell label"
           :class="{'hasValue': hasClassBonus(attr) }"
-        ) {{ `${stats.classBonus[attr]}` }}
+        >{{ `${stats.classBonus[attr]}` }}</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/inventory/equipment/attributesPopover.vue b/website/client/src/components/inventory/equipment/attributesPopover.vue
index 0cefb75cbb..3ebc223ff1 100644
--- a/website/client/src/components/inventory/equipment/attributesPopover.vue
+++ b/website/client/src/components/inventory/equipment/attributesPopover.vue
@@ -1,14 +1,30 @@
-<template lang="pug">
-div
-  div(v-if='item.locked')
-    h4.popover-content-title {{ `${$t('lockedItem')}` }}
-    .popover-content-text(v-if='item.specialClass') {{ `${$t('classLockedItem')}` }}
-    .popover-content-text(v-else) {{ `${$t('tierLockedItem')}` }}
-    p
-  div(v-else)
-    h4.popover-content-title {{ itemText }}
-    .popover-content-text {{ itemNotes }}
-    attributesGrid(:user="user", :item="item")
+<template>
+  <div>
+    <div v-if="item.locked">
+      <h4 class="popover-content-title">
+        {{ `${$t('lockedItem')}` }}
+      </h4><div
+        v-if="item.specialClass"
+        class="popover-content-text"
+      >
+        {{ `${$t('classLockedItem')}` }}
+      </div><div
+        v-else
+        class="popover-content-text"
+      >
+        {{ `${$t('tierLockedItem')}` }}
+      </div><p></p>
+    </div><div v-else>
+      <h4 class="popover-content-title">
+        {{ itemText }}
+      </h4><div class="popover-content-text">
+        {{ itemNotes }}
+      </div><attributesGrid
+        :user="user"
+        :item="item"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/inventory/equipment/equipGearModal.vue b/website/client/src/components/inventory/equipment/equipGearModal.vue
index 341aeb0784..10a5276856 100644
--- a/website/client/src/components/inventory/equipment/equipGearModal.vue
+++ b/website/client/src/components/inventory/equipment/equipGearModal.vue
@@ -1,41 +1,61 @@
-<template lang="pug">
-  b-modal#equipgear-modal(
-    :visible="true",
-    v-if="item != null",
-    :hide-header="true",
+<template>
+  <b-modal
+    v-if="item != null"
+    id="equipgear-modal"
+    :visible="true"
+    :hide-header="true"
     @change="onChange($event)"
-  )
-    div.close
-      span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close", @click="hideDialog()")
-
-    div.content(v-if="item != null")
-
-      div.inner-content
-        avatar(
-          :member="user",
-          :avatarOnly="true",
-          :withBackground="true",
-          :overrideAvatarGear="memberOverrideAvatarGear(item)",
-          :spritesMargin='"0px auto auto -1px"',
-          :showVisualBuffs="false",
-        )
-
-        h4.title {{ itemText }}
-        div.text(v-html="itemNotes")
-
-        span.classTag(v-if="showClassTag")
-          span.svg-icon.inline.icon-24(v-html="icons[itemClass]")
-          span.className.textCondensed(:class="itemClass") {{ getClassName(itemClass) }}
-
-        attributesGrid.attributesGrid(
-          :user="user",
-          :item="item",
+  >
+    <div class="close">
+      <span
+        class="svg-icon inline icon-10"
+        aria-hidden="true"
+        @click="hideDialog()"
+        v-html="icons.close"
+      ></span>
+    </div><div
+      v-if="item != null"
+      class="content"
+    >
+      <div class="inner-content">
+        <avatar
+          :member="user"
+          :avatar-only="true"
+          :with-background="true"
+          :override-avatar-gear="memberOverrideAvatarGear(item)"
+          :sprites-margin="'0px auto auto -1px'"
+          :show-visual-buffs="false"
+        /><h4 class="title">
+          {{ itemText }}
+        </h4><div
+          class="text"
+          v-html="itemNotes"
+        ></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
           v-if="attributesGridVisible"
-        )
-
-        button.btn.btn-primary(@click="equipItem()") {{ $t(isEquipped ? 'unequip' : 'equip') }}
-
-    div.clearfix(slot="modal-footer")
+          class="attributesGrid"
+          :user="user"
+          :item="item"
+        /><button
+          class="btn btn-primary"
+          @click="equipItem()"
+        >
+          {{ $t(isEquipped ? 'unequip' : 'equip') }}
+        </button>
+      </div>
+    </div><div
+      slot="modal-footer"
+      class="clearfix"
+    ></div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/inventory/equipment/index.vue b/website/client/src/components/inventory/equipment/index.vue
index d1d2afcc6c..fc96a88ccc 100644
--- a/website/client/src/components/inventory/equipment/index.vue
+++ b/website/client/src/components/inventory/equipment/index.vue
@@ -1,127 +1,191 @@
-<template lang="pug">
-.row
-  .standard-sidebar.d-none.d-sm-block
-    .form-group
-      input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
-
-    .form
-      h2(v-once) {{ $t('filter') }}
-      h3 {{ this.groupBy === 'type' ? $t('equipmentType') : $t('class') }}
-      .form-group
-        .form-check(
-          v-for="group in itemsGroups",
-          :key="group.key",
-        )
-          .custom-control.custom-checkbox
-            input.custom-control-input(type="checkbox", v-model="viewOptions[group.key].selected", :id="groupBy + group.key")
-            label.custom-control-label(v-once, :for="groupBy + group.key") {{ group.label }}
-
-  .standard-page
-    .clearfix
-      h1.float-left.mb-4.page-header(v-once) {{ $t('equipment') }}
-      .float-right
-        span.dropdown-label {{ $t('sortBy') }}
-        b-dropdown(:text="$t(selectedSortGearBy)", right=true)
-          b-dropdown-item(
-            v-for="sort in sortGearBy",
-            @click="selectedSortGearBy = sort",
-            :active="selectedSortGearBy === sort",
-            :key="sort"
-          ) {{ $t(sort) }}
-
-        span.dropdown-label {{ $t('groupBy2') }}
-        b-dropdown(:text="$t(groupBy === 'type' ? 'equipmentType' : 'class')", right=true)
-          b-dropdown-item(@click="groupBy = 'type'", :active="groupBy === 'type'") {{ $t('equipmentType') }}
-          b-dropdown-item(@click="groupBy = 'class'", :active="groupBy === 'class'") {{ $t('class') }}
-
-    drawer(
-      :title="$t('equipment')",
-      :errorMessage="(costumeMode && !user.preferences.costume) ? $t('costumeDisabled') : null",
-      :openStatus='openStatus',
-      v-on:toggled='drawerToggled'
-    )
-      div(slot="drawer-header")
-        .drawer-tab-container
-          .drawer-tab.text-right
-            a.drawer-tab-text(
-              @click="selectDrawerTab('equipment')",
-              :class="{'drawer-tab-text-active': !costumeMode}",
-            ) {{ $t('equipment') }}
-          .clearfix
-            .drawer-tab.float-left
-              a.drawer-tab-text(
-                @click="selectDrawerTab('costume')",
-                :class="{'drawer-tab-text-active': costumeMode}",
-              ) {{ $t('costume') }}
-
-            toggle-switch.float-right.align-with-tab(
-              :label="$t(costumeMode ? 'useCostume' : 'autoEquipBattleGear')",
-              :checked="user.preferences[drawerPreference]",
-              @change="changeDrawerPreference",
-              :hoverText="$t(drawerPreference+'PopoverText')",
-            )
-      .items.items-one-line(slot="drawer-slider")
-        item.pointer(
-          v-for="(label, group) in gearTypesToStrings",
-          :key="flatGear[activeItems[group]] ? flatGear[activeItems[group]].key : group",
-          :item="flatGear[activeItems[group]]",
-          :itemContentClass="flatGear[activeItems[group]] ? 'shop_' + flatGear[activeItems[group]].key : null",
-          :emptyItem="!flatGear[activeItems[group]] || flatGear[activeItems[group]].key.indexOf('_base_0') !== -1",
-          :label="label",
-          :popoverPosition="'top'",
-          :showPopover="flatGear[activeItems[group]] && Boolean(flatGear[activeItems[group]].text)",
-          @click="equipItem(flatGear[activeItems[group]])",
-        )
-          template(slot="popoverContent", slot-scope="context")
-            equipmentAttributesPopover(:item="context.item")
-          template(slot="itemBadge", slot-scope="context")
-            starBadge(
-              :selected="true",
-              :show="!costumeMode || user.preferences.costume",
-              @click="equipItem(context.item)",
-            )
-    div(
-      v-for="group in itemsGroups",
-      v-if="!anyFilterSelected || viewOptions[group.key].selected",
-      :key="group.key",
-      :class='group.key',
-    )
-      h2.mb-3
-       | {{ group.label }}
-       |
-       span.badge.badge-pill.badge-default {{items[group.key].length}}
-
-      itemRows(
-        :items="sortItems(items[group.key], selectedSortGearBy)",
-        :itemWidth=94,
-        :itemMargin=24,
-        :type="group.key",
-        :noItemsLabel="$t('noGearItemsOfType', { type: group.label })"
-      )
-        template(slot="item", slot-scope="context")
-          item(
-            :item="context.item",
-            :itemContentClass="'shop_' + context.item.key",
-            :emptyItem="!context.item || context.item.key.indexOf('_base_0') !== -1",
-            :key="context.item.key",
-            @click="openEquipDialog(context.item)"
-          )
-            template(slot="itemBadge", slot-scope="context")
-              starBadge(
-                :selected="activeItems[context.item.type] === context.item.key",
-                :show="!costumeMode || user.preferences.costume",
-                @click="equipItem(context.item)",
-              )
-            template(slot="popoverContent", slot-scope="context")
-              equipmentAttributesPopover(:item="context.item")
-
-  equipGearModal(
-    :item="gearToEquip",
-    @equipItem="equipItem($event)",
-    @change="changeModalState($event)",
-    :costumeMode="costumeMode",
-    :isEquipped="gearToEquip == null ? false : activeItems[gearToEquip.type] === gearToEquip.key"
-  )
+<template>
+  <div class="row">
+    <div class="standard-sidebar d-none d-sm-block">
+      <div class="form-group">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><div class="form">
+        <h2 v-once>
+          {{ $t('filter') }}
+        </h2><h3>{{ this.groupBy === 'type' ? $t('equipmentType') : $t('class') }}</h3><div class="form-group">
+          <div
+            v-for="group in itemsGroups"
+            :key="group.key"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="groupBy + group.key"
+                v-model="viewOptions[group.key].selected"
+                class="custom-control-input"
+                type="checkbox"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="groupBy + group.key"
+              >{{ group.label }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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
+            :text="$t(selectedSortGearBy)"
+            right="right"
+          >
+            <b-dropdown-item
+              v-for="sort in sortGearBy"
+              :key="sort"
+              :active="selectedSortGearBy === sort"
+              @click="selectedSortGearBy = sort"
+            >
+              {{ $t(sort) }}
+            </b-dropdown-item>
+          </b-dropdown><span class="dropdown-label">{{ $t('groupBy2') }}</span><b-dropdown
+            :text="$t(groupBy === 'type' ? 'equipmentType' : 'class')"
+            right="right"
+          >
+            <b-dropdown-item
+              :active="groupBy === 'type'"
+              @click="groupBy = 'type'"
+            >
+              {{ $t('equipmentType') }}
+            </b-dropdown-item><b-dropdown-item
+              :active="groupBy === 'class'"
+              @click="groupBy = 'class'"
+            >
+              {{ $t('class') }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </div>
+      </div><drawer
+        :title="$t('equipment')"
+        :error-message="(costumeMode && !user.preferences.costume) ? $t('costumeDisabled') : null"
+        :open-status="openStatus"
+        @toggled="drawerToggled"
+      >
+        <div slot="drawer-header">
+          <div class="drawer-tab-container">
+            <div class="drawer-tab text-right">
+              <a
+                class="drawer-tab-text"
+                :class="{'drawer-tab-text-active': !costumeMode}"
+                @click="selectDrawerTab('equipment')"
+              >{{ $t('equipment') }}</a>
+            </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
+                class="float-right align-with-tab"
+                :label="$t(costumeMode ? 'useCostume' : 'autoEquipBattleGear')"
+                :checked="user.preferences[drawerPreference]"
+                :hover-text="$t(drawerPreference+'PopoverText')"
+                @change="changeDrawerPreference"
+              />
+            </div>
+          </div>
+        </div><div
+          slot="drawer-slider"
+          class="items items-one-line"
+        >
+          <item
+            v-for="(label, group) in gearTypesToStrings"
+            :key="flatGear[activeItems[group]] ? flatGear[activeItems[group]].key : group"
+            class="pointer"
+            :item="flatGear[activeItems[group]]"
+            :item-content-class="flatGear[activeItems[group]] ? 'shop_' + flatGear[activeItems[group]].key : null"
+            :empty-item="!flatGear[activeItems[group]] || flatGear[activeItems[group]].key.indexOf('_base_0') !== -1"
+            :label="label"
+            :popover-position="'top'"
+            :show-popover="flatGear[activeItems[group]] && Boolean(flatGear[activeItems[group]].text)"
+@click="equipItem(flatGear[activeItems[group]])"
+          >
+            <template
+              slot="popoverContent"
+              slot-scope="context"
+            >
+              <equipmentAttributesPopover :item="context.item" />
+            </template><template
+              slot="itemBadge"
+              slot-scope="context"
+            >
+              <starBadge
+                :selected="true"
+                :show="!costumeMode || user.preferences.costume"
+                @click="equipItem(context.item)"
+              />
+            </template>
+          </item>
+        </div>
+      </drawer><div
+        v-for="group in itemsGroups"
+        v-if="!anyFilterSelected || viewOptions[group.key].selected"
+        :key="group.key"
+        :class="group.key"
+      >
+        <h2 class="mb-3">
+          {{ group.label }}
+          <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"
+          :type="group.key"
+          :no-items-label="$t('noGearItemsOfType', { type: group.label })"
+        >
+          <template
+            slot="item"
+            slot-scope="context"
+          >
+            <item
+              :key="context.item.key"
+              :item="context.item"
+              :item-content-class="'shop_' + context.item.key"
+              :empty-item="!context.item || context.item.key.indexOf('_base_0') !== -1"
+              @click="openEquipDialog(context.item)"
+            >
+              <template
+                slot="itemBadge"
+                slot-scope="context"
+              >
+                <starBadge
+                  :selected="activeItems[context.item.type] === context.item.key"
+                  :show="!costumeMode || user.preferences.costume"
+                  @click="equipItem(context.item)"
+                />
+              </template><template
+                slot="popoverContent"
+                slot-scope="context"
+              >
+                <equipmentAttributesPopover :item="context.item" />
+              </template>
+            </item>
+          </template>
+        </itemRows>
+      </div>
+    </div><equipGearModal
+      :item="gearToEquip"
+      :costume-mode="costumeMode"
+      :is-equipped="gearToEquip == null ? false : activeItems[gearToEquip.type] === gearToEquip.key"
+      @equipItem="equipItem($event)"
+      @change="changeModalState($event)"
+    />
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/inventory/index.vue b/website/client/src/components/inventory/index.vue
index b2a414de1c..8ce2da2b12 100644
--- a/website/client/src/components/inventory/index.vue
+++ b/website/client/src/components/inventory/index.vue
@@ -1,11 +1,27 @@
-<template lang="pug">
-.row
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'items'}", exact) {{ $t('items') }}
-    router-link.nav-link(:to="{name: 'equipment'}") {{ $t('equipment') }}
-    router-link.nav-link(:to="{name: 'stable'}") {{ $t('stable') }}
-  .col-12
-    router-view
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'items'}"
+        exact="exact"
+      >
+        {{ $t('items') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'equipment'}"
+      >
+        {{ $t('equipment') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'stable'}"
+      >
+        {{ $t('stable') }}
+      </router-link>
+    </secondary-menu><div class="col-12">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/inventory/item.vue b/website/client/src/components/inventory/item.vue
index f188b2f272..ffbc4a33bf 100644
--- a/website/client/src/components/inventory/item.vue
+++ b/website/client/src/components/inventory/item.vue
@@ -1,25 +1,47 @@
-<template lang="pug">
-div(v-if="emptyItem")
-  .item-wrapper
-    .item.item-empty
-      .item-content
-    span.item-label(v-if="label") {{ label }}
-div(v-else)
-  .item-wrapper(@click="click", :id="itemId")
-    .item(:class="{'item-active': active, 'highlight-border':highlightBorder }")
-      slot(name="itemBadge", :item="item")
-      span.item-content(
-        :class="itemContentClass"
-      )
-    span.item-label(v-if="label") {{ label }}
-  b-popover(
-    v-if="showPopover"
-    :target="itemId",
-    triggers="hover",
-    :placement="popoverPosition",
-    :preventOverflow="false",
-  )
-    slot(name="popoverContent", :item="item")
+<template>
+  <div v-if="emptyItem">
+    <div class="item-wrapper">
+      <div class="item item-empty">
+        <div class="item-content"></div>
+      </div><span
+        v-if="label"
+        class="item-label"
+      >{{ label }}</span>
+    </div>
+  </div><div v-else>
+    <div
+      :id="itemId"
+      class="item-wrapper"
+      @click="click"
+    >
+      <div
+        class="item"
+        :class="{'item-active': active, 'highlight-border':highlightBorder }"
+      >
+        <slot
+          name="itemBadge"
+          :item="item"
+        ></slot><span
+          class="item-content"
+          :class="itemContentClass"
+        ></span>
+      </div><span
+        v-if="label"
+        class="item-label"
+      >{{ label }}</span>
+    </div><b-popover
+      v-if="showPopover"
+      :target="itemId"
+      triggers="hover"
+      :placement="popoverPosition"
+      :prevent-overflow="false"
+    >
+      <slot
+        name="popoverContent"
+        :item="item"
+      ></slot>
+    </b-popover>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/inventory/items/cards-modal.vue b/website/client/src/components/inventory/items/cards-modal.vue
index 562f171156..ddc55a12a5 100644
--- a/website/client/src/components/inventory/items/cards-modal.vue
+++ b/website/client/src/components/inventory/items/cards-modal.vue
@@ -1,16 +1,28 @@
-<template lang="pug">
-  b-modal#card(:title="$t(cardType + 'Card')", size='md', :hide-footer="true")
-    .modal-header
-      .pull-right(:class='`inventory_special_${cardType}`')
-      h4 {{ $t(cardType + 'Card') }}
-    .modal-body
-      div(style='padding:10px')
-        p {{ $t('toAndFromCard', { toName: user.profile.name, fromName}) }}
-        hr
-        div(v-markdown='cardMessage')
-    .modal-footer
-      small.pull-left {{ $t(cardType + 'CardExplanation')}}
-      button.btn.btn-secondary(@click='readCard()') {{ $t('ok') }}
+<template>
+  <b-modal
+    id="card"
+    :title="$t(cardType + 'Card')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-header">
+      <div
+        class="pull-right"
+        :class="`inventory_special_${cardType}`"
+      ></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>
+      </div>
+    </div><div class="modal-footer">
+      <small class="pull-left">{{ $t(cardType + 'CardExplanation') }}</small><button
+        class="btn btn-secondary"
+        @click="readCard()"
+      >
+        {{ $t('ok') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/inventory/items/index.vue b/website/client/src/components/inventory/items/index.vue
index 4987cddad3..5aa534ce46 100644
--- a/website/client/src/components/inventory/items/index.vue
+++ b/website/client/src/components/inventory/items/index.vue
@@ -1,165 +1,279 @@
-<template lang="pug">
-.row(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
-  .standard-sidebar.d-none.d-sm-block
-    .form-group
-      input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
-
-    .form
-      h2(v-once) {{ $t('filter') }}
-      h3(v-once) {{ $t('equipmentType') }}
-      .form-group
-        .form-check(
-          v-for="group in groups",
-          :key="group.key",
-        )
-          .custom-control.custom-checkbox
-            input.custom-control-input(type="checkbox", v-model="group.selected", :id="group.key")
-            label.custom-control-label(v-once, :for="group.key") {{ $t(group.key) }}
-  .standard-page
-    .clearfix
-      h1.float-left.mb-4.page-header(v-once) {{ $t('items') }}
-      .float-right
-        span.dropdown-label {{ $t('sortBy') }}
-        b-dropdown(:text="$t(sortBy)", right=true)
-          b-dropdown-item(@click="sortBy = 'quantity'", :active="sortBy === 'quantity'") {{ $t('quantity') }}
-          b-dropdown-item(@click="sortBy = 'AZ'", :active="sortBy === 'AZ'") {{ $t('AZ') }}
-    div(
-      v-for="group in groups",
-      v-if="!anyFilterSelected || group.selected",
-      :key="group.key",
-    )
-      h2.mb-3
-       | {{ $t(group.key) }}
-       |
-       span.badge.badge-pill.badge-default(v-if="group.key != 'special'") {{group.quantity}}
-
-
-      itemRows(
-        v-if="group.key === 'eggs'",
-        :items="items[group.key]",
-        :itemWidth=94,
-        :itemMargin=24,
-        :type="group.key",
-        :noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
-      )
-        template(slot="item", slot-scope="context")
-          item(
-            :item="context.item",
-            :key="context.item.key",
-            :itemContentClass="context.item.class",
-            :showPopover="currentDraggingEgg == null",
-            :active="currentDraggingEgg == context.item",
-            :highlightBorder="isHatchable(currentDraggingPotion, context.item)",
-            v-drag.drop.hatch="context.item.key",
-
-            @itemDragOver="onDragOver($event, context.item)",
-            @itemDropped="onDrop($event, context.item)",
-            @itemDragLeave="onDragLeave()",
-
-            @click="onEggClicked($event, context.item)",
-          )
-            template(slot="popoverContent", slot-scope="context")
-              h4.popover-content-title {{ context.item.text }}
-              .popover-content-text(v-if="currentDraggingPotion == null") {{ context.item.notes }}
-            template(slot="itemBadge", slot-scope="context")
-              countBadge(
-                :show="true",
-                :count="context.item.quantity"
-              )
-
-      itemRows(
-        v-else-if="group.key === 'hatchingPotions'",
-        :items="items[group.key]",
-        :itemWidth=94,
-        :itemMargin=24,
-        :type="group.key",
-        :noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
-      )
-        template(slot="item", slot-scope="context")
-          item(
-            :item="context.item",
-            :key="context.item.key",
-            :itemContentClass="context.item.class",
-            :showPopover="currentDraggingPotion == null",
-            :active="currentDraggingPotion == context.item",
-            :highlightBorder="isHatchable(context.item, currentDraggingEgg)",
-            v-drag.hatch="context.item.key",
-
-            @itemDragEnd="onDragEnd($event, context.item)",
-            @itemDragStart="onDragStart($event, context.item)",
-
-            @click="onPotionClicked($event, context.item)"
-          )
-            template(slot="popoverContent", slot-scope="context")
-              h4.popover-content-title {{ context.item.text }}
-              .popover-content-text {{ context.item.notes }}
-            template(slot="itemBadge", slot-scope="context")
-              countBadge(
-                :show="true",
-                :count="context.item.quantity"
-              )
-
-      itemRows(
-        v-else,
-        :items="items[group.key]",
-        :itemWidth=94,
-        :itemMargin=24,
-        :type="group.key",
-        :noItemsLabel="$t('noGearItemsOfType', { type: $t(group.key) })"
-      )
-        template(slot="item", slot-scope="context")
-          item(
-            :item="context.item",
-            :key="context.item.key",
-            :itemContentClass="context.item.class",
-            :showPopover="currentDraggingPotion == null",
-            @click="itemClicked(group.key, context.item)",
-          )
-            template(slot="popoverContent", slot-scope="context")
-              div.questPopover(v-if="group.key === 'quests'")
-                h4.popover-content-title {{ context.item.text }}
-                questInfo(:quest="context.item")
-
-              div(v-else)
-                h4.popover-content-title {{ context.item.text }}
-                .popover-content-text(v-html="context.item.notes")
-            template(slot="itemBadge", slot-scope="context")
-              countBadge(
-                :show="true",
-                :count="context.item.quantity"
-              )
-
-  hatchedPetDialog()
-
-  div.eggInfo(ref="draggingEggInfo")
-    div(v-if="currentDraggingEgg != null")
-      div.potion-icon(:class="'Pet_Egg_'+currentDraggingEgg.key")
-      div.popover
-        div.popover-content {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
-
-  div.eggInfo.mouse(ref="clickEggInfo", v-if="eggClickMode")
-    div(v-if="currentDraggingEgg != null")
-      div.potion-icon(:class="'Pet_Egg_'+currentDraggingEgg.key")
-      div.popover
-        div.popover-content {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
-
-  div.hatchingPotionInfo(ref="draggingPotionInfo")
-    div(v-if="currentDraggingPotion != null")
-      div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
-      div.popover
-        div.popover-content {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
-
-  div.hatchingPotionInfo.mouse(ref="clickPotionInfo", v-if="potionClickMode")
-    div(v-if="currentDraggingPotion != null")
-      div.potion-icon(:class="'Pet_HatchingPotion_'+currentDraggingPotion.key")
-      div.popover
-        div.popover-content {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
-
-  startQuestModal(
-    :group="user.party"
-  )
-
-  cards-modal(:card-options='cardOptions')
+<template>
+  <div
+    v-mousePosition="30"
+    class="row"
+    @mouseMoved="mouseMoved($event)"
+  >
+    <div class="standard-sidebar d-none d-sm-block">
+      <div class="form-group">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><div class="form">
+        <h2 v-once>
+          {{ $t('filter') }}
+        </h2><h3 v-once>
+          {{ $t('equipmentType') }}
+        </h3><div class="form-group">
+          <div
+            v-for="group in groups"
+            :key="group.key"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="group.key"
+                v-model="group.selected"
+                class="custom-control-input"
+                type="checkbox"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="group.key"
+              >{{ $t(group.key) }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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
+            :text="$t(sortBy)"
+            right="right"
+          >
+            <b-dropdown-item
+              :active="sortBy === 'quantity'"
+              @click="sortBy = 'quantity'"
+            >
+              {{ $t('quantity') }}
+            </b-dropdown-item><b-dropdown-item
+              :active="sortBy === 'AZ'"
+              @click="sortBy = 'AZ'"
+            >
+              {{ $t('AZ') }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </div>
+      </div><div
+        v-for="group in groups"
+        v-if="!anyFilterSelected || group.selected"
+        :key="group.key"
+      >
+        <h2 class="mb-3">
+          {{ $t(group.key) }}
+          <span
+            v-if="group.key != 'special'"
+            class="badge badge-pill badge-default"
+          >{{ group.quantity }}</span>
+        </h2><itemRows
+          v-if="group.key === 'eggs'"
+          :items="items[group.key]"
+          :item-width="94"
+          :item-margin="24"
+          :type="group.key"
+          :no-items-label="$t('noGearItemsOfType', { type: $t(group.key) })"
+        >
+          <template
+            slot="item"
+            slot-scope="context"
+          >
+            <item
+              :key="context.item.key"
+              v-drag.drop.hatch="context.item.key"
+              :item="context.item"
+              :item-content-class="context.item.class"
+              :show-popover="currentDraggingEgg == null"
+              :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)"
+            >
+              <template
+                slot="popoverContent"
+                slot-scope="context"
+              >
+                <h4 class="popover-content-title">
+                  {{ context.item.text }}
+                </h4><div
+                  v-if="currentDraggingPotion == null"
+                  class="popover-content-text"
+                >
+                  {{ context.item.notes }}
+                </div>
+              </template><template
+                slot="itemBadge"
+                slot-scope="context"
+              >
+                <countBadge
+                  :show="true"
+                  :count="context.item.quantity"
+                />
+              </template>
+            </item>
+          </template>
+        </itemRows><itemRows
+          v-else-if="group.key === 'hatchingPotions'"
+          :items="items[group.key]"
+          :item-width="94"
+          :item-margin="24"
+          :type="group.key"
+          :no-items-label="$t('noGearItemsOfType', { type: $t(group.key) })"
+        >
+          <template
+            slot="item"
+            slot-scope="context"
+          >
+            <item
+              :key="context.item.key"
+              v-drag.hatch="context.item.key"
+              :item="context.item"
+              :item-content-class="context.item.class"
+              :show-popover="currentDraggingPotion == null"
+              :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)"
+            >
+              <template
+                slot="popoverContent"
+                slot-scope="context"
+              >
+                <h4 class="popover-content-title">
+                  {{ context.item.text }}
+                </h4><div class="popover-content-text">
+                  {{ context.item.notes }}
+                </div>
+              </template><template
+                slot="itemBadge"
+                slot-scope="context"
+              >
+                <countBadge
+                  :show="true"
+                  :count="context.item.quantity"
+                />
+              </template>
+            </item>
+          </template>
+        </itemRows><itemRows
+          v-else
+          :items="items[group.key]"
+          :item-width="94"
+          :item-margin="24"
+          :type="group.key"
+          :no-items-label="$t('noGearItemsOfType', { type: $t(group.key) })"
+        >
+          <template
+            slot="item"
+            slot-scope="context"
+          >
+            <item
+              :key="context.item.key"
+              :item="context.item"
+              :item-content-class="context.item.class"
+              :show-popover="currentDraggingPotion == null"
+              @click="itemClicked(group.key, context.item)"
+            >
+              <template
+                slot="popoverContent"
+                slot-scope="context"
+              >
+                <div
+                  v-if="group.key === 'quests'"
+                  class="questPopover"
+                >
+                  <h4 class="popover-content-title">
+                    {{ context.item.text }}
+                  </h4><questInfo :quest="context.item" />
+                </div><div v-else>
+                  <h4 class="popover-content-title">
+                    {{ context.item.text }}
+                  </h4><div
+                    class="popover-content-text"
+                    v-html="context.item.notes"
+                  ></div>
+                </div>
+              </template><template
+                slot="itemBadge"
+                slot-scope="context"
+              >
+                <countBadge
+                  :show="true"
+                  :count="context.item.quantity"
+                />
+              </template>
+            </item>
+          </template>
+        </itemRows>
+      </div>
+    </div><hatchedPetDialog /><div
+      ref="draggingEggInfo"
+      class="eggInfo"
+    >
+      <div v-if="currentDraggingEgg != null">
+        <div
+          class="potion-icon"
+          :class="'Pet_Egg_'+currentDraggingEgg.key"
+        ></div><div class="popover">
+          <div class="popover-content">
+            {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
+          </div>
+        </div>
+      </div>
+    </div><div
+      v-if="eggClickMode"
+      ref="clickEggInfo"
+      class="eggInfo mouse"
+    >
+      <div v-if="currentDraggingEgg != null">
+        <div
+          class="potion-icon"
+          :class="'Pet_Egg_'+currentDraggingEgg.key"
+        ></div><div class="popover">
+          <div class="popover-content">
+            {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
+          </div>
+        </div>
+      </div>
+    </div><div
+      ref="draggingPotionInfo"
+      class="hatchingPotionInfo"
+    >
+      <div v-if="currentDraggingPotion != null">
+        <div
+          class="potion-icon"
+          :class="'Pet_HatchingPotion_'+currentDraggingPotion.key"
+        ></div><div class="popover">
+          <div class="popover-content">
+            {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
+          </div>
+        </div>
+      </div>
+    </div><div
+      v-if="potionClickMode"
+      ref="clickPotionInfo"
+      class="hatchingPotionInfo mouse"
+    >
+      <div v-if="currentDraggingPotion != null">
+        <div
+          class="potion-icon"
+          :class="'Pet_HatchingPotion_'+currentDraggingPotion.key"
+        ></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>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/inventory/stable/foodItem.vue b/website/client/src/components/inventory/stable/foodItem.vue
index fc3d80e639..884c438c15 100644
--- a/website/client/src/components/inventory/stable/foodItem.vue
+++ b/website/client/src/components/inventory/stable/foodItem.vue
@@ -1,24 +1,38 @@
-<template lang="pug">
-div
-  .item-wrapper(@click="click($event)", :id="itemId")
-    .item(:class="{'item-active': active }")
-      countBadge(
-        :show="true",
-        :count="itemCount"
-      )
-      span.item-content(
-        :class="'Pet_Food_'+item.key",
-        v-drag.food="item.key",
-        @itemDragEnd="dragend($event)",
-        @itemDragStart="dragstart($event)"
-      )
-  b-popover(
-    :target="itemId",
-    triggers="hover",
-    placement="top",
-  )
-    h4.popover-content-title {{ itemName || item.text() }}
-    div.popover-content-text(v-html="item.notes()")
+<template>
+  <div>
+    <div
+      :id="itemId"
+      class="item-wrapper"
+      @click="click($event)"
+    >
+      <div
+        class="item"
+        :class="{'item-active': active }"
+      >
+        <countBadge
+          :show="true"
+          :count="itemCount"
+        /><span
+          v-drag.food="item.key"
+          class="item-content"
+          :class="'Pet_Food_'+item.key"
+          @itemDragEnd="dragend($event)"
+          @itemDragStart="dragstart($event)"
+        ></span>
+      </div>
+    </div><b-popover
+      :target="itemId"
+      triggers="hover"
+      placement="top"
+    >
+      <h4 class="popover-content-title">
+        {{ itemName || item.text() }}
+      </h4><div
+        class="popover-content-text"
+        v-html="item.notes()"
+      ></div>
+    </b-popover>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/inventory/stable/hatchedPetDialog.vue b/website/client/src/components/inventory/stable/hatchedPetDialog.vue
index c7f6a86629..a497def6ac 100644
--- a/website/client/src/components/inventory/stable/hatchedPetDialog.vue
+++ b/website/client/src/components/inventory/stable/hatchedPetDialog.vue
@@ -1,14 +1,38 @@
-<template lang="pug">
-b-modal#hatchedPet-modal(:hide-header="true")
-  div.content(v-if="pet != null")
-    div.dialog-header.title(v-once) {{ $t('hatchedPetGeneric') }}
-    div.inner-content
-      div.pet-background
-        div(:class="pet.class")
-      h4.title {{ pet.name }}
-      div.text(v-if="!hideText", v-markdown="$t('hatchedPetHowToUse', { stableUrl: '/inventory/stable' })")
-      button.btn.btn-primary(@click="close()") {{ $t('onward') }}
-  div.clearfix(slot="modal-footer")
+<template>
+  <b-modal
+    id="hatchedPet-modal"
+    :hide-header="true"
+  >
+    <div
+      v-if="pet != null"
+      class="content"
+    >
+      <div
+        v-once
+        class="dialog-header title"
+      >
+        {{ $t('hatchedPetGeneric') }}
+      </div><div class="inner-content">
+        <div class="pet-background">
+          <div :class="pet.class"></div>
+        </div><h4 class="title">
+          {{ pet.name }}
+        </h4><div
+          v-if="!hideText"
+          v-markdown="$t('hatchedPetHowToUse', { stableUrl: '/inventory/stable' })"
+          class="text"
+        ></div><button
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('onward') }}
+        </button>
+      </div>
+    </div><div
+      slot="modal-footer"
+      class="clearfix"
+    ></div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/inventory/stable/hatchingModal.vue b/website/client/src/components/inventory/stable/hatchingModal.vue
index 213b959136..72341d6e22 100644
--- a/website/client/src/components/inventory/stable/hatchingModal.vue
+++ b/website/client/src/components/inventory/stable/hatchingModal.vue
@@ -1,17 +1,40 @@
-<template lang="pug">
-b-modal#hatching-modal()
-  div.content(v-if="hatchablePet")
-    div.potionEggGroup
-      div.potionEggBackground
-        div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
-      div.potionEggBackground
-        div(:class="'Pet_Egg_'+hatchablePet.eggKey")
-    h4.title {{ hatchablePet.name }}
-    div.text(v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })")
-  span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
-  div(slot="modal-footer")
-    button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
-    button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
+<template>
+  <b-modal id="hatching-modal">
+    <div
+      v-if="hatchablePet"
+      class="content"
+    >
+      <div class="potionEggGroup">
+        <div class="potionEggBackground">
+          <div :class="'Pet_HatchingPotion_'+hatchablePet.potionKey"></div>
+        </div><div class="potionEggBackground">
+          <div :class="'Pet_Egg_'+hatchablePet.eggKey"></div>
+        </div>
+      </div><h4 class="title">
+        {{ hatchablePet.name }}
+      </h4><div
+        class="text"
+        v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })"
+      ></div>
+    </div><span
+      slot="modal-header"
+      class="svg-icon icon-10"
+      @click="closeHatchPetDialog()"
+      v-html="icons.close"
+    ></span><div slot="modal-footer">
+      <button
+        class="btn btn-primary"
+        @click="hatchPet(hatchablePet)"
+      >
+        {{ $t('hatch') }}
+      </button><button
+        class="btn btn-secondary btn-flat"
+        @click="closeHatchPetDialog()"
+      >
+        {{ $t('cancel') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index c0aeedbc0a..682cff631c 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -1,163 +1,259 @@
-<template lang="pug">
-.row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
-  .standard-sidebar.d-none.d-sm-block
-    div
-      #npmMattStable.npc_matt
-      b-popover(
-        triggers="hover",
-        placement="right",
-        target="npmMattStable"
-      )
-        h4.popover-content-title(v-once) {{ $t('mattBoch') }}
-        .popover-content-text(v-once) {{ $t('mattBochText1') }}
-    .form-group
-      input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
-    .form
-      h2(v-once) {{ $t('filter') }}
-      h3(v-once) {{ $t('pets') }}
-      .form-group
-        .form-check(
-          v-for="petGroup in petGroups",
-          :key="petGroup.key"
-        )
-          .custom-control.custom-checkbox
-            input.custom-control-input(
-              type="checkbox",
-              v-model="viewOptions[petGroup.key].selected",
-              :disabled="viewOptions[petGroup.key].animalCount == 0",
-              :id="petGroup.key",
-            )
-            label.custom-control-label(v-once, :for="petGroup.key") {{ petGroup.label }}
-      h3(v-once) {{ $t('mounts') }}
-      .form-group
-        .form-check(
-          v-for="mountGroup in mountGroups",
-          :key="mountGroup.key"
-        )
-          .custom-control.custom-checkbox
-            input.custom-control-input(
-              type="checkbox",
-              v-model="viewOptions[mountGroup.key].selected",
-              :disabled="viewOptions[mountGroup.key].animalCount == 0",
-              :id="mountGroup.key",
-            )
-            label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
-
-      div.form-group.clearfix
-        h3.float-left {{ $t('hideMissing') }}
-        toggle-switch.float-right(
-          :checked="hideMissing",
-          @change="updateHideMissing"
-        )
-  .standard-page
-    .clearfix
-      h1.float-left.mb-4.page-header(v-once) {{ $t('stable') }}
-
-      div.float-right
-        span.dropdown-label {{ $t('sortBy') }}
-        b-dropdown(:text="$t(selectedSortBy)", right=true)
-          b-dropdown-item(
-            v-for="sort in sortByItems",
-            @click="selectedSortBy = sort",
-            :active="selectedSortBy === sort",
-            :key="sort"
-          ) {{ $t(sort) }}
-
-    h2.mb-3
-      | {{ $t('pets') }}
-      |
-      span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
-
-    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 }}
-
-      .pet-row.d-flex(
-        v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-        v-if='index === 0 || $_openedItemRows_isToggled(petGroup.key)')
-        .pet-group(
-          v-for='item in group'
-          v-drag.drop.food="item.key",
-          @itemDragOver="onDragOver($event, item)",
-          @itemDropped="onDrop($event, item)",
-          @itemDragLeave="onDragLeave()",
-          :class="{'last': item.isLastInRow}"
-        )
-          petItem(
-            :item="item",
-            :popoverPosition="'top'",
-            :showPopover="currentDraggingFood == null",
-            :highlightBorder="highlightPet == item.key",
-            @click="petClicked(item)"
-          )
-            template(slot="itemBadge", slot-scope="context")
-              starBadge(
-                :selected="context.item.key === currentPet",
-                :show="isOwned('pet', context.item)",
-                @click="selectPet(context.item)"
-              )
-
-      .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets" && petGroup.key !== "wackyPets"')
-        | {{ $_openedItemRows_isToggled(petGroup.key) ? $t('showLess') : $t('showMore') }}
-
-    h2
-      | {{ $t('mounts') }}
-      |
-      span.badge.badge-pill.badge-default {{countOwnedAnimals(mountGroups[0], 'mount')}}
-
-    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 }}
-
-      .pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
-        v-if='index === 0 || $_openedItemRows_isToggled(mountGroup.key)')
-        .pet-group(v-for='item in group')
-          mountItem(
-            :item="item",
-            :key="item.key",
-            :popoverPosition="'top'",
-            :showPopover="true",
-            @click="selectMount(item)"
-          )
-            span(slot="popoverContent")
-              h4.popover-content-title {{ item.name }}
-            template(slot="itemBadge", slot-scope="context")
-              starBadge(
-                :selected="item.key === currentMount",
-                :show="isOwned('mount', item)",
-                @click="selectMount(item)",
-              )
-
-      .btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
-        | {{ $_openedItemRows_isToggled(mountGroup.key) ? $t('showLess') : $t('showMore') }}
-
-    inventoryDrawer
-      template(slot="item", slot-scope="ctx")
-        foodItem(
-          :item="ctx.item",
-          :itemCount="ctx.itemCount",
-          :itemContentClass="ctx.itemClass",
-          :active="currentDraggingFood === ctx.item",
-          @itemDragEnd="onDragEnd()",
-          @itemDragStart="onDragStart($event, ctx.item)",
-          @itemClick="onFoodClicked($event, ctx.item)"
-        )
-  hatchedPetDialog(:hideText="true")
-  div.foodInfo(ref="dragginFoodInfo")
-    div(v-if="currentDraggingFood != null")
-      div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
-      div.popover
-        div.popover-content {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
-  div.foodInfo.mouse(ref="clickFoodInfo", v-if="foodClickMode")
-    div(v-if="currentDraggingFood != null")
-      div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
-      div.popover
-        div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
-  mount-raised-modal
-  welcome-modal
-  hatching-modal(:hatchablePet.sync='hatchablePet')
+<template>
+  <div
+    v-mousePosition="30"
+    class="row stable"
+    @mouseMoved="mouseMoved($event)"
+  >
+    <div class="standard-sidebar d-none d-sm-block">
+      <div>
+        <div
+          id="npmMattStable"
+          class="npc_matt"
+        ></div><b-popover
+          triggers="hover"
+          placement="right"
+          target="npmMattStable"
+        >
+          <h4
+            v-once
+            class="popover-content-title"
+          >
+            {{ $t('mattBoch') }}
+          </h4><div
+            v-once
+            class="popover-content-text"
+          >
+            {{ $t('mattBochText1') }}
+          </div>
+        </b-popover>
+      </div><div class="form-group">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><div class="form">
+        <h2 v-once>
+          {{ $t('filter') }}
+        </h2><h3 v-once>
+          {{ $t('pets') }}
+        </h3><div class="form-group">
+          <div
+            v-for="petGroup in petGroups"
+            :key="petGroup.key"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="petGroup.key"
+                v-model="viewOptions[petGroup.key].selected"
+                class="custom-control-input"
+                type="checkbox"
+                :disabled="viewOptions[petGroup.key].animalCount == 0"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="petGroup.key"
+              >{{ petGroup.label }}</label>
+            </div>
+          </div>
+        </div><h3 v-once>
+          {{ $t('mounts') }}
+        </h3><div class="form-group">
+          <div
+            v-for="mountGroup in mountGroups"
+            :key="mountGroup.key"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="mountGroup.key"
+                v-model="viewOptions[mountGroup.key].selected"
+                class="custom-control-input"
+                type="checkbox"
+                :disabled="viewOptions[mountGroup.key].animalCount == 0"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="mountGroup.key"
+              >{{ mountGroup.label }}</label>
+            </div>
+          </div>
+        </div><div class="form-group clearfix">
+          <h3 class="float-left">
+            {{ $t('hideMissing') }}
+          </h3><toggle-switch
+            class="float-right"
+            :checked="hideMissing"
+            @change="updateHideMissing"
+          />
+        </div>
+      </div>
+    </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
+            :text="$t(selectedSortBy)"
+            right="right"
+          >
+            <b-dropdown-item
+              v-for="sort in sortByItems"
+              :key="sort"
+              :active="selectedSortBy === sort"
+              @click="selectedSortBy = sort"
+            >
+              {{ $t(sort) }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </div>
+      </div><h2 class="mb-3">
+        {{ $t('pets') }}
+        <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
+          v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)"
+          v-if="index === 0 || $_openedItemRows_isToggled(petGroup.key)"
+          class="pet-row d-flex"
+        >
+          <div
+            v-for="item in group"
+            v-drag.drop.food="item.key"
+            class="pet-group"
+            :class="{'last': item.isLastInRow}"
+            @itemDragOver="onDragOver($event, item)"
+            @itemDropped="onDrop($event, item)"
+            @itemDragLeave="onDragLeave()"
+          >
+            <petItem
+              :item="item"
+              :popover-position="'top'"
+              :show-popover="currentDraggingFood == null"
+              :highlight-border="highlightPet == item.key"
+              @click="petClicked(item)"
+            >
+              <template
+                slot="itemBadge"
+                slot-scope="context"
+              >
+                <starBadge
+                  :selected="context.item.key === currentPet"
+                  :show="isOwned('pet', context.item)"
+                  @click="selectPet(context.item)"
+                />
+              </template>
+            </petItem>
+          </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>
+        {{ $t('mounts') }}
+        <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
+          v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
+          v-if="index === 0 || $_openedItemRows_isToggled(mountGroup.key)"
+          class="pet-row d-flex"
+        >
+          <div
+            v-for="item in group"
+            class="pet-group"
+          >
+            <mountItem
+              :key="item.key"
+              :item="item"
+              :popover-position="'top'"
+              :show-popover="true"
+              @click="selectMount(item)"
+            >
+              <span slot="popoverContent"><h4 class="popover-content-title">{{ item.name }}</h4></span><template
+                slot="itemBadge"
+                slot-scope="context"
+              >
+                <starBadge
+                  :selected="item.key === currentMount"
+                  :show="isOwned('mount', item)"
+                  @click="selectMount(item)"
+                />
+              </template>
+            </mountItem>
+          </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>
+        <template
+          slot="item"
+          slot-scope="ctx"
+        >
+          <foodItem
+            :item="ctx.item"
+            :item-count="ctx.itemCount"
+            :item-content-class="ctx.itemClass"
+            :active="currentDraggingFood === ctx.item"
+            @itemDragEnd="onDragEnd()"
+            @itemDragStart="onDragStart($event, ctx.item)"
+            @itemClick="onFoodClicked($event, ctx.item)"
+          />
+        </template>
+      </inventoryDrawer>
+    </div><hatchedPetDialog :hide-text="true" /><div
+      ref="dragginFoodInfo"
+      class="foodInfo"
+    >
+      <div v-if="currentDraggingFood != null">
+        <div
+          class="food-icon"
+          :class="'Pet_Food_'+currentDraggingFood.key"
+        ></div><div class="popover">
+          <div class="popover-content">
+            {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
+          </div>
+        </div>
+      </div>
+    </div><div
+      v-if="foodClickMode"
+      ref="clickFoodInfo"
+      class="foodInfo mouse"
+    >
+      <div v-if="currentDraggingFood != null">
+        <div
+          class="food-icon"
+          :class="'Pet_Food_'+currentDraggingFood.key"
+        ></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>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/inventory/stable/mountItem.vue b/website/client/src/components/inventory/stable/mountItem.vue
index a7f7d15dad..b1b4f11abc 100644
--- a/website/client/src/components/inventory/stable/mountItem.vue
+++ b/website/client/src/components/inventory/stable/mountItem.vue
@@ -1,18 +1,34 @@
-<template lang="pug">
-div
-  .item-wrapper(@click="click()", :id="itemId")
-    .item.pet-slot(
-      :class="{'item-empty': !isOwned()}",
-    )
-      slot(name="itemBadge", :item="item")
-      span.item-content(:class="itemClass()")
-  b-popover(
-    :target="itemId",
-    v-if="showPopover",
-    triggers="hover",
-    :placement="popoverPosition",
-  )
-    slot(name="popoverContent", :item="item")
+<template>
+  <div>
+    <div
+      :id="itemId"
+      class="item-wrapper"
+      @click="click()"
+    >
+      <div
+        class="item pet-slot"
+        :class="{'item-empty': !isOwned()}"
+      >
+        <slot
+          name="itemBadge"
+          :item="item"
+        ></slot><span
+          class="item-content"
+          :class="itemClass()"
+        ></span>
+      </div>
+    </div><b-popover
+      v-if="showPopover"
+      :target="itemId"
+      triggers="hover"
+      :placement="popoverPosition"
+    >
+      <slot
+        name="popoverContent"
+        :item="item"
+      ></slot>
+    </b-popover>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/inventory/stable/mountRaisedModal.vue b/website/client/src/components/inventory/stable/mountRaisedModal.vue
index e69163c3a7..cf380b8e75 100644
--- a/website/client/src/components/inventory/stable/mountRaisedModal.vue
+++ b/website/client/src/components/inventory/stable/mountRaisedModal.vue
@@ -1,13 +1,34 @@
-<template lang="pug">
-b-modal#mount-raised-modal(:hide-header="true")
-  div.content(v-if="mount != null")
-    div.dialog-header.title {{ $t('raisedPet', {pet: mount.text()}) }}
-    div.inner-content
-      div.pet-background
-        .mount(:class="`Mount_Icon_${mount.key}`")
-      h4.title {{ mount.text() }}
-      button.btn.btn-primary.onward(@click="close()") {{ $t('onward') }}
-  div.clearfix(slot="modal-footer")
+<template>
+  <b-modal
+    id="mount-raised-modal"
+    :hide-header="true"
+  >
+    <div
+      v-if="mount != null"
+      class="content"
+    >
+      <div class="dialog-header title">
+        {{ $t('raisedPet', {pet: mount.text()}) }}
+      </div><div class="inner-content">
+        <div class="pet-background">
+          <div
+            class="mount"
+            :class="`Mount_Icon_${mount.key}`"
+          ></div>
+        </div><h4 class="title">
+          {{ mount.text() }}
+        </h4><button
+          class="btn btn-primary onward"
+          @click="close()"
+        >
+          {{ $t('onward') }}
+        </button>
+      </div>
+    </div><div
+      slot="modal-footer"
+      class="clearfix"
+    ></div>
+  </b-modal>
 </template>
 
 
diff --git a/website/client/src/components/inventory/stable/petItem.vue b/website/client/src/components/inventory/stable/petItem.vue
index 1ddac32ffd..8d6b158471 100644
--- a/website/client/src/components/inventory/stable/petItem.vue
+++ b/website/client/src/components/inventory/stable/petItem.vue
@@ -1,34 +1,69 @@
-<template lang="pug">
-  div
-    .item-wrapper(@click="click()", :id="itemId")
-      .item.pet-slot(
-      :class="{'item-empty': !isOwned(), 'highlight': highlightBorder}",
-      )
-        slot(name="itemBadge", :item="item")
-        span.item-content.hatchAgain(v-if="mountOwned() && isHatchable() && !item.isSpecial()")
-          span.egg(:class="eggClass")
-          span.potion(:class="potionClass")
-        span.item-content(v-else, :class="getPetItemClass()")
-        span.pet-progress-background(v-if="isAllowedToFeed() && progress() > 0")
-          div.pet-progress-bar(v-bind:style="{width: 100 * progress()/50 + '%' }")
-      span.item-label(v-if="label") {{ label }}
-
-    b-popover(
-    :target="itemId",
-    :triggers="showPopover ? 'hover' : ''",
-    :placement="popoverPosition",
-    )
-      div.hatchablePopover(v-if="item.isHatchable()")
-        h4.popover-content-title {{ item.name }}
-        div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
-        div.potionEggGroup
-          div.potionEggBackground
-            div(:class="potionClass")
-          div.potionEggBackground
-            div(:class="eggClass")
-      div(v-else)
-        h4.popover-content-title {{ item.name }}
-
+<template>
+  <div>
+    <div
+      :id="itemId"
+      class="item-wrapper"
+      @click="click()"
+    >
+      <div
+        class="item pet-slot"
+        :class="{'item-empty': !isOwned(), 'highlight': highlightBorder}"
+      >
+        <slot
+          name="itemBadge"
+          :item="item"
+        ></slot><span
+          v-if="mountOwned() && isHatchable() && !item.isSpecial()"
+          class="item-content hatchAgain"
+        ><span
+          class="egg"
+          :class="eggClass"
+        ></span><span
+          class="potion"
+          :class="potionClass"
+        ></span></span><span
+          v-else
+          class="item-content"
+          :class="getPetItemClass()"
+        ></span><span
+          v-if="isAllowedToFeed() && progress() > 0"
+          class="pet-progress-background"
+        ><div
+          class="pet-progress-bar"
+          :style="{width: 100 * progress()/50 + '%' }"
+        ></div></span>
+      </div><span
+        v-if="label"
+        class="item-label"
+      >{{ label }}</span>
+    </div><b-popover
+      :target="itemId"
+      :triggers="showPopover ? 'hover' : ''"
+      :placement="popoverPosition"
+    >
+      <div
+        v-if="item.isHatchable()"
+        class="hatchablePopover"
+      >
+        <h4 class="popover-content-title">
+          {{ item.name }}
+        </h4><div
+          class="popover-content-text"
+          v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })"
+        ></div><div class="potionEggGroup">
+          <div class="potionEggBackground">
+            <div :class="potionClass"></div>
+          </div><div class="potionEggBackground">
+            <div :class="eggClass"></div>
+          </div>
+        </div>
+      </div><div v-else>
+        <h4 class="popover-content-title">
+          {{ item.name }}
+        </h4>
+      </div>
+    </b-popover>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/inventory/stable/welcomeModal.vue b/website/client/src/components/inventory/stable/welcomeModal.vue
index 796e6d34cf..2fb1f49f9f 100644
--- a/website/client/src/components/inventory/stable/welcomeModal.vue
+++ b/website/client/src/components/inventory/stable/welcomeModal.vue
@@ -1,13 +1,26 @@
-<template lang="pug">
-b-modal#welcome-modal(:ok-only="true",
-  :ok-title="$t('gotIt')",
-  :visible="!hideDialog",
-  :hide-header="true",
-  @hide="hideFlag()")
-  div.content
-    div.npc_matt
-    h1.page-header(v-once) {{ $t('welcomeStable') }}
-    div.content-text(v-once) {{ $t('welcomeStableText') }}
+<template>
+  <b-modal
+    id="welcome-modal"
+    :ok-only="true"
+    :ok-title="$t('gotIt')"
+    :visible="!hideDialog"
+    :hide-header="true"
+    @hide="hideFlag()"
+  >
+    <div class="content">
+      <div class="npc_matt"></div><h1
+        v-once
+        class="page-header"
+      >
+        {{ $t('welcomeStable') }}
+      </h1><div
+        v-once
+        class="content-text"
+      >
+        {{ $t('welcomeStableText') }}
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/memberDetails.vue b/website/client/src/components/memberDetails.vue
index 56130a4ecd..bf73a1a1be 100644
--- a/website/client/src/components/memberDetails.vue
+++ b/website/client/src/components/memberDetails.vue
@@ -1,55 +1,72 @@
-<template lang="pug">
-.member-details(
-  :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }",
-  @click='showMemberModal(member)'
-)
-  div(:class="{ 'col-4': !isHeader }")
-    avatar(
-      :member="member",
-      @click.native="$emit('click')",
-      @mouseover.native="$emit('onHover')",
-      @mouseout.native="$emit('onHover')",
-      :hide-class-badge="classBadgePosition !== 'under-avatar'",
-    )
-  .member-stats(:class="{'col-8': !expanded && !isHeader}")
-    .d-flex.align-items-center.profile-first-row
-      class-badge(v-if="classBadgePosition === 'next-to-name'", :member-class="member.stats.class")
-      .d-flex.flex-column.profile-name-character
-        h3.character-name
-          | {{member.profile.name}}
-          .is-buffed(v-if="isBuffed", v-b-tooltip.hover.bottom="$t('buffed')")
-            .svg-icon(v-html="icons.buff")
-        .small-text.character-level
-          span.mr-1(
-            v-if="member.auth && member.auth.local && member.auth.local.username"
-          ) @{{ member.auth.local.username }}
-          span.mr-1(v-if="member.auth && member.auth.local && member.auth.local.username") •
-          span {{ characterLevel }}
-    stats-bar(
-      :icon="icons.health",
-      :value="member.stats.hp",
-      :maxValue="MAX_HEALTH",
-      :tooltip="$t('health')",
-      progressClass="bg-health",
-      :condensed="condensed"
-    )
-    stats-bar(
-      :icon="icons.experience",
-      :value="member.stats.exp",
-      :maxValue="toNextLevel",
-      :tooltip="$t('experience')",
-      progressClass="bg-experience",
-      :condensed="condensed"
-    )
-    stats-bar(
-      v-if="hasClass",
-      :icon="icons.mana",
-      :value="member.stats.mp",
-      :maxValue="maxMP",
-      :tooltip="$t('mana')",
-      progressClass="bg-mana",
-      :condensed="condensed"
-    )
+<template>
+  <div
+    class="member-details"
+    :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }"
+    @click="showMemberModal(member)"
+  >
+    <div :class="{ 'col-4': !isHeader }">
+      <avatar
+        :member="member"
+        :hide-class-badge="classBadgePosition !== 'under-avatar'"
+        @click.native="$emit('click')"
+        @mouseover.native="$emit('onHover')"
+        @mouseout.native="$emit('onHover')"
+      />
+    </div><div
+      class="member-stats"
+      :class="{'col-8': !expanded && !isHeader}"
+    >
+      <div class="d-flex align-items-center profile-first-row">
+        <class-badge
+          v-if="classBadgePosition === 'next-to-name'"
+          :member-class="member.stats.class"
+        /><div class="d-flex flex-column profile-name-character">
+          <h3 class="character-name">
+            {{ member.profile.name }}<div
+              v-if="isBuffed"
+              v-b-tooltip.hover.bottom="$t('buffed')"
+              class="is-buffed"
+            >
+              <div
+                class="svg-icon"
+                v-html="icons.buff"
+              ></div>
+            </div>
+          </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
+              v-if="member.auth && member.auth.local && member.auth.local.username"
+              class="mr-1"
+            >•</span><span>{{ characterLevel }}</span>
+          </div>
+        </div>
+      </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
+        :icon="icons.experience"
+        :value="member.stats.exp"
+        :max-value="toNextLevel"
+        :tooltip="$t('experience')"
+        progress-class="bg-experience"
+        :condensed="condensed"
+      /><stats-bar
+        v-if="hasClass"
+        :icon="icons.mana"
+        :value="member.stats.mp"
+        :max-value="maxMP"
+        :tooltip="$t('mana')"
+        progress-class="bg-mana"
+        :condensed="condensed"
+      />
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/members/classBadge.vue b/website/client/src/components/members/classBadge.vue
index 2225a470ae..934b9608c9 100644
--- a/website/client/src/components/members/classBadge.vue
+++ b/website/client/src/components/members/classBadge.vue
@@ -1,6 +1,10 @@
-<template lang="pug">
-.class-badge.d-flex.justify-content-center
-  .align-self-center.svg-icon(v-html="icons[memberClass]")
+<template>
+  <div class="class-badge d-flex justify-content-center">
+    <div
+      class="align-self-center svg-icon"
+      v-html="icons[memberClass]"
+    ></div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/members/groupMemberSearchDropdown.vue b/website/client/src/components/members/groupMemberSearchDropdown.vue
index f62c8a346d..a62281982d 100644
--- a/website/client/src/components/members/groupMemberSearchDropdown.vue
+++ b/website/client/src/components/members/groupMemberSearchDropdown.vue
@@ -1,8 +1,20 @@
-<template lang="pug">
-b-dropdown.select-member(:text="text")
-  input.form-control(type='text', v-model='searchTerm')
-  b-dropdown-item(v-for="member in memberResults", :key="member._id", @click="selectMember(member)")
-    | {{ member.profile.name }}
+<template>
+  <b-dropdown
+    class="select-member"
+    :text="text"
+  >
+    <input
+      v-model="searchTerm"
+      class="form-control"
+      type="text"
+    ><b-dropdown-item
+      v-for="member in memberResults"
+      :key="member._id"
+      @click="selectMember(member)"
+    >
+      {{ member.profile.name }}
+    </b-dropdown-item>
+  </b-dropdown>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/members/memberSearchDropdown.vue b/website/client/src/components/members/memberSearchDropdown.vue
index b558a0cc75..323ebe1af2 100644
--- a/website/client/src/components/members/memberSearchDropdown.vue
+++ b/website/client/src/components/members/memberSearchDropdown.vue
@@ -1,9 +1,26 @@
-<template lang="pug">
-b-dropdown.create-dropdown(:text="text", no-flip)
-  b-dropdown-form(:disabled='false', v-on:submit.prevent="onSubmit")
-    input.form-control(type='text', v-model='searchTerm')
-  b-dropdown-item(v-for="member in memberResults", :key="member._id", @click="selectMember(member)")
-    | {{ member.profile.name }}
+<template>
+  <b-dropdown
+    class="create-dropdown"
+    :text="text"
+    no-flip="no-flip"
+  >
+    <b-dropdown-form
+      :disabled="false"
+      @submit.prevent="onSubmit"
+    >
+      <input
+        v-model="searchTerm"
+        class="form-control"
+        type="text"
+      >
+    </b-dropdown-form><b-dropdown-item
+      v-for="member in memberResults"
+      :key="member._id"
+      @click="selectMember(member)"
+    >
+      {{ member.profile.name }}
+    </b-dropdown-item>
+  </b-dropdown>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/members/removeMemberModal.vue b/website/client/src/components/members/removeMemberModal.vue
index 7fc706d322..73cbd56731 100644
--- a/website/client/src/components/members/removeMemberModal.vue
+++ b/website/client/src/components/members/removeMemberModal.vue
@@ -1,16 +1,41 @@
-<template lang="pug">
-  b-modal#remove-member(:title="$t('removeMember')", size='md', :hide-footer="true")
-    .text-center
-      h2.col-12 {{ $t('sureKick') }}
-      .col-12.removing-member(v-if='memberToRemove.profile') {{memberToRemove.profile.name}}
-    .modal-body
-      textarea.form-control(type='text',
-        rows='5',
-        :placeholder="$t('optionalMessage')",
-        v-model='removeMessage')
-    .modal-footer
-      button.pull-left.btn.btn-danger(@click='confirmRemoveMember()') {{ $t('yesRemove') }}
-      button.btn.btn-secondary(@click='close()') {{ $t('cancel') }}
+<template>
+  <b-modal
+    id="remove-member"
+    :title="$t('removeMember')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="text-center">
+      <h2 class="col-12">
+        {{ $t('sureKick') }}
+      </h2><div
+        v-if="memberToRemove.profile"
+        class="col-12 removing-member"
+      >
+        {{ memberToRemove.profile.name }}
+      </div>
+    </div><div class="modal-body">
+      <textarea
+        v-model="removeMessage"
+        class="form-control"
+        type="text"
+        rows="5"
+        :placeholder="$t('optionalMessage')"
+      ></textarea>
+    </div><div class="modal-footer">
+      <button
+        class="pull-left btn btn-danger"
+        @click="confirmRemoveMember()"
+      >
+        {{ $t('yesRemove') }}
+      </button><button
+        class="btn btn-secondary"
+        @click="close()"
+      >
+        {{ $t('cancel') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/modifyInventory.vue b/website/client/src/components/modifyInventory.vue
index 142ee47fda..e3d06fb0af 100644
--- a/website/client/src/components/modifyInventory.vue
+++ b/website/client/src/components/modifyInventory.vue
@@ -1,256 +1,584 @@
-<template lang="pug">
-  b-modal#modify-inventory(v-if='user.profile', title="Modify Inventory", size='lg', :hide-footer="true")
-    .modal-header
-      h4 Modify Inventory for {{user.profile.name}}
-    .modal-body
-      .container-fluid
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.gear", @click="showInv.gear = true") Show Gear
-            button.btn.btn-secondary.pull-right(ng-if="showInv.gear", @click="showInv.gear = false") Hide Gear
-            h4 Gear
-            div(ng-if="showInv.gear")
-              button.btn.btn-secondary(@click="setAllItems('gear', true)") Own All
-              button.btn.btn-secondary(@click="setAllItems('gear', false)") Previously Own All
-              button.btn.btn-secondary(@click="setAllItems('gear', undefined)") Never Own All
-
-              hr
-
-              ul.list-group
-                li.list-group-item(v-for="item in content.gear.flat" ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]")
-                  .pull-left(:class="'shop_' + item.key" style="margin-right: 10px")
-                  | {{item.text()}}
-
-                  .clearfix
-                    label.radio-inline
-                      input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="true")
-                      | Owned
-                    label.radio-inline
-                      input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="false")
-                      | Previously Owned
-                    label.radio-inline
-                      input(type="radio", :name="'gear-' + item.key" ng-model="inv.gear[item.key]" ng-value="undefined")
-                      | Never Owned
-
-        hr
-
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.special", @click="showInv.special = true") Show Special Items
-            button.btn.btn-secondary.pull-right(ng-if="showInv.special", @click="showInv.special = false") Hide Special Items
-            h4 Special Items
-            div(ng-if="showInv.special")
-              button.btn.btn-secondary(@click="setAllItems('special', 999)") Set All to 999
-              button.btn.btn-secondary(@click="setAllItems('special', 0)") Set All to 0
-              button.btn.btn-secondary(@click="setAllItems('special', undefined)") Set All to undefined
-
-              hr
-
-              ul.list-group
-                li.list-group-item(v-for="item in content.special" ng-init="inv.special[item.key] = user.items.special[item.key]" ng-if="item.value === 15")
-                  .form-inline.clearfix
-                    .pull-left(:class="'inventory_special_' + item.key" style="margin-right: 10px")
-                    p {{item.text()}}
-                    input.form-control(type="number" ng-model="inv.special[item.key]")
-
-        hr
-
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.pets", @click="showInv.pets = true") Show Pets
-            button.btn.btn-secondary.pull-right(ng-if="showInv.pets", @click="showInv.pets = false") Hide Pets
-            h4 Pets
-            div(ng-if="showInv.pets")
-              button.btn.btn-secondary(@click="setAllItems('pets', 45)") Set All to 45
-              button.btn.btn-secondary(@click="setAllItems('pets', 0)") Set All to 0
-              button.btn.btn-secondary(@click="setAllItems('pets', -1)") Set All to -1
-              button.btn.btn-secondary(@click="setAllItems('pets', undefined)") Set All to undefined
-
-              hr
-
-              h5 Drop Pets
-              ul.list-group
-                li.list-group-item(v-for="(pet, value) in content.pets" ng-init="inv.pets[pet] = user.items.pets[pet]")
-                  .form-inline.clearfix
-                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
-                    p {{pet}}
-                    input.form-control(type="number" ng-model="inv.pets[pet]")
-
-              h5 Quest Pets
-              ul.list-group
-                li.list-group-item(v-for="(pet, value) in content.questPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
-                  .form-inline.clearfix
-                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
-                    p {{pet}}
-                    input.form-control(type="number" ng-model="inv.pets[pet]")
-
-              h5 Special Pets
-              ul.list-group
-                li.list-group-item(v-for="(pet, value) in content.specialPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
-                  .form-inline.clearfix
-                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
-                    p {{pet}}
-                    input.form-control(type="number" ng-model="inv.pets[pet]")
-
-              h5 Premium Pets
-              ul.list-group
-                li.list-group-item(v-for="(pet, value) in content.premiumPets" ng-init="inv.pets[pet] = user.items.pets[pet]")
-                  .form-inline.clearfix
-                    .pull-left(:class="'Pet-' + pet", style="margin-right: 10px")
-                    p {{pet}}
-                    input.form-control(type="number" ng-model="inv.pets[pet]")
-
-        hr
-
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.mounts", @click="showInv.mounts = true") Show Mounts
-            button.btn.btn-secondary.pull-right(ng-if="showInv.mounts", @click="showInv.mounts = false") Hide Mounts
-            h4 Mounts
-            div(ng-if="showInv.mounts")
-              button.btn.btn-secondary(@click="setAllItems('mounts', true)") Set all to Owned
-              button.btn.btn-secondary(@click="setAllItems('mounts', undefined)") Set all to Not Owned
-
-              hr
-
-              h5 Drop Mounts
-              ul.list-group
-                li.list-group-item(v-for="(mount, value) in content.mounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
-                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
-                  | {{mount}}
-                  .clearfix
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
-                      | Owned
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
-                      | Not Owned
-
-              h5 Quest Mounts
-              ul.list-group
-                li.list-group-item(v-for="(mount, value) in content.questMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
-                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
-                  | {{mount}}
-                  .clearfix
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
-                      | Owned
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
-                      | Not Owned
-
-              h5 Special Mounts
-              ul.list-group
-                li.list-group-item(v-for="(mount, value) in content.specialMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
-                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
-                  | {{mount}}
-                  .clearfix
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
-                      | Owned
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
-                      | Not Owned
-
-              h5 Premium Mounts
-              ul.list-group
-                li.list-group-item(v-for="(mount, value) in content.premiumMounts" ng-init="inv.mounts[mount] = user.items.mounts[mount]")
-                  .pull-left(:class="'Mount_Icon_' + mount", style="margin-right: 10px")
-                  | {{mount}}
-                  .clearfix
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="true")
-                      | Owned
-                    label.radio-inline
-                      input(type="radio" , :name="'mounts-' + mount", ng-model="inv.mounts[mount]" ng-value="undefined")
-                      | Not Owned
-
-        hr
-
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.hatchingPotions", @click="showInv.hatchingPotions = true") Show Hatching Potions
-            button.btn.btn-secondary.pull-right(ng-if="showInv.hatchingPotions", @click="showInv.hatchingPotions = false") Hide Hatching Potions
-            h4 Hatching Potions
-            div(ng-if="showInv.hatchingPotions")
-              button.btn.btn-secondary(@click="setAllItems('hatchingPotions', 999)") Set All to 999
-              button.btn.btn-secondary(@click="setAllItems('hatchingPotions', 0)") Set All to 0
-              button.btn.btn-secondary(@click="setAllItems('hatchingPotions', undefined)") Set All to undefined
-
-              hr
-
-              ul.list-group
-                li.list-group-item(v-for="item in content.hatchingPotions" ng-init="inv.hatchingPotions[item.key] = user.items.hatchingPotions[item.key]")
-                  .form-inline.clearfix
-                    .pull-left(:class="'Pet_HatchingPotion_' + item.key" style="margin-right: 10px")
-                    p {{item.text()}}
-                    input.form-control(type="number" ng-model="inv.hatchingPotions[item.key]")
-
-        hr
-
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.eggs", @click="showInv.eggs = true") Show Eggs
-            button.btn.btn-secondary.pull-right(ng-if="showInv.eggs", @click="showInv.eggs = false") Hide Eggs
-            h4 Eggs
-            div(ng-if="showInv.eggs")
-              button.btn.btn-secondary(@click="setAllItems('eggs', 999)") Set All to 999
-              button.btn.btn-secondary(@click="setAllItems('eggs', 0)") Set All to 0
-              button.btn.btn-secondary(@click="setAllItems('eggs', undefined)") Set All to undefined
-
-              hr
-
-              ul.list-group
-                li.list-group-item(v-for="item in content.eggs" ng-init="inv.eggs[item.key] = user.items.eggs[item.key]")
-                  .form-inline.clearfix
-                    .pull-left(:class="'Pet_Egg_' + item.key" style="margin-right: 10px")
-                    p {{item.text()}}
-                    input.form-control(type="number" ng-model="inv.eggs[item.key]")
-
-        hr
-
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.food", @click="showInv.food = true") Show Food
-            button.btn.btn-secondary.pull-right(ng-if="showInv.food", @click="showInv.food = false") Hide Food
-            h4 Food
-            div(ng-if="showInv.food")
-              button.btn.btn-secondary(@click="setAllItems('food', 999)") Set All to 999
-              button.btn.btn-secondary(@click="setAllItems('food', 0)") Set All to 0
-              button.btn.btn-secondary(@click="setAllItems('food', undefined)") Set All to undefined
-
-              hr
-
-              ul.list-group
-                li.list-group-item(v-for="item in content.food" ng-init="inv.food[item.key] = user.items.food[item.key]")
-                  .form-inline.clearfix
-                    .pull-left(:class="'Pet_Food_' + item.key" style="margin-right: 10px")
-                    p {{item.text()}}
-                    input.form-control(type="number" ng-model="inv.food[item.key]")
-
-        hr
-
-        .row
-          .col-xs-12
-            button.btn.btn-secondary.pull-right(ng-if="!showInv.quests", @click="showInv.quests = true") Show Quests
-            button.btn.btn-secondary.pull-right(ng-if="showInv.quests", @click="showInv.quests = false") Hide Quests
-            h4 Quests
-            div(ng-if="showInv.quests")
-              button.btn.btn-secondary(@click="setAllItems('quests', 999)") Set All to 999
-              button.btn.btn-secondary(@click="setAllItems('quests', 0)") Set All to 0
-              button.btn.btn-secondary(@click="setAllItems('quests', undefined)") Set All to undefined
-
-              hr
-
-              ul.list-group
-                li.list-group-item(v-for="item in content.quests" ng-init="inv.quests[item.key] = user.items.quests[item.key]" ng-if="item.category !== 'world'")
-                  .form-inline.clearfix
-                    .pull-left(:class="'inventory_quest_scroll_' + item.key" style="margin-right: 10px")
-                    p {{item.text()}}
-                    input.form-control(type="number" ng-model="inv.quests[item.key]")
-    .modal-footer
-      button.btn.btn-secondary(@click="close()") {{ $t('close') }}
-      button.btn.btn-primary(@click="close();modifyInventory()") Apply Changes
+<template>
+  <b-modal
+    v-if="user.profile"
+    id="modify-inventory"
+    title="Modify Inventory"
+    size="lg"
+    :hide-footer="true"
+  >
+    <div class="modal-header">
+      <h4>Modify Inventory for {{ user.profile.name }}</h4>
+    </div><div class="modal-body">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.gear"
+              @click="showInv.gear = true"
+            >
+              Show Gear
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('gear', true)"
+              >
+                Own All
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('gear', false)"
+              >
+                Previously Own All
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('gear', undefined)"
+              >
+                Never Own All
+              </button><hr><ul class="list-group">
+                <li
+                  v-for="item in content.gear.flat"
+                  class="list-group-item"
+                  ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]"
+                >
+                  <div
+                    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>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div><hr><div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.special"
+              @click="showInv.special = true"
+            >
+              Show Special Items
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('special', 999)"
+              >
+                Set All to 999
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('special', 0)"
+              >
+                Set All to 0
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('special', undefined)"
+              >
+                Set All to undefined
+              </button><hr><ul class="list-group">
+                <li
+                  v-for="item in content.special"
+                  class="list-group-item"
+                  ng-init="inv.special[item.key] = user.items.special[item.key]"
+                  ng-if="item.value === 15"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'inventory_special_' + item.key"
+                      style="margin-right: 10px"
+                    ></div><p>{{ item.text() }}</p><input
+                      class="form-control"
+                      type="number"
+                      ng-model="inv.special[item.key]"
+                    >
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div><hr><div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.pets"
+              @click="showInv.pets = true"
+            >
+              Show Pets
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('pets', 45)"
+              >
+                Set All to 45
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('pets', 0)"
+              >
+                Set All to 0
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('pets', -1)"
+              >
+                Set All to -1
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('pets', undefined)"
+              >
+                Set All to undefined
+              </button><hr><h5>Drop Pets</h5><ul class="list-group">
+                <li
+                  v-for="(pet, value) in content.pets"
+                  class="list-group-item"
+                  ng-init="inv.pets[pet] = user.items.pets[pet]"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'Pet-' + pet"
+                      style="margin-right: 10px"
+                    ></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">
+                <li
+                  v-for="(pet, value) in content.questPets"
+                  class="list-group-item"
+                  ng-init="inv.pets[pet] = user.items.pets[pet]"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'Pet-' + pet"
+                      style="margin-right: 10px"
+                    ></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">
+                <li
+                  v-for="(pet, value) in content.specialPets"
+                  class="list-group-item"
+                  ng-init="inv.pets[pet] = user.items.pets[pet]"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'Pet-' + pet"
+                      style="margin-right: 10px"
+                    ></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">
+                <li
+                  v-for="(pet, value) in content.premiumPets"
+                  class="list-group-item"
+                  ng-init="inv.pets[pet] = user.items.pets[pet]"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'Pet-' + pet"
+                      style="margin-right: 10px"
+                    ></div><p>{{ pet }}</p><input
+                      class="form-control"
+                      type="number"
+                      ng-model="inv.pets[pet]"
+                    >
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div><hr><div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.mounts"
+              @click="showInv.mounts = true"
+            >
+              Show Mounts
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('mounts', true)"
+              >
+                Set all to Owned
+              </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">
+                <li
+                  v-for="(mount, value) in content.mounts"
+                  class="list-group-item"
+                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
+                >
+                  <div
+                    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>
+                </li>
+              </ul><h5>Quest Mounts</h5><ul class="list-group">
+                <li
+                  v-for="(mount, value) in content.questMounts"
+                  class="list-group-item"
+                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
+                >
+                  <div
+                    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>
+                </li>
+              </ul><h5>Special Mounts</h5><ul class="list-group">
+                <li
+                  v-for="(mount, value) in content.specialMounts"
+                  class="list-group-item"
+                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
+                >
+                  <div
+                    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>
+                </li>
+              </ul><h5>Premium Mounts</h5><ul class="list-group">
+                <li
+                  v-for="(mount, value) in content.premiumMounts"
+                  class="list-group-item"
+                  ng-init="inv.mounts[mount] = user.items.mounts[mount]"
+                >
+                  <div
+                    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>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div><hr><div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.hatchingPotions"
+              @click="showInv.hatchingPotions = true"
+            >
+              Show Hatching Potions
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('hatchingPotions', 999)"
+              >
+                Set All to 999
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('hatchingPotions', 0)"
+              >
+                Set All to 0
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('hatchingPotions', undefined)"
+              >
+                Set All to undefined
+              </button><hr><ul class="list-group">
+                <li
+                  v-for="item in content.hatchingPotions"
+                  class="list-group-item"
+                  ng-init="inv.hatchingPotions[item.key] = user.items.hatchingPotions[item.key]"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'Pet_HatchingPotion_' + item.key"
+                      style="margin-right: 10px"
+                    ></div><p>{{ item.text() }}</p><input
+                      class="form-control"
+                      type="number"
+                      ng-model="inv.hatchingPotions[item.key]"
+                    >
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div><hr><div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.eggs"
+              @click="showInv.eggs = true"
+            >
+              Show Eggs
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('eggs', 999)"
+              >
+                Set All to 999
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('eggs', 0)"
+              >
+                Set All to 0
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('eggs', undefined)"
+              >
+                Set All to undefined
+              </button><hr><ul class="list-group">
+                <li
+                  v-for="item in content.eggs"
+                  class="list-group-item"
+                  ng-init="inv.eggs[item.key] = user.items.eggs[item.key]"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'Pet_Egg_' + item.key"
+                      style="margin-right: 10px"
+                    ></div><p>{{ item.text() }}</p><input
+                      class="form-control"
+                      type="number"
+                      ng-model="inv.eggs[item.key]"
+                    >
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div><hr><div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.food"
+              @click="showInv.food = true"
+            >
+              Show Food
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('food', 999)"
+              >
+                Set All to 999
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('food', 0)"
+              >
+                Set All to 0
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('food', undefined)"
+              >
+                Set All to undefined
+              </button><hr><ul class="list-group">
+                <li
+                  v-for="item in content.food"
+                  class="list-group-item"
+                  ng-init="inv.food[item.key] = user.items.food[item.key]"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'Pet_Food_' + item.key"
+                      style="margin-right: 10px"
+                    ></div><p>{{ item.text() }}</p><input
+                      class="form-control"
+                      type="number"
+                      ng-model="inv.food[item.key]"
+                    >
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div><hr><div class="row">
+          <div class="col-xs-12">
+            <button
+              class="btn btn-secondary pull-right"
+              ng-if="!showInv.quests"
+              @click="showInv.quests = true"
+            >
+              Show Quests
+            </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
+                class="btn btn-secondary"
+                @click="setAllItems('quests', 999)"
+              >
+                Set All to 999
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('quests', 0)"
+              >
+                Set All to 0
+              </button><button
+                class="btn btn-secondary"
+                @click="setAllItems('quests', undefined)"
+              >
+                Set All to undefined
+              </button><hr><ul class="list-group">
+                <li
+                  v-for="item in content.quests"
+                  class="list-group-item"
+                  ng-init="inv.quests[item.key] = user.items.quests[item.key]"
+                  ng-if="item.category !== 'world'"
+                >
+                  <div class="form-inline clearfix">
+                    <div
+                      class="pull-left"
+                      :class="'inventory_quest_scroll_' + item.key"
+                      style="margin-right: 10px"
+                    ></div><p>{{ item.text() }}</p><input
+                      class="form-control"
+                      type="number"
+                      ng-model="inv.quests[item.key]"
+                    >
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <button
+        class="btn btn-secondary"
+        @click="close()"
+      >
+        {{ $t('close') }}
+      </button><button
+        class="btn btn-primary"
+        @click="close();modifyInventory()"
+      >
+        Apply Changes
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <script>
diff --git a/website/client/src/components/notifications.vue b/website/client/src/components/notifications.vue
index a5f7e9d278..a6b3bf337a 100644
--- a/website/client/src/components/notifications.vue
+++ b/website/client/src/components/notifications.vue
@@ -1,35 +1,10 @@
-<template lang="pug">
-div
-  yesterdaily-modal(
-    :yesterDailies='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
+<template>
+  <div>
+    <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 />
+  </div>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/parentPage.vue b/website/client/src/components/parentPage.vue
index a645ba7eb3..4299bd8319 100644
--- a/website/client/src/components/parentPage.vue
+++ b/website/client/src/components/parentPage.vue
@@ -1,5 +1,7 @@
-<template lang="pug">
-.row
-  .col
-    router-view
+<template>
+  <div class="row">
+    <div class="col">
+      <router-view />
+    </div>
+  </div>
 </template>
diff --git a/website/client/src/components/payments/amazonButton.vue b/website/client/src/components/payments/amazonButton.vue
index 1e37215017..cfa4550357 100644
--- a/website/client/src/components/payments/amazonButton.vue
+++ b/website/client/src/components/payments/amazonButton.vue
@@ -1,5 +1,8 @@
-<template lang="pug">
-  .amazon-pay-button(:id="buttonId")
+<template>
+  <div
+    :id="buttonId"
+    class="amazon-pay-button"
+  ></div>
 </template>
 
 <script>
diff --git a/website/client/src/components/payments/amazonModal.vue b/website/client/src/components/payments/amazonModal.vue
index 8ae4903c11..de9bbb5070 100644
--- a/website/client/src/components/payments/amazonModal.vue
+++ b/website/client/src/components/payments/amazonModal.vue
@@ -1,15 +1,34 @@
-<template lang="pug">
-  b-modal#amazon-payment(title="Amazon", :hide-footer="true", size='md')
-    h2.text-center Continue with Amazon
-    #AmazonPayWallet(v-if="amazonPayments.loggedIn", style="width: 400px; height: 228px;")
-    template(v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'")
-      br
-      p(v-html="$t('amazonPaymentsRecurring')")
-      #AmazonPayRecurring(style="width: 400px; height: 140px;")
-    .modal-footer
-      .text-center
-        button.btn.btn-primary(v-if="amazonPaymentsCanCheckout",
-          @click="amazonCheckOut()", :disabled='!amazonButtonEnabled') {{ $t('checkout') }}
+<template>
+  <b-modal
+    id="amazon-payment"
+    title="Amazon"
+    :hide-footer="true"
+    size="md"
+  >
+    <h2 class="text-center">
+      Continue with Amazon
+    </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
+        id="AmazonPayRecurring"
+        style="width: 400px; height: 140px;"
+      ></div>
+    </template><div class="modal-footer">
+      <div class="text-center">
+        <button
+          v-if="amazonPaymentsCanCheckout"
+          class="btn btn-primary"
+          :disabled="!amazonButtonEnabled"
+          @click="amazonCheckOut()"
+        >
+          {{ $t('checkout') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/payments/buyGemsModal.vue b/website/client/src/components/payments/buyGemsModal.vue
index 6767e50cfe..b4554aaa8c 100644
--- a/website/client/src/components/payments/buyGemsModal.vue
+++ b/website/client/src/components/payments/buyGemsModal.vue
@@ -1,145 +1,406 @@
-<template lang="pug">
-  mixin featureBullet (text)
-    .row
-      .col-md-2.offset-1
-        .d-flex.bubble.justify-content-center.align-items-center
-          .svg-icon.check.mx-auto(v-html='icons.check')
-      .col-md-8.align-self-center
-        p=text
-  div(v-if='user')
-    b-modal#buy-gems(:hide-footer='true', size='lg')
-      .header-wrap(slot='modal-header')
-        .image-gemfall
-          .row
-            h2.header-invert.mx-auto {{ $t('support') }}
-          .row
-            .logo.svg-icon.mx-auto(v-html="icons.logo")
-      .d-flex.nav.justify-content-center
-        .nav-item.text-center(@click='selectedPage = "subscribe"', :class="{active: selectedPage === 'subscribe'}") {{ $t('subscribe') }}
-        .nav-item.text-center(@click='selectedPage = "gems"', :class="{active: selectedPage === 'gems'}") {{ $t('buyGems') }}
-      div(v-show='selectedPage === "gems"')
-        div(v-if='hasSubscription')
-          .row.text-center
-            h2.mx-auto.text-leadin {{ $t('subscriptionAlreadySubscribedLeadIn') }}
-          .row.text-center
-            .col-6.offset-3
-              p {{ $t("gemsPurchaseNote") }}
-        .row.text-center
-          h2.mx-auto.text-leadin {{ $t('gemBenefitLeadin') }}
-        .row
-          .col
-            +featureBullet("{{ $t('gemBenefit1') }}")
-            +featureBullet("{{ $t('gemBenefit2') }}")
-          .col
-            +featureBullet("{{ $t('gemBenefit3') }}")
-            +featureBullet("{{ $t('gemBenefit4') }}")
-        .card-deck.gem-deck
-          .card.text-center.col-3(:class="{active: gemAmount === 20 }")
-            .card-img-top
-              .mx-auto(v-html='icons.twentyOneGems', style='"height: 55px; width: 47.5px; margin-top: 1.85em;"')
-            .card-body
-              .gem-count 20
-              .gem-text {{ $t('gems') }}
-              .divider
-              button.btn.btn-primary(@click='gemAmount === 20 ? gemAmount = 0 : gemAmount = 20') {{gemAmount === 20 ? $t('selected') : '$5.00'}}
-        .row.text-center
-          h2.mx-auto.text-payment {{ $t('choosePaymentMethod') }}
-        .payments-column
-          button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({})')
-            .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
-            | {{ $t('card') }}
-          button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypal(paypalCheckoutLink, 'gems')")
-            | &nbsp;
-            img(src='~@/assets/images/paypal-checkout.png', :alt="$t('paypal')")
-            | &nbsp;
-          amazon-button.payment-item(:amazon-data="{type: 'single'}")
-        .row.text-center
-          .svg-icon.mx-auto(v-html='icons.heart', style='"height: 24px; width: 24px;"')
-        .row.text-center.text-outtro
-          .col-6.offset-3 {{ $t('buyGemsSupportsDevs') }}
-
-      div(v-show='selectedPage === "subscribe"')
-        div(v-if='hasSubscription')
-          .row.text-center
-            h2.mx-auto.text-leadin {{ $t('subscriptionAlreadySubscribedLeadIn') }}
-          .row.text-center
-            .col-10.offset-1
-              p(v-html='$t("subscriptionAlreadySubscribed1")')
-        div(v-if='!hasSubscription')
-          .row.text-center
-            h2.mx-auto.text-leadin {{ $t('subscriptionBenefitLeadin') }}
-          .row
-            .col
-              +featureBullet("{{ $t('subscriptionBenefit1') }}")
-              +featureBullet("{{ $t('subscriptionBenefit2') }}")
-              +featureBullet("{{ $t('subscriptionBenefit3') }}")
-            .col
-              +featureBullet("{{ $t('subscriptionBenefit4') }}")
-              +featureBullet("{{ $t('subscriptionBenefit5') }}")
-              +featureBullet("{{ $t('subscriptionBenefit6') }}")
-          .card-deck
-            .card.text-center(:class='{active: subscriptionPlan === "basic_earned"}')
-              .card-body
-                .subscription-price
-                  span.superscript $
-                  span 5
-                  span.superscript.muted .00
-                .small(v-once) {{ $t('everyMonth') }}
-                .divider
-                p.benefits(v-markdown='$t("earnGemsMonthly", {cap:25})')
-                .spacer
-                button.btn.btn-primary(@click='subscriptionPlan = "basic_earned"') {{ subscriptionPlan === "basic_earned" ? $t('selected') : $t('select') }}
-            .card.text-center(:class='{active: subscriptionPlan === "basic_3mo"}')
-              .card-body
-                .subscription-price
-                  span.superscript $
-                  span 15
-                  span.superscript.muted .00
-                .small(v-once) {{ $t('everyXMonths', {interval: 3}) }}
-                .divider
-                p.benefits(v-markdown='$t("earnGemsMonthly", {cap:30})')
-                p.benefits(v-markdown='$t("receiveMysticHourglass")')
-                button.btn.btn-primary(@click='subscriptionPlan = "basic_3mo"') {{ subscriptionPlan === "basic_3mo" ? $t('selected') : $t('select') }}
-            .card.text-center(:class='{active: subscriptionPlan === "basic_6mo"}')
-              .card-body
-                .subscription-price
-                  span.superscript $
-                  span 30
-                  span.superscript.muted .00
-                .small(v-once) {{ $t('everyXMonths', {interval: 6}) }}
-                .divider
-                p.benefits(v-markdown='$t("earnGemsMonthly", {cap:35})')
-                p.benefits(v-markdown='$t("receiveMysticHourglasses", {amount:2})')
-                button.btn.btn-primary(@click='subscriptionPlan = "basic_6mo"') {{ subscriptionPlan === "basic_6mo" ? $t('selected') : $t('select') }}
-            .card.text-center(:class='{active: subscriptionPlan === "basic_12mo"}')
-              .card-body
-                .subscription-price
-                  span.superscript $
-                  span 48
-                  span.superscript.muted .00
-                .small(v-once) {{ $t('everyYear') }}
-                .divider
-                p.benefits(v-markdown='$t("earnGemsMonthly", {cap:45})')
-                p.benefits(v-markdown='$t("receiveMysticHourglasses", {amount:4})')
-                button.btn.btn-primary(@click='subscriptionPlan = "basic_12mo"') {{ subscriptionPlan === "basic_12mo" ? $t('selected') : $t('select') }}
-          .row.text-center(v-if='subscriptionPlan')
-            h2.mx-auto.text-payment(v-once) {{ $t('choosePaymentMethod') }}
-          .row.text-center
-            a.mx-auto(v-once) {{ $t('haveCouponCode') }}
-          .payments-column(v-if='subscriptionPlan')
-            button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({subscription: subscriptionPlan})')
-              .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
-              | {{ $t('card') }}
-            button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypal(paypalSubscriptionLink, 'subscription')")
-              | &nbsp;
-              img(src='~@/assets/images/paypal-checkout.png', :alt="$t('paypal')")
-              | &nbsp;
-            amazon-button.payment-item(:amazon-data="{type: 'subscription', subscription: subscriptionPlan}")
-
-          .row.text-center
-            .svg-icon.mx-auto(v-html='icons.heart', style='"height: 24px; width: 24px;"')
-          .row.text-center.text-outtro
-            .col-6.offset-3 {{ $t('subscribeSupportsDevs') }}
+<template>
+  <div v-if="user">
+    <b-modal
+      id="buy-gems"
+      :hide-footer="true"
+      size="lg"
+    >
+      <div
+        slot="modal-header"
+        class="header-wrap"
+      >
+        <div class="image-gemfall">
+          <div class="row">
+            <h2 class="header-invert mx-auto">
+              {{ $t('support') }}
+            </h2>
+          </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
+          class="nav-item text-center"
+          :class="{active: selectedPage === 'subscribe'}"
+          @click="selectedPage = 'subscribe'"
+        >
+          {{ $t('subscribe') }}
+        </div><div
+          class="nav-item text-center"
+          :class="{active: selectedPage === 'gems'}"
+          @click="selectedPage = 'gems'"
+        >
+          {{ $t('buyGems') }}
+        </div>
+      </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 class="col-6 offset-3">
+              <p>{{ $t("gemsPurchaseNote") }}</p>
+            </div>
+          </div>
+        </div><div class="row text-center">
+          <h2 class="mx-auto text-leadin">
+            {{ $t('gemBenefitLeadin') }}
+          </h2>
+        </div><div class="row">
+          <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('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">
+                  <div
+                    class="svg-icon check mx-auto"
+                    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-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
+            class="card text-center col-3"
+            :class="{active: gemAmount === 20 }"
+          >
+            <div class="card-img-top">
+              <div
+                class="mx-auto"
+                style="'height: 55px; width: 47.5px; margin-top: 1.85em;'"
+                v-html="icons.twentyOneGems"
+              ></div>
+            </div><div class="card-body">
+              <div class="gem-count">
+                20
+              </div><div class="gem-text">
+                {{ $t('gems') }}
+              </div><div class="divider"></div><button
+                class="btn btn-primary"
+                @click="gemAmount === 20 ? gemAmount = 0 : gemAmount = 20"
+              >
+                {{ gemAmount === 20 ? $t('selected') : '$5.00' }}
+              </button>
+            </div>
+          </div>
+        </div><div class="row text-center">
+          <h2 class="mx-auto text-payment">
+            {{ $t('choosePaymentMethod') }}
+          </h2>
+        </div><div class="payments-column">
+          <button
+            class="purchase btn btn-primary payment-button payment-item"
+            @click="showStripe({})"
+          >
+            <div
+              class="svg-icon credit-card-icon"
+              v-html="icons.creditCardIcon"
+            ></div>{{ $t('card') }}
+          </button><button
+            class="btn payment-item paypal-checkout payment-button"
+            @click="openPaypal(paypalCheckoutLink, 'gems')"
+          >
+            &nbsp;<img
+              src="~@/assets/images/paypal-checkout.png"
+              :alt="$t('paypal')"
+            >&nbsp;
+          </button><amazon-button
+            class="payment-item"
+            :amazon-data="{type: 'single'}"
+          />
+        </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 class="col-6 offset-3">
+            {{ $t('buyGemsSupportsDevs') }}
+          </div>
+        </div>
+      </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 class="col-10 offset-1">
+              <p v-html="$t('subscriptionAlreadySubscribed1')"></p>
+            </div>
+          </div>
+        </div><div v-if="!hasSubscription">
+          <div class="row text-center">
+            <h2 class="mx-auto text-leadin">
+              {{ $t('subscriptionBenefitLeadin') }}
+            </h2>
+          </div><div class="row">
+            <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('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">
+                    <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 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('subscriptionBenefit5') }}</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('subscriptionBenefit6') }}</p>
+                </div>
+              </div>
+            </div>
+          </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
+                  v-once
+                  class="small"
+                >
+                  {{ $t('everyMonth') }}
+                </div><div class="divider"></div><p
+                  v-markdown="$t('earnGemsMonthly', {cap:25})"
+                  class="benefits"
+                ></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
+              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
+                  v-once
+                  class="small"
+                >
+                  {{ $t('everyXMonths', {interval: 3}) }}
+                </div><div class="divider"></div><p
+                  v-markdown="$t('earnGemsMonthly', {cap:30})"
+                  class="benefits"
+                ></p><p
+                  v-markdown="$t('receiveMysticHourglass')"
+                  class="benefits"
+                ></p><button
+                  class="btn btn-primary"
+                  @click="subscriptionPlan = 'basic_3mo'"
+                >
+                  {{ subscriptionPlan === "basic_3mo" ? $t('selected') : $t('select') }}
+                </button>
+              </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
+                  v-once
+                  class="small"
+                >
+                  {{ $t('everyXMonths', {interval: 6}) }}
+                </div><div class="divider"></div><p
+                  v-markdown="$t('earnGemsMonthly', {cap:35})"
+                  class="benefits"
+                ></p><p
+                  v-markdown="$t('receiveMysticHourglasses', {amount:2})"
+                  class="benefits"
+                ></p><button
+                  class="btn btn-primary"
+                  @click="subscriptionPlan = 'basic_6mo'"
+                >
+                  {{ subscriptionPlan === "basic_6mo" ? $t('selected') : $t('select') }}
+                </button>
+              </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
+                  v-once
+                  class="small"
+                >
+                  {{ $t('everyYear') }}
+                </div><div class="divider"></div><p
+                  v-markdown="$t('earnGemsMonthly', {cap:45})"
+                  class="benefits"
+                ></p><p
+                  v-markdown="$t('receiveMysticHourglasses', {amount:4})"
+                  class="benefits"
+                ></p><button
+                  class="btn btn-primary"
+                  @click="subscriptionPlan = 'basic_12mo'"
+                >
+                  {{ subscriptionPlan === "basic_12mo" ? $t('selected') : $t('select') }}
+                </button>
+              </div>
+            </div>
+          </div><div
+            v-if="subscriptionPlan"
+            class="row text-center"
+          >
+            <h2
+              v-once
+              class="mx-auto text-payment"
+            >
+              {{ $t('choosePaymentMethod') }}
+            </h2>
+          </div><div class="row text-center">
+            <a
+              v-once
+              class="mx-auto"
+            >{{ $t('haveCouponCode') }}</a>
+          </div><div
+            v-if="subscriptionPlan"
+            class="payments-column"
+          >
+            <button
+              class="purchase btn btn-primary payment-button payment-item"
+              @click="showStripe({subscription: subscriptionPlan})"
+            >
+              <div
+                class="svg-icon credit-card-icon"
+                v-html="icons.creditCardIcon"
+              ></div>{{ $t('card') }}
+            </button><button
+              class="btn payment-item paypal-checkout payment-button"
+              @click="openPaypal(paypalSubscriptionLink, 'subscription')"
+            >
+              &nbsp;<img
+                src="~@/assets/images/paypal-checkout.png"
+                :alt="$t('paypal')"
+              >&nbsp;
+            </button><amazon-button
+              class="payment-item"
+              :amazon-data="{type: 'subscription', subscription: subscriptionPlan}"
+            />
+          </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 class="col-6 offset-3">
+              {{ $t('subscribeSupportsDevs') }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </b-modal>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/payments/cancelModalConfirm.vue b/website/client/src/components/payments/cancelModalConfirm.vue
index 31a1ca21a1..9956819cf2 100644
--- a/website/client/src/components/payments/cancelModalConfirm.vue
+++ b/website/client/src/components/payments/cancelModalConfirm.vue
@@ -1,18 +1,34 @@
-<template lang="pug">
-  b-modal#subscription-cancel-modal(
-    size='sm',
-    :hideFooter="true",
-    :modalClass="['modal-hidden-footer']"
-  )
-    div(slot="modal-header")
-      .icon-container.warning-container.d-flex.align-items-center.justify-content-center
-        .svg-icon.warning(v-html="icons.warning", v-once)
-    .row
-      .col-12.modal-body-col
-        h2 {{ config && config.group ? $t('cancelGroupSub') : $t('cancelSub') }}
-        span.cancel-text {{ config && config.group ? $t('confirmCancelGroupPlan') : $t('confirmCancelSub') }}
-        button.btn.btn-danger.mt-4.mb-3(v-once, @click="close(); cancelSubscription(config)") {{ $t('cancelSub') }}
-        a.standard-link(v-once, @click="close()") {{ $t('neverMind') }}
+<template>
+  <b-modal
+    id="subscription-cancel-modal"
+    size="sm"
+    :hide-footer="true"
+    :modal-class="['modal-hidden-footer']"
+  >
+    <div slot="modal-header">
+      <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 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
+          v-once
+          class="btn btn-danger mt-4 mb-3"
+          @click="close(); cancelSubscription(config)"
+        >
+          {{ $t('cancelSub') }}
+        </button><a
+          v-once
+          class="standard-link"
+          @click="close()"
+        >{{ $t('neverMind') }}</a>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/payments/canceledModal.vue b/website/client/src/components/payments/canceledModal.vue
index ce59401ef7..29db94c07f 100644
--- a/website/client/src/components/payments/canceledModal.vue
+++ b/website/client/src/components/payments/canceledModal.vue
@@ -1,22 +1,34 @@
-<template lang="pug">
-  b-modal#subscription-canceled-modal(
-    size='sm',
-    :hideFooter="true",
-    :modalClass="['modal-hidden-footer']"
-  )
-    div(slot="modal-header")
-      .svg-icon.close(v-html="icons.close", v-once, @click="close()")
-      .icon-container.check-container.d-flex.align-items-center.justify-content-center
-        .svg-icon.check(v-html="icons.check", v-once)
-    .row
-      .col-12.modal-body-col
-        h2 {{ $t(isGroup ? 'canceledGroupPlan' : 'subCanceledTitle') }}
-        .details-block
-            span
-              | {{ $t('subWillBecomeInactive') }}
-              br
-              strong {{ isGroup ? groupDateTerminated : dateTerminated }}
-        span.auto-renew.small-text(v-once) {{ $t('paymentCanceledDisputes') }}
+<template>
+  <b-modal
+    id="subscription-canceled-modal"
+    size="sm"
+    :hide-footer="true"
+    :modal-class="['modal-hidden-footer']"
+  >
+    <div slot="modal-header">
+      <div
+        v-once
+        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
+          v-once
+          class="svg-icon check"
+          v-html="icons.check"
+        ></div>
+      </div>
+    </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
+          v-once
+          class="auto-renew small-text"
+        >{{ $t('paymentCanceledDisputes') }}</span>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/payments/sendGemsModal.vue b/website/client/src/components/payments/sendGemsModal.vue
index 71cb106c4f..3e9721b245 100644
--- a/website/client/src/components/payments/sendGemsModal.vue
+++ b/website/client/src/components/payments/sendGemsModal.vue
@@ -1,65 +1,132 @@
-<template lang="pug">
-b-modal#send-gems(:title="title", :hide-footer="true", size='md', @hide='onHide()')
-  div(v-if='userReceivingGems')
-    .panel.panel-default(
-      :class="gift.type === 'gems' ? 'panel-primary' : 'transparent'",
-      @click='gift.type = "gems"'
-    )
-      h3.panel-heading.clearfix
-        .float-right
-          span(v-if='gift.gems.fromBalance') {{ $t('sendGiftGemsBalance', {number: userLoggedIn.balance * 4}) }}
-          span(v-if='!gift.gems.fromBalance') {{ $t('sendGiftCost', {cost: gift.gems.amount / 4}) }}
-        | {{ $t('gemsPopoverTitle') }}
-      .panel-body
-        .row
-          .col-md-6
-            .form-group
-              input.form-control(type='number', placeholder='Number of Gems',
-                min='0', :max='gift.gems.fromBalance ? userLoggedIn.balance * 4 : 9999',
-                v-model='gift.gems.amount')
-          .col-md-6
-            .btn-group
-              button.btn.btn-secondary(:class="{active: gift.gems.fromBalance}", @click="gift.gems.fromBalance = true") {{ $t('sendGiftFromBalance') }}
-              button.btn.btn-secondary(:class="{active: !gift.gems.fromBalance}", @click="gift.gems.fromBalance = false") {{ $t('sendGiftPurchase') }}
-        .row
-          .col-md-12
-            p.small(v-html="$t('gemGiftsAreOptional', assistanceEmailObject)")
-
-    .panel.panel-default(
-      :class="gift.type=='subscription' ? 'panel-primary' : 'transparent'",
-      @click='gift.type = "subscription"'
-    )
-      h3.panel-heading {{ $t('subscription') }}
-      .panel-body
-        .row
-          .col-md-12
-            .form-group
-              .radio(v-for='block in subscriptionBlocks', v-if="block.target !== 'group' && block.canSubscribe === true")
-                label
-                  input(type="radio", name="subRadio", :value="block.key", v-model='gift.subscription.key')
-                  | {{ $t('sendGiftSubscription', {price: block.price, months: block.months}) }}
-
-    textarea.form-control(rows='3', v-model='gift.message', :placeholder="$t('sendGiftMessagePlaceholder')")
-    //include ../formatting-help
-
-  .modal-footer
-    button.btn.btn-primary(
-      v-if="fromBal",
-      @click="sendGift()",
-      :disabled="sendingInProgress"
-    ) {{ $t("send") }}
-    .payments-column.mx-auto(v-else, :class="{'payments-disabled': !gift.subscription.key && gift.gems.amount < 1}")
-      button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({gift, uuid: userReceivingGems._id, receiverName})', :disabled="!gift.subscription.key && gift.gems.amount < 1")
-        .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
-        | {{ $t('card') }}
-      button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypalGift({gift: gift, giftedTo: userReceivingGems._id, receiverName})", :disabled="!gift.subscription.key && gift.gems.amount < 1")
-        | &nbsp;
-        img(src='~@/assets/images/paypal-checkout.png', :alt="$t('paypal')")
-        | &nbsp;
-      amazon-button.payment-item.mb-0(
-        :amazon-data="{type: 'single', gift, giftedTo: userReceivingGems._id, receiverName}",
-        :amazon-disabled="!gift.subscription.key && gift.gems.amount < 1",
-      )
+<template>
+  <b-modal
+    id="send-gems"
+    :title="title"
+    :hide-footer="true"
+    size="md"
+    @hide="onHide()"
+  >
+    <div v-if="userReceivingGems">
+      <div
+        class="panel panel-default"
+        :class="gift.type === 'gems' ? 'panel-primary' : 'transparent'"
+        @click="gift.type = 'gems'"
+      >
+        <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">
+          <div class="row">
+            <div class="col-md-6">
+              <div class="form-group">
+                <input
+                  v-model="gift.gems.amount"
+                  class="form-control"
+                  type="number"
+                  placeholder="Number of Gems"
+                  min="0"
+                  :max="gift.gems.fromBalance ? userLoggedIn.balance * 4 : 9999"
+                >
+              </div>
+            </div><div class="col-md-6">
+              <div class="btn-group">
+                <button
+                  class="btn btn-secondary"
+                  :class="{active: gift.gems.fromBalance}"
+                  @click="gift.gems.fromBalance = true"
+                >
+                  {{ $t('sendGiftFromBalance') }}
+                </button><button
+                  class="btn btn-secondary"
+                  :class="{active: !gift.gems.fromBalance}"
+                  @click="gift.gems.fromBalance = false"
+                >
+                  {{ $t('sendGiftPurchase') }}
+                </button>
+              </div>
+            </div>
+          </div><div class="row">
+            <div class="col-md-12">
+              <p
+                class="small"
+                v-html="$t('gemGiftsAreOptional', assistanceEmailObject)"
+              ></p>
+            </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">
+          <div class="row">
+            <div class="col-md-12">
+              <div class="form-group">
+                <div
+                  v-for="block in subscriptionBlocks"
+                  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>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><textarea
+        v-model="gift.message"
+        class="form-control"
+        rows="3"
+        :placeholder="$t('sendGiftMessagePlaceholder')"
+      ></textarea><!--include ../formatting-help-->
+    </div><div class="modal-footer">
+      <button
+        v-if="fromBal"
+        class="btn btn-primary"
+        :disabled="sendingInProgress"
+        @click="sendGift()"
+      >
+        {{ $t("send") }}
+      </button><div
+        v-else
+        class="payments-column mx-auto"
+        :class="{'payments-disabled': !gift.subscription.key && gift.gems.amount < 1}"
+      >
+        <button
+          class="purchase btn btn-primary payment-button payment-item"
+          :disabled="!gift.subscription.key && gift.gems.amount < 1"
+          @click="showStripe({gift, uuid: userReceivingGems._id, receiverName})"
+        >
+          <div
+            class="svg-icon credit-card-icon"
+            v-html="icons.creditCardIcon"
+          ></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
+            src="~@/assets/images/paypal-checkout.png"
+            :alt="$t('paypal')"
+          >&nbsp;
+        </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"
+        />
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/payments/successModal.vue b/website/client/src/components/payments/successModal.vue
index 92f3d73b70..76d724331e 100644
--- a/website/client/src/components/payments/successModal.vue
+++ b/website/client/src/components/payments/successModal.vue
@@ -1,41 +1,69 @@
-<template lang="pug">
-  b-modal#payments-success-modal(
-    :title="$t('accountSuspendedTitle')",
-    size='sm',
-    :hideFooter="isFromBalance",
-    :modalClass="isFromBalance ? ['modal-hidden-footer'] : []"
-  )
-    div(slot="modal-header")
-      .check-container.d-flex.align-items-center.justify-content-center
-        .svg-icon.check(v-html="icons.check", v-once)
-      h2 {{ $t(isFromBalance ? 'success' : 'paymentSuccessful') }}
-    div(slot="modal-footer")
-      .small-text(v-once) {{ $t('giftSubscriptionText4') }}
-    .row
-      .col-12.modal-body-col
-        template(v-if="paymentData.paymentType === 'gems'")
-          strong(v-once) {{ $t('paymentYouReceived') }}
-          .details-block.gems
-            .svg-icon(v-html="icons.gem", v-once)
-            span 20
-        template(v-if="paymentData.paymentType === 'gift-gems' || paymentData.paymentType === 'gift-gems-balance'")
-          span(v-html="$t('paymentYouSentGems', {name: paymentData.giftReceiver})")
-          .details-block.gems
-            .svg-icon(v-html="icons.gem", v-once)
-            span {{ paymentData.gift.gems.amount }}
-        template(v-if="paymentData.paymentType === 'gift-subscription'")
-          span(v-html="$t('paymentYouSentSubscription', {name: paymentData.giftReceiver, months: paymentData.subscription.months})")
-        template(v-if="paymentData.paymentType === 'subscription'")
-          strong(v-once) {{ $t('nowSubscribed') }}
-          .details-block
-            span(v-html="$t('paymentSubBilling', {amount: paymentData.subscription.price, months: paymentData.subscription.months})")
-        template(v-if="paymentData.paymentType === 'groupPlan'")
-          span(v-html="$t(paymentData.newGroup ? 'groupPlanCreated' : 'groupPlanUpgraded', {groupName: paymentData.group.name})")
-          .details-block
-            span(v-html="$t('paymentSubBilling', {amount: groupPlanCost, months: paymentData.subscription.months})")
-        template(v-if="paymentData.paymentType === 'groupPlan' || paymentData.paymentType === 'subscription'")
-          span.small-text.auto-renew(v-once) {{ $t('paymentAutoRenew') }}
-        button.btn.btn-primary(@click='close()', v-once) {{$t('onwards')}}
+<template>
+  <b-modal
+    id="payments-success-modal"
+    :title="$t('accountSuspendedTitle')"
+    size="sm"
+    :hide-footer="isFromBalance"
+    :modal-class="isFromBalance ? ['modal-hidden-footer'] : []"
+  >
+    <div slot="modal-header">
+      <div class="check-container d-flex align-items-center justify-content-center">
+        <div
+          v-once
+          class="svg-icon check"
+          v-html="icons.check"
+        ></div>
+      </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 class="col-12 modal-body-col">
+        <template v-if="paymentData.paymentType === '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>
+        </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>
+        </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>
+          </div>
+        </template><template v-if="paymentData.paymentType === 'groupPlan' || paymentData.paymentType === 'subscription'">
+          <span
+            v-once
+            class="small-text auto-renew"
+          >{{ $t('paymentAutoRenew') }}</span>
+        </template><button
+          v-once
+          class="btn btn-primary"
+          @click="close()"
+        >
+          {{ $t('onwards') }}
+        </button>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/secondaryMenu.vue b/website/client/src/components/secondaryMenu.vue
index 2664ba068e..6e438f8dff 100644
--- a/website/client/src/components/secondaryMenu.vue
+++ b/website/client/src/components/secondaryMenu.vue
@@ -1,6 +1,7 @@
-<template lang="pug">
-nav.nav.d-flex.justify-content-center.secondary-menu
-  slot
+<template>
+  <nav class="nav d-flex justify-content-center secondary-menu">
+    <slot></slot>
+  </nav>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/selectMembersModal.vue b/website/client/src/components/selectMembersModal.vue
index 9dd122f78e..165b2a52b5 100644
--- a/website/client/src/components/selectMembersModal.vue
+++ b/website/client/src/components/selectMembersModal.vue
@@ -1,34 +1,73 @@
-<template lang="pug">
-div
-  b-modal#select-member-modal(
-    size='lg',
-    :hideFooter="true",
-    @change="onChange($event)"
-  )
-    .header-wrap(slot="modal-header")
-      .row
-        .col-6
-          h1(v-once) {{$t('selectPartyMember')}}
-        .col-6
-          button(type="button" aria-label="Close" class="close", @click='close()')
-            span(aria-hidden="true") ×
-      .row
-        .form-group.col-6
-          input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-        .col-4.offset-2
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t('sort')", right=true)
-            b-dropdown-item(
-              v-for='sortOption in sortOptions',
-              @click='sort(sortOption.value)',
-              :key='sortOption.value'
-            ) {{sortOption.text}}
-    .row(v-for='member in sortedMembers')
-      .col-10
-        member-details(:member='member')
-      .col-2.actions
-        button.btn.btn-primary(@click="selectMember(member)") {{ $t('select') }}
-    .row.gradient(v-if='members.length > 3')
+<template>
+  <div>
+    <b-modal
+      id="select-member-modal"
+      size="lg"
+      :hide-footer="true"
+      @change="onChange($event)"
+    >
+      <div
+        slot="modal-header"
+        class="header-wrap"
+      >
+        <div class="row">
+          <div class="col-6">
+            <h1 v-once>
+              {{ $t('selectPartyMember') }}
+            </h1>
+          </div><div class="col-6">
+            <button
+              class="close"
+              type="button"
+              aria-label="Close"
+              @click="close()"
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+        </div><div class="row">
+          <div class="form-group col-6">
+            <input
+              v-model="searchTerm"
+              class="form-control search"
+              type="text"
+              :placeholder="$t('search')"
+            >
+          </div><div class="col-4 offset-2">
+            <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+              :text="$t('sort')"
+              right="right"
+            >
+              <b-dropdown-item
+                v-for="sortOption in sortOptions"
+                :key="sortOption.value"
+                @click="sort(sortOption.value)"
+              >
+                {{ sortOption.text }}
+              </b-dropdown-item>
+            </b-dropdown>
+          </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">
+          <button
+            class="btn btn-primary"
+            @click="selectMember(member)"
+          >
+            {{ $t('select') }}
+          </button>
+        </div>
+      </div><div
+        v-if="members.length > 3"
+        class="row gradient"
+      ></div>
+    </b-modal>
+  </div>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/settings/api.vue b/website/client/src/components/settings/api.vue
index 02f9b692e2..d7e68af7b0 100644
--- a/website/client/src/components/settings/api.vue
+++ b/website/client/src/components/settings/api.vue
@@ -1,67 +1,96 @@
-<template lang="pug">
-.row.standard-page
-  .col-6
-    h2 {{ $t('API') }}
-    p {{ $t('APIText') }}
-
-    .section
-      h6 {{ $t('userId') }}
-      pre.prettyprint {{user.id}}
-      h6 {{ $t('APIToken') }}
-      .d-flex.align-items-center.mb-3
-        button.btn.btn-secondary(
-          @click="showApiToken = !showApiToken"
-        ) {{ $t(`${showApiToken ? 'hide' : 'show'}APIToken`) }}
-        pre.prettyprint.ml-4.mb-0(v-if="showApiToken") {{apiToken}}
-      p(v-html='$t("APITokenWarning", { hrefTechAssistanceEmail })')
-
-    .section
-      h3 {{ $t('thirdPartyApps') }}
-      ul
-        li
-          a(target='_blank' href='https://www.beeminder.com/habitica') {{ $t('beeminder') }}
-          br
-          | {{ $t('beeminderDesc') }}
-        li
-          a(target='_blank' href='https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb') {{ $t('chromeChatExtension') }}
-          br
-          | {{ $t('chromeChatExtensionDesc') }}
-        li
-          a(target='_blank' :href='`https://oldgods.net/habitica/habitrpg_user_data_display.html?uuid=` + user._id') {{ $t('dataTool') }}
-          br
-          | {{ $t('dataToolDesc') }}
-        li(v-html="$t('otherExtensions')")
-          br
-          | {{ $t('otherDesc') }}
-
-      hr
-
-  .col-6
-    h2 {{ $t('webhooks') }}
-    p(v-html="$t('webhooksInfo')")
-    table.table.table-striped
-      thead(v-if='user.webhooks.length')
-        tr
-          th {{ $t('enabled') }}
-          th {{ $t('webhookURL') }}
-          th
-      tbody
-        tr(v-for="(webhook, index) in user.webhooks")
-          td
-            input(type='checkbox', v-model='webhook.enabled', @change='saveWebhook(webhook, index)')
-          td
-            input.form-control(type='url', v-model='webhook.url')
-          td
-            a.btn.btn-warning.checklist-icons(@click='deleteWebhook(webhook, index)')
-              span.glyphicon.glyphicon-trash(:tooltip="$t('delete')") Delete
-            a.btn.btn-success.checklist-icons(@click='saveWebhook(webhook, index)') Update
-        tr
-          td(colspan=2)
-            .form-horizontal
-              .form-group.col-sm-10
-                input.form-control(type='url', v-model='newWebhook.url', :placeholder="$t('webhookURL')")
-              .col-sm-2
-                button.btn.btn-sm.btn-primary(type='submit', @click='addWebhook(newWebhook.url)') {{ $t('add') }}
+<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">
+          <button
+            class="btn btn-secondary"
+            @click="showApiToken = !showApiToken"
+          >
+            {{ $t(`${showApiToken ? 'hide' : 'show'}APIToken`) }}
+          </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>
+          <li>
+            <a
+              target="_blank"
+              href="https://www.beeminder.com/habitica"
+            >{{ $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>
+            <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') }}
+          </li>
+        </ul><hr>
+      </div>
+    </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 v-for="(webhook, index) in user.webhooks">
+            <td>
+              <input
+                v-model="webhook.enabled"
+                type="checkbox"
+                @change="saveWebhook(webhook, index)"
+              >
+            </td><td>
+              <input
+                v-model="webhook.url"
+                class="form-control"
+                type="url"
+              >
+            </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
+                class="btn btn-success checklist-icons"
+                @click="saveWebhook(webhook, index)"
+              >Update</a>
+            </td>
+          </tr><tr>
+            <td colspan="2">
+              <div class="form-horizontal">
+                <div class="form-group col-sm-10">
+                  <input
+                    v-model="newWebhook.url"
+                    class="form-control"
+                    type="url"
+                    :placeholder="$t('webhookURL')"
+                  >
+                </div><div class="col-sm-2">
+                  <button
+                    class="btn btn-sm btn-primary"
+                    type="submit"
+                    @click="addWebhook(newWebhook.url)"
+                  >
+                    {{ $t('add') }}
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/settings/dataExport.vue b/website/client/src/components/settings/dataExport.vue
index 07f434fd86..630e98868c 100644
--- a/website/client/src/components/settings/dataExport.vue
+++ b/website/client/src/components/settings/dataExport.vue
@@ -1,13 +1,7 @@
-<template lang="pug">
-.row
-  .col-md-6
-    h2 {{ $t('dataExport') }}
-    small {{ $t('saveData') }}
-    h4 {{ $t('habitHistory') }}
-    | {{ $t('exportHistory') }}
-    a(href="/export/history.csv") {{ $t('csv') }}
-    h4 {{ $t('userData') }}
-    | {{ $t('exportUserData') }}
-    a(href="/export/userdata.xml") {{ $t('xml') }}
-    a(href="/export/userdata.json") {{ $t('json') }}
+<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>
+    </div>
+  </div>
 </template>
diff --git a/website/client/src/components/settings/deleteModal.vue b/website/client/src/components/settings/deleteModal.vue
index 975e1f2375..d1290c9552 100644
--- a/website/client/src/components/settings/deleteModal.vue
+++ b/website/client/src/components/settings/deleteModal.vue
@@ -1,19 +1,46 @@
-<template lang="pug">
-  b-modal#delete(:title="$t('deleteAccount')", :hide-footer='true' size='md')
-    .modal-body
-      br
-      strong(v-if='user.auth.local.email') {{ $t('deleteLocalAccountText') }}
-      strong(v-if='!user.auth.local.email') {{ $t('deleteSocialAccountText', {magicWord: 'DELETE'}) }}
-      .row.mt-3
-        .col-6
-          input.form-control(type='password', v-model='password')
-      .row.mt-3
-        #feedback.col-12.form-group
-          label(for='feedbackTextArea') {{ $t('feedback') }}
-          textarea#feedbackTextArea.form-control(v-model='feedback')
-    .modal-footer
-      button.btn.btn-primary(@click='close()') {{ $t('neverMind') }}
-      button.btn.btn-danger(@click='deleteAccount()', :disabled='!password') {{ $t('deleteDo') }}
+<template>
+  <b-modal
+    id="delete"
+    :title="$t('deleteAccount')"
+    :hide-footer="true"
+    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">
+        <div class="col-6">
+          <input
+            v-model="password"
+            class="form-control"
+            type="password"
+          >
+        </div>
+      </div><div class="row mt-3">
+        <div
+          id="feedback"
+          class="col-12 form-group"
+        >
+          <label for="feedbackTextArea">{{ $t('feedback') }}</label><textarea
+            id="feedbackTextArea"
+            v-model="feedback"
+            class="form-control"
+          ></textarea>
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <button
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('neverMind') }}
+      </button><button
+        class="btn btn-danger"
+        :disabled="!password"
+        @click="deleteAccount()"
+      >
+        {{ $t('deleteDo') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <script>
diff --git a/website/client/src/components/settings/index.vue b/website/client/src/components/settings/index.vue
index 2420a17e91..2a6eaa6063 100644
--- a/website/client/src/components/settings/index.vue
+++ b/website/client/src/components/settings/index.vue
@@ -1,15 +1,48 @@
-<template lang="pug">
-.row
-  secondary-menu.col-12
-    router-link.nav-link(:to="{name: 'site'}", exact, :class="{'active': $route.name === 'site'}") {{ $t('site') }}
-    router-link.nav-link(:to="{name: 'api'}", :class="{'active': $route.name === 'api'}") {{ $t('API') }}
-    router-link.nav-link(:to="{name: 'dataExport'}", :class="{'active': $route.name === 'dataExport'}") {{ $t('dataExport') }}
-    router-link.nav-link(:to="{name: 'promoCode'}", :class="{'active': $route.name === 'promoCode'}") {{ $t('promoCode') }}
-    router-link.nav-link(:to="{name: 'subscription'}", :class="{'active': $route.name === 'subscription'}") {{ $t('subscription') }}
-    router-link.nav-link(:to="{name: 'notifications'}", :class="{'active': $route.name === 'notifications'}") {{ $t('notifications') }}
-
-  .col-12
-    router-view
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'site'}"
+        exact="exact"
+        :class="{'active': $route.name === 'site'}"
+      >
+        {{ $t('site') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'api'}"
+        :class="{'active': $route.name === 'api'}"
+      >
+        {{ $t('API') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'dataExport'}"
+        :class="{'active': $route.name === 'dataExport'}"
+      >
+        {{ $t('dataExport') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'promoCode'}"
+        :class="{'active': $route.name === 'promoCode'}"
+      >
+        {{ $t('promoCode') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'subscription'}"
+        :class="{'active': $route.name === 'subscription'}"
+      >
+        {{ $t('subscription') }}
+      </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">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/settings/notifications.vue b/website/client/src/components/settings/notifications.vue
index 6824e427d3..51ce6ddae4 100644
--- a/website/client/src/components/settings/notifications.vue
+++ b/website/client/src/components/settings/notifications.vue
@@ -1,41 +1,39 @@
-<template lang="pug">
-.row.standard-page
-  .col-12
-    h1 {{ $t('notifications') }}
-  .col-12
-    .checkbox
-      label
-        input(type='checkbox', v-model='user.preferences.pushNotifications.unsubscribeFromAll',
-        @change='set("pushNotifications", "unsubscribeFromAll")')
-        span {{ $t('unsubscribeAllPush') }}
-
-    br
-
-    .checkbox
-      label
-        input(type='checkbox', v-model='user.preferences.emailNotifications.unsubscribeFromAll',
-          @change='set("emailNotifications", "unsubscribeFromAll")')
-        span {{ $t('unsubscribeAllEmails') }}
-    small {{ $t('unsubscribeAllEmailsText') }}
-
-  .col-8
-    table.table
-    tr
-      td
-      th
-        span {{ $t('email') }}
-      th
-        span {{ $t('push') }}
-    tr(v-for='notification in notificationsIds')
-      td
-        span {{ $t(notification) }}
-      td
-        input(type='checkbox', v-model='user.preferences.emailNotifications[notification]',
-          @change='set("emailNotifications", notification)')
-      td(v-if="onlyEmailsIds.indexOf(notification) === -1")
-        input(type='checkbox', v-model='user.preferences.pushNotifications[notification]',
-          @change='set("pushNotifications", notification)')
-        hr
+<template>
+  <div class="row standard-page">
+    <div class="col-12">
+      <h1>{{ $t('notifications') }}</h1>
+    </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>
+          <input
+            v-model="user.preferences.emailNotifications[notification]"
+            type="checkbox"
+            @change="set('emailNotifications', notification)"
+          >
+        </td><td v-if="onlyEmailsIds.indexOf(notification) === -1">
+          <input
+            v-model="user.preferences.pushNotifications[notification]"
+            type="checkbox"
+            @change="set('pushNotifications', notification)"
+          ><hr>
+        </td>
+      </tr>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/settings/promoCode.vue b/website/client/src/components/settings/promoCode.vue
index 48e148cc55..9e559ec82a 100644
--- a/website/client/src/components/settings/promoCode.vue
+++ b/website/client/src/components/settings/promoCode.vue
@@ -1,23 +1,56 @@
-<template lang="pug">
-.row.standard-page
-  .col-md-6
-    h2 {{ $t('promoCode') }}
-    .form-inline(role='form')
-      input.form-control(type='text', v-model='couponCode', :placeholder="$t('promoPlaceholder')")
-      button.btn.btn-primary(@click='enterCoupon()') {{ $t('submit') }}
-    div
-      small {{ $t('couponText') }}
-    div(v-if='user.contributor.sudo')
-      hr
-      h4 {{ $t('generateCodes') }}
-      .form(role='form')
-        .form-group
-          input.form-control(type='text', v-model='codes.event', placeholder="Event code (eg, 'wondercon')")
-        .form-group
-          input.form-control(type='number', v-model='codes.count', placeholder="Number of codes to generate (eg, 250)")
-        .form-group
-          button.btn.btn-primary(type='submit', @click='generateCodes(codes)') {{ $t('generate') }}
-          a.btn.btn-secondary(:href='getCodesUrl') {{ $t('getCodes') }}
+<template>
+  <div class="row standard-page">
+    <div class="col-md-6">
+      <h2>{{ $t('promoCode') }}</h2><div
+        class="form-inline"
+        role="form"
+      >
+        <input
+          v-model="couponCode"
+          class="form-control"
+          type="text"
+          :placeholder="$t('promoPlaceholder')"
+        ><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
+          class="form"
+          role="form"
+        >
+          <div class="form-group">
+            <input
+              v-model="codes.event"
+              class="form-control"
+              type="text"
+              placeholder="Event code (eg, 'wondercon')"
+            >
+          </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">
+            <button
+              class="btn btn-primary"
+              type="submit"
+              @click="generateCodes(codes)"
+            >
+              {{ $t('generate') }}
+            </button><a
+              class="btn btn-secondary"
+              :href="getCodesUrl"
+            >{{ $t('getCodes') }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/settings/resetModal.vue b/website/client/src/components/settings/resetModal.vue
index 2dd544dc16..0d34719be2 100644
--- a/website/client/src/components/settings/resetModal.vue
+++ b/website/client/src/components/settings/resetModal.vue
@@ -1,10 +1,24 @@
-<template lang="pug">
-  b-modal#reset(:title="$t('resetAccount')", :hide-footer='true' size='md')
-    p {{ $t('resetText1') }}
-    p {{ $t('resetText2') }}
-    .modal-footer
-      button.btn.btn-primary(@click='close()') {{ $t('neverMind') }}
-      button.btn.btn-danger(@click='reset()') {{ $t('resetDo') }}
+<template>
+  <b-modal
+    id="reset"
+    :title="$t('resetAccount')"
+    :hide-footer="true"
+    size="md"
+  >
+    <p>{{ $t('resetText1') }}</p><p>{{ $t('resetText2') }}</p><div class="modal-footer">
+      <button
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('neverMind') }}
+      </button><button
+        class="btn btn-danger"
+        @click="reset()"
+      >
+        {{ $t('resetDo') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <script>
diff --git a/website/client/src/components/settings/restoreModal.vue b/website/client/src/components/settings/restoreModal.vue
index bdbdb57e66..3fca891ed0 100644
--- a/website/client/src/components/settings/restoreModal.vue
+++ b/website/client/src/components/settings/restoreModal.vue
@@ -1,49 +1,96 @@
-<template lang="pug">
-  b-modal#restore(:title="$t('fixValues')", :hide-footer='true' size='lg')
-    p {{ $t('fixValuesText1') }}
-    p {{ $t('fixValuesText2') }}
-    .form-horizontal
-      h3 {{ $t('stats') }}
-      .form-group.row
-        .col-sm-3
-          label.control-label {{ $t('health') }}
-        .col-sm-9
-          input.form-control(type='number', step="any", data-for='stats.hp', v-model='restoreValues.stats.hp')
-      .form-group.row
-        .col-sm-3
-          label.control-label {{ $t('experience') }}
-        .col-sm-9
-          input.form-control(type='number', step="any", data-for='stats.exp', v-model='restoreValues.stats.exp')
-      .form-group.row
-        .col-sm-3
-          label.control-label {{ $t('gold') }}
-        .col-sm-9
-          input.form-control(type='number', step="any", data-for='stats.gp', v-model='restoreValues.stats.gp')
-        //input.form-control(type='number', step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)
-        //-p.alert
-          small {{ $t('disabledWinterEvent') }}
-      .form-group.row
-        .col-sm-3
-          label.control-label {{ $t('mana') }}
-        .col-sm-9
-          input.form-control(type='number', step="any", data-for='stats.mp', v-model='restoreValues.stats.mp')
-      .form-group.row
-        .col-sm-3
-          label.control-label {{ $t('level') }}
-        .col-sm-9
-          input.form-control(type='number', data-for='stats.lvl', v-model='restoreValues.stats.lvl')
-      h3 {{ $t('achievements') }}
-      .form-group.row
-        .col-sm-3
-          label.control-label {{ $t('fix21Streaks') }}
-        .col-sm-9
-          input.form-control(type='number', data-for='achievements.streak', v-model='restoreValues.achievements.streak')
-    //- This is causing too many problems for users
-      h3 {{ $t('other') }}
-      a.btn.btn-sm.btn-warning(ng-controller='FooterCtrl', ng-click='addMissedDay(1)') {{ $t('triggerDay') }}
-    .modal-footer
-      button.btn.btn-danger(@click='close()') {{ $t('discardChanges') }}
-      button.btn.btn-primary(@click='restore()') {{ $t('saveAndClose') }}
+<template>
+  <b-modal
+    id="restore"
+    :title="$t('fixValues')"
+    :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">
+        <div class="col-sm-3">
+          <label class="control-label">{{ $t('health') }}</label>
+        </div><div class="col-sm-9">
+          <input
+            v-model="restoreValues.stats.hp"
+            class="form-control"
+            type="number"
+            step="any"
+            data-for="stats.hp"
+          >
+        </div>
+      </div><div class="form-group row">
+        <div class="col-sm-3">
+          <label class="control-label">{{ $t('experience') }}</label>
+        </div><div class="col-sm-9">
+          <input
+            v-model="restoreValues.stats.exp"
+            class="form-control"
+            type="number"
+            step="any"
+            data-for="stats.exp"
+          >
+        </div>
+      </div><div class="form-group row">
+        <div class="col-sm-3">
+          <label class="control-label">{{ $t('gold') }}</label>
+        </div><div class="col-sm-9">
+          <input
+            v-model="restoreValues.stats.gp"
+            class="form-control"
+            type="number"
+            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 class="col-sm-3">
+          <label class="control-label">{{ $t('mana') }}</label>
+        </div><div class="col-sm-9">
+          <input
+            v-model="restoreValues.stats.mp"
+            class="form-control"
+            type="number"
+            step="any"
+            data-for="stats.mp"
+          >
+        </div>
+      </div><div class="form-group row">
+        <div class="col-sm-3">
+          <label class="control-label">{{ $t('level') }}</label>
+        </div><div class="col-sm-9">
+          <input
+            v-model="restoreValues.stats.lvl"
+            class="form-control"
+            type="number"
+            data-for="stats.lvl"
+          >
+        </div>
+      </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">
+          <input
+            v-model="restoreValues.achievements.streak"
+            class="form-control"
+            type="number"
+            data-for="achievements.streak"
+          >
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <button
+        class="btn btn-danger"
+        @click="close()"
+      >
+        {{ $t('discardChanges') }}
+      </button><button
+        class="btn btn-primary"
+        @click="restore()"
+      >
+        {{ $t('saveAndClose') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <script>
diff --git a/website/client/src/components/settings/site.vue b/website/client/src/components/settings/site.vue
index f320576415..6f12e4d1db 100644
--- a/website/client/src/components/settings/site.vue
+++ b/website/client/src/components/settings/site.vue
@@ -1,179 +1,418 @@
-<template lang="pug">
-  .row.standard-page
-    restore-modal
-    reset-modal
-    delete-modal
-    h1.col-12 {{ $t('settings') }}
-    .col-sm-6
-      .form-horizontal
-        h5 {{ $t('language') }}
-        select.form-control(:value='user.preferences.language',
-          @change='changeLanguage($event)')
-          option(v-for='lang in availableLanguages', :value='lang.code') {{lang.name}}
-
-        small
-          | {{ $t('americanEnglishGovern') }}
-          br
-          strong(v-html="$t('helpWithTranslation')")
-      hr
-
-      .form-horizontal
-        h5 {{ $t('dateFormat') }}
-        select.form-control(v-model='user.preferences.dateFormat',
-          @change='set("dateFormat")')
-          option(v-for='dateFormat in availableFormats', :value='dateFormat') {{dateFormat}}
-      hr
-
-      .form-horizontal
-        .form-group
-          h5 {{ $t('audioTheme') }}
-          select.form-control(v-model='user.preferences.sound',
-            @change='changeAudioTheme')
-            option(v-for='sound in availableAudioThemes', :value='sound') {{ $t(`audioTheme_${sound}`) }}
-        button.btn.btn-primary.btn-xs(@click='playAudio', v-once) {{ $t('demo') }}
-      hr
-
-      .form-horizontal(v-if='hasClass')
-        h5 {{ $t('characterBuild') }}
-        h6(v-once) {{ $t('class') + ': ' }}
-          // @TODO: what is classText
-          // span(v-if='classText') {{ classText }}&nbsp;
-          button.btn.btn-danger.btn-xs(@click='changeClassForUser(true)', v-once) {{ $t('changeClass') }}
-          small.cost &nbsp; 3 {{ $t('gems') }}
-            // @TODO add icon span.Pet_Currency_Gem1x.inline-gems
-        hr
-
-      div
-        .checkbox
-          label
-            input(type='checkbox', v-model='user.preferences.advancedCollapsed', @change='set("advancedCollapsed")')
-            span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('startAdvCollapsedPop')") {{ $t('startAdvCollapsed') }}
-        .checkbox
-          label
-            input(type='checkbox', v-model='user.preferences.dailyDueDefaultView', @change='set("dailyDueDefaultView")')
-            span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('dailyDueDefaultViewPop')") {{ $t('dailyDueDefaultView') }}
-        .checkbox(v-if='party.memberCount === 1')
-          label
-            input(type='checkbox', v-model='user.preferences.displayInviteToPartyWhenPartyIs1', @change='set("displayInviteToPartyWhenPartyIs1")')
-            span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('displayInviteToPartyWhenPartyIs1')") {{ $t('displayInviteToPartyWhenPartyIs1') }}
-        .checkbox
-          input(type='checkbox', v-model='user.preferences.suppressModals.levelUp', @change='set("suppressModals", "levelUp")')
-          label {{ $t('suppressLevelUpModal') }}
-        .checkbox
-          input(type='checkbox', v-model='user.preferences.suppressModals.hatchPet', @change='set("suppressModals", "hatchPet")')
-          label {{ $t('suppressHatchPetModal') }}
-        .checkbox
-          input(type='checkbox', v-model='user.preferences.suppressModals.raisePet', @change='set("suppressModals", "raisePet")')
-          label {{ $t('suppressRaisePetModal') }}
-        .checkbox
-          input(type='checkbox', v-model='user.preferences.suppressModals.streak', @change='set("suppressModals", "streak")')
-          label {{ $t('suppressStreakModal') }}
-        //- .checkbox
-        //-   label {{ $t('confirmScoreNotes') }}
-        //-     input(type='checkbox', v-model='user.preferences.tasks.confirmScoreNotes', @change='set({"preferences.tasks.confirmScoreNotes": user.preferences.tasks.confirmScoreNotes ? true: false})')
-
-        //- .checkbox
-        //-   label {{ $t('groupTasksByChallenge') }}
-        //-     input(type='checkbox', v-model='user.preferences.tasks.groupByChallenge', @change='set({"preferences.tasks.groupByChallenge": user.preferences.tasks.groupByChallenge ? true: false})')
-
-        hr
-
-        button.btn.btn-primary.mr-2.mb-2(@click='showBailey()', popover-trigger='mouseenter', popover-placement='right', :popover="$t('showBaileyPop')") {{ $t('showBailey') }}
-        button.btn.btn-primary.mr-2.mb-2(@click='openRestoreModal()', popover-trigger='mouseenter', popover-placement='right', :popover="$t('fixValPop')") {{ $t('fixVal') }}
-        button.btn.btn-primary.mb-2(v-if='user.preferences.disableClasses == true', @click='changeClassForUser(false)',
-          popover-trigger='mouseenter', popover-placement='right', :popover="$t('enableClassPop')") {{ $t('enableClass') }}
-
-        hr
-
-        div
-          h5 {{ $t('customDayStart') }}
-          .alert.alert-warning {{ $t('customDayStartInfo1') }}
-          .form-horizontal
-            .form-group
-              .col-7
-                select.form-control(v-model='newDayStart')
-                  option(v-for='option in dayStartOptions' :value='option.value') {{option.name}}
-
-              .col-5
-                button.btn.btn-block.btn-primary.mt-1(@click='openDayStartModal()',
-                  :disabled='newDayStart === user.preferences.dayStart')
-                  | {{ $t('saveCustomDayStart') }}
-          hr
-
-        h5 {{ $t('timezone') }}
-        .form-horizontal
-          .form-group
-            .col-12
-              p(v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})")
-              p(v-html="$t('timezoneInfo')")
-
-    .col-sm-6
-      h2 {{ $t('registration') }}
-      .panel-body
-        div
-          ul.list-inline
-            li(v-for='network in SOCIAL_AUTH_NETWORKS')
-              button.btn.btn-primary.mb-2(v-if='!user.auth[network.key].id', @click='socialAuth(network.key, user)') {{ $t('registerWithSocial', {network: network.name}) }}
-              button.btn.btn-primary.mb-2(disabled='disabled', v-if='!hasBackupAuthOption(network.key) && user.auth[network.key].id') {{ $t('registeredWithSocial', {network: network.name}) }}
-              button.btn.btn-danger(@click='deleteSocialAuth(network)', v-if='hasBackupAuthOption(network.key) && user.auth[network.key].id') {{ $t('detachSocial', {network: network.name}) }}
-          hr
-          div(v-if='!user.auth.local.email')
-            p {{ $t('addLocalAuth') }}
-            .form(name='localAuth', novalidate)
-              .form-group
-                input.form-control(type='text', :placeholder="$t('email')", v-model='localAuth.email', required)
-              .form-group
-                input.form-control(type='password', :placeholder="$t('password')", v-model='localAuth.password', required)
-              .form-group
-                input.form-control(type='password', :placeholder="$t('confirmPass')", v-model='localAuth.confirmPassword', required)
-              button.btn.btn-primary(type='submit', @click='addLocalAuth()') {{ $t('submit') }}
-
-        .usersettings
-          h5 {{ $t('changeDisplayName') }}
-          .form(name='changeDisplayName', novalidate)
-            .form-group
-              input#changeDisplayname.form-control(type='text', :placeholder="$t('newDisplayName')", v-model='temporaryDisplayName', :class='{"is-invalid input-invalid": displayNameInvalid}')
-              .mb-3(v-if="displayNameIssues.length > 0")
-                .input-error(v-for="issue in displayNameIssues") {{ issue }}
-            button.btn.btn-primary(type='submit', @click='changeDisplayName(temporaryDisplayName)', :disabled='displayNameCannotSubmit') {{ $t('submit') }}
-
-          h5 {{ $t('changeUsername') }}
-          .form(name='changeUsername', novalidate)
-            .iconalert.iconalert-success(v-if='verifiedUsername') {{ $t('usernameVerifiedConfirmation', {'username': user.auth.local.username}) }}
-            .iconalert.iconalert-warning(v-else)
-              div.align-middle
-                span {{ $t('usernameNotVerified') }}
-            .form-group
-              input#changeUsername.form-control(@blur='restoreEmptyUsername()',type='text', :placeholder="$t('newUsername')", v-model='usernameUpdates.username', :class='{"is-invalid input-invalid": usernameInvalid}')
-              .input-error(v-for="issue in usernameIssues") {{ issue }}
-              small.form-text.text-muted {{ $t('changeUsernameDisclaimer') }}
-            button.btn.btn-primary(type='submit', @click='changeUser("username", usernameUpdates)', :disabled='usernameCannotSubmit') {{ $t('saveAndConfirm') }}
-          h5(v-if='user.auth.local.email') {{ $t('changeEmail') }}
-          .form(v-if='user.auth.local.email', name='changeEmail', novalidate)
-            .form-group
-              input#changeEmail.form-control(type='text', :placeholder="$t('newEmail')", v-model='emailUpdates.newEmail')
-            .form-group
-              input.form-control(type='password', :placeholder="$t('password')", v-model='emailUpdates.password')
-            button.btn.btn-primary(type='submit', @click='changeUser("email", emailUpdates)') {{ $t('submit') }}
-
-          h5(v-if='user.auth.local.email') {{ $t('changePass') }}
-          .form(v-if='user.auth.local.email', name='changePassword', novalidate)
-            .form-group
-              input#changePassword.form-control(type='password', :placeholder="$t('oldPass')", v-model='passwordUpdates.password')
-            .form-group
-              input.form-control(type='password', :placeholder="$t('newPass')", v-model='passwordUpdates.newPassword')
-            .form-group
-              input.form-control(type='password', :placeholder="$t('confirmPass')", v-model='passwordUpdates.confirmPassword')
-            button.btn.btn-primary(type='submit', @click='changeUser("password", passwordUpdates)') {{ $t('submit')  }}
-          hr
-
-        div
-          h5 {{ $t('dangerZone') }}
-          div
-            button.btn.btn-danger.mr-2.mb-2(@click='openResetModal()',
-              popover-trigger='mouseenter', popover-placement='right', v-b-popover.hover.auto="$t('resetAccPop')") {{ $t('resetAccount') }}
-            button.btn.btn-danger.mb-2(@click='openDeleteModal()',
-              popover-trigger='mouseenter', v-b-popover.hover.auto="$t('deleteAccPop')") {{ $t('deleteAccount') }}
+<template>
+  <div class="row standard-page">
+    <restore-modal /><reset-modal /><delete-modal /><h1 class="col-12">
+      {{ $t('settings') }}
+    </h1><div class="col-sm-6">
+      <div class="form-horizontal">
+        <h5>{{ $t('language') }}</h5><select
+          class="form-control"
+          :value="user.preferences.language"
+          @change="changeLanguage($event)"
+        >
+          <option
+            v-for="lang in availableLanguages"
+            :value="lang.code"
+          >
+            {{ 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
+          v-model="user.preferences.dateFormat"
+          class="form-control"
+          @change="set('dateFormat')"
+        >
+          <option
+            v-for="dateFormat in availableFormats"
+            :value="dateFormat"
+          >
+            {{ dateFormat }}
+          </option>
+        </select>
+      </div><hr><div class="form-horizontal">
+        <div class="form-group">
+          <h5>{{ $t('audioTheme') }}</h5><select
+            v-model="user.preferences.sound"
+            class="form-control"
+            @change="changeAudioTheme"
+          >
+            <option
+              v-for="sound in availableAudioThemes"
+              :value="sound"
+            >
+              {{ $t(`audioTheme_${sound}`) }}
+            </option>
+          </select>
+        </div><button
+          v-once
+          class="btn btn-primary btn-xs"
+          @click="playAudio"
+        >
+          {{ $t('demo') }}
+        </button>
+      </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
+            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>
+        <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
+          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">
+          <input
+            v-model="user.preferences.suppressModals.levelUp"
+            type="checkbox"
+            @change="set('suppressModals', 'levelUp')"
+          ><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">
+          <input
+            v-model="user.preferences.suppressModals.raisePet"
+            type="checkbox"
+            @change="set('suppressModals', 'raisePet')"
+          ><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
+          class="btn btn-primary mr-2 mb-2"
+          popover-trigger="mouseenter"
+          popover-placement="right"
+          :popover="$t('showBaileyPop')"
+          @click="showBailey()"
+        >
+          {{ $t('showBailey') }}
+        </button><button
+          class="btn btn-primary mr-2 mb-2"
+          popover-trigger="mouseenter"
+          popover-placement="right"
+          :popover="$t('fixValPop')"
+          @click="openRestoreModal()"
+        >
+          {{ $t('fixVal') }}
+        </button><button
+          v-if="user.preferences.disableClasses == true"
+          class="btn btn-primary mb-2"
+          popover-trigger="mouseenter"
+          popover-placement="right"
+          :popover="$t('enableClassPop')"
+          @click="changeClassForUser(false)"
+        >
+          {{ $t('enableClass') }}
+        </button><hr><div>
+          <h5>{{ $t('customDayStart') }}</h5><div class="alert alert-warning">
+            {{ $t('customDayStartInfo1') }}
+          </div><div class="form-horizontal">
+            <div class="form-group">
+              <div class="col-7">
+                <select
+                  v-model="newDayStart"
+                  class="form-control"
+                >
+                  <option
+                    v-for="option in dayStartOptions"
+                    :value="option.value"
+                  >
+                    {{ option.name }}
+                  </option>
+                </select>
+              </div><div class="col-5">
+                <button
+                  class="btn btn-block btn-primary mt-1"
+                  :disabled="newDayStart === user.preferences.dayStart"
+                  @click="openDayStartModal()"
+                >
+                  {{ $t('saveCustomDayStart') }}
+                </button>
+              </div>
+            </div>
+          </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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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">
+              <button
+                v-if="!user.auth[network.key].id"
+                class="btn btn-primary mb-2"
+                @click="socialAuth(network.key, user)"
+              >
+                {{ $t('registerWithSocial', {network: network.name}) }}
+              </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
+                v-if="hasBackupAuthOption(network.key) && user.auth[network.key].id"
+                class="btn btn-danger"
+                @click="deleteSocialAuth(network)"
+              >
+                {{ $t('detachSocial', {network: network.name}) }}
+              </button>
+            </li>
+          </ul><hr><div v-if="!user.auth.local.email">
+            <p>{{ $t('addLocalAuth') }}</p><div
+              class="form"
+              name="localAuth"
+              novalidate="novalidate"
+            >
+              <div class="form-group">
+                <input
+                  v-model="localAuth.email"
+                  class="form-control"
+                  type="text"
+                  :placeholder="$t('email')"
+                  required="required"
+                >
+              </div><div class="form-group">
+                <input
+                  v-model="localAuth.password"
+                  class="form-control"
+                  type="password"
+                  :placeholder="$t('password')"
+                  required="required"
+                >
+              </div><div class="form-group">
+                <input
+                  v-model="localAuth.confirmPassword"
+                  class="form-control"
+                  type="password"
+                  :placeholder="$t('confirmPass')"
+                  required="required"
+                >
+              </div><button
+                class="btn btn-primary"
+                type="submit"
+                @click="addLocalAuth()"
+              >
+                {{ $t('submit') }}
+              </button>
+            </div>
+          </div>
+        </div><div class="usersettings">
+          <h5>{{ $t('changeDisplayName') }}</h5><div
+            class="form"
+            name="changeDisplayName"
+            novalidate="novalidate"
+          >
+            <div class="form-group">
+              <input
+                id="changeDisplayname"
+                v-model="temporaryDisplayName"
+                class="form-control"
+                type="text"
+                :placeholder="$t('newDisplayName')"
+                :class="{'is-invalid input-invalid': displayNameInvalid}"
+              ><div
+                v-if="displayNameIssues.length > 0"
+                class="mb-3"
+              >
+                <div
+                  v-for="issue in displayNameIssues"
+                  class="input-error"
+                >
+                  {{ issue }}
+                </div>
+              </div>
+            </div><button
+              class="btn btn-primary"
+              type="submit"
+              :disabled="displayNameCannotSubmit"
+              @click="changeDisplayName(temporaryDisplayName)"
+            >
+              {{ $t('submit') }}
+            </button>
+          </div><h5>{{ $t('changeUsername') }}</h5><div
+            class="form"
+            name="changeUsername"
+            novalidate="novalidate"
+          >
+            <div
+              v-if="verifiedUsername"
+              class="iconalert iconalert-success"
+            >
+              {{ $t('usernameVerifiedConfirmation', {'username': user.auth.local.username}) }}
+            </div><div
+              v-else
+              class="iconalert iconalert-warning"
+            >
+              <div class="align-middle">
+                <span>{{ $t('usernameNotVerified') }}</span>
+              </div>
+            </div><div class="form-group">
+              <input
+                id="changeUsername"
+                v-model="usernameUpdates.username"
+                class="form-control"
+                type="text"
+                :placeholder="$t('newUsername')"
+                :class="{'is-invalid input-invalid': usernameInvalid}"
+                @blur="restoreEmptyUsername()"
+              ><div
+                v-for="issue in usernameIssues"
+                class="input-error"
+              >
+                {{ issue }}
+              </div><small class="form-text text-muted">{{ $t('changeUsernameDisclaimer') }}</small>
+            </div><button
+              class="btn btn-primary"
+              type="submit"
+              :disabled="usernameCannotSubmit"
+              @click="changeUser('username', usernameUpdates)"
+            >
+              {{ $t('saveAndConfirm') }}
+            </button>
+          </div><h5 v-if="user.auth.local.email">
+            {{ $t('changeEmail') }}
+          </h5><div
+            v-if="user.auth.local.email"
+            class="form"
+            name="changeEmail"
+            novalidate="novalidate"
+          >
+            <div class="form-group">
+              <input
+                id="changeEmail"
+                v-model="emailUpdates.newEmail"
+                class="form-control"
+                type="text"
+                :placeholder="$t('newEmail')"
+              >
+            </div><div class="form-group">
+              <input
+                v-model="emailUpdates.password"
+                class="form-control"
+                type="password"
+                :placeholder="$t('password')"
+              >
+            </div><button
+              class="btn btn-primary"
+              type="submit"
+              @click="changeUser('email', emailUpdates)"
+            >
+              {{ $t('submit') }}
+            </button>
+          </div><h5 v-if="user.auth.local.email">
+            {{ $t('changePass') }}
+          </h5><div
+            v-if="user.auth.local.email"
+            class="form"
+            name="changePassword"
+            novalidate="novalidate"
+          >
+            <div class="form-group">
+              <input
+                id="changePassword"
+                v-model="passwordUpdates.password"
+                class="form-control"
+                type="password"
+                :placeholder="$t('oldPass')"
+              >
+            </div><div class="form-group">
+              <input
+                v-model="passwordUpdates.newPassword"
+                class="form-control"
+                type="password"
+                :placeholder="$t('newPass')"
+              >
+            </div><div class="form-group">
+              <input
+                v-model="passwordUpdates.confirmPassword"
+                class="form-control"
+                type="password"
+                :placeholder="$t('confirmPass')"
+              >
+            </div><button
+              class="btn btn-primary"
+              type="submit"
+              @click="changeUser('password', passwordUpdates)"
+            >
+              {{ $t('submit') }}
+            </button>
+          </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"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+              @click="openResetModal()"
+            >
+              {{ $t('resetAccount') }}
+            </button><button
+              v-b-popover.hover.auto="$t('deleteAccPop')"
+              class="btn btn-danger mb-2"
+              popover-trigger="mouseenter"
+              @click="openDeleteModal()"
+            >
+              {{ $t('deleteAccount') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 908b5e7dc8..d1d53d1e7b 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -1,95 +1,186 @@
-<template lang="pug">
-  .standard-page
-    h1 {{ $t('subscription') }}
-    .row
-      .col-6
-        h2 {{ $t('benefits') }}
-        ul
-          li
-            span.hint(:popover="$t('buyGemsGoldText', {gemCostTranslation})",
-              popover-trigger='mouseenter',
-              popover-placement='right') {{ $t('buyGemsGold') }}
-            span.badge.badge-success(v-if='subscription.key !== "basic_earned"') {{ $t('buyGemsGoldCap', buyGemsGoldCap) }}
-          li
-            span.hint(:popover="$t('retainHistoryText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('retainHistory') }}
-          li
-            span.hint(:popover="$t('doubleDropsText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('doubleDrops') }}
-          li
-            span.hint(:popover="$t('mysteryItemText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('mysteryItem') }}
-            div(v-if='subscription.key !== "basic_earned"')
-              .badge.badge-success {{ $t('mysticHourglass', mysticHourglass) }}
-              .small.muted {{ $t('mysticHourglassText') }}
-          li
-            span.hint(:popover="$t('exclusiveJackalopePetText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('exclusiveJackalopePet') }}
-          li
-            span.hint(:popover="$t('supportDevsText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('supportDevs') }}
-
-      .col-6
-        h2 Plan
-        table.table.alert.alert-info(v-if='hasSubscription')
-          tr(v-if='hasCanceledSubscription'): td.alert.alert-warning
-            span.noninteractive-button.btn-danger {{ $t('canceledSubscription') }}
-            i.glyphicon.glyphicon-time
-            |  {{ $t('subCanceled') }} &nbsp;
-            strong {{dateTerminated}}
-          tr(v-if='!hasCanceledSubscription'): td
-            h4 {{ $t('subscribed') }}
-            p(v-if='hasPlan && !hasGroupPlan') {{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
-            p(v-if='hasGroupPlan') {{ $t('youHaveGroupPlan') }}
-          tr(v-if='user.purchased.plan.extraMonths'): td
-            span.glyphicon.glyphicon-credit-card
-            | &nbsp; {{ $t('purchasedPlanExtraMonths', purchasedPlanExtraMonthsDetails) }}
-          tr(v-if='hasConsecutiveSubscription'): td
-            span.glyphicon.glyphicon-forward
-            | &nbsp; {{ $t('consecutiveSubscription') }}
-            ul.list-unstyled
-              li {{ $t('consecutiveMonths') }} {{user.purchased.plan.consecutive.count + user.purchased.plan.consecutive.offset}}
-              li {{ $t('gemCapExtra') }} {{user.purchased.plan.consecutive.gemCapExtra}}
-              li {{ $t('mysticHourglasses') }} {{user.purchased.plan.consecutive.trinkets}}
-
-        div(v-if='!hasSubscription || hasCanceledSubscription')
-          h4(v-if='hasCanceledSubscription') {{ $t("resubscribe") }}
-          .form-group.reduce-top-margin
-            .radio(v-for='block in subscriptionBlocksOrdered', v-if="block.target !== 'group' && block.canSubscribe === true")
-              label
-                input(type="radio", name="subRadio", :value="block.key", v-model='subscription.key')
-                span(v-if='block.original')
-                  span.label.label-success.line-through
-                    | ${{block.original }}
-                  | {{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
-                span(v-if='!block.original')
-                  | {{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
-
-          .form-inline
-            .form-group
-              input.form-control(type='text', v-model='subscription.coupon', :placeholder="$t('couponPlaceholder')")
-            .form-group
-              button.btn.btn-primary(type='button', @click='applyCoupon(subscription.coupon)') {{ $t("apply") }}
-
-        div(v-if='hasSubscription')
-          .btn.btn-primary(v-if='canEditCardDetails', @click='showStripeEdit()') {{ $t('subUpdateCard') }}
-          .btn.btn-sm.btn-danger(v-if='canCancelSubscription && !loading', @click='cancelSubscriptionConfirm()') {{ $t('cancelSub') }}
-          small(v-if='!canCancelSubscription && !hasCanceledSubscription', v-html='getCancelSubInfo()')
-
-        .subscribe-pay(v-if='!hasSubscription || hasCanceledSubscription')
-          h3 {{ $t('subscribeUsing') }}
-          .payments-column
-            button.purchase.btn.btn-primary.payment-button.payment-item(@click='showStripe({subscription:subscription.key, coupon:subscription.coupon})', :disabled='!subscription.key')
-              .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
-              | {{ $t('card') }}
-            button.btn.payment-item.paypal-checkout.payment-button(@click="openPaypal(paypalPurchaseLink, 'subscription')", :disabled='!subscription.key')
-              | &nbsp;
-              img(src='~@/assets/images/paypal-checkout.png', :alt="$t('paypal')")
-              | &nbsp;
-            amazon-button.payment-item(:amazon-data="{type: 'subscription', subscription: this.subscription.key, coupon: this.subscription.coupon}")
-    .row
-      .col-6
-        h2(v-once) {{ $t('giftSubscription') }}
-        ol
-          li(v-once) {{ $t('giftSubscriptionText1') }}
-          li(v-once) {{ $t('giftSubscriptionText2') }}
-          li(v-once) {{ $t('giftSubscriptionText3') }}
-        h4(v-once) {{ $t('giftSubscriptionText4') }}
+<template>
+  <div class="standard-page">
+    <h1>{{ $t('subscription') }}</h1><div class="row">
+      <div class="col-6">
+        <h2>{{ $t('benefits') }}</h2><ul>
+          <li>
+            <span
+              class="hint"
+              :popover="$t('buyGemsGoldText', {gemCostTranslation})"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+            >{{ $t('buyGemsGold') }}</span><span
+              v-if="subscription.key !== 'basic_earned'"
+              class="badge badge-success"
+            >{{ $t('buyGemsGoldCap', buyGemsGoldCap) }}</span>
+          </li><li>
+            <span
+              class="hint"
+              :popover="$t('retainHistoryText')"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+            >{{ $t('retainHistory') }}</span>
+          </li><li>
+            <span
+              class="hint"
+              :popover="$t('doubleDropsText')"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+            >{{ $t('doubleDrops') }}</span>
+          </li><li>
+            <span
+              class="hint"
+              :popover="$t('mysteryItemText')"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+            >{{ $t('mysteryItem') }}</span><div v-if="subscription.key !== 'basic_earned'">
+              <div class="badge badge-success">
+                {{ $t('mysticHourglass', mysticHourglass) }}
+              </div><div class="small muted">
+                {{ $t('mysticHourglassText') }}
+              </div>
+            </div>
+          </li><li>
+            <span
+              class="hint"
+              :popover="$t('exclusiveJackalopePetText')"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+            >{{ $t('exclusiveJackalopePet') }}</span>
+          </li><li>
+            <span
+              class="hint"
+              :popover="$t('supportDevsText')"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+            >{{ $t('supportDevs') }}</span>
+          </li>
+        </ul>
+      </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>
+            </td>
+          </tr><tr v-if="!hasCanceledSubscription">
+            <td>
+              <h4>{{ $t('subscribed') }}</h4><p v-if="hasPlan && !hasGroupPlan">
+                {{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
+              </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">
+            <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">
+          <h4 v-if="hasCanceledSubscription">
+            {{ $t("resubscribe") }}
+          </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>
+            </div>
+          </div><div class="form-inline">
+            <div class="form-group">
+              <input
+                v-model="subscription.coupon"
+                class="form-control"
+                type="text"
+                :placeholder="$t('couponPlaceholder')"
+              >
+            </div><div class="form-group">
+              <button
+                class="btn btn-primary"
+                type="button"
+                @click="applyCoupon(subscription.coupon)"
+              >
+                {{ $t("apply") }}
+              </button>
+            </div>
+          </div>
+        </div><div v-if="hasSubscription">
+          <div
+            v-if="canEditCardDetails"
+            class="btn btn-primary"
+            @click="showStripeEdit()"
+          >
+            {{ $t('subUpdateCard') }}
+          </div><div
+            v-if="canCancelSubscription && !loading"
+            class="btn btn-sm btn-danger"
+            @click="cancelSubscriptionConfirm()"
+          >
+            {{ $t('cancelSub') }}
+          </div><small
+            v-if="!canCancelSubscription && !hasCanceledSubscription"
+            v-html="getCancelSubInfo()"
+          ></small>
+        </div><div
+          v-if="!hasSubscription || hasCanceledSubscription"
+          class="subscribe-pay"
+        >
+          <h3>{{ $t('subscribeUsing') }}</h3><div class="payments-column">
+            <button
+              class="purchase btn btn-primary payment-button payment-item"
+              :disabled="!subscription.key"
+              @click="showStripe({subscription:subscription.key, coupon:subscription.coupon})"
+            >
+              <div
+                class="svg-icon credit-card-icon"
+                v-html="icons.creditCardIcon"
+              ></div>{{ $t('card') }}
+            </button><button
+              class="btn payment-item paypal-checkout payment-button"
+              :disabled="!subscription.key"
+              @click="openPaypal(paypalPurchaseLink, 'subscription')"
+            >
+              &nbsp;<img
+                src="~@/assets/images/paypal-checkout.png"
+                :alt="$t('paypal')"
+              >&nbsp;
+            </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 class="col-6">
+        <h2 v-once>
+          {{ $t('giftSubscription') }}
+        </h2><ol>
+          <li v-once>
+            {{ $t('giftSubscriptionText1') }}
+          </li><li v-once>
+            {{ $t('giftSubscriptionText2') }}
+          </li><li v-once>
+            {{ $t('giftSubscriptionText3') }}
+          </li>
+        </ol><h4 v-once>
+          {{ $t('giftSubscriptionText4') }}
+        </h4>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/website/client/src/components/settings/usernameForm.vue b/website/client/src/components/settings/usernameForm.vue
index a239c54818..2e58f3b347 100644
--- a/website/client/src/components/settings/usernameForm.vue
+++ b/website/client/src/components/settings/usernameForm.vue
@@ -1,33 +1,78 @@
-<template lang="pug">
-  div
-    .form-group
-      .d-flex.align-items-center
-        label.mr-3(for='displayName') {{ $t('displayName') }}
-        .flex-grow-1
-          input#displayName.form-control(
-            type='text',
-            :placeholder="$t('newDisplayName')",
-            v-model='temporaryDisplayName',
-            @blur='restoreEmptyDisplayName()',
-            :class='{"is-invalid input-invalid": displayNameInvalid, "input-valid": displayNameValid, "text-darker": temporaryDisplayName.length > 0}')
-    .mb-3(v-if="displayNameIssues.length > 0")
-      .input-error.text-center(v-for="issue in displayNameIssues") {{ issue }}
-    .form-group
-      .d-flex.align-items-center
-        label.mr-3(for='username') {{ $t('username') }}
-        .flex-grow-1
-          .input-group-prepend.input-group-text @
-            input#username.form-control(
-              type='text',
-              :placeholder="$t('newUsername')",
-              v-model='temporaryUsername',
-              @blur='restoreEmptyUsername()',
-              :class='{"is-invalid input-invalid": usernameInvalid, "input-valid": usernameValid, "text-darker": temporaryUsername.length > 0}')
-    .mb-3(v-if="usernameIssues.length > 0")
-      .input-error.text-center(v-for="issue in usernameIssues") {{ issue }}
-    .small.text-center.mb-3(v-if='!avatarIntro') {{ $t('usernameLimitations') }}
-    .row.justify-content-center
-      button.btn.btn-primary(type='submit', @click='submitNames()', :class='{disabled: usernameCannotSubmit}', :disabled='usernameCannotSubmit') {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
+<template>
+  <div>
+    <div class="form-group">
+      <div class="d-flex align-items-center">
+        <label
+          class="mr-3"
+          for="displayName"
+        >{{ $t('displayName') }}</label><div class="flex-grow-1">
+          <input
+            id="displayName"
+            v-model="temporaryDisplayName"
+            class="form-control"
+            type="text"
+            :placeholder="$t('newDisplayName')"
+            :class="{'is-invalid input-invalid': displayNameInvalid, 'input-valid': displayNameValid, 'text-darker': temporaryDisplayName.length > 0}"
+            @blur="restoreEmptyDisplayName()"
+          >
+        </div>
+      </div>
+    </div><div
+      v-if="displayNameIssues.length > 0"
+      class="mb-3"
+    >
+      <div
+        v-for="issue in displayNameIssues"
+        class="input-error text-center"
+      >
+        {{ issue }}
+      </div>
+    </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">
+          <div class="input-group-prepend input-group-text">
+            @<input
+              id="username"
+              v-model="temporaryUsername"
+              class="form-control"
+              type="text"
+              :placeholder="$t('newUsername')"
+              :class="{'is-invalid input-invalid': usernameInvalid, 'input-valid': usernameValid, 'text-darker': temporaryUsername.length > 0}"
+              @blur="restoreEmptyUsername()"
+            >
+          </div>
+        </div>
+      </div>
+    </div><div
+      v-if="usernameIssues.length > 0"
+      class="mb-3"
+    >
+      <div
+        v-for="issue in usernameIssues"
+        class="input-error text-center"
+      >
+        {{ issue }}
+      </div>
+    </div><div
+      v-if="!avatarIntro"
+      class="small text-center mb-3"
+    >
+      {{ $t('usernameLimitations') }}
+    </div><div class="row justify-content-center">
+      <button
+        class="btn btn-primary"
+        type="submit"
+        :class="{disabled: usernameCannotSubmit}"
+        :disabled="usernameCannotSubmit"
+        @click="submitNames()"
+      >
+        {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/settings/verifyUsername.vue b/website/client/src/components/settings/verifyUsername.vue
index 32ee82f15d..62d69ec92c 100644
--- a/website/client/src/components/settings/verifyUsername.vue
+++ b/website/client/src/components/settings/verifyUsername.vue
@@ -1,19 +1,29 @@
-<template lang="pug">
-  b-modal#verify-username(
-    size="m",
-    :no-close-on-backdrop="true",
-    :no-close-on-esc="true",
-    :hide-header="true",
-    :hide-footer="true",
-    @hide="$emit('hide')",
-  ).d-flex
-    div.nametag-header(v-html='icons.helloNametag')
-    h2.text-center {{ $t('usernameTime') }}
-    p.text-center(v-html="$t('usernameInfo')")
-    username-form
-    .scene_veteran_pets.center-block
-    .small.text-center.mb-3 {{ $t('verifyUsernameVeteranPet') }}
-    .small.text-center.tos-footer(v-html="$t('usernameTOSRequirements')")
+<template>
+  <b-modal
+    id="verify-username"
+    class="d-flex"
+    size="m"
+    :no-close-on-backdrop="true"
+    :no-close-on-esc="true"
+    :hide-header="true"
+    :hide-footer="true"
+    @hide="$emit('hide')"
+  >
+    <div
+      class="nametag-header"
+      v-html="icons.helloNametag"
+    ></div><h2 class="text-center">
+      {{ $t('usernameTime') }}
+    </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">
+      {{ $t('verifyUsernameVeteranPet') }}
+    </div><div
+      class="small text-center tos-footer"
+      v-html="$t('usernameTOSRequirements')"
+    ></div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/shared/inventoryDrawer.vue b/website/client/src/components/shared/inventoryDrawer.vue
index c13e87b011..4d16bf1973 100644
--- a/website/client/src/components/shared/inventoryDrawer.vue
+++ b/website/client/src/components/shared/inventoryDrawer.vue
@@ -1,42 +1,59 @@
-<template lang="pug">
-drawer.inventoryDrawer(
-  :title="$t('quickInventory')"
-  :errorMessage="inventoryDrawerErrorMessage(selectedDrawerItemType)"
-)
-  div(slot="drawer-header")
-    drawer-header-tabs(
-      :tabs="filteredTabs",
-      @changedPosition="tabSelected($event)"
-    )
-      div(slot="right-item")
-        #petLikeToEatMarket.drawer-help-text(v-once)
-          | {{ $t('petLikeToEat') + ' ' }}
-          span.svg-icon.inline.icon-16(v-html="icons.information")
-        b-popover(
-          target="petLikeToEatMarket",
-          :placement="'top'",
-        )
-          .popover-content-text(v-html="$t('petLikeToEatText')", v-once)
-
-  drawer-slider(
-    v-if="hasOwnedItemsForType(selectedDrawerItemType)"
-    :items="ownedItems(selectedDrawerItemType) || []",
-    slot="drawer-slider",
-    :itemWidth=94,
-    :itemMargin=24,
-    :itemType="selectedDrawerTab"
-  )
-    template(slot="item", slot-scope="ctx")
-      slot(
-        name="item",
-        :item="ctx.item",
-        :itemClass="getItemClass(selectedDrawerContentType, ctx.item.key)",
-        :itemCount="userItems[selectedDrawerContentType][ctx.item.key] || 0",
-        :itemName="getItemName(selectedDrawerItemType, ctx.item)",
-        :itemType="selectedDrawerItemType"
-      )
-
-
+<template>
+  <drawer
+    class="inventoryDrawer"
+    :title="$t('quickInventory')"
+    :error-message="inventoryDrawerErrorMessage(selectedDrawerItemType)"
+  >
+    <div slot="drawer-header">
+      <drawer-header-tabs
+        :tabs="filteredTabs"
+        @changedPosition="tabSelected($event)"
+      >
+        <div slot="right-item">
+          <div
+            v-once
+            id="petLikeToEatMarket"
+            class="drawer-help-text"
+          >
+            {{ $t('petLikeToEat') + ' ' }}<span
+              class="svg-icon inline icon-16"
+              v-html="icons.information"
+            ></span>
+          </div><b-popover
+            target="petLikeToEatMarket"
+            :placement="'top'"
+          >
+            <div
+              v-once
+              class="popover-content-text"
+              v-html="$t('petLikeToEatText')"
+            ></div>
+          </b-popover>
+        </div>
+      </drawer-header-tabs>
+    </div><drawer-slider
+      v-if="hasOwnedItemsForType(selectedDrawerItemType)"
+      slot="drawer-slider"
+      :items="ownedItems(selectedDrawerItemType) || []"
+      :item-width="94"
+      :item-margin="24"
+      :item-type="selectedDrawerTab"
+    >
+      <template
+        slot="item"
+        slot-scope="ctx"
+      >
+        <slot
+          name="item"
+          :item="ctx.item"
+          :itemClass="getItemClass(selectedDrawerContentType, ctx.item.key)"
+          :itemCount="userItems[selectedDrawerContentType][ctx.item.key] || 0"
+          :itemName="getItemName(selectedDrawerItemType, ctx.item)"
+          :itemType="selectedDrawerItemType"
+        ></slot>
+      </template>
+    </drawer-slider>
+  </drawer>
 </template>
 
 <script>
diff --git a/website/client/src/components/shops/balanceInfo.vue b/website/client/src/components/shops/balanceInfo.vue
index 265bd79294..1234227bbc 100644
--- a/website/client/src/components/shops/balanceInfo.vue
+++ b/website/client/src/components/shops/balanceInfo.vue
@@ -1,11 +1,13 @@
-<template lang="pug">
-  div
-    span(
-      v-for="currency of currencies",
+<template>
+  <div>
+    <span
+      v-for="currency of currencies"
       :key="currency.key"
-    )
-      .svg-icon(v-html="currency.icon")
-      span(:class="{'notEnough': currency.notEnough}") {{ currency.value | roundBigNumber}}
+    ><div
+      class="svg-icon"
+      v-html="currency.icon"
+    ></div><span :class="{'notEnough': currency.notEnough}">{{ currency.value | roundBigNumber }}</span></span>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 25a5f40195..12ca3636bb 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -1,96 +1,153 @@
-<template lang="pug">
-  b-modal#buy-modal(
-    :hide-header="true",
+<template>
+  <b-modal
+    id="buy-modal"
+    :hide-header="true"
     @change="onChange($event)"
-  )
-    span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': isPinned}",
-      v-if="withPin",
+  >
+    <span
+      v-if="withPin"
+      class="badge badge-pill badge-dialog"
+      :class="{'item-selected-badge': isPinned}"
       @click.prevent.stop="togglePinned()"
-    )
-      span.svg-icon.inline.color.icon-10(v-html="icons.pin")
-
-    div.close
-      span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close", @click="hideDialog()")
-
-    div.content(v-if="item != null")
-      div.inner-content
-        slot(name="item", :item="item")
-          div(v-if="showAvatar")
-            avatar(
-              :showVisualBuffs="false",
-              :member="user",
-              :avatarOnly="true",
-              :hideClassBadge="true",
-              :withBackground="true",
-              :overrideAvatarGear="getAvatarOverrides(item)",
-              :spritesMargin="'0px auto 0px -24px'",
-            )
-          item.flat.bordered-item(
-            :item="item",
-            :itemContentClass="item.class",
-            :showPopover="false",
+    ><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
+      v-if="item != null"
+      class="content"
+    >
+      <div class="inner-content">
+        <slot
+          name="item"
+          :item="item"
+        >
+          <div v-if="showAvatar">
+            <avatar
+              :show-visual-buffs="false"
+              :member="user"
+              :avatar-only="true"
+              :hide-class-badge="true"
+              :with-background="true"
+              :override-avatar-gear="getAvatarOverrides(item)"
+              :sprites-margin="'0px auto 0px -24px'"
+            />
+          </div><item
             v-else-if="item.key != 'gem'"
-          )
-
-        h4.title {{ itemText }}
-        div.text(v-html="itemNotes")
-
-        slot(name="additionalInfo", :item="item")
-          equipmentAttributesGrid.attributesGrid(
-            v-if="showAttributesGrid",
-            :item="item",
+            class="flat bordered-item"
+            :item="item"
+            :item-content-class="item.class"
+            :show-popover="false"
+          />
+        </slot><h4 class="title">
+          {{ itemText }}
+        </h4><div
+          class="text"
+          v-html="itemNotes"
+        ></div><slot
+          name="additionalInfo"
+          :item="item"
+        >
+          <equipmentAttributesGrid
+            v-if="showAttributesGrid"
+            class="attributesGrid"
+            :item="item"
             :user="user"
-          )
-
-        .purchase-amount(v-if='item.value > 0')
-          .how-many-to-buy(v-if='showAmountToBuy(item)')
-            strong {{ $t('howManyToBuy') }}
-          div(v-if='showAmountToBuy(item)')
-            .box
-              input(type='number', min='0', step='1', v-model.number='selectedAmountToBuy')
-            span(:class="{'notEnough': notEnoughCurrency}")
-              span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons[getPriceClass()]")
-              span.cost(:class="getPriceClass()") {{ item.value }}
-          div(v-else)
-            span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons[getPriceClass()]")
-            span.cost(:class="getPriceClass()") {{ item.value }}
-
-        .gems-left(v-if='item.key === "gem"')
-          strong(v-if='gemsLeft > 0') {{ gemsLeft }} {{ $t('gemsRemaining') }}
-          strong(v-if='gemsLeft === 0') {{ $t('maxBuyGems') }}
-
-        div(v-if='attemptingToPurchaseMoreGemsThanAreLeft')
-          | {{$t('notEnoughGemsToBuy')}}
-
-        button.btn.btn-primary(
-          @click="purchaseGems()",
+          />
+        </slot><div
+          v-if="item.value > 0"
+          class="purchase-amount"
+        >
+          <div
+            v-if="showAmountToBuy(item)"
+            class="how-many-to-buy"
+          >
+            <strong>{{ $t('howManyToBuy') }}</strong>
+          </div><div v-if="showAmountToBuy(item)">
+            <div class="box">
+              <input
+                v-model.number="selectedAmountToBuy"
+                type="number"
+                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>
+            <span
+              class="svg-icon inline icon-32"
+              aria-hidden="true"
+              v-html="icons[getPriceClass()]"
+            ></span><span
+              class="cost"
+              :class="getPriceClass()"
+            >{{ item.value }}</span>
+          </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">
+          {{ $t('notEnoughGemsToBuy') }}
+        </div><button
           v-if="getPriceClass() === 'gems' && !this.enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
-        ) {{ $t('purchaseGems') }}
-
-        button.btn.btn-primary(
-          @click="buyItem()",
-          v-else,
-          :disabled='item.key === "gem" && gemsLeft === 0 || attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid',
+          class="btn btn-primary"
+          @click="purchaseGems()"
+        >
+          {{ $t('purchaseGems') }}
+        </button><button
+          v-else
+          class="btn btn-primary"
+          :disabled="item.key === 'gem' && gemsLeft === 0 || attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid"
           :class="{'notEnough': !preventHealthPotion || !this.enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)}"
-        ) {{ $t('buyNow') }}
-
-    div.limitedTime(v-if="item.event && item.owned == null")
-      span.svg-icon.inline.icon-16.clock-icon(v-html="icons.clock")
-      span.limitedString {{ limitedString }}
-
-    .free-rebirth.d-flex.align-items-center(v-if='item.key === "rebirth_orb" && item.value > 0 && user.stats.lvl >= 100')
-      .m-auto
-        span.svg-icon.inline.icon-16.mr-2.pt-015(v-html="icons.whiteClock")
-        span(v-html='$t("nextFreeRebirth", {days: nextFreeRebirth})')
-
-    div.clearfix(slot="modal-footer")
-      span.balance.float-left {{ $t('yourBalance') }}
-      balanceInfo(
-        :withHourglass="getPriceClass() === 'hourglasses'",
-        :currencyNeeded="getPriceClass()",
-        :amountNeeded="item.value"
-      ).float-right
+          @click="buyItem()"
+        >
+          {{ $t('buyNow') }}
+        </button>
+      </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
+      v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
+      class="free-rebirth d-flex align-items-center"
+    >
+      <div class="m-auto">
+        <span
+          class="svg-icon inline icon-16 mr-2 pt-015"
+          v-html="icons.whiteClock"
+        ></span><span v-html="$t('nextFreeRebirth', {days: nextFreeRebirth})"></span>
+      </div>
+    </div><div
+      slot="modal-footer"
+      class="clearfix"
+    >
+      <span class="balance float-left">{{ $t('yourBalance') }}</span><balanceInfo
+        class="float-right"
+        :with-hourglass="getPriceClass() === 'hourglasses'"
+        :currency-needed="getPriceClass()"
+        :amount-needed="item.value"
+      />
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/shops/featuredItemsHeader.vue b/website/client/src/components/shops/featuredItemsHeader.vue
index 6d89de56c2..f94a9cffb0 100644
--- a/website/client/src/components/shops/featuredItemsHeader.vue
+++ b/website/client/src/components/shops/featuredItemsHeader.vue
@@ -1,36 +1,48 @@
-<template lang="pug">
-div.featuredItems
-  .background(:class="{broken: broken}")
-  .background(:class="{cracked: broken, broken: broken}")
-    div.npc
-      div.featured-label
-        span.rectangle
-        span.text {{npcName}}
-        span.rectangle
-    div.content
-      div.featured-label.with-border
-        span.rectangle
-        span.text {{ featuredText }}
-        span.rectangle
-
-      div.items.margin-center
-        shopItem(
-          v-for="item in featuredItems",
-          :key="item.key",
-          :item="item",
-          :price="item.value",
-          :itemContentClass="'shop_'+item.key",
-          :emptyItem="false",
-          :popoverPosition="'top'",
-          @click="featuredItemSelected(item)"
-        )
-          template(slot="itemBadge", slot-scope="ctx")
-            span.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.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
+<template>
+  <div class="featuredItems">
+    <div
+      class="background"
+      :class="{broken: broken}"
+    ></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>
+        </div>
+      </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">
+          <shopItem
+            v-for="item in featuredItems"
+            :key="item.key"
+            :item="item"
+            :price="item.value"
+            :item-content-class="'shop_'+item.key"
+            :empty-item="false"
+            :popover-position="'top'"
+            @click="featuredItemSelected(item)"
+          >
+            <template
+              slot="itemBadge"
+              slot-scope="ctx"
+            >
+              <span
+                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>
+            </template>
+          </shopItem>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/shops/index.vue b/website/client/src/components/shops/index.vue
index a9438e0e93..2813bae9e4 100644
--- a/website/client/src/components/shops/index.vue
+++ b/website/client/src/components/shops/index.vue
@@ -1,12 +1,32 @@
-<template lang="pug">
-  .row
-    secondary-menu.col-12
-      router-link.nav-link(:to="{name: 'market'}", exact) {{ $t('market') }}
-      router-link.nav-link(:to="{name: 'quests'}") {{ $t('quests') }}
-      router-link.nav-link(:to="{name: 'seasonal'}") {{ $t('titleSeasonalShop') }}
-      router-link.nav-link(:to="{name: 'time'}") {{ $t('titleTimeTravelers') }}
-    .col-12
-      router-view
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        class="nav-link"
+        :to="{name: 'market'}"
+        exact="exact"
+      >
+        {{ $t('market') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'quests'}"
+      >
+        {{ $t('quests') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'seasonal'}"
+      >
+        {{ $t('titleSeasonalShop') }}
+      </router-link><router-link
+        class="nav-link"
+        :to="{name: 'time'}"
+      >
+        {{ $t('titleTimeTravelers') }}
+      </router-link>
+    </secondary-menu><div class="col-12">
+      <router-view />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/shops/market/categoryItem.vue b/website/client/src/components/shops/market/categoryItem.vue
index 300b7de53a..2dcf970eb9 100644
--- a/website/client/src/components/shops/market/categoryItem.vue
+++ b/website/client/src/components/shops/market/categoryItem.vue
@@ -1,17 +1,23 @@
-<template lang="pug">
-div
-  countBadge(
-    v-if="item.showCount !== false",
-    :show="true",
-    :count="count"
-  )
-  .badge.badge-pill.badge-purple.gems-left(v-if='item.key === "gem"')
-    | {{ gemsLeft }}
-  span.badge.badge-pill.badge-item.badge-svg(
-    :class="{'item-selected-badge': item.pinned, 'hide': !item.pinned}",
-    @click.prevent.stop="togglePinned(item)"
-  )
-    span.svg-icon.inline.icon-12.color(v-html="icons.pin")
+<template>
+  <div>
+    <countBadge
+      v-if="item.showCount !== false"
+      :show="true"
+      :count="count"
+    /><div
+      v-if="item.key === 'gem'"
+      class="badge badge-pill badge-purple gems-left"
+    >
+      {{ gemsLeft }}
+    </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>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/shops/market/categoryRow.vue b/website/client/src/components/shops/market/categoryRow.vue
index 91aab28eab..e0ea4e1769 100644
--- a/website/client/src/components/shops/market/categoryRow.vue
+++ b/website/client/src/components/shops/market/categoryRow.vue
@@ -1,16 +1,21 @@
-<template lang="pug">
-div.items
-  shopItem(v-for="item in sortedMarketItems",
-    :key="item.key",
-    :item="item",
-    :emptyItem="false",
-    :popoverPosition="'top'",
-    @click="itemSelected(item)")
-    span(slot="popoverContent")
-      strong(v-if='item.key === "gem" && gemsLeft === 0') {{ $t('maxBuyGems') }}
-      h4.popover-content-title {{ item.text }}
-    template(slot="itemBadge", slot-scope="ctx")
-      category-item(:item='ctx.item')
+<template>
+  <div class="items">
+    <shopItem
+      v-for="item in sortedMarketItems"
+      :key="item.key"
+      :item="item"
+      :empty-item="false"
+      :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
+        slot="itemBadge"
+        slot-scope="ctx"
+      >
+        <category-item :item="ctx.item" />
+      </template>
+    </shopItem>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/shops/market/equipmentSection.vue b/website/client/src/components/shops/market/equipmentSection.vue
index db6f52dad5..d4eb03c9c8 100644
--- a/website/client/src/components/shops/market/equipmentSection.vue
+++ b/website/client/src/components/shops/market/equipmentSection.vue
@@ -1,49 +1,68 @@
-<template lang="pug">
-layout-section(:title="$t('equipment')")
-  div(slot="filters")
-    filter-dropdown(
-      :label="$t('class')",
-      :initialItem="selectedGearCategory",
-      :items="marketGearCategories",
-      :withIcon="true",
-      @selected="selectedGroupGearByClass = $event.id"
-    )
-      span(slot="item", slot-scope="ctx")
-        span.svg-icon.inline.icon-16(v-html="icons[ctx.item.id]")
-        span.text {{ getClassName(ctx.item.id) }}
-
-    filter-dropdown(
-      :label="$t('sortBy')",
-      :initialItem="selectedSortGearBy",
-      :items="sortGearBy",
-      @selected="selectedSortGearBy = $event"
-    )
-      span(slot="item", slot-scope="ctx")
-        span.text {{ $t(ctx.item.id) }}
-
-  itemRows.equipment-rows(
-    :items="sortedGearItems",
-    :itemWidth=94,
-    :itemMargin=24,
-    :type="'gear'",
-    :noItemsLabel="$t('noGearItemsOfClass')",
-    slot="content"
-  )
-    template(slot="item", slot-scope="ctx")
-      shopItem(
-        :key="ctx.item.key",
-        :item="ctx.item",
-        :emptyItem="userItems.gear[ctx.item.key] === undefined",
-        :popoverPosition="'top'",
-        @click="gearSelected(ctx.item)"
-      )
-
-        template(slot="itemBadge", slot-scope="ctx")
-          span.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.svg-icon.inline.icon-12.color(v-html="icons.pin")
+<template>
+  <layout-section :title="$t('equipment')">
+    <div slot="filters">
+      <filter-dropdown
+        :label="$t('class')"
+        :initial-item="selectedGearCategory"
+        :items="marketGearCategories"
+        :with-icon="true"
+        @selected="selectedGroupGearByClass = $event.id"
+      >
+        <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
+        :label="$t('sortBy')"
+        :initial-item="selectedSortGearBy"
+        :items="sortGearBy"
+        @selected="selectedSortGearBy = $event"
+      >
+        <span
+          slot="item"
+          slot-scope="ctx"
+        ><span class="text">{{ $t(ctx.item.id) }}</span></span>
+      </filter-dropdown>
+    </div><itemRows
+      slot="content"
+      class="equipment-rows"
+      :items="sortedGearItems"
+      :item-width="94"
+      :item-margin="24"
+      :type="'gear'"
+      :no-items-label="$t('noGearItemsOfClass')"
+    >
+      <template
+        slot="item"
+        slot-scope="ctx"
+      >
+        <shopItem
+          :key="ctx.item.key"
+          :item="ctx.item"
+          :empty-item="userItems.gear[ctx.item.key] === undefined"
+          :popover-position="'top'"
+          @click="gearSelected(ctx.item)"
+        >
+          <template
+            slot="itemBadge"
+            slot-scope="ctx"
+          >
+            <span
+              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>
+          </template>
+        </shopItem>
+      </template>
+    </itemRows>
+  </layout-section>
 </template>
 
 <script>
@@ -66,7 +85,7 @@ import svgHealer from '@/assets/svg/healer.svg';
 import pinUtils from '../../../mixins/pinUtils';
 
 const sortGearTypes = [
-  'sortByType', 'sortByPrice', 'sortByCon', 
+  'sortByType', 'sortByPrice', 'sortByCon',
   'sortByPer', 'sortByStr', 'sortByInt',
 ].map(g => ({ id: g }));
 
diff --git a/website/client/src/components/shops/market/filter.vue b/website/client/src/components/shops/market/filter.vue
index f04b04d368..bf99ae57cc 100644
--- a/website/client/src/components/shops/market/filter.vue
+++ b/website/client/src/components/shops/market/filter.vue
@@ -1,26 +1,39 @@
-<template lang="pug">
-.form
-  h2(v-once) {{ $t('filter') }}
-  .form-group
-    checkbox(
-      v-for="viewOptionKey in Object.keys(viewOptions)",
-      :key="viewOptionKey",
-      :id="`category-${viewOptionKey}`",
-      :checked.sync="viewOptions[viewOptionKey].selected",
-      :text="viewOptions[viewOptionKey].text"
-    )
-  div.form-group.clearfix
-    h3.float-left(v-once) {{ $t('hideLocked') }}
-    toggle-switch.float-right(
-      v-model="lockedChecked",
-      @change="$emit('update:hideLocked', $event)"
-    )
-  div.form-group.clearfix
-    h3.float-left(v-once) {{ $t('hidePinned') }}
-    toggle-switch.float-right(
-      v-model="pinnedChecked",
-      @change="$emit('update:hidePinned', $event)"
-    )
+<template>
+  <div class="form">
+    <h2 v-once>
+      {{ $t('filter') }}
+    </h2><div class="form-group">
+      <checkbox
+        v-for="viewOptionKey in Object.keys(viewOptions)"
+        :id="`category-${viewOptionKey}`"
+        :key="viewOptionKey"
+        :checked.sync="viewOptions[viewOptionKey].selected"
+        :text="viewOptions[viewOptionKey].text"
+      />
+    </div><div class="form-group clearfix">
+      <h3
+        v-once
+        class="float-left"
+      >
+        {{ $t('hideLocked') }}
+      </h3><toggle-switch
+        v-model="lockedChecked"
+        class="float-right"
+        @change="$emit('update:hideLocked', $event)"
+      />
+    </div><div class="form-group clearfix">
+      <h3
+        v-once
+        class="float-left"
+      >
+        {{ $t('hidePinned') }}
+      </h3><toggle-switch
+        v-model="pinnedChecked"
+        class="float-right"
+        @change="$emit('update:hidePinned', $event)"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/shops/market/index.vue b/website/client/src/components/shops/market/index.vue
index 5b705076fc..980d5252e7 100644
--- a/website/client/src/components/shops/market/index.vue
+++ b/website/client/src/components/shops/market/index.vue
@@ -1,72 +1,89 @@
-<template lang="pug">
-  page-layout.market
-    div(slot="sidebar")
-      .form-group
-        input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
-      market-filter(
-        :hideLocked.sync="hideLocked",
-        :hidePinned.sync="hidePinned",
-        :viewOptions="viewOptions"
-      )
-    div(slot="page")
-      featured-items-header(
-        :broken="broken",
-        :npcName="'Alex'",
-        :featuredText="market.featured.text",
-        :featuredItems="market.featured.items"
+<template>
+  <page-layout class="market">
+    <div slot="sidebar">
+      <div class="form-group">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><market-filter
+        :hide-locked.sync="hideLocked"
+        :hide-pinned.sync="hidePinned"
+        :view-options="viewOptions"
+      />
+    </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.mb-4.page-header(v-once) {{ $t('market') }}
-
-      equipment-section(
-        v-if="!anyFilterSelected || viewOptions['equipment'].selected",
-        :hidePinned="hidePinned",
-        :hideLocked="hideLocked",
-        :searchBy="searchTextThrottled"
-      )
-
-      layout-section(:title="$t('items')")
-        div(slot="filters")
-          filter-dropdown(
-            :label="$t('sortBy')",
-            :initialItem="selectedSortItemsBy",
-            :items="sortItemsBy",
+      /><h1
+        v-once
+        class="mb-4 page-header"
+      >
+        {{ $t('market') }}
+      </h1><equipment-section
+        v-if="!anyFilterSelected || viewOptions['equipment'].selected"
+        :hide-pinned="hidePinned"
+        :hide-locked="hideLocked"
+        :search-by="searchTextThrottled"
+      /><layout-section :title="$t('items')">
+        <div slot="filters">
+          <filter-dropdown
+            :label="$t('sortBy')"
+            :initial-item="selectedSortItemsBy"
+            :items="sortItemsBy"
             @selected="selectedSortItemsBy = $event"
-          )
-            span(slot="item", slot-scope="ctx")
-              span.text {{ $t(ctx.item.id) }}
-      div(
-        v-for="category in categories",
+          >
+            <span
+              slot="item"
+              slot-scope="ctx"
+            ><span class="text">{{ $t(ctx.item.id) }}</span></span>
+          </filter-dropdown>
+        </div>
+      </layout-section><div
+        v-for="category in categories"
         v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
-      )
-        h4 {{ category.text }}
-        category-row(
-          :hidePinned="hidePinned",
-          :hideLocked="hideLocked",
-          :searchBy="searchTextThrottled",
-          :sortBy="selectedSortItemsBy.id",
+      >
+        <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.fill-height
-
-      inventoryDrawer(:showEggs="true", :showPotions="true")
-        template(slot="item", slot-scope="ctx")
-          item(
-            :item="ctx.item",
-            :itemContentClass="ctx.itemClass",
-            popoverPosition="top",
+        /><keys-to-kennel v-if="category.identifier === 'special'" /><div class="fill-height"></div>
+      </div><inventoryDrawer
+        :show-eggs="true"
+        :show-potions="true"
+      >
+        <template
+          slot="item"
+          slot-scope="ctx"
+        >
+          <item
+            :item="ctx.item"
+            :item-content-class="ctx.itemClass"
+            popover-position="top"
             @click="sellItem(ctx)"
-          )
-            countBadge(
+          >
+            <countBadge
               slot="itemBadge"
-              :show="true",
+              :show="true"
               :count="ctx.itemCount"
-            )
-            h4.popover-content-title(slot="popoverContent") {{ ctx.itemName }}
-
-      sellModal
+            /><h4
+              slot="popoverContent"
+              class="popover-content-title"
+            >
+              {{ ctx.itemName }}
+            </h4>
+          </item>
+        </template>
+      </inventoryDrawer><sellModal />
+    </div>
+  </page-layout>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/shops/market/keysToKennel.vue b/website/client/src/components/shops/market/keysToKennel.vue
index 2b39a20892..4689daced1 100644
--- a/website/client/src/components/shops/market/keysToKennel.vue
+++ b/website/client/src/components/shops/market/keysToKennel.vue
@@ -1,29 +1,28 @@
-<template lang="pug">
-.keys-wrap
-  shopItem(
-    :key="keysToPets.key",
-    :item="keysToPets",
-    :emptyItem="false",
-    popoverPosition="'top'",
-    @click="releasePets()",
-    v-if='userHasAllPets'
-  )
-  shopItem(
-    :key="keysToMounts.key",
-    :item="keysToMounts",
-    :emptyItem="false",
-    popoverPosition="'top'",
-    @click="releaseMounts()",
-    v-if='userHasAllMounts'
-  )
-  shopItem(
-    :key="keysToBoth.key",
-    :item="keysToBoth",
-    :emptyItem="false",
-    popoverPosition="'top'",
-    @click="releaseBoth()",
-    v-if='userHasAllPets && userHasAllMounts'
-  )
+<template>
+  <div class="keys-wrap">
+    <shopItem
+      v-if="userHasAllPets"
+      :key="keysToPets.key"
+      :item="keysToPets"
+      :empty-item="false"
+      popover-position="'top'"
+      @click="releasePets()"
+    /><shopItem
+      v-if="userHasAllMounts"
+      :key="keysToMounts.key"
+      :item="keysToMounts"
+      :empty-item="false"
+      popover-position="'top'"
+      @click="releaseMounts()"
+    /><shopItem
+      v-if="userHasAllPets && userHasAllMounts"
+      :key="keysToBoth.key"
+      :item="keysToBoth"
+      :empty-item="false"
+      popover-position="'top'"
+      @click="releaseBoth()"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index 7755cfda65..246c79bbd7 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -1,48 +1,72 @@
-<template lang="pug">
-  b-modal#sell-modal(
-    :hide-header="true",
+<template>
+  <b-modal
+    id="sell-modal"
+    :hide-header="true"
     @change="onChange($event)"
-  )
-    div.close
-      span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close", @click="hideDialog()")
-
-    div.content(v-if="item")
-      div.inner-content
-        item.flat(
-          :item="item",
-          :itemContentClass="itemContextToSell.itemClass",
-          :showPopover="false"
-        )
-          countBadge(
-            slot="itemBadge",
-            :show="true",
+  >
+    <div class="close">
+      <span
+        class="svg-icon inline icon-10"
+        aria-hidden="true"
+        @click="hideDialog()"
+        v-html="icons.close"
+      ></span>
+    </div><div
+      v-if="item"
+      class="content"
+    >
+      <div class="inner-content">
+        <item
+          class="flat"
+          :item="item"
+          :item-content-class="itemContextToSell.itemClass"
+          :show-popover="false"
+        >
+          <countBadge
+            slot="itemBadge"
+            :show="true"
             :count="itemContextToSell.itemCount"
-          )
-
-        h4.title {{ itemContextToSell.itemName }}
-
-        div(v-if="item.key === 'Saddle'")
-          div.text {{ item.sellWarningNote() }}
-          br
-
-        div(v-else)
-          div
-            div.text {{ item.notes() }}
-
-            div
-              b.how-many-to-sell {{ $t('howManyToSell') }}
-
-            div
-              b-input.itemsToSell(type="number", v-model="selectedAmountToSell", :max="itemContextToSell.itemCount", min="1", @keyup.native="preventNegative($event)", step="1")
-
-              span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons.gold")
-              span.value {{ item.value }}
-
-            button.btn.btn-primary(@click="sellItems()") {{ $t('sell') }}
-
-    div.clearfix(slot="modal-footer")
-      span.balance.float-left {{ $t('yourBalance') }}
-      balanceInfo.float-right
+          />
+        </item><h4 class="title">
+          {{ itemContextToSell.itemName }}
+        </h4><div v-if="item.key === 'Saddle'">
+          <div class="text">
+            {{ item.sellWarningNote() }}
+          </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>
+              <b-input
+                v-model="selectedAmountToSell"
+                class="itemsToSell"
+                type="number"
+                :max="itemContextToSell.itemCount"
+                min="1"
+                step="1"
+                @keyup.native="preventNegative($event)"
+              /><span
+                class="svg-icon inline icon-32"
+                aria-hidden="true"
+                v-html="icons.gold"
+              ></span><span class="value">{{ item.value }}</span>
+            </div><button
+              class="btn btn-primary"
+              @click="sellItems()"
+            >
+              {{ $t('sell') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div><div
+      slot="modal-footer"
+      class="clearfix"
+    >
+      <span class="balance float-left">{{ $t('yourBalance') }}</span><balanceInfo class="float-right" />
+    </div>
+  </b-modal>
 </template>
 <style lang="scss">
 
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 28019c3198..6fea62d847 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -1,53 +1,80 @@
-<template lang="pug">
-  b-modal#buy-quest-modal(
-    :hide-header="true",
+<template>
+  <b-modal
+    id="buy-quest-modal"
+    :hide-header="true"
     @change="onChange($event)"
-  )
-    span.badge.badge-pill.badge-dialog(
-      :class="{'item-selected-badge': isPinned}",
-      v-if="withPin",
+  >
+    <span
+      v-if="withPin"
+      class="badge badge-pill badge-dialog"
+      :class="{'item-selected-badge': isPinned}"
       @click.prevent.stop="togglePinned()"
-    )
-      span.svg-icon.inline.color.icon-10(v-html="icons.pin")
-
-    div.close
-      span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close", @click="hideDialog()")
-
-    div.content(v-if="item != null")
-
-      div.inner-content
-        questDialogContent(:item="item")
-
-        .purchase-amount
-          .how-many-to-buy
-            strong {{ $t('howManyToBuy') }}
-          .box
-            input(type='number', min='0', step='1', v-model.number='selectedAmountToBuy')
-          span.svg-icon.inline.icon-32(aria-hidden="true", v-html="currencyIcon")
-          span.value(:class="priceType") {{ item.value }}
-
-        button.btn.btn-primary(
-          @click="purchaseGems()",
+    ><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
+      v-if="item != null"
+      class="content"
+    >
+      <div class="inner-content">
+        <questDialogContent :item="item" /><div class="purchase-amount">
+          <div class="how-many-to-buy">
+            <strong>{{ $t('howManyToBuy') }}</strong>
+          </div><div class="box">
+            <input
+              v-model.number="selectedAmountToBuy"
+              type="number"
+              min="0"
+              step="1"
+            >
+          </div><span
+            class="svg-icon inline icon-32"
+            aria-hidden="true"
+            v-html="currencyIcon"
+          ></span><span
+            class="value"
+            :class="priceType"
+          >{{ item.value }}</span>
+        </div><button
           v-if="priceType === 'gems' && !this.enoughCurrency(priceType, item.value * selectedAmountToBuy)"
-        ) {{ $t('purchaseGems') }}
-
-        button.btn.btn-primary(
-          @click="buyItem()",
-          v-else,
-          :class="{'notEnough': !this.enoughCurrency(priceType, item.value * selectedAmountToBuy)}",
-          :disabled='numberInvalid',
-        ) {{ $t('buyNow') }}
-
-    div.right-sidebar(v-if="item.drop")
-      questDialogDrops(:item="item")
-
-    div.clearfix(slot="modal-footer")
-      span.balance.float-left {{ $t('yourBalance') }}
-      balanceInfo(
-        :withHourglass="priceType === 'hourglasses'",
-        :currencyNeeded="priceType",
-        :amountNeeded="item.value"
-      ).float-right
+          class="btn btn-primary"
+          @click="purchaseGems()"
+        >
+          {{ $t('purchaseGems') }}
+        </button><button
+          v-else
+          class="btn btn-primary"
+          :class="{'notEnough': !this.enoughCurrency(priceType, item.value * selectedAmountToBuy)}"
+          :disabled="numberInvalid"
+          @click="buyItem()"
+        >
+          {{ $t('buyNow') }}
+        </button>
+      </div>
+    </div><div
+      v-if="item.drop"
+      class="right-sidebar"
+    >
+      <questDialogDrops :item="item" />
+    </div><div
+      slot="modal-footer"
+      class="clearfix"
+    >
+      <span class="balance float-left">{{ $t('yourBalance') }}</span><balanceInfo
+        class="float-right"
+        :with-hourglass="priceType === 'hourglasses'"
+        :currency-needed="priceType"
+        :amount-needed="item.value"
+      />
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/shops/quests/index.vue b/website/client/src/components/shops/quests/index.vue
index 56dd8711b6..4262380a04 100644
--- a/website/client/src/components/shops/quests/index.vue
+++ b/website/client/src/components/shops/quests/index.vue
@@ -1,194 +1,280 @@
-<template lang="pug">
-  .row.quests
-    .standard-sidebar.d-none.d-sm-block
-      .form-group
-        input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
-
-      .form
-        h2(v-once) {{ $t('filter') }}
-        .form-group
-          .form-check(
-            v-for="category in categories",
-            :key="category.identifier",
-          )
-            .custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
-              label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
-
-        div.form-group.clearfix
-          h3.float-left(v-once) {{ $t('hideLocked') }}
-          toggle-switch.float-right(
-            v-model="hideLocked",
-          )
-        div.form-group.clearfix
-          h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right(
-            v-model="hidePinned",
-          )
-    .standard-page
-      div.featuredItems
-        .background(:class="{broken: broken}")
-        .background(:class="{cracked: broken, broken: broken}")
-          div.npc
-            div.featured-label
-              span.rectangle
-              span.text Ian
-              span.rectangle
-          div.content
-            div.featured-label.with-border
-              span.rectangle
-              span.text {{ shop.featured.text }}
-              span.rectangle
-
-            div.items.margin-center
-              shopItem(
-                v-for="item in shop.featured.items",
-                :key="item.key",
-                :item="item",
-                :price="item.goldValue ? item.goldValue : item.value",
-                :priceType="item.goldValue ? 'gold' : 'gem'",
-                :itemContentClass="'inventory_quest_scroll_'+item.key",
-                :emptyItem="false",
-                :popoverPosition="'top'",
+<template>
+  <div class="row quests">
+    <div class="standard-sidebar d-none d-sm-block">
+      <div class="form-group">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><div class="form">
+        <h2 v-once>
+          {{ $t('filter') }}
+        </h2><div class="form-group">
+          <div
+            v-for="category in categories"
+            :key="category.identifier"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="`category-${category.identifier}`"
+                v-model="viewOptions[category.identifier].selected"
+                class="custom-control-input"
+                type="checkbox"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="`category-${category.identifier}`"
+              >{{ category.text }}</label>
+            </div>
+          </div>
+        </div><div class="form-group clearfix">
+          <h3
+            v-once
+            class="float-left"
+          >
+            {{ $t('hideLocked') }}
+          </h3><toggle-switch
+            v-model="hideLocked"
+            class="float-right"
+          />
+        </div><div class="form-group clearfix">
+          <h3
+            v-once
+            class="float-left"
+          >
+            {{ $t('hidePinned') }}
+          </h3><toggle-switch
+            v-model="hidePinned"
+            class="float-right"
+          />
+        </div>
+      </div>
+    </div><div class="standard-page">
+      <div class="featuredItems">
+        <div
+          class="background"
+          :class="{broken: broken}"
+        ></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>
+            </div>
+          </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">
+              <shopItem
+                v-for="item in shop.featured.items"
+                :key="item.key"
+                :item="item"
+                :price="item.goldValue ? item.goldValue : item.value"
+                :price-type="item.goldValue ? 'gold' : 'gem'"
+                :item-content-class="'inventory_quest_scroll_'+item.key"
+                :empty-item="false"
+                :popover-position="'top'"
                 @click="selectItem(item)"
-              )
-                template(slot="itemBadge", slot-scope="ctx")
-                  span.badge.badge-pill.badge-item.badge-svg(
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
+              >
+                <template
+                  slot="itemBadge"
+                  slot-scope="ctx"
+                >
+                  <span
+                    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.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
-
-      h1.mb-4.page-header(v-once) {{ $t('quests') }}
-
-      .clearfix
-        div.float-right
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t(selectedSortItemsBy)", right=true)
-            b-dropdown-item(
-              v-for="sort in sortItemsBy",
-              @click="selectedSortItemsBy = sort",
-              :active="selectedSortItemsBy === sort",
+                  ><span
+                    class="svg-icon inline icon-12 color"
+                    v-html="icons.pin"
+                  ></span></span>
+                </template>
+              </shopItem>
+            </div>
+          </div>
+        </div>
+      </div><h1
+        v-once
+        class="mb-4 page-header"
+      >
+        {{ $t('quests') }}
+      </h1><div class="clearfix">
+        <div class="float-right">
+          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+            :text="$t(selectedSortItemsBy)"
+            right="right"
+          >
+            <b-dropdown-item
+              v-for="sort in sortItemsBy"
               :key="sort"
-            ) {{ $t(sort) }}
-
-
-      div(
-        v-for="category in categories",
+              :active="selectedSortItemsBy === sort"
+              @click="selectedSortItemsBy = sort"
+            >
+              {{ $t(sort) }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </div>
+      </div><div
+        v-for="category in categories"
         v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
-      )
-        h2.mb-3 {{ category.text }}
-
-        itemRows(
-          v-if="category.identifier === 'pet'",
-          :items="questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)",
-          :itemWidth=94,
-          :itemMargin=24,
-          :type="'pet_quests'",
-        )
-          template(slot="item", slot-scope="ctx")
-            shopItem(
-              :key="ctx.item.key",
-              :item="ctx.item",
-              :price="ctx.item.value",
-              :priceType="ctx.item.currency",
-              :itemContentClass="ctx.item.class",
-              :emptyItem="false",
+      >
+        <h2 class="mb-3">
+          {{ category.text }}
+        </h2><itemRows
+          v-if="category.identifier === 'pet'"
+          :items="questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)"
+          :item-width="94"
+          :item-margin="24"
+          :type="'pet_quests'"
+        >
+          <template
+            slot="item"
+            slot-scope="ctx"
+          >
+            <shopItem
+              :key="ctx.item.key"
+              :item="ctx.item"
+              :price="ctx.item.value"
+              :price-type="ctx.item.currency"
+              :item-content-class="ctx.item.class"
+              :empty-item="false"
               @click="selectItem(ctx.item)"
-            )
-              span(slot="popoverContent", slot-scope="ctx")
-                div.questPopover
-                  h4.popover-content-title {{ ctx.item.text }}
-                  questInfo(:quest="ctx.item")
-
-              template(slot="itemBadge", slot-scope="ctx")
-                span.badge.badge-pill.badge-item.badge-svg(
-                  :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
+            >
+              <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
+                slot="itemBadge"
+                slot-scope="ctx"
+              >
+                <span
+                  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.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
-                countBadge(
-                  :show="userItems.quests[ctx.item.key] > 0",
+                ><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"
-                )
-
-        div.grouped-parent(v-else-if="category.identifier === 'unlockable' || category.identifier === 'gold'")
-          div.group(v-for="(items, key) in getGrouped(questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned))", v-if="key !== 'questGroupEarnable'")
-            h3 {{ $t(key) }}
-            div.items
-              shopItem(
-                v-for="item in items",
-                :key="item.key",
-                :item="item",
-                :price="item.value",
-                :emptyItem="false",
-                :popoverPosition="'top'",
+                />
+              </template>
+            </shopItem>
+          </template>
+        </itemRows><div
+          v-else-if="category.identifier === 'unlockable' || category.identifier === 'gold'"
+          class="grouped-parent"
+        >
+          <div
+            v-for="(items, key) in getGrouped(questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned))"
+            v-if="key !== 'questGroupEarnable'"
+            class="group"
+          >
+            <h3>{{ $t(key) }}</h3><div class="items">
+              <shopItem
+                v-for="item in items"
+                :key="item.key"
+                :item="item"
+                :price="item.value"
+                :empty-item="false"
+                :popover-position="'top'"
                 @click="selectItem(item)"
-              )
-                span(slot="popoverContent")
-                  div.questPopover
-                    div
-                    h4.popover-content-title(v-if='item.locked') {{ `${$t('lockedItem')}` }}
-                    h4.popover-content-title(v-else) {{ item.text }}
-                    .popover-content-text(v-if='item.locked && item.key === "lostMasterclasser1"') {{ `${$t('questUnlockLostMasterclasser')}` }}
-                    .popover-content-text(v-if='item.locked && item.unlockCondition && item.unlockCondition.incentiveThreshold') {{ `${$t('loginIncentiveQuest', {count: item.unlockCondition.incentiveThreshold})}` }}
-                    .popover-content-text(v-if='item.locked && item.previous && isBuyingDependentOnPrevious(item)') {{ `${$t('unlockByQuesting', {title: item.previous})}` }}
-                    .popover-content-text(v-if='item.lvl > user.stats.lvl') {{ `${$t('mustLvlQuest', {level: item.lvl})}` }}
-                    questInfo(v-if='!item.locked', :quest="item")
-
-                template(slot="itemBadge", slot-scope="ctx")
-                  span.badge.badge-pill.badge-item.badge-svg(
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
+              >
+                <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"
+                >
+                  <span
+                    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.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
-                  countBadge(
-                    :show="userItems.quests[ctx.item.key] > 0",
+                  ><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"
-                  )
-
-        div.items(v-else)
-          shopItem(
-            v-for="item in questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)",
-            :key="item.key",
-            :item="item",
-            :price="item.value",
-            :emptyItem="false",
-            :popoverPosition="'top'",
+                  />
+                </template>
+              </shopItem>
+            </div>
+          </div>
+        </div><div
+          v-else
+          class="items"
+        >
+          <shopItem
+            v-for="item in questItems(category, selectedSortItemsBy, searchTextThrottled, hideLocked, hidePinned)"
+            :key="item.key"
+            :item="item"
+            :price="item.value"
+            :empty-item="false"
+            :popover-position="'top'"
             @click="selectItem(item)"
-          )
-            span(slot="popoverContent")
-              div.questPopover
-                h4.popover-content-title {{ item.text }}
-                questInfo(:quest="item")
-
-            template(slot="itemBadge", slot-scope="ctx")
-              span.badge.badge-pill.badge-item.badge-svg(
-                :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
+          >
+            <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"
+            >
+              <span
+                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.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
-              countBadge(
-                :show="userItems.quests[ctx.item.key] > 0",
+              ><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"
-              )
-
-    buyModal(
-      :item="selectedItemToBuy || {}",
-      :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
-      :withPin="true",
-      @change="resetItemToBuy($event)",
-    )
-      template(slot="item", slot-scope="ctx")
-        item.flat(
-          :item="ctx.item",
-          :itemContentClass="ctx.item.class",
-          :showPopover="false"
-        )
+              />
+            </template>
+          </shopItem>
+        </div>
+      </div>
+    </div><buyModal
+      :item="selectedItemToBuy || {}"
+      :price-type="selectedItemToBuy ? selectedItemToBuy.currency : ''"
+      :with-pin="true"
+      @change="resetItemToBuy($event)"
+    >
+      <template
+        slot="item"
+        slot-scope="ctx"
+      >
+        <item
+          class="flat"
+          :item="ctx.item"
+          :item-content-class="ctx.item.class"
+          :show-popover="false"
+        />
+      </template>
+    </buyModal>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/shops/quests/questDialogContent.vue b/website/client/src/components/shops/quests/questDialogContent.vue
index c84ccf45dc..617a4532d2 100644
--- a/website/client/src/components/shops/quests/questDialogContent.vue
+++ b/website/client/src/components/shops/quests/questDialogContent.vue
@@ -1,11 +1,18 @@
-<template lang="pug">
-  div.quest-content
-    .quest-image(:class="'quest_' + item.key")
-
-    h4.title {{ itemText }}
-    div.text(v-html="itemNotes")
-
-    questInfo.questInfo(:quest="item")
+<template>
+  <div class="quest-content">
+    <div
+      class="quest-image"
+      :class="'quest_' + item.key"
+    ></div><h4 class="title">
+      {{ itemText }}
+    </h4><div
+      class="text"
+      v-html="itemNotes"
+    ></div><questInfo
+      class="questInfo"
+      :quest="item"
+    />
+  </div>
 </template>
 
 
diff --git a/website/client/src/components/shops/quests/questDialogDrops.vue b/website/client/src/components/shops/quests/questDialogDrops.vue
index 4db7e3e32e..f9baf02175 100644
--- a/website/client/src/components/shops/quests/questDialogDrops.vue
+++ b/website/client/src/components/shops/quests/questDialogDrops.vue
@@ -1,23 +1,45 @@
-<template lang="pug">
-  div.questRewards
-    h3.text-center(v-once) {{ $t('rewards') }}
-    div.reward-item
-      span.svg-icon.inline.icon(v-html="icons.experience")
-      span.reward-text {{ $t('amountExperience', { amount: item.drop.exp }) }}
-    div.reward-item(v-if="item.drop.gp != 0")
-      span.svg-icon.inline.icon(v-html="icons.gold")
-      span.reward-text {{ $t('amountGold', { amount: item.drop.gp }) }}
-    div.reward-item(v-for='drop in getDropsList(item.drop.items, false)')
-      span.icon
-        div(:class="getDropIcon(drop)")
-      span.reward-text {{ getDropName(drop) }}
-    div.reward-item.text-center(v-if='item.drop.unlock')
-      span.reward-text {{ item.drop.unlock() }}
-    h3.text-center(v-if='getDropsList(item.drop.items, true).length > 0') {{$t('questOwnerRewards')}}
-    div.reward-item(v-for='drop in getDropsList(item.drop.items, true)')
-      span.icon
-        div(:class="getDropIcon(drop)")
-      span.reward-text {{ getDropName(drop) }}
+<template>
+  <div class="questRewards">
+    <h3
+      v-once
+      class="text-center"
+    >
+      {{ $t('rewards') }}
+    </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
+      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
+      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
+      v-if="item.drop.unlock"
+      class="reward-item text-center"
+    >
+      <span class="reward-text">{{ item.drop.unlock() }}</span>
+    </div><h3
+      v-if="getDropsList(item.drop.items, true).length > 0"
+      class="text-center"
+    >
+      {{ $t('questOwnerRewards') }}
+    </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>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/shops/quests/questInfo.vue b/website/client/src/components/shops/quests/questInfo.vue
index a110d296f5..3de5829439 100644
--- a/website/client/src/components/shops/quests/questInfo.vue
+++ b/website/client/src/components/shops/quests/questInfo.vue
@@ -1,22 +1,33 @@
-<template lang="pug">
-.row(:class="{'small-version': smallVersion}")
-  .table-row(v-if="quest.collect")
-    dt {{ $t('collect') + ':' }}
-    dd
-      div(v-for="(collect, key) of quest.collect")
-        span {{ collect.count }} {{ getCollectText(collect) }}
-
-  .table-row(v-if="quest.boss")
-    dt {{ $t('bossHP') + ':' }}
-    dd {{ quest.boss.hp }}
-
-  .table-row
-    dt {{ $t('difficulty') + ':' }}
-    dd
-      .svg-icon.inline(
-        v-for="star of stars()", v-html="icons[star]",
-        :class="smallVersion ? 'icon-12' : 'icon-16'",
-      )
+<template>
+  <div
+    class="row"
+    :class="{'small-version': smallVersion}"
+  >
+    <div
+      v-if="quest.collect"
+      class="table-row"
+    >
+      <dt>{{ $t('collect') + ':' }}</dt><dd>
+        <div v-for="(collect, key) of quest.collect">
+          <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
+        </div>
+      </dd>
+    </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>
+        <div
+          v-for="star of stars()"
+          class="svg-icon inline"
+          :class="smallVersion ? 'icon-12' : 'icon-16'"
+          v-html="icons[star]"
+        ></div>
+      </dd>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/shops/seasonal/index.vue b/website/client/src/components/shops/seasonal/index.vue
index 6c570fcc6e..b9379c561a 100644
--- a/website/client/src/components/shops/seasonal/index.vue
+++ b/website/client/src/components/shops/seasonal/index.vue
@@ -1,107 +1,169 @@
-<template lang="pug">
-  .row.seasonal
-    .standard-sidebar.d-none.d-sm-block
-      .form-group
-        input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
-
-      .form
-        h2(v-once) {{ $t('filter') }}
-        .form-group
-          checkbox(
-            v-for="category in filterCategories",
-            :key="category.key",
-            :id="`category-${category.key}`",
-            :checked.sync="viewOptions[category.key].selected",
+<template>
+  <div class="row seasonal">
+    <div class="standard-sidebar d-none d-sm-block">
+      <div class="form-group">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><div class="form">
+        <h2 v-once>
+          {{ $t('filter') }}
+        </h2><div class="form-group">
+          <checkbox
+            v-for="category in filterCategories"
+            :id="`category-${category.key}`"
+            :key="category.key"
+            :checked.sync="viewOptions[category.key].selected"
             :text="category.value"
-          )
-
-        div.form-group.clearfix
-          h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right(
-            v-model="hidePinned",
-          )
-    .standard-page
-      div.featuredItems
-        .background(:class="{opened: seasonal.opened}")
-          div.npc
-            div.featured-label
-              span.rectangle
-              span.text Leslie
-              span.rectangle
-          div.content(v-if="!seasonal.opened")
-            div.featured-label.with-border.closed
-              span.rectangle
-              span.text(v-if="!broken", v-html="seasonal.notes")
-              span.text(v-if="broken") {{ $t('seasonalShopBrokenText') }}
-              span.rectangle
-          div.content(v-else-if="seasonal.featured.items.length !== 0")
-            div.featured-label.with-border(v-if='!featuredGearBought')
-              span.rectangle
-              span.text(v-once) {{ $t('featuredset', { name: seasonal.featured.text }) }}
-              span.rectangle
-            div.featured-label.with-border(v-else)
-              span.rectangle
-              span.text(v-once) {{ $t('featuredItems') }}
-              span.rectangle
-
-            div.items.margin-center
-              shopItem(
-                v-for="item in seasonal.featured.items",
-                :key="item.key",
-                :item="item",
-                :price="item.value",
-                :emptyItem="false",
-                :popoverPosition="'top'",
-                :showEventBadge="false",
+          />
+        </div><div class="form-group clearfix">
+          <h3
+            v-once
+            class="float-left"
+          >
+            {{ $t('hidePinned') }}
+          </h3><toggle-switch
+            v-model="hidePinned"
+            class="float-right"
+          />
+        </div>
+      </div>
+    </div><div class="standard-page">
+      <div class="featuredItems">
+        <div
+          class="background"
+          :class="{opened: seasonal.opened}"
+        >
+          <div class="npc">
+            <div class="featured-label">
+              <span class="rectangle"></span><span class="text">Leslie</span><span class="rectangle"></span>
+            </div>
+          </div><div
+            v-if="!seasonal.opened"
+            class="content"
+          >
+            <div class="featured-label with-border closed">
+              <span class="rectangle"></span><span
+                v-if="!broken"
+                class="text"
+                v-html="seasonal.notes"
+              ></span><span
+                v-if="broken"
+                class="text"
+              >{{ $t('seasonalShopBrokenText') }}</span><span class="rectangle"></span>
+            </div>
+          </div><div
+            v-else-if="seasonal.featured.items.length !== 0"
+            class="content"
+          >
+            <div
+              v-if="!featuredGearBought"
+              class="featured-label with-border"
+            >
+              <span class="rectangle"></span><span
+                v-once
+                class="text"
+              >{{ $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
+                v-once
+                class="text"
+              >{{ $t('featuredItems') }}</span><span class="rectangle"></span>
+            </div><div class="items margin-center">
+              <shopItem
+                v-for="item in seasonal.featured.items"
+                :key="item.key"
+                :item="item"
+                :price="item.value"
+                :empty-item="false"
+                :popover-position="'top'"
+                :show-event-badge="false"
                 @click="itemSelected(item)"
-              )
-
-      h1.mb-4.page-header(v-once, v-if='seasonal.opened') {{ $t('seasonalShop') }}
-
-      .clearfix(v-if="seasonal.opened")
-        h2.float-left.mb-3
-          | {{ $t('classArmor') }}
-
-        div.float-right
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t(selectedSortItemsBy)", right=true)
-            b-dropdown-item(
-              v-for="sort in sortItemsBy",
-              @click="selectedSortItemsBy = sort",
-              :active="selectedSortItemsBy === sort",
+              />
+            </div>
+          </div>
+        </div>
+      </div><h1
+        v-if="seasonal.opened"
+        v-once
+        class="mb-4 page-header"
+      >
+        {{ $t('seasonalShop') }}
+      </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
+            :text="$t(selectedSortItemsBy)"
+            right="right"
+          >
+            <b-dropdown-item
+              v-for="sort in sortItemsBy"
               :key="sort"
-            ) {{ $t(sort) }}
-
-
-      div(
-        v-for="(groupSets, categoryGroup) in getGroupedCategories(categories)",
-      )
-        h3.classgroup(v-if='categoryGroup !== "spells" && categoryGroup !== "quests"')
-          span.svg-icon.inline(v-html="icons[categoryGroup]")
-          span.name(:class="categoryGroup") {{ getClassName(categoryGroup) }}
-
-        div.grouped-parent
-          div.group(
+              :active="selectedSortItemsBy === sort"
+              @click="selectedSortItemsBy = sort"
+            >
+              {{ $t(sort) }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </div>
+      </div><div v-for="(groupSets, categoryGroup) in getGroupedCategories(categories)">
+        <h3
+          v-if="categoryGroup !== 'spells' && categoryGroup !== 'quests'"
+          class="classgroup"
+        >
+          <span
+            class="svg-icon inline"
+            v-html="icons[categoryGroup]"
+          ></span><span
+            class="name"
+            :class="categoryGroup"
+          >{{ getClassName(categoryGroup) }}</span>
+        </h3><div class="grouped-parent">
+          <div
             v-for="category in groupSets"
-          )
-            h3 {{ category.text }}
-            div.items
-              shopItem(
-                v-for="item in seasonalItems(category, selectedSortItemsBy, searchTextThrottled, viewOptions, hidePinned)",
-                :key="item.key",
-                :item="item",
-                :price="item.value",
-                :emptyItem="false",
-                :popoverPosition="'top'",
-                :showEventBadge="false",
+            class="group"
+          >
+            <h3>{{ category.text }}</h3><div class="items">
+              <shopItem
+                v-for="item in seasonalItems(category, selectedSortItemsBy, searchTextThrottled, viewOptions, hidePinned)"
+                :key="item.key"
+                :item="item"
+                :price="item.value"
+                :empty-item="false"
+                :popover-position="'top'"
+                :show-event-badge="false"
                 @click="itemSelected(item)"
-              )
-                template(slot="itemBadge", slot-scope="ctx")
-                  span.badge.badge-pill.badge-item.badge-svg(
-                    :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
+              >
+                <template
+                  slot="itemBadge"
+                  slot-scope="ctx"
+                >
+                  <span
+                    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.svg-icon.inline.icon-12.color(v-html="icons.pin")
+                  ><span
+                    class="svg-icon inline icon-12 color"
+                    v-html="icons.pin"
+                  ></span></span>
+                </template>
+              </shopItem>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue
index 381b2cbe3d..3fda43a4f6 100644
--- a/website/client/src/components/shops/shopItem.vue
+++ b/website/client/src/components/shops/shopItem.vue
@@ -1,44 +1,100 @@
-<template lang="pug">
-div
-  .item-wrapper(@click="click()", :id="itemId")
-    .item(:class="getItemClasses()")
-      slot(name="itemBadge", :item="item", :emptyItem="emptyItem")
-
-      span.badge.badge-pill.badge-item.badge-clock(
-        v-if="item.event && item.owned == null && showEventBadge",
-      )
-        span.svg-icon.inline.clock(v-html="icons.clock")
-
-      div.shop-content
-        span.svg-icon.inline.lock(v-if="item.locked" v-html="icons.lock")
-        span.suggestedDot(v-if="item.isSuggested")
-
-        div.image
-          div(:class="item.class", v-once)
-          slot(name="itemImage", :item="item")
-
-        div.price
-          span.svg-icon.inline.icon-16(v-html="icons[currencyClass]", v-once)
-          span.price-label(:class="currencyClass", v-once) {{ getPrice() }}
-  b-popover(
-    :target="itemId",
-    v-if="showPopover",
-    triggers="hover",
-    :placement="popoverPosition",
-  )
-    slot(name="popoverContent", :item="item")
-      equipmentAttributesPopover(
-        v-if="item.purchaseType === 'gear'",
+<template>
+  <div>
+    <div
+      :id="itemId"
+      class="item-wrapper"
+      @click="click()"
+    >
+      <div
+        class="item"
+        :class="getItemClasses()"
+      >
+        <slot
+          name="itemBadge"
+          :item="item"
+          :emptyItem="emptyItem"
+        ></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
+            v-if="item.locked"
+            class="svg-icon inline lock"
+            v-html="icons.lock"
+          ></span><span
+            v-if="item.isSuggested"
+            class="suggestedDot"
+          ></span><div class="image">
+            <div
+              v-once
+              :class="item.class"
+            ></div><slot
+              name="itemImage"
+              :item="item"
+            ></slot>
+          </div><div class="price">
+            <span
+              v-once
+              class="svg-icon inline icon-16"
+              v-html="icons[currencyClass]"
+            ></span><span
+              v-once
+              class="price-label"
+              :class="currencyClass"
+            >{{ getPrice() }}</span>
+          </div>
+        </div>
+      </div>
+    </div><b-popover
+      v-if="showPopover"
+      :target="itemId"
+      triggers="hover"
+      :placement="popoverPosition"
+    >
+      <slot
+        name="popoverContent"
         :item="item"
-      )
-      div.questPopover(v-else-if="item.purchaseType === 'quests'")
-        h4.popover-content-title {{ item.text }}
-        questInfo(:quest="item")
-      div(v-else)
-        h4.popover-content-title(v-once) {{ item.text }}
-        .popover-content-text(v-if='showNotes && item.key !== "armoire"', v-once) {{ item.notes }}
-        .popover-content-text(v-if='showNotes && item.key === "armoire"') {{ item.notes }}
-      div.mt-4(v-if="item.event") {{ limitedString }}
+      >
+        <equipmentAttributesPopover
+          v-if="item.purchaseType === 'gear'"
+          :item="item"
+        /><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
+            v-once
+            class="popover-content-title"
+          >
+            {{ item.text }}
+          </h4><div
+            v-if="showNotes && item.key !== 'armoire'"
+            v-once
+            class="popover-content-text"
+          >
+            {{ item.notes }}
+          </div><div
+            v-if="showNotes && item.key === 'armoire'"
+            class="popover-content-text"
+          >
+            {{ item.notes }}
+          </div>
+        </div><div
+          v-if="item.event"
+          class="mt-4"
+        >
+          {{ limitedString }}
+        </div>
+      </slot>
+    </b-popover>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/shops/timeTravelers/index.vue b/website/client/src/components/shops/timeTravelers/index.vue
index 91fda43f44..4b452346f4 100644
--- a/website/client/src/components/shops/timeTravelers/index.vue
+++ b/website/client/src/components/shops/timeTravelers/index.vue
@@ -1,100 +1,167 @@
-<template lang="pug">
-  .row.timeTravelers
-    .standard-sidebar.d-none.d-sm-block(v-if="!closed")
-      .form-group
-        input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
-
-      .form
-        h2(v-once) {{ $t('filter') }}
-        .form-group
-          .form-check(
-            v-for="category in categories",
-            :key="category.identifier",
-          )
-            .custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", v-model="viewOptions[category.identifier].selected", :id="`category-${category.identifier}`")
-              label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
-
-        div.form-group.clearfix
-          h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right(
-            v-model="hidePinned",
-          )
-    .standard-page
-      div.featuredItems
-        .background(:class="{'background-closed': closed, 'background-open': !closed }")
-          div.npc(:class="{'closed': closed }")
-            div.featured-label
-              span.rectangle
-              span.text(v-once) {{ $t('timeTravelers') }}
-              span.rectangle
-          div.content(v-if="closed")
-            div.featured-label.with-border.closed
-              span.rectangle
-              span.text(v-once) {{ $t('timeTravelersPopoverNoSubMobile') }}
-              span.rectangle
-
-      .clearfix(v-if="!closed")
-        div.float-right
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t(selectedSortItemsBy)", right=true)
-            b-dropdown-item(
-              v-for="sort in sortItemsBy",
-              @click="selectedSortItemsBy = sort",
-              :active="selectedSortItemsBy === sort",
+<template>
+  <div class="row timeTravelers">
+    <div
+      v-if="!closed"
+      class="standard-sidebar d-none d-sm-block"
+    >
+      <div class="form-group">
+        <input
+          v-model="searchText"
+          class="form-control input-search"
+          type="text"
+          :placeholder="$t('search')"
+        >
+      </div><div class="form">
+        <h2 v-once>
+          {{ $t('filter') }}
+        </h2><div class="form-group">
+          <div
+            v-for="category in categories"
+            :key="category.identifier"
+            class="form-check"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="`category-${category.identifier}`"
+                v-model="viewOptions[category.identifier].selected"
+                class="custom-control-input"
+                type="checkbox"
+              ><label
+                v-once
+                class="custom-control-label"
+                :for="`category-${category.identifier}`"
+              >{{ category.text }}</label>
+            </div>
+          </div>
+        </div><div class="form-group clearfix">
+          <h3
+            v-once
+            class="float-left"
+          >
+            {{ $t('hidePinned') }}
+          </h3><toggle-switch
+            v-model="hidePinned"
+            class="float-right"
+          />
+        </div>
+      </div>
+    </div><div class="standard-page">
+      <div class="featuredItems">
+        <div
+          class="background"
+          :class="{'background-closed': closed, 'background-open': !closed }"
+        >
+          <div
+            class="npc"
+            :class="{'closed': closed }"
+          >
+            <div class="featured-label">
+              <span class="rectangle"></span><span
+                v-once
+                class="text"
+              >{{ $t('timeTravelers') }}</span><span class="rectangle"></span>
+            </div>
+          </div><div
+            v-if="closed"
+            class="content"
+          >
+            <div class="featured-label with-border closed">
+              <span class="rectangle"></span><span
+                v-once
+                class="text"
+              >{{ $t('timeTravelersPopoverNoSubMobile') }}</span><span class="rectangle"></span>
+            </div>
+          </div>
+        </div>
+      </div><div
+        v-if="!closed"
+        class="clearfix"
+      >
+        <div class="float-right">
+          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+            :text="$t(selectedSortItemsBy)"
+            right="right"
+          >
+            <b-dropdown-item
+              v-for="sort in sortItemsBy"
               :key="sort"
-            ) {{ $t(sort) }}
-
-
-      div(
-        v-for="category in categories",
-        v-if="!anyFilterSelected  || (!closed && viewOptions[category.identifier].selected)",
+              :active="selectedSortItemsBy === sort"
+              @click="selectedSortItemsBy = sort"
+            >
+              {{ $t(sort) }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </div>
+      </div><div
+        v-for="category in categories"
+        v-if="!anyFilterSelected || (!closed && viewOptions[category.identifier].selected)"
         :class="category.identifier"
-      )
-        h2.mb-3 {{ category.text }}
-
-        itemRows(
-          :items="travelersItems(category, selectedSortItemsBy, searchTextThrottled, hidePinned)",
-          :itemWidth=94,
-          :itemMargin=24,
-          :type="category.identifier",
-        )
-          template(slot="item", slot-scope="ctx")
-            shopItem(
-              :key="ctx.item.key",
-              :item="ctx.item",
-              :price="ctx.item.value",
-              :priceType="ctx.item.currency",
-              :emptyItem="false",
+      >
+        <h2 class="mb-3">
+          {{ category.text }}
+        </h2><itemRows
+          :items="travelersItems(category, selectedSortItemsBy, searchTextThrottled, hidePinned)"
+          :item-width="94"
+          :item-margin="24"
+          :type="category.identifier"
+        >
+          <template
+            slot="item"
+            slot-scope="ctx"
+          >
+            <shopItem
+              :key="ctx.item.key"
+              :item="ctx.item"
+              :price="ctx.item.value"
+              :price-type="ctx.item.currency"
+              :empty-item="false"
               @click="selectItemToBuy(ctx.item)"
-            )
-              span(slot="popoverContent", slot-scope="ctx", v-if="category !== 'quests'")
-                div
-                  h4.popover-content-title {{ ctx.item.text }}
-              span(slot="popoverContent", slot-scope="ctx", v-if="category === 'quests'")
-                div.questPopover
-                  h4.popover-content-title {{ item.text }}
-                  questInfo(:quest="item")
-
-              template(slot="itemBadge", slot-scope="ctx")
-                span.badge.badge-pill.badge-item.badge-svg(
-                  v-if="ctx.item.pinType !== 'IGNORE'",
-                  :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.item.pinned}",
+            >
+              <span
+                v-if="category !== 'quests'"
+                slot="popoverContent"
+                slot-scope="ctx"
+              ><div><h4 class="popover-content-title">{{ ctx.item.text }}</h4></div></span><span
+                v-if="category === 'quests'"
+                slot="popoverContent"
+                slot-scope="ctx"
+              ><div class="questPopover"><h4 class="popover-content-title">{{ item.text }}</h4><questInfo :quest="item" /></div></span><template
+                slot="itemBadge"
+                slot-scope="ctx"
+              >
+                <span
+                  v-if="ctx.item.pinType !== 'IGNORE'"
+                  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.svg-icon.inline.icon-12.color(v-html="icons.pin")
-    buyQuestModal(
-      :item="selectedItemToBuy || {}",
-      :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
-      :withPin="true",
-      @change="resetItemToBuy($event)",
-    )
-      template(slot="item", slot-scope="ctx")
-        item.flat(
-          :item="ctx.item",
-          :itemContentClass="ctx.item.class",
-          :showPopover="false"
-        )
+                ><span
+                  class="svg-icon inline icon-12 color"
+                  v-html="icons.pin"
+                ></span></span>
+              </template>
+            </shopItem>
+          </template>
+        </itemRows>
+      </div>
+    </div><buyQuestModal
+      :item="selectedItemToBuy || {}"
+      :price-type="selectedItemToBuy ? selectedItemToBuy.currency : ''"
+      :with-pin="true"
+      @change="resetItemToBuy($event)"
+    >
+      <template
+        slot="item"
+        slot-scope="ctx"
+      >
+        <item
+          class="flat"
+          :item="ctx.item"
+          :item-content-class="ctx.item.class"
+          :show-popover="false"
+        />
+      </template>
+    </buyQuestModal>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/sidebarSection.vue b/website/client/src/components/sidebarSection.vue
index c7e1033370..3f661ca13f 100644
--- a/website/client/src/components/sidebarSection.vue
+++ b/website/client/src/components/sidebarSection.vue
@@ -1,25 +1,45 @@
-<template lang="pug">
-  .section
-      .section-header.d-flex.align-items-center
-        h3.mb-0(v-once)
-          | {{ title }}
-        .section-info.mx-1(
-          v-if="tooltip !== null"
-        )
-          .svg-icon(
-            v-html='icons.information',
-            :id="tooltipId",
-            :title="tooltip"
-          )
-          b-tooltip(
-            :title="tooltip",
-            :target="tooltipId",
-          )
-        .section-toggle.ml-auto(@click="toggle")
-          .svg-icon(v-html="icons.upIcon", v-if="visible")
-          .svg-icon(v-html="icons.downIcon", v-else)
-      .section-body(v-show="visible")
-        slot
+<template>
+  <div class="section">
+    <div class="section-header d-flex align-items-center">
+      <h3
+        v-once
+        class="mb-0"
+      >
+        {{ title }}
+      </h3><div
+        v-if="tooltip !== null"
+        class="section-info mx-1"
+      >
+        <div
+          :id="tooltipId"
+          class="svg-icon"
+          :title="tooltip"
+          v-html="icons.information"
+        ></div><b-tooltip
+          :title="tooltip"
+          :target="tooltipId"
+        />
+      </div><div
+        class="section-toggle ml-auto"
+        @click="toggle"
+      >
+        <div
+          v-if="visible"
+          class="svg-icon"
+          v-html="icons.upIcon"
+        ></div><div
+          v-else
+          class="svg-icon"
+          v-html="icons.downIcon"
+        ></div>
+      </div>
+    </div><div
+      v-show="visible"
+      class="section-body"
+    >
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/snackbars/notification.vue b/website/client/src/components/snackbars/notification.vue
index adedd06cc6..0cdadaecf0 100644
--- a/website/client/src/components/snackbars/notification.vue
+++ b/website/client/src/components/snackbars/notification.vue
@@ -1,34 +1,76 @@
-<template lang="pug">
-transition(name="fade")
-  .notification.callout.animated(:class="classes", v-if='show', @click='handleOnClick()')
-    .row(v-if='notification.type === "error"')
-      .text.col-12
-        div(v-html='notification.text')
-    .row(v-if='notification.type === "streak"')
-      .text.col-7.offset-1
-        div {{message}}
-      .icon.col-4
-        div.svg-icon(v-html="icons.gold")
-        div(v-html='notification.text')
-    .row(v-if='["hp", "gp", "xp", "mp"].indexOf(notification.type) !== -1')
-      .text.col-7.offset-1
-        div
-          | {{message}}
-      .icon.col-4.d-flex.align-items-center
-        div.svg-icon(v-html="icons.health", v-if='notification.type === "hp"')
-        div.svg-icon(v-html="icons.gold", v-if='notification.type === "gp"')
-        div.svg-icon(v-html="icons.star", v-if='notification.type === "xp"')
-        div.svg-icon(v-html="icons.mana", v-if='notification.type === "mp"')
-        div(v-html='notification.text')
-    .row(v-if='["info", "success", "crit", "lvl"].indexOf(notification.type) !== -1')
-      .text.col-12
-        div(v-html='notification.text')
-    .row(v-if='notification.type === "drop"')
-      .col-3
-        .icon-item
-          div(:class='notification.icon')
-      .text.col-8
-        div(v-html='notification.text')
+<template>
+  <transition name="fade">
+    <div
+      v-if="show"
+      class="notification callout animated"
+      :class="classes"
+      @click="handleOnClick()"
+    >
+      <div
+        v-if="notification.type === 'error'"
+        class="row"
+      >
+        <div class="text col-12">
+          <div v-html="notification.text"></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
+            class="svg-icon"
+            v-html="icons.gold"
+          ></div><div v-html="notification.text"></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
+            v-if="notification.type === 'hp'"
+            class="svg-icon"
+            v-html="icons.health"
+          ></div><div
+            v-if="notification.type === 'gp'"
+            class="svg-icon"
+            v-html="icons.gold"
+          ></div><div
+            v-if="notification.type === 'xp'"
+            class="svg-icon"
+            v-html="icons.star"
+          ></div><div
+            v-if="notification.type === 'mp'"
+            class="svg-icon"
+            v-html="icons.mana"
+          ></div><div v-html="notification.text"></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
+        v-if="notification.type === 'drop'"
+        class="row"
+      >
+        <div class="col-3">
+          <div class="icon-item">
+            <div :class="notification.icon"></div>
+          </div>
+        </div><div class="text col-8">
+          <div v-html="notification.text"></div>
+        </div>
+      </div>
+    </div>
+  </transition>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/snackbars/notifications.vue b/website/client/src/components/snackbars/notifications.vue
index dda24a2a40..3d44089a8a 100644
--- a/website/client/src/components/snackbars/notifications.vue
+++ b/website/client/src/components/snackbars/notifications.vue
@@ -1,7 +1,15 @@
-<template lang="pug">
-.notifications(:class="notificationsTopPos")
-  div(v-for='notification in notificationStore', :key='notification.uuid')
-    notification(:notification='notification')
+<template>
+  <div
+    class="notifications"
+    :class="notificationsTopPos"
+  >
+    <div
+      v-for="notification in notificationStore"
+      :key="notification.uuid"
+    >
+      <notification :notification="notification" />
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/static/app.vue b/website/client/src/components/static/app.vue
index cfcf1fa02a..9467d34f60 100644
--- a/website/client/src/components/static/app.vue
+++ b/website/client/src/components/static/app.vue
@@ -1,11 +1,19 @@
-<template lang="pug">
-  .container-fluid.text-center
-    .row
-      .col-md-6.offset-3
-        h1 {{ $t('checkOutMobileApps') }}
-        .promo_habitica(style='border-radius:25px;margin:auto;margin-bottom:30px')
-
-        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(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')
+<template>
+  <div class="container-fluid text-center">
+    <div class="row">
+      <div class="col-md-6 offset-3">
+        <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
+          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>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/website/client/src/components/static/clearBrowserData.vue b/website/client/src/components/static/clearBrowserData.vue
index ef5de361cf..f3d672d2d6 100644
--- a/website/client/src/components/static/clearBrowserData.vue
+++ b/website/client/src/components/static/clearBrowserData.vue
@@ -1,17 +1,20 @@
-<template lang="pug">
-  .container-fluid.text-center
-    .row
-      .col-md-6.offset-3
-        h1 {{ $t('clearBrowserData') }}
-
-        p(v-html="$t('localStorageTryFirst', localStorageTryFirst) ")
-        br
-        p.text-center
-          button.btn.btn-lg.btn-danger(@click='clearLocalStorage()',
-            popover-trigger='mouseover', :popover="$t('localStorageClearExplanation')")
-            | {{ $t('localStorageClear') }}
-        br
-        p(v-html="$t('localStorageTryNext', localStorageTryNext) ")
+<template>
+  <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">
+          <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>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/static/communityGuidelines.vue b/website/client/src/components/static/communityGuidelines.vue
index 5ba3e721c5..fb10c0983c 100644
--- a/website/client/src/components/static/communityGuidelines.vue
+++ b/website/client/src/components/static/communityGuidelines.vue
@@ -1,206 +1,71 @@
-<template lang="pug">
-  .container-fluid
-    h1 {{ $t('communityGuidelines') }}
-    hr
-    p {{ $t('lastUpdated') }} March 29, 2018
-
-    h2#welcome {{ $t('commGuideHeadingWelcome') }}
-    .media.align-items-center
-      img(src='~@/assets/images/community-guidelines/intro.png')
-      .media-body
-        p(v-html="$t('commGuidePara001')")
-        p(v-html="$t('commGuidePara002')")
-    p(v-html="$t('commGuidePara003')")
-    p(v-html="$t('commGuidePara004')")
-
-    h2#interactions {{ $t('commGuideHeadingInteractions') }}
-    .media.align-items-center
-      .media-body
-        p(v-html="$t('commGuidePara015')")
-        p(v-html="$t('commGuidePara016')")
-      img(src='~@/assets/images/community-guidelines/publicSpaces.png')
-    ul
-      li(v-html="$t('commGuideList02A')")
-      li(v-html="$t('commGuideList02B')")
-      li(v-html="$t('commGuideList02C')")
-      li(v-html="$t('commGuideList02D')")
-      li(v-html="$t('commGuideList02E')")
-      li(v-html="$t('commGuideList02F')")
-      li(v-html="$t('commGuideList02G')")
-      li(v-html="$t('commGuideList02H')")
-      li(v-html="$t('commGuideList02I')")
-      li(v-html="$t('commGuideList02J')")
-      li(v-html="$t('commGuideList02K')")
-      li(v-html="$t('commGuideList02L')")
-    p(v-html="$t('commGuidePara019')")
-    p(v-html="$t('commGuidePara020')")
-    p(v-html="$t('commGuidePara020A')")
-    p(v-html="$t('commGuidePara021')")
-
-    h3#tavern {{ $t('commGuideHeadingTavern') }}
-    .media.align-items-center
-      img(src='~@/assets/images/community-guidelines/tavern.png')
-      .media-body
-        p(v-html="$t('commGuidePara022')")
-        p(v-html="$t('commGuidePara023')")
-        p(v-html="$t('commGuidePara024')")
-    .media.align-items-center
-      .media-body
-        p(v-html="$t('commGuidePara027')")
-      img(src='~@/assets/images/community-guidelines/backCorner.png')
-
-    h3#guilds {{ $t('commGuideHeadingPublicGuilds') }}
-    .media.align-items-center
-      .media-body
-        p(v-html="$t('commGuidePara029')")
-        p(v-html="$t('commGuidePara031')")
-      img(src='~@/assets/images/community-guidelines/publicGuilds.png')
-    p(v-html="$t('commGuidePara033')")
-    p(v-html="$t('commGuidePara035')")
-    p(v-html="$t('commGuidePara036')")
-    p(v-html="$t('commGuidePara037')")
-    p(v-html="$t('commGuidePara038')")
-
-    h2#infractions-consequences-restoration {{ $t('commGuideHeadingInfractionsEtc') }}
-    h3#infractions {{ $t('commGuideHeadingInfractions') }}
-    .media.align-items-center
-      img(src='~@/assets/images/community-guidelines/infractions.png')
-      .media-body
-        p(v-html="$t('commGuidePara050')")
-        p(v-html="$t('commGuidePara051')")
-    h4 {{ $t('commGuideHeadingSevereInfractions') }}
-    p(v-html="$t('commGuidePara052')")
-    p(v-html="$t('commGuidePara053')")
-    ul
-      li(v-html="$t('commGuideList05A')")
-      li(v-html="$t('commGuideList05B')")
-      li(v-html="$t('commGuideList05C')")
-      li(v-html="$t('commGuideList05D')")
-      li(v-html="$t('commGuideList05E')")
-      li(v-html="$t('commGuideList05F')")
-      li(v-html="$t('commGuideList05G')")
-    h4 {{ $t('commGuideHeadingModerateInfractions') }}
-    p(v-html="$t('commGuidePara054')")
-    p(v-html="$t('commGuidePara055')")
-    ul
-      li(v-html="$t('commGuideList06A')")
-      li(v-html="$t('commGuideList06B')")
-      li(v-html="$t('commGuideList06C')")
-      li(v-html="$t('commGuideList06D')")
-      li(v-html="$t('commGuideList06E')")
-    h4 {{ $t('commGuideHeadingMinorInfractions') }}
-    p(v-html="$t('commGuidePara056')")
-    p(v-html="$t('commGuidePara057')")
-    ul
-      li(v-html="$t('commGuideList07A')")
-      li(v-html="$t('commGuideList07B')")
-    p(v-html="$t('commGuidePara057A')")
-
-    h3#consequences {{ $t('commGuideHeadingConsequences') }}
-    .media.align-items-center
-      .media-body
-        p(v-html="$t('commGuidePara058')")
-        p(v-html="$t('commGuidePara059')")
-      img(src='~@/assets/images/community-guidelines/consequences.png')
-    p(v-html="$t('commGuidePara060')")
-    ul
-      li(v-html="$t('commGuideList08A')")
-      li(v-html="$t('commGuideList08B')")
-      li(v-html="$t('commGuideList08C')")
-    p(v-html="$t('commGuidePara060A')")
-    p(v-html="$t('commGuidePara060B')")
-    h4 {{ $t('commGuideHeadingSevereConsequences') }}
-    ul
-      li(v-html="$t('commGuideList09A')")
-      li(v-html="$t('commGuideList09C')")
-    h4 {{ $t('commGuideHeadingModerateConsequences') }}
-    ul
-      li {{ $t('commGuideList10A') }}
-        ul
-          li {{ $t('commGuideList10A1') }}
-      li(v-html="$t('commGuideList10C')")
-      li(v-html="$t('commGuideList10D')")
-      li(v-html="$t('commGuideList10E')")
-      li(v-html="$t('commGuideList10F')")
-    h4 {{ $t('commGuideHeadingMinorConsequences') }}
-    ul
-      li(v-html="$t('commGuideList11A')")
-      li(v-html="$t('commGuideList11B')")
-      li(v-html="$t('commGuideList11C')")
-      li(v-html="$t('commGuideList11D')")
-      li(v-html="$t('commGuideList11E')")
-
-    h3#restoration {{ $t('commGuideHeadingRestoration') }}
-    .media.align-items-center
-      img(src='~@/assets/images/community-guidelines/restoration.png')
-      .media-body
-        p(v-html="$t('commGuidePara061')")
-        p(v-html="$t('commGuidePara062')")
-    p(v-html="$t('commGuidePara063')")
-
-    h2#meet-the-mods {{ $t('commGuideHeadingMeet') }}
-    p(v-html="$t('commGuidePara006')")
-    p(v-html="$t('commGuidePara007')")
-    p(v-html="$t('commGuidePara008')")
-    p(v-html="$t('commGuidePara009')")
-    .media.align-items-center
-      img(src='~@/assets/images/community-guidelines/staff.png')
-      .media-body
-        ul
-          li {{ $t('commGuideAKA', {habitName: 'Beffymaroo', realName: 'Beth'}) }}
-          li {{ $t('commGuideAKA', {habitName: 'Viirus', realName: 'Phillip'}) }}
-          li {{ $t('commGuideAKA', {habitName: 'redphoenix', realName: 'Vicky'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'caffeinatedvee'}) }}, {{ $t('commGuideOnGitHub', {gitHubName: 'veeeeeee'}) }})
-          li {{ $t('commGuideAKA', {habitName: 'Lemoness', realName: 'Leslie'}) }} ({{ $t('commGuideOnTrello', {trelloName: 'lemonesstree'}) }})
-          li {{ $t('commGuideAKA', {habitName: 'SabreCat', realName: 'Sabe'}) }}
-          li {{ $t('commGuideAKA', {habitName: 'paglias', realName: 'Matteo'}) }}
-          li {{ $t('commGuideAKA', {habitName: 'TheHollidayInn', realName: 'Keith'}) }}
-    p(v-html="$t('commGuidePara010')")
-    .media.align-items-center
-      img(src='~@/assets/images/community-guidelines/moderators.png')
-      .media-body
-        p(v-html="$t('commGuidePara011')")
-        ul
-          li Bailey (It's Bailey {{ $t('commGuidePara011a') }})
-          li Ryan (deilann {{ $t('commGuidePara011b') }})
-          li Cantras
-          li Alys (LadyAlys {{ $t('commGuidePara011c') }})
-          li Fox_town
-          li Blade ({{ $t('commGuideOnGitHub', {gitHubName: 'crookedneighbor'}) }})
-          li Daniel the Bard
-          li shanaqui
-          li Dewines
-          li Megan
-          li Breadstrings
-    p(v-html="$t('commGuidePara012')")
-    p(v-html="$t('commGuidePara013')")
-    p {{ $t('commGuidePara014') }}&nbsp;
-      em lefnire, Slappybag, litenull, Shaner, Bobbyroberts99, wc8
-
-    h2#final {{ $t('commGuideHeadingFinal') }}
-    p(v-html="$t('commGuidePara067')")
-    p(v-html="$t('commGuidePara068')")
-
-    h2#links {{ $t('commGuideHeadingLinks') }}
-    ul
-      li(v-html="$t('commGuideLink01')")
-      li(v-html="$t('commGuideLink02')")
-      li(v-html="$t('commGuideLink03')")
-      li(v-html="$t('commGuideLink04')")
-      li(v-html="$t('commGuideLink05')")
-      li(v-html="$t('commGuideLink06')")
-      li(v-html="$t('commGuideLink07')")
-    p(v-html="$t('commGuidePara069')")
-    ul.list-2col.list-unstyled
-      li Breadstrings
-      li Draayder
-      li Kiwibot
-      li Leephon
-      li Lemoness
-      li Luciferian
-      li Revcleo
-      li Shaner
-      li Starsystemic
-      li UncommonCriminal
+<template>
+  <div class="container-fluid">
+    <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">
+      <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">
+      {{ $t('commGuideHeadingPublicGuilds') }}
+    </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">
+      {{ $t('commGuideHeadingInfractionsEtc') }}
+    </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">
+      <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>
+      </div>
+    </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>
+      </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>
+    </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">
+      {{ $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>
+    </ul>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/static/contact.vue b/website/client/src/components/static/contact.vue
index 4ffbb7dc9c..99a31a2c04 100644
--- a/website/client/src/components/static/contact.vue
+++ b/website/client/src/components/static/contact.vue
@@ -1,40 +1,32 @@
-<template lang="pug">
-  .container-fluid
-    .row
-      .col-md-6.offset-3
-        h1 {{ $t('contactUs') }}
-
-        p
-          | {{ $t('reportAccountProblems') }}
-          | &colon;&nbsp;
-          a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
-          br
-          | {{ $t('reportBug') }}
-          | &colon;&nbsp;
-          a(target='_blank', href='/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac') Report a Bug guild
-          | &nbsp;or&nbsp;
-          a(target='_blank', href='https://github.com/HabitRPG/habitica/issues?q=is%3Aopen') GitHub
-          span(v-if='this.user')
-            br
-            | {{ $t('reportCommunityIssues') }}
-            | &colon;&nbsp;
-            a(@click.prevent='modForm()', href='') {{ $t('contactForm') }}
-          br
-          | {{ $t('subscriptionPaymentIssues') }}
-          | &colon;&nbsp;
-          a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
-          br
-          | {{ $t('generalQuestionsSite') }}
-          | &colon;&nbsp;
-          a(target='_blank', href='/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a') Habitica Help guild
-          br
-          | {{ $t('businessInquiries') }}
-          | &colon;&nbsp;
-          a(href='mailto:admin@habitica.com') admin@habitica.com
-          br
-          | {{ $t('merchandiseInquiries') }}
-          | &colon;&nbsp;
-          a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
+<template>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-6 offset-3">
+        <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
+            target="_blank"
+            href="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac"
+          >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=""
+              @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
+            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>
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/static/faq.vue b/website/client/src/components/static/faq.vue
index ab2b5cf803..78bac7a98f 100644
--- a/website/client/src/components/static/faq.vue
+++ b/website/client/src/components/static/faq.vue
@@ -1,14 +1,39 @@
-<template lang="pug">
-  .container-fluid(role="tablist")
-    .row
-      .col-12.col-md-6.offset-md-3
-        h1#faq-heading {{ $t('frequentlyAskedQuestions') }}
-        .faq-question(v-for='(heading, index) in headings', :key="index")
-          h2(role="tab", v-b-toggle="heading", @click="handleClick($event)", variant="info") {{ $t(`faqQuestion${index}`) }}
-          b-collapse(:id="heading", :visible="isVisible(heading)", accordion="faq", role="tabpanel")
-            div.card-body(v-markdown="$t('webFaqAnswer' + index, replacements)")
-        hr
-        p(v-markdown="$t('webFaqStillNeedHelp')")
+<template>
+  <div
+    class="container-fluid"
+    role="tablist"
+  >
+    <div class="row">
+      <div class="col-12 col-md-6 offset-md-3">
+        <h1 id="faq-heading">
+          {{ $t('frequentlyAskedQuestions') }}
+        </h1><div
+          v-for="(heading, index) in headings"
+          :key="index"
+          class="faq-question"
+        >
+          <h2
+            v-b-toggle="heading"
+            role="tab"
+            variant="info"
+            @click="handleClick($event)"
+          >
+            {{ $t(`faqQuestion${index}`) }}
+          </h2><b-collapse
+            :id="heading"
+            :visible="isVisible(heading)"
+            accordion="faq"
+            role="tabpanel"
+          >
+            <div
+              v-markdown="$t('webFaqAnswer' + index, replacements)"
+              class="card-body"
+            ></div>
+          </b-collapse>
+        </div><hr><p v-markdown="$t('webFaqStillNeedHelp')"></p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/static/features.vue b/website/client/src/components/static/features.vue
index efd1d1cd5d..f61c3d8377 100644
--- a/website/client/src/components/static/features.vue
+++ b/website/client/src/components/static/features.vue
@@ -1,76 +1,75 @@
-<template lang="pug">
-  .container-fluid.text-center
-    .row
-      .col-md-12
-        h1 {{ $t('marketing1Header') }}
-    .row
-      .col-md-6
-        img(src='~@/assets/images/marketing/screenshot.png')
-        h2 {{ $t('marketing1Lead1Title') }}
-        p {{ $t('marketing1Lead1') }}
-      .col-md-6
-        img(src='~@/assets/images/marketing/gear.png')
-        h2 {{ $t('marketing1Lead2Title') }}
-        p {{ $t('marketing1Lead2') }}
-        img(src='~@/assets/images/marketing/drops.png', style='max-height: 200px;')
-        h2 {{ $t('marketing1Lead3Title') }}
-        p {{ $t('marketing1Lead3') }}
-    hr
-    .row
-      .col-md-12
-        h1 {{ $t('marketing2Header') }}
-    .row
-      .col-md-6
-        img(src='~@/assets/images/marketing/guild.png')
-        h2 {{ $t('marketing2Lead1Title') }}
-        p {{ $t('marketing2Lead1') }}
-        img(src='~@/assets/images/marketing/vice3.png')
-        h2 {{ $t('marketing2Lead2Title') }}
-        p(v-markdown='$t("marketing2Lead2")')
-      .col-md-6
-        img(src='~@/assets/images/marketing/challenge.png')
-        h2 {{ $t('marketing2Lead3Title') }}
-        p {{ $t('marketing2Lead3') }}
-    hr
-    .row
-      .col-md-12
-        h1 {{ $t('marketing3Header') }}
-    .row
-      .col-md-6
-        img(src='~@/assets/images/marketing/android_iphone.png')
-        h2 {{ $t('footerMobile') }}
-        p(v-markdown='$t("marketing3Lead1")')
-      .col-md-6
-        img(src='~@/assets/images/marketing/integration.png')
-        h2 {{ $t('marketing3Lead2Title') }}
-        p(v-markdown='$t("marketing3Lead2")')
-    hr
-    .row
-      .col-md-12
-        h1 {{ $t('marketing4Header') }}
-    .row
-      .col-md-6
-        .media
-          img(src='~@/assets/images/marketing/education.png')
-          .media-body
-            h2 {{ $t('marketing4Lead1Title') }}
-            p {{ $t('marketing4Lead1') }}
-      .col-md-6
-        .media
-          img(src='~@/assets/images/marketing/wellness.png')
-          .media-body
-            h2 {{ $t('marketing4Lead2Title') }}
-            p {{ $t('marketing4Lead2') }}
-    .row
-      .col-md-6.offset-md-3
-        h2 {{ $t('marketing4Lead3Title') }}
-        img(src='~@/assets/images/marketing/lefnire.png')
-        p.span
-          span {{ $t('marketing4Lead3-1') }}
-          button.btn.btn-primary(@click='playButtonClick()') {{ $t('playButton') }}
-        p.span
-          span {{ $t('marketing4Lead3-2') }}
-          a.btn.btn-primary(href='/static/plans',target='_blank') {{ $t('contactUs') }}
+<template>
+  <div class="container-fluid text-center">
+    <div class="row">
+      <div class="col-md-12">
+        <h1>{{ $t('marketing1Header') }}</h1>
+      </div>
+    </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
+          src="~@/assets/images/marketing/drops.png"
+          style="max-height: 200px;"
+        ><h2>{{ $t('marketing1Lead3Title') }}</h2><p>{{ $t('marketing1Lead3') }}</p>
+      </div>
+    </div><hr><div class="row">
+      <div class="col-md-12">
+        <h1>{{ $t('marketing2Header') }}</h1>
+      </div>
+    </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>
+      </div>
+    </div><hr><div class="row">
+      <div class="col-md-12">
+        <h1>{{ $t('marketing3Header') }}</h1>
+      </div>
+    </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>
+      </div>
+    </div><hr><div class="row">
+      <div class="col-md-12">
+        <h1>{{ $t('marketing4Header') }}</h1>
+      </div>
+    </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>
+          </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
+            class="btn btn-primary"
+            @click="playButtonClick()"
+          >
+            {{ $t('playButton') }}
+          </button>
+        </p><p class="span">
+          <span>{{ $t('marketing4Lead3-2') }}</span><a
+            class="btn btn-primary"
+            href="/static/plans"
+            target="_blank"
+          >{{ $t('contactUs') }}</a>
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/static/groupPlans.vue b/website/client/src/components/static/groupPlans.vue
index f39b5e0ebd..f7b88a2da3 100644
--- a/website/client/src/components/static/groupPlans.vue
+++ b/website/client/src/components/static/groupPlans.vue
@@ -1,60 +1,77 @@
-<template lang="pug">
-  .group-plan-static.text-center
-    amazon-payments-modal
-    .container
-      .row.top
-        .top-left
-        .col-6.offset-3
-          img.party(src='../../assets/images/group-plans-static/party@3x.png')
-          h1 {{ $t('groupPlanTitle') }}
-          p {{ $t('groupPlanDesc') }}
-          .pricing
-            span Just
-            span.number $9
-            span.bold per month +
-            span.number $3
-            span.bold per member*
-          .text-center
-            button.btn.btn-primary.cta-button(@click="goToNewGroupPage()") {{ $t('getStarted') }}
-          small {{ $t('billedMonthly') }}
-        .top-right
-      .row
-        .text-col.col-12.col-md-6.text-left
-          h2 {{ $t('teamBasedTasksList') }}
-          p {{ $t('teamBasedTasksListDesc') }}
-        .col-12.col-md-6
-          .team-based(v-html='svg.teamBased')
-      .row
-        .col-12.col-md-6
-          .group-management(v-html='svg.groupManagement')
-        .text-col.col-12.col-md-6.text-left
-          h2 {{ $t('groupManagementControls') }}
-          p {{ $t('groupManagementControlsDesc') }}
-      .row
-        .col-12.col-md-6.offset-md-3.text-center
-          img.big-gem(src='../../assets/images/group-plans-static/big-gem@3x.png')
-          h2 {{ $t('inGameBenefits') }}
-          p {{ $t('inGameBenefitsDesc') }}
-      .row
-        .bot-left
-        .col-6.offset-3
-          h2.purple {{ $t('inspireYourParty') }}
-          .pricing
-            span Just
-            span.number $9
-            span.bold per month +
-            span.number $3
-            span.bold per member*
-          .text-center
-            button.btn.btn-primary.cta-button(@click="goToNewGroupPage()") {{ $t('getStarted') }}
-          small {{ $t('billedMonthly') }}
-        .bot-right
-    b-modal#group-plan(title="", size='md', :hide-footer='true', :hide-header='true')
-      div(v-if='modalPage === "account"')
-        h2 {{ $t('letsMakeAccount') }}
-        auth-form(@authenticate='authenticate()')
-      div(v-if='modalPage === "purchaseGroup"')
-        create-group-modal-pages
+<template>
+  <div class="group-plan-static text-center">
+    <amazon-payments-modal /><div class="container">
+      <div class="row top">
+        <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">
+            <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 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">
+          <div
+            class="team-based"
+            v-html="svg.teamBased"
+          ></div>
+        </div>
+      </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="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>
+        </div>
+      </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">
+            <button
+              class="btn btn-primary cta-button"
+              @click="goToNewGroupPage()"
+            >
+              {{ $t('getStarted') }}
+            </button>
+          </div><small>{{ $t('billedMonthly') }}</small>
+        </div><div class="bot-right"></div>
+      </div>
+    </div><b-modal
+      id="group-plan"
+      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'">
+        <create-group-modal-pages />
+      </div>
+    </b-modal>
+  </div>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/static/header.vue b/website/client/src/components/static/header.vue
index 2c67f88f16..992a45e1ce 100644
--- a/website/client/src/components/static/header.vue
+++ b/website/client/src/components/static/header.vue
@@ -1,35 +1,125 @@
-<template lang="pug">
-  nav.navbar.navbar-inverse.fixed-top.navbar-expand-sm
-    .navbar-header
-      router-link.nav-item(:to='!isUserLoggedIn ? "/static/home" : "/"')
-        .logo.svg-icon(v-html='icons.purpleLogo', v-if='this.$route.name === "plans"')
-        .logo.svg-icon(v-html='icons.logo', v-else)
-    .collapse.navbar-collapse
-      ul.navbar-nav.mr-auto(v-if='$route.name !== "home"')
-        router-link.nav-item(tag='li', to='/static/features')
-          a.nav-link(v-once) {{ $t('companyAbout') }}
-        router-link.nav-item(tag='li', to='/static/plans')
-          a.nav-link(v-once) {{ $t('groupPlans') }}
-        li.nav-item
-          a.nav-link(href='https://habitica.wordpress.com/', target='_blank') {{ $t('companyBlog') }}
-        li.nav-item
-          a.nav-link(href='http://blog.habitrpg.com/', target='_blank') {{ $t('tumblr') }}
-        router-link.nav-item(tag='li', to='/static/press-kit')
-          a.nav-link(v-once) {{ $t('presskit') }}
-        router-link.nav-item(tag='li', to='/static/contact')
-          a.nav-link(v-once) {{ $t('contactUs') }}
-      ul.navbar-nav.mr-auto(v-else)
-        router-link.nav-item(tag='li', to='/register')
-          a.nav-link(v-once) {{ $t('getStarted') }}
-        li.nav-item
-          a.nav-link(@click='scrollToMobileApp') {{ $t('mobileApps') }}
-        li.nav-item.dropdown
-          a.nav-link.dropdown-toggle(v-once) {{ $t('learnMore') }}
-          .dropdown-menu
-            router-link.dropdown-item(to='/static/faq') {{ $t('faq') }}
-            router-link.dropdown-item(to='/static/plans') {{ $t('groupPlans') }}
-      button.btn.btn-primary.pull-right(@click='playButtonClick()', v-if='$route.name !== "home"') {{ $t('playButtonFull') }}
-    router-link.btn.btn-primary.login-button.pull-right(to='/login', v-if='$route.name === "home"') {{ $t('login') }}
+<template>
+  <nav class="navbar navbar-inverse fixed-top navbar-expand-sm">
+    <div class="navbar-header">
+      <router-link
+        class="nav-item"
+        :to="!isUserLoggedIn ? '/static/home' : '/'"
+      >
+        <div
+          v-if="this.$route.name === 'plans'"
+          class="logo svg-icon"
+          v-html="icons.purpleLogo"
+        ></div><div
+          v-else
+          class="logo svg-icon"
+          v-html="icons.logo"
+        ></div>
+      </router-link>
+    </div><div class="collapse navbar-collapse">
+      <ul
+        v-if="$route.name !== 'home'"
+        class="navbar-nav mr-auto"
+      >
+        <router-link
+          class="nav-item"
+          tag="li"
+          to="/static/features"
+        >
+          <a
+            v-once
+            class="nav-link"
+          >{{ $t('companyAbout') }}</a>
+        </router-link><router-link
+          class="nav-item"
+          tag="li"
+          to="/static/plans"
+        >
+          <a
+            v-once
+            class="nav-link"
+          >{{ $t('groupPlans') }}</a>
+        </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">
+          <a
+            class="nav-link"
+            href="http://blog.habitrpg.com/"
+            target="_blank"
+          >{{ $t('tumblr') }}</a>
+        </li><router-link
+          class="nav-item"
+          tag="li"
+          to="/static/press-kit"
+        >
+          <a
+            v-once
+            class="nav-link"
+          >{{ $t('presskit') }}</a>
+        </router-link><router-link
+          class="nav-item"
+          tag="li"
+          to="/static/contact"
+        >
+          <a
+            v-once
+            class="nav-link"
+          >{{ $t('contactUs') }}</a>
+        </router-link>
+      </ul><ul
+        v-else
+        class="navbar-nav mr-auto"
+      >
+        <router-link
+          class="nav-item"
+          tag="li"
+          to="/register"
+        >
+          <a
+            v-once
+            class="nav-link"
+          >{{ $t('getStarted') }}</a>
+        </router-link><li class="nav-item">
+          <a
+            class="nav-link"
+            @click="scrollToMobileApp"
+          >{{ $t('mobileApps') }}</a>
+        </li><li class="nav-item dropdown">
+          <a
+            v-once
+            class="nav-link dropdown-toggle"
+          >{{ $t('learnMore') }}</a><div class="dropdown-menu">
+            <router-link
+              class="dropdown-item"
+              to="/static/faq"
+            >
+              {{ $t('faq') }}
+            </router-link><router-link
+              class="dropdown-item"
+              to="/static/plans"
+            >
+              {{ $t('groupPlans') }}
+            </router-link>
+          </div>
+        </li>
+      </ul><button
+        v-if="$route.name !== 'home'"
+        class="btn btn-primary pull-right"
+        @click="playButtonClick()"
+      >
+        {{ $t('playButtonFull') }}
+      </button>
+    </div><router-link
+      v-if="$route.name === 'home'"
+      class="btn btn-primary login-button pull-right"
+      to="/login"
+    >
+      {{ $t('login') }}
+    </router-link>
+  </nav>
 </template>
 
 <style lang='scss' scoped>
diff --git a/website/client/src/components/static/home.vue b/website/client/src/components/static/home.vue
index 4f0b96d4c6..0b643cf293 100644
--- a/website/client/src/components/static/home.vue
+++ b/website/client/src/components/static/home.vue
@@ -1,122 +1,270 @@
-<template lang="pug">
-  #front.static-view
-    noscript.banner {{ $t('jsDisabledHeadingFull') }}
-      br
-      a(href='http://www.enable-javascript.com/', target='_blank') {{ $t('jsDisabledLink') }}
-
-    #intro-signup.purple-1
-      .container
-        .row
-          .col-12.col-md-6.col-lg-6
-            img(src='~@/assets/images/home/home-main@3x.png', width='357px')
-            h1 {{$t('motivateYourself')}}
-            p.section-main {{$t('timeToGetThingsDone', {userCountInMillions})}}
-          .col-12.col-md-6.col-lg-6
-            h3.text-center {{$t('singUpForFree')}}
-            div.text-center
-              button.social-button(@click='socialAuth("facebook")')
-                .svg-icon.social-icon(v-html="icons.facebookIcon")
-                span {{$t('signUpWithSocial', {social: 'Facebook'})}}
-              button.social-button(@click='socialAuth("google")')
-                .svg-icon.social-icon(v-html="icons.googleIcon")
-                span {{$t('signUpWithSocial', {social: 'Google'})}}
-            .strike
-              span {{$t('or')}}
-            .form(@keyup.enter="register()")
-              p.form-text {{$t('usernameLimitations')}}
-              input#usernameInput.form-control(type='text', :placeholder='$t("username")', v-model='username', :class='{"input-valid": usernameValid, "input-invalid": usernameInvalid}')
-              .input-error(v-for="issue in usernameIssues") {{ issue }}
-              input.form-control(type='email', :placeholder='$t("email")', v-model='email', :class='{"input-invalid": emailInvalid, "input-valid": emailValid}')
-              input.form-control(type='password', :placeholder='$t("password")', v-model='password', :class='{"input-valid": password.length > 3}')
-              input.form-control(type='password', :placeholder='$t("confirmPassword")', v-model='passwordConfirm', :class='{"input-invalid": passwordConfirmInvalid, "input-valid": passwordConfirmValid}')
-              p.form-text(v-once, v-html="$t('termsAndAgreement')")
-              button.sign-up(@click="register()") {{$t('signup')}}
-          .col-12
-            .spacer.svg-icon(v-html='icons.spacer')
-
-    #gamify-life.purple-2
-      .container-fluid
-        .pixel-horizontal.svg-icon(v-html='icons.pixelHorizontal')
-      .container
-        .row
-          .col-12.col-sm-6.col-md-6.col-lg-6.offset-sm-3.text-center
-            h2 {{$t('gamifyYourLife')}}
-            p.section-main {{$t('aboutHabitica')}}
-        .row
-          .col-12.col-md-4
-            img.track-habits(src='~@/assets/images/home/track-habits@3x.png', width='354px', height='228px')
-            strong {{$t('trackYourGoals')}}
-            p {{$t('trackYourGoalsDesc')}}
-          .col-12.col-md-4
-            img(src='~@/assets/images/home/earn-rewards@3x.png', width='316px', height='244px')
-            strong {{$t('earnRewards')}}
-            p {{$t('earnRewardsDesc')}}
-          .col-12.col-md-4
-            img(src='~@/assets/images/home/battle-monsters@3x.png', width='303px', height='244px')
-            strong {{$t('battleMonsters')}}
-            p {{$t('battleMonstersDesc')}}
-      .col-12
-        .spacer.svg-icon(v-html='icons.spacer')
-
-    #use-cases.purple-2
-      .container.text-center
-        .row
-          .col-12
-            h2 {{$t('playersUseToImprove')}}
-        .row
-          .col-12.col-sm-4
-            img(src='~@/assets/images/home/health-fitness@3x.png', width='300px', height='300px')
-            strong {{$t('healthAndFitness')}}
-            p {{$t('healthAndFitnessDesc')}}
-          .col-12.col-sm-4
-            img(src='~@/assets/images/home/school-work@3x.png', width='300px', height='300px')
-            strong {{$t('schoolAndWork')}}
-            p {{$t('schoolAndWorkDesc')}}
-          .col-12.col-sm-4
-            img(src='~@/assets/images/home/much-more@3x.png', width='300px', height='300px')
-            strong {{$t('muchmuchMore')}}
-            p {{$t('muchmuchMoreDesc')}}
-      .col-12
-        .spacer.svg-icon(v-html='icons.spacer')
-      .container-fluid
-        .pixel-horizontal-2.svg-icon(v-html='icons.pixelHorizontal2')
-
-    #level-up-anywhere.purple-3
-      .container
-        .row
-          .col-12.col-md-6.col-lg-6
-            .iphones
-          .col-12.col-md-6.col-lg-6.text-column
-            h2 {{ $t('levelUpAnywhere') }}
-            p {{ $t('levelUpAnywhereDesc') }}
-            a.app.svg-icon(v-html='icons.googlePlay', href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank')
-            a.app.svg-icon(v-html='icons.iosAppStore', href='https://itunes.apple.com/us/app/habitica-gamified-task-manager/id994882113?mt=8', target='_blank')
-      .container-fluid
-        .pixel-horizontal-3.svg-icon(v-html='icons.pixelHorizontal3')
-
-    #call-to-action.purple-4
-      .container.featured
-        .row.text-center
-          h3.col-12 {{ $t('joinMany') }}
-        .row
-          .col-12.text-center
-            button.btn.btn-primary.join-button(@click='playButtonClick()') {{ $t('joinToday') }}
-        .row.featured
-          .col-12.text-center
-            strong {{ $t('featuredIn') }}
-      .container-fluid.featured
-        .row
-          .col-12.text-center
-            .lifehacker.svg-icon(v-html='icons.lifehacker')
-            .thenewyorktimes.svg-icon(v-html='icons.thenewyorktimes')
-            .makeuseof.svg-icon(v-html='icons.makeuseof')
-            .forbes.svg-icon(v-html='icons.forbes')
-            .cnet.svg-icon(v-html='icons.cnet')
-            .kickstarter.svg-icon(v-html='icons.kickstarter')
-            .fast-company.svg-icon(v-html='icons.fastCompany')
-            .discover.svg-icon(v-html='icons.discover')
-      .container-fluid
-        .row.seamless_stars_varied_opacity_repeat
+<template>
+  <div
+    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
+      id="intro-signup"
+      class="purple-1"
+    >
+      <div class="container">
+        <div class="row">
+          <div class="col-12 col-md-6 col-lg-6">
+            <img
+              src="~@/assets/images/home/home-main@3x.png"
+              width="357px"
+            ><h1>{{ $t('motivateYourself') }}</h1><p class="section-main">
+              {{ $t('timeToGetThingsDone', {userCountInMillions}) }}
+            </p>
+          </div><div class="col-12 col-md-6 col-lg-6">
+            <h3 class="text-center">
+              {{ $t('singUpForFree') }}
+            </h3><div class="text-center">
+              <button
+                class="social-button"
+                @click="socialAuth('facebook')"
+              >
+                <div
+                  class="svg-icon social-icon"
+                  v-html="icons.facebookIcon"
+                ></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>
+              </button>
+            </div><div class="strike">
+              <span>{{ $t('or') }}</span>
+            </div><div
+              class="form"
+              @keyup.enter="register()"
+            >
+              <p class="form-text">
+                {{ $t('usernameLimitations') }}
+              </p><input
+                id="usernameInput"
+                v-model="username"
+                class="form-control"
+                type="text"
+                :placeholder="$t('username')"
+                :class="{'input-valid': usernameValid, 'input-invalid': usernameInvalid}"
+              ><div
+                v-for="issue in usernameIssues"
+                class="input-error"
+              >
+                {{ issue }}
+              </div><input
+                v-model="email"
+                class="form-control"
+                type="email"
+                :placeholder="$t('email')"
+                :class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
+              ><input
+                v-model="password"
+                class="form-control"
+                type="password"
+                :placeholder="$t('password')"
+                :class="{'input-valid': password.length > 3}"
+              ><input
+                v-model="passwordConfirm"
+                class="form-control"
+                type="password"
+                :placeholder="$t('confirmPassword')"
+                :class="{'input-invalid': passwordConfirmInvalid, 'input-valid': passwordConfirmValid}"
+              ><p
+                v-once
+                class="form-text"
+                v-html="$t('termsAndAgreement')"
+              ></p><button
+                class="sign-up"
+                @click="register()"
+              >
+                {{ $t('signup') }}
+              </button>
+            </div>
+          </div><div class="col-12">
+            <div
+              class="spacer svg-icon"
+              v-html="icons.spacer"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div><div
+      id="gamify-life"
+      class="purple-2"
+    >
+      <div class="container-fluid">
+        <div
+          class="pixel-horizontal svg-icon"
+          v-html="icons.pixelHorizontal"
+        ></div>
+      </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">
+              {{ $t('aboutHabitica') }}
+            </p>
+          </div>
+        </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">
+            <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">
+            <img
+              src="~@/assets/images/home/battle-monsters@3x.png"
+              width="303px"
+              height="244px"
+            ><strong>{{ $t('battleMonsters') }}</strong><p>{{ $t('battleMonstersDesc') }}</p>
+          </div>
+        </div>
+      </div><div class="col-12">
+        <div
+          class="spacer svg-icon"
+          v-html="icons.spacer"
+        ></div>
+      </div>
+    </div><div
+      id="use-cases"
+      class="purple-2"
+    >
+      <div class="container text-center">
+        <div class="row">
+          <div class="col-12">
+            <h2>{{ $t('playersUseToImprove') }}</h2>
+          </div>
+        </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">
+            <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">
+            <img
+              src="~@/assets/images/home/much-more@3x.png"
+              width="300px"
+              height="300px"
+            ><strong>{{ $t('muchmuchMore') }}</strong><p>{{ $t('muchmuchMoreDesc') }}</p>
+          </div>
+        </div>
+      </div><div class="col-12">
+        <div
+          class="spacer svg-icon"
+          v-html="icons.spacer"
+        ></div>
+      </div><div class="container-fluid">
+        <div
+          class="pixel-horizontal-2 svg-icon"
+          v-html="icons.pixelHorizontal2"
+        ></div>
+      </div>
+    </div><div
+      id="level-up-anywhere"
+      class="purple-3"
+    >
+      <div class="container">
+        <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
+              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
+              class="app svg-icon"
+              href="https://itunes.apple.com/us/app/habitica-gamified-task-manager/id994882113?mt=8"
+              target="_blank"
+              v-html="icons.iosAppStore"
+            ></a>
+          </div>
+        </div>
+      </div><div class="container-fluid">
+        <div
+          class="pixel-horizontal-3 svg-icon"
+          v-html="icons.pixelHorizontal3"
+        ></div>
+      </div>
+    </div><div
+      id="call-to-action"
+      class="purple-4"
+    >
+      <div class="container featured">
+        <div class="row text-center">
+          <h3 class="col-12">
+            {{ $t('joinMany') }}
+          </h3>
+        </div><div class="row">
+          <div class="col-12 text-center">
+            <button
+              class="btn btn-primary join-button"
+              @click="playButtonClick()"
+            >
+              {{ $t('joinToday') }}
+            </button>
+          </div>
+        </div><div class="row featured">
+          <div class="col-12 text-center">
+            <strong>{{ $t('featuredIn') }}</strong>
+          </div>
+        </div>
+      </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
+              class="thenewyorktimes svg-icon"
+              v-html="icons.thenewyorktimes"
+            ></div><div
+              class="makeuseof svg-icon"
+              v-html="icons.makeuseof"
+            ></div><div
+              class="forbes svg-icon"
+              v-html="icons.forbes"
+            ></div><div
+              class="cnet svg-icon"
+              v-html="icons.cnet"
+            ></div><div
+              class="kickstarter svg-icon"
+              v-html="icons.kickstarter"
+            ></div><div
+              class="fast-company svg-icon"
+              v-html="icons.fastCompany"
+            ></div><div
+              class="discover svg-icon"
+              v-html="icons.discover"
+            ></div>
+          </div>
+        </div>
+      </div><div class="container-fluid">
+        <div class="row seamless_stars_varied_opacity_repeat"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/static/merch.vue b/website/client/src/components/static/merch.vue
index d3faae8858..7842a2b704 100644
--- a/website/client/src/components/static/merch.vue
+++ b/website/client/src/components/static/merch.vue
@@ -1,19 +1,35 @@
-<template lang="pug">
-  .container-fluid
-    .row
-      .col-md-6.offset-3
-        h1 {{ $t('merch') }}
-        // @TODO: Visual experience: Separate each merch items with new line? Or to show items in a table?
-        .col-lg-6.col-md-6.col-sm-12(v-for="(merchant, index) in merchants")
-          .merch-block
-            img(v-if='merchant.logo' :src="`/static/merch/${merchant.key}-logo.png`")
-            h2(v-else) {{ merchant.name }}
-            div
-              a(:href="merchant.link" target='_blank')
-                img.img-rendering-auto(:src="`/static/merch/${merchant.key}.png`")
-            p {{ $t('merch-' + merchant.key + '-summary') }}
-            a.btn.btn-primary(:href="merchant.link" target='_blank') {{$t('merch-' + merchant.key + '-goto')}}
-
+<template>
+  <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
+          v-for="(merchant, index) in merchants"
+          class="col-lg-6 col-md-6 col-sm-12"
+        >
+          <div class="merch-block">
+            <img
+              v-if="merchant.logo"
+              :src="`/static/merch/${merchant.key}-logo.png`"
+            ><h2 v-else>
+              {{ merchant.name }}
+            </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
+              class="btn btn-primary"
+              :href="merchant.link"
+              target="_blank"
+            >{{ $t('merch-' + merchant.key + '-goto') }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/static/newStuff.vue b/website/client/src/components/static/newStuff.vue
index 9fc059a7dc..6a0c6d023d 100644
--- a/website/client/src/components/static/newStuff.vue
+++ b/website/client/src/components/static/newStuff.vue
@@ -1,5 +1,8 @@
-<template lang='pug'>
-  .static-view(v-html="html")
+<template>
+  <div
+    class="static-view"
+    v-html="html"
+  ></div>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/static/overview.vue b/website/client/src/components/static/overview.vue
index 786ee805cf..9181b4ed31 100644
--- a/website/client/src/components/static/overview.vue
+++ b/website/client/src/components/static/overview.vue
@@ -1,14 +1,13 @@
-<template lang="pug">
-.container-fluid.static-view
-  .row
-    .col-md-6.offset-3
-      h1 {{ $t('overview') }}
-      p {{ $t('needTips') }}
-      div(v-for='step in stepsNum')
-        h3 {{ $t('step'+step) }}
-        p(v-markdown="$t('webStep'+step+'Text', stepVars[step])")
-        hr
-      p(v-markdown="$t('overviewQuestions', {faqUrl: '/static/faq/', helpGuildUrl: '/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a'})")
+<template>
+  <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>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang='scss'>
diff --git a/website/client/src/components/static/pressKit.vue b/website/client/src/components/static/pressKit.vue
index 85f25f75a1..3ea661315e 100644
--- a/website/client/src/components/static/pressKit.vue
+++ b/website/client/src/components/static/pressKit.vue
@@ -1,28 +1,51 @@
-<template lang="pug">
-  .container-fluid
-    h1 {{ $t('presskit') }}
-    p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
-    p
-      a.btn.btn-lg.btn-success(href='/static/presskit/presskit.zip') presskit.zip
-
-    div(v-for='(images, category) in imgs')
-      h2 {{ $t('pk' + category) }}
-      div(v-if='Array.isArray(images)')
-        div(v-for='img in images')
-          img.img-fluid.img-rendering-auto.press-img(:src="`/static/presskit/${category}/${img}`")
-      div(v-else)
-        div(v-for='(images, secondaryCategory) in images')
-          h3 {{ $t('pk' + secondaryCategory) }}
-          div(v-for='img in images')
-            img.img-fluid.img-rendering-auto.press-img(:src="`/static/presskit/${category}/${secondaryCategory}/${img}`")
-
-    h1 {{ $t('FAQ') }}
-    #faq(role='tablist')
-      .faq-question(v-for='(QA, index) in faq')
-        h2(v-b-toggle="QA.question", tabindex="0", role="button", v-html="$t(QA.question)")
-        b-collapse(:id="QA.question", accordion="pkAccordian", role="tabpanel")
-          p(v-html="$t(QA.answer)")
-    p {{ $t('pkMoreQuestions') }}
+<template>
+  <div class="container-fluid">
+    <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)">
+        <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 v-for="(images, secondaryCategory) 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}`"
+            >
+          </div>
+        </div>
+      </div>
+    </div><h1>{{ $t('FAQ') }}</h1><div
+      id="faq"
+      role="tablist"
+    >
+      <div
+        v-for="(QA, index) in faq"
+        class="faq-question"
+      >
+        <h2
+          v-b-toggle="QA.question"
+          tabindex="0"
+          role="button"
+          v-html="$t(QA.question)"
+        ></h2><b-collapse
+          :id="QA.question"
+          accordion="pkAccordian"
+          role="tabpanel"
+        >
+          <p v-html="$t(QA.answer)"></p>
+        </b-collapse>
+      </div>
+    </div><p>{{ $t('pkMoreQuestions') }}</p>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/static/privacy.vue b/website/client/src/components/static/privacy.vue
index 2ecda4b8ad..e9909aac26 100644
--- a/website/client/src/components/static/privacy.vue
+++ b/website/client/src/components/static/privacy.vue
@@ -1,299 +1,254 @@
-<template lang="pug">
-  .container-fluid
-    h1 Privacy Policy
-    p.pagemeta
-      | Last updated July 27, 2015
-      br
-      small (Corrected grammar errors and updated company name)
-      br
-      br
-    p
-      strong PLEASE READ THIS PRIVACY POLICY CAREFULLY&period;
-      br
-      | By accessing or otherwise using habitica&period;com or any sub domains thereto &lpar;&quot;the Sites&quot;&rpar;&comma;
-      | or using a habitica&period;com or Habitica application on a mobile device &lpar;&quot;the Applications&quot;&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 &quot;Services&period;&quot;
-    p
-      | To review material modifications and their effective dates scroll
-      | to the bottom of the page&period;
-    p
-      strong
-        | 1&period; Privacy Statement&semi; Collection of Personal
-        | Information&period;
-      br
-      | 1&period;1 HabitRPG, Inc. owns and operates this business&period; All
-      | references to &quot;we&quot;&comma; &quot;us&quot;&comma; shall be construed to mean HabitRPG, Inc.&period;
-    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
-      strong 2&period; Modification of Privacy Policy&period;
-      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 &quot;Privacy Policy&quot; link on this
-      | site&apos;s home page&period; Your continued use of this site indicates your
-      | acceptance of the amended Privacy Policy&period; You should check the Privacy
-      | Policy through this link periodically for modifications by clicking on
-      | the link provided near the top of the Privacy Policy for a listing of
-      | material modifications and their effective dates&period; Regarding personal
-      | information&comma; if any modifications are materially less restrictive on our
-      | 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
-      strong 3&period; Collection of Anonymous&comma; Passive Information&period;
-      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
-      | tags or web beacons&comma; and navigational data collection &lpar;log files&comma; server
-      | 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
-      | 3&period;1 A &quot;cookie&quot; 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
-      | 3&period;2 &quot;Session&quot; cookies are temporary bits of information that are
-      | used to improve navigation&comma; block visitors from providing information
-      | where inappropriate &lpar;the Services &quot;remembers&quot; previous entries of age or
-      | country of origin that were outside the specified parameters and blocks
-      | 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
-      | 3&period;3 &quot;Persistent&quot; 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
-      | computer for a number of purposes&comma; such as retrieving certain
-      | information you have previously provided&comma; helping to determine what
-      | areas of the Services you may find most valuable&comma; and customizing the
-      | 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
-      | 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 &quot;cookie&quot; in the
-      | &quot;Help&quot; portion of your browser&period;
-    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
-      | information&comma; because in most cases an IP address is dynamic &lpar;changing
-      | each time you connect to the Internet&rpar;&comma; rather than static &lpar;unique to a
-      | particular user&apos;s computer&rpar;&period; The IP address can be used to diagnose
-      | 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
-      | 3&period;6 &quot;Internet tags&quot; &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
-      | and browser type related to the visitor&apos;s computer&period; Tags may be placed
-      | 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
-      | 3&period;7 &quot;Navigational data&quot; &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
-      strong 4&period; Use and Sharing of Anonymous&comma; Passive Information&period;
-      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
-      strong 5&period; 3rd Party Behavioral Ads&semi; Google&apos;s AdSense Network&period;
-      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;&quot;3rd Party
-      | Behavioral Ads&quot;&rpar;&period; We reserve the right to share anonymous&comma; passive
-      | information collected on the services with third parties for purposes of
-      | serving 3rd Party Behavioral Ads&period; These 3rd Party Behavioral Ads do not
-      | identify you personally&period; Instead&comma; they associate your behavioral data on
-      | visited sites with your browser&comma; so that the ads your computer sees on
-      | this site are more likely to be relevant to your interests&period; 3rd Party
-      | Behavioral Ads require that that you be served with a cookie containing
-      | 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
-      | 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
-      strong 6&period; Use of 3rd Party Analytics&period;
-      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
-      | above&rpar;&period; We use this information for the purpose of evaluating your use
-      | of the Services&comma; compiling reports on activity&comma; and providing other
-      | 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
-      strong 7&period; Collection of Personal Information&semi; Categories&period;
-      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
-      | address&comma; an email address&comma; phone number&comma; and credit card information
-      | 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
-      strong
-        | 8&period; Use And Sharing of Personal Information&colon; General
-        | Policy And Exceptions&period;
-      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
-      | this site&comma; and security assessments for this site&comma; and we will not
-      | 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
-      | 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
-      | 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
-      | change of control&period; In the unlikely event of our bankruptcy&comma; insolvency&comma;
-      | reorganization&comma; receivership&comma; or assignment for the benefit of
-      | 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
-      | 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
-      | 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
-      strong
-        | 9&period; Onward Transfer of Personal Information Outside Your
-        | Country of Residence&period;
-      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
-      strong 10&period; Security of Personal Information&period;
-      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
-      strong 11&period; Changing And Updating Personal Information&period;
-      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;
-      | require unreasonable time or effort of our technical or administrative
-      | personnel&comma; or undermine the privacy rights of others&period; We reserve the
-      | right to permit you to access your personal information in any account
-      | 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
-      strong 12&period; Email From This Site&semi; Opt-Out Rights&period;
-      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
-      strong 13&period; Children&apos;s Online Policy&period;
-      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;
-      | children under the age of 13&period; If you are a parent or guardian who has
-      | discovered that your child under the age of 13 has submitted his or her
-      | personally identifiable information without your permission or consent&comma;
-      | we will remove the information from our active list&comma; at your request&period; To
-      | request the removal of your child&apos;s information&comma; please email us at
-      | <a href='mailto:admin@habitica.com' target='_blank'>admin@habitica.com</a> and be sure to include in
-      | your message the same login information that your child submitted&period;
-    p
-      strong
-        | 14&period; Email And Other Messages Through This Site&semi; ECPA
-        | Notice&period;
-      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;
-      | Sections 2701-2711 &lpar;the &quot;ECPA&quot;&rpar;&period; The ECPA permits this site&apos;s limited
-      | ability to intercept and&sol;or disclose electronic messages&comma; for example
-      | &lpar;i&rpar; as necessary to operate our system or to protect our rights or
-      | property&comma; &lpar;ii&rpar; upon legal demand &lpar;court orders&comma; warrants&comma; subpoenas&rpar;&comma; or
-      | &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
-      | &quot;secure communications medium&quot; under the ECPA&period;
-    p
-      strong 15&period; Contact Us&period;
-      br
-      | If you have any questions regarding this Privacy Policy&comma; please
-      | contact the owner and operator of this website business&colon;
-    address
-      strong HabitRPG, Inc.
-      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
+<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;
+      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>
+      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
+      references to 'we'&comma; 'us'&comma; shall be construed to mean HabitRPG, Inc.&period;
+    </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;
+      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
+      acceptance of the amended Privacy Policy&period; You should check the Privacy
+      Policy through this link periodically for modifications by clicking on
+      the link provided near the top of the Privacy Policy for a listing of
+      material modifications and their effective dates&period; Regarding personal
+      information&comma; if any modifications are materially less restrictive on our
+      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
+      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
+      tags or web beacons&comma; and navigational data collection &lpar;log files&comma; server
+      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>
+      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>
+      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
+      country of origin that were outside the specified parameters and blocks
+      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>
+      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
+      computer for a number of purposes&comma; such as retrieving certain
+      information you have previously provided&comma; helping to determine what
+      areas of the Services you may find most valuable&comma; and customizing the
+      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>
+      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>
+      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
+      information&comma; because in most cases an IP address is dynamic &lpar;changing
+      each time you connect to the Internet&rpar;&comma; rather than static &lpar;unique to a
+      particular user&apos;s computer&rpar;&period; The IP address can be used to diagnose
+      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>
+      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
+      and browser type related to the visitor&apos;s computer&period; Tags may be placed
+      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>
+      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
+      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
+      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
+      Behavioral Ads'&rpar;&period; We reserve the right to share anonymous&comma; passive
+      information collected on the services with third parties for purposes of
+      serving 3rd Party Behavioral Ads&period; These 3rd Party Behavioral Ads do not
+      identify you personally&period; Instead&comma; they associate your behavioral data on
+      visited sites with your browser&comma; so that the ads your computer sees on
+      this site are more likely to be relevant to your interests&period; 3rd Party
+      Behavioral Ads require that that you be served with a cookie containing
+      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>
+      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
+      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
+      above&rpar;&period; We use this information for the purpose of evaluating your use
+      of the Services&comma; compiling reports on activity&comma; and providing other
+      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
+      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
+      address&comma; an email address&comma; phone number&comma; and credit card information
+      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;
+      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
+      this site&comma; and security assessments for this site&comma; and we will not
+      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>
+      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>
+      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
+      change of control&period; In the unlikely event of our bankruptcy&comma; insolvency&comma;
+      reorganization&comma; receivership&comma; or assignment for the benefit of
+      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>
+      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>
+      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
+      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
+      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
+      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;
+      require unreasonable time or effort of our technical or administrative
+      personnel&comma; or undermine the privacy rights of others&period; We reserve the
+      right to permit you to access your personal information in any account
+      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
+      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
+      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;
+      children under the age of 13&period; If you are a parent or guardian who has
+      discovered that your child under the age of 13 has submitted his or her
+      personally identifiable information without your permission or consent&comma;
+      we will remove the information from our active list&comma; at your request&period; To
+      request the removal of your child&apos;s information&comma; please email us at
+      <a
+        href="mailto:admin@habitica.com"
+        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
+      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;
+      Sections 2701-2711 &lpar;the 'ECPA'&rpar;&period; The ECPA permits this site&apos;s limited
+      ability to intercept and&sol;or disclose electronic messages&comma; for example
+      &lpar;i&rpar; as necessary to operate our system or to protect our rights or
+      property&comma; &lpar;ii&rpar; upon legal demand &lpar;court orders&comma; warrants&comma; subpoenas&rpar;&comma; or
+      &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
+      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>
+  </div>
 </template>
diff --git a/website/client/src/components/static/staticWrapper.vue b/website/client/src/components/static/staticWrapper.vue
index c40679bce6..ac5323c27f 100644
--- a/website/client/src/components/static/staticWrapper.vue
+++ b/website/client/src/components/static/staticWrapper.vue
@@ -1,17 +1,25 @@
-<template lang="pug">
-div
-  static-header(v-if='showContentWrap', :class='{"home-header": ["home", "front"].indexOf($route.name) !== -1, "white-header": this.$route.name === "plans"}')
-
-  .static-wrapper
-    router-view
-
-  div(:id='footerId', v-if='showContentWrap')
-    app-footer
-
-  #bottom-wrap.purple-4(v-if='showContentWrap && footerId')
-    #bottom-background
-      .seamless_mountains_demo_repeat
-      .midground_foreground_extended2
+<template>
+  <div>
+    <static-header
+      v-if="showContentWrap"
+      :class="{'home-header': ['home', 'front'].indexOf($route.name) !== -1, 'white-header': this.$route.name === 'plans'}"
+    /><div class="static-wrapper">
+      <router-view />
+    </div><div
+      v-if="showContentWrap"
+      :id="footerId"
+    >
+      <app-footer />
+    </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>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/static/terms.vue b/website/client/src/components/static/terms.vue
index b5b52955a2..61c5aaa38c 100644
--- a/website/client/src/components/static/terms.vue
+++ b/website/client/src/components/static/terms.vue
@@ -1,568 +1,505 @@
-<template lang="pug">
-  .container-fluid
-    h1 Terms of Use
-    p.pagemeta
-      | Last updated July 27, 2015
-      br
-      small (Corrected minimum age requirement to under 13 years of age per COPPA)
-      br
-      br
-    p
-      | HabitRPG &lpar;or &quot;we&quot;&rpar; provides services through our
-      | software applications for various devices and platforms &lpar;&quot;HabitRPG
-      | Applications&quot;&rpar; and the HabitRPG&period;com domain&comma; and any sub domains thereto
-      | &lpar;the &quot;Sites&quot;&rpar;&period; Individually or collectively&comma; HabitRPG Applications and
-      | Sites may be referred to as the &quot;Services&quot;&period;
-    p
-      | Please read the following terms and conditions &lpar;&quot;Terms of
-      | Service&quot;&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
-      | 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
-      | there is a conflict between these Terms of Service and terms and
-      | conditions posted for a specific area of the Services or HabitRPG
-      | 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
-      | YOU ACKNOWLEDGE AND AGREE THAT&comma; BY CLICKING ON THE &quot;I AGREE&quot; OR
-      | &quot;I ACCEPT&quot; BUTTON&comma; OR BY ACCESSING OR USING THE SERVICES OR BY
-      | DOWNLOADING OR POSTING ANY CONTENT FROM OR ON THE SITES OR THROUGH THE
-      | SERVICES&comma; YOU ARE INDICATING THAT YOU HAVE READ&comma; UNDERSTAND AND AGREE TO
-      | BE BOUND BY THESE TERMS&comma; WHETHER OR NOT YOU HAVE REGISTERED AS A MEMBER&comma;
-      | 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
-      strong Modification
-      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;
-      | we will update the &quot;Last Updated Date&quot; above and post the modification
-      | on the Sites and perhaps elsewhere within the Services&period; By continuing to
-      | access or use the Services after we have posted a modification to these
-      | Terms of Service or have provided you with notice of a modification&comma; you
-      | 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
-      strong Eligibility and HabitRPG Account Registration
-      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;&quot;HabitRPG Account&quot;&rpar; and
-      | become a &quot;Member&quot;&period; In compliance with privacy laws&comma; we do not allow
-      | people below the age of 13 to create accounts&semi; please see our Privacy
-      | Policy for further information&period; During the registration process&comma; you
-      | will be required to provide certain information and you will establish a
-      | username and a password&period; You agree to provide accurate&comma; current and
-      | complete information during the registration process and to update such
-      | information to keep it accurate&comma; current and complete&period; HabitRPG reserves
-      | the right to suspend or terminate your HabitRPG Account if any
-      | information provided during the registration process or thereafter
-      | proves to be inaccurate&comma; not current or incomplete&period; If you are not a
-      | Member you may browse all areas of the Sites or use the parts of the
-      | Services that are not limited to Members only&period; You are responsible for
-      | safeguarding your password&period; You agree not to disclose your password to
-      | any third party and to take sole responsibility for any activities or
-      | actions under your HabitRPG Account&comma; whether or not you have authorized
-      | such activities or actions&period; You agree to immediately notify HabitRPG of
-      | 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
-      strong Privacy
-      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
-      strong Content
-      br
-      | Certain types of content are made available through the Services&period;
-      | &quot;HabitRPG Content&quot; 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;
-      | including any technology or code making up the Services&comma; excluding User
-      | Content&period; &quot;Public User Content&quot; means the text&comma; data&comma; graphics&comma; images&comma; photos&comma;
-      | video or audiovisual content&comma; hypertext links and any other content uploaded&comma;
-      | transmitted or submitted by a Member via the Services with the intent to share
-      | with other users&period; &quot;Private User Content&quot; means data created through the services
-      | exclusively for personal use or private sharing&period;
-      | This includes tasks and related data created in HabitRPG Tasks that have not
-      | been explicitly shared publicly&period;
-      | You understand that by using any of the Services&comma; you may encounter content
-      | that may be deemed offensive&comma; indecent&comma; or objectionable&comma; which content
-      | may or may not be identified as having explicit language&comma; and that the
-      | results of any search or entering of a particular URL may automatically
-      | and unintentionally generate links or references to objectionable
-      | 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
-      strong Ownership
-      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
-      | HabitRPG Content&comma; including all associated intellectual property rights&period;
-      | 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
-      strong HabitRPG License
-      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
-      | HabitRPG Content solely for your personal and non-commercial purposes&period;
-      | You will not use&comma; copy&comma; adapt&comma; modify&comma; prepare derivative works based
-      | upon&comma; distribute&comma; license&comma; sell&comma; transfer&comma; publicly display&comma; publicly
-      | perform&comma; transmit&comma; stream&comma; broadcast or otherwise exploit the Services
-      | or HabitRPG Content&comma; except as expressly permitted in these Terms of
-      | Service&period; No licenses or rights are granted to you by implication or
-      | otherwise under any intellectual property rights owned or controlled by
-      | HabitRPG or its licensors&comma; except for the licenses and rights expressly
-      | granted in these Terms of Service&period; With respect to HabitRPG Applications&comma;
-      | your license is limited to use of such applications on platforms and
-      | 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
-      strong Public User Content
-      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
-      | display&comma; publicly perform&comma; transmit&comma; stream&comma; broadcast and otherwise
-      | exploit such Public User Content only on&comma; through or by means of the Services&period;
-      | 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
-      | 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
-      | exclusive owner of all Public User Content that you make available through the
-      | Services or you have all rights&comma; licenses&comma; consents and releases that
-      | are necessary to grant to HabitRPG the rights in such Public User Content&comma; as
-      | contemplated under these Terms of Service&semi; and &lpar;ii&rpar; neither the User
-      | Content nor your posting&comma; uploading&comma; publication&comma; submission or
-      | transmittal of the Public User Content or HabitRPG&apos;s use of the Public User Content &lpar;or
-      | any portion thereof&rpar; on&comma; through or by means of the Services will
-      | infringe&comma; misappropriate or violate a third party&apos;s patent&comma; copyright&comma;
-      | 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
-      | 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
-      | otherwise violates or promotes the violation of the intellectual
-      | property rights of any third party&period; HabitRPG has adopted and implemented
-      | a policy that provides for the termination in appropriate circumstances
-      | 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
-      strong Notify Us of Infringers
-      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
-      | In order for us to take action&comma; you must do the following in your
-      | notice&colon;
-    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
-      | include sufficient information about where the material is located on
-      | the Services &lpar;including which website and URL&rpar; so that we can find it&semi;
-      | &lpar;4&rpar; provide us with a way to contact you&comma; such as your address&comma;
-      | telephone number&comma; or e-mail&semi; &lpar;5&rpar; provide a statement that you believe in
-      | good faith that the item you have identified as infringing is not
-      | authorized by the copyright owner&comma; its agent&comma; or the law to be used on
-      | the Services&semi; and &lpar;6&rpar; provide a statement that the information you
-      | 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
-      | Here is the contact information for our copyright agent&colon;
-    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
-      | Again&comma; we cannot take action unless you give us all the required
-      | information&period;
-    p
-      strong Ratings and Comments &amp; Feedback&period;
-      br
-      | You can rate and make comments about content made available through the
-      | Services &lpar;&quot;Comments&quot;&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
-      | Comments&period; You should also be aware that you could be held legally
-      | responsible for damages to someone&apos;s reputation if your Comments are
-      | deemed to be defamatory&period; Without limiting any other terms of this Terms
-      | of Service&comma; HabitRPG may&comma; but is under no obligation to&comma; monitor or
-      | censor Comments and disclaims any and all liability relating thereto&period;
-      | Notwithstanding the foregoing&comma; HabitRPG does reserve the right&comma; in its
-      | sole discretion&comma; to remove any Comments that it deems to be improper&comma;
-      | inappropriate or inconsistent with the online activities that are
-      | permitted under these Terms of Service&period; We welcome and encourage you to
-      | provide feedback&comma; comments and suggestions for improvements to the
-      | Services &lpar;&quot;Feedback&quot;&rpar;&period; You may submit Feedback by emailing us at support
-      | AT HabitRPG&period;com&period; You acknowledge and agree that all Comments and Feedback
-      | will be the sole and exclusive property of HabitRPG and you hereby
-      | irrevocably assign to HabitRPG and agree to irrevocably assign to HabitRPG
-      | all of your right&comma; title&comma; and interest in and to all Comments and
-      | Feedback&comma; including without limitation all worldwide patent rights&comma;
-      | copyright rights&comma; trade secret rights&comma; and other proprietary or
-      | intellectual property rights therein&period; At HabitRPG&apos;s request and expense&comma;
-      | you will execute documents and take such further acts as HabitRPG may
-      | 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
-      strong Interactions between Users
-      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
-      | caution&comma; discretion&comma; common sense and judgment in&comma; using the Services
-      | and disclosing personal information to other HabitRPG users&period; You agree to
-      | take reasonable precautions in all interactions with other HabitRPG
-      | users&comma; particularly if you decide to meet a HabitRPG user offline&comma; or in
-      | person&period; Your use of the Services&comma; HabitRPG Content and any other content
-      | made available through the Services is at your sole risk and discretion
-      | and HabitRPG hereby disclaims any and all liability to you or any third
-      | party relating thereto&period; HabitRPG reserves the right to contact Members&comma;
-      | in compliance with applicable law&comma; in order to evaluate compliance with
-      | the rules and policies in these Terms of Service&period; You will cooperate
-      | fully with HabitRPG to investigate any suspected unlawful&comma; fraudulent or
-      | improper activity&comma; including&comma; without limitation&comma; granting authorized
-      | HabitRPG representatives access to any password-protected portions of
-      | your HabitRPG Account&period;
-    p
-      strong General Prohibitions
-      br
-      | You agree not to do any of the following while using the Services or
-      | HabitRPG Content&colon;
-      br
-    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
-        | that&colon; &lpar;i&rpar; infringes&comma; misappropriates or violates a third party&apos;s
-        | patent&comma; copyright&comma; trademark&comma; trade secret&comma; moral rights or other
-        | intellectual property rights&comma; or rights of publicity or privacy&semi; &lpar;ii&rpar;
-        | violates&comma; or encourages any conduct that would violate&comma; any applicable
-        | law or regulation or would give rise to civil liability&semi; &lpar;iii&rpar; is
-        | fraudulent&comma; false&comma; misleading or deceptive&semi; &lpar;iv&rpar; is defamatory&comma;
-        | obscene&comma; pornographic&comma; vulgar or offensive&semi; &lpar;v&rpar; promotes
-        | discrimination&comma; bigotry&comma; racism&comma; hatred&comma; harassment or harm against any
-        | individual or group&semi; &lpar;vi&rpar; is violent or threatening or promotes
-        | violence or actions that are threatening to any other person&semi; or &lpar;vii&rpar;
-        | promotes illegal or harmful activities or substances &lpar;including but not
-        | limited to activities that promote or provide instructional information
-        | regarding the manufacture or purchase of illegal weapons or illegal
-        | substances&rpar;&period;
-      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
-        | 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
-        | 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
-        | 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
-        | 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;
-        | robots&comma; crawlers&comma; data mining tools or the like&rpar; other than the
-        | 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
-        | 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
-        | 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
-        | 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
-        | 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
-        | Attempt to decipher&comma; decompile&comma; disassemble or reverse
-        | engineer any of the software used to provide the Services or HabitRPG
-        | Content&semi;
-      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
-        | Collect or store any personally identifiable information from
-        | the Services from other users of the Services without their express
-        | permission&semi;
-      li
-        | Impersonate or misrepresent your affiliation with any person
-        | or entity&semi; Violate any applicable law or regulation&semi; or
-      li
-        | Encourage or enable any other individual to do any of the
-        | foregoing&period;
-    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
-      | law&period; HabitRPG may involve and cooperate with law enforcement authorities
-      | in prosecuting users who violate these Terms of Service&period; You acknowledge
-      | that HabitRPG has no obligation to monitor your access to or use of the
-      | Services or HabitRPG Content or to review or edit any Public User Content&comma; but
-      | has the right to do so for the purpose of operating the Services&comma; to
-      | ensure your compliance with these Terms of Service&comma; or to comply with
-      | applicable law or the order or requirement of a court&comma; administrative
-      | agency or other governmental body&period; HabitRPG reserves the right&comma; at any
-      | time and without prior notice&comma; to remove or disable access to any
-      | 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
-      strong Links
-      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
-      | resources&period; Links to such websites or resources do not imply any
-      | endorsement by HabitRPG of such websites or resources or the content&comma;
-      | 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
-      strong Termination and HabitRPG Account&semi; Cancellation
-      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
-      | or determines&comma; in its own discretion&comma; that you may have or there is a
-      | significant risk that you have &lpar;i&rpar; failed to comply with any provision
-      | of these Terms of Service or any policies or rules established by
-      | HabitRPG&semi; or &lpar;ii&rpar; engaged in actions relating to or in the course of
-      | 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
-      | 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
-      | 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
-      | immediately cease&period; HabitRPG will not be liable to you or any third party
-      | for termination of the Services or termination of your use of either&period;
-      | UPON ANY TERMINATION OR SUSPENSION&comma; ANY CONTENT&comma; MATERIALS OR
-      | INFORMATION &lpar;INCLUDING PUBLIC USER CONTENT&rpar; THAT YOU HAVE SUBMITTED ON THE
-      | SERVICES OR THAT WHICH IS RELATED TO YOUR ACCOUNT MAY NO LONGER BE
-      | 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
-      | 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
-      strong Disclaimers
-      br
-      | THE SERVICES&comma; HABITRPG CONTENT AND PUBLIC USER CONTENT ARE PROVIDED &quot;AS IS&quot;&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
-      | 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
-      | REGARDING THE QUALITY OF ANY PRODUCTS&comma; SERVICES OR CONTENT PURCHASED OR
-      | OBTAINED THROUGH THE SERVICES OR THE ACCURACY&comma; TIMELINESS&comma; TRUTHFULNESS&comma;
-      | COMPLETENESS OR RELIABILITY OF ANY CONTENT OBTAINED THROUGH THE
-      | SERVICES&period;
-    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
-      strong Indemnity
-      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
-      strong Limitation of Liability
-      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
-      | HABITRPG CONTENT WILL BE LIABLE FOR ANY INCIDENTAL&comma; SPECIAL&comma; EXEMPLARY OR
-      | CONSEQUENTIAL DAMAGES&comma; INCLUDING LOST PROFITS&comma; LOSS OF DATA OR LOSS OF
-      | GOODWILL&comma; SERVICE INTERRUPTION&comma; COMPUTER DAMAGE OR SYSTEM FAILURE OR THE
-      | COST OF SUBSTITUTE PRODUCTS OR SERVICES&comma; ARISING OUT OF OR IN CONNECTION
-      | WITH THESE TERMS OR FROM THE USE OF OR INABILITY TO USE THE SERVICES OR
-      | CONTENT THEREIN&comma; WHETHER BASED ON WARRANTY&comma; CONTRACT&comma; TORT &lpar;INCLUDING
-      | NEGLIGENCE&rpar;&comma; PRODUCT LIABILITY OR ANY OTHER LEGAL THEORY&comma; AND WHETHER OR
-      | NOT HABITRPG HAS BEEN INFORMED OF THE POSSIBILITY OF SUCH DAMAGE&comma; EVEN IF
-      | A LIMITED REMEDY SET FORTH HEREIN IS FOUND TO HAVE FAILED OF ITS
-      | ESSENTIAL PURPOSE&period; YOU SPECIFICALLY ACKNOWLEDGE THAT HABITRPG IS NOT
-      | LIABLE FOR THE DEFAMATORY&comma; OFFENSIVE OR ILLEGAL CONDUCT OF OTHER USERS
-      | OR THIRD PARTIES AND THAT THE RISK OF INJURY FROM THE FOREGOING RESTS
-      | 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
-      | 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
-      | HUNDRED U&period;S&period; DOLLARS &lpar;&dollar;100&rpar;&period; THE LIMITATIONS OF DAMAGES SET FORTH ABOVE
-      | ARE FUNDAMENTAL ELEMENTS OF THE BASIS OF THE BARGAIN BETWEEN HABITRPG AND
-      | 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
-      strong Proprietary Rights Notices
-      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
-      strong Controlling Law and Jurisdiction
-      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
-      | 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
-      strong Export Control
-      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;
-      | embargoed countries or &lpar;b&rpar; to anyone on the U&period;S&period; Treasury Department&apos;s
-      | list of Specially Designated Nationals or the U&period;S&period; Department of
-      | Commerce Denied Person&apos;s List or Entity List&period; By using the Services&comma; you
-      | represent and warrant that you are not located in any such country or on
-      | any such list&period; You also agree that you will not use these products for
-      | 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
-      strong Entire Agreement
-      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
-      strong Assignment
-      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
-      strong Notices
-      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
-      | notices or other communications permitted to required hereunder&comma;
-      | including those regarding modifications to these Terms of Service&comma; will
-      | be in writing and given&colon; &lpar;x&rpar; by HabitRPG via email &lpar;in each case to the
-      | 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
-      strong General
-      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
-      | representative of HabitRPG&period; Except as expressly set forth in these Terms
-      | of Service&comma; the exercise by either party of any of its remedies under
-      | these Terms of Service will be without prejudice to its other remedies
-      | under these Terms of Service or otherwise&period; If for any reason a court of
-      | competent jurisdiction finds any provision of these Terms of Service
-      | 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
-      strong Contacting Us
-      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>
+<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>
+      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>
+      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>
+      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
+      there is a conflict between these Terms of Service and terms and
+      conditions posted for a specific area of the Services or HabitRPG
+      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>
+      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
+      SERVICES&comma; YOU ARE INDICATING THAT YOU HAVE READ&comma; UNDERSTAND AND AGREE TO
+      BE BOUND BY THESE TERMS&comma; WHETHER OR NOT YOU HAVE REGISTERED AS A MEMBER&comma;
+      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;
+      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;
+      we will update the 'Last Updated Date' above and post the modification
+      on the Sites and perhaps elsewhere within the Services&period; By continuing to
+      access or use the Services after we have posted a modification to these
+      Terms of Service or have provided you with notice of a modification&comma; you
+      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
+      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
+      people below the age of 13 to create accounts&semi; please see our Privacy
+      Policy for further information&period; During the registration process&comma; you
+      will be required to provide certain information and you will establish a
+      username and a password&period; You agree to provide accurate&comma; current and
+      complete information during the registration process and to update such
+      information to keep it accurate&comma; current and complete&period; HabitRPG reserves
+      the right to suspend or terminate your HabitRPG Account if any
+      information provided during the registration process or thereafter
+      proves to be inaccurate&comma; not current or incomplete&period; If you are not a
+      Member you may browse all areas of the Sites or use the parts of the
+      Services that are not limited to Members only&period; You are responsible for
+      safeguarding your password&period; You agree not to disclose your password to
+      any third party and to take sole responsibility for any activities or
+      actions under your HabitRPG Account&comma; whether or not you have authorized
+      such activities or actions&period; You agree to immediately notify HabitRPG of
+      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
+      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;
+      '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;
+      including any technology or code making up the Services&comma; excluding User
+      Content&period; 'Public User Content' means the text&comma; data&comma; graphics&comma; images&comma; photos&comma;
+      video or audiovisual content&comma; hypertext links and any other content uploaded&comma;
+      transmitted or submitted by a Member via the Services with the intent to share
+      with other users&period; 'Private User Content' means data created through the services
+      exclusively for personal use or private sharing&period;
+      This includes tasks and related data created in HabitRPG Tasks that have not
+      been explicitly shared publicly&period;
+      You understand that by using any of the Services&comma; you may encounter content
+      that may be deemed offensive&comma; indecent&comma; or objectionable&comma; which content
+      may or may not be identified as having explicit language&comma; and that the
+      results of any search or entering of a particular URL may automatically
+      and unintentionally generate links or references to objectionable
+      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;
+      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
+      HabitRPG Content&comma; including all associated intellectual property rights&period;
+      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
+      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
+      HabitRPG Content solely for your personal and non-commercial purposes&period;
+      You will not use&comma; copy&comma; adapt&comma; modify&comma; prepare derivative works based
+      upon&comma; distribute&comma; license&comma; sell&comma; transfer&comma; publicly display&comma; publicly
+      perform&comma; transmit&comma; stream&comma; broadcast or otherwise exploit the Services
+      or HabitRPG Content&comma; except as expressly permitted in these Terms of
+      Service&period; No licenses or rights are granted to you by implication or
+      otherwise under any intellectual property rights owned or controlled by
+      HabitRPG or its licensors&comma; except for the licenses and rights expressly
+      granted in these Terms of Service&period; With respect to HabitRPG Applications&comma;
+      your license is limited to use of such applications on platforms and
+      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
+      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
+      display&comma; publicly perform&comma; transmit&comma; stream&comma; broadcast and otherwise
+      exploit such Public User Content only on&comma; through or by means of the Services&period;
+      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>
+      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
+      exclusive owner of all Public User Content that you make available through the
+      Services or you have all rights&comma; licenses&comma; consents and releases that
+      are necessary to grant to HabitRPG the rights in such Public User Content&comma; as
+      contemplated under these Terms of Service&semi; and &lpar;ii&rpar; neither the User
+      Content nor your posting&comma; uploading&comma; publication&comma; submission or
+      transmittal of the Public User Content or HabitRPG&apos;s use of the Public User Content &lpar;or
+      any portion thereof&rpar; on&comma; through or by means of the Services will
+      infringe&comma; misappropriate or violate a third party&apos;s patent&comma; copyright&comma;
+      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>
+      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
+      otherwise violates or promotes the violation of the intellectual
+      property rights of any third party&period; HabitRPG has adopted and implemented
+      a policy that provides for the termination in appropriate circumstances
+      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;
+      notify our copyright agent in writing&period; The contact information for our
+      copyright agent is at the bottom of this section&period;
+    </p><p>
+      In order for us to take action&comma; you must do the following in your
+      notice&colon;
+    </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
+      include sufficient information about where the material is located on
+      the Services &lpar;including which website and URL&rpar; so that we can find it&semi;
+      &lpar;4&rpar; provide us with a way to contact you&comma; such as your address&comma;
+      telephone number&comma; or e-mail&semi; &lpar;5&rpar; provide a statement that you believe in
+      good faith that the item you have identified as infringing is not
+      authorized by the copyright owner&comma; its agent&comma; or the law to be used on
+      the Services&semi; and &lpar;6&rpar; provide a statement that the information you
+      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>
+      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
+      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
+      Comments&period; You should also be aware that you could be held legally
+      responsible for damages to someone&apos;s reputation if your Comments are
+      deemed to be defamatory&period; Without limiting any other terms of this Terms
+      of Service&comma; HabitRPG may&comma; but is under no obligation to&comma; monitor or
+      censor Comments and disclaims any and all liability relating thereto&period;
+      Notwithstanding the foregoing&comma; HabitRPG does reserve the right&comma; in its
+      sole discretion&comma; to remove any Comments that it deems to be improper&comma;
+      inappropriate or inconsistent with the online activities that are
+      permitted under these Terms of Service&period; We welcome and encourage you to
+      provide feedback&comma; comments and suggestions for improvements to the
+      Services &lpar;'Feedback'&rpar;&period; You may submit Feedback by emailing us at support
+      AT HabitRPG&period;com&period; You acknowledge and agree that all Comments and Feedback
+      will be the sole and exclusive property of HabitRPG and you hereby
+      irrevocably assign to HabitRPG and agree to irrevocably assign to HabitRPG
+      all of your right&comma; title&comma; and interest in and to all Comments and
+      Feedback&comma; including without limitation all worldwide patent rights&comma;
+      copyright rights&comma; trade secret rights&comma; and other proprietary or
+      intellectual property rights therein&period; At HabitRPG&apos;s request and expense&comma;
+      you will execute documents and take such further acts as HabitRPG may
+      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
+      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
+      caution&comma; discretion&comma; common sense and judgment in&comma; using the Services
+      and disclosing personal information to other HabitRPG users&period; You agree to
+      take reasonable precautions in all interactions with other HabitRPG
+      users&comma; particularly if you decide to meet a HabitRPG user offline&comma; or in
+      person&period; Your use of the Services&comma; HabitRPG Content and any other content
+      made available through the Services is at your sole risk and discretion
+      and HabitRPG hereby disclaims any and all liability to you or any third
+      party relating thereto&period; HabitRPG reserves the right to contact Members&comma;
+      in compliance with applicable law&comma; in order to evaluate compliance with
+      the rules and policies in these Terms of Service&period; You will cooperate
+      fully with HabitRPG to investigate any suspected unlawful&comma; fraudulent or
+      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>
+      <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
+        that&colon; &lpar;i&rpar; infringes&comma; misappropriates or violates a third party&apos;s
+        patent&comma; copyright&comma; trademark&comma; trade secret&comma; moral rights or other
+        intellectual property rights&comma; or rights of publicity or privacy&semi; &lpar;ii&rpar;
+        violates&comma; or encourages any conduct that would violate&comma; any applicable
+        law or regulation or would give rise to civil liability&semi; &lpar;iii&rpar; is
+        fraudulent&comma; false&comma; misleading or deceptive&semi; &lpar;iv&rpar; is defamatory&comma;
+        obscene&comma; pornographic&comma; vulgar or offensive&semi; &lpar;v&rpar; promotes
+        discrimination&comma; bigotry&comma; racism&comma; hatred&comma; harassment or harm against any
+        individual or group&semi; &lpar;vi&rpar; is violent or threatening or promotes
+        violence or actions that are threatening to any other person&semi; or &lpar;vii&rpar;
+        promotes illegal or harmful activities or substances &lpar;including but not
+        limited to activities that promote or provide instructional information
+        regarding the manufacture or purchase of illegal weapons or illegal
+        substances&rpar;&period;
+      </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>
+        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>
+        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>
+        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>
+        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;
+        robots&comma; crawlers&comma; data mining tools or the like&rpar; other than the
+        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>
+        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>
+        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>
+        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>
+        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>
+        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>
+        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>
+        Collect or store any personally identifiable information from
+        the Services from other users of the Services without their express
+        permission&semi;
+      </li><li>
+        Impersonate or misrepresent your affiliation with any person
+        or entity&semi; Violate any applicable law or regulation&semi; or
+      </li><li>
+        Encourage or enable any other individual to do any of the
+        foregoing&period;
+      </li>
+    </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
+      law&period; HabitRPG may involve and cooperate with law enforcement authorities
+      in prosecuting users who violate these Terms of Service&period; You acknowledge
+      that HabitRPG has no obligation to monitor your access to or use of the
+      Services or HabitRPG Content or to review or edit any Public User Content&comma; but
+      has the right to do so for the purpose of operating the Services&comma; to
+      ensure your compliance with these Terms of Service&comma; or to comply with
+      applicable law or the order or requirement of a court&comma; administrative
+      agency or other governmental body&period; HabitRPG reserves the right&comma; at any
+      time and without prior notice&comma; to remove or disable access to any
+      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
+      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
+      resources&period; Links to such websites or resources do not imply any
+      endorsement by HabitRPG of such websites or resources or the content&comma;
+      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
+      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
+      or determines&comma; in its own discretion&comma; that you may have or there is a
+      significant risk that you have &lpar;i&rpar; failed to comply with any provision
+      of these Terms of Service or any policies or rules established by
+      HabitRPG&semi; or &lpar;ii&rpar; engaged in actions relating to or in the course of
+      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>
+      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>
+      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
+      immediately cease&period; HabitRPG will not be liable to you or any third party
+      for termination of the Services or termination of your use of either&period;
+      UPON ANY TERMINATION OR SUSPENSION&comma; ANY CONTENT&comma; MATERIALS OR
+      INFORMATION &lpar;INCLUDING PUBLIC USER CONTENT&rpar; THAT YOU HAVE SUBMITTED ON THE
+      SERVICES OR THAT WHICH IS RELATED TO YOUR ACCOUNT MAY NO LONGER BE
+      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>
+      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;
+      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>
+      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
+      REGARDING THE QUALITY OF ANY PRODUCTS&comma; SERVICES OR CONTENT PURCHASED OR
+      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>
+      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;
+      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;
+      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
+      HABITRPG CONTENT WILL BE LIABLE FOR ANY INCIDENTAL&comma; SPECIAL&comma; EXEMPLARY OR
+      CONSEQUENTIAL DAMAGES&comma; INCLUDING LOST PROFITS&comma; LOSS OF DATA OR LOSS OF
+      GOODWILL&comma; SERVICE INTERRUPTION&comma; COMPUTER DAMAGE OR SYSTEM FAILURE OR THE
+      COST OF SUBSTITUTE PRODUCTS OR SERVICES&comma; ARISING OUT OF OR IN CONNECTION
+      WITH THESE TERMS OR FROM THE USE OF OR INABILITY TO USE THE SERVICES OR
+      CONTENT THEREIN&comma; WHETHER BASED ON WARRANTY&comma; CONTRACT&comma; TORT &lpar;INCLUDING
+      NEGLIGENCE&rpar;&comma; PRODUCT LIABILITY OR ANY OTHER LEGAL THEORY&comma; AND WHETHER OR
+      NOT HABITRPG HAS BEEN INFORMED OF THE POSSIBILITY OF SUCH DAMAGE&comma; EVEN IF
+      A LIMITED REMEDY SET FORTH HEREIN IS FOUND TO HAVE FAILED OF ITS
+      ESSENTIAL PURPOSE&period; YOU SPECIFICALLY ACKNOWLEDGE THAT HABITRPG IS NOT
+      LIABLE FOR THE DEFAMATORY&comma; OFFENSIVE OR ILLEGAL CONDUCT OF OTHER USERS
+      OR THIRD PARTIES AND THAT THE RISK OF INJURY FROM THE FOREGOING RESTS
+      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>
+      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
+      HUNDRED U&period;S&period; DOLLARS &lpar;&dollar;100&rpar;&period; THE LIMITATIONS OF DAMAGES SET FORTH ABOVE
+      ARE FUNDAMENTAL ELEMENTS OF THE BASIS OF THE BARGAIN BETWEEN HABITRPG AND
+      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
+      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
+      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>
+      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
+      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;
+      embargoed countries or &lpar;b&rpar; to anyone on the U&period;S&period; Treasury Department&apos;s
+      list of Specially Designated Nationals or the U&period;S&period; Department of
+      Commerce Denied Person&apos;s List or Entity List&period; By using the Services&comma; you
+      represent and warrant that you are not located in any such country or on
+      any such list&period; You also agree that you will not use these products for
+      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
+      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
+      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
+      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
+      notices or other communications permitted to required hereunder&comma;
+      including those regarding modifications to these Terms of Service&comma; will
+      be in writing and given&colon; &lpar;x&rpar; by HabitRPG via email &lpar;in each case to the
+      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
+      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
+      representative of HabitRPG&period; Except as expressly set forth in these Terms
+      of Service&comma; the exercise by either party of any of its remedies under
+      these Terms of Service will be without prejudice to its other remedies
+      under these Terms of Service or otherwise&period; If for any reason a court of
+      competent jurisdiction finds any provision of these Terms of Service
+      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>
+  </div>
 </template>
diff --git a/website/client/src/components/tasks/approvalFooter.vue b/website/client/src/components/tasks/approvalFooter.vue
index 1d6eec8b33..ccc0fc79df 100644
--- a/website/client/src/components/tasks/approvalFooter.vue
+++ b/website/client/src/components/tasks/approvalFooter.vue
@@ -1,17 +1,44 @@
-<template lang="pug">
-div
-  approval-modal(:task='task')
-  .claim-bottom-message.d-flex.align-items-center(v-if='!approvalRequested && !multipleApprovalsRequested')
-    .mr-auto.ml-2(v-html='message')
-    .ml-auto.mr-2(v-if='!userIsAssigned')
-      a(@click='claim()').claim-color {{ $t('claim') }}
-    .ml-auto.mr-2(v-if='userIsAssigned')
-      a(@click='unassign()').unclaim-color {{ $t('removeClaim') }}
-  .claim-bottom-message.d-flex.align-items-center.justify-content-around(v-if='approvalRequested && userIsManager')
-    a(@click='approve()').approve-color {{ $t('approveTask') }}
-    a(@click='needsWork()') {{ $t('needsWork') }}
-  .claim-bottom-message.d-flex.align-items-center(v-if='multipleApprovalsRequested && userIsManager')
-    a(@click='showRequests()') {{ $t('viewRequests') }}
+<template>
+  <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
+        v-if="!userIsAssigned"
+        class="ml-auto mr-2"
+      >
+        <a
+          class="claim-color"
+          @click="claim()"
+        >{{ $t('claim') }}</a>
+      </div><div
+        v-if="userIsAssigned"
+        class="ml-auto mr-2"
+      >
+        <a
+          class="unclaim-color"
+          @click="unassign()"
+        >{{ $t('removeClaim') }}</a>
+      </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
+      v-if="multipleApprovalsRequested && userIsManager"
+      class="claim-bottom-message d-flex align-items-center"
+    >
+      <a @click="showRequests()">{{ $t('viewRequests') }}</a>
+    </div>
+  </div>
 </template>
 
 <style lang="scss", scoped>
diff --git a/website/client/src/components/tasks/approvalHeader.vue b/website/client/src/components/tasks/approvalHeader.vue
index 81578e9329..5bad31c698 100644
--- a/website/client/src/components/tasks/approvalHeader.vue
+++ b/website/client/src/components/tasks/approvalHeader.vue
@@ -1,6 +1,14 @@
-<template lang="pug">
-  .claim-top-message.d-flex.align-content-center(v-if='message', :class="{'approval-action': userIsAdmin, 'approval-pending': !userIsAdmin}")
-    .m-auto(v-html='message')
+<template>
+  <div
+    v-if="message"
+    class="claim-top-message d-flex align-content-center"
+    :class="{'approval-action': userIsAdmin, 'approval-pending': !userIsAdmin}"
+  >
+    <div
+      class="m-auto"
+      v-html="message"
+    ></div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/tasks/approvalModal.vue b/website/client/src/components/tasks/approvalModal.vue
index 7d297bb005..056a0af247 100644
--- a/website/client/src/components/tasks/approvalModal.vue
+++ b/website/client/src/components/tasks/approvalModal.vue
@@ -1,15 +1,42 @@
-<template lang="pug">
-  b-modal#approval-modal(:title="$t('approveTask')", size='md', :hide-footer="true")
-    .modal-body
-      .row.approval(v-for='(approval, index) in task.approvals')
-        .col-8
-          strong {{approval.userId.profile.name}}
-        .col-2
-          button.btn.btn-primary(@click='approve(index)') {{ $t('approve') }}
-        .col-2
-          button.btn.btn-secondary(@click='needsWork(index)') {{ $t('needsWork') }}
-    .modal-footer
-      button.btn.btn-secondary(@click='close()') {{$t('close')}}
+<template>
+  <b-modal
+    id="approval-modal"
+    :title="$t('approveTask')"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="modal-body">
+      <div
+        v-for="(approval, index) in task.approvals"
+        class="row approval"
+      >
+        <div class="col-8">
+          <strong>{{ approval.userId.profile.name }}</strong>
+        </div><div class="col-2">
+          <button
+            class="btn btn-primary"
+            @click="approve(index)"
+          >
+            {{ $t('approve') }}
+          </button>
+        </div><div class="col-2">
+          <button
+            class="btn btn-secondary"
+            @click="needsWork(index)"
+          >
+            {{ $t('needsWork') }}
+          </button>
+        </div>
+      </div>
+    </div><div class="modal-footer">
+      <button
+        class="btn btn-secondary"
+        @click="close()"
+      >
+        {{ $t('close') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/tasks/brokenTaskModal.vue b/website/client/src/components/tasks/brokenTaskModal.vue
index 2952e24f38..193e909408 100644
--- a/website/client/src/components/tasks/brokenTaskModal.vue
+++ b/website/client/src/components/tasks/brokenTaskModal.vue
@@ -1,28 +1,63 @@
-<template lang="pug">
-  b-modal#broken-task-modal(title="Broken Challenge", size='sm', :hide-footer="true")
-    .modal-body(v-if='brokenChallengeTask && brokenChallengeTask.challenge')
-      div(v-if='brokenChallengeTask.challenge.broken === "TASK_DELETED" || brokenChallengeTask.challenge.broken === "CHALLENGE_TASK_NOT_FOUND"')
-        h2 {{ $t('brokenTask') }}
-        div
-          button.btn.btn-primary(@click='unlink("keep")') {{ $t('keepIt') }}
-          button.btn.btn-danger(@click='removeTask(obj)') {{ $t('removeIt') }}
-      div(v-if='brokenChallengeTask.challenge.broken === "CHALLENGE_DELETED"')
-        h2 {{ $t('brokenChallenge') }}
-        div
-          button.btn.btn-primary(@click='unlink("keep-all")') {{ $t('keepThem') }}
-          button.btn.btn-danger(@click='unlink("remove-all")') {{ $t('removeThem') }}
-      div(v-if='brokenChallengeTask.challenge.broken === "CHALLENGE_CLOSED"')
-        h2(v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})")
-        div
-          button.btn.btn-primary(@click='unlink("keep-all")') {{ $t('keepThem') }}
-          button.btn.btn-danger(@click='unlink("remove-all")') {{ $t('removeThem') }}
-      // @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') }}
+<template>
+  <b-modal
+    id="broken-task-modal"
+    title="Broken Challenge"
+    size="sm"
+    :hide-footer="true"
+  >
+    <div
+      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>
+          <button
+            class="btn btn-primary"
+            @click="unlink('keep')"
+          >
+            {{ $t('keepIt') }}
+          </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>
+          <button
+            class="btn btn-primary"
+            @click="unlink('keep-all')"
+          >
+            {{ $t('keepThem') }}
+          </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>
+          <button
+            class="btn btn-primary"
+            @click="unlink('keep-all')"
+          >
+            {{ $t('keepThem') }}
+          </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') }}
+p
+  a(@click="unlink('keep-all')") {{ $t('keepThem') }}
+  | &nbsp;|&nbsp;
+  a(@click="unlink('remove-all')") {{ $t('removeThem') }}-->
+    </div>
+  </b-modal>
 </template>
 
 <style scoped>
diff --git a/website/client/src/components/tasks/clearCompletedTodos.vue b/website/client/src/components/tasks/clearCompletedTodos.vue
index 64f5df0826..f308463eba 100644
--- a/website/client/src/components/tasks/clearCompletedTodos.vue
+++ b/website/client/src/components/tasks/clearCompletedTodos.vue
@@ -1,7 +1,14 @@
-<template lang="pug">
-.text-center.delete-completed
-  .help-text {{ $t('clearCompletedDescription') }}
-  .btn.btn-danger(@click='clearTodos()') {{ $t('clearCompleted') }}
+<template>
+  <div class="text-center delete-completed">
+    <div class="help-text">
+      {{ $t('clearCompletedDescription') }}
+    </div><div
+      class="btn btn-danger"
+      @click="clearTodos()"
+    >
+      {{ $t('clearCompleted') }}
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/tasks/column.vue b/website/client/src/components/tasks/column.vue
index 64b06cd3d5..881dd0965b 100644
--- a/website/client/src/components/tasks/column.vue
+++ b/website/client/src/components/tasks/column.vue
@@ -1,78 +1,122 @@
-<template lang="pug">
-.tasks-column(:class='type')
-  b-modal(ref="editTaskModal")
-  buy-quest-modal(:item="selectedItemToBuy || {}",
-    :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
-    :withPin="true",
-    @change="resetItemToBuy($event)"
-    v-if='type === "reward"')
-  .d-flex.align-items-center
-    h2.column-title {{ $t(typeLabel) }}
-    .badge.badge-pill.badge-purple.column-badge.mx-1(v-if="badgeCount > 0") {{ badgeCount }}
-    .filters.d-flex.justify-content-end
-      .filter.small-text(
-        v-for="filter in typeFilters",
-        :class="{active: activeFilter.label === filter}",
-        @click="activateFilter(type, filter)",
-      ) {{ $t(filter) }}
-  .tasks-list(ref="tasksWrapper")
-    textarea.quick-add(
-      :rows="quickAddRows",
-      v-if="isUser", :placeholder="quickAddPlaceholder",
-      v-model="quickAddText", @keypress.enter="quickAdd",
-      ref="quickAdd",
-      @focus="quickAddFocused = true", @blur="quickAddFocused = false",
-    )
-    transition(name="quick-add-tip-slide")
-      .quick-add-tip.small-text(v-show="quickAddFocused", v-html="$t('addMultipleTip', {taskType: $t(typeLabel)})")
-    clear-completed-todos(v-if="activeFilter.label === 'complete2' && isUser === true && taskList.length > 0")
-    .column-background(
-      v-if="isUser === true",
-      :class="{'initial-description': initialColumnDescription}",
-      ref="columnBackground",
-    )
-      .svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
-      h3(v-once) {{$t('theseAreYourTasks', {taskType: $t(typeLabel)})}}
-      .small-text {{$t(`${type}sDesc`)}}
-    draggable.sortable-tasks(
-      ref="tasksList",
-      @update='taskSorted',
-      @start="isDragging(true)",
-      @end="isDragging(false)",
-      :options='{disabled: activeFilter.label === "scheduled" || !isUser, scrollSensitivity: 64}',
-    )
-      task(
-        v-for="task in taskList",
-        :key="task.id", :task="task",
-        :isUser="isUser",
-        :showOptions="showOptions"
-        @editTask="editTask",
-        @moveTo="moveTo",
-        :group='group',
-        v-on:taskDestroyed='taskDestroyed'
-      )
-    template(v-if="hasRewardsList")
-      draggable.reward-items(
-        ref="rewardsList",
-        @update="rewardSorted",
-        @start="rewardDragStart",
-        @end="rewardDragEnd",
-      )
-        shopItem(
-          v-for="reward in inAppRewards",
-          :item="reward",
-          :key="reward.key",
-          :highlightBorder="reward.isSuggested",
-          :showPopover="showPopovers"
-          @click="openBuyDialog(reward)",
-          :popoverPosition="'left'"
-        )
-          template(slot="itemBadge", slot-scope="ctx")
-            span.badge.badge-pill.badge-item.badge-svg(
-              :class="{'item-selected-badge': ctx.item.pinned, 'hide': !ctx.highlightBorder}",
-              @click.prevent.stop="togglePinned(ctx.item)"
-            )
-              span.svg-icon.inline.icon-12.color(v-html="icons.pin")
+<template>
+  <div
+    class="tasks-column"
+    :class="type"
+  >
+    <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">
+      <h2 class="column-title">
+        {{ $t(typeLabel) }}
+      </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
+          v-for="filter in typeFilters"
+          class="filter small-text"
+          :class="{active: activeFilter.label === filter}"
+          @click="activateFilter(type, filter)"
+        >
+          {{ $t(filter) }}
+        </div>
+      </div>
+    </div><div
+      ref="tasksWrapper"
+      class="tasks-list"
+    >
+      <textarea
+        v-if="isUser"
+        ref="quickAdd"
+        v-model="quickAddText"
+        class="quick-add"
+        :rows="quickAddRows"
+        :placeholder="quickAddPlaceholder"
+        @keypress.enter="quickAdd"
+        @focus="quickAddFocused = true"
+        @blur="quickAddFocused = false"
+      ></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
+        v-if="isUser === true"
+        ref="columnBackground"
+        class="column-background"
+        :class="{'initial-description': initialColumnDescription}"
+      >
+        <div
+          v-once
+          class="svg-icon"
+          :class="`icon-${type}`"
+          v-html="icons[type]"
+        ></div><h3 v-once>
+          {{ $t('theseAreYourTasks', {taskType: $t(typeLabel)}) }}
+        </h3><div class="small-text">
+          {{ $t(`${type}sDesc`) }}
+        </div>
+      </div><draggable
+        ref="tasksList"
+        class="sortable-tasks"
+        :options="{disabled: activeFilter.label === 'scheduled' || !isUser, scrollSensitivity: 64}"
+        @update="taskSorted"
+        @start="isDragging(true)"
+        @end="isDragging(false)"
+      >
+        <task
+          v-for="task in taskList"
+          :key="task.id"
+          :task="task"
+          :is-user="isUser"
+          :show-options="showOptions"
+          :group="group"
+          @editTask="editTask"
+          @moveTo="moveTo"
+          @taskDestroyed="taskDestroyed"
+        />
+      </draggable><template v-if="hasRewardsList">
+        <draggable
+          ref="rewardsList"
+          class="reward-items"
+          @update="rewardSorted"
+          @start="rewardDragStart"
+          @end="rewardDragEnd"
+        >
+          <shopItem
+            v-for="reward in inAppRewards"
+            :key="reward.key"
+            :item="reward"
+            :highlight-border="reward.isSuggested"
+            :show-popover="showPopovers"
+            :popover-position="'left'"
+            @click="openBuyDialog(reward)"
+          >
+            <template
+              slot="itemBadge"
+              slot-scope="ctx"
+            >
+              <span
+                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>
+            </template>
+          </shopItem>
+        </draggable>
+      </template>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/tasks/spells.vue b/website/client/src/components/tasks/spells.vue
index 74970622d3..4e0f2d1a4a 100644
--- a/website/client/src/components/tasks/spells.vue
+++ b/website/client/src/components/tasks/spells.vue
@@ -1,40 +1,65 @@
-<template lang="pug">
-div(v-if='user.stats.lvl > 10')
-  div.dragInfo.mouse(ref="clickPotionInfo", v-if="potionClickMode")
-    .spell.col-12.row
-      .col-8.details
-        p.title {{spell.text()}}
-        p.notes {{ `Click on a ${spell.target} to cast!`}}
-        // @TODO make that translatable
-      .col-4.mana
-        .img(:class='`shop_${spell.key} shop-sprite item-img`')
-
-  .drawer-wrapper.d-flex.justify-content-center
-    drawer(
-      :title="$t('skillsTitle')",
-      v-if='user.stats.class && !user.preferences.disableClasses',
-      v-mousePosition="30",
-      @mouseMoved="mouseMoved($event)",
-      :openStatus='openStatus',
-      @toggled='drawerToggled'
-    )
-      div(slot="drawer-slider")
-        .container.spell-container
-          .row
-            .col-12.col-md-3(
-              @click='castStart(skill)',
-              v-for='(skill, key) in spells[user.stats.class]',
-              v-if='user.stats.lvl >= skill.lvl',
-              v-b-popover.hover.auto='skill.notes()')
-              .spell.col-12.row
-                .col-8.details
-                  a(:class='{"disabled": spellDisabled(key)}')
-                  div.img(:class='`shop_${skill.key} shop-sprite item-img`')
-                  span.title {{skill.text()}}
-                .col-4.mana
-                  .mana-text
-                    .svg-icon(v-html="icons.mana")
-                    div {{skill.mana}}
+<template>
+  <div v-if="user.stats.lvl > 10">
+    <div
+      v-if="potionClickMode"
+      ref="clickPotionInfo"
+      class="dragInfo mouse"
+    >
+      <div class="spell col-12 row">
+        <div class="col-8 details">
+          <p class="title">
+            {{ spell.text() }}
+          </p><p class="notes">
+            {{ `Click on a ${spell.target} to cast!` }}
+          </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">
+      <drawer
+        v-if="user.stats.class && !user.preferences.disableClasses"
+        v-mousePosition="30"
+        :title="$t('skillsTitle')"
+        :open-status="openStatus"
+        @mouseMoved="mouseMoved($event)"
+        @toggled="drawerToggled"
+      >
+        <div slot="drawer-slider">
+          <div class="container spell-container">
+            <div class="row">
+              <div
+                v-for="(skill, key) in spells[user.stats.class]"
+                v-if="user.stats.lvl >= skill.lvl"
+                v-b-popover.hover.auto="skill.notes()"
+                class="col-12 col-md-3"
+                @click="castStart(skill)"
+              >
+                <div class="spell col-12 row">
+                  <div class="col-8 details">
+                    <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 class="mana-text">
+                      <div
+                        class="svg-icon"
+                        v-html="icons.mana"
+                      ></div><div>{{ skill.mana }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </drawer>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/tasks/tagsPopup.vue b/website/client/src/components/tasks/tagsPopup.vue
index d05156c64b..2097267f3d 100644
--- a/website/client/src/components/tasks/tagsPopup.vue
+++ b/website/client/src/components/tasks/tagsPopup.vue
@@ -1,21 +1,46 @@
-<template lang="pug">
-.tags-popup
-  .tags-category.d-flex(
-    v-for="tagsType in tagsByType",
-    v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'",
-    :key="tagsType.key"
-  )
-    .tags-header
-      strong(v-once) {{ $t(tagsType.key) }}
-    .tags-list.container
-      .row
-        .col-4(v-for="(tag, tagIndex) in tagsType.tags")
-          .custom-control.custom-checkbox
-            input.custom-control-input(type="checkbox", :value="tag.id", v-model="selectedTags", :id="`tag-${tag.id}`")
-            label.custom-control-label(:title="tag.name", :for="`tag-${tag.id}`", v-markdown="tag.name")
-  .tags-footer
-    span.clear-tags(@click="clearTags()") {{$t("clearTags")}}
-    span.close-tags(@click="close()") {{$t("close")}}
+<template>
+  <div class="tags-popup">
+    <div
+      v-for="tagsType in tagsByType"
+      v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'"
+      :key="tagsType.key"
+      class="tags-category d-flex"
+    >
+      <div class="tags-header">
+        <strong v-once>{{ $t(tagsType.key) }}</strong>
+      </div><div class="tags-list container">
+        <div class="row">
+          <div
+            v-for="(tag, tagIndex) in tagsType.tags"
+            class="col-4"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                :id="`tag-${tag.id}`"
+                v-model="selectedTags"
+                class="custom-control-input"
+                type="checkbox"
+                :value="tag.id"
+              ><label
+                v-markdown="tag.name"
+                class="custom-control-label"
+                :title="tag.name"
+                :for="`tag-${tag.id}`"
+              ></label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><div class="tags-footer">
+      <span
+        class="clear-tags"
+        @click="clearTags()"
+      >{{ $t("clearTags") }}</span><span
+        class="close-tags"
+        @click="close()"
+      >{{ $t("close") }}</span>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index 20bd02692b..6ea8e84a84 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -1,113 +1,287 @@
-<template lang="pug">
-.task-wrapper
-  .task(@click='castEnd($event, task)', :class="[{'groupTask': task.group.id}, `type_${task.type}`]")
-    approval-header(:task='task', v-if='task.group.id', :group='group')
-    .d-flex(:class="{'task-not-scoreable': isUser !== true}")
-      // Habits left side control
-      .left-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.up.bg]")
-        .task-control.habit-control(:class="controlClass.up.inner", @click="(isUser && task.up) ? score('up') : null")
-          .svg-icon.lock(v-if="this.task.group.id && !isUser", v-html="icons.lock", :class="controlClass.up.icon")
-          .svg-icon.positive(v-else, v-html="icons.positive")
-      // Dailies and todos left side control
-      .left-control.d-flex.justify-content-center(v-if="task.type === 'daily' || task.type === 'todo'", :class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.bg]")
-        .task-control.daily-todo-control(:class="controlClass.inner", @click="isUser ? score(task.completed ? 'down' : 'up') : null")
-          .svg-icon.lock(v-html="icons.lock", v-if="this.task.group.id && !isUser && !task.completed", :class="controlClass.icon")
-          .svg-icon.check(v-else, v-html="icons.check", :class="{'display-check-icon': task.completed, [controlClass.checkbox]: true}")
-      // Task title, description and icons
-      .task-content(:class="contentClass")
-        .task-clickable-area(@click="edit($event, task)", :class="{'task-clickable-area-user': isUser}")
-          .d-flex.justify-content-between
-            h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
-            menu-dropdown.task-dropdown(
-              v-if="!isRunningYesterdailies && showOptions",
-              :right="task.type === 'reward'",
-              ref="taskDropdown",
-              v-b-tooltip.hover.top="$t('options')"
-            )
-              div(slot="dropdown-toggle", draggable=false)
-                .svg-icon.dropdown-icon(v-html="icons.menu")
-              div(slot="dropdown-content", draggable=false)
-                .dropdown-item.edit-task-item(ref="editTaskItem")
-                  span.dropdown-icon-item
-                    span.svg-icon.inline.edit-icon(v-html="icons.edit")
-                    span.text {{ $t('edit') }}
-                .dropdown-item(v-if='isUser', @click="moveToTop")
-                  span.dropdown-icon-item
-                    span.svg-icon.inline.push-to-top(v-html="icons.top")
-                    span.text {{ $t('taskToTop') }}
-                .dropdown-item(v-if='isUser', @click="moveToBottom")
-                  span.dropdown-icon-item
-                    span.svg-icon.inline.push-to-bottom(v-html="icons.bottom")
-                    span.text {{ $t('taskToBottom') }}
-                .dropdown-item(@click="destroy", v-if="canDelete(task)")
-                  span.dropdown-icon-item.delete-task-item
-                    span.svg-icon.inline.delete(v-html="icons.delete")
-                    span.text {{ $t('delete') }}
-
-          .task-notes.small-text(
-            v-markdown="task.notes",
-            :class="{'has-checklist': task.notes && hasChecklist}",
-          )
-        .checklist(v-if="canViewchecklist", :class="{isOpen: !task.collapseChecklist}")
-          .d-inline-flex
-            .collapse-checklist.d-flex.align-items-center.expand-toggle(
-              v-if="isUser",
-              @click="collapseChecklist(task)",
-              :class="{open: !task.collapseChecklist}",
-              v-b-tooltip.hover.bottom="$t(`${task.collapseChecklist ? 'expand': 'collapse'}Checklist`)",
-            )
-              .svg-icon(v-html="icons.checklist")
-              span {{ checklistProgress }}
-          .custom-control.custom-checkbox.checklist-item(
-            v-if='!task.collapseChecklist',
-            v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
-          )
-            input.custom-control-input(
-              type="checkbox",
-              :checked="item.completed",
-              @change="toggleChecklistItem(item)",
-              :disabled="castingSpell || !isUser",
-              :id="`checklist-${item.id}-${random}`"
-            )
-            label.custom-control-label(v-markdown="item.text", :for="`checklist-${item.id}-${random}`")
-        .icons.small-text.d-flex.align-items-center
-          .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
-            .svg-icon.calendar(v-html="icons.calendar", v-b-tooltip.hover.bottom="$t('dueDate')")
-            span {{dueIn}}
-          .icons-right.d-flex.justify-content-end
-            .d-flex.align-items-center(v-if="showStreak")
-              .svg-icon.streak(v-html="icons.streak", v-b-tooltip.hover.bottom="$t('streakCounter')")
-              span(v-if="task.type === 'daily'") {{task.streak}}
-              span(v-if="task.type === 'habit'")
-                span.m-0(v-if="task.up") +{{task.counterUp}}
-                span.m-0(v-if="task.up && task.down") &nbsp;|&nbsp;
-                span.m-0(v-if="task.down") -{{task.counterDown}}
-            .d-flex.align-items-center(v-if="task.challenge && task.challenge.id")
-              .svg-icon.challenge(v-html="icons.challenge", v-if='!task.challenge.broken', v-b-tooltip.hover.bottom="shortName")
-              .svg-icon.challenge.broken(v-html="icons.brokenChallengeIcon", v-if='task.challenge.broken', @click='handleBrokenTask(task)', v-b-tooltip.hover.bottom="$t('brokenChaLink')")
-            .d-flex.align-items-center(v-if="hasTags", :id="`tags-icon-${task._id}`")
-              .svg-icon.tags(v-html="icons.tags")
-            b-popover(
-              v-if="hasTags",
-              :target="`tags-icon-${task._id}`",
-              triggers="hover",
-              placement="bottom",
-            )
-              .tags-popover
-                .d-flex.align-items-center.tags-container
-                  .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
-                  .tag-label(v-for="tag in getTagsFor(task)", v-markdown="tag")
-
-      // Habits right side control
-      .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="[{'control-bottom-box': this.task.group.id, 'control-top-box': approvalsClass}, controlClass.down.bg]")
-        .task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
-          .svg-icon.lock(v-if="this.task.group.id && !isUser", v-html="icons.lock", :class="controlClass.down.icon")
-          .svg-icon.negative(v-else, v-html="icons.negative")
-      // Rewards right side control
-      .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
-        .svg-icon(v-html="icons.gold")
-        .small-text {{task.value}}
-    approval-footer(:task='task', v-if='task.group.id', :group='group')
+<template>
+  <div class="task-wrapper">
+    <div
+      class="task"
+      :class="[{'groupTask': task.group.id}, `type_${task.type}`]"
+      @click="castEnd($event, task)"
+    >
+      <approval-header
+        v-if="task.group.id"
+        :task="task"
+        :group="group"
+      /><div
+        class="d-flex"
+        :class="{'task-not-scoreable': isUser !== true}"
+      >
+        <!-- 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]"
+        >
+          <div
+            class="task-control habit-control"
+            :class="controlClass.up.inner"
+            @click="(isUser && task.up) ? score('up') : null"
+          >
+            <div
+              v-if="this.task.group.id && !isUser"
+              class="svg-icon lock"
+              :class="controlClass.up.icon"
+              v-html="icons.lock"
+            ></div><div
+              v-else
+              class="svg-icon positive"
+              v-html="icons.positive"
+            ></div>
+          </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]"
+        >
+          <div
+            class="task-control daily-todo-control"
+            :class="controlClass.inner"
+            @click="isUser ? score(task.completed ? 'down' : 'up') : null"
+          >
+            <div
+              v-if="this.task.group.id && !isUser && !task.completed"
+              class="svg-icon lock"
+              :class="controlClass.icon"
+              v-html="icons.lock"
+            ></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
+          class="task-content"
+          :class="contentClass"
+        >
+          <div
+            class="task-clickable-area"
+            :class="{'task-clickable-area-user': isUser}"
+            @click="edit($event, task)"
+          >
+            <div class="d-flex justify-content-between">
+              <h3
+                v-markdown="task.text"
+                class="task-title"
+                :class="{ 'has-notes': task.notes }"
+              ></h3><menu-dropdown
+                v-if="!isRunningYesterdailies && showOptions"
+                ref="taskDropdown"
+                v-b-tooltip.hover.top="$t('options')"
+                class="task-dropdown"
+                :right="task.type === 'reward'"
+              >
+                <div slot="dropdown-toggle">
+                  <div
+                    class="svg-icon dropdown-icon"
+                    v-html="icons.menu"
+                  ></div>
+                </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
+                    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
+                    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
+                    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>
+                  </div>
+                </div>
+              </menu-dropdown>
+            </div><div
+              v-markdown="task.notes"
+              class="task-notes small-text"
+              :class="{'has-checklist': task.notes && hasChecklist}"
+            ></div>
+          </div><div
+            v-if="canViewchecklist"
+            class="checklist"
+            :class="{isOpen: !task.collapseChecklist}"
+          >
+            <div class="d-inline-flex">
+              <div
+                v-if="isUser"
+                v-b-tooltip.hover.bottom="$t(`${task.collapseChecklist ? 'expand': 'collapse'}Checklist`)"
+                class="collapse-checklist d-flex align-items-center expand-toggle"
+                :class="{open: !task.collapseChecklist}"
+                @click="collapseChecklist(task)"
+              >
+                <div
+                  class="svg-icon"
+                  v-html="icons.checklist"
+                ></div><span>{{ checklistProgress }}</span>
+              </div>
+            </div><div
+              v-for="item in task.checklist"
+              v-if="!task.collapseChecklist"
+              class="custom-control custom-checkbox checklist-item"
+              :class="{'checklist-item-done': item.completed}"
+            >
+              <input
+                :id="`checklist-${item.id}-${random}`"
+                class="custom-control-input"
+                type="checkbox"
+                :checked="item.completed"
+                :disabled="castingSpell || !isUser"
+                @change="toggleChecklistItem(item)"
+              ><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
+              v-if="task.type === 'todo' && task.date"
+              class="d-flex align-items-center"
+              :class="{'due-overdue': isDueOverdue}"
+            >
+              <div
+                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
+                v-if="showStreak"
+                class="d-flex align-items-center"
+              >
+                <div
+                  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
+                v-if="task.challenge && task.challenge.id"
+                class="d-flex align-items-center"
+              >
+                <div
+                  v-if="!task.challenge.broken"
+                  v-b-tooltip.hover.bottom="shortName"
+                  class="svg-icon challenge"
+                  v-html="icons.challenge"
+                ></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
+                v-if="hasTags"
+                :id="`tags-icon-${task._id}`"
+                class="d-flex align-items-center"
+              >
+                <div
+                  class="svg-icon tags"
+                  v-html="icons.tags"
+                ></div>
+              </div><b-popover
+                v-if="hasTags"
+                :target="`tags-icon-${task._id}`"
+                triggers="hover"
+                placement="bottom"
+              >
+                <div class="tags-popover">
+                  <div class="d-flex align-items-center tags-container">
+                    <div
+                      v-once
+                      class="tags-popover-title"
+                    >
+                      {{ `${$t('tags')}:` }}
+                    </div><div
+                      v-for="tag in getTagsFor(task)"
+                      v-markdown="tag"
+                      class="tag-label"
+                    ></div>
+                  </div>
+                </div>
+              </b-popover>
+            </div>
+          </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]"
+        >
+          <div
+            class="task-control habit-control"
+            :class="controlClass.down.inner"
+            @click="(isUser && task.down) ? score('down') : null"
+          >
+            <div
+              v-if="this.task.group.id && !isUser"
+              class="svg-icon lock"
+              :class="controlClass.down.icon"
+              v-html="icons.lock"
+            ></div><div
+              v-else
+              class="svg-icon negative"
+              v-html="icons.negative"
+            ></div>
+          </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"
+          @click="isUser ? score('down') : null"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.gold"
+          ></div><div class="small-text">
+            {{ task.value }}
+          </div>
+        </div>
+      </div><approval-footer
+        v-if="task.group.id"
+        :task="task"
+        :group="group"
+      />
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index e5896b73ed..9800e7c91d 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -1,250 +1,644 @@
-<template lang="pug">
-  b-modal#task-modal(v-bind:no-close-on-esc="showTagsSelect", v-bind:no-close-on-backdrop="showTagsSelect", size="sm", @hidden="onClose()", @show="handleOpen()", @shown="focusInput()")
-    .task-modal-header(slot="modal-header", :class="cssClass('bg')", @click="handleClick($event)", v-if="task")
-      .clearfix
-        h1.float-left {{ title }}
-        .float-right.d-flex.align-items-center
-          span.cancel-task-btn.mr-2(v-once, @click="cancel()") {{ $t('cancel') }}
-          button.btn.btn-secondary(@click="submit()", v-once) {{ $t('save') }}
-      .form-group
-        label(v-once) {{ `${$t('text')}*` }}
-        input.form-control.title-input(
-          type="text",
-          required, v-model="task.text",
-          ref="inputToFocus",
-          spellcheck="true",
+<template>
+  <b-modal
+    id="task-modal"
+    :no-close-on-esc="showTagsSelect"
+    :no-close-on-backdrop="showTagsSelect"
+    size="sm"
+    @hidden="onClose()"
+    @show="handleOpen()"
+    @shown="focusInput()"
+  >
+    <div
+      v-if="task"
+      slot="modal-header"
+      class="task-modal-header"
+      :class="cssClass('bg')"
+      @click="handleClick($event)"
+    >
+      <div class="clearfix">
+        <h1 class="float-left">
+          {{ title }}
+        </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
+            v-once
+            class="btn btn-secondary"
+            @click="submit()"
+          >
+            {{ $t('save') }}
+          </button>
+        </div>
+      </div><div class="form-group">
+        <label v-once>{{ `${$t('text')}*` }}</label><input
+          ref="inputToFocus"
+          v-model="task.text"
+          class="form-control title-input"
+          type="text"
+          required="required"
+          spellcheck="true"
           :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
-        )
-      .form-group
-        label.d-flex.align-items-center.justify-content-between(v-once)
-          span {{ $t('notes') }}
-          small(v-once)
-            a(target="_blank", href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
-
-        textarea.form-control(v-model="task.notes", rows="3")
-    .task-modal-content(@click="handleClick($event)")
-      form(v-if="task", @submit.stop.prevent="submit()", @click="handleClick($event)")
-        .option.mt-0(v-if="task.type === 'reward'")
-          .form-group
-            label(v-once) {{ $t('cost') }}
-            .input-group
-              .input-group-prepend.input-group-icon.align-items-center
-                .svg-icon.gold(v-html="icons.gold")
-              input.form-control(type="number", v-model="task.value", required, placeholder="Enter a Value", step="0.01", min="0")
-
-        .option.mt-0(v-if="checklistEnabled")
-          label(v-once) {{ $t('checklist') }}
-          br
-          draggable(
-            v-model="checklist",
-            :options="{handle: '.grippy', filter: '.task-dropdown'}",
+        >
+      </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
+          v-model="task.notes"
+          class="form-control"
+          rows="3"
+        ></textarea>
+      </div>
+    </div><div
+      class="task-modal-content"
+      @click="handleClick($event)"
+    >
+      <form
+        v-if="task"
+        @submit.stop.prevent="submit()"
+        @click="handleClick($event)"
+      >
+        <div
+          v-if="task.type === 'reward'"
+          class="option mt-0"
+        >
+          <div class="form-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
+                v-model="task.value"
+                class="form-control"
+                type="number"
+                required="required"
+                placeholder="Enter a Value"
+                step="0.01"
+                min="0"
+              >
+            </div>
+          </div>
+        </div><div
+          v-if="checklistEnabled"
+          class="option mt-0"
+        >
+          <label v-once>{{ $t('checklist') }}</label><br><draggable
+            v-model="checklist"
+            :options="{handle: '.grippy', filter: '.task-dropdown'}"
             @update="sortedChecklist"
-          )
-            .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist")
-              span.grippy
-              input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text")
-              span.input-group-append(@click="removeChecklistItem($index)")
-                .svg-icon.destroy-icon(v-html="icons.destroy")
-          input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
-        .d-flex.justify-content-center(v-if="task.type === 'habit'")
-          .option-item.habit-control(@click="toggleUpDirection()", :class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
-            .option-item-box(:class="task.up ? cssClass('bg') : ''")
-              .task-control.habit-control
-                .svg-icon.positive(v-html="icons.positive", :class="task.up ? cssClass('icon') : ''")
-            .option-item-label(:class="task.up ? cssClass('text') : ''") {{ $t('positive') }}
-          .option-item.habit-control(@click="toggleDownDirection()", :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')")
-            .option-item-box(:class="task.down ? cssClass('bg') : ''")
-              .task-control.habit-control
-                .svg-icon.negative(v-html="icons.negative", :class="task.down ? cssClass('icon') : ''")
-            .option-item-label(:class="task.down ? cssClass('text') : ''") {{ $t('negative') }}
-        template(v-if="task.type !== 'reward'")
-          label(v-once)
-            span.float-left {{ $t('difficulty') }}
-            .svg-icon.info-icon(v-html="icons.information", v-b-tooltip.hover.righttop="$t('difficultyHelp')")
-          .d-flex.justify-content-center.difficulty-options
-            .option-item(:class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(0.1)")
-              .option-item-box(:class="task.priority === 0.1 ? cssClass('bg') : ''")
-                .svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
-              .option-item-label(:class="task.priority === 0.1 ? cssClass('text') : ''") {{ $t('trivial') }}
-            .option-item(:class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1)")
-              .option-item-box(:class="task.priority === 1 ? cssClass('bg') : ''")
-                .svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
-              .option-item-label(:class="task.priority === 1 ? cssClass('text') : ''") {{ $t('easy') }}
-            .option-item(:class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(1.5)")
-              .option-item-box(:class="task.priority === 1.5 ? cssClass('bg') : ''")
-                .svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
-              .option-item-label(:class="task.priority === 1.5 ? cssClass('text') : ''") {{ $t('medium') }}
-            .option-item(:class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')", @click="setDifficulty(2)")
-              .option-item-box(:class="task.priority === 2 ? cssClass('bg') : ''")
-                .svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
-              .option-item-label(:class="task.priority === 2 ? cssClass('text') : ''") {{ $t('hard') }}
-        .option(v-if="task.type === 'todo'")
-          .form-group
-            label(v-once) {{ $t('dueDate') }}
-            datepicker(
-              v-model="task.date",
-              :calendarIcon="icons.calendar",
-              :clearButton='true',
-              :clearButtonText='$t("clear")',
-              :todayButton='!challengeAccessRequired',
-              :todayButtonText='$t("today")',
-              :disabled-picker='challengeAccessRequired',
-              :highlighted='calendarHighlights'
-            )
-        .option(v-if="task.type === 'daily'")
-          .form-group
-            label(v-once) {{ $t('startDate') }}
-            datepicker(
-              v-model="task.startDate",
-              :calendarIcon="icons.calendar",
-              :clearButton="false",
-              :todayButton="!challengeAccessRequired",
-              :todayButtonText="$t('today')",
-              :disabled-picker="challengeAccessRequired",
-              :highlighted='calendarHighlights'
-            )
-        .option(v-if="task.type === 'daily'")
-          .form-group
-            label(v-once) {{ $t('repeats') }}
-            b-dropdown.inline-dropdown(:text="$t(task.frequency)")
-              b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']",
-              :key="frequency", @click="task.frequency = frequency",
-              :disabled='challengeAccessRequired',
-              :class="{active: task.frequency === frequency}")
-                | {{ $t(frequency) }}
-          .form-group
-            label(v-once) {{ $t('repeatEvery') }}
-            .input-group
-              input.form-control(type="number", v-model="task.everyX", min="0", max="9999", required, :disabled='challengeAccessRequired')
-              .input-group-append.input-group-text {{ repeatSuffix }}
-          template(v-if="task.frequency === 'weekly'")
-            .form-group
-              label.d-block(v-once) {{ $t('repeatOn') }}
-              .form-check-inline.weekday-check.mr-0(
-                v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
-                :key="dayNumber",
-              )
-                .custom-control.custom-checkbox.custom-control-inline
-                  input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired', :id="`weekday-${dayNumber}`")
-                  label.custom-control-label(v-once, :for="`weekday-${dayNumber}`") {{ weekdaysMin(dayNumber) }}
-          template(v-if="task.frequency === 'monthly'")
-            label.d-block(v-once) {{ $t('repeatOn') }}
-            .form-radio
-              .custom-control.custom-radio.custom-control-inline
-                input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfMonth", id="repeat-dayOfMonth" name="repeatsOn")
-                label.custom-control-label(for="repeat-dayOfMonth") {{ $t('dayOfMonth') }}
-              .custom-control.custom-radio.custom-control-inline
-                input.custom-control-input(type='radio', v-model="repeatsOn", value="dayOfWeek", id="repeat-dayOfWeek" name="repeatsOn")
-                label.custom-control-label(for="repeat-dayOfWeek") {{ $t('dayOfWeek') }}
-
-        .tags-select.option(v-if="isUserTask")
-          .tags-inline.form-group.row
-            label.col-12(v-once) {{ $t('tags') }}
-            .col-12
-              .category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }")
-                span.category-select(v-if='task.tags && task.tags.length === 0')
-                  .tags-none {{$t('none')}}
-                  .dropdown-toggle
-                span.category-select(v-else)
-                  .category-label(v-for='tagName in truncatedSelectedTags', :title="tagName", v-markdown='tagName')
-                  .tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
-                  .dropdown-toggle
-          tags-popup(ref="popup", v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
-
-        .option(v-if="task.type === 'habit'")
-          .form-group
-            label(v-once) {{ $t('resetStreak') }}
-            b-dropdown.inline-dropdown(:text="$t(task.frequency)", :disabled='challengeAccessRequired')
-              b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
-                | {{ $t(frequency) }}
-
-        .option.group-options(v-if='groupId')
-          .form-group(v-if="task.type === 'todo'")
-            label(v-once) {{ $t('sharedCompletion') }}
-            b-dropdown.inline-dropdown(:text="$t(sharedCompletion)")
-              b-dropdown-item(
-                v-for="completionOption in ['recurringCompletion', 'singleCompletion', 'allAssignedCompletion']",
-                :key="completionOption",
-                @click="sharedCompletion = completionOption",
+          >
+            <div
+              v-for="(item, $index) in checklist"
+              class="inline-edit-input-group checklist-group input-group"
+            >
+              <span class="grippy"></span><input
+                v-model="item.text"
+                class="inline-edit-input checklist-item form-control"
+                type="text"
+              ><span
+                class="input-group-append"
+                @click="removeChecklistItem($index)"
+              ><div
+                class="svg-icon destroy-icon"
+                v-html="icons.destroy"
+              ></div></span>
+            </div>
+          </draggable><input
+            v-model="newChecklistItem"
+            class="inline-edit-input checklist-item form-control"
+            type="text"
+            :placeholder="$t('newChecklistItem')"
+            @keydown.enter="addChecklistItem($event)"
+          >
+        </div><div
+          v-if="task.type === 'habit'"
+          class="d-flex justify-content-center"
+        >
+          <div
+            class="option-item habit-control"
+            :class="task.up ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
+            @click="toggleUpDirection()"
+          >
+            <div
+              class="option-item-box"
+              :class="task.up ? cssClass('bg') : ''"
+            >
+              <div class="task-control habit-control">
+                <div
+                  class="svg-icon positive"
+                  :class="task.up ? cssClass('icon') : ''"
+                  v-html="icons.positive"
+                ></div>
+              </div>
+            </div><div
+              class="option-item-label"
+              :class="task.up ? cssClass('text') : ''"
+            >
+              {{ $t('positive') }}
+            </div>
+          </div><div
+            class="option-item habit-control"
+            :class="task.down ? 'habit-control-enabled' : cssClass('habit-control-disabled')"
+            @click="toggleDownDirection()"
+          >
+            <div
+              class="option-item-box"
+              :class="task.down ? cssClass('bg') : ''"
+            >
+              <div class="task-control habit-control">
+                <div
+                  class="svg-icon negative"
+                  :class="task.down ? cssClass('icon') : ''"
+                  v-html="icons.negative"
+                ></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
+              class="option-item"
+              :class="task.priority === 0.1 ? 'option-item-selected' : cssClass('option-disabled')"
+              @click="setDifficulty(0.1)"
+            >
+              <div
+                class="option-item-box"
+                :class="task.priority === 0.1 ? cssClass('bg') : ''"
+              >
+                <div
+                  class="svg-icon difficulty-trivial-icon"
+                  v-html="icons.difficultyTrivial"
+                ></div>
+              </div><div
+                class="option-item-label"
+                :class="task.priority === 0.1 ? cssClass('text') : ''"
+              >
+                {{ $t('trivial') }}
+              </div>
+            </div><div
+              class="option-item"
+              :class="task.priority === 1 ? 'option-item-selected' : cssClass('option-disabled')"
+              @click="setDifficulty(1)"
+            >
+              <div
+                class="option-item-box"
+                :class="task.priority === 1 ? cssClass('bg') : ''"
+              >
+                <div
+                  class="svg-icon difficulty-normal-icon"
+                  v-html="icons.difficultyNormal"
+                ></div>
+              </div><div
+                class="option-item-label"
+                :class="task.priority === 1 ? cssClass('text') : ''"
+              >
+                {{ $t('easy') }}
+              </div>
+            </div><div
+              class="option-item"
+              :class="task.priority === 1.5 ? 'option-item-selected' : cssClass('option-disabled')"
+              @click="setDifficulty(1.5)"
+            >
+              <div
+                class="option-item-box"
+                :class="task.priority === 1.5 ? cssClass('bg') : ''"
+              >
+                <div
+                  class="svg-icon difficulty-medium-icon"
+                  v-html="icons.difficultyMedium"
+                ></div>
+              </div><div
+                class="option-item-label"
+                :class="task.priority === 1.5 ? cssClass('text') : ''"
+              >
+                {{ $t('medium') }}
+              </div>
+            </div><div
+              class="option-item"
+              :class="task.priority === 2 ? 'option-item-selected' : cssClass('option-disabled')"
+              @click="setDifficulty(2)"
+            >
+              <div
+                class="option-item-box"
+                :class="task.priority === 2 ? cssClass('bg') : ''"
+              >
+                <div
+                  class="svg-icon difficulty-hard-icon"
+                  v-html="icons.difficultyHard"
+                ></div>
+              </div><div
+                class="option-item-label"
+                :class="task.priority === 2 ? cssClass('text') : ''"
+              >
+                {{ $t('hard') }}
+              </div>
+            </div>
+          </div>
+        </template><div
+          v-if="task.type === 'todo'"
+          class="option"
+        >
+          <div class="form-group">
+            <label v-once>{{ $t('dueDate') }}</label><datepicker
+              v-model="task.date"
+              :calendar-icon="icons.calendar"
+              :clear-button="true"
+              :clear-button-text="$t('clear')"
+              :today-button="!challengeAccessRequired"
+              :today-button-text="$t('today')"
+              :disabled-picker="challengeAccessRequired"
+              :highlighted="calendarHighlights"
+            />
+          </div>
+        </div><div
+          v-if="task.type === 'daily'"
+          class="option"
+        >
+          <div class="form-group">
+            <label v-once>{{ $t('startDate') }}</label><datepicker
+              v-model="task.startDate"
+              :calendar-icon="icons.calendar"
+              :clear-button="false"
+              :today-button="!challengeAccessRequired"
+              :today-button-text="$t('today')"
+              :disabled-picker="challengeAccessRequired"
+              :highlighted="calendarHighlights"
+            />
+          </div>
+        </div><div
+          v-if="task.type === 'daily'"
+          class="option"
+        >
+          <div class="form-group">
+            <label v-once>{{ $t('repeats') }}</label><b-dropdown
+              class="inline-dropdown"
+              :text="$t(task.frequency)"
+            >
+              <b-dropdown-item
+                v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']"
+                :key="frequency"
+                :disabled="challengeAccessRequired"
+                :class="{active: task.frequency === frequency}"
+                @click="task.frequency = frequency"
+              >
+                {{ $t(frequency) }}
+              </b-dropdown-item>
+            </b-dropdown>
+          </div><div class="form-group">
+            <label v-once>{{ $t('repeatEvery') }}</label><div class="input-group">
+              <input
+                v-model="task.everyX"
+                class="form-control"
+                type="number"
+                min="0"
+                max="9999"
+                required="required"
+                :disabled="challengeAccessRequired"
+              ><div class="input-group-append input-group-text">
+                {{ repeatSuffix }}
+              </div>
+            </div>
+          </div><template v-if="task.frequency === 'weekly'">
+            <div class="form-group">
+              <label
+                v-once
+                class="d-block"
+              >{{ $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"
+              >
+                <div class="custom-control custom-checkbox custom-control-inline">
+                  <input
+                    :id="`weekday-${dayNumber}`"
+                    v-model="task.repeat[day]"
+                    class="custom-control-input"
+                    type="checkbox"
+                    :disabled="challengeAccessRequired"
+                  ><label
+                    v-once
+                    class="custom-control-label"
+                    :for="`weekday-${dayNumber}`"
+                  >{{ weekdaysMin(dayNumber) }}</label>
+                </div>
+              </div>
+            </div>
+          </template><template v-if="task.frequency === 'monthly'">
+            <label
+              v-once
+              class="d-block"
+            >{{ $t('repeatOn') }}</label><div class="form-radio">
+              <div class="custom-control custom-radio custom-control-inline">
+                <input
+                  id="repeat-dayOfMonth"
+                  v-model="repeatsOn"
+                  class="custom-control-input"
+                  type="radio"
+                  value="dayOfMonth"
+                  name="repeatsOn"
+                ><label
+                  class="custom-control-label"
+                  for="repeat-dayOfMonth"
+                >{{ $t('dayOfMonth') }}</label>
+              </div><div class="custom-control custom-radio custom-control-inline">
+                <input
+                  id="repeat-dayOfWeek"
+                  v-model="repeatsOn"
+                  class="custom-control-input"
+                  type="radio"
+                  value="dayOfWeek"
+                  name="repeatsOn"
+                ><label
+                  class="custom-control-label"
+                  for="repeat-dayOfWeek"
+                >{{ $t('dayOfWeek') }}</label>
+              </div>
+            </div>
+          </template>
+        </div><div
+          v-if="isUserTask"
+          class="tags-select option"
+        >
+          <div class="tags-inline form-group row">
+            <label
+              v-once
+              class="col-12"
+            >{{ $t('tags') }}</label><div class="col-12">
+              <div
+                class="category-wrap"
+                :class="{ active: showTagsSelect }"
+                @click="toggleTagSelect()"
+              >
+                <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
+                  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>
+            </div>
+          </div><tags-popup
+            v-if="showTagsSelect"
+            ref="popup"
+            v-model="task.tags"
+            :tags="user.tags"
+            @close="closeTagsPopup()"
+          />
+        </div><div
+          v-if="task.type === 'habit'"
+          class="option"
+        >
+          <div class="form-group">
+            <label v-once>{{ $t('resetStreak') }}</label><b-dropdown
+              class="inline-dropdown"
+              :text="$t(task.frequency)"
+              :disabled="challengeAccessRequired"
+            >
+              <b-dropdown-item
+                v-for="frequency in ['daily', 'weekly', 'monthly']"
+                :key="frequency"
+                :class="{active: task.frequency === frequency}"
+                @click="task.frequency = frequency"
+              >
+                {{ $t(frequency) }}
+              </b-dropdown-item>
+            </b-dropdown>
+          </div>
+        </div><div
+          v-if="groupId"
+          class="option group-options"
+        >
+          <div
+            v-if="task.type === 'todo'"
+            class="form-group"
+          >
+            <label v-once>{{ $t('sharedCompletion') }}</label><b-dropdown
+              class="inline-dropdown"
+              :text="$t(sharedCompletion)"
+            >
+              <b-dropdown-item
+                v-for="completionOption in ['recurringCompletion', 'singleCompletion', 'allAssignedCompletion']"
+                :key="completionOption"
                 :class="{active: sharedCompletion === completionOption}"
-              ) {{ $t(completionOption) }}
-          .form-group.row
-            label.col-12(v-once) {{ $t('assignedTo') }}
-            .col-12.mt-2
-              .category-wrap(@click="showAssignedSelect = !showAssignedSelect")
-                span.category-select(v-if='assignedMembers && assignedMembers.length === 0') {{$t('none')}}
-                span.category-select(v-else)
-                  span.mr-1(v-for='memberId in assignedMembers') {{memberNamesById[memberId]}}
-              .category-box(v-if="showAssignedSelect")
-                .container
-                  .row
-                    .form-check.col-6(
-                      v-for="member in members",
-                      :key="member._id",
-                    )
-                      .custom-control.custom-checkbox
-                        input.custom-control-input(type="checkbox", :value="member._id", v-model="assignedMembers", @change='toggleAssignment(member._id)', :id="`assigned-${member._id}`")
-                        label.custom-control-label(v-once, :for="`assigned-${member._id}`") {{ member.profile.name }}
-
-                  .row
-                    button.btn.btn-primary(@click.stop.prevent="showAssignedSelect = !showAssignedSelect") {{$t('close')}}
-          .form-group
-            label(v-once) {{ $t('approvalRequired') }}
-            toggle-switch.d-inline-block(
-              :checked="requiresApproval",
+                @click="sharedCompletion = completionOption"
+              >
+                {{ $t(completionOption) }}
+              </b-dropdown-item>
+            </b-dropdown>
+          </div><div class="form-group row">
+            <label
+              v-once
+              class="col-12"
+            >{{ $t('assignedTo') }}</label><div class="col-12 mt-2">
+              <div
+                class="category-wrap"
+                @click="showAssignedSelect = !showAssignedSelect"
+              >
+                <span
+                  v-if="assignedMembers && assignedMembers.length === 0"
+                  class="category-select"
+                >{{ $t('none') }}</span><span
+                  v-else
+                  class="category-select"
+                ><span
+                  v-for="memberId in assignedMembers"
+                  class="mr-1"
+                >{{ memberNamesById[memberId] }}</span></span>
+              </div><div
+                v-if="showAssignedSelect"
+                class="category-box"
+              >
+                <div class="container">
+                  <div class="row">
+                    <div
+                      v-for="member in members"
+                      :key="member._id"
+                      class="form-check col-6"
+                    >
+                      <div class="custom-control custom-checkbox">
+                        <input
+                          :id="`assigned-${member._id}`"
+                          v-model="assignedMembers"
+                          class="custom-control-input"
+                          type="checkbox"
+                          :value="member._id"
+                          @change="toggleAssignment(member._id)"
+                        ><label
+                          v-once
+                          class="custom-control-label"
+                          :for="`assigned-${member._id}`"
+                        >{{ member.profile.name }}</label>
+                      </div>
+                    </div>
+                  </div><div class="row">
+                    <button
+                      class="btn btn-primary"
+                      @click.stop.prevent="showAssignedSelect = !showAssignedSelect"
+                    >
+                      {{ $t('close') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div><div class="form-group">
+            <label v-once>{{ $t('approvalRequired') }}</label><toggle-switch
+              class="d-inline-block"
+              :checked="requiresApproval"
               @change="updateRequiresApproval"
-            )
-
-        .advanced-settings(v-if="task.type !== 'reward'")
-          .advanced-settings-toggle.d-flex.justify-content-between.align-items-center(@click = "showAdvancedOptions = !showAdvancedOptions")
-            h3 {{ $t('advancedSettings') }}
-            .toggle-up
-              .svg-icon(v-html="icons.down", :class="{'toggle-open': showAdvancedOptions}")
-          b-collapse#advancedOptionsCollapse(v-model="showAdvancedOptions")
-            .advanced-settings-body
-              .option(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
-                .form-group
-                  label(v-once) {{ $t('restoreStreak') }}
-                  .input-group
-                    .input-group-prepend.streak-addon.input-group-icon
-                      .svg-icon(v-html="icons.streak")
-                    input.form-control(type="number", v-model="task.streak", min="0", required)
-
-              .option(v-if="task.type === 'habit' && isUserTask && purpose === 'edit' && (task.up || task.down)")
-                .form-group
-                  label(v-once) {{ $t('restoreStreak') }}
-                  .row
-                    .col-6(v-if="task.up")
-                      .input-group
-                        .input-group-prepend.positive-addon.input-group-icon
-                          .svg-icon(v-html="icons.positive")
-                        input.form-control(
-                          type="number", v-model="task.counterUp", min="0", required,
-                        )
-                    .col-6(v-if="task.down")
-                      .input-group
-                        .input-group-prepend.negative-addon.input-group-icon
-                          .svg-icon(v-html="icons.negative")
-                        input.form-control(
-                          type="number", v-model="task.counterDown", min="0", required,
-                        )
-
-              //.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]) }}
-        .delete-task-btn.d-flex.justify-content-center.align-items-middle(@click="destroy()", v-if="purpose !== 'create' && !challengeAccessRequired")
-          .svg-icon.d-inline-b(v-html="icons.destroy")
-          span {{ $t('deleteTask') }}
-
-    .task-modal-footer.d-flex.justify-content-center.align-items-center(slot="modal-footer", @click="handleClick($event)")
-      .cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
-      button.btn.btn-primary(@click="submit()", v-once) {{ $t('save') }}
+            />
+          </div>
+        </div><div
+          v-if="task.type !== 'reward'"
+          class="advanced-settings"
+        >
+          <div
+            class="advanced-settings-toggle d-flex justify-content-between align-items-center"
+            @click="showAdvancedOptions = !showAdvancedOptions"
+          >
+            <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
+            id="advancedOptionsCollapse"
+            v-model="showAdvancedOptions"
+          >
+            <div class="advanced-settings-body">
+              <div
+                v-if="task.type === 'daily' && isUserTask && purpose === 'edit'"
+                class="option"
+              >
+                <div class="form-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
+                      v-model="task.streak"
+                      class="form-control"
+                      type="number"
+                      min="0"
+                      required="required"
+                    >
+                  </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">
+                    <div
+                      v-if="task.up"
+                      class="col-6"
+                    >
+                      <div class="input-group">
+                        <div class="input-group-prepend positive-addon input-group-icon">
+                          <div
+                            class="svg-icon"
+                            v-html="icons.positive"
+                          ></div>
+                        </div><input
+                          v-model="task.counterUp"
+                          class="form-control"
+                          type="number"
+                          min="0"
+                          required="required"
+                        >
+                      </div>
+                    </div><div
+                      v-if="task.down"
+                      class="col-6"
+                    >
+                      <div class="input-group">
+                        <div class="input-group-prepend negative-addon input-group-icon">
+                          <div
+                            class="svg-icon"
+                            v-html="icons.negative"
+                          ></div>
+                        </div><input
+                          v-model="task.counterDown"
+                          class="form-control"
+                          type="number"
+                          min="0"
+                          required="required"
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </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]) }}-->
+            </div>
+          </b-collapse>
+        </div><div
+          v-if="purpose !== 'create' && !challengeAccessRequired"
+          class="delete-task-btn d-flex justify-content-center align-items-middle"
+          @click="destroy()"
+        >
+          <div
+            class="svg-icon d-inline-b"
+            v-html="icons.destroy"
+          ></div><span>{{ $t('deleteTask') }}</span>
+        </div>
+      </form>
+    </div><div
+      slot="modal-footer"
+      class="task-modal-footer d-flex justify-content-center align-items-center"
+      @click="handleClick($event)"
+    >
+      <div
+        v-once
+        class="cancel-task-btn"
+        @click="cancel()"
+      >
+        {{ $t('cancel') }}
+      </div><button
+        v-once
+        class="btn btn-primary"
+        @click="submit()"
+      >
+        {{ $t('save') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/tasks/user.vue b/website/client/src/components/tasks/user.vue
index 5de0c57750..b101e03338 100644
--- a/website/client/src/components/tasks/user.vue
+++ b/website/client/src/components/tasks/user.vue
@@ -1,106 +1,216 @@
-<template lang="pug">
-.row.user-tasks-page
-  broken-task-modal
-  task-modal(
-    :task="editingTask || creatingTask",
-    :purpose="creatingTask !== null ? 'create' : 'edit'",
-    @cancel="cancelTaskModal()",
-    ref="taskModal",
-  )
-  .col-12
-    .row.tasks-navigation
-      .col-12.col-md-4.offset-md-4
-        .d-flex
-          input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
-          button.btn.btn-secondary.dropdown-toggle.ml-2.d-flex.align-items-center.search-button(
-            type="button",
-            @click="toggleFilterPanel()",
-            :class="{active: selectedTags.length > 0}",
-          )
-            .svg-icon.filter-icon.mr-2(v-html="icons.filter")
-            span(v-once) {{ $t('tags') }}
-        .filter-panel(v-if="isFilterPanelOpen", v-on:mouseleave="checkMouseOver")
-          .tags-category.d-flex(
-            v-for="tagsType in tagsByType",
-            v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'",
-            :key="tagsType.key"
-          )
-            .tags-header
-              strong(v-once) {{ $t(tagsType.key) }}
-              a.d-block(v-if="tagsType.key !== 'groups' && !editingTags", @click="editTags(tagsType.key)") {{ $t('editTags2') }}
-            .tags-list.container
-              .row(:class="{'no-gutters': !editingTags}")
-                template(v-if="editingTags && tagsType.key === 'tags'")
-                  draggable(
-                    v-if="tagsType.key === 'tags'",
-                    v-model="tagsSnap[tagsType.key]",
-                    class="row"
-                  )
-                    .col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
-                      .inline-edit-input-group.tag-edit-item.input-group
-                        .svg-icon.inline.drag(v-html="icons.drag")
-                        input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
-                        .input-group-append(@click="removeTag(tagIndex, tagsType.key)")
-                          .svg-icon.destroy-icon(v-html="icons.destroy")
-
-                    .col-6.dragSpace
-                      input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event, tagsType.key)", v-model="newTag")
-                template(v-if="editingTags && tagsType.key === 'challenges'")
-                    .col-6(v-for="(tag, tagIndex) in tagsSnap[tagsType.key]")
-                      .inline-edit-input-group.tag-edit-item.input-group
-                        input.tag-edit-input.inline-edit-input.form-control(type="text", v-model="tag.name")
-                        .input-group-append(@click="removeTag(tagIndex, tagsType.key)")
-                          .svg-icon.destroy-icon(v-html="icons.destroy")
-
-                template(v-if="!editingTags || tagsType.key === 'groups'")
-                  .col-6(v-for="(tag, tagIndex) in tagsType.tags")
-                    .custom-control.custom-checkbox
-                      input.custom-control-input(
-                        type="checkbox",
-                        :checked="isTagSelected(tag)",
-                        @change="toggleTag(tag)", :id="`tag-${tag.id}`"
-                      )
-                      label.custom-control-label(v-markdown='tag.name', :for="`tag-${tag.id}`")
-
-          .filter-panel-footer.clearfix
-            template(v-if="editingTags === true")
-              .text-center
-                a.mr-3.btn-filters-primary(@click="saveTags()", v-once) {{ $t('saveEdits') }}
-                a.btn-filters-secondary(@click="cancelTagsEditing()", v-once) {{ $t('cancel') }}
-            template(v-else)
-              .float-left
-                a.btn-filters-danger(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
-              .float-right
-                a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
-      .create-task-area.d-flex
-        transition(name="slide-tasks-btns")
-          .d-flex(v-if="openCreateBtn")
-            .create-task-btn.diamond-btn(
-              v-for="type in columns",
-              :key="type",
-              @click="createTask(type)",
-              v-b-tooltip.hover.bottom="$t(type)",
-            )
-              .svg-icon(v-html="icons[type]", :class='`icon-${type}`')
-
-        #create-task-btn.create-btn.diamond-btn.btn.btn-success(
-          @click="openCreateBtn = !openCreateBtn",
-          :class="{open: openCreateBtn}",
-        )
-          .svg-icon(v-html="icons.positive")
-        b-tooltip(target="create-task-btn", placement="bottom", v-if="!openCreateBtn") {{ $t('addTaskToUser') }}
-
-    .row.tasks-columns
-      task-column.col-lg-3.col-md-6(
-        v-for="column in columns",
-        :type="column", :key="column",
-        :isUser="true", :searchText="searchTextThrottled",
-        :selectedTags="selectedTags",
-        @editTask="editTask",
-        @openBuyDialog="openBuyDialog($event)"
-      )
-
-  spells
+<template>
+  <div class="row user-tasks-page">
+    <broken-task-modal /><task-modal
+      ref="taskModal"
+      :task="editingTask || creatingTask"
+      :purpose="creatingTask !== null ? 'create' : 'edit'"
+      @cancel="cancelTaskModal()"
+    /><div class="col-12">
+      <div class="row tasks-navigation">
+        <div class="col-12 col-md-4 offset-md-4">
+          <div class="d-flex">
+            <input
+              v-model="searchText"
+              class="form-control input-search"
+              type="text"
+              :placeholder="$t('search')"
+            ><button
+              class="btn btn-secondary dropdown-toggle ml-2 d-flex align-items-center search-button"
+              type="button"
+              :class="{active: selectedTags.length > 0}"
+              @click="toggleFilterPanel()"
+            >
+              <div
+                class="svg-icon filter-icon mr-2"
+                v-html="icons.filter"
+              ></div><span v-once>{{ $t('tags') }}</span>
+            </button>
+          </div><div
+            v-if="isFilterPanelOpen"
+            class="filter-panel"
+            @mouseleave="checkMouseOver"
+          >
+            <div
+              v-for="tagsType in tagsByType"
+              v-if="tagsType.tags.length > 0 || tagsType.key === 'tags'"
+              :key="tagsType.key"
+              class="tags-category d-flex"
+            >
+              <div class="tags-header">
+                <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
+                  class="row"
+                  :class="{'no-gutters': !editingTags}"
+                >
+                  <template v-if="editingTags && tagsType.key === 'tags'">
+                    <draggable
+                      v-if="tagsType.key === 'tags'"
+                      v-model="tagsSnap[tagsType.key]"
+                      class="row"
+                    >
+                      <div
+                        v-for="(tag, tagIndex) in tagsSnap[tagsType.key]"
+                        class="col-6"
+                      >
+                        <div class="inline-edit-input-group tag-edit-item input-group">
+                          <div
+                            class="svg-icon inline drag"
+                            v-html="icons.drag"
+                          ></div><input
+                            v-model="tag.name"
+                            class="tag-edit-input inline-edit-input form-control"
+                            type="text"
+                          ><div
+                            class="input-group-append"
+                            @click="removeTag(tagIndex, tagsType.key)"
+                          >
+                            <div
+                              class="svg-icon destroy-icon"
+                              v-html="icons.destroy"
+                            ></div>
+                          </div>
+                        </div>
+                      </div><div class="col-6 dragSpace">
+                        <input
+                          v-model="newTag"
+                          class="new-tag-item edit-tag-item inline-edit-input form-control"
+                          type="text"
+                          :placeholder="$t('newTag')"
+                          @keydown.enter="addTag($event, tagsType.key)"
+                        >
+                      </div>
+                    </draggable>
+                  </template><template v-if="editingTags && tagsType.key === 'challenges'">
+                    <div
+                      v-for="(tag, tagIndex) in tagsSnap[tagsType.key]"
+                      class="col-6"
+                    >
+                      <div class="inline-edit-input-group tag-edit-item input-group">
+                        <input
+                          v-model="tag.name"
+                          class="tag-edit-input inline-edit-input form-control"
+                          type="text"
+                        ><div
+                          class="input-group-append"
+                          @click="removeTag(tagIndex, tagsType.key)"
+                        >
+                          <div
+                            class="svg-icon destroy-icon"
+                            v-html="icons.destroy"
+                          ></div>
+                        </div>
+                      </div>
+                    </div>
+                  </template><template v-if="!editingTags || tagsType.key === 'groups'">
+                    <div
+                      v-for="(tag, tagIndex) in tagsType.tags"
+                      class="col-6"
+                    >
+                      <div class="custom-control custom-checkbox">
+                        <input
+                          :id="`tag-${tag.id}`"
+                          class="custom-control-input"
+                          type="checkbox"
+                          :checked="isTagSelected(tag)"
+                          @change="toggleTag(tag)"
+                        ><label
+                          v-markdown="tag.name"
+                          class="custom-control-label"
+                          :for="`tag-${tag.id}`"
+                        ></label>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </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
+                    v-once
+                    class="btn-filters-secondary"
+                    @click="cancelTagsEditing()"
+                  >{{ $t('cancel') }}</a>
+                </div>
+              </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">
+                  <a
+                    v-once
+                    class="btn-filters-secondary"
+                    @click="closeFilterPanel()"
+                  >{{ $t('cancel') }}</a>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div><div class="create-task-area d-flex">
+          <transition name="slide-tasks-btns">
+            <div
+              v-if="openCreateBtn"
+              class="d-flex"
+            >
+              <div
+                v-for="type in columns"
+                :key="type"
+                v-b-tooltip.hover.bottom="$t(type)"
+                class="create-task-btn diamond-btn"
+                @click="createTask(type)"
+              >
+                <div
+                  class="svg-icon"
+                  :class="`icon-${type}`"
+                  v-html="icons[type]"
+                ></div>
+              </div>
+            </div>
+          </transition><div
+            id="create-task-btn"
+            class="create-btn diamond-btn btn btn-success"
+            :class="{open: openCreateBtn}"
+            @click="openCreateBtn = !openCreateBtn"
+          >
+            <div
+              class="svg-icon"
+              v-html="icons.positive"
+            ></div>
+          </div><b-tooltip
+            v-if="!openCreateBtn"
+            target="create-task-btn"
+            placement="bottom"
+          >
+            {{ $t('addTaskToUser') }}
+          </b-tooltip>
+        </div>
+      </div><div class="row tasks-columns">
+        <task-column
+          v-for="column in columns"
+          :key="column"
+          class="col-lg-3 col-md-6"
+          :type="column"
+          :is-user="true"
+          :search-text="searchTextThrottled"
+          :selected-tags="selectedTags"
+          @editTask="editTask"
+          @openBuyDialog="openBuyDialog($event)"
+        />
+      </div>
+    </div><spells />
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/ui/checkbox.vue b/website/client/src/components/ui/checkbox.vue
index e0dd6ab1e3..66ddf700da 100644
--- a/website/client/src/components/ui/checkbox.vue
+++ b/website/client/src/components/ui/checkbox.vue
@@ -1,8 +1,18 @@
-<template lang="pug">
-  .form-check
-    .custom-control.custom-checkbox
-      input.custom-control-input(type="checkbox", v-model="isChecked", :id="id")
-      label.custom-control-label(v-once, :for="id") {{ text }}
+<template>
+  <div class="form-check">
+    <div class="custom-control custom-checkbox">
+      <input
+        :id="id"
+        v-model="isChecked"
+        class="custom-control-input"
+        type="checkbox"
+      ><label
+        v-once
+        class="custom-control-label"
+        :for="id"
+      >{{ text }}</label>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/ui/countBadge.vue b/website/client/src/components/ui/countBadge.vue
index 7f4b828357..749c4f236a 100644
--- a/website/client/src/components/ui/countBadge.vue
+++ b/website/client/src/components/ui/countBadge.vue
@@ -1,7 +1,8 @@
-<template lang="pug">
-span.badge.badge-pill.badge-item.badge-count(
-  v-if="show && count > 0",
-) {{ count }}
+<template>
+  <span
+    v-if="show && count > 0"
+    class="badge badge-pill badge-item badge-count"
+  >{{ count }}</span>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/ui/customMenuDropdown.vue b/website/client/src/components/ui/customMenuDropdown.vue
index def253602a..3406684ef7 100644
--- a/website/client/src/components/ui/customMenuDropdown.vue
+++ b/website/client/src/components/ui/customMenuDropdown.vue
@@ -2,12 +2,25 @@
 A simplified dropdown component that doesn't rely on buttons as toggles  like bootstrap-vue
 -->
 
-<template lang="pug">
-.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", @keypress.enter.space.stop.prevent="toggleDropdown()", role="button", tabindex="0", :class="{open: isOpen}", :aria-pressed="isPressed")
-  .habitica-menu-dropdown-toggle
-    slot(name="dropdown-toggle")
-  .dropdown-menu(:class="{'dropdown-menu-right': right}")
-    slot(name="dropdown-content")
+<template>
+  <div
+    class="habitica-menu-dropdown dropdown"
+    role="button"
+    tabindex="0"
+    :class="{open: isOpen}"
+    :aria-pressed="isPressed"
+    @click="toggleDropdown()"
+    @keypress.enter.space.stop.prevent="toggleDropdown()"
+  >
+    <div class="habitica-menu-dropdown-toggle">
+      <slot name="dropdown-toggle"></slot>
+    </div><div
+      class="dropdown-menu"
+      :class="{'dropdown-menu-right': right}"
+    >
+      <slot name="dropdown-content"></slot>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/ui/drawer.vue b/website/client/src/components/ui/drawer.vue
index db8aaa56ff..8adce06f67 100644
--- a/website/client/src/components/ui/drawer.vue
+++ b/website/client/src/components/ui/drawer.vue
@@ -1,15 +1,36 @@
-<template lang="pug">
-.drawer-container
-  .drawer-title(@click="toggle()")
-    | {{title}}
-    .drawer-toggle-icon.svg-icon.icon-10(v-html="isOpen ? icons.minimize : icons.expand", :class="{ closed: !isOpen }")
-  transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
-    .drawer-content(v-show="isOpen")
-      slot(name="drawer-header")
-      .drawer-slider
-        slot(name="drawer-slider")
-        div.message(v-if="errorMessage != null")
-          .content {{ errorMessage }}
+<template>
+  <div class="drawer-container">
+    <div
+      class="drawer-title"
+      @click="toggle()"
+    >
+      {{ title }}<div
+        class="drawer-toggle-icon svg-icon icon-10"
+        :class="{ closed: !isOpen }"
+        v-html="isOpen ? icons.minimize : icons.expand"
+      ></div>
+    </div><transition
+      name="slide-up"
+      @afterLeave="adjustPagePadding"
+      @afterEnter="adjustPagePadding"
+    >
+      <div
+        v-show="isOpen"
+        class="drawer-content"
+      >
+        <slot name="drawer-header"></slot><div class="drawer-slider">
+          <slot name="drawer-slider"></slot><div
+            v-if="errorMessage != null"
+            class="message"
+          >
+            <div class="content">
+              {{ errorMessage }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/ui/drawerHeaderTabs.vue b/website/client/src/components/ui/drawerHeaderTabs.vue
index 47cd79eaf3..95bf6da5b0 100644
--- a/website/client/src/components/ui/drawerHeaderTabs.vue
+++ b/website/client/src/components/ui/drawerHeaderTabs.vue
@@ -1,15 +1,21 @@
-<template lang="pug">
-.header-tabs
-  ul.drawer-tab-container
-    li.drawer-tab(v-for="(tab, index) in tabs")
-      a.drawer-tab-text(
-        @click="changeTab(index)",
-        :class="{'drawer-tab-text-active': selectedTabPosition === index}",
-        :title="tab.label"
-      ) {{ tab.label }}
-
-  aside.help-item
-    slot(name="right-item")
+<template>
+  <div class="header-tabs">
+    <ul class="drawer-tab-container">
+      <li
+        v-for="(tab, index) in tabs"
+        class="drawer-tab"
+      >
+        <a
+          class="drawer-tab-text"
+          :class="{'drawer-tab-text-active': selectedTabPosition === index}"
+          :title="tab.label"
+          @click="changeTab(index)"
+        >{{ tab.label }}</a>
+      </li>
+    </ul><aside class="help-item">
+      <slot name="right-item"></slot>
+    </aside>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/ui/drawerSlider.vue b/website/client/src/components/ui/drawerSlider.vue
index e174eff6fa..36060a7105 100644
--- a/website/client/src/components/ui/drawerSlider.vue
+++ b/website/client/src/components/ui/drawerSlider.vue
@@ -1,31 +1,42 @@
-<template lang="pug">
-  div.slider-root
-    div.slider-button-area.left-button(
-      v-if="scrollButtonsVisible()",
+<template>
+  <div class="slider-root">
+    <div
+      v-if="scrollButtonsVisible()"
+      class="slider-button-area left-button"
       @mousedown.left="shiftRight"
-    )
-      a.slider-button
-        .svg-icon(v-html="icons.previous")
-    div.slider-button-area.right-button(
-      v-if="scrollButtonsVisible()",
+    >
+      <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.slider-button
-        .svg-icon(v-html="icons.next")
-
-    // 120 = width of the left/right buttons
-    div.sliding-content(v-resize="500", @resized="currentWidth = $event.width - 120")
-      .items.items-one-line
-        template(v-for="item in showItems")
-          div.vertical-divider(
+    >
+      <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"
+    >
+      <div class="items items-one-line">
+        <template v-for="item in showItems">
+          <div
             v-if="shouldAddVerticalLine(item)"
-            v-bind:style="dividerMargins"
-          )
-
-          slot(
-            name="item",
-            :item="item",
-          )
+            class="vertical-divider"
+            :style="dividerMargins"
+          ></div><slot
+            name="item"
+            :item="item"
+          ></slot>
+        </template>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/ui/filterDropdown.vue b/website/client/src/components/ui/filterDropdown.vue
index e712152e8f..a8093e2035 100644
--- a/website/client/src/components/ui/filterDropdown.vue
+++ b/website/client/src/components/ui/filterDropdown.vue
@@ -1,18 +1,19 @@
-<template lang="pug">
-span
-  span.dropdown-label {{ label }}
-  b-dropdown(right=true)
-    span(slot="text", :class="{'dropdown-icon-item': withIcon}")
-      slot(name="item", :item="selectedItem")
-
-    b-dropdown-item(
-      v-for="item in items",
-      @click="selectItem(item)",
-      :active="selectedItem.id === item.id",
-      :key="item.id"
-    )
-      span(:class="{'dropdown-icon-item': withIcon}")
-        slot(name="item", :item="item")
+<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>
 </template>
 
 <script>
diff --git a/website/client/src/components/ui/itemRows.vue b/website/client/src/components/ui/itemRows.vue
index 7437eefa78..eeb87b472e 100644
--- a/website/client/src/components/ui/itemRows.vue
+++ b/website/client/src/components/ui/itemRows.vue
@@ -1,21 +1,31 @@
-<template lang="pug">
-  .item-rows
-    div.items(v-resize="500", @resized="setCurrentWidth($event)")
-      template(v-for="item in itemsToShow(showAll)")
-        slot(
-          name="item",
+<template>
+  <div class="item-rows">
+    <div
+      v-resize="500"
+      class="items"
+      @resized="setCurrentWidth($event)"
+    >
+      <template v-for="item in itemsToShow(showAll)">
+        <slot
+          name="item"
           :item="item"
-        )
-
-    div(v-if="items.length === 0")
-      p(v-once) {{ noItemsLabel }}
-
-    .btn.btn-flat.btn-show-more(
-      @click="toggleItemsToShow()",
+        ></slot>
+      </template>
+    </div><div v-if="items.length === 0">
+      <p v-once>
+        {{ noItemsLabel }}
+      </p>
+    </div><div
       v-if="items.length > itemsPerRow"
-    ) {{ showAll ? $t('showLess') : $t('showMore') }}
-
-    div.fill-height(v-else)
+      class="btn btn-flat btn-show-more"
+      @click="toggleItemsToShow()"
+    >
+      {{ showAll ? $t('showLess') : $t('showMore') }}
+    </div><div
+      v-else
+      class="fill-height"
+    ></div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/ui/layoutSection.vue b/website/client/src/components/ui/layoutSection.vue
index ec5e72383f..bf9aa0d482 100644
--- a/website/client/src/components/ui/layoutSection.vue
+++ b/website/client/src/components/ui/layoutSection.vue
@@ -1,15 +1,13 @@
-<template lang="pug">
-div
-  .clearfix
-    h2.float-left.mb-3.filters-title {{ title }}
-
-    .filters.float-right
-      slot(name="filters")
-
-  br
-
-  slot(name="content")
-
+<template>
+  <div>
+    <div class="clearfix">
+      <h2 class="float-left mb-3 filters-title">
+        {{ title }}
+      </h2><div class="filters float-right">
+        <slot name="filters"></slot>
+      </div>
+    </div><br><slot name="content"></slot>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/ui/pageLayout.vue b/website/client/src/components/ui/pageLayout.vue
index f45d4cc973..fba3d4be35 100644
--- a/website/client/src/components/ui/pageLayout.vue
+++ b/website/client/src/components/ui/pageLayout.vue
@@ -1,9 +1,14 @@
-<template lang="pug">
-.row
-  .standard-sidebar.d-none.d-sm-block(v-if="showSidebar")
-    slot(name="sidebar")
-  .standard-page
-    slot(name="page")
+<template>
+  <div class="row">
+    <div
+      v-if="showSidebar"
+      class="standard-sidebar d-none d-sm-block"
+    >
+      <slot name="sidebar"></slot>
+    </div><div class="standard-page">
+      <slot name="page"></slot>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/ui/starBadge.vue b/website/client/src/components/ui/starBadge.vue
index 63609f7153..d1edf6364a 100644
--- a/website/client/src/components/ui/starBadge.vue
+++ b/website/client/src/components/ui/starBadge.vue
@@ -1,9 +1,10 @@
-<template lang="pug">
-span.badge.badge-pill.badge-item.badge-star(
-  :class="{'item-selected-badge': selected === true}",
-  @click.stop="click",
-  v-if="show",
-) &#9733;
+<template>
+  <span
+    v-if="show"
+    class="badge badge-pill badge-item badge-star"
+    :class="{'item-selected-badge': selected === true}"
+    @click.stop="click"
+  >&#9733;</span>
 </template>
 
 <style lang="scss">
diff --git a/website/client/src/components/ui/statsbar.vue b/website/client/src/components/ui/statsbar.vue
index e3f31ccbaf..53072b191f 100644
--- a/website/client/src/components/ui/statsbar.vue
+++ b/website/client/src/components/ui/statsbar.vue
@@ -1,10 +1,28 @@
-<template lang="pug">
-  .progress-container(ref="container", :id="elementId", :class="{condensed}")
-    .svg-icon(v-html="icon")
-    .progress
-      .progress-bar(:class="progressClass", :style="{width: `${percent(value, maxValue)}%`}")
-    span.small-text {{value | statFloor}} / {{maxValue}}
-    b-tooltip.myClass(:target="() => $refs.container", :container="elementId", :title="tooltip", triggers="hover", placement="bottom")
+<template>
+  <div
+    :id="elementId"
+    ref="container"
+    class="progress-container"
+    :class="{condensed}"
+  >
+    <div
+      class="svg-icon"
+      v-html="icon"
+    ></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
+      class="myClass"
+      :target="() => $refs.container"
+      :container="elementId"
+      :title="tooltip"
+      triggers="hover"
+      placement="bottom"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/ui/toggleSwitch.vue b/website/client/src/components/ui/toggleSwitch.vue
index a2e025779b..977ff1042d 100644
--- a/website/client/src/components/ui/toggleSwitch.vue
+++ b/website/client/src/components/ui/toggleSwitch.vue
@@ -1,25 +1,39 @@
-<template lang="pug">
-.popover-box
-  .clearfix(:id="containerId")
-    .float-left.toggle-switch-description(v-if="label", :class="hoverText ? 'hasPopOver' : ''") {{ label }}
-    .toggle-switch.float-left
-      input.toggle-switch-checkbox(
-        type='checkbox', :id="toggleId",
-        @change="handleChange",
-        :checked="isChecked",
-        :value="value",
-      )
-      label.toggle-switch-label(:for="toggleId")
-        span.toggle-switch-inner
-        span.toggle-switch-switch
-
-  b-popover(
-    v-if="hoverText"
-    :target="containerId"
-    triggers="hover",
-    placement="top"
-  )
-    .popover-content-text {{ hoverText }}
+<template>
+  <div class="popover-box">
+    <div
+      :id="containerId"
+      class="clearfix"
+    >
+      <div
+        v-if="label"
+        class="float-left toggle-switch-description"
+        :class="hoverText ? 'hasPopOver' : ''"
+      >
+        {{ label }}
+      </div><div class="toggle-switch float-left">
+        <input
+          :id="toggleId"
+          class="toggle-switch-checkbox"
+          type="checkbox"
+          :checked="isChecked"
+          :value="value"
+          @change="handleChange"
+        ><label
+          class="toggle-switch-label"
+          :for="toggleId"
+        ><span class="toggle-switch-inner"></span><span class="toggle-switch-switch"></span></label>
+      </div>
+    </div><b-popover
+      v-if="hoverText"
+      :target="containerId"
+      triggers="hover"
+      placement="top"
+    >
+      <div class="popover-content-text">
+        {{ hoverText }}
+      </div>
+    </b-popover>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/userLink.vue b/website/client/src/components/userLink.vue
index 1d4433c262..de37583b0b 100644
--- a/website/client/src/components/userLink.vue
+++ b/website/client/src/components/userLink.vue
@@ -1,11 +1,16 @@
-<template lang="pug">
-  router-link.leader(
-  :to="{'name': 'userProfile', 'params': {'userId': id}}",
-  :class='levelStyle()',
-  v-b-tooltip.hover.top="tierTitle",
-  v-if='displayName')
-    | {{displayName}}
-    .svg-icon(v-html="tierIcon()")
+<template>
+  <router-link
+    v-if="displayName"
+    v-b-tooltip.hover.top="tierTitle"
+    class="leader"
+    :to="{'name': 'userProfile', 'params': {'userId': id}}"
+    :class="levelStyle()"
+  >
+    {{ displayName }}<div
+      class="svg-icon"
+      v-html="tierIcon()"
+    ></div>
+  </router-link>
 </template>
 
 <style scoped lang="scss">
diff --git a/website/client/src/components/userMenu/achievements.vue b/website/client/src/components/userMenu/achievements.vue
index 6be71459d7..3eb6d12719 100644
--- a/website/client/src/components/userMenu/achievements.vue
+++ b/website/client/src/components/userMenu/achievements.vue
@@ -1,28 +1,57 @@
-<template lang="pug">
-  .standard-page.container
-    .row(v-for='(category, key) in achievements')
-      h2.col-12 {{ $t(key+'Achievs') }}
-      .col-3.text-center(v-for='achievment in category.achievements')
-        div.achievement-container(:data-popover-html='achievment.title + achievment.text',
-          popover-placement='achievPopoverPlacement',
-          popover-append-to-body='achievAppendToBody')
-          div(popover-trigger='mouseenter',
-            :data-popover-html='achievment.title + achievment.text',
-            popover-placement='achievPopoverPlacement',
-            popover-append-to-body='achievAppendToBody')
-              .achievement(:class='achievment.icon + "2x"', v-if='achievment.earned')
-               .counter.badge.badge-info.stack-count(v-if='achievment.optionalCount') {{achievment.optionalCount}}
-              .achievement(class='achievement-unearned2x', v-if='!achievment.earned')
-    .row
-      .col-6
-        h2 Challeges Won
-        div(v-for='chal in user.achievements.challenges')
-          span {{chal}}
-      .col-6
-        h2 Quests Completed
-        div(v-for='(value, key) in user.achievements.quests')
-          span {{ content.quests[k].text() }}
-          span {{ value }}
+<template>
+  <div class="standard-page container">
+    <div
+      v-for="(category, key) in achievements"
+      class="row"
+    >
+      <h2 class="col-12">
+        {{ $t(key+'Achievs') }}
+      </h2><div
+        v-for="achievment in category.achievements"
+        class="col-3 text-center"
+      >
+        <div
+          class="achievement-container"
+          :data-popover-html="achievment.title + achievment.text"
+          popover-placement="achievPopoverPlacement"
+          popover-append-to-body="achievAppendToBody"
+        >
+          <div
+            popover-trigger="mouseenter"
+            :data-popover-html="achievment.title + achievment.text"
+            popover-placement="achievPopoverPlacement"
+            popover-append-to-body="achievAppendToBody"
+          >
+            <div
+              v-if="achievment.earned"
+              class="achievement"
+              :class="achievment.icon + '2x'"
+            >
+              <div
+                v-if="achievment.optionalCount"
+                class="counter badge badge-info stack-count"
+              >
+                {{ achievment.optionalCount }}
+              </div>
+            </div><div
+              v-if="!achievment.earned"
+              class="achievement achievement-unearned2x"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div><div class="row">
+      <div class="col-6">
+        <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>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/userMenu/inbox.vue b/website/client/src/components/userMenu/inbox.vue
index 4846ea3d3b..c706530c40 100644
--- a/website/client/src/components/userMenu/inbox.vue
+++ b/website/client/src/components/userMenu/inbox.vue
@@ -1,71 +1,147 @@
-<template lang="pug">
-  b-modal#inbox-modal(title="", :hide-footer="true", size='lg', @shown="onModalShown", @hide="onModalHide")
-    .header-wrap.container.align-items-center(slot="modal-header")
-      .row.align-items-center
-        .col-4
-          .row.align-items-center
-            .col-2
-              .svg-icon.envelope(v-html="icons.messageIcon")
-            .col-6
-              h2.text-center(v-once) {{ $t('messages') }}
-        .col-4.offset-3
-          toggle-switch.float-right(
-            :label="optTextSet.switchDescription",
+<template>
+  <b-modal
+    id="inbox-modal"
+    title=""
+    :hide-footer="true"
+    size="lg"
+    @shown="onModalShown"
+    @hide="onModalHide"
+  >
+    <div
+      slot="modal-header"
+      class="header-wrap container align-items-center"
+    >
+      <div class="row align-items-center">
+        <div class="col-4">
+          <div class="row align-items-center">
+            <div class="col-2">
+              <div
+                class="svg-icon envelope"
+                v-html="icons.messageIcon"
+              ></div>
+            </div><div class="col-6">
+              <h2
+                v-once
+                class="text-center"
+              >
+                {{ $t('messages') }}
+              </h2>
+            </div>
+          </div>
+        </div><div class="col-4 offset-3">
+          <toggle-switch
+            class="float-right"
+            :label="optTextSet.switchDescription"
             :checked="!this.user.inbox.optOut"
-            :hoverText="optTextSet.popoverText",
+            :hover-text="optTextSet.popoverText"
             @change="toggleOpt()"
-          )
-        .col-1
-          .close
-            span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.svgClose", @click="close()")
-    .row
-      .col-4.sidebar
-        .search-section
-          b-form-input(:placeholder="$t('search')", v-model='search')
-        .empty-messages.text-center(v-if='filtersConversations.length === 0')
-          .svg-icon.envelope(v-html="icons.messageIcon")
-          h4(v-once) {{$t('emptyMessagesLine1')}}
-          p(v-if="!user.flags.chatRevoked") {{$t('emptyMessagesLine2')}}
-        .conversations(v-if='filtersConversations.length > 0')
-          .conversation(v-for='conversation in filtersConversations', @click='selectConversation(conversation.key)',
-            :class="{active: selectedConversation.key === conversation.key}")
-            div
-              h3(:class="userLevelStyle(conversation)") {{ conversation.name }}
-                .svg-icon(v-html="tierIcon(conversation)")
-            .time
-              span.mr-1(v-if='conversation.username') @{{ conversation.username }} •
-              span(v-if="conversation.date") {{ conversation.date | timeAgo }}
-            div.messagePreview {{ conversation.lastMessageText ? removeTags(parseMarkdown(conversation.lastMessageText)) : '' }}
-      .col-8.messages.d-flex.flex-column.justify-content-between
-        .empty-messages.text-center(v-if='!selectedConversation.key')
-          .svg-icon.envelope(v-html="icons.messageIcon")
-          h4 {{placeholderTexts.title}}
-          p(v-html="placeholderTexts.description")
-        .empty-messages.text-center(v-if='selectedConversation && selectedConversationMessages.length === 0')
-          p {{ $t('beginningOfConversation', {userName: selectedConversation.name})}}
-        chat-messages.message-scroll(
-          v-if="selectedConversation && selectedConversationMessages.length > 0",
-          :chat='selectedConversationMessages',
-          :inbox='true',
-          @message-removed='messageRemoved',
-          ref="chatscroll",
-
-          :canLoadMore="canLoadMore",
-          :isLoading="messagesLoading",
-          @triggerLoad="infiniteScrollTrigger"
-        )
-        .pm-disabled-caption.text-center(v-if="user.inbox.optOut && selectedConversation.key")
-          h4 {{$t('PMDisabledCaptionTitle')}}
-          p {{$t('PMDisabledCaptionText')}}
-        .new-message-row(v-if='selectedConversation.key && !user.flags.chatRevoked')
-          textarea(
-            v-model='newMessage',
-            @keyup.ctrl.enter='sendPrivateMessage()',
-            maxlength='3000'
-          )
-          button.btn.btn-secondary(@click='sendPrivateMessage()') {{$t('send')}}
-          .row
-            span.ml-3 {{ currentLength }} / 3000
+          />
+        </div><div class="col-1">
+          <div class="close">
+            <span
+              class="svg-icon inline icon-10"
+              aria-hidden="true"
+              @click="close()"
+              v-html="icons.svgClose"
+            ></span>
+          </div>
+        </div>
+      </div>
+    </div><div class="row">
+      <div class="col-4 sidebar">
+        <div class="search-section">
+          <b-form-input
+            v-model="search"
+            :placeholder="$t('search')"
+          />
+        </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>
+            {{ $t('emptyMessagesLine1') }}
+          </h4><p v-if="!user.flags.chatRevoked">
+            {{ $t('emptyMessagesLine2') }}
+          </p>
+        </div><div
+          v-if="filtersConversations.length > 0"
+          class="conversations"
+        >
+          <div
+            v-for="conversation in filtersConversations"
+            class="conversation"
+            :class="{active: selectedConversation.key === conversation.key}"
+            @click="selectConversation(conversation.key)"
+          >
+            <div>
+              <h3 :class="userLevelStyle(conversation)">
+                {{ conversation.name }}<div
+                  class="svg-icon"
+                  v-html="tierIcon(conversation)"
+                ></div>
+              </h3>
+            </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.lastMessageText ? removeTags(parseMarkdown(conversation.lastMessageText)) : '' }}
+            </div>
+          </div>
+        </div>
+      </div><div class="col-8 messages d-flex flex-column justify-content-between">
+        <div
+          v-if="!selectedConversation.key"
+          class="empty-messages text-center"
+        >
+          <div
+            class="svg-icon envelope"
+            v-html="icons.messageIcon"
+          ></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
+          v-if="selectedConversation && selectedConversationMessages.length > 0"
+          ref="chatscroll"
+          class="message-scroll"
+          :chat="selectedConversationMessages"
+          :inbox="true"
+          :can-load-more="canLoadMore"
+          :is-loading="messagesLoading"
+          @message-removed="messageRemoved"
+@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
+          v-if="selectedConversation.key && !user.flags.chatRevoked"
+          class="new-message-row"
+        >
+          <textarea
+            v-model="newMessage"
+            maxlength="3000"
+            @keyup.ctrl.enter="sendPrivateMessage()"
+          ></textarea><button
+            class="btn btn-secondary"
+            @click="sendPrivateMessage()"
+          >
+            {{ $t('send') }}
+          </button><div class="row">
+            <span class="ml-3">{{ currentLength }} / 3000</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
@@ -508,8 +584,8 @@ export default {
 
       // Remove the placeholder message
       if (
-        this.initiatedConversation &&
-        this.initiatedConversation.uuid === this.selectedConversation.key
+        this.initiatedConversation
+        && this.initiatedConversation.uuid === this.selectedConversation.key
       ) {
         this.loadedConversations.unshift(this.initiatedConversation);
         this.initiatedConversation = null;
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 47b5b7ad01..844044cd79 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -1,148 +1,327 @@
-<template lang="pug">
-.profile(v-if='user')
-  .header
-    .profile-actions
-      button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
-        .svg-icon.message-icon(v-html="icons.message")
-      button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
-        .svg-icon.gift-icon(v-html="icons.gift")
-      button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
-        @click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
-        .svg-icon.remove-icon(v-html="icons.remove")
-      button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
-        @click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
-        .svg-icon.positive-icon(v-html="icons.positive")
-      button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin',
-        @click="toggleAdminTools()", v-b-tooltip.hover.right="'Admin - Toggle Tools'")
-        .svg-icon.positive-icon(v-html="icons.staff")
-    .row.admin-profile-actions(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
-      .col-12.text-right
-        span.admin-action(v-if='!hero.flags || (hero.flags && !hero.flags.chatShadowMuted)',
-          @click="adminTurnOnShadowMuting()", v-b-tooltip.hover.bottom="'Turn on Shadow Muting'")
-          | shadow-mute
-        span.admin-action(v-if='hero.flags && hero.flags.chatShadowMuted',
-          @click="adminTurnOffShadowMuting()", v-b-tooltip.hover.bottom="'Turn off Shadow Muting'")
-          | un-shadow-mute
-        span.admin-action(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
-          @click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Revoke Chat Privileges'")
-          | mute
-        span.admin-action(v-if='hero.flags && hero.flags.chatRevoked',
-          @click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'")
-          | un-mute
-        span.admin-action(v-if='!hero.auth.blocked',
-          @click="adminBlockUser()", v-b-tooltip.hover.bottom="'Ban User'")
-          | ban
-        span.admin-action(v-if='hero.auth.blocked',
-          @click="adminUnblockUser()", v-b-tooltip.hover.bottom="'Un-Ban User'")
-          | un-ban
-    .row
-      .col-12
-        member-details(:member="user")
-  .row
-    .col-12.col-md-6.offset-md-3.text-center.nav
-      .nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
-      .nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
-      .nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
-  #userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
-    .row
-      .col-12.col-md-8
-        .header.mb-3
-          h1 {{user.profile.name}}
-          .name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
-      .col-12.col-md-4
-        button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing', style='float:right;') {{ $t('edit') }}
-    .row(v-if='!editing')
-      .col-12.col-md-8
-        .about.profile-section
-          h2 {{ $t('about') }}
-          p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
-          p(v-else) {{ $t('noDescription') }}
-        .photo.profile-section
-          h2 {{ $t('photo') }}
-          img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
-          p(v-else) {{ $t('noPhoto') }}
-
-      .col-12.col-md-4
-        .info.profile-section
-          h2 {{ $t('info') }}
-          .info-item
-            .info-item-label {{ $t('joined') }}:
-            .info-item-value {{userJoinedDate}}
-          .info-item
-            .info-item-label  {{ $t('totalLogins') }}:
-            .info-item-value {{ user.loginIncentives }}
-          .info-item
-            .info-item-label  {{ $t('latestCheckin') }}:
-            .info-item-value {{userLastLoggedIn}}
-          .info-item
-            | {{getProgressDisplay()}}
-            .progress
-              .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
-                span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
-        // @TODO: Implement in V2 .social
-
-    .row(v-if='editing')
-      h1 {{$t('editProfile')}}
-      .col-12
-        .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
-
-        // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
-        .form-group
-          label {{ $t('displayName') }}
-          input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
-        .form-group
-          label {{ $t('photoUrl') }}
-          input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
-        .form-group
-          label {{ $t('about') }}
-          textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
-          // include ../../shared/formatting-help
-        //- .form-group
-        //-   label Facebook
-        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
-        //- .form-group
-        //-   label Instagram
-        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
-        //- .form-group
-        //-   label Twitter
-        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
-
-      .col-12.text-center
-        button.btn.btn-primary(@click='save()') {{ $t("save") }}
-        button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
-  #achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
-    .row(v-for='(category, key) in achievements')
-      h2.col-12.text-center {{ $t(key+'Achievs') }}
-      .col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
-        .box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
-          b-popover(
-            :target="'#' + key + '-achievement'",
-            triggers="hover",
-            placement="top",
-          )
-            h4.popover-content-title {{ achievement.title }}
-            div.popover-content-text(v-html="achievement.text")
-          .achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
-            .counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
-          .achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
-    hr.col-12
-    .row
-      .col-12.col-md-6(v-if='user.achievements.challenges')
-        .achievement-icon.achievement-karaoke
-        h2.text-center {{$t('challengesWon')}}
-        div(v-for='chal in user.achievements.challenges')
-          span(v-markdown='chal')
-          hr
-      .col-12.col-md-6(v-if='user.achievements.quests')
-        .achievement-icon.achievement-alien
-        h2.text-center {{$t('questsCompleted')}}
-        div(v-for='(value, key) in user.achievements.quests')
-          span {{ content.quests[key].text() }} ({{ value }})
-  profileStats(
-    :user='user',
-    v-show='selectedPage === "stats"',
-    :showAllocation='showAllocation()',
-    v-if='user.preferences')
+<template>
+  <div
+    v-if="user"
+    class="profile"
+  >
+    <div class="header">
+      <div class="profile-actions">
+        <button
+          v-b-tooltip.hover.left="$t('sendMessage')"
+          class="btn btn-secondary message-icon"
+          @click="sendMessage()"
+        >
+          <div
+            class="svg-icon message-icon"
+            v-html="icons.message"
+          ></div>
+        </button><button
+          v-b-tooltip.hover.bottom="$t('sendGems')"
+          class="btn btn-secondary gift-icon"
+          @click="openSendGemsModal()"
+        >
+          <div
+            class="svg-icon gift-icon"
+            v-html="icons.gift"
+          ></div>
+        </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"
+          @click="blockUser()"
+        >
+          <div
+            class="svg-icon remove-icon"
+            v-html="icons.remove"
+          ></div>
+        </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"
+          @click="unblockUser()"
+        >
+          <div
+            class="svg-icon positive-icon"
+            v-html="icons.positive"
+          ></div>
+        </button><button
+          v-if="this.userLoggedIn.contributor.admin"
+          v-b-tooltip.hover.right="'Admin - Toggle Tools'"
+          class="btn btn-secondary positive-icon"
+          @click="toggleAdminTools()"
+        >
+          <div
+            class="svg-icon positive-icon"
+            v-html="icons.staff"
+          ></div>
+        </button>
+      </div><div
+        v-if="this.userLoggedIn.contributor.admin && adminToolsLoaded"
+        class="row admin-profile-actions"
+      >
+        <div class="col-12 text-right">
+          <span
+            v-if="!hero.flags || (hero.flags && !hero.flags.chatShadowMuted)"
+            v-b-tooltip.hover.bottom="'Turn on Shadow Muting'"
+            class="admin-action"
+            @click="adminTurnOnShadowMuting()"
+          >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
+            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
+            v-if="hero.flags && hero.flags.chatRevoked"
+            v-b-tooltip.hover.bottom="'Reinstate Chat Privileges'"
+            class="admin-action"
+            @click="adminReinstateChat()"
+          >un-mute</span><span
+            v-if="!hero.auth.blocked"
+            v-b-tooltip.hover.bottom="'Ban User'"
+            class="admin-action"
+            @click="adminBlockUser()"
+          >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 class="col-12">
+          <member-details :member="user" />
+        </div>
+      </div>
+    </div><div class="row">
+      <div class="col-12 col-md-6 offset-md-3 text-center nav">
+        <div
+          class="nav-item"
+          :class="{active: selectedPage === 'profile'}"
+          @click="selectPage('profile')"
+        >
+          {{ $t('profile') }}
+        </div><div
+          class="nav-item"
+          :class="{active: selectedPage === 'stats'}"
+          @click="selectPage('stats')"
+        >
+          {{ $t('stats') }}
+        </div><div
+          class="nav-item"
+          :class="{active: selectedPage === 'achievements'}"
+          @click="selectPage('achievements')"
+        >
+          {{ $t('achievements') }}
+        </div>
+      </div>
+    </div><div
+      v-show="selectedPage === 'profile'"
+      v-if="user.profile"
+      id="userProfile"
+      class="standard-page"
+    >
+      <div class="row">
+        <div class="col-12 col-md-8">
+          <div class="header mb-3">
+            <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">
+          <button
+            v-if="user._id === userLoggedIn._id"
+            class="btn btn-secondary"
+            style="float:right;"
+            @click="editing = !editing"
+          >
+            {{ $t('edit') }}
+          </button>
+        </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
+              v-if="user.profile.blurb"
+              v-markdown="user.profile.blurb"
+            ></p><p v-else>
+              {{ $t('noDescription') }}
+            </p>
+          </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>
+              {{ $t('noPhoto') }}
+            </p>
+          </div>
+        </div><div class="col-12 col-md-4">
+          <div class="info profile-section">
+            <h2>{{ $t('info') }}</h2><div class="info-item">
+              <div class="info-item-label">
+                {{ $t('joined') }}:
+              </div><div class="info-item-value">
+                {{ userJoinedDate }}
+              </div>
+            </div><div class="info-item">
+              <div class="info-item-label">
+                {{ $t('totalLogins') }}:
+              </div><div class="info-item-value">
+                {{ user.loginIncentives }}
+              </div>
+            </div><div class="info-item">
+              <div class="info-item-label">
+                {{ $t('latestCheckin') }}:
+              </div><div class="info-item-value">
+                {{ userLastLoggedIn }}
+              </div>
+            </div><div class="info-item">
+              {{ getProgressDisplay() }}<div class="progress">
+                <div
+                  class="progress-bar"
+                  role="progressbar"
+                  :aria-valuenow="incentivesProgress"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  :style="{width: incentivesProgress + '%'}"
+                >
+                  <span class="sr-only">{{ incentivesProgress }}% {{ $t('complete') }}</span>
+                </div>
+              </div>
+            </div>
+          </div><!-- @TODO: Implement in V2 .social-->
+        </div>
+      </div><div
+        v-if="editing"
+        class="row"
+      >
+        <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
+              v-model="editingProfile.name"
+              class="form-control"
+              type="text"
+              :placeholder="$t('fullName')"
+            >
+          </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
+              v-model="editingProfile.blurb"
+              class="form-control"
+              rows="5"
+              :placeholder="$t('displayBlurbPlaceholder')"
+            ></textarea><!-- include ../../shared/formatting-help-->
+          </div>
+        </div><div class="col-12 text-center">
+          <button
+            class="btn btn-primary"
+            @click="save()"
+          >
+            {{ $t("save") }}
+          </button><button
+            class="btn btn-warning"
+            @click="editing = false"
+          >
+            {{ $t("cancel") }}
+          </button>
+        </div>
+      </div>
+    </div><div
+      v-show="selectedPage === 'achievements'"
+      v-if="user.achievements"
+      id="achievements"
+      class="standard-page container"
+    >
+      <div
+        v-for="(category, key) in achievements"
+        class="row"
+      >
+        <h2 class="col-12 text-center">
+          {{ $t(key+'Achievs') }}
+        </h2><div
+          v-for="(achievement, key) in category.achievements"
+          class="col-12 col-md-3 text-center"
+        >
+          <div
+            :id="key + '-achievement'"
+            class="box achievement-container"
+            :class="{'achievement-unearned': !achievement.earned}"
+          >
+            <b-popover
+              :target="'#' + key + '-achievement'"
+              triggers="hover"
+              placement="top"
+            >
+              <h4 class="popover-content-title">
+                {{ achievement.title }}
+              </h4><div
+                class="popover-content-text"
+                v-html="achievement.text"
+              ></div>
+            </b-popover><div
+              v-if="achievement.earned"
+              class="achievement"
+              :class="achievement.icon + '2x'"
+            >
+              <div
+                v-if="achievement.optionalCount"
+                class="counter badge badge-info stack-count"
+              >
+                {{ achievement.optionalCount }}
+              </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
+          v-if="user.achievements.challenges"
+          class="col-12 col-md-6"
+        >
+          <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>
+          </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">
+            {{ $t('questsCompleted') }}
+          </h2><div v-for="(value, key) in user.achievements.quests">
+            <span>{{ content.quests[key].text() }} ({{ value }})</span>
+          </div>
+        </div>
+      </div>
+    </div><profileStats
+      v-show="selectedPage === 'stats'"
+      v-if="user.preferences"
+      :user="user"
+      :show-allocation="showAllocation()"
+    />
+  </div>
 </template>
 
 <style lang="scss" >
diff --git a/website/client/src/components/userMenu/profileModal.vue b/website/client/src/components/userMenu/profileModal.vue
index 4c04e95408..6437ecba59 100644
--- a/website/client/src/components/userMenu/profileModal.vue
+++ b/website/client/src/components/userMenu/profileModal.vue
@@ -1,6 +1,18 @@
-<template lang="pug">
-  b-modal#profile(size='lg', :hide-footer="true", :hide-header="true", @hidden="onHidden", @shown="onShown()")
-    profile(:userId='userId', :startingPage='startingPage', style="margin-top:24px;")
+<template>
+  <b-modal
+    id="profile"
+    size="lg"
+    :hide-footer="true"
+    :hide-header="true"
+    @hidden="onHidden"
+    @shown="onShown()"
+  >
+    <profile
+      :user-id="userId"
+      :starting-page="startingPage"
+      style="margin-top:24px;"
+    />
+  </b-modal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/userMenu/profilePage.vue b/website/client/src/components/userMenu/profilePage.vue
index cfb7a0f50b..19151d9e29 100644
--- a/website/client/src/components/userMenu/profilePage.vue
+++ b/website/client/src/components/userMenu/profilePage.vue
@@ -1,7 +1,12 @@
-<template lang="pug">
-  .container
-    .standard-page
-      profile(:userId='userId', :startingPage='startingPage')
+<template>
+  <div class="container">
+    <div class="standard-page">
+      <profile
+        :user-id="userId"
+        :starting-page="startingPage"
+      />
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/userMenu/profileStats.vue b/website/client/src/components/userMenu/profileStats.vue
index 3b62593825..8a1fb5a2f5 100644
--- a/website/client/src/components/userMenu/profileStats.vue
+++ b/website/client/src/components/userMenu/profileStats.vue
@@ -1,152 +1,240 @@
-<template lang="pug">
-  #stats.standard-page
-    .row
-      .col-12.col-md-6
-        h2.text-center {{$t('equipment')}}
-        .well
-          .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
-            .box(
-              :id="key",
-              v-if="label !== 'skip'",
-              :class='{white: equippedItems[key] && equippedItems[key].indexOf("base_0") === -1}'
-            )
-              div(:class="`shop_${equippedItems[key]}`")
-            b-popover(
-              v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1",
-              :target="key",
-              triggers="hover",
-              :placement="'bottom'",
-              :preventOverflow="false",
-            )
-              h4.popover-title-only {{ getGearTitle(equippedItems[key]) }}
-              attributesGrid.attributesGrid(
-                :item="content.gear.flat[equippedItems[key]]",
+<template>
+  <div
+    id="stats"
+    class="standard-page"
+  >
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <h2 class="text-center">
+          {{ $t('equipment') }}
+        </h2><div class="well">
+          <div
+            v-for="(label, key) in equipTypes"
+            class="col-12 col-md-4 item-wrapper"
+          >
+            <div
+              v-if="label !== 'skip'"
+              :id="key"
+              class="box"
+              :class="{white: equippedItems[key] && equippedItems[key].indexOf('base_0') === -1}"
+            >
+              <div :class="`shop_${equippedItems[key]}`"></div>
+            </div><b-popover
+              v-if="label !== 'skip' && equippedItems[key] && equippedItems[key].indexOf('base_0') === -1"
+              :target="key"
+              triggers="hover"
+              :placement="'bottom'"
+              :prevent-overflow="false"
+            >
+              <h4 class="popover-title-only">
+                {{ getGearTitle(equippedItems[key]) }}
+              </h4><attributesGrid
+                class="attributesGrid"
+                :item="content.gear.flat[equippedItems[key]]"
                 :user="user"
-              )
-
-            h3(v-if="label !== 'skip'") {{ label }}
-      .col-12.col-md-6
-        h2.text-center {{$t('costume')}}
-        .well
-          // Use similar for loop for costume items, except show background if label is 'skip'.
-          .col-12.col-md-4.item-wrapper(v-for="(label, key) in equipTypes")
-            // Append a "C" to the key name since HTML IDs have to be unique.
-            .box(
-              :id="key + 'C'",
-              v-if="label !== 'skip'",
-              :class='{white: costumeItems[key] && costumeItems[key].indexOf("base_0") === -1}'
-            )
-              div(:class="`shop_${costumeItems[key]}`")
-            // Show background on 8th tile rather than a piece of equipment.
-            .box(v-if="label === 'skip'",
-              :class='{white: user.preferences.background}', style="overflow:hidden"
-            )
-              div(:class="'icon_background_' + user.preferences.background")
-            b-popover(
-              v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1",
-              :target="key + 'C'",
-              triggers="hover",
-              :placement="'bottom'",
-              :preventOverflow="false",
-            )
-              h4.popover-title-only {{ getGearTitle(costumeItems[key]) }}
-              attributesGrid.attributesGrid(
-               :item="content.gear.flat[costumeItems[key]]",
-               :user="user"
-              )
-
-            h3(v-if="label !== 'skip'") {{ label }}
-            h3(v-else) {{ $t('background') }}
-    .row.pet-mount-row
-      .col-12.col-md-6
-        h2.text-center(v-once) {{ $t('pets') }}
-        .well.pet-mount-well
-          .row.col-12
-            .col-12.col-md-4
-              .box(:class='{white: user.items.currentPet}')
-                .Pet(:class="`Pet-${user.items.currentPet}`")
-            .col-12.col-md-8
-              div
-                | {{ formatAnimal(user.items.currentPet, 'pet') }}
-              div
-                strong {{ $t('petsFound') }}:
-                | {{ totalCount(user.items.pets) }}
-              div
-                strong {{ $t('beastMasterProgress') }}:
-                | {{ beastMasterProgress(user.items.pets) }}
-      .col-12.col-md-6
-        h2.text-center(v-once) {{ $t('mounts') }}
-        .well.pet-mount-well
-          .row.col-12
-            .col-12.col-md-4
-              .box(:class='{white: user.items.currentMount}')
-                .mount(:class="`Mount_Icon_${user.items.currentMount}`")
-            .col-12.col-md-8
-              div
-                | {{ formatAnimal(user.items.currentMount, 'mount') }}
-              div
-                strong {{ $t('mountsTamed') }}:
-                span {{ totalCount(user.items.mounts) }}
-              div
-                strong {{ $t('mountMasterProgress') }}:
-                span {{ mountMasterProgress(user.items.mounts) }}
-    #attributes.row
-      hr.col-12
-      h2.col-12 {{$t('attributes')}}
-      .col-12.col-md-6(v-for="(statInfo, stat) in stats")
-        .row.col-12.stats-column
-          .col-12.col-md-4.attribute-label
-            span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
-              :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
-            .stat-title(:class='stat') {{ $t(statInfo.title) }}
-            strong.number {{totalStatPoints(stat) | floorWholeNumber}}
-          .col-12.col-md-6
-            ul.bonus-stats
-              li
-                strong {{$t('level')}}:
-                | {{statsComputed.levelBonus[stat]}}
-              li
-                strong {{$t('equipment')}}:
-                | {{statsComputed.gearBonus[stat]}}
-              li
-                strong {{$t('class')}}:
-                | {{statsComputed.classBonus[stat]}}
-              li
-                strong {{$t('allocated')}}:
-                | {{totalAllocatedStats(stat)}}
-              li
-                strong {{$t('buffs')}}:
-                | {{user.stats.buffs[stat]}}
-    #allocation(v-if='showAllocation')
-      .row.title-row
-        .col-12.col-md-6
-          h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
-          h3
-            | {{$t('statPoints')}}
-            .counter.badge.badge-pill(v-if='user.stats.points || userLevel100Plus')
-              | {{pointsRemaining}}
-        .col-12.col-md-6
-          .float-right
-            toggle-switch(
-              :label="$t('autoAllocation')",
-              v-model='user.preferences.automaticAllocation',
-              @change='setAutoAllocate()'
-            )
-      .row
-        .col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
-          .box.white.row.col-12
-            .col-9
-              div(:class='stat') {{ $t(stats[stat].title) }}
-              .number {{totalAllocatedStats(stat)}}
-              .points {{$t('pts')}}
-            .col-3
-              div
-                .up(v-if='showStatsSave', @click='allocate(stat)')
-              div
-                .down(v-if='showStatsSave', @click='deallocate(stat)')
-      .row.save-row(v-if='showStatsSave')
-        .col-12.col-md-6.offset-md-3.text-center
-          button.btn.btn-primary(@click='saveAttributes()', :disabled='loading') {{ this.loading ?  $t('loading') : $t('save') }}
+              />
+            </b-popover><h3 v-if="label !== 'skip'">
+              {{ label }}
+            </h3>
+          </div>
+        </div>
+      </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
+            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
+              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
+              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
+              v-if="label !== 'skip' && costumeItems[key] && costumeItems[key].indexOf('base_0') === -1"
+              :target="key + 'C'"
+              triggers="hover"
+              :placement="'bottom'"
+              :prevent-overflow="false"
+            >
+              <h4 class="popover-title-only">
+                {{ getGearTitle(costumeItems[key]) }}
+              </h4><attributesGrid
+                class="attributesGrid"
+                :item="content.gear.flat[costumeItems[key]]"
+                :user="user"
+              />
+            </b-popover><h3 v-if="label !== 'skip'">
+              {{ label }}
+            </h3><h3 v-else>
+              {{ $t('background') }}
+            </h3>
+          </div>
+        </div>
+      </div>
+    </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">
+          <div class="row col-12">
+            <div class="col-12 col-md-4">
+              <div
+                class="box"
+                :class="{white: user.items.currentPet}"
+              >
+                <div
+                  class="Pet"
+                  :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>
+        </div>
+      </div><div class="col-12 col-md-6">
+        <h2
+          v-once
+          class="text-center"
+        >
+          {{ $t('mounts') }}
+        </h2><div class="well pet-mount-well">
+          <div class="row col-12">
+            <div class="col-12 col-md-4">
+              <div
+                class="box"
+                :class="{white: user.items.currentMount}"
+              >
+                <div
+                  class="mount"
+                  :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>
+        </div>
+      </div>
+    </div><div
+      id="attributes"
+      class="row"
+    >
+      <hr class="col-12"><h2 class="col-12">
+        {{ $t('attributes') }}
+      </h2><div
+        v-for="(statInfo, stat) in stats"
+        class="col-12 col-md-6"
+      >
+        <div class="row col-12 stats-column">
+          <div class="col-12 col-md-4 attribute-label">
+            <span
+              class="hint"
+              :popover-title="$t(statInfo.title)"
+              popover-placement="right"
+              :popover="$t(statInfo.popover)"
+              popover-trigger="mouseenter"
+            ></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">
+            <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>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div><div
+      v-if="showAllocation"
+      id="allocation"
+    >
+      <div class="row title-row">
+        <div class="col-12 col-md-6">
+          <h3
+            v-if="userLevel100Plus"
+            v-once
+            v-html="$t('noMoreAllocate')"
+          ></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 class="float-right">
+            <toggle-switch
+              v-model="user.preferences.automaticAllocation"
+              :label="$t('autoAllocation')"
+              @change="setAutoAllocate()"
+            />
+          </div>
+        </div>
+      </div><div class="row">
+        <div
+          v-for="(statInfo, stat) in allocateStatsList"
+          class="col-12 col-md-3"
+        >
+          <div class="box white row col-12">
+            <div class="col-9">
+              <div :class="stat">
+                {{ $t(stats[stat].title) }}
+              </div><div class="number">
+                {{ totalAllocatedStats(stat) }}
+              </div><div class="points">
+                {{ $t('pts') }}
+              </div>
+            </div><div class="col-3">
+              <div>
+                <div
+                  v-if="showStatsSave"
+                  class="up"
+                  @click="allocate(stat)"
+                ></div>
+              </div><div>
+                <div
+                  v-if="showStatsSave"
+                  class="down"
+                  @click="deallocate(stat)"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div><div
+        v-if="showStatsSave"
+        class="row save-row"
+      >
+        <div class="col-12 col-md-6 offset-md-3 text-center">
+          <button
+            class="btn btn-primary"
+            :disabled="loading"
+            @click="saveAttributes()"
+          >
+            {{ this.loading ? $t('loading') : $t('save') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/userMenu/stats.vue b/website/client/src/components/userMenu/stats.vue
index fed97126ad..7f12d40dac 100644
--- a/website/client/src/components/userMenu/stats.vue
+++ b/website/client/src/components/userMenu/stats.vue
@@ -1,206 +1,276 @@
-<template lang="pug">
-  .standard-page
-    h1 Stats
-    .row
-      .col-6
-        h2.text-center Equipment
-        .well.row
-          .col-4
-      .col-6
-        h2.text-center Costume
-    .row
-      .col-6
-        h2.text-center Pet
-      .col-6
-        h2.text-center Mount
-    .row
-      hr.col-12
-      h2.col-12 Attributes
-      .col-6
-      .col-6
-    .row
-      .col-6
-      .col-6
-
-    .row
-      .col-4
-        div
-          h3 Basics
-          ul
-            li Health: {{user.stats.hp}}/{{user.stats.maxHealth}}
-            li Mana: {{user.stats.mp}}/{{user.stats.maxMP}}
-            li Gold: {{user.stats.gp}}
-            li Level: {{user.stats.lvl}}
-            li Experience: {{user.stats.exp}}
-
-        div(v-if='user.flags.itemsEnabled')
-          h3 Battle Gear
-          ul
-            li(v-for='(key, itemType) in user.items.gear.equipped', v-if='flatGear[key]')
-              strong {{ flatGear[key].text() }}
-              strong(
-                v-if='flatGear[key].str || flatGear[key].con || flatGear[key].per || flatGear[key].int'
-              ) :&nbsp;
-                span(
-                  v-for='stat in ["str","con","per","int"]',
-                  v-if='flatGear[key][stat]'
-                ) {{flatGear[key][stat]}} {{ $t(stat) }}&nbsp;
-
-        div(v-if='user.preferences.costume')
-          h4(v-once) {{ $t('costume') }}
-          div
-            div(ng-repeat='(key, itemType) in user.items.gear.costume')
-              strong {{flatGear[key].text()}}
-
-        div
-          h3 Background
-          ul
-            li(v-if='!user.preferences.background') None
-            li(v-if='user.preferences.background') {{ user.preferences.background }}
-
-        div(ng-if='user.flags.dropsEnabled')
-          h3(v-once) {{ $t('pets') }}
-          ul
-            li(ng-if='user.items.currentPet')
-              | {{ $t('activePet') }}:
-              | {{ formatAnimal(user.items.currentPet, 'pet') }}
-            li
-              | {{ $t('petsFound') }}:
-              | {{ totalCount(user.items.pets) }}
-            li
-              | {{ $t('beastMasterProgress') }}:
-              | {{ beastMasterProgress(user.items.pets) }}
-
-          h3(v-once) {{ $t('mounts') }}
-          ul
-            li(v-if='user.items.currentMount')
-              | {{ $t('activeMount') }}:
-              | {{ formatAnimal(user.items.currentMount, 'mount') }}
-            li
-              | {{ $t('mountsTamed') }}:
-              | {{ totalCount(user.items.mounts) }}
-            li
-              | {{ $t('mountMasterProgress') }}:
-              | {{ mountMasterProgress(user.items.mounts) }}
-
-      .col-4
-        h3(v-once) {{ $t('attributes') }}
-        .row(v-for="(statInfo, stat) in stats")
-          .col-4
-            span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
-              :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
-              strong {{ $t(statInfo.title) }}
-            strong : {{ statsComputed[stat] }}
-          .col-6
-            ul.bonus-stats
-              li
-                | {{ $t('levelBonus') }}
-                | {{statsComputed.levelBonus[stat]}}
-              li
-                | {{ $t('gearBonus') }}
-                |  {{statsComputed.gearBonus[stat]}}
-              li
-                | {{ $t('classBonus') }}
-                |  {{statsComputed.classBonus[stat]}}
-              li
-                | {{ $t('allocatedPoints') }}
-                |  {{user.stats[stat]}}
-              li
-                | {{ $t('buffs') }}
-                | {{user.stats.buffs[stat]}}
-
-        div(v-if='user.stats.buffs.stealth')
-          strong.hint(:popover-title="$t('stealth')", popover-trigger='mouseenter',
-            popover-placement='right', :popover="$t('stealthNewDay')", v-once)
-            | {{ $t('stealth') }}
-          strong : {{user.stats.buffs.stealth}}&nbsp;
-
-        div(v-if='user.stats.buffs.streaks')
-          div
-            strong.hint(popover-title="$t('streaksFrozen')", popover-trigger='mouseenter',
-              popover-placement='right', :popover="$t('streaksFrozenText')")
-            | {{ $t('streaksFrozen') }}
-
-      .col-4(v-if='hasClass')
-          h3(v-once) {{ $t('characterBuild') }}
-          h4(v-once) {{ $t('class') + ': ' }}
-            span {{ classText }}&nbsp;
-            button.btn.btn-danger.btn-xs(@click='changeClass(null)', v-once) {{ $t('changeClass') }}
-            small.cost 3
-              span.Pet_Currency_Gem1x.inline-gems
-
-          div
-            div
-              p(v-if='userLevel100Plus', v-once) {{ $t('noMoreAllocate') }}
-              p(v-if='user.stats.points || userLevel100Plus')
-                strong.inline
-                  | {{user.stats.points}}&nbsp;
-                strong.hint(popover-trigger='mouseenter',
-                  popover-placement='right', :popover="$t('levelPopover')") {{ $t('unallocated') }}
-            div
-              fieldset.auto-allocate
-                  .checkbox
-                    label
-                      input(type='checkbox', v-model='user.preferences.automaticAllocation',
-                        @change='set({"preferences.automaticAllocation": user.preferences.automaticAllocation, "preferences.allocationMode": "taskbased"})')
-                      span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('autoAllocationPop')") {{ $t('autoAllocation') }}
-                  form(v-if='user.preferences.automaticAllocation', style='margin-left:1em')
-                    .radio
-                      label
-                        input(type='radio', name='allocationMode', value='flat', v-model='user.preferences.allocationMode',
-                          @change='set({"preferences.allocationMode": "flat"})')
-                        span.hint(popover-trigger='mouseenter', popover-placement='right', :popover="$t('evenAllocationPop')") {{ $t('evenAllocation') }}
-                    .radio
-                      label
-                        input(
-                          type='radio',
-                          name='allocationMode',
-                          value='classbased',
-                          v-model='user.preferences.allocationMode',
-                          @change='set({"preferences.allocationMode": "classbased"})'
-                        )
-                        span.hint(
-                          popover-trigger='mouseenter',
-                          popover-placement='right',
-                          :popover="$t('classAllocationPop')"
-                        ) {{ $t('classAllocation') }}
-                    .radio
-                      label
-                        input(
-                          type='radio',
-                          name='allocationMode',
-                          value='taskbased',
-                          v-model='user.preferences.allocationMode',
-                          @change='set({"preferences.allocationMode": "taskbased"})'
-                        )
-                        span.hint(
-                          popover-trigger='mouseenter',
-                          popover-placement='right',
-                          :popover="$t('taskAllocationPop')"
-                        ) {{ $t('taskAllocation') }}
-                  div(
-                    v-if='user.preferences.automaticAllocation && !(user.preferences.allocationMode === "taskbased") && (user.stats.points > 0)'
-                  )
-                    button.btn.btn-primary.btn-xs(
-                      @click='allocateNow({})',
-                      popover-trigger='mouseenter',
-                      popover-placement='right',
-                      :popover="$t('distributePointsPop')"
-                    )
-                      span.glyphicon.glyphicon-download
-                      |&nbsp;
-                      | {{ $t('distributePoints') }}
-            .row(v-for='(statInfo, stat) in allocateStatsList')
-              .col-8
-                span.hint(
-                  popover-trigger='mouseenter',
-                  popover-placement='right',
-                  :popover='$t(statInfo.popover)'
-                )
-                | {{ $t(statInfo.title) + user.stats[stat] }}
-              .col-4(v-if='user.stats.points', @click='allocate(stat)')
-                 button.btn.btn-primary(popover-trigger='mouseenter', popover-placement='right',
-                  :popover='$t(statInfo.allocatepop)') +
+<template>
+  <div class="standard-page">
+    <h1>Stats</h1><div class="row">
+      <div class="col-6">
+        <h2 class="text-center">
+          Equipment
+        </h2><div class="well row">
+          <div class="col-4"></div>
+        </div>
+      </div><div class="col-6">
+        <h2 class="text-center">
+          Costume
+        </h2>
+      </div>
+    </div><div class="row">
+      <div class="col-6">
+        <h2 class="text-center">
+          Pet
+        </h2>
+      </div><div class="col-6">
+        <h2 class="text-center">
+          Mount
+        </h2>
+      </div>
+    </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">
+      <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>
+            <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>
+            </li>
+          </ul>
+        </div><div v-if="user.preferences.costume">
+          <h4 v-once>
+            {{ $t('costume') }}
+          </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>
+            <li v-if="!user.preferences.background">
+              None
+            </li><li v-if="user.preferences.background">
+              {{ user.preferences.background }}
+            </li>
+          </ul>
+        </div><div ng-if="user.flags.dropsEnabled">
+          <h3 v-once>
+            {{ $t('pets') }}
+          </h3><ul>
+            <li ng-if="user.items.currentPet">
+              {{ $t('activePet') }}:
+              {{ formatAnimal(user.items.currentPet, 'pet') }}
+            </li><li>
+              {{ $t('petsFound') }}:
+              {{ totalCount(user.items.pets) }}
+            </li><li>
+              {{ $t('beastMasterProgress') }}:
+              {{ beastMasterProgress(user.items.pets) }}
+            </li>
+          </ul><h3 v-once>
+            {{ $t('mounts') }}
+          </h3><ul>
+            <li v-if="user.items.currentMount">
+              {{ $t('activeMount') }}:
+              {{ formatAnimal(user.items.currentMount, 'mount') }}
+            </li><li>
+              {{ $t('mountsTamed') }}:
+              {{ totalCount(user.items.mounts) }}
+            </li><li>
+              {{ $t('mountMasterProgress') }}:
+              {{ mountMasterProgress(user.items.mounts) }}
+            </li>
+          </ul>
+        </div>
+      </div><div class="col-4">
+        <h3 v-once>
+          {{ $t('attributes') }}
+        </h3><div
+          v-for="(statInfo, stat) in stats"
+          class="row"
+        >
+          <div class="col-4">
+            <span
+              class="hint"
+              :popover-title="$t(statInfo.title)"
+              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">
+            <ul class="bonus-stats">
+              <li>
+                {{ $t('levelBonus') }}
+                {{ statsComputed.levelBonus[stat] }}
+              </li><li>
+                {{ $t('gearBonus') }}
+                {{ statsComputed.gearBonus[stat] }}
+              </li><li>
+                {{ $t('classBonus') }}
+                {{ statsComputed.classBonus[stat] }}
+              </li><li>
+                {{ $t('allocatedPoints') }}
+                {{ user.stats[stat] }}
+              </li><li>
+                {{ $t('buffs') }}
+                {{ user.stats.buffs[stat] }}
+              </li>
+            </ul>
+          </div>
+        </div><div v-if="user.stats.buffs.stealth">
+          <strong
+            v-once
+            class="hint"
+            :popover-title="$t('stealth')"
+            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">
+          <div>
+            <strong
+              class="hint"
+              popover-title="$t('streaksFrozen')"
+              popover-trigger="mouseenter"
+              popover-placement="right"
+              :popover="$t('streaksFrozenText')"
+            ></strong>{{ $t('streaksFrozen') }}
+          </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
+            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>
+          <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
+                class="hint"
+                popover-trigger="mouseenter"
+                popover-placement="right"
+                :popover="$t('levelPopover')"
+              >{{ $t('unallocated') }}</strong>
+            </p>
+          </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
+                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>
+                </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"
+                  popover-placement="right"
+                  :popover="$t('distributePointsPop')"
+                  @click="allocateNow({})"
+                >
+                  <span class="glyphicon glyphicon-download"></span>&nbsp;
+                  {{ $t('distributePoints') }}
+                </button>
+              </div>
+            </fieldset>
+          </div><div
+            v-for="(statInfo, stat) in allocateStatsList"
+            class="row"
+          >
+            <div class="col-8">
+              <span
+                class="hint"
+                popover-trigger="mouseenter"
+                popover-placement="right"
+                :popover="$t(statInfo.popover)"
+              ></span>{{ $t(statInfo.title) + user.stats[stat] }}
+            </div><div
+              v-if="user.stats.points"
+              class="col-4"
+              @click="allocate(stat)"
+            >
+              <button
+                class="btn btn-primary"
+                popover-trigger="mouseenter"
+                popover-placement="right"
+                :popover="$t(statInfo.allocatepop)"
+              >
+                +
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/world-boss/worldBossInfoModal.vue b/website/client/src/components/world-boss/worldBossInfoModal.vue
index f5244eeb5d..323c411825 100644
--- a/website/client/src/components/world-boss/worldBossInfoModal.vue
+++ b/website/client/src/components/world-boss/worldBossInfoModal.vue
@@ -1,24 +1,47 @@
-<template lang="pug">
-  b-modal#world-boss-info(title="", size='md', :hide-footer="true", :hide-header="true")
-    .modal-header.d-flex
-      .left-hearts
-      .quest_dysheartener_modal
-      .phobia_dysheartener_modal
-      .right-hearts
-    .modal-body
-      .row
-        .col-12.text-center
-          h2 {{ $t('whatIsWorldBoss') }}
-          p.text-center {{ $t('worldBossDesc') }}
-      .row
-        .col-12
-          .bullet-point.d-flex.align-items-center.justify-content-left(v-for='bullet in bullets')
-            .check-icon
-              .svg-icon.red-check(v-html="icons.redCheck")
-            .info {{ $t(bullet) }}
-    .row
-      .col-12.text-center
-        a(href='http://habitica.fandom.com/wiki/World_Bosses' target='_blank').footer-link {{ $t('worldBossLink') }}
+<template>
+  <b-modal
+    id="world-boss-info"
+    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="row">
+        <div class="col-12 text-center">
+          <h2>{{ $t('whatIsWorldBoss') }}</h2><p class="text-center">
+            {{ $t('worldBossDesc') }}
+          </p>
+        </div>
+      </div><div class="row">
+        <div class="col-12">
+          <div
+            v-for="bullet in bullets"
+            class="bullet-point d-flex align-items-center justify-content-left"
+          >
+            <div class="check-icon">
+              <div
+                class="svg-icon red-check"
+                v-html="icons.redCheck"
+              ></div>
+            </div><div class="info">
+              {{ $t(bullet) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><div class="row">
+      <div class="col-12 text-center">
+        <a
+          class="footer-link"
+          href="http://habitica.fandom.com/wiki/World_Bosses"
+          target="_blank"
+        >{{ $t('worldBossLink') }}</a>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style>
diff --git a/website/client/src/components/world-boss/worldBossRageModal.vue b/website/client/src/components/world-boss/worldBossRageModal.vue
index 54f329c380..1d5eca3db0 100644
--- a/website/client/src/components/world-boss/worldBossRageModal.vue
+++ b/website/client/src/components/world-boss/worldBossRageModal.vue
@@ -1,32 +1,57 @@
-<template lang="pug">
-  b-modal#world-boss-rage(title="", :hide-footer="true", :hide-header="true")
-    div(v-if="npc === 'seasonalShop'")
-      .modal-header.d-flex.align-items-center.justify-content-center
-        .reduce {{ $t('seasonalShopRageStrikeHeader') }}
-      img.npc-background(src='~@/assets/images/npc/broken/rage-strike-seasonalShop-scaled@2x.png')
-      .modal-body
-        .row
-          .col-12.text-center.padding-24
-            h2 {{ $t('seasonalShopRageStrikeLead') }}
-            p {{ $t('seasonalShopRageStrikeRecap') }}
-    div(v-if="npc === 'market'")
-      .modal-header.d-flex.align-items-center.justify-content-center
-        .reduce {{ $t('marketRageStrikeHeader') }}
-      img.npc-background(src='~@/assets/images/npc/broken/rage-strike-market-scaled@2x.png')
-      .modal-body
-        .row
-          .col-12.text-center.padding-24
-            h2 {{ $t('marketRageStrikeLead') }}
-            p {{ $t('marketRageStrikeRecap') }}
-    div(v-if="npc === 'quests'")
-      .modal-header.d-flex.align-items-center.justify-content-center
-        .reduce {{ $t('questsRageStrikeHeader') }}
-      img.npc-background(src='~@/assets/images/npc/broken/rage-strike-quests-scaled@2x.png')
-      .modal-body
-        .row
-          .col-12.text-center.padding-24
-            h2 {{ $t('questsRageStrikeLead') }}
-            p {{ $t('questsRageStrikeRecap') }}
+<template>
+  <b-modal
+    id="world-boss-rage"
+    title=""
+    :hide-footer="true"
+    :hide-header="true"
+  >
+    <div v-if="npc === 'seasonalShop'">
+      <div class="modal-header d-flex align-items-center justify-content-center">
+        <div class="reduce">
+          {{ $t('seasonalShopRageStrikeHeader') }}
+        </div>
+      </div><img
+        class="npc-background"
+        src="~@/assets/images/npc/broken/rage-strike-seasonalShop-scaled@2x.png"
+      ><div class="modal-body">
+        <div class="row">
+          <div class="col-12 text-center padding-24">
+            <h2>{{ $t('seasonalShopRageStrikeLead') }}</h2><p>{{ $t('seasonalShopRageStrikeRecap') }}</p>
+          </div>
+        </div>
+      </div>
+    </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
+        class="npc-background"
+        src="~@/assets/images/npc/broken/rage-strike-market-scaled@2x.png"
+      ><div class="modal-body">
+        <div class="row">
+          <div class="col-12 text-center padding-24">
+            <h2>{{ $t('marketRageStrikeLead') }}</h2><p>{{ $t('marketRageStrikeRecap') }}</p>
+          </div>
+        </div>
+      </div>
+    </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
+        class="npc-background"
+        src="~@/assets/images/npc/broken/rage-strike-quests-scaled@2x.png"
+      ><div class="modal-body">
+        <div class="row">
+          <div class="col-12 text-center padding-24">
+            <h2>{{ $t('questsRageStrikeLead') }}</h2><p>{{ $t('questsRageStrikeRecap') }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </b-modal>
 </template>
 
 <style>
diff --git a/website/client/src/components/yesterdailyModal.vue b/website/client/src/components/yesterdailyModal.vue
index 62b0e7c900..1f76228289 100644
--- a/website/client/src/components/yesterdailyModal.vue
+++ b/website/client/src/components/yesterdailyModal.vue
@@ -1,24 +1,34 @@
-<template lang="pug">
-  b-modal#yesterdaily(
-    size="m",
-    :hide-header="true",
-    :hide-footer="true",
-    :no-close-on-backdrop="true",
-    :no-close-on-esc="true",
-    @hide="$emit('hide')",
-  )
-    h1.header-welcome.text-center {{ $t('welcomeBack') }}
-    p.call-to-action.text-center {{ $t('checkOffYesterDailies') }}
-    .tasks-list
-      task(
-        v-for="task in tasksByType.daily",
-        :key="task.id",
-        :task="task",
-        :isUser="true",
-        :dueDate="dueDate",
-      )
-    .start-day.text-center
-      button.btn.btn-primary(@click='close()') {{ $t('yesterDailiesCallToAction') }}
+<template>
+  <b-modal
+    id="yesterdaily"
+    size="m"
+    :hide-header="true"
+    :hide-footer="true"
+    :no-close-on-backdrop="true"
+    :no-close-on-esc="true"
+    @hide="$emit('hide')"
+  >
+    <h1 class="header-welcome text-center">
+      {{ $t('welcomeBack') }}
+    </h1><p class="call-to-action text-center">
+      {{ $t('checkOffYesterDailies') }}
+    </p><div class="tasks-list">
+      <task
+        v-for="task in tasksByType.daily"
+        :key="task.id"
+        :task="task"
+        :is-user="true"
+        :due-date="dueDate"
+      />
+    </div><div class="start-day text-center">
+      <button
+        class="btn btn-primary"
+        @click="close()"
+      >
+        {{ $t('yesterDailiesCallToAction') }}
+      </button>
+    </div>
+  </b-modal>
 </template>
 
 <style lang="scss">
diff --git a/website/client/vue.config.js b/website/client/vue.config.js
index e4f28e2a0f..8ec03a1aba 100644
--- a/website/client/vue.config.js
+++ b/website/client/vue.config.js
@@ -55,31 +55,14 @@ module.exports = {
         .set(dep, path.resolve(__dirname, `./node_modules/${dep}`));
     });
 
-    const pugRule = config.module.rule('pug');
     const svgRule = config.module.rule('svg');
 
     // clear all existing loaders.
     // if you don't do this, the loader below will be appended to
     // existing loaders of the rule.
-    pugRule.uses.clear();
     svgRule.uses.clear();
 
     // add replacement loader(s)
-    pugRule
-      .test(/\.pug$/)
-      // this applies to <template lang="pug"> in Vue components
-      .oneOf('vue-loader')
-      .resourceQuery(/^\?vue/)
-      .use('pug-plain')
-      .loader('pug-plain-loader')
-      .end()
-      .end();
-
-
-    // clear all existing loaders.
-    // if you don't do this, the loader below will be appended to
-    // existing loaders of the rule.
-
     svgRule
       .test(/\.svg$/)
       .oneOf('normal')