diff --git a/extensions/amavis_quarantine/sql_listing.py b/extensions/amavis_quarantine/sql_listing.py
index b13ceb6fe..9e48f6a97 100644
--- a/extensions/amavis_quarantine/sql_listing.py
+++ b/extensions/amavis_quarantine/sql_listing.py
@@ -99,7 +99,7 @@ class SQLlisting(EmailListing):
 class SQLemail(Email):
     def __init__(self, msg, *args, **kwargs):
         super(SQLemail, self).__init__(msg, *args, **kwargs)
-        fields = ["Subject", "From", "To", "Cc", "Date"]
+        fields = ["From", "To", "Cc", "Date", "Subject"]
         for f in fields:
             label = f
             self.headers += [{"name" : label, "value" : self.get_header(msg, f)}]
diff --git a/extensions/webmail/lib.py b/extensions/webmail/lib.py
index 01cfb844a..b4abfa30a 100644
--- a/extensions/webmail/lib.py
+++ b/extensions/webmail/lib.py
@@ -153,10 +153,10 @@ class ImapListing(EmailListing):
 
 class ImapEmail(Email):
     headernames = [
-        ('Date', True),
         ('From', True),
         ('To', True),
         ('Cc', True),
+        ('Date', True),
         ('Subject', True),
         ]
 
diff --git a/static/css/viewmail.css b/static/css/viewmail.css
index 447cf97e3..778e8dd77 100644
--- a/static/css/viewmail.css
+++ b/static/css/viewmail.css
@@ -4,21 +4,6 @@
  * any other way to do that.
  */
 body{margin:5px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#333333;background-color:#ffffff;}
-table{max-width:100%;border-collapse:collapse;border-spacing:0;background-color:transparent;}
-.table{width:100%;margin-bottom:18px;}.table th,.table td{padding:8px;line-height:18px;text-align:left;vertical-align:top;border-top:1px solid #dddddd;}
-.table th{font-weight:bold;}
-.table thead th{vertical-align:bottom;}
-.table colgroup+thead tr:first-child th,.table colgroup+thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td{border-top:0;}
-.table tbody+tbody{border-top:2px solid #dddddd;}
-.table-condensed th,.table-condensed td{padding:4px 5px;}
-.table-bordered{border:1px solid #dddddd;border-left:0;border-collapse:separate;*border-collapse:collapsed;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.table-bordered th,.table-bordered td{border-left:1px solid #dddddd;}
-.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0;}
-.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
-.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
-.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
-.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
-.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
-.table tbody tr:hover td,.table tbody tr:hover th{background-color:#f5f5f5;}
 .alert{padding:8px 35px 8px 14px;margin-bottom:18px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#fcf8e3;border:1px solid #fbeed5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#c09853;}
 .alert-heading{color:inherit;}
 .alert .close{position:relative;top:-2px;right:-21px;line-height:18px;}
@@ -28,28 +13,42 @@ table{max-width:100%;border-collapse:collapse;border-spacing:0;background-color:
 .alert-block{padding-top:14px;padding-bottom:14px;}
 .alert-block>p,.alert-block>ul{margin-bottom:0;}
 .alert-block p+p{margin-top:5px;}
+.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
+.well-large{padding:24px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
+.well-small{padding:9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+.row{margin-left:-20px;*zoom:1;}.row:before,.row:after{display:table;content:"";}
+.row:after{clear:both;}
 
- pre {
-     white-space: pre-wrap; /* css-3 */
-     white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
-     white-space: -pre-wrap; /* Opera 4-6 */
-     white-space: -o-pre-wrap; /* Opera 7 */
-     word-wrap: break-word; /* Internet Explorer 5.5+ */
-     font-size: medium;
-     border: 0;
+pre {
+    white-space: pre-wrap; /* css-3 */
+    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    word-wrap: break-word; /* Internet Explorer 5.5+ */
+    font-size: medium;
+    border: 0;
 }
 #mailcontent {
-     width: 100%;
-     border: 0px transparent none;
-     margin: 0;
+    width: 100%;
+    border: 0px transparent none;
+    margin: 0;
 }
 
 #emailheaders a, #emailheaders a:visited {
-     color: blue;
-     text-decoration: none;
+    color: blue;
+    text-decoration: none;
 }
 #emailheaders a:hover {
-     text-decoration: underline;
+    text-decoration: underline;
 }
 
-.hidden { display: none; }
\ No newline at end of file
+.hidden { display: none; }
+.header, .value { font-size: 14px; }
+.header {
+    float: left;
+    margin-left: 10px;
+    margin-right: 20px;
+    font-weight: bold;
+    width: 6.38%;
+    padding: 2px 0;
+}
\ No newline at end of file
diff --git a/templates/common/mailheaders.html b/templates/common/mailheaders.html
index 560651699..f54bd96ab 100644
--- a/templates/common/mailheaders.html
+++ b/templates/common/mailheaders.html
@@ -1,9 +1,9 @@
 {% load i18n %}
 {% block emailheaders %}
-<table id="emailheaders" class="table table-striped table-bordered table-condensed">
-  {% for hdr in headers %}
-  <tr><th width="130px">{% trans hdr.name %}</th><td>{{ hdr.value }}</td></tr>
-  {% endfor %}
+<div class="well">
+  {% for hdr in headers %}<div class="row">
+    <div class="header">{{ hdr.name }}</div><div class="value">{{ hdr.value }}</div>
+  </div>{% endfor %}
   {% block extraheaders %}{% endblock %}
-</table>
+</div>
 {% endblock %}