diff --git a/_layouts/city.html b/_layouts/city.html
index a99500c..1e6076c 100644
--- a/_layouts/city.html
+++ b/_layouts/city.html
@@ -123,7 +123,7 @@ <h3>You?</h3>
   </div>
 </section>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 <script src="/scripts/widgets.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
    $(function() {
diff --git a/dashboard.html b/dashboard.html
index 5150126..01c06ed 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -64,7 +64,7 @@ <h2>Workshops</h1>
 course, prone to error.
 </small>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 <script src="/scripts/widgets.js" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/javascript" charset="utf-8">
diff --git a/index.html b/index.html
index 00138ff..236e43d 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@ <h2>The OpenTechSchool initiative</h2>
   <div class="container clearfix">
     <div class="a-third blocky green">
       <h3 class="head">More about OTS</h3>
-      <p>Go to <a href="/about.html">about</a> to learn more about what OpenTechSchool is, what we do, the values and the history of the movement. 
+      <p>Go to <a href="/about.html">about</a> to learn more about what OpenTechSchool is, what we do, the values and the history of the movement.
       </p>
       <p>You might also want to learn more about <a href="/foundation/">the foundation</a> behind it and what some of the learners, coaches and organisers <a href="testimonials.html">say about OpenTechSchool</a>.</p>
 
@@ -33,7 +33,7 @@ <h3 class="head">Start learning</h3>
     <div class="a-third blocky orange">
       <h3 class="head">Join the movement</h3>
       <p>Just reach out to the <a href="/locator/">next chapter close to you</a> and help organising, coaching or with general support.</p>
- 
+
       <p>You might also want to join the <a href="/foundation/">Foundation as a Member</a> and <a href="http://discourse.opentechschool.org">join our online community</a> of coaches, organisers and volunteers, <a href="http://eepurl.com/bGlqw9">subscribe to our newsletter</a>, or <a href="#stay-connected" class="stay-connected">stay connected</a>.</p>
     </div>
 
@@ -62,7 +62,12 @@ <h3 class="post_title"><a href="http://blog.opentechschool.org${link}">${title}<
     </div>
 
   </div>
-  
+
+  <div class="blocky discussion">
+    <h3 class="head">Discussion <a href="http://discourse.opentechschool.org/latest/" class="tiny_button">&raquo; latest topics</a></h3>
+    <div id="currentTopics"></div>
+  </div>
+
 </div>
 
 
@@ -94,7 +99,7 @@ <h3>Stay connected with OpenTechSchool <span class="close" title="close">x</span
           <h4>Follow us on</h4>
           <div class="clearfix">
             <a href="https://www.twitter.com/OpenTechSchool" class="btn"><span class="ots_icon twitter"></span> Twitter</a>
-            <a href="http://www.facebook.com/OpenTechSchool" class="btn"><span class="ots_icon facebook"></span> Facebook</a> 
+            <a href="http://www.facebook.com/OpenTechSchool" class="btn"><span class="ots_icon facebook"></span> Facebook</a>
             <a href="https://plus.google.com/b/114834784518588736271/114834784518588736271/posts" class="btn">Google+</a>
           </div>
           <h4>and</h4>
@@ -109,23 +114,36 @@ <h4>and</h4>
   </div>
 </div>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 <script src="/scripts/widgets.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
    $(function() {
-    React.renderComponent(OTS.Widgets.UpcomingEventsPreview({teams: OTS.config.chapters, page: 5, params: {text: 'opentechschool'}}), document.getElementById('upcomingEvents'));
-
-    React.renderComponent(OTS.Widgets.LatestConversations({path: "/latest.json"}), document.getElementById('currentTopics'));
+    React.renderComponent(
+      OTS.Widgets.UpcomingEventsPreview({
+        teams: OTS.config.chapters,
+        page: 5,
+        params: {
+          text: 'opentechschool'
+        }
+      }),
+      document.getElementById('upcomingEvents')
+    );
+    React.renderComponent(
+      OTS.Widgets.LatestConversations({
+        path: "/latest.json"
+      }),
+      document.getElementById('currentTopics')
+    );
 
     $(".stay-connected").click(function() {
       $('body').addClass("show-modal");
     });
     $(".modal .close").click(function() {
-      $('body').removeClass("show-modal"); 
+      $('body').removeClass("show-modal");
     });
     $(document).keypress(function(ev){
       if (ev.keyCode === 27){ // ESCAPE
-       $('body').removeClass("show-modal"); 
+       $('body').removeClass("show-modal");
       }
     });
    });
diff --git a/locator/index.html b/locator/index.html
index 28ad35c..fb9b38b 100644
--- a/locator/index.html
+++ b/locator/index.html
@@ -58,7 +58,7 @@ <h2 class="claim-title">Find OpenTechSchool events in your area!</h2>
 </div>
 
 <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js" type="text/javascript" charset="utf-8"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js" type="text/javascript" charset="utf-8"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.js" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/x-template" data-template="marker-popup">
   <a href="${link}">${name}</a><br/>
diff --git a/sass/imports/_main.scss b/sass/imports/_main.scss
index 02df7b8..d6fda3b 100644
--- a/sass/imports/_main.scss
+++ b/sass/imports/_main.scss
@@ -485,9 +485,17 @@ ul.nav {
 
 // discourse topic loader
 
+
+.discussion {
+  width: 75%;
+  margin: 0 auto;
+  margin-bottom: 0;
+}
+
 .topic {
-  padding: 15px 10px;
-  clear: both;
+  padding: 15px 0;
+  width: 50%;
+  display: inline-block;
   .metadata {
     opacity: 0.6;
     width: 100%;
@@ -496,7 +504,7 @@ ul.nav {
   .posters {
     width: 150px;
     display: block;
-    float: left;
+    float: right;
     .avatar {
       border-radius: 2px;
       vertical-align: middle;
@@ -936,7 +944,6 @@ footer a:focus {
 
 
 
-
 /* ========================================== */
 /* ! Provide higher res assets for iPhone 4   */
 /* ========================================== */
diff --git a/scripts/widgets.js b/scripts/widgets.js
index 4185ccb..da01092 100644
--- a/scripts/widgets.js
+++ b/scripts/widgets.js
@@ -220,59 +220,71 @@
     OTS.Widgets.Topic = React.createClass({
     	get_url: function() {
     		var topic = this.props.topic;
-    		return ["http://discourse.opentechschool.org/t",
-    				topic.slug, topic.id].join("/");
+    		return ["http://discourse.opentechschool.org/t", topic.slug, topic.id].join("/");
     	},
-      	getInitialState: function() {
-        	return {highlight: false};
-      	},
-      	mouseEnter: function() {
-      		this.setState({"highlight": true});
-      	},
-      	mouseLeave: function() {
-      		this.setState({"highlight": false});
-      	},
-        render: function() {
-          var topic = this.props.topic,
-              users = this.props.users,
-              bumped = moment(topic.bumped_at);
-
-
-          return React.DOM.div({
-          				className: this.state.highlight ? "topic highlight" : "topic",
-          				onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave}, [
-                    React.DOM.h3({className: "topic_title"},
-                        React.DOM.a({href: this.get_url()}, topic.fancy_title)
-                        ),
-                    React.DOM.div({className: "metadata"}, [
-                    	React.DOM.div({className: "posters"}, topic.posters.slice(0, 5).map(function(poster){
-                    			var poster = users[poster.user_id];
-                    			return React.DOM.img({
-                    				className: poster.extras === "latest" ? "avatar latest" : "avatar",
-                    				src: poster.avatar_template.replace("{size}", "25"),
-                    				title: poster.username,
-                    				alt: poster.username});
-                    			})
-                    		),
-                    	React.DOM.span({className: "bumped"},
-                    		bumped.fromNow())
-                    	])
-                    ]);
+    	getInitialState: function() {
+      	return {highlight: false};
+    	},
+    	mouseEnter: function() {
+    		this.setState({"highlight": true});
+    	},
+    	mouseLeave: function() {
+    		this.setState({"highlight": false});
+    	},
+      render: function() {
+        var topic = this.props.topic;
+        var users = this.props.users;
+        var bumped = moment(topic.bumped_at);
+
+        function getAvatarUrl(template) {
+          var url = template.replace("{size}", "25");
+          if (url.indexOf('https://avatars.discourse.org/') !== 0) {
+            url = 'http://discourse.opentechschool.org' + url;
+          }
+          return url;
+        }
+
+        return React.DOM.div({
+        				className: this.state.highlight ? "topic highlight" : "topic",
+        				onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave}, [
+                  React.DOM.h3({className: "topic_title"},
+                      React.DOM.a({href: this.get_url()}, topic.fancy_title)
+                  ),
+                  React.DOM.div({className: "metadata"}, [
+                  	React.DOM.div({className: "posters"}, topic.posters.slice(0, 5).map(function(poster){
+                  			var poster = users[poster.user_id];
+                  			return React.DOM.img({
+                  				className: poster.extras === "latest" ? "avatar latest" : "avatar",
+                  				src: getAvatarUrl(poster.avatar_template),
+                  				title: poster.username,
+                  				alt: poster.username
+												});
+                  			})
+                  		),
+                  	React.DOM.span({className: "bumped"},
+                  		bumped.fromNow())
+                  	])
+                  ]);
         }
     });
 
     OTS.Widgets.TopicList = React.createClass({
-
-          render: function() {
-            if (!this.props.topics) {return;}
-            var topicNodes = this.props.topics.slice(0,5).map(function (topic) {
-              	return OTS.Widgets.Topic({topic: topic, users: this.props.users});
-            	}.bind(this));
-            if (topicNodes.length == 0){
-              topicNodes = React.DOM.div({className:"empty"},"No topics found :( ");
-            }
-            return React.DOM.div({className:"topicsList"}, topicNodes);
-          }
+      render: function() {
+        if (!this.props.topics) {
+					return null;
+				}
+				var entryMax = 4; // cut length
+        var topicNodes = this.props.topics.slice(0, entryMax).map(function (topic) {
+          	return OTS.Widgets.Topic({
+							topic: topic,
+							users: this.props.users
+						});
+        	}.bind(this));
+        if (topicNodes.length == 0){
+          topicNodes = React.DOM.div({className:"empty"},"No topics found :(");
+        }
+        return React.DOM.div({className:"topicsList"}, topicNodes);
+      }
     });
 
     var DiscourseMixin = {
@@ -304,11 +316,14 @@
     OTS.Widgets.LatestConversations = React.createClass({
       mixins: [DiscourseMixin],
       render: function(){
-        if (!this.state.loading) {
+        if (this.state.loading === true) {
           return OTS.Widgets.Loading();
+					// return null;
         }
-      	return OTS.Widgets.TopicList({topics: this.state.topics,
-                        users: this.state.users});
+      	return OTS.Widgets.TopicList({
+					topics: this.state.topics,
+          users: this.state.users
+				});
       }
     });
 
@@ -316,22 +331,29 @@
       mixins: [DiscourseMixin],
 
       render: function() {
-          if (!this.state.loading) {
+          if (this.state.loading === true) {
             return OTS.Widgets.Loading();
+						// return null;
           }
 
           if (this.state.topics.length === 0){
+						return null;
             // in case we are empty, don't show anything
-            return React.DOM.div();
+            // return React.DOM.div();
           }
 
           return React.DOM.div({className:"blocky"},
               React.DOM.h3({className:"head"},
                   "Latest Conversations ",
-                  React.DOM.a({href:this.get_discourse_path().replace(".json", ""), className: "tiny_button"}, "join")
-                  ),
-              OTS.Widgets.TopicList({topics: this.state.topics,
-                            users: this.state.users})
+                  React.DOM.a({
+										href:this.get_discourse_path().replace(".json", ""),
+										className: "tiny_button"
+									}, "join")
+              ),
+              OTS.Widgets.TopicList({
+								topics: this.state.topics,
+                users: this.state.users
+							})
             );
       }
     });
diff --git a/stylesheets/screen.css b/stylesheets/screen.css
index 039eb71..8ddd173 100644
--- a/stylesheets/screen.css
+++ b/stylesheets/screen.css
@@ -179,9 +179,11 @@ ul.nav { margin-right: 7px; }
 .eventsList .event .details { padding: 5px; }
 .eventsList .event .details .team { cursor: pointer; }
 
-.topic { padding: 15px 10px; clear: both; }
+.discussion { width: 75%; margin: 0 auto; margin-bottom: 0; }
+
+.topic { padding: 15px 0; width: 50%; display: inline-block; }
 .topic .metadata { opacity: 0.6; width: 100%; line-height: 30px; }
-.topic .posters { width: 150px; display: block; float: left; }
+.topic .posters { width: 150px; display: block; float: right; }
 .topic .posters .avatar { border-radius: 2px; vertical-align: middle; margin: 2px; }
 .topic.highlight .metadata { opacity: 1; }