diff --git a/assets/js/controls/transport.js b/assets/js/controls/transport.js
index ee25db8..8dcd534 100644
--- a/assets/js/controls/transport.js
+++ b/assets/js/controls/transport.js
@@ -2,7 +2,7 @@ var Transport = can.Control.extend({
 
   init: function(element, options) {
     this.status = options.status;
-    element.html(can.view('views/transport.ejs'));
+    element.html(can.view('views/transport.ejs', { status: this.status }));
   },
 
   updateStatus: function(status) {
@@ -23,6 +23,7 @@ var Transport = can.Control.extend({
   'button click': function(element, event) {
     var command = $(element).data('command');
     this.sendCommand(command);
+    $(element).blur();
   }
 
 });
diff --git a/public/views/transport.ejs b/public/views/transport.ejs
index 0a0b8e6..68aaaab 100644
--- a/public/views/transport.ejs
+++ b/public/views/transport.ejs
@@ -1,7 +1,10 @@
-<div id="controls">
+<nav>
   <button data-command="previous">previous</button>
-  <button data-command="play">play</button>
-  <button data-command="pause">pause</button>
+  <% if (status.attr('state') == 'play') { %>
+    <button data-command="pause">pause</button>
+  <% } else { %>
+    <button data-command="play">play</button>
+  <% } %>
   <button data-command="stop">stop</button>
   <button data-command="next">next</button>
-</div>
+</nav>