diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 9013f9bc73..452ce3a533 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -377,8 +377,10 @@
 
 <script>
 import keys from 'lodash/keys';
+import size from 'lodash/size';
 import reduce from 'lodash/reduce';
 import moment from 'moment';
+
 import * as Analytics from '@/libs/analytics';
 import spellsMixin from '@/mixins/spells';
 import planGemLimits from '@/../../common/script/libs/planGemLimits';
@@ -406,10 +408,13 @@ import Avatar from '@/components/avatar';
 
 import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
 import { drops as dropEggs } from '@/../../common/script/content/eggs';
-
+import { drops as dropPotions } from '@/../../common/script/content/hatching-potions';
 
 const dropEggKeys = keys(dropEggs);
 
+const amountOfDropEggs = size(dropEggs);
+const amountOfDropPotions = size(dropPotions);
+
 const hideAmountSelectionForPurchaseTypes = [
   'gear', 'backgrounds', 'mystery_set', 'card',
   'rebirth_orb', 'fortify', 'armoire', 'keys',
@@ -529,23 +534,47 @@ export default {
 
       if (
         this.item.pinType === 'premiumHatchingPotion'
-        || (this.item.pinType === 'eggs' && dropEggKeys.indexOf(this.item.key) === -1)
+        || (this.item.pinType === 'eggs' && !dropEggKeys.includes(this.item.key))
       ) {
-        let petsRemaining = 20 - this.selectedAmountToBuy;
-        petsRemaining -= reduce(this.user.items.pets, (sum, petValue, petKey) => {
-          if (petKey.indexOf(this.item.key) !== -1 && petValue > 0) return sum + 1;
-          return sum;
-        }, 0);
-        petsRemaining -= reduce(this.user.items.mounts, (sum, mountValue, mountKey) => {
-          if (mountKey.indexOf(this.item.key) !== -1 && mountValue === true) return sum + 1;
-          return sum;
-        }, 0);
-        if (this.item.pinType === 'premiumHatchingPotion') {
-          petsRemaining -= this.user.items.hatchingPotions[this.item.key] + 2 || 2;
-        } else {
-          petsRemaining -= this.user.items.eggs[this.item.key] || 0;
+        /* Total amount of pets to hatch with item bought */
+        let totalPetsToHatch;
+
+        if (this.item.pinType === 'premiumHatchingPotion') { // buying potions
+          if (this.item.path.includes('wackyHatchingPotions.')) {
+            // wacky potions don't have mounts
+            totalPetsToHatch = amountOfDropEggs;
+          } else {
+            // Each of the drop eggs, combine into pet twice
+            totalPetsToHatch = amountOfDropEggs * 2;
+          }
+        } else { // buying quest eggs: Each of the drop potions, combine into pet twice
+          totalPetsToHatch = amountOfDropPotions * 2;
         }
 
+        /* Amount of items the user already has */
+        let ownedItems;
+        if (this.item.pinType === 'premiumHatchingPotion') {
+          ownedItems = this.user.items.hatchingPotions[this.item.key] || 0;
+        } else {
+          ownedItems = this.user.items.eggs[this.item.key] || 0;
+        }
+
+        const ownedPets = reduce(this.user.items.pets, (sum, petValue, petKey) => {
+          if (petKey.includes(this.item.key) && petValue > 0) return sum + 1;
+          return sum;
+        }, 0);
+
+        const ownedMounts = reduce(this.user.items.mounts, (sum, mountValue, mountKey) => {
+          if (mountKey.includes(this.item.key) && mountValue === true) return sum + 1;
+          return sum;
+        }, 0);
+
+        const petsRemaining = totalPetsToHatch
+          - this.selectedAmountToBuy
+          - ownedPets
+          - ownedMounts
+          - ownedItems;
+
         if (
           petsRemaining < 0
           && !window.confirm(this.$t('purchasePetItemConfirm', { itemText: this.item.text }))