diff --git a/habitica-images b/habitica-images
index 3cda1c1a27..20ac2874d5 160000
--- a/habitica-images
+++ b/habitica-images
@@ -1 +1 @@
-Subproject commit 3cda1c1a27ef51e735ea0f6edd848f001321ec0f
+Subproject commit 20ac2874d5f9f835c8a2885795ee7e17da72506c
diff --git a/package-lock.json b/package-lock.json
index 90e371ee80..87c4562e34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "habitica",
-  "version": "4.271.1",
+  "version": "4.272.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index d1cbce5350..a5983b0004 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.271.1",
+  "version": "4.272.0",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.21.8",
diff --git a/website/client/src/assets/css/sprites/spritesmith-main.css b/website/client/src/assets/css/sprites/spritesmith-main.css
index 271abcba15..589aaccdfa 100644
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/website/client/src/assets/css/sprites/spritesmith-main.css
@@ -28010,6 +28010,36 @@
   width: 68px;
   height: 68px;
 }
+.broad_armor_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202306.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_armor_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_mystery_202306.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_set_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_set_mystery_202306.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_mystery_202306.png');
+  width: 68px;
+  height: 68px;
+}
+.slim_armor_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202306.png');
+  width: 114px;
+  height: 90px;
+}
+.weapon_mystery_202306 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_mystery_202306.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_mystery_301404 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
   width: 90px;
diff --git a/website/client/src/components/payments/sendGiftModal.vue b/website/client/src/components/payments/sendGiftModal.vue
index f266fd3273..04e28c254a 100644
--- a/website/client/src/components/payments/sendGiftModal.vue
+++ b/website/client/src/components/payments/sendGiftModal.vue
@@ -126,7 +126,7 @@
 
           <!-- the word "total" -->
           <div class="buy-gem-total">
-            {{ $t('sendGiftTotal') }}
+            {{ $t('sendTotal') }}
           </div>
 
           <!-- the actual dollar amount -->
