diff --git a/assets/js/appMain.js b/assets/js/appMain.js
index 9f57a33254..8d568c62bd 100644
--- a/assets/js/appMain.js
+++ b/assets/js/appMain.js
@@ -22,4 +22,5 @@
 //= require controllers/userAvatarCtrl
 //= require controllers/groupsCtrl
 //= require controllers/petsCtrl
+//= require controllers/inventoryCtrl
 //= require controllers/footerCtrl
\ No newline at end of file
diff --git a/assets/js/controllers/inventoryCtrl.js b/assets/js/controllers/inventoryCtrl.js
new file mode 100644
index 0000000000..7e8db4340c
--- /dev/null
+++ b/assets/js/controllers/inventoryCtrl.js
@@ -0,0 +1,46 @@
+habitrpg.controller("InventoryCtrl", ['$scope', 'User',
+  function($scope, User) {
+
+    $scope.hatching = false;
+    $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!");
+      }
+
+      $scope.selectedEgg = egg;
+      $scope.selectedPotion = $scope.userHatchingPotions[0];
+      $scope.hatching = true;
+    }
+
+    $scope.pour = function(){
+      var i = _.indexOf($scope.userEggs, $scope.selectedEgg);
+      $scope.userEggs.splice(i, 1);
+
+      i = _.indexOf($scope.userHatchingPotions, $scope.selectedPotion);
+      $scope.userHatchingPotions.splice(i, 1);
+
+      var pet = $scope.selectedEgg.name + '-' + $scope.selectedPotion;
+
+      if(User.user.items.pets && User.user.items.pets.indexOf(pet) != -1) {
+        return alert("You already have that pet, hatch a different combo.")
+      }
+
+      if(!User.user.items.pets) User.user.items.pets = [];
+      User.user.items.pets.push(pet);
+
+      User.log([
+        { op: 'set', data: {'items.pets': User.user.items.pets} },
+        { op: 'set', data: {'items.eggs': $scope.userEggs} },
+        { op: 'set', data: {'items.hatchingPotions': $scope.userHatchingPotions} }
+      ]);
+
+      alert("Your egg hatched! Visit your stable to equip your pet.");
+
+      $scope.selectedEgg = null;
+      $scope.hatching = false;
+    }
+
+  }]);
\ No newline at end of file
diff --git a/views/options/inventory.jade b/views/options/inventory.jade
index f152927b93..29eff8dc6d 100644
--- a/views/options/inventory.jade
+++ b/views/options/inventory.jade
@@ -1,24 +1,23 @@
-.row-fluid
-  div(ng-class='{span6: _hatchEgg}')
+.row-fluid(ng-controller='InventoryCtrl')
+  div(ng-class='{span6: hatching}')
     menu.inventory-list(type='list')
       li.customize-menu
         menu.pets-menu(label='Eggs')
-          p(ng-show='!user.items.eggs') You don't have any eggs yet.
-          div(ng-repeat='egg in user.items.eggs track by $index')
-            button.customize-option(tooltip='{{egg.text}}', x-bind='click: chooseEgg', class='Pet_Egg_{{egg.name}}')
+          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}}')
             p {{egg.text}}
       li.customize-menu
         menu.hatchingPotion-menu(label='Hatching Potions')
-          p(ng-show='!user.items.hatchingPotions') You don't have any hatching potions yet.
-          div(ng-repeat='hatchingPotion in user.items.hatchingPotions track by $index')
-            button.customize-option(tooltip='{{hatchingPotion}}', x-bind='click: chooseHatching Potion', class='Pet_HatchingPotion_{{hatchingPotion}}')
+          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}}')
             p {{hatchingPotion}}
-  .span6(ng-show='_hatchEgg')
+  .span6(ng-show='hatching')
     h3 Hatch Your Egg
-    p(ng-show='!user.items.hatchingPotions') You don't have any hatching potions yet.
-    div(ng-show='user.items.hatchingPotions')
+    p(ng-show='userHatchingPotions.length < 1') You don't have any hatching potions yet.
+    div(ng-show='userHatchingPotions')
       p Which hatching potion will you pour on your {{_hatchEgg.text}} egg?
