diff --git a/static/js/app.js b/static/js/app.js
index 9327ad7..65df699 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -11,7 +11,7 @@ var App = React.createClass({
   },
 
   componentWillMount: function() {
-      $.get(this.state.source, function(result) {
+      $.getJSON(this.state.source, function(result) {
           this.setState({folderContent: result});
           this.setMessage(result[0]);
       }.bind(this));
diff --git a/static/js/main.js b/static/js/main.js
index a625429..aa3c1a7 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,30 +1,59 @@
 /** @jsx React.DOM */
 
+var Addresses = React.createClass({
+    render: function() {
+        var addrs = this.props.values || null;
+        var value;
+        if (addrs == null) {
+            return (<span></span>);
+        } else if (Array.isArray(addrs)) {
+            value = addrs.map(function(t) { return t.Address; }).join(", ");
+        } else {
+            value = addrs.Address;
+        }
+        return (<p className="email-content-subtitle">{this.props.headerName}: <a>{value}</a></p>)
+    }
+});
+
 var MainView = React.createClass({
-  getInitialState: function() {
-    return {
-        body: ""
-    };
-  },
+    getInitialState: function() {
+        return {
+            body: ""
+        };
+    },
 
-  render: function() {
-      $.get("/raw/" + this.props.message.Hash, function(data) {
-          var body = data.substring(data.indexOf('\n\n')+2);
-          this.setState({body: body});
-      }.bind(this));
+    componentWillReceiveProps: function(nextProps) {
+        this.setMessageHash(nextProps.message.Hash);
+    },
 
-      // TODO:
-      // - trim 'Re:' from messages and group/thread them.
-      var m = this.props.message;
-      return (
+    componentDidMount: function() {
+        this.setMessageHash(this.props.message.Hash);
+    },
+
+    setMessageHash: function(hash) {
+        $.get("/raw/" + hash , function(data) {
+            var body = data.substring(data.indexOf('\n\n')+2);
+            this.setState({body: body});
+        }.bind(this));
+    },
+
+    render: function() {
+        // TODO:
+        // - trim 'Re:' from messages and group/thread them.
+        var m = this.props.message;
+        var tos = (m.To||[]).map(function(t) { return t.Address; }).join(', ');
+        var ccs = (m.Cc||[]).map(function(t) { return t.Address; }).join(', ');
+        return (
 <div id="main" className="pure-u-1">
     <div className="email-content">
         <div className="email-content-header pure-g">
             <div className="pure-u-1">
                 <h1 className="email-content-title">{m.Subject}</h1>
-                <p className="email-content-subtitle">
-                    From <a>{m.From}</a> at <span className="date">{m.Date.toLocaleString()}</span>
-                </p>
+                <Addresses headerName="From" values={m.From}/>
+                <Addresses headerName="To" values={m.To}/>
+                <Addresses headerName="Cc" values={m.Cc}/>
+                <p className="email-content-subtitle">Date: {m.Date.toLocaleString()}</p>
+                <p className="email-content-subtitle">X-Xinu-Hash: {m.Hash}</p>
             </div>
 
             <div className="email-content-controls pure-u-1">