diff --git a/public/css/inventory.styl b/public/css/inventory.styl
index f339b1f1e3..fdee785097 100644
--- a/public/css/inventory.styl
+++ b/public/css/inventory.styl
@@ -103,3 +103,6 @@ menu.pets div
     -moz-filter: brightness(0%)
     -o-filter: brightness(0%)
     -ms-filter: brightness(0%)*/
+
+.selectableInventory
+  background-color: lightgreen !important
diff --git a/public/js/controllers/inventoryCtrl.js b/public/js/controllers/inventoryCtrl.js
index 862aa27d2c..c45e86da0f 100644
--- a/public/js/controllers/inventoryCtrl.js
+++ b/public/js/controllers/inventoryCtrl.js
@@ -1,27 +1,42 @@
 habitrpg.controller("InventoryCtrl", ['$scope', 'User',
   function($scope, User) {
 
-    $scope.hatching = false;
+    // convenience vars since these are accessed frequently
     $scope.userEggs = User.user.items.eggs;
     $scope.userHatchingPotions = User.user.items.hatchingPotions;
 
     $scope.chooseEgg = function(egg){
-      if($scope.userHatchingPotions && $scope.userHatchingPotions.length < 1) {
-        return alert("You have no hatching potion!");
+      if (!$scope.selectedPotion) {
+        $scope.selectedEgg = egg.name;
+      } else {
+        $scope.hatch(egg, $scope.selectedPotion);
       }
-
-      $scope.selectedEgg = egg;
-      $scope.selectedPotion = $scope.userHatchingPotions[0];
-      $scope.hatching = true;
     }
 
-    $scope.pour = function(){
-      var pet = $scope.selectedEgg.name + '-' + $scope.selectedPotion;
+    $scope.choosePotion = function(potion){
+      if (!$scope.selectedEgg) {
+        $scope.selectedPotion = potion;
+      } else {
+        $scope.hatch($scope.selectedEgg, potion);
+      }
+    }
 
-      if(User.user.items.pets && ~User.user.items.pets.indexOf(pet)) {
+    $scope.ownsPet = function(egg, potion){
+      if (!egg || !potion) return;
+      var pet = egg + '-' + potion;
+      return User.user.items.pets && ~User.user.items.pets.indexOf(pet)
+    }
+
+    $scope.selectableInventory = function(egg, potion) {
+      if (!egg || !potion) return;
+      if (!$scope.ownsPet(egg, potion)) return 'selectableInventory';
+    }
+
+    $scope.hatch = function(egg, potion){
+      var pet = $scope.selectedEgg + '-' + $scope.selectedPotion;
+      if ($scope.ownsPet(egg, potion)){
         return alert("You already have that pet, hatch a different combo.")
       }
-
       var i = _.indexOf($scope.userEggs, $scope.selectedEgg);
       $scope.userEggs.splice(i, 1);
 
@@ -40,7 +55,7 @@ habitrpg.controller("InventoryCtrl", ['$scope', 'User',
       alert("Your egg hatched! Visit your stable to equip your pet.");
 
       $scope.selectedEgg = null;
-      $scope.hatching = false;
+      $scope.selectedPotion = null;
     }
 
   }]);
\ No newline at end of file
diff --git a/public/js/filters/filters.js b/public/js/filters/filters.js
index 0e0d79d0ae..65223c5957 100644
--- a/public/js/filters/filters.js
+++ b/public/js/filters/filters.js
@@ -1,10 +1,10 @@
 angular.module('habitrpg')
-    .filter('gold', function () {
-        return function (gp) {
-            return Math.floor(gp);
-        }
-    }).filter('silver', function () {
-        return function (gp) {
-            return Math.floor((gp - Math.floor(gp))*100);
-        }
-    });
\ No newline at end of file
+  .filter('gold', function () {
+    return function (gp) {
+      return Math.floor(gp);
+    }
+  }).filter('silver', function () {
+    return function (gp) {
+      return Math.floor((gp - Math.floor(gp))*100);
+    }
+  });
diff --git a/views/options/inventory.jade b/views/options/inventory.jade
index e5718cfcaa..dbbb63fc9c 100644
--- a/views/options/inventory.jade
+++ b/views/options/inventory.jade
@@ -5,13 +5,13 @@
         menu.pets-menu(label='Eggs ({{userEggs.length}})')
           p(ng-show='userEggs.length < 1') You don't have any eggs yet.
           div(ng-repeat='egg in userEggs track by $index')
-            button.customize-option(tooltip='{{egg.text}}', ng-click='chooseEgg(egg)', class='Pet_Egg_{{egg.name}}')
+            button.customize-option(tooltip='{{egg.text}}', ng-click='chooseEgg(egg)', class='Pet_Egg_{{egg.name}}', ng-class='selectableInventory(egg.name, selectedPotion)')
             p {{egg.text}}
       li.customize-menu
         menu.hatchingPotion-menu(label='Hatching Potions ({{userHatchingPotions.length}})')
           p(ng-show='userHatchingPotions.length < 1') You don't have any hatching potions yet.
           div(ng-repeat='hatchingPotion in userHatchingPotions track by $index')
-            button.customize-option(tooltip='{{hatchingPotion}}', class='Pet_HatchingPotion_{{hatchingPotion}}')
+            button.customize-option(tooltip='{{hatchingPotion}}', ng-click='choosePotion(hatchingPotion)', class='Pet_HatchingPotion_{{hatchingPotion}}', ng-class='selectableInventory(selectedEgg, hatchingPotion)')
             p {{hatchingPotion}}
   .span6(ng-show='hatching')
     h3 Hatch Your Egg