diff --git a/package.json b/package.json
index 0b9081a..07949f2 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
   "dependencies": {
     "axios": "^0.4.2",
     "lodash": "^2.4.1",
+    "parse-github-event": "^0.2.0",
     "react": "^0.12.2",
-    "timeago": "^0.2.0"
+    "timeago": "^0.2.0",
+    "twitter-text": "^1.11.0"
   },
   "devDependencies": {
     "6to5ify": "^3.1.2",
diff --git a/src/js/components/feed.jsx b/src/js/components/feed.jsx
index 3b6726b..d956319 100644
--- a/src/js/components/feed.jsx
+++ b/src/js/components/feed.jsx
@@ -1,24 +1,37 @@
 'use strict';
 
 var React = require('react');
-var faker = require('faker');
+var request = require('axios');
 var _ = require('lodash');
 
+var transformers = require('../util');
+
+function throwError(err) {
+  setTimeout(() => {
+    throw err;
+  });
+}
+
 module.exports = React.createClass({
   getInitialState() {
     return {
-      messages: _.range(10).map(() => {
-        return {
-          image: faker.image.avatar(),
-          body: faker.hacker.phrase(),
-          timestamp: faker.date.recent(),
-          type: _.sample(['twitter', 'slack', 'github']),
-          meta: `Retweeted by @${faker.internet.userName()}`
-        }
-      })
+      messages: []
     };
   },
   componentDidMount() {
+    request.get('/api/feeds').then((res) => {
+
+      var feeds = res.data;
+      var messages = [];
+      for(var type in feeds) {
+        var feedMessages = feeds[type].map(transformers[type]);
+        messages = messages.concat(feedMessages);
+      }
+
+      this.setState({
+        messages: messages
+      });
+    }).catch(throwError);
   },
   render() {
     var messages = this.state.messages.map((message) => {
@@ -26,7 +39,7 @@ module.exports = React.createClass({
         <div className="message">
           <img className="message__image" src={message.image} />
           <div className="message__content">
-            <div className="message__body">{message.body}</div>
+            <div className="message__body" dangerouslySetInnerHTML={{__html:message.body}}></div>
             <div className="message__icon">
               <i className={`fa fa-${message.type}`}></i>
             </div>
@@ -46,3 +59,18 @@ module.exports = React.createClass({
     )
   }
 });
+        // <div className="message">
+        //   <img className="message__image" src={message.image} />
+        //   <div className="message__content">
+        //     <div className="message__body">{message.body}</div>
+        //     <div className="message__icon">
+        //       <i className={`fa fa-${message.type}`}></i>
+        //     </div>
+        //     <div className="message__details">
+        //       <span className="message__timestamp">
+        //         {require('timeago')(message.timestamp)}
+        //       </span>
+        //       <span className="message__meta">{message.meta}</span>
+        //     </div>
+        //   </div>
+        // </div>
diff --git a/src/js/util.js b/src/js/util.js
new file mode 100644
index 0000000..db16e63
--- /dev/null
+++ b/src/js/util.js
@@ -0,0 +1,28 @@
+'use strict';
+
+var githubEvent = require('parse-github-event');
+var twitterText = require('twitter-text');
+
+module.exports = {
+  github(item) {
+    var message = githubEvent.parse(item);
+    console.log(item);
+    console.log(message.data);
+    return {
+      image: item.actor.avatar_url,
+      body: `${item.actor.login} ${message.text}`,
+      timestamp: item.created_at,
+      url: message.url,
+      highlights: message.data,
+      type: 'github'
+    };
+  },
+  twitter(item) {
+    return {
+      image: item.user.profile_image_url,
+      body: twitterText.autoLink(item.text),
+      timestamp: item.created_at,
+      type: 'twitter'
+    };
+  }
+};