diff --git a/assets/js/application.js b/assets/js/application.js
index 6ec5b3b..7352eb4 100644
--- a/assets/js/application.js
+++ b/assets/js/application.js
@@ -2,11 +2,27 @@
 $(document).ready(function() {
 
   $.when(QueueSong.findAll(), Status.findOne()).then(function(queueSongs, status) {
-    new Transport('#transport');
-    new Queue('#queue', {
+
+    window.mpdClient = {
+      status: status,
       queueSongs: queueSongs,
-      status: status
+
+      transport: new Transport('#transport', {
+        status: status
+      }),
+
+      queue: new Queue('#queue', {
+        queueSongs: queueSongs,
+        status: status
+      })
+    };
+
+    status.bind('change', function(event, attr, how, newVal, oldVal) {
+      if (attr == 'songid') {
+        mpdClient.queueSongs.updatePlaying(oldVal, newVal);
+      }
     });
+
   });
 
 });
diff --git a/assets/js/controls/transport.js b/assets/js/controls/transport.js
index 8f16adf..198971c 100644
--- a/assets/js/controls/transport.js
+++ b/assets/js/controls/transport.js
@@ -1,11 +1,19 @@
 var Transport = can.Control.extend({
 
-  init: function(element) {
+  init: function(element, options) {
+    this.status = options.status;
     element.html(can.view('views/transport.ejs'));
   },
 
   sendCommand: function(command) {
-    can.ajax({ url: '/api/control/'+command, type: 'PUT' });
+    var self = this;
+    can.ajax({
+      url: '/api/control/' + command,
+      type: 'PUT',
+      success: function(status) {
+        self.status.attr(status);
+      }
+    });
   },
 
   'button click': function(element, event) {
diff --git a/assets/js/models/queueSong.js b/assets/js/models/queueSong.js
new file mode 100644
index 0000000..2e662d9
--- /dev/null
+++ b/assets/js/models/queueSong.js
@@ -0,0 +1,14 @@
+var QueueSong = can.Model.extend({
+
+  findAll: 'GET /api/queue'
+
+}, {});
+
+QueueSong.List = can.List.extend({
+
+  updatePlaying: function(oldVal, newVal) {
+    this.attr(oldVal).attr('playing', false);
+    this.attr(newVal).attr('playing', true);
+  }
+
+});
diff --git a/assets/js/models/queueSongs.js b/assets/js/models/queueSongs.js
deleted file mode 100644
index f0ab7b2..0000000
--- a/assets/js/models/queueSongs.js
+++ /dev/null
@@ -1,5 +0,0 @@
-var QueueSong = can.Model.extend({
-
-  findAll: 'GET /api/queue'
-
-}, {});
diff --git a/mpd_client.rb b/mpd_client.rb
index fcf8b0f..565c7dd 100644
--- a/mpd_client.rb
+++ b/mpd_client.rb
@@ -27,6 +27,10 @@ class MPDClient < Sinatra::Base
 
   namespace '/api' do
 
+    before do
+      content_type 'application/json'
+    end
+
     get '/status' do
       JSON MPDConnection.status
     end
diff --git a/public/views/queue.ejs b/public/views/queue.ejs
index 89fb89b..af6d8d3 100644
--- a/public/views/queue.ejs
+++ b/public/views/queue.ejs
@@ -1,7 +1,7 @@
 <h2>Queue</h2>
 <ul id="queue">
   <% list(queueSongs, function(song) { %>
-    <li id="<%= song.attr('id') %>"<%= song.attr('id') == status.songid ? ' class="playing"' : '' %>>
+    <li id="<%= song.attr('id') %>" <%= song.attr('playing') ? 'class="playing"' : '' %>>
       <%= song.attr('artist') %> - <%= song.attr('title') %>
     </li>
   <% }) %>