diff --git a/website/client/components/inventory/stable/hatchingModal.vue b/website/client/components/inventory/stable/hatchingModal.vue
index cfd89d47bc..a7fc612f89 100644
--- a/website/client/components/inventory/stable/hatchingModal.vue
+++ b/website/client/components/inventory/stable/hatchingModal.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-b-modal#hatching-modal(@change="resetHatchablePet($event)")
+b-modal#hatching-modal()
   div.content(v-if="hatchablePet")
     div.potionEggGroup
       div.potionEggBackground
@@ -73,12 +73,5 @@ export default {
       }),
     };
   },
-  methods: {
-    resetHatchablePet ($event) {
-      if (!$event) {
-        this.hatchablePet = null;
-      }
-    },
-  },
 };
 </script>
diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
index 8634d67166..cc389c86c4 100644
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -88,7 +88,6 @@
             :item="item",
             :popoverPosition="'top'",
             :progress="item.progress",
-            :emptyItem="!item.isOwned()",
             :showPopover="currentDraggingFood == null",
             :highlightBorder="highlightPet == item.key",
             @click="petClicked(item)"
diff --git a/website/client/components/inventory/stable/petItem.vue b/website/client/components/inventory/stable/petItem.vue
index e61b220d0c..e188cabea7 100644
--- a/website/client/components/inventory/stable/petItem.vue
+++ b/website/client/components/inventory/stable/petItem.vue
@@ -8,7 +8,7 @@ div
       span.item-content.hatchAgain(v-if="mountOwned && isHatchable")
         span.egg(:class="eggClass")
         span.potion(:class="potionClass")
-      span.item-content(v-else, :class="getPetItemClass()")
+      span.item-content(v-else, :class="getPetItemClass")
       span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
         div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
     span.item-label(v-if="label") {{ label }}
@@ -85,10 +85,6 @@ div
         type: Number,
         default: -1,
       },
-      emptyItem: {
-        type: Boolean,
-        default: false,
-      },
       highlightBorder: {
         type: Boolean,
         default: false,
@@ -111,12 +107,16 @@ div
       click () {
         this.$emit('click', {});
       },
+    },
+    computed: {
+      potionClass () {
+        return `Pet_HatchingPotion_${this.item.potionKey}`;
+      },
+      eggClass () {
+        return `Pet_Egg_${this.item.eggKey}`;
+      },
       getPetItemClass () {
-        if (this.mountOwned && !this.isHatchable) {
-          return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
-        }
-
-        if (this.item.isOwned()) {
+        if (this.item.isOwned() || this.mountOwned && this.isHatchable) {
           return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
         }
 
@@ -131,20 +131,15 @@ div
         // Can't hatch
         return 'GreyedOut PixelPaw';
       },
-    },
-    computed: {
-      potionClass () {
-        return `Pet_HatchingPotion_${this.item.potionKey}`;
-      },
-      eggClass () {
-        return `Pet_Egg_${this.item.eggKey}`;
-      },
       isHatchable () {
         return this.item.isHatchable();
       },
       mountOwned () {
         return this.item.mountOwned();
       },
+      emptyItem () {
+        return !this.item.isOwned();
+      },
     },
   };
 </script>
diff --git a/website/client/mixins/petMixin.js b/website/client/mixins/petMixin.js
index 8ea3a658cf..5d12d42270 100644
--- a/website/client/mixins/petMixin.js
+++ b/website/client/mixins/petMixin.js
@@ -1,4 +1,7 @@
+import notifications from './notifications';
+
 export default {
+  mixins: [notifications],
   methods: {
     closeHatchPetDialog () {
       this.$root.$emit('bv::hide::modal', 'hatching-modal');