diff --git a/website/client/assets/scss/item.scss b/website/client/assets/scss/item.scss
index da4056acfe..01021ec567 100644
--- a/website/client/assets/scss/item.scss
+++ b/website/client/assets/scss/item.scss
@@ -2,7 +2,7 @@
 
 .items > div {
   display: inline-block;
-  margin-right: 23px;
+  margin-right: 24px;
 }
 
 .items > div:last-of-type {
diff --git a/website/client/components/inventory/items/index.vue b/website/client/components/inventory/items/index.vue
index cb747fcb20..05e7ef4dd4 100644
--- a/website/client/components/inventory/items/index.vue
+++ b/website/client/components/inventory/items/index.vue
@@ -127,10 +127,7 @@
                 :count="context.item.quantity"
               )
 
-  hatchedPetDialog(
-    :pet="hatchedPet",
-    @closed="closeHatchedPetDialog()"
-  )
+  hatchedPetDialog()
 
   div.hatchingPotionInfo(ref="draggingPotionInfo")
     div(v-if="currentDraggingPotion != null")
@@ -251,7 +248,6 @@ export default {
 
       currentDraggingPotion: null,
       potionClickMode: false,
-      hatchedPet: null,
       cardOptions: {
         cardType: '',
         messageOptions: 0,
@@ -345,7 +341,7 @@ export default {
     },
     hatchPet (potion, egg) {
       this.$store.dispatch('common:hatch', {egg: egg.key, hatchingPotion: potion.key});
-      this.hatchedPet = createAnimal(egg, potion, 'pet', this.content, this.user.items);
+      this.$root.$emit('hatchedPet::open', createAnimal(egg, potion, 'pet', this.content, this.user.items));
     },
     onDragEnd () {
       this.currentDraggingPotion = null;
@@ -405,9 +401,6 @@ export default {
         this.potionClickMode = false;
       }
     },
-    closeHatchedPetDialog () {
-      this.hatchedPet = null;
-    },
 
     async itemClicked (groupKey, item) {
       if (item.type && item.type === 'card') {
diff --git a/website/client/components/inventory/stable/hatchedPetDialog.vue b/website/client/components/inventory/stable/hatchedPetDialog.vue
index 98217031f6..3c1610a91f 100644
--- a/website/client/components/inventory/stable/hatchedPetDialog.vue
+++ b/website/client/components/inventory/stable/hatchedPetDialog.vue
@@ -1,12 +1,10 @@
 <template lang="pug">
 
   b-modal#hatchedPet-modal(
-    :visible="true",
-    v-if="pet != null",
     :hide-header="true"
   )
-    div.content
-      div.dialog-header.title You hatched a new pet!
+    div.content(v-if="pet != null")
+      div.dialog-header.title(v-once) {{ $t('hatchedPetGeneric') }}
 
 
       div.inner-content
@@ -45,7 +43,7 @@
     }
 
     .inner-content {
-      margin: 33px auto auto;
+      margin: 24px auto auto;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -77,16 +75,33 @@
     components: {
       bModal,
     },
+    data () {
+      return {
+        pet: null,
+      };
+    },
+    created () {
+
+    },
+    mounted () {
+      this.$root.$on('hatchedPet::open', this.openDialog);
+    },
+    destroyed () {
+      this.$root.$off('hatchedPet::open', this.openDialog);
+    },
     methods: {
+      openDialog (item) {
+        this.pet = item;
+        this.$root.$emit('show::modal', 'hatchedPet-modal');
+      },
+
       close () {
         this.$emit('closed', this.item);
         this.$root.$emit('hide::modal', 'hatchedPet-modal');
+        this.pet = null;
       },
     },
     props: {
-      pet: {
-        type: Object,
-      },
       hideText: {
         type: Boolean,
       },
diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
index afaa1ffd92..3f220968b7 100644
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -210,7 +210,6 @@
         div.content-text(v-once) {{ $t('welcomeStableText') }}
 
     b-modal#hatching-modal(
-      :visible="hatchablePet != null",
       @change="resetHatchablePet($event)"
     )
       div.content(v-if="hatchablePet")
@@ -230,9 +229,7 @@
         button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
 
     hatchedPetDialog(
-      :pet="hatchedPet",
       :hideText="true",
-      @closed="closeHatchedPetDialog()"
     )
 
     div.foodInfo(ref="dragginFoodInfo")
@@ -337,11 +334,6 @@
       padding-right:0;
     }
 
-    .drawer-container {
-      // 3% padding + 252px sidebar width
-      left: calc(3% + 252px) !important;
-    }
-
     .svg-icon.inline.icon-16 {
       vertical-align: bottom;
     }
@@ -392,7 +384,6 @@
     }
 
     .title {
-      height: 24px;
       margin-top: 24px;
       font-family: Roboto;
       font-size: 20px;
@@ -588,7 +579,6 @@
         highlightPet: '',
 
         hatchablePet: null,
-        hatchedPet: null,
         foodClickMode: false,
         currentDraggingFood: null,
 
@@ -918,7 +908,8 @@
 
       hatchPet (pet) {
         this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
-        this.hatchedPet = pet;
+
+        this.$root.$emit('hatchedPet::open', pet);
         this.closeHatchPetDialog();
       },
 
@@ -974,6 +965,8 @@
           }
           // opens the hatch dialog
           this.hatchablePet = pet;
+
+          this.$root.$emit('show::modal', 'hatching-modal');
         }
       },
 
@@ -988,9 +981,6 @@
       closeHatchPetDialog () {
         this.$root.$emit('hide::modal', 'hatching-modal');
       },
-      closeHatchedPetDialog () {
-        this.hatchedPet = null;
-      },
 
       resetHatchablePet ($event) {
         if (!$event) {
diff --git a/website/client/components/ui/drawer.vue b/website/client/components/ui/drawer.vue
index 4642d34360..f2aa4c00bd 100644
--- a/website/client/components/ui/drawer.vue
+++ b/website/client/components/ui/drawer.vue
@@ -26,9 +26,9 @@
     max-width: 80%;
 
     @media screen and (min-width: 1241px) {
-      max-width: 968px;
+      max-width: 978px;
       // 16.67% is the width of the .col-2 sidebar
-      left: calc((100% + 16.67% - 968px) / 2);
+      left: calc((100% + 16.67% - 978px) / 2);
       right: 0%;
     }
   }
diff --git a/website/client/components/ui/itemRows.vue b/website/client/components/ui/itemRows.vue
index 4dc33d120d..1b205ed5d1 100644
--- a/website/client/components/ui/itemRows.vue
+++ b/website/client/components/ui/itemRows.vue
@@ -23,6 +23,10 @@
   .fill-height {
     height: 38px; // button + margin + padding
   }
+
+  .item-rows {
+    margin-right: -24px;
+  }
 </style>
 
 <script>
diff --git a/website/common/locales/en/pets.json b/website/common/locales/en/pets.json
index 38ea8b13c2..dbd9f4e8f5 100644
--- a/website/common/locales/en/pets.json
+++ b/website/common/locales/en/pets.json
@@ -73,6 +73,7 @@
   "useGems": "If you've got your eye on a pet, but can't wait any longer for it to drop, use Gems in <strong>Inventory > Market</strong> to buy one!",
   "hatchAPot": "Hatch a new <%= potion %> <%= egg %>?",
   "hatchedPet": "You hatched a new <%= potion %> <%= egg %>!",
+  "hatchedPetGeneric": "You hatched a new pet!",
   "displayNow": "Display Now",
   "displayLater": "Display Later",
   "petNotOwned": "You do not own this pet.",