diff --git a/website/client/src/components/shared/itemCost.vue b/website/client/src/components/shared/itemCost.vue
new file mode 100644
index 0000000000..c85c19ee82
--- /dev/null
+++ b/website/client/src/components/shared/itemCost.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="item-cost">
+    <span
+      class="cost"
+      :class="getPriceClass()"
+    >
+      <span
+        class="svg-icon inline icon-24"
+        aria-hidden="true"
+        v-html="icons[getPriceClass()]"
+      >
+      </span>
+      <span
+        :class="getPriceClass()"
+      >{{ item.value }}</span>
+    </span>
+  </div>
+</template>
+
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
+
+.item-cost {
+ padding-bottom: 16px;
+}
+
+  .cost {
+    height: 40px;
+    font-size: 1.25rem;
+    font-weight: bold;
+    line-height: 1.4;
+    vertical-align: middle;
+
+    &.gems {
+      color: $gems-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(36, 204, 143, 0.15);
+    }
+
+    &.gold {
+      color: $gold-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(255, 190, 93, 0.15);
+    }
+
+    &.hourglasses {
+      color: $hourglass-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(41, 149, 205, 0.15);
+    }
+  }
+</style>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgGem from '@/assets/svg/gem.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+        gold: svgGold,
+        gems: svgGem,
+      }),
+      selectedAmountToBuy: 1,
+      selectedAmount: 1,
+    };
+  },
+  methods: {
+    getPriceClass () {
+      if (this.priceType && this.icons[this.priceType]) {
+        return this.priceType;
+      } if (this.item.currency && this.icons[this.item.currency]) {
+        return this.item.currency;
+      }
+      return 'gold';
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/shared/numberIncrement.vue b/website/client/src/components/shared/numberIncrement.vue
new file mode 100644
index 0000000000..34b9b966df
--- /dev/null
+++ b/website/client/src/components/shared/numberIncrement.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="d-flex flex-row align-items-center justify-content-center number-increment">
+    <!-- buy modal -->
+    <div
+      class="gray-circle"
+      @click="quantity <= 0
+        ? quantity = 0
+        : quantity--"
+    >
+      <div
+        class="icon-negative"
+        v-html="icons.svgNegative"
+      ></div>
+    </div>
+    <div class="input-group">
+      <div class="align-items-center">
+      </div>
+      <input
+        v-model="quantity"
+        class="form-control alignment"
+        step="1"
+        type="number"
+      >
+    </div>
+    <div
+      class="gray-circle"
+      @click="quantity++"
+    >
+      <div
+        class="icon-positive"
+        v-html="icons.svgPositive"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .number-increment {
+    padding-bottom: 0px;
+    }
+
+  .alignment {
+    text-align: center;
+  }
+
+  .input-group {
+    width: 94px;
+    height: 32px;
+    width: 48px;
+    margin: 0px 16px 0px 16px;
+    padding: 0;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    background-color: $white;
+  }
+
+  .gray-circle {
+    border-radius: 100%;
+    border: solid 2px $gray-300;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $purple-300;
+    }
+  }
+
+  .gray-circle:hover{
+    .icon-positive, .icon-negative {
+      & ::v-deep svg path {
+        fill: $purple-300;
+      }
+    }
+  }
+
+  .icon-positive, .icon-negative {
+    width: 10px;
+    height: 10px;
+    margin: 4px auto;
+
+    & ::v-deep svg path {
+      fill: $gray-300;
+    }
+  }
+
+/* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+/* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+
+</style>
+
+<script>
+// icons
+import svgGem from '@/assets/svg/gem.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        svgGem,
+        svgGold,
+        svgPositive,
+        svgNegative,
+      }),
+      item: { },
+      quantity: 1,
+    };
+  },
+  computed: {
+  },
+  watch: {
+    quantity () {
+      this.$emit('updateQuantity', this.quantity);
+    },
+  },
+  methods: {
+    setDefaults () {
+      this.input = 1;
+    },
+  },
+};
+
+</script>
diff --git a/website/client/src/components/shared/purchaseTotal.vue b/website/client/src/components/shared/purchaseTotal.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/website/client/src/components/shops/balanceInfo.vue b/website/client/src/components/shops/balanceInfo.vue
index c03eef4d93..f180d7292b 100644
--- a/website/client/src/components/shops/balanceInfo.vue
+++ b/website/client/src/components/shops/balanceInfo.vue
@@ -22,10 +22,11 @@
   @import '~@/assets/scss/colors.scss';
 
 span {
-  font-weight: normal;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.33;
-  color: $gray-200;
+  color: $gray-100;
+  margin-bottom: 16px;
+  margin-top: -4px;
 
   display: inline-block;
 }
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 66c90b182a..7120dbabdd 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -17,7 +17,7 @@
     </span>
     <div>
       <span
-        class="svg-icon icon-12 close-icon"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         tabindex="0"
         @click="hideDialog()"
@@ -45,6 +45,13 @@
               :sprites-margin="'0px auto 0px -24px'"
             />
           </div>
+          <item
+            v-else-if="item.key === 'gem'"
+            class="flat bordered-item"
+            :item="item"
+            :item-content-class="item.class"
+            :show-popover="false"
+          />
           <item
             v-else-if="item.key != 'gem'"
             class="flat bordered-item"
@@ -53,10 +60,20 @@
             :show-popover="false"
           />
         </slot>
+        <div
+          v-if="!showAvatar && user.items[item.purchaseType]"
+          class="owned"
+          :class="totalOwned"
+        >
+          <!-- eslint-disable-next-line max-len -->
+          <span class="owned-text">{{ $t('owned') }}: <span class="user-amount">{{ totalOwned }}</span></span>
+        </div>
         <h4 class="title">
           {{ itemText }}
         </h4>
-        <div v-html="itemNotes"></div>
+        <div class="item-notes">
+          {{ itemNotes }}
+        </div>
         <slot
           name="additionalInfo"
           :item="item"
@@ -69,60 +86,61 @@
           />
         </slot>
         <div
-          v-if="item.value > 0"
+          v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
           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"
-                class="form-control"
-                type="number"
-                min="0"
-                step="1"
-              >
-            </div>
-            <span :class="{'notEnough': notEnoughCurrency}">
+          <!-- this is where the pretty item cost element lives -->
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="getPriceClass()"
+            >
               <span
-                class="svg-icon inline icon-32"
+                class="svg-icon inline icon-24"
                 aria-hidden="true"
                 v-html="icons[getPriceClass()]"
-              ></span>
+              >
+              </span>
               <span
-                class="cost"
                 :class="getPriceClass()"
               >{{ item.value }}</span>
             </span>
           </div>
+
           <div
-            v-else
-            class="d-flex align-items-middle"
+            v-if="showAmountToBuy(item)"
+            class="how-many-to-buy"
           >
-            <span
-              class="svg-icon inline icon-32 ml-auto my-auto"
-              aria-hidden="true"
-              v-html="icons[getPriceClass()]"
-            ></span>
-            <span
-              class="cost mr-auto my-auto"
-              :class="getPriceClass()"
-            >{{ item.value }}</span>
+            {{ $t('howManyToBuy') }}
+          </div>
+          <div
+            v-if="showAmountToBuy(item)"
+          >
+            <number-increment
+              class="number-increment"
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+            <div
+              :class="{'notEnough': notEnoughCurrency}"
+              class="total"
+            >
+              <span class="total-text">{{ $t('sendTotal') }}</span>
+              <span
+                class="svg-icon total icon-24"
+                aria-hidden="true"
+                v-html="icons[getPriceClass()]"
+              ></span>
+              <span
+                class="total-text"
+                :class="getPriceClass()"
+              >{{ item.value * selectedAmountToBuy }}</span>
+            </div>
           </div>
         </div>
         <div
-          v-if="item.key === 'gem'"
-          class="gems-left"
+          v-if="item.key === 'gem' && gemsLeft < 1"
+          class="no-more-gems"
         >
-          <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>
         <div
@@ -147,7 +165,7 @@
           {{ $t('viewSubscriptions') }}
         </button>
         <button
-          v-else
+          v-else-if="!(item.key === 'gem' && gemsLeft < 1)"
           class="btn btn-primary"
           :disabled="item.key === 'gem' && gemsLeft === 0 ||
             attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked ||
@@ -165,6 +183,7 @@
     <countdown-banner
       v-if="item.event && item.owned == null"
       :end-date="endDate"
+      class="limitedTime available"
     />
     <div
       v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
@@ -179,12 +198,31 @@
       </div>
     </div>
     <div
-      slot="modal-footer"
-      class="d-flex"
+      v-if="item.key === 'gem'"
+      class="d-flex justify-content-center align-items-center"
     >
-      <span class="balance mr-auto">{{ $t('yourBalance') }}</span>
+      <div
+        v-if="gemsLeft > 0"
+        class="gems-left d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+      <div
+        v-if="gemsLeft === 0"
+        class="out-of-gems-banner d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+    </div>
+    <div
+      slot="modal-footer"
+      class="clearfix"
+    >
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="ml-auto"
+        class="currency-totals"
         :currency-needed="getPriceClass()"
         :amount-needed="item.value"
       />
@@ -200,11 +238,47 @@
     @include centeredModal();
 
     .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
       padding-bottom: 0px;
     }
 
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin: 24px 0 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
-      width: 330px;
+      width: 448px;
+      box-sizing: border-box;
+    }
+
+    .badge-dialog {
+      left: -8px;
+      top: -8px;
     }
 
     .avatar {
@@ -212,8 +286,71 @@
       margin: 0 auto;
     }
 
+   .owned {
+      height: 32px;
+      width: 141px;
+      margin-top: -36px;
+      margin-left: 153px;
+      padding-top: 6px;
+      background-color: $gray-600;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      display: block;
+      text-align: center;
+      position: relative;
+      z-index: 1;
+
+      .owned-text {
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.71;
+      }
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25.67px;
+      left: 1px;
+
+      &.shop_gem {
+        transform: scale(1.45, 1.45);
+        top: -2px;
+       left: 0px;
+      }
+    }
+
+    .title {
+      height: 28px;
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 25px;
+    }
+
+    .item-notes {
+       margin-top: 8px;
+       padding-left: 48.5px;
+       padding-right: 48.5px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
     .content {
       text-align: center;
+      width: 448px;
     }
 
     .item-wrapper {
@@ -221,15 +358,22 @@
     }
 
     .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
+      margin: 32px auto auto;
+    }
+
+    .btn-primary {
+      margin-top: 16px;
     }
 
     .purchase-amount {
-      margin-top: 24px;
+      margin-top: 0px;
 
       .how-many-to-buy {
-        margin-bottom: 16px;
+        font-weight: bold !important;
+      }
+
+      .number-increment {
+        margin-top: 16px;
       }
 
       .box {
@@ -255,31 +399,105 @@
         }
       }
     }
+    .no-more-gems {
+      color: $yellow-5;
+      font-size: 0.875em;
+      line-height: 1.33;
+      margin: 16px 48px 0 48px;
+    }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
       margin-right: 8px;
+      padding-top: 6px;
+    }
 
-      vertical-align: middle;
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+
+      &:hover {
+          color: $gray-100;
+      }
+    }
+
+    .attributes-group {
+      margin: 32px;
+      border-radius: 4px;
+      line-height: 1.71;
+      font-size: 0.875;
+    }
+
+    .attributesGrid {
+      margin-top: 28px;
+      border-radius: 2px;
+      background-color: $gray-500;
+    }
+
+    .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
     }
 
     .cost {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
       font-weight: bold;
-      line-height: 1.33;
-
-      vertical-align: middle;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
 
       &.gems {
-        color: $gems-color;
+        color: $green-10;
+        background-color: rgba(36, 204, 143, 0.15);
+        align-items: center;
       }
 
       &.gold {
-        color: $gold-color;
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+        background-color: rgba(41, 149, 205, 0.15);
+        align-items: center;
+      }
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      padding-top: 2px;
+      margin-top: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
       }
 
       &.hourglasses {
@@ -287,62 +505,84 @@
       }
     }
 
+  .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+  }
+
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-      min-width: 6rem;
+      margin-top: 16px;
+      padding: 4px 16px;
+      height: 32px;
 
       &:focus {
         border: 2px solid black;
       }
     }
 
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
-    }
+      .notEnough {
+        pointer-events: none;
+        opacity: 0.55;
+      }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-    }
+      .free-rebirth {
+        background-color: $yellow-5;
+        color: $white;
+        height: 2rem;
+        line-height: 16px;
+        margin: auto -1rem -1rem;
+      }
 
-    .notEnough {
-      pointer-events: none;
-      opacity: 0.55;
-    }
+      // .pt-015 {
+      //   padding-top: 0.15rem;
+      // }
 
-    .attributesGrid {
-      margin-top: 8px;
-      border-radius: 2px;
-      background-color: $gray-500;
-
-      margin: 10px 0 24px;
-    }
 
     .gems-left {
-      margin-top: .5em;
+      height: 32px;
+      background-color: $green-100;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      color: $green-1;
+      width: 100%;
+      margin-bottom: -24px;
     }
 
-    .free-rebirth {
-      background-color: $yellow-5;
+    .out-of-gems-banner {
+      height: 32px;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      background-color: $yellow-100;
+      color: $yellow-1;
+      width: 100%;
+      margin-bottom: -24px;
+    }
+
+    .limitedTime {
+      height: 32px;
+      width: 446px;
+      font-size: 0.75rem;
+      margin: 24px 0 0 0;
+      background-color: $purple-300;
       color: $white;
-      height: 2rem;
-      line-height: 16px;
-      margin: auto -1rem -1rem;
-    }
-
-    .pt-015 {
-      padding-top: 0.15rem;
+      margin-bottom: -24px;
     }
   }
+
 </style>
 
 <style lang="scss" scoped>
@@ -370,6 +610,8 @@ import svgGem from '@/assets/svg/gem.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
 import svgClock from '@/assets/svg/clock.svg';
 import svgWhiteClock from '@/assets/svg/clock-white.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from './balanceInfo.vue';
 import PinBadge from '@/components/ui/pinBadge';
@@ -377,6 +619,7 @@ import CountdownBanner from './countdownBanner';
 import currencyMixin from './_currencyMixin';
 import notifications from '@/mixins/notifications';
 import buyMixin from '@/mixins/buy';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import { mapState } from '@/libs/store';
 
@@ -407,14 +650,17 @@ export default {
     Avatar,
     PinBadge,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
   props: {
+    // eslint-disable-next-line vue/require-default-prop
     item: {
       type: Object,
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -433,10 +679,14 @@ export default {
         hourglasses: svgHourglasses,
         clock: svgClock,
         whiteClock: svgWhiteClock,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       selectedAmountToBuy: 1,
+      selectedAmount: 1,
       isPinned: false,
+      quantity: 1,
     };
   },
   computed: {
@@ -474,6 +724,11 @@ export default {
       return planGemLimits.convCap
         + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
     },
+    totalGems () {
+      if (!this.user.purchased.plan) return 0;
+      return planGemLimits.convCap
+        + this.user.purchased.plan.consecutive.gemCapExtra;
+    },
     attemptingToPurchaseMoreGemsThanAreLeft () {
       if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
       return false;
@@ -490,6 +745,9 @@ export default {
     endDate () {
       return moment(this.item.event.end);
     },
+    totalOwned () {
+      return this.user.items[this.item.purchaseType][this.item.key] || 0;
+    },
   },
   watch: {
     item: function itemChanged () {
@@ -500,7 +758,9 @@ export default {
   methods: {
     onChange ($event) {
       this.$emit('change', $event);
+      this.selectedAmountToBuy = 1;
     },
+
     buyItem () {
       // @TODO: I  think we should buying to the items.
       // Turn the items into classes, and use polymorphism
@@ -597,6 +857,7 @@ export default {
       }
     },
     hideDialog () {
+      this.selectedAmountToBuy = 1;
       this.$root.$emit('bv::hide::modal', 'buy-modal');
     },
     getPriceClass () {
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index ba59ed6196..6bbc95599c 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -4,9 +4,9 @@
     :hide-header="true"
     @change="onChange($event)"
   >
-    <div class="close">
+    <div>
       <span
-        class="svg-icon inline icon-10"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
@@ -14,60 +14,73 @@
     </div>
     <div
       v-if="item"
-      class="content"
+      class="content bordered-item"
     >
       <div class="inner-content">
         <item
-          class="flat"
+          class="flat bordered-item"
           :item="item"
           :item-content-class="itemContextToSell.itemClass"
           :show-popover="false"
-        >
-          <countBadge
-            slot="itemBadge"
-            :show="true"
-            :count="itemContextToSell.itemCount"
-          />
-        </item>
+        />
+        <span class="owned">
+          {{ $t('owned') }}: <span class="user-amount">{{ itemContextToSell.itemCount }}</span>
+        </span>
         <h4 class="title">
           {{ itemContextToSell.itemName }}
         </h4>
         <div v-if="item.key === 'Saddle'">
-          <div class="text">
+          <div class="item-notes">
             {{ item.sellWarningNote() }}
           </div>
           <br>
         </div>
         <div v-else>
           <div>
-            <div class="text">
+            <div class="item-notes">
               {{ item.notes() }}
             </div>
-            <div>
-              <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
+            <div class="item-cost">
+              <span class="cost gold">
+                <span
+                  class="svg-icon inline icon-24"
+                  aria-hidden="true"
+                  v-html="icons.gold"
+                ></span>
+                <span>{{ item.value }}</span>
+              </span>
             </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"
+                class="how-many-to-sell"
+              >
+                {{ $t('howManyToSell') }}
+              </span>
+            </div>
+            <div>
+              <number-increment
+                @updateQuantity="selectedAmountToSell = $event"
+              />
+            </div>
+            <div class="total-row">
+              <span class="total-text">
+                {{ $t('sendTotal') }}
+              </span>
+              <span
+                class="svg-icon total icon-24"
                 aria-hidden="true"
                 v-html="icons.gold"
               ></span>
-              <span class="value">{{ item.value }}</span>
+              <span class="total-text gold">
+                {{ item.value * selectedAmountToSell }}
+              </span>
             </div>
             <button
               class="btn btn-primary"
+              :disabled="selectedAmountToSell > itemContextToSell.itemCount"
               @click="sellItems()"
             >
-              {{ $t('sell') }}
+              {{ $t('sellItems') }}
             </button>
           </div>
         </div>
@@ -77,8 +90,10 @@
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
-      <balanceInfo class="float-right" />
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
+      <balanceInfo
+        class="float-right currency-totals"
+      />
     </div>
   </b-modal>
 </template>
@@ -95,51 +110,13 @@
     }
 
     .modal-dialog {
-      width: 330px;
+      width: 448px;
     }
 
-    .content {
-      text-align: center;
-
-    }
-    .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
-    }
-
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
-      margin-left: 24px;
-      margin-right: 8px;
-
-      vertical-align: middle;
-    }
-
-    .value {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: #df911e;
-
-      vertical-align: middle;
-    }
-
-    button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-    }
-
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
     }
 
     .modal-footer {
@@ -148,29 +125,215 @@
       border-bottom-right-radius: 8px;
       border-bottom-left-radius: 8px;
       display: block;
+      margin: 24px 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
     }
 
-    .how-many-to-sell {
-      margin-bottom: 16px;
+    .content {
+      text-align: center;
+    }
+
+    .inner-content {
+      margin: 33px auto auto;
+      width: 282px;
+    }
+
+    .owned {
+      font-size: 0.75rem;
+      font-weight: bold;
+      line-height: 1.33;
+      background-color: $gray-600;
+      padding: 8px 8px;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
       display: block;
+      width: 141px;
+      margin-left: 71px;
+      margin-top: -48px;
+      position: relative;
+      z-index: 1;
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item-wrapper {
+      margin-top: -10px;
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+      margin-top: 8px;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25px;
+      left: 1px;
+    }
+
+    .title {
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 26px;
+      margin-bottom: 0px;
+    }
+
+    .item-notes {
+       margin-top: 12px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
+      margin-right: 8px;
+      padding-top: 6px;
+    }
+
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+      cursor: pointer;
+
+      &:hover {
+        color: $gray-100;
+      }
+    }
+
+  .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
+    }
+
+    .cost {
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
+      font-weight: bold;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
+
+      &.gold {
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
     }
   }
+
+  .how-many-to-sell {
+    font-weight: bold !important;
+  }
+
+  .number-increment {
+     margin-top: 16px;
+  }
+
+  .total-row {
+    font-weight: bold;
+    font-size: 0.875rem;
+    margin-top: 16px;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+  button.btn.btn-primary {
+    margin-top: 16px;
+    padding: 4px 16px;
+    height: 32px;
+
+    &:focus {
+      border: 2px solid black;
+    }
+
+  .balance {
+    width: 74px;
+    height: 16px;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.33;
+    color: $gray-200;
+  }
+
+
+}
 </style>
 
 <script>
 import svgClose from '@/assets/svg/close.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgGem from '@/assets/svg/gem.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import Item from '@/components/inventory/item';
-import CountBadge from '@/components/ui/countBadge';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 export default {
   components: {
     BalanceInfo,
     Item,
-    CountBadge,
+    numberIncrement,
   },
   data () {
     return {
@@ -181,6 +344,8 @@ export default {
         close: svgClose,
         gold: svgGold,
         gem: svgGem,
+        svgPositive,
+        svgNegative,
       }),
     };
   },
@@ -211,6 +376,10 @@ export default {
         this.selectedAmountToSell = 0;
       }
     },
+    maxOwned () {
+      const maxOwned = this.itemContextToSell.itemCount;
+      return maxOwned;
+    },
     sellItems () {
       if (!Number.isInteger(Number(this.selectedAmountToSell))) {
         this.selectedAmountToSell = 0;
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 23c47d7880..c422199b2d 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -33,6 +33,22 @@
           v-if="!item.locked"
           class="purchase-amount"
         >
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="priceType"
+            >
+              <span
+                class="svg-icon inline icon-24"
+                aria-hidden="true"
+                v-html="icons[priceType]"
+              >
+              </span>
+              <span
+                :class="priceType"
+              >{{ item.value }}</span>
+            </span>
+          </div>
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
@@ -42,24 +58,25 @@
           >
             {{ item.addlNotes }}
           </div>
-          <div class="box">
-            <input
-              v-model.number="selectedAmountToBuy"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+          <div>
+            <number-increment
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+          </div>
+          <div class="total-row">
+            <span class="total-text">
+              {{ $t('sendTotal') }}
+            </span>
+            <span
+              class="svg-icon inline icon-20"
+              aria-hidden="true"
+              v-html="currencyIcon"
+            ></span>
+            <span
+              class="total"
+              :class="priceType"
+            >{{ item.value * selectedAmountToBuy }}</span>
           </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'
@@ -112,6 +129,40 @@
       margin-top: 1rem;
     }
 
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
+    }
+
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin-top: 24px;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
       margin-top: 8%;
       width: 448px !important;
@@ -129,8 +180,13 @@
       margin: 33px auto auto;
     }
 
-    .modal-body {
-      padding-bottom: 0px;
+    .item-notes {
+      height: 48px;
+      margin-top: 8px;
+      padding-left: 48.5px;
+      padding-right: 48.5px;
+      line-height: 1.71;
+      font-size: 0.875rem;
     }
 
     .questInfo {
@@ -152,16 +208,14 @@
       height: 100%;
     }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
+      margin-top: 14px;
+      padding: 4px 16px;
+      height: 32px;
+
+      &:focus {
+        border: 2px solid black;
+      }
     }
 
     .balance {
@@ -173,19 +227,6 @@
       color: $gray-200;
     }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-      padding: 1rem 1.5rem;
-
-      &> * {
-        margin: 0;
-      }
-    }
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -198,30 +239,108 @@
         margin-bottom: 16px;
       }
 
-      .box {
-        display: inline-block;
-        width: 74px;
-        height: 40px;
-        border-radius: 2px;
-        background-color: #ffffff;
-        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-        margin-right: 24px;
-
-        input {
-          width: 100%;
-          border: none;
+      .item-cost {
+        padding-bottom: 16px;
         }
 
-        input::-webkit-contacts-auto-fill-button {
-          visibility: hidden;
-          display: none !important;
-          pointer-events: none;
-          position: absolute;
-          right: 0;
-        }
+        .cost {
+          height: 40px;
+          font-size: 1.25rem;
+          font-weight: bold;
+          vertical-align: middle;
+          padding: 8px 20px 8px 20px;
+
+          &.gems {
+            color: $green-10;
+            background-color: rgba(36, 204, 143, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.gold {
+            color: $yellow-5;
+            background-color: rgba(255, 190, 93, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.hourglasses {
+            color: $hourglass-color;
+            background-color: rgba(41, 149, 205, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+            }
+          }
+
+    .total-row {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
       }
     }
 
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      height: 24px;
+      line-height: 1.71;
+      padding-right: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+    }
+
+  span.svg-icon.inline.icon-20 {
+      height: 20px;
+      width: 20px;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+
+  span.svg-icon.inline.icon-24 {
+    height: 24px;
+    width: 24px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+  span.svg-icon.inline.icon-32 {
+    height: 32px;
+    width: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
     @media only screen and (max-width: 1000px) {
       .modal-dialog {
         max-width: 80%;
@@ -234,9 +353,10 @@
       }
     }
   }
+}
 </style>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
   .value {
@@ -260,7 +380,7 @@
       color: $hourglass-color;
     }
   }
-</style>
+</style> -->
 
 <script>
 import moment from 'moment';
@@ -272,6 +392,8 @@ import svgExperience from '@/assets/svg/experience.svg';
 import svgGem from '@/assets/svg/gem.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
@@ -280,6 +402,7 @@ import buyMixin from '@/mixins/buy';
 import numberInvalid from '@/mixins/numberInvalid';
 import PinBadge from '@/components/ui/pinBadge';
 import CountdownBanner from '../countdownBanner';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import questDialogContent from './questDialogContent';
 import QuestRewards from './questRewards';
@@ -293,6 +416,7 @@ export default {
     PinBadge,
     questDialogContent,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
   props: {
@@ -301,6 +425,7 @@ export default {
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -312,9 +437,11 @@ export default {
         clock: svgClock,
         close: svgClose,
         experience: svgExperience,
-        gem: svgGem,
+        gems: svgGem,
         gold: svgGold,
-        hourglass: svgHourglasses,
+        hourglasses: svgHourglasses,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       isPinned: false,
@@ -339,8 +466,8 @@ export default {
     },
     currencyIcon () {
       if (this.priceType === 'gold') return this.icons.gold;
-      if (this.priceType === 'hourglasses') return this.icons.hourglass;
-      return this.icons.gem;
+      if (this.priceType === 'hourglasses') return this.icons.hourglasses;
+      return this.icons.gems;
     },
     endDate () {
       return moment(this.item.event.end);
diff --git a/website/client/src/components/shops/quests/questDialogContent.vue b/website/client/src/components/shops/quests/questDialogContent.vue
index effd689bb9..b5b57e3f6a 100644
--- a/website/client/src/components/shops/quests/questDialogContent.vue
+++ b/website/client/src/components/shops/quests/questDialogContent.vue
@@ -33,17 +33,17 @@
 
   h3 {
     color: $gray-10;
-    margin-bottom: 0.25rem;
+    margin-bottom: 4pxrem;
   }
 
   .quest-image {
     margin: 0 auto;
-    margin-bottom: 1em;
-    margin-top: 1.5em;
+    margin-bottom: 16px;
+    margin-top: 24px;
   }
 
   .text {
-    margin-bottom: 1rem;
+    margin: 16px 16px;
     overflow-y: auto;
     text-overflow: ellipsis;
   }
@@ -54,10 +54,10 @@
     line-height: 1.71;
     color: $gray-50;
     text-align: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 8px;
 
     ::v-deep .user-label {
-      font-size: 14px;
+      font-size: 0.875rem;
     }
   }
 
diff --git a/website/client/src/components/shops/quests/questRewards.vue b/website/client/src/components/shops/quests/questRewards.vue
index abba5bcc6a..21568f3bfa 100644
--- a/website/client/src/components/shops/quests/questRewards.vue
+++ b/website/client/src/components/shops/quests/questRewards.vue
@@ -177,9 +177,6 @@ export default {
   @import '~@/assets/scss/colors.scss';
 
   .quest-rewards {
-    margin-left: -1rem;
-    margin-right: -1rem;
-
     background-color: $gray-700;
   }
 
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index ece67dd374..66a15c97ec 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -241,10 +241,10 @@
             >
               <div
                 v-b-tooltip.hover.bottom="$t('dueDate')"
-                class="svg-icon calendar"
+                class="svg-icon calendar my-auto"
                 v-html="icons.calendar"
               ></div>
-              <span>{{ formatDueDate() }}</span>
+              <span>{{ $t('due') }} {{ formatDueDate() }}</span>
             </div>
             <div class="icons-right d-flex justify-content-end">
               <div
@@ -701,7 +701,7 @@
 
   .icons {
     margin-top: 4px;
-    color: $gray-300;
+    color: $gray-100;
     font-style: normal;
 
     &-right {
@@ -760,7 +760,7 @@
   }
 
   .due-overdue {
-    color: $red-50;
+    color: $maroon-10;
   }
 
   .calendar.svg-icon {
@@ -899,7 +899,7 @@
   }
 </style>
 <!-- eslint-enable max-len -->
-
+<!-- eslint-disable-next-line vue/component-tags-order -->
 <script>
 import moment from 'moment';
 import { v4 as uuid } from 'uuid';
@@ -1126,13 +1126,13 @@ export default {
       return moment.duration(endOfDueDate.diff(endOfToday));
     },
     checkIfOverdue () {
-      return this.calculateTimeTillDue().asDays() <= 0;
+      return this.calculateTimeTillDue().asDays() < 0;
     },
     formatDueDate () {
-      const timeTillDue = this.calculateTimeTillDue();
-      const dueIn = timeTillDue.asDays() === 0 ? this.$t('today') : timeTillDue.humanize(true);
-
-      return this.task.date && this.$t('dueIn', { dueIn });
+      if (moment().isSame(this.task.date, 'day')) {
+        return this.$t('today');
+      }
+      return moment(this.task.date).format(this.user.preferences.dateFormat.toUpperCase());
     },
     edit (e, task) {
       if (this.isRunningYesterdailies) return;
diff --git a/website/client/src/mixins/numberInvalid.js b/website/client/src/mixins/numberInvalid.js
index 74db1d8be5..e8b0e14cc8 100644
--- a/website/client/src/mixins/numberInvalid.js
+++ b/website/client/src/mixins/numberInvalid.js
@@ -1,7 +1,9 @@
 export default {
   computed: {
     numberInvalid () {
-      return this.selectedAmountToBuy < 1 || !Number.isInteger(this.selectedAmountToBuy);
+      const inputNumber = Number(this.selectedAmountToBuy);
+      return inputNumber < 1
+      || !Number.isInteger(inputNumber);
     },
   },
 };
diff --git a/website/client/tests/unit/components/tasks/task.spec.js b/website/client/tests/unit/components/tasks/task.spec.js
deleted file mode 100644
index bba52c2e41..0000000000
--- a/website/client/tests/unit/components/tasks/task.spec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import moment from 'moment';
-
-import Task from '@/components/tasks/task.vue';
-import Store from '@/libs/store';
-
-const localVue = createLocalVue();
-localVue.use(Store);
-
-describe('Task', () => {
-  let wrapper;
-
-  function makeWrapper (additionalTaskData = {}, additionalUserData = {}) {
-    return shallowMount(Task, {
-      propsData: {
-        task: {
-          group: {},
-          ...additionalTaskData,
-        },
-      },
-      store: {
-        state: {
-          user: {
-            data: {
-              preferences: {
-                tasks: {
-                  activeFilter: {
-
-                  },
-                },
-              },
-              ...additionalUserData,
-            },
-          },
-        },
-        getters: {
-          'tasks:getTaskClasses': () => ({}),
-          'tasks:canEdit': () => ({}),
-          'tasks:canDelete': () => ({}),
-        },
-      },
-      mocks: { $t: (key, params) => key + (params ? JSON.stringify(params) : '') },
-      directives: { 'b-tooltip': {} },
-      localVue,
-    });
-  }
-
-  it('returns a vue instance', () => {
-    wrapper = makeWrapper();
-    expect(wrapper.isVueInstance()).to.be.true;
-  });
-
-  describe('Due date calculation', () => {
-    let clock;
-
-    function setClockTo (time) {
-      const now = moment(time);
-      clock = sinon.useFakeTimers(now.toDate());
-      return now;
-    }
-
-    afterEach(() => {
-      clock.restore();
-    });
-
-    it('formats due date to today if due today', () => {
-      const now = setClockTo('2019-09-17T17:57:00+02:00');
-      wrapper = makeWrapper({ date: now });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"today"}');
-    });
-
-    it('formats due date to tomorrow if due tomorrow', () => {
-      const now = setClockTo('2012-06-12T14:17:28Z');
-      wrapper = makeWrapper({ date: now.add(1, 'day') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-
-    it('formats due date to 5 days if due in 5 days', () => {
-      const now = setClockTo();
-      wrapper = makeWrapper({ date: now.add(5, 'days') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in 5 days"}');
-    });
-
-    it('formats due date to tomorrow if today but before dayStart', () => {
-      const now = setClockTo('2019-06-12T04:23:37+02:00');
-      wrapper = makeWrapper({ date: now.add(8, 'hours') }, { preferences: { dayStart: 7 } });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-  });
-});
diff --git a/website/common/locales/ach/subscriber.json b/website/common/locales/ach/subscriber.json
index 4b2b4bc250..3c9a6e7697 100755
--- a/website/common/locales/ach/subscriber.json
+++ b/website/common/locales/ach/subscriber.json
@@ -132,5 +132,5 @@
     "subscriptionBenefit6": "Earn Mystic Hourglasses for use in the Time Travelers' Shop!",
     "purchaseAll": "Purchase Set",
     "gemsRemaining": "gems remaining",
-    "notEnoughGemsToBuy": "You are unable to buy that amount of gems"
+    "notEnoughGemsToBuy": "You are unable to buy that amount of gems",
 }
diff --git a/website/common/locales/en/faq.json b/website/common/locales/en/faq.json
index b648b36765..ce5194df2c 100644
--- a/website/common/locales/en/faq.json
+++ b/website/common/locales/en/faq.json
@@ -48,9 +48,9 @@
   "webFaqAnswer8": "The blue bar that appeared when you hit level 10 and chose a Class is your Mana bar. As you continue to level up, you will unlock special Skills that cost Mana to use. Each Class has different Skills, which appear after level 11 in the action bar at the bottom of the screen. Unlike your Health bar, your Mana bar does not reset when you gain a level. Instead, Mana is gained when you complete good Habits, Dailies, and To Do's, and lost when you indulge bad Habits. You'll also regain some Mana overnight -- the more Dailies you completed, the more you will gain.",
 
   "faqQuestion9": "How do I take on Quests?",
-  "iosFaqAnswer9": "First, you need to join or start a Party by selecting \"Party\" in the navigation. Although you can take on Quests alone, we recommend playing with others to make the Quest faster and boost your motivation with extra accountability.\n\nOnce you’re in a Party, you can invite Party members to any Quest scrolls in your Inventory. After everyone accepts, the Quest will begin. To progress, complete your tasks as you normally would! You’ll either build up damage against a monster if you’re taking on a Boss Quest, or have a chance to find items if you’re taking on a Collection Quest. All pending progress is applied the next day.\n\nWhen your Party members do enough damage or collect all items, the Quest ends and everyone will receive their rewards!",
-  "androidFaqAnswer9": "First, you need to join or start a Party by selecting \"Party\" in the navigation. Although you can take on Quests alone, we recommend playing with others to make the Quest faster and boost your motivation with extra accountability.\n\nOnce you’re in a Party, you can invite Party members to any Quest scrolls in your Inventory. After everyone accepts, the Quest will begin. To progress, complete your tasks as you normally would! You’ll either build up damage against a monster if you’re taking on a Boss Quest, or have a chance to find items if you’re taking on a Collection Quest. All pending progress is applied the next day.\n\nWhen your Party members do enough damage or collect all items, the Quest ends and everyone will receive their rewards!",
-  "webFaqAnswer9": "First, you need to join or start a Party by selecting \"Party\" in the navigation. Although you can take on Quests alone, we recommend playing with others to make the Quest faster and boost your motivation with extra accountability.\n\nOnce you’re in a Party, you can invite Party members to any Quest scrolls in your Inventory. After everyone accepts, the Quest will begin. To progress, complete your tasks as you normally would! You’ll either build up damage against a monster if you’re taking on a Boss Quest, or have a chance to find items if you’re taking on a Collection Quest. All pending progress is applied the next day.\n\nWhen your Party members do enough damage or collect all items, the Quest ends and everyone will receive their rewards!",
+  "iosFaqAnswer9": "First, you need to join or start a Party by selecting \"Party\" in the navigation menu. Although you can take on Quests alone, we recommend playing with others to make the Quest faster and boost your motivation with extra accountability.\n\nOnce you’re in a Party, you can invite Party members to any Quest scrolls in your Inventory. After everyone accepts, the Quest will begin. To progress, complete your tasks as you normally would! You’ll either build up damage against a monster if you’re taking on a Boss Quest, or have a chance to find items if you’re taking on a Collection Quest. All pending progress is applied the next day.\n\nWhen your Party members do enough damage or collect all items, the Quest ends and everyone will receive their rewards!",
+  "androidFaqAnswer9": "First, you need to join or start a Party by selecting \"Party\" in the navigation menu. Although you can take on Quests alone, we recommend playing with others to make the Quest faster and boost your motivation with extra accountability.\n\nOnce you’re in a Party, you can invite Party members to any Quest scrolls in your Inventory. After everyone accepts, the Quest will begin. To progress, complete your tasks as you normally would! You’ll either build up damage against a monster if you’re taking on a Boss Quest, or have a chance to find items if you’re taking on a Collection Quest. All pending progress is applied the next day.\n\nWhen your Party members do enough damage or collect all items, the Quest ends and everyone will receive their rewards!",
+  "webFaqAnswer9": "First, you need to join or start a Party by selecting \"Party\" in the navigation menu. Although you can take on Quests alone, we recommend playing with others to make the Quest faster and boost your motivation with extra accountability.\n\nOnce you’re in a Party, you can invite Party members to any Quest scrolls in your Inventory. After everyone accepts, the Quest will begin. To progress, complete your tasks as you normally would! You’ll either build up damage against a monster if you’re taking on a Boss Quest, or have a chance to find items if you’re taking on a Collection Quest. All pending progress is applied the next day.\n\nWhen your Party members do enough damage or collect all items, the Quest ends and everyone will receive their rewards!",
 
   "faqQuestion10": "What are Gems, and how do I get them?",
   "iosFaqAnswer10": "Gems are purchased with real money from Menu > Purchase Gems. When you buy Gems, you are helping us to keep Habitica running. We’re very grateful for every bit of support!\n\n In addition to buying Gems directly, there are three other ways players can gain Gems:\n\n * Win a Challenge that has been set up by another player. Go to Menu > Challenges to join some.\n * Subscribe and unlock the ability to buy a certain number of Gems per month.\n * Contribute your skills to the Habitica project. See this wiki page for more details: [Contributing to Habitica](https://habitica.fandom.com/wiki/Contributing_to_Habitica).\n\n Keep in mind that items purchased with Gems do not offer any statistical advantages, so players can still make use of the app without them!",
@@ -75,29 +75,29 @@
   "parties": "Parties",
 
   "faqQuestion14": "How do I find a Party when I'm not in one?",
-  "iosFaqAnswer14": "If you want to experience Habitica with others but don’t know other players, searching for a Party is your best option! If you already know other players that have a Party, you can share your @username with them to be invited. Alternatively, you can create a new Party and invite them with their @username or email address.\n\nTo create or search for a Party, select “Party” in the navigation then choose the option that works for you.",
-  "androidFaqAnswer14": "If you want to experience Habitica with others but don’t know other players, searching for a Party is your best option! If you already know other players that have a Party, you can share your @username with them to be invited. Alternatively, you can create a new Party and invite them with their @username or email address.\n\nTo create or search for a Party, select “Party” in the navigation then choose the option that works for you.",
-  "webFaqAnswer14": "If you want to experience Habitica with others but don’t know other players, searching for a Party is your best option! If you already know other players that have a Party, you can share your @username with them to be invited. Alternatively, you can create a new Party and invite them with their @username or email address.\n\nTo create or search for a Party, select “Party” in the navigation then choose the option that works for you.",
+  "iosFaqAnswer14": "If you want to experience Habitica with others but don’t know other players, searching for a Party is your best option! If you already know other players that have a Party, you can share your @username with them to be invited. Alternatively, you can create a new Party and invite them with their @username or email address.\n\nTo create or search for a Party, select “Party” in the navigation menu, then choose the option that works for you.",
+  "androidFaqAnswer14": "If you want to experience Habitica with others but don’t know other players, searching for a Party is your best option! If you already know other players that have a Party, you can share your @username with them to be invited. Alternatively, you can create a new Party and invite them with their @username or email address.\n\nTo create or search for a Party, select “Party” in the navigation menu, then choose the option that works for you.",
+  "webFaqAnswer14": "If you want to experience Habitica with others but don’t know other players, searching for a Party is your best option! If you already know other players that have a Party, you can share your @username with them to be invited. Alternatively, you can create a new Party and invite them with their @username or email address.\n\nTo create or search for a Party, select “Party” in the navigation menu, then choose the option that works for you.",
 
   "faqQuestion15": "How does searching for a Party work?",
-  "iosFaqAnswer15": "After selecting “Look for a Party” in the Party pop-up, you’ll be added to a list of players that want to join a Party. Party leaders can view this list and send invitations. Once you receive an invitation, you can accept it from your notifications to join the Party of your choosing!\n\nYou may get multiple invitations to different Parties. However, you can only be a member of one Party at a time.",
-  "androidFaqAnswer15": "After selecting “Look for a Party” in the Party pop-up, you’ll be added to a list of players that want to join a Party. Party leaders can view this list and send invitations. Once you receive an invitation, you can accept it from your notifications to join the Party of your choosing!\n\nYou may get multiple invitations to different Parties. However, you can only be a member of one Party at a time.",
-  "webFaqAnswer15": "After selecting “Look for a Party” in the Party pop-up, you’ll be added to a list of players that want to join a Party. Party leaders can view this list and send invitations. Once you receive an invitation, you can accept it from your notifications to join the Party of your choosing!\n\nYou may get multiple invitations to different Parties. However, you can only be a member of one Party at a time.",
+  "iosFaqAnswer15": "After selecting “Look for a Party”, you’ll be added to a list of players that want to join a Party. Party leaders can view this list and send invitations. Once you receive an invitation, you can accept it from your notifications to join the Party of your choosing!\n\nYou may get multiple invitations to different Parties. However, you can only be a member of one Party at a time.",
+  "androidFaqAnswer15": "After selecting “Look for a Party”, you’ll be added to a list of players that want to join a Party. Party leaders can view this list and send invitations. Once you receive an invitation, you can accept it from your notifications to join the Party of your choosing!\n\nYou may get multiple invitations to different Parties. However, you can only be a member of one Party at a time.",
+  "webFaqAnswer15": "After selecting “Look for a Party”, you’ll be added to a list of players that want to join a Party. Party leaders can view this list and send invitations. Once you receive an invitation, you can accept it from your notifications to join the Party of your choosing!\n\nYou may get multiple invitations to different Parties. However, you can only be a member of one Party at a time.",
 
   "faqQuestion16": "How long can I search for a Party after joining the list?",
-  "iosFaqAnswer16": "You will remain in the list until you accept an invite to a Party or don’t login for 7 days, whichever comes first.",
-  "androidFaqAnswer16": "You will remain in the list until you accept an invite to a Party or don’t login for 7 days, whichever comes first.",
-  "webFaqAnswer16": "You will remain in the list until you accept an invite to a Party or don’t login for 7 days, whichever comes first.",
+  "iosFaqAnswer16": "You will remain in the list until you accept an invite to a Party or don’t login for 7 days, whichever comes first. If you log in after being inactive for 7 days, we’ll automatically add you back to the list as long as you don't have a pending invite.",
+  "androidFaqAnswer16": "You will remain in the list until you accept an invite to a Party or don’t login for 7 days, whichever comes first. If you log in after being inactive for 7 days, we’ll automatically add you back to the list as long as you don't have a pending invite.",
+  "webFaqAnswer16": "You will remain in the list until you accept an invite to a Party or don’t login for 7 days, whichever comes first. If you log in after being inactive for 7 days, we’ll automatically add you back to the list as long as you don't have a pending invite.",
 
   "faqQuestion17": "Can I stop searching for a Party?",
-  "iosFaqAnswer17": "You can leave the list at any time. To stop searching for Party on the website, select the “Party” link in the navigation then click “Leave” in the pop-up.",
-  "androidFaqAnswer17": "You can leave the list at any time. To stop searching for Party on the website, select the “Party” link in the navigation then click “Leave” in the pop-up.",
-  "webFaqAnswer17": "You can leave the list at any time. To stop searching for Party on the website, select the “Party” link in the navigation then click “Leave” in the pop-up.",
+  "iosFaqAnswer17": "If you no longer want to find a Party, you can stop searching at any time.\n\nTo stop searching for a Party on Habitica’s website:\n\n1. Select the “Party” link in the navigation.\n2. Click “Leave” in the pop-up.\n\nTo stop searching for a Party on the Android app:\n1. Tap on “Party” from the menu.\n2. Tap “Leave” at the bottom of the screen.",
+  "androidFaqAnswer17": "If you no longer want to find a Party, you can stop searching at any time.\n\nTo stop searching for a Party on Habitica’s website:\n\n1. Select the “Party” link in the navigation.\n2. Click “Leave” in the pop-up.\n\nTo stop searching for a Party on the Android app:\n1. Tap on “Party” from the menu.\n2. Tap “Leave” at the bottom of the screen.",
+  "webFaqAnswer17": "If you no longer want to find a Party, you can stop searching at any time.\n\nTo stop searching for a Party on Habitica’s website:\n\n1. Select the “Party” link in the navigation.\n2. Click “Leave” in the pop-up.\n\nTo stop searching for a Party on the Android app:\n1. Tap on “Party” from the menu.\n2. Tap “Leave” at the bottom of the screen.",
 
   "faqQuestion18": "I have a Party, how do I find more members?",
-  "iosFaqAnswer18": "If you are using Habitica’s website, select “Find Members” from the Party dropdown. This will display a list of Habitica players that are actively looking for a Party and can be invited to join.\n\nYou'll see some information, such as language, class, level, and how many days they have used Habitica to help find a good fit for your Party. If you’d like to chat with someone before sending an invite, you can view their Profile and send a message.",
-  "androidFaqAnswer18": "If you are using Habitica’s website, select “Find Members” from the Party dropdown. This will display a list of Habitica players that are actively looking for a Party and can be invited to join.\n\nYou'll see some information, such as language, class, level, and how many days they have used Habitica to help find a good fit for your Party. If you’d like to chat with someone before sending an invite, you can view their Profile and send a message.",
-  "webFaqAnswer18": "If you are using Habitica’s website, select “Find Members” from the Party dropdown. This will display a list of Habitica players that are actively looking for a Party and can be invited to join.\n\nYou'll see some information, such as language, class, level, and how many days they have used Habitica to help find a good fit for your Party. If you’d like to chat with someone before sending an invite, you can view their Profile and send a message.",
+  "iosFaqAnswer18": "If you are using Habitica’s website, select “Find Members” from the Party dropdown. If you’re using the Android app, tap “Find Members” above your Party’s member list. This will display a list of players that are actively looking for a Party and can be invited to join.\n\nTo help find a good fit for your Party, you'll see some information, such as language, class, level, and how many days they have used Habitica. If you’d like to chat with someone before sending an invite, you can view their Profile and send a message.",
+  "androidFaqAnswer18": "If you are using Habitica’s website, select “Find Members” from the Party dropdown. If you’re using the Android app, tap “Find Members” above your Party’s member list. This will display a list of players that are actively looking for a Party and can be invited to join.\n\nTo help find a good fit for your Party, you'll see some information, such as language, class, level, and how many days they have used Habitica. If you’d like to chat with someone before sending an invite, you can view their Profile and send a message.",
+  "webFaqAnswer18": "If you are using Habitica’s website, select “Find Members” from the Party dropdown. If you’re using the Android app, tap “Find Members” above your Party’s member list. This will display a list of players that are actively looking for a Party and can be invited to join.\n\nTo help find a good fit for your Party, you'll see some information, such as language, class, level, and how many days they have used Habitica. If you’d like to chat with someone before sending an invite, you can view their Profile and send a message.",
 
   "faqQuestion19": "How many members can I invite to my Party?",
   "iosFaqAnswer19": "Parties have a maximum limit of 30 members and a minimum of 1 member. Pending invites count towards the member count. For example, 29 members and 1 pending invite would count as 30 members. To clear a pending invite, the invited player must accept or decline, or the Party leader must cancel the invite.",
@@ -105,19 +105,19 @@
   "webFaqAnswer19": "Parties have a maximum limit of 30 members and a minimum of 1 member. Pending invites count towards the member count. For example, 29 members and 1 pending invite would count as 30 members. To clear a pending invite, the invited player must accept or decline, or the Party leader must cancel the invite.",
 
   "faqQuestion20": "Can I invite someone I already know?",
-  "iosFaqAnswer20": "Yes! If you already have a Habitica player’s username or email address, you can invite them to join your Party. Here’s how to send an invite on the different platforms:\n\n## On Habitica’s website\n\nNavigate to your Party and click “Invite to Party” on the right-hand side of the page.\n\n## On iOS and Android\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Invite a Member”.",
-  "androidFaqAnswer20": "Yes! If you already have a Habitica player’s username or email address, you can invite them to join your Party. Here’s how to send an invite on the different platforms:\n\n## On Habitica’s website\n\nNavigate to your Party and click “Invite to Party” on the right-hand side of the page.\n\n## On iOS and Android\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Invite a Member”.",
-  "webFaqAnswer20": "Yes! If you already have a Habitica player’s username or email address, you can invite them to join your Party. Here’s how to send an invite on the different platforms:\n\n## On Habitica’s website\n\nNavigate to your Party and click “Invite to Party” on the right-hand side of the page.\n\n## On iOS and Android\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Invite a Member”.",
+  "iosFaqAnswer20": "Yes! If you already have a Habitica player’s username or email address, you can invite them to join your Party. Here’s how to send an invite on the different platforms:\n\nOn Habitica’s website:\n\nNavigate to your Party and click “Invite to Party” on the right-hand side of the page.\n\nOn the Android app:\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Find Members” then tap the “By Invite” tab.\n\nOn the iOS app:\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Invite a Member”.",
+  "androidFaqAnswer20": "Yes! If you already have a Habitica player’s username or email address, you can invite them to join your Party. Here’s how to send an invite on the different platforms:\n\nOn Habitica’s website:\n\nNavigate to your Party and click “Invite to Party” on the right-hand side of the page.\n\nOn the Android app:\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Find Members” then tap the “By Invite” tab.\n\nOn the iOS app:\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Invite a Member”.",
+  "webFaqAnswer20": "Yes! If you already have a Habitica player’s username or email address, you can invite them to join your Party. Here’s how to send an invite on the different platforms:\n\nOn Habitica’s website:\n\nNavigate to your Party and click “Invite to Party” on the right-hand side of the page.\n\nOn the Android app:\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Find Members” then tap the “By Invite” tab.\n\nOn the iOS app:\n\nTap “Party” from the Menu. Scroll to the Members section and tap “Invite a Member”.",
 
   "faqQuestion21": "How do I cancel a pending invitation to my Party?",
-  "iosFaqAnswer21": "To cancel a pending invitation on Habitica’s website:\n\n1. Click on Member list when viewing your Party\n\n2. Click the “Invites” tab\n\n3. Click the three dots beside the user’s invite you wish to cancel\n\n4. Choose “Cancel Invite”\n\n\n\nYou’ll be able to cancel a pending invitation from the mobile apps soon as well!",
-  "androidFaqAnswer21": "To cancel a pending invitation on Habitica’s website:\n\n1. Click on Member list when viewing your Party\n\n2. Click the “Invites” tab\n\n3. Click the three dots beside the user’s invite you wish to cancel\n\n4. Choose “Cancel Invite”\n\n\n\nYou’ll be able to cancel a pending invitation from the mobile apps soon as well!",
-  "webFaqAnswer21": "To cancel a pending invitation on Habitica’s website:\n\n1. Click on Member list when viewing your Party\n\n2. Click the “Invites” tab\n\n3. Click the three dots beside the user’s invite you wish to cancel\n\n4. Choose “Cancel Invite”\n\n\n\nYou’ll be able to cancel a pending invitation from the mobile apps soon as well!",
+  "iosFaqAnswer21": "To cancel a pending invitation on Habitica’s website:\n\n1. Click on Member list when viewing your Party.\n2. Click the “Invites” tab.\n3. Click the three dots beside the user’s invite you wish to cancel.\n4. Choose “Cancel Invite”\n\nTo cancel a pending invitation on the Android app:\n\n1. Scroll down to your Member list when viewing your Party.\n2. At the bottom of the list, you’ll see your pending invites.\n3. Tap the “Cancel invitation” button.\n\nYou’ll be able to cancel a pending invitation from the iOS app soon as well!",
+  "androidFaqAnswer21": "To cancel a pending invitation on Habitica’s website:\n\n1. Click on Member list when viewing your Party.\n2. Click the “Invites” tab.\n3. Click the three dots beside the user’s invite you wish to cancel.\n4. Choose “Cancel Invite”\n\nTo cancel a pending invitation on the Android app:\n\n1. Scroll down to your Member list when viewing your Party.\n2. At the bottom of the list, you’ll see your pending invites.\n3. Tap the “Cancel invitation” button.\n\nYou’ll be able to cancel a pending invitation from the iOS app soon as well!",
+  "webFaqAnswer21": "To cancel a pending invitation on Habitica’s website:\n\n1. Click on Member list when viewing your Party.\n2. Click the “Invites” tab.\n3. Click the three dots beside the user’s invite you wish to cancel.\n4. Choose “Cancel Invite”\n\nTo cancel a pending invitation on the Android app:\n\n1. Scroll down to your Member list when viewing your Party.\n2. At the bottom of the list, you’ll see your pending invites.\n3. Tap the “Cancel invitation” button.\n\nYou’ll be able to cancel a pending invitation from the iOS app soon as well!",
 
   "faqQuestion22": "How do I stop unwanted invitations?",
-  "iosFaqAnswer22": "Once you join a Party you’ll stop receiving any more invitations. If you want to prevent invites and future communications from a specific player, view their profile and click the Block button.\n\nIf you encounter a situation where you believe another player has broken our Community Guidelines in their name, profile, or a message they sent, please report any messages or reach out to us at admin@habitica.com.",
-  "androidFaqAnswer22": "Once you join a Party you’ll stop receiving any more invitations. If you want to prevent invites and future communications from a specific player, view their profile and click the Block button.\n\nIf you encounter a situation where you believe another player has broken our Community Guidelines in their name, profile, or a message they sent, please report any messages or reach out to us at admin@habitica.com.",
-  "webFaqAnswer22": "Once you join a Party you’ll stop receiving any more invitations. If you want to prevent invites and future communications from a specific player, view their profile and click the Block button.\n\nIf you encounter a situation where you believe another player has broken our Community Guidelines in their name, profile, or a message they sent, please report any messages or reach out to us at admin@habitica.com.",
+  "iosFaqAnswer22": "Once you join a Party you’ll stop receiving any more invitations. If you want to prevent invites and future communications from a specific player, view their profile and click the Block button. On mobile profiles, tap the three dots in the top corner then select “Block”.\n\nIf you encounter a situation where you believe another player has broken our Community Guidelines in their name, profile, or a message they sent, please report any messages or reach out to us at admin@habitica.com.",
+  "androidFaqAnswer22": "Once you join a Party you’ll stop receiving any more invitations. If you want to prevent invites and future communications from a specific player, view their profile and click the Block button. On mobile profiles, tap the three dots in the top corner then select “Block”.\n\nIf you encounter a situation where you believe another player has broken our Community Guidelines in their name, profile, or a message they sent, please report any messages or reach out to us at admin@habitica.com.",
+  "webFaqAnswer22": "Once you join a Party you’ll stop receiving any more invitations. If you want to prevent invites and future communications from a specific player, view their profile and click the Block button. On mobile profiles, tap the three dots in the top corner then select “Block”.\n\nIf you encounter a situation where you believe another player has broken our Community Guidelines in their name, profile, or a message they sent, please report any messages or reach out to us at admin@habitica.com.",
 
   "faqQuestion23": "How do I filter the list of members searching for a Party?",
   "iosFaqAnswer23": "At the moment there is no way to filter the list of members searching for a Party. However, we have plans to introduce filters in the future, such as class, level, and language.",
@@ -125,9 +125,9 @@
   "webFaqAnswer23": "At the moment there is no way to filter the list of members searching for a Party. However, we have plans to introduce filters in the future, such as class, level, and language.",
 
   "faqQuestion24": "How do I search for a Party on Android or iOS?",
-  "iosFaqAnswer24": "We’re working on adding the ability to search for a Party and find Party members on mobile soon! Keep an eye out for Android version 4.2 and iOS version 3.8.",
-  "androidFaqAnswer24": "We’re working on adding the ability to search for a Party and find Party members on mobile soon! Keep an eye out for Android version 4.2 and iOS version 3.8.",
-  "webFaqAnswer24": "We’re working on adding the ability to search for a Party and find Party members on mobile soon! Keep an eye out for Android version 4.2 and iOS version 3.8.",
+  "iosFaqAnswer24": "We added the ability to look for a Party and find Party members in Android version 4.2! Be sure you’re updated to the latest version to check it out. Solo players can look for a Party from the Party screen when they aren’t in one. Party leaders can browse the list of players looking for an invite by tapping “Find Members” above their Party’s member list.\n\nSupport for the feature is coming to iOS in version 3.8, so keep an eye out soon!",
+  "androidFaqAnswer24": "We added the ability to look for a Party and find Party members in Android version 4.2! Be sure you’re updated to the latest version to check it out. Solo players can look for a Party from the Party screen when they aren’t in one. Party leaders can browse the list of players looking for an invite by tapping “Find Members” above their Party’s member list.\n\nSupport for the feature is coming to iOS in version 3.8, so keep an eye out soon!",
+  "webFaqAnswer24": "We added the ability to look for a Party and find Party members in Android version 4.2! Be sure you’re updated to the latest version to check it out. Solo players can look for a Party from the Party screen when they aren’t in one. Party leaders can browse the list of players looking for an invite by tapping “Find Members” above their Party’s member list.\n\nSupport for the feature is coming to iOS in version 3.8, so keep an eye out soon!",
 
   "iosFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](https://habitica.fandom.com/wiki/FAQ), come ask in the Tavern chat under Menu > Tavern! We're happy to help.",
   "androidFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](https://habitica.fandom.com/wiki/FAQ), come ask in the Tavern chat under Menu > Tavern! We're happy to help.",
diff --git a/website/common/locales/en/gear.json b/website/common/locales/en/gear.json
index 28a2b6a77f..3cc49c3fea 100644
--- a/website/common/locales/en/gear.json
+++ b/website/common/locales/en/gear.json
@@ -506,7 +506,9 @@
   "weaponMystery202211Text": "Electromancer Staff",
   "weaponMystery202211Notes": "Harness the awesome power of a lightning storm with this staff. Confers no benefit. November 2022 Subscriber Item.",
   "weaponMystery202212Text": "Glacial Wand",
-  "weaponMystery202212Notes": "The glowing snowflake in this wand holds the power to warm hearts on even the coldest winter night! Confers no benefit. December 2022 Subscriber Item.",  
+  "weaponMystery202212Notes": "The glowing snowflake in this wand holds the power to warm hearts on even the coldest winter night! Confers no benefit. December 2022 Subscriber Item.",
+  "weaponMystery202306Text": "Rainbow Umbrella",
+  "weaponMystery202306Notes": "Shine proud and bring a shimmering prism of color wherever you go! Confers no benefit. June 2023 Subscriber Item.",  
   "weaponMystery301404Text": "Steampunk Cane",
   "weaponMystery301404Notes": "Excellent for taking a turn about town. March 3015 Subscriber Item. Confers no benefit.",
 
@@ -1267,6 +1269,8 @@
   "armorMystery202212Notes": "The universe can be cold, but this charming dress will keep you cozy as you fly. Confers no benefit. December 2022 Subscriber Item.",
   "armorMystery202304Text": "Tiptop Teapot Armor",
   "armorMystery202304Notes": "Here is your handle and here is your spout! Confers no benefit. April 2023 Subscriber Item.",
+  "armorMystery202306Text": "Rainbow Parka",
+  "armorMystery202306Notes": "No one’s going to rain on your parade! And if they try, you’ll stay colorful and dry! Confers no benefit. June 2023 Subscriber Item.",
 
   "armorMystery301404Text": "Steampunk Suit",
   "armorMystery301404Notes": "Dapper and dashing, wot! Confers no benefit. February 3015 Subscriber Item.",
diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json
index 8b7fb17a25..167627413c 100644
--- a/website/common/locales/en/generic.json
+++ b/website/common/locales/en/generic.json
@@ -208,7 +208,7 @@
   "userSentMessage": "<span class=\"notification-bold\"><%- user %></span> sent you a message",
   "letsgo": "Let's Go!",
   "selected": "Selected",
-  "howManyToBuy": "How many would you like to buy?",
+  "howManyToBuy": "How many would you like to purchase?",
   "contactForm": "Contact the Moderation Team",
   "loadEarlierMessages": "Load Earlier Messages",
   "askQuestion": "Ask a Question",
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index fdffc61d24..758f76fa7d 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -130,7 +130,7 @@
   "sendGiftHeading": "Send Gift to <%= name %>",
   "sendGiftGemsBalance": "From <%= number %> Gems",
   "sendGiftCost": "Total: $<%= cost %> USD",
-  "sendGiftTotal": "Total:",
+  "sendTotal": "Total:",
   "sendGiftFromBalance": "From Balance",
   "sendGiftPurchase": "Purchase",
   "sendGiftLabel": "Would you like to send a gift message?",
diff --git a/website/common/locales/en/npc.json b/website/common/locales/en/npc.json
index c1c9c191ce..694ff6f972 100644
--- a/website/common/locales/en/npc.json
+++ b/website/common/locales/en/npc.json
@@ -31,6 +31,7 @@
   "howManyToSell": "How many would you like to sell?",
   "yourBalance": "Your balance:",
   "sell": "Sell",
+  "sellItems": "Sell Items",
   "buyNow": "Buy Now",
   "sortByNumber": "Number",
   "featuredItems": "Featured Items!",
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index df5f49cb68..165ebafe44 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -150,6 +150,7 @@
     "mysterySet202303": "Mane Character Set",
     "mysterySet202304": "Tiptop Teapot Set",
     "mysterySet202305": "Eventide Dragon Set",
+    "mysterySet202306": "Razzle Dazzle Rainbow Set",
     "mysterySet301404": "Steampunk Standard Set",
     "mysterySet301405": "Steampunk Accessories Set",
     "mysterySet301703": "Peacock Steampunk Set",
@@ -194,8 +195,8 @@
     "subscriptionBenefit5": "Receive the Royal Purple Jackalope pet when you become a new subscriber.",
     "subscriptionBenefit6": "Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!",
     "purchaseAll": "Purchase Set",
-    "gemsRemaining": "Gems remaining",
-    "notEnoughGemsToBuy": "You are unable to buy that amount of Gems",
+    "gemsRemaining": "remaining",
+    "notEnoughGemsToBuy": "No more Gems available for purchase this month. More will become available within the first 3 days of each month.",
     "subscribersReceiveBenefits": "Subscribers receive these useful benefits!",
     "monthlyMysteryItems": "Monthly Mystery Items",
     "doubleDropCap": "Double the Drops",
@@ -217,5 +218,6 @@
     "haveNonRecurringSub": "You have a non-recurring gift subscription.",
     "switchToRecurring": "Switch to a recurring subscription?",
     "continueGiftSubBenefits": "Want to continue your benefits? You can start a new subscription before your gifted one runs out to keep your benefits active.",
-    "subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled."
+    "subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled.",
+    "monthlyGems": "Monthly Gems:"
 }
diff --git a/website/common/script/content/gear/sets/mystery.js b/website/common/script/content/gear/sets/mystery.js
index 0800c2363d..c80002ac24 100644
--- a/website/common/script/content/gear/sets/mystery.js
+++ b/website/common/script/content/gear/sets/mystery.js
@@ -61,6 +61,7 @@ const armor = {
   202210: { },
   202212: { },
   202304: { },
+  202306: { },
   301404: { },
   301703: { },
   301704: { },
@@ -267,6 +268,7 @@ const weapon = {
   202201: { },
   202212: { },
   202209: { },
+  202306: { },
   301404: { },
 };