diff --git a/GuardfileServer b/GuardfileServer
index 021fc0c5..23d960ea 100644
--- a/GuardfileServer
+++ b/GuardfileServer
@@ -35,7 +35,7 @@ guard :bundler do
   files.each { |file| watch(helper.real_path(file)) }
 end
 
-guard 'rails', host: '127.0.0.1' do
+guard 'rails', host: '0.0.0.0' do
   watch('Gemfile.lock')
   watch(%r{^(config|lib)/.*})
 end
diff --git a/app/assets/images/cards/png/back-blue.png b/app/assets/images/cards/png/back-blue.png
new file mode 100644
index 00000000..f853152f
Binary files /dev/null and b/app/assets/images/cards/png/back-blue.png differ
diff --git a/app/assets/images/cards/png/back-pink.png b/app/assets/images/cards/png/back-pink.png
new file mode 100644
index 00000000..ec6e6672
Binary files /dev/null and b/app/assets/images/cards/png/back-pink.png differ
diff --git a/app/assets/images/cards/png/back-red.png b/app/assets/images/cards/png/back-red.png
new file mode 100644
index 00000000..02044ef0
Binary files /dev/null and b/app/assets/images/cards/png/back-red.png differ
diff --git a/app/assets/javascripts/components/inventory.js.jsx b/app/assets/javascripts/components/inventory.js.jsx
index 56070a33..292a56cb 100644
--- a/app/assets/javascripts/components/inventory.js.jsx
+++ b/app/assets/javascripts/components/inventory.js.jsx
@@ -20,6 +20,7 @@ var Inventory = React.createClass({
                   form={"player_controls_" + card.player_id}
                   type="checkbox"
                   name="player_card_ids[]"
+                  data-card-name={card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2') + ' ' + card.suit}
                   value={card.id} />
                 {/* TODO: Don't hard code face cards here */}
                 {/* <span>{card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}</span> */}
diff --git a/app/assets/javascripts/components/player.js.jsx b/app/assets/javascripts/components/player.js.jsx
index 89b05d39..06f314d6 100644
--- a/app/assets/javascripts/components/player.js.jsx
+++ b/app/assets/javascripts/components/player.js.jsx
@@ -22,7 +22,11 @@ var Player = React.createClass({
             player_id={this.props.id}
             inventory={this.props.inventory}
             controlling_player_id={this.props.game.controlling_player_id} /> )
-          : null }
+          :
+            <div className='inventory'>
+              {[...Array(this.props.inventory_count)].map((card, index) => <img key={index} src='/assets/cards/png/back-pink.png' />)}
+            </div>
+        }
       </div>
     );
   }
diff --git a/app/assets/javascripts/header-scroll.js b/app/assets/javascripts/header-scroll.js
deleted file mode 100644
index 640dbe6d..00000000
--- a/app/assets/javascripts/header-scroll.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// Hide Header on on scroll down
-var didScroll;
-var lastScrollTop = 0;
-var delta = 5;
-var navbarHeight = $('header > nav').outerHeight();
-
-$(window).scroll(function(event){
-    didScroll = true;
-});
-
-setInterval(function() {
-    if (didScroll) {
-        hasScrolled();
-        didScroll = false;
-    }
-}, 250);
-
-function hasScrolled() {
-    var st = $(this).scrollTop();
-    
-    // Make sure they scroll more than delta
-    if(Math.abs(lastScrollTop - st) <= delta)
-        return;
-    
-    // If they scrolled down and are past the navbar, add class .nav-up.
-    // This is necessary so you never see what is "behind" the navbar.
-    if (st > lastScrollTop && st > navbarHeight){
-        // Scroll Down
-        $('header > nav').removeClass('nav-down').addClass('nav-up');
-    } else {
-        // Scroll Up
-        if(st + $(window).height() < $(document).height()) {
-            $('header > nav').removeClass('nav-up').addClass('nav-down');
-        }
-    }
-    
-    lastScrollTop = st;
-}
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 08623ba9..c2da3565 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -27,7 +27,7 @@ body
   min-height: 100vh
   margin: 0
   background: image-url('backgrounds/felt-green.png')
-  font-size: 4vmin
+  font-size: 2vmin
 
 a
   text-decoration: none
@@ -40,11 +40,10 @@ h1
 
 header
   font-size: 3vmin
-  margin-bottom: 10vmin
   nav
     padding: 1vmin
     background: #222
-    position: fixed
+    //position: fixed
     top: 0
     transition: top 0.2s ease-in-out
     width: 100%
diff --git a/app/assets/stylesheets/game.css.sass b/app/assets/stylesheets/game.css.sass
index a26f4289..019903ad 100644
--- a/app/assets/stylesheets/game.css.sass
+++ b/app/assets/stylesheets/game.css.sass
@@ -118,4 +118,11 @@ button
     &:checked ~ img
       box-shadow: 0px 0px 2px 6px cadetblue
   img
-    width: 6vw
+    width: 6vmin
+    border: 1px solid black
+    border-radius: .3vmin
+.inventory
+  img
+    width: 6vmin
+    border: 1px solid black
+    border-radius: .3vmin
diff --git a/config/deploy.rb b/config/deploy.rb
index 35e19f54..2a295380 100644
--- a/config/deploy.rb
+++ b/config/deploy.rb
@@ -6,7 +6,8 @@ set :repo_url, 'git@bitbucket.org:jessecfisher/thirteen-tien-len.git'
 set :assets_dir, %w(public/assets public/system)
 #set :local_assets_dir, %w(public/assets public/att)
 
