diff --git a/common/img/sprites/spritesmith/misc/empty_bottles.png b/common/img/sprites/spritesmith/misc/empty_bottles.png
new file mode 100644
index 0000000000..b7fb090f00
Binary files /dev/null and b/common/img/sprites/spritesmith/misc/empty_bottles.png differ
diff --git a/common/locales/en/pets.json b/common/locales/en/pets.json
index 3dfd475547..f7aafa49d0 100644
--- a/common/locales/en/pets.json
+++ b/common/locales/en/pets.json
@@ -58,6 +58,10 @@
     "firstDrop": "You've unlocked the Drop System! Now when you complete tasks, you have a small chance of finding an item, including eggs, potions, and food! You just found a <strong><%= eggText %> Egg</strong>! <%= eggNotes %>",
     "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 <%= potion %> <%= egg %>?",
+    "hatchedPet": "You hatched a <%= potion %> <%= egg %>!",
+    "displayNow": "Display Now",
+    "displayLater": "Display Later",
+    "earnedCompanion": "With all your productivity, you've earned a new companion. Feed it to make it grow!",
     "feedPet": "Feed <%= article %><%= text %> to your <%= name %>?",
     "useSaddle": "Saddle <%= pet %>?",
     "petName": "<%= potion %> <%= egg %>",
diff --git a/website/public/js/controllers/inventoryCtrl.js b/website/public/js/controllers/inventoryCtrl.js
index 8f683f8265..a7df7c8309 100644
--- a/website/public/js/controllers/inventoryCtrl.js
+++ b/website/public/js/controllers/inventoryCtrl.js
@@ -112,6 +112,8 @@ habitrpg.controller("InventoryCtrl",
       var potName = Content.hatchingPotions[potion.key].text();
       if (!$window.confirm(window.env.t('hatchAPot', {potion: potName, egg: eggName}))) return;
       user.ops.hatch({params:{egg:egg.key, hatchingPotion:potion.key}});
+      $rootScope.hatchedPet = {egg: eggName, potion: potName, pet: 'Pet-' + egg.key + '-' + potion.key};
+      $rootScope.openModal('hatchPet', {controller: 'InventoryCtrl', size: 'sm'});
       $scope.selectedEgg = null;
       $scope.selectedPotion = null;
 
diff --git a/website/views/shared/modals/hatch-pet.jade b/website/views/shared/modals/hatch-pet.jade
new file mode 100644
index 0000000000..54a3cb135f
--- /dev/null
+++ b/website/views/shared/modals/hatch-pet.jade
@@ -0,0 +1,20 @@
+include ../avatar/generated_avatar
+
+script(type='text/ng-template', id='modals/hatchPet.html')
+  .modal-content(style='min-width:28em')
+    .modal-body.text-center
+      h3(style='margin-bottom: 0')=env.t('hatchedPet',{egg:'{{::hatchedPet.egg}}', potion:'{{::hatchedPet.potion}}'})
+      .container-fluid
+        .row(style='margin-bottom:1em', ng-controller='UserCtrl')
+          .col-xs-4(style='padding:0')
+            div(class='{{::hatchedPet.pet}}').pull-right
+          .col-xs-3
+            .empty_bottles(style='margin-top:2.8em')
+          .col-xs-5(style='padding:0')
+            .herobox(style='padding:0; width:0; height:0')
+              .character-sprites(style='width:0; margin-top:.5em')
+                +generatedAvatar
+      p=env.t('earnedCompanion')
+    .modal-footer(style='margin-top:0')
+      button.btn.btn-primary(ng-click='choosePet(hatchedPet.egg, hatchedPet.potion); $close()')=env.t('displayNow')
+      button.btn.btn-default(ng-click='$close()')=env.t('displayLater')
diff --git a/website/views/shared/modals/index.jade b/website/views/shared/modals/index.jade
index 688219e898..78658a0c18 100644
--- a/website/views/shared/modals/index.jade
+++ b/website/views/shared/modals/index.jade
@@ -15,6 +15,7 @@ include ./invite-friends
 include ./welcome.jade
 include ./low-health.jade
 include ./level-up.jade
+include ./hatch-pet.jade
 
 //- Settings
 script(type='text/ng-template', id='modals/change-day-start.html')