-      form(x-bind='submit:hatchEgg')
-        select
-          option(ng-repeat='hatchingPotion in user.items.hatchingPotions track by $index') {{hatchingPotion}}
-        button(type='submit') Pour
+      form
+        select(ng-options='hatchingPotion for hatchingPotion in userHatchingPotions', ng-model="selectedPotion")
+        button(ng-click="pour()") Pour
diff --git a/views/options/pets.html b/views/options/pets.html
deleted file mode 100644
index 3581a50245..0000000000
--- a/views/options/pets.html
+++ /dev/null
@@ -1,64 +0,0 @@
-
-<pet:>
-    <td class="{#if _user.items.pets[.name]}active-pet{/}">
-        <img rel=tooltip title="{.text} - {.value} Gems" x-bind="click:selectPet" data-pet='{.name}' src='img/sprites/{.icon}'/>
-    </td>
-
-<hatchingPotion:>
-    <td class="active-hatchingPotion" x-bind="click:buyHatchingPotion" data-hatchingPotion='{.name}'>
-        <div class="Pet_HatchingPotion_{.name}"></div>
-        <p>{.text}<br/><small>{.value} Gems</small></p>
-    </td>
-
-<egg:>
-    <td class="active-egg" x-bind="click:buyEgg" data-egg='{.name}'>
-        <div rel=tooltip class="Pet_Egg_{.name}"></div>
-        <p>{.text}<br/><small>{.value} Gems</small></p>
-    </td>
-
-<stable:>
-    <!-- tables, I know - I spent a good 1h here with divs & row-fluid and can't get it working, so screw it -->
-    <table><tr>
-        <td><div class=NPC-Matt></div></td>
-        <td><div class="popover static-popover fade right in" style="max-width:550px;margin-left:10px">
-            <div class="arrow"></div>
-            <h3 class="popover-title">Matt Boch</h3>
-            <div class="popover-content">
-                <p>Welcome to the Stable! I'm <a target="_blank" href="http://www.kickstarter.com/profile/mattboch">Matt</a>, the beast master. Choose a pet here to adventure at your side - they aren't much help yet, but I forsee a time when they're able to <a href="_target" href="https://trello.com/card/mounts/50e5d3684fe3a7266b0036d6/221">grow into powerful steeds</a>! Until that day, <a target="_blank" href="https://f.cloud.github.com/assets/2374703/164631/3ed5fa6c-78cd-11e2-8743-f65ac477b55e.png">have a look-see</a> at all the pets you can collect.</p>
-                <h4>{count(_user.items.pets)} / 90 Pets Found</h4>
-            </div>
-        </div></td>
-    </tr></table>
-    <!--<menu type="list">
-        <li class="customize-menu">
-            <menu>
-            </menu>
-        </li>
-    </menu>-->
-    <table>
-        {{#each _items.pets as :pet}}
-            <tr>
-                {{#each _items.hatchingPotions as :potion}}
-                    <td>
-                        <app:pets:stable-pet tooltip="{{:potion.text}} {{:pet.text}}" pet="{{:pet.name}}-{{:potion.name}}" />
-                    </td>
-                {{/}}
-            </tr>
-        {{/}}
-    </table>
-    <h4>Rare Pets</h4>
-    <table>
-        <tr>
-            <td><app:pets:stable-pet potion='Veteran Wolf' pet="Wolf-Veteran" /></td>
-            {{#if gt(_user.backer.tier,79)}}<td><app:pets:stable-pet potion='Cerberus Pup' pet="Wolf-Cerberus" /></td>{{/}}
-        </tr>
-    </table>
-
-<stable-pet:>
-    <div rel="tooltip" title="{{@tooltip}}">
-        {#if ownsPet(@pet, _user.items.pets)}
-            <button class="pet-button Pet-{{@pet}} {#if equal(_user.items.currentPet.name, @string)}active{/if}" data-pet="{{@pet}}" x-bind="click:choosePet"></button>
-        {else}
-            <button class="pet-button pet-not-owned" data-pet="{{@pet}}"><img src="/img/PixelPaw.png"/></button>
-        {/}
-    </div>
\ No newline at end of file