diff --git a/public/javascripts/application.coffee b/public/javascripts/application.coffee
index f2188f9..c596802 100644
--- a/public/javascripts/application.coffee
+++ b/public/javascripts/application.coffee
@@ -1,10 +1,12 @@
 class MailCatcher
   constructor: ->
     $('#messages tr').live 'click', (e) =>
+      e.preventDefault()
       @loadMessage $(e.currentTarget).attr 'data-message-id'
 
-    $('#message .views .tab').live 'click', (e) =>
-      @loadMessageBody $('#messages tr.selected').attr('data-message-id'), $(e.currentTarget).attr 'data-message-format'
+    $('#message .views .format.tab a').live 'click', (e) =>
+      e.preventDefault()
+      @loadMessageBody @selectedMessage(), $($(e.currentTarget).parent('li')).data 'message-format'
 
     $('#resizer').live
       mousedown: (e) ->
@@ -57,6 +59,9 @@ class MailCatcher
     message = message.id if message.id?
     $("#messages tbody tr[data-message-id=\"#{message}\"]").length > 0
 
+  selectedMessage: ->
+    $('#messages tr.selected').data 'message-id'
+
   addMessage: (message) ->
     $('#messages tbody').append \
       $('<tr />').attr('data-message-id', message.id.toString())
@@ -104,7 +109,7 @@ class MailCatcher
         @loadMessageBody()
 
   loadMessageBody: (id, format) ->
-    id ||= $('#messages tr.selected').attr 'data-message-id'
+    id ||= @selectedMessage()
     format ||= $('#message .views .tab.format.selected').attr 'data-message-format'
     format ||= 'html'
 
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 9448bbc..4c29841 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -4,10 +4,12 @@
   MailCatcher = (function() {
     function MailCatcher() {
       $('#messages tr').live('click', __bind(function(e) {
+        e.preventDefault();
         return this.loadMessage($(e.currentTarget).attr('data-message-id'));
       }, this));
-      $('#message .views .tab').live('click', __bind(function(e) {
-        return this.loadMessageBody($('#messages tr.selected').attr('data-message-id'), $(e.currentTarget).attr('data-message-format'));
+      $('#message .views .format.tab a').live('click', __bind(function(e) {
+        e.preventDefault();
+        return this.loadMessageBody(this.selectedMessage(), $($(e.currentTarget).parent('li')).data('message-format'));
       }, this));
       $('#resizer').live({
         mousedown: function(e) {
@@ -78,6 +80,9 @@
       }
       return $("#messages tbody tr[data-message-id=\"" + message + "\"]").length > 0;
     };
+    MailCatcher.prototype.selectedMessage = function() {
+      return $('#messages tr.selected').data('message-id');
+    };
     MailCatcher.prototype.addMessage = function(message) {
       return $('#messages tbody').append($('<tr />').attr('data-message-id', message.id.toString()).append($('<td/>').text(message.sender || "No sender").toggleClass("blank", !message.sender)).append($('<td/>').text((message.recipients || []).join(', ') || "No receipients").toggleClass("blank", !message.recipients.length)).append($('<td/>').text(message.subject || "No subject").toggleClass("blank", !message.subject)).append($('<td/>').text(this.formatDate(message.created_at))));
     };
@@ -124,7 +129,7 @@
       }
     };
     MailCatcher.prototype.loadMessageBody = function(id, format) {
-      id || (id = $('#messages tr.selected').attr('data-message-id'));
+      id || (id = this.selectedMessage());
       format || (format = $('#message .views .tab.format.selected').attr('data-message-format'));
       format || (format = 'html');
       $("#message .views .tab[data-message-format=\"" + format + "\"]:not(.selected)").addClass('selected');