diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js
index b19ec27a9d6d7480ca95bc0736e6e09bed20132a..002a9fbd5d0846fc2a1e22732765445ee4d974ad 100644
--- a/webclient/components/matrix/event-handler-service.js
+++ b/webclient/components/matrix/event-handler-service.js
@@ -35,6 +35,7 @@ angular.module('eventHandlerService', [])
     var POWERLEVEL_EVENT = "POWERLEVEL_EVENT";
     var CALL_EVENT = "CALL_EVENT";
     var NAME_EVENT = "NAME_EVENT";
+    var TOPIC_EVENT = "TOPIC_EVENT";
 
     var initialSyncDeferred = $q.defer();
     
@@ -170,24 +171,39 @@ angular.module('eventHandlerService', [])
     };
     
     // TODO: Can this just be a generic "I am a room state event, can haz store?"
-    var handleRoomTopic = function(event, isLiveEvent) {
+    var handleRoomTopic = function(event, isLiveEvent, isStateEvent) {
         console.log("handleRoomTopic live="+isLiveEvent);
 
         initRoom(event.room_id);
 
+        // Add topic changes as if they were a room message
+        if (!isStateEvent) {
+            if (isLiveEvent) {
+                $rootScope.events.rooms[event.room_id].messages.push(event);
+            }
+            else {
+                $rootScope.events.rooms[event.room_id].messages.unshift(event);
+            }
+        }
+
         // live events always update, but non-live events only update if the
         // ts is later.
+        var latestData = true;
         if (!isLiveEvent) {
             var eventTs = event.ts;
             var storedEvent = $rootScope.events.rooms[event.room_id][event.type];
             if (storedEvent) {
                 if (storedEvent.ts > eventTs) {
                     // ignore it, we have a newer one already.
-                    return;
+                    latestData = false;
                 }
             }
         }
-        $rootScope.events.rooms[event.room_id][event.type] = event;
+        if (latestData) {
+            $rootScope.events.rooms[event.room_id][event.type] = event;         
+        }
+
+        $rootScope.$broadcast(TOPIC_EVENT, event, isLiveEvent);
     };
 
     var handleCallEvent = function(event, isLiveEvent) {
@@ -229,6 +245,7 @@ angular.module('eventHandlerService', [])
         POWERLEVEL_EVENT: POWERLEVEL_EVENT,
         CALL_EVENT: CALL_EVENT,
         NAME_EVENT: NAME_EVENT,
+        TOPIC_EVENT: TOPIC_EVENT,
     
         handleEvent: function(event, isLiveEvent, isStateEvent) {
             // Avoid duplicated events
@@ -279,7 +296,7 @@ angular.module('eventHandlerService', [])
                         handleRoomName(event, isLiveEvent);
                         break;
                     case 'm.room.topic':
-                        handleRoomTopic(event, isLiveEvent);
+                        handleRoomTopic(event, isLiveEvent, isStateEvent);
                         break;
                     default:
                         console.log("Unable to handle event type " + event.type);
diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js
index 5cf74cad4e61346bf10d4cb2ee31bff13cf200e9..8ce0969164a7f207d29c94dacec17f0c070f8b3b 100644
--- a/webclient/recents/recents-controller.js
+++ b/webclient/recents/recents-controller.js
@@ -68,6 +68,11 @@ angular.module('RecentsController', ['matrixService', 'matrixFilter', 'eventHand
                 $rootScope.rooms[event.room_id] = event;
             }
         });
+        $rootScope.$on(eventHandlerService.TOPIC_EVENT, function(ngEvent, event, isLive) {
+            if (isLive) {
+                $rootScope.rooms[event.room_id].lastMsg = event;
+            }
+        });
     };
     
     /**
diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html
index d6bea52cbece54781c00171239a44938f22820e1..6976bab879e4aed0b1f0a746a31fddb8fe5f8117 100644
--- a/webclient/recents/recents.html
+++ b/webclient/recents/recents.html
@@ -76,6 +76,10 @@
                             </div>
                         </div>
 
+                        <div ng-switch-when="m.room.topic">
+                            {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }} changed the topic to: {{ room.lastMsg.content.topic }}
+                        </div>
+
                         <div ng-switch-default>
                             <div ng-if="room.lastMsg.type.indexOf('m.call.') === 0">
                                 Call
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 054b876f81ad2ca1c373bdb0f132637241cea2cd..dba6586e001888caeb08578b5dbd4e38ddf28351 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -113,6 +113,11 @@
                                      ng-click="$parent.fullScreenImageURL = msg.content.url"/>
                             </div>
                         </div>
+
+                        <span ng-if="'m.room.topic' === msg.type">
+                            {{ members[msg.user_id].displayname || msg.user_id }} changed the topic to: {{ msg.content.topic }}
+                        </span>
+
                     </div>
                 </td>
                 <td class="rightBlock">