-# ask :branch, proc { `git rev-parse --abbrev-ref HEAD`.chomp }
+set :branch, proc { `git rev-parse --abbrev-ref stash`.chomp }
+ #ask :branch, proc { `git rev-parse --abbrev-ref HEAD`.chomp }
 
 set :deploy_to, '/home/jesse/web/thirteen-tien-len'
 # set :scm, :git
diff --git a/spec/features/plays_spec.rb b/spec/features/plays_spec.rb
index 958389be..4b5d7558 100644
--- a/spec/features/plays_spec.rb
+++ b/spec/features/plays_spec.rb
@@ -21,7 +21,7 @@ feature 'Play a hand', type: :feature, js: true do
 
     # Play the highest card
     @card_to_play = @player.inventory.last
-    check @card_to_play.to_s
+    find("[data-card-name='#{@card_to_play.to_s}'] ~ img").click
     #click_button 'Play Hand'
     click_button "play_hand_button_#{@player.id}"
 
@@ -39,7 +39,7 @@ feature 'Play a hand', type: :feature, js: true do
   #   Then I see the hand to beat is this play
   scenario 'first play contains lowest card' do
     @card_to_play = @game.lowest_card
-    check @card_to_play.to_s
+    find("[data-card-name='#{@card_to_play.to_s}'] ~ img").click
     #click_button 'Play Hand'
     click_button "play_hand_button_#{@player.id}"
     #expect(page).to have_content(/Hand to beat.*#{@game.lowest_card.to_s}/)
@@ -54,7 +54,7 @@ feature 'Play a hand', type: :feature, js: true do
     # Store initial state of players inventory
     @player_inventory = @player.inventory.join(' ')
     @card_to_play = @player.inventory.first
-    check @card_to_play.to_s
+    find("[data-card-name='#{@card_to_play.to_s}'] ~ img").click
     #click_button 'Play Hand'
     click_button "play_hand_button_#{@player.id}"
     #wait_for_ajax
@@ -71,7 +71,7 @@ feature 'Play a hand', type: :feature, js: true do
   scenario 'invalid hand played cards are not removed from the players inventory' do
     #@game.reload
     # Store initial state of players inventory
-    @player_inventory = @player.inventory.join(' ')
+    @initial_player_inventory = @player.inventory
 
     # Create invalid hand
     @cards_to_play  = []
@@ -79,7 +79,7 @@ feature 'Play a hand', type: :feature, js: true do
     @cards_to_play << @player.inventory.first
 
     # Select each card to play
-    @cards_to_play.map {|card| check card.to_s }
+    @cards_to_play.map {|card| find("[data-card-name='#{card.to_s}'] ~ img").click }
     #click_button 'Play Hand'
     click_button "play_hand_button_#{@player.id}"
 
@@ -87,7 +87,9 @@ feature 'Play a hand', type: :feature, js: true do
     # TODO: Flash messages
     #expect(page).to have_content("Invalid pair")
     # Player inventory is rendered with played cards
-    expect(page).to have_content(@player_inventory)
+    @initial_player_inventory.each do |card|
+      expect(page).to have_selector("[data-card-name='#{card.to_s}'] ~ img")
+    end
     # TODO: This scenario is causing other scenarios to fail unless we slow down here
     sleep 1
     # Player inventory method still returns played cards because the play was invalid
@@ -106,7 +108,7 @@ feature 'Play a hand', type: :feature, js: true do
     @controlling_player_index = @game.player_ids.index(@game.controlling_player_id)
 
     @card_to_play = @player.inventory.first
-    check @card_to_play.to_s
+    find("[data-card-name='#{@card_to_play.to_s}'] ~ img").click
     #click_button 'Play Hand'
     click_button "play_hand_button_#{@player.id}"
 
@@ -131,7 +133,7 @@ feature 'Play a hand', type: :feature, js: true do
     #@game.reload
     @cards_to_play = [@game.controlling_player.player_cards.order(:value).first.to_s, @game.controlling_player.player_cards.order(:value).last.to_s]
     @cards_to_play.each do |card|
-      check card
+      find("[data-card-name='#{card.to_s}'] ~ img").click
     end
     #click_button 'Play Hand'
     click_button "play_hand_button_#{@player.id}"
@@ -140,7 +142,9 @@ feature 'Play a hand', type: :feature, js: true do
     #:TODO: Flash messages
     #expect(page).to have_content("Invalid pair.")
     # expect inventory to remain unchanged
-    expect(page).to have_content("#{@game.controlling_player.inventory.map {|c| c.to_s}.join ' '}")
+    @game.controlling_player.inventory.each do |card|
+      expect(page).to have_selector("[data-card-name='#{card.to_s}'] ~ img")
+    end
     # TODO: This scenario is causing other scenarios to fail unless we slow down here
     sleep 1
   end
@@ -192,7 +196,7 @@ feature 'Play a hand', type: :feature, js: true do
     @game.reload
     @player = @game.controlling_player
     @card_to_play = @player.inventory.first
-    check @card_to_play.to_s
+    find("[data-card-name='#{@card_to_play.to_s}'] ~ img").click
     #click_button 'Play Hand'
     click_button "play_hand_button_#{@player.id}"