diff --git a/app/actions/TwitterSentimentsActions.js b/app/actions/TwitterSentimentsActions.js
index 367f90d..9c17432 100644
--- a/app/actions/TwitterSentimentsActions.js
+++ b/app/actions/TwitterSentimentsActions.js
@@ -1,13 +1,12 @@
 var AppDispatcher = require('../dispatcher/AppDispatcher');
 var Constants = require('../constants/Constants');
-var Api = require('../network/Api');
+var Api = require('../network/SentimentsApi');
 
 var TwitterSentimentsActions = {
 
     loadTopSentiments: function(count) {
         Api
-            .get('d4/sentiment/top')
-            .query({number: count})
+            .get('d4/sentiment/top',{number: count})
             .then(function (sentiments) {
                 AppDispatcher.handleServerAction({
                     actionType: Constants.RECEIVE_TWITTER_TOP_SENTIMENTS,
@@ -17,8 +16,7 @@ var TwitterSentimentsActions = {
     },
     loadFlopSentiments: function(count) {
         Api
-            .get('d4/sentiment/worst')
-            .query({number: count})
+            .get('d4/sentiment/worst',{number: count})
             .then(function (sentiments) {
                 AppDispatcher.handleServerAction({
                     actionType: Constants.RECEIVE_TWITTER_FLOP_SENTIMENTS,
@@ -28,10 +26,11 @@ var TwitterSentimentsActions = {
     },
     loadControversialSentiments: function(count,startDate,endDate) {
         Api
-            .get('d5/sentiment/controversial')
-            .query({number: count})
-            .query({startDate: startDate})
-            .query({endDate: endDate})
+            .get('d5/sentiment/controversial',{
+              number: count,
+              startDate: startDate,
+              endDate: endDate
+            })
             .then(function (sentiments) {
                 AppDispatcher.handleServerAction({
                     actionType: Constants.RECEIVE_TWITTER_CONTROVERSIAL_SENTIMENTS,
@@ -41,8 +40,7 @@ var TwitterSentimentsActions = {
     },
     loadMostDiscussedSentiments: function(count) {
         Api
-            .get('d4/sentiment/discussed')
-            .query({number: count})
+            .get('d4/sentiment/discussed', {number: count})
             .then(function (sentiments) {
                 AppDispatcher.handleServerAction({
                     actionType: Constants.RECEIVE_TWITTER_TALKED_ABOUT_SENTIMENTS,
@@ -52,8 +50,7 @@ var TwitterSentimentsActions = {
     },
     loadCharacterSentiment: function(characterId) {
         Api
-            .get('d4/character')
-            .query({id: characterId})
+            .get('d4/character', {id: characterId})
             .then(function (sentiments) {
                 AppDispatcher.handleServerAction({
                     actionType: Constants.RECEIVE_TWITTER_CHARACTER_SENTIMENT,
diff --git a/app/components/public/Ranking/Ranking.jsx b/app/components/public/Ranking/Ranking.jsx
index 124d0ef..15405d0 100644
--- a/app/components/public/Ranking/Ranking.jsx
+++ b/app/components/public/Ranking/Ranking.jsx
@@ -6,6 +6,7 @@ import {Grid, Row, Col} from 'react-bootstrap';
 
 import "./Ranking.css";
 import SentimentStore from '../../../stores/TwitterSentimentsStore';
+import SentimentsActions from '../../../actions/TwitterSentimentsActions';
 
 export default class Ranking extends Component {
     getHardcodedPlodTop5() {
@@ -36,13 +37,38 @@ export default class Ranking extends Component {
         ];
     }
 
-    render() {
+    constructor(props) {
+        super(props);
         this.state = {
+            twitterTopSentiments: [],
+            twitterFlopSentiments: [],
+            twitterTopControversial: []
+        };
+        this._onChange = this._onChange.bind(this);
+    }
+
+    componentWillMount (){
+        SentimentStore.addChangeListener(this._onChange);
+    }
+
+    componentWillUnmount(){
+        SentimentStore.removeChangeListener(this._onChange);
+    }
+
+
+    componentDidMount() {
+        SentimentsActions.loadTopSentiments(5);
+        SentimentsActions.loadFlopSentiments(5);
+    }
+
+    _onChange() {
+        this.setState({
             twitterTopSentiments: SentimentStore.getTopSentiments(),
             twitterFlopSentiments: SentimentStore.getFlopSentiments()
-            //twitterTopControversial: SentimentStore.getTopControversialSentiments()
-        };
+        });
+    }
 
+    render() {
         return (
             <div>
                 <Grid className="ranking">
@@ -51,22 +77,32 @@ export default class Ranking extends Component {
                             <div className="ranking-field">
                                 <h2 className="text-center ranking-title">Twitter top 5 loved</h2>
                                 <ul>
-                                {
-                                    this.state.twitterTopSentiments.map((char) => {
-                                        return <li>{char}</li>;
-                                    })
-                                }
+                                    {
+                                        this.state.twitterTopSentiments.map((char) => {
+                                            return <li>
+                                                <h4><Link to={'/characters/' + char.name}>
+                                                    {char.name}
+                                                </Link></h4>
+                                            </li>;
+                                        })
+                                    }
                                 </ul>
                             </div>
                         </Col>
                         <Col xs={12} sm={6}>
                             <div className="ranking-field">
-                            <h2 className="text-center ranking-title">Twitter top 5 hated</h2>
-                            {
-                                this.state.twitterFlopSentiments.map((char) => {
-                                    return <div>{char}</div>;
-                                })
-                            }
+                                <h2 className="text-center ranking-title">Twitter top 5 hated</h2>
+                                <ul>
+                                    {
+                                        this.state.twitterFlopSentiments.map((char) => {
+                                            return <li>
+                                                <h4><Link to={'/characters/' + char.name}>
+                                                    {char.name}
+                                                </Link></h4>
+                                            </li>;
+                                        })
+                                    }
+                                </ul>
                             </div>
                         </Col>
                     </Row>
diff --git a/app/constants/Constants.js b/app/constants/Constants.js
index e98af75..f9bf6dd 100644
--- a/app/constants/Constants.js
+++ b/app/constants/Constants.js
@@ -18,7 +18,7 @@ module.exports = {
     FILTER_FIELD_CULTURE: "culture",
     RECEIVE_TWITTER_TOP_SENTIMENTS: "RECEIVE_TWITTER_TOP_SENTIMENTS",
     RECEIVE_TWITTER_FLOP_SENTIMENTS: "RECEIVE_TWITTER_FLOP_SENTIMENTS",
-    RECEIVE_TWITTER_CONTROVERSIAL_SENTIMENTS: "RECEIVE_TWITTER_FLOP_SENTIMENTS",
-    RECEIVE_TWITTER_TALKED_ABOUT_SENTIMENTS: "RECEIVE_TWITTER_FLOP_SENTIMENTS",
+    RECEIVE_TWITTER_CONTROVERSIAL_SENTIMENTS: "RECEIVE_TWITTER_CONTROVERSIAL_SENTIMENTS",
+    RECEIVE_TWITTER_TALKED_ABOUT_SENTIMENTS: "RECEIVE_TWITTER_TALKED_ABOUT_SENTIMENTS",
     RECEIVE_TWITTER_CHARACTER_SENTIMENT: "RECEIVE_TWITTER_CHARACTER_SENTIMENT"
 };
diff --git a/app/network/SentimentsApi.js b/app/network/SentimentsApi.js
new file mode 100644
index 0000000..55330af
--- /dev/null
+++ b/app/network/SentimentsApi.js
@@ -0,0 +1,24 @@
+var request = require('superagent');
+var Promise = require('es6-promise').Promise;
+var protocol = (process.env.NODE_ENV === 'development') ? 'http://' : process.env.__PROTOCOL__;
+var port = (process.env.NODE_ENV === 'development') ? ':8080' : '';
+var baseUrl = protocol + 'localhost' + port + '/';
+
+var Api = {
+  get: function (url, query) {
+    return new Promise(function (resolve, reject) {
+      request
+        .get(baseUrl + url)
+        .query(query)
+        .end(function (err, res) {
+          if (res.status === 404) {
+            reject();
+          } else {
+            resolve(JSON.parse(res.text));
+          }
+        });
+    });
+  }
+};
+
+module.exports = Api;
\ No newline at end of file
diff --git a/app/stores/TwitterSentimentsStore.js b/app/stores/TwitterSentimentsStore.js
index 15d8996..c7bcc87 100644
--- a/app/stores/TwitterSentimentsStore.js
+++ b/app/stores/TwitterSentimentsStore.js
@@ -8,7 +8,7 @@ var _topSentiments = [];
 var _flopSentiments = [];
 var _mostTalkedAboutSentiments = [];
 var _topControversialSentiments = [];
-var _characterSentiment = {}
+var _characterSentiment = {};
 
 function setTopSentiments(data) {
     _topSentiments = data;