diff --git a/webclient/app.css b/webclient/app.css
index e2526dcbaa06a6dcc49b2b311e908d6a0cb73d13..8abdd1cb44667c95a99df9af39bc0e4256914114 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -368,6 +368,10 @@ h1 {
     background-color: #f8f8ff;
 }
 
+.recentsRoomSelected {
+    background-color: #eee;
+}
+
 .recentsRoomName {
     font-size: 16px;
     padding-top: 7px;
diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js
index a9805fc38aeba4303e98d57530b23e28045390b9..8f8b08d5bdb023a2c90f8529a1991d49e72f60b8 100644
--- a/webclient/recents/recents-controller.js
+++ b/webclient/recents/recents-controller.js
@@ -20,7 +20,11 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService'])
 .controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', 'eventStreamService', 
                                function($scope,  matrixService, eventHandlerService, eventStreamService) {
     $scope.rooms = {};
-    
+
+    // $scope of the parent where the recents component is included can override this value
+    // in order to highlight a specific room in the list
+    $scope.recentsSelectedRoomID;
+
     $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {
         var config = matrixService.config();
         if (event.state_key === config.user_id && event.content.membership === "invite") {
diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html
index 6d2864ac973d88556ae378d366cdc9749df40390..6fda6c5c6b0dc0ece492cf6f1aefbf0e6e3c9fbd 100644
--- a/webclient/recents/recents.html
+++ b/webclient/recents/recents.html
@@ -1,6 +1,9 @@
 <div ng-controller="RecentsController" data-ng-init="onInit()">
     <table class="recentsTable">
-        <tbody ng-repeat="(rm_id, room) in rooms | orderRecents" ng-click="goToPage('room/' + (room.room_alias ? room.room_alias : room.room_id) )" class ="recentsRoom" >
+        <tbody ng-repeat="(rm_id, room) in rooms | orderRecents" 
+               ng-click="goToPage('room/' + (room.room_alias ? room.room_alias : room.room_id) )" 
+               class ="recentsRoom" 
+               ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID)}">
             <tr>
                 <td class="recentsRoomName">
                     {{ room.room_display_name }}
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index f49deaa489f21daf59abce831c4b5a39b61ab7ae..641ccddce79b73255ea27245a485bae7700b9cad 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -327,6 +327,9 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
     var onInit2 = function() {
         eventHandlerService.reInitRoom($scope.room_id); 
 
+        // Make recents highlight the current room
+        $scope.recentsSelectedRoomID = $scope.room_id;
+
         // Join the room
         matrixService.join($scope.room_id).then(
             function() {