diff --git a/assets/css/npcs.styl b/assets/css/npcs.styl
index ea5782abcf..74f08efc8a 100644
--- a/assets/css/npcs.styl
+++ b/assets/css/npcs.styl
@@ -4,7 +4,7 @@
 .NPC-Daniel {background-position: -222px 0; width: 135px; height: 123px}
 .NPC-Justin {background-position: -357px 0; width: 84px; height: 119px}
 .NPC-Justin-Head {background-position: -396px 0; width: 36px; height: 96px}
-.NPC-Matt {background-position: -441px 0; width: 198px; height: 144px}
+.NPC-Matt {background-position: -441px 0; width: 100%; padding-left: 208px; padding-bottom: 20px;}
 
 // Bailey
 .NPC-Bailey
diff --git a/assets/js/controllers/petsCtrl.js b/assets/js/controllers/petsCtrl.js
new file mode 100644
index 0000000000..1643d52d51
--- /dev/null
+++ b/assets/js/controllers/petsCtrl.js
@@ -0,0 +1,31 @@
+habitrpg.controller("PetsCtrl", ['$scope', 'User',
+  function($scope, User) {
+
+    $scope.userPets = User.user.items.pets;
+    $scope.userCurrentPet = User.user.items.currentPet;
+    $scope.pets = window.habitrpgShared.items.items.pets;
+    $scope.hatchingPotions = window.habitrpgShared.items.items.hatchingPotions;
+
+    $scope.hasPet = function(name, potion){
+      if (!$scope.userPets) return false;
+      return _.contains($scope.userPets, name + '-' + potion) ? true : false;
+    }
+
+    $scope.isCurrentPet = function(name, potion){
+      if (!$scope.userCurrentPet || !$scope.userPets) return false;
+      return $scope.userCurrentPet.str === (name + '-' + potion);
+    }
+
+    $scope.choosePet = function(name, potion){
+      if($scope.userCurrentPet && $scope.userCurrentPet.str === (name + '-' + potion)){
+        $scope.userCurrentPet = null;
+      }else{
+        var pet = _.find($scope.pets, {name: name});
+        pet.modifier = potion;
+        pet.str = name + '-' + potion;
+        $scope.userCurrentPet = pet;
+      }
+      User.set('items.currentPet', $scope.userCurrentPet);
+    }
+
+  }]);
\ No newline at end of file
diff --git a/views/index.jade b/views/index.jade
index bb5ad25307..e2f3d3d3f3 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -68,6 +68,7 @@ html
     != js('controllers/filtersCtrl')
     != js('controllers/userAvatarCtrl')
     != js('controllers/groupsCtrl')
+    != js('controllers/petsCtrl')
     != js('controllers/footerCtrl')
 
     //webfonts
diff --git a/views/options/index.jade b/views/options/index.jade
index fbe32e9cc4..eff9d15bf3 100644
--- a/views/options/index.jade
+++ b/views/options/index.jade
@@ -54,10 +54,7 @@
             //app:game-pane:market
 
       .tab-pane#stable-tab
-        h4.well
-          | Coming soon.
-          a(href='https://github.com/lefnire/habitrpg/wiki/Contributing#website', target='blank')  Help us port this feature!
-        //app:pets:stable
+        include ./pets
 
       .tab-pane#tavern-tab
         include ./groups/tavern
diff --git a/views/options/pets.jade b/views/options/pets.jade
new file mode 100644
index 0000000000..ab4b4bf1aa
--- /dev/null
+++ b/views/options/pets.jade
@@ -0,0 +1,31 @@
+.stable(ng-controller='PetsCtrl')
+  .NPC-Matt
+    .popover.static-popover.fade.right.in(style='max-width: 550px; margin-left: 10px;')
+      .arrow
+      h3.popover-title Matt Boch
+      .popover-content
+        p
+          | Welcome to the Stable! I'm
+          a(target='_blank', href='http://www.kickstarter.com/profile/mattboch')  Matt
+          | , 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='https://trello.com/card/mounts/50e5d3684fe3a7266b0036d6/221')  grow into powerful steeds
+          | ! 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
+          |  at all the pets you can collect.
+        h4 {{userPets.length}} / 90 Pets Found
+
+  table.pets(ng-repeat='pet in pets')
+    tbody
+      tr
+        td(ng-repeat='potion in hatchingPotions')
+          button(class="pet-button Pet-{{pet.name}}-{{potion.name}}", ng-show='hasPet(pet.name, potion.name)', ng-class="{active: isCurrentPet(pet.name, potion.name)}", ng-click='choosePet(pet.name, potion.name)', tooltip='{{potion.name}} {{pet.name}}')
+          button(class="pet-button pet-not-owned", ng-hide='hasPet(pet.name, potion.name)')
+            img(src='/bower_components/habitrpg-shared/img/PixelPaw.png', tooltip='{{potion.name}} {{pet.name}}')
+
+  h4 Rare Pets
+  table
+    tr
+      td
+        button(class="pet-button Pet-Wolf-Veteran", ng-show='hasPet("Wolf", "Veteran")', ng-class='{active: isCurrentPet("Wolf", "Veteran")}', ng-click='choosePet("Wolf", "Veteran")', tooltip='Veteran Wolf')
+        button(class="pet-button pet-not-owned", ng-hide='hasPet("Wolf", "Veteran")')
+          img(src='/bower_components/habitrpg-shared/img/PixelPaw.png')
\ No newline at end of file