diff --git a/package.json b/package.json
index 3feb54729c..4102742aab 100644
--- a/package.json
+++ b/package.json
@@ -57,8 +57,8 @@
     "nodebb-plugin-spam-be-gone": "0.4.10",
     "nodebb-rewards-essentials": "0.0.9",
     "nodebb-theme-lavender": "3.0.13",
-    "nodebb-theme-persona": "4.1.22",
-    "nodebb-theme-vanilla": "5.1.10",
+    "nodebb-theme-persona": "4.1.23",
+    "nodebb-theme-vanilla": "5.1.11",
     "nodebb-widget-essentials": "2.0.10",
     "nodemailer": "2.0.0",
     "nodemailer-sendmail-transport": "1.0.0",
diff --git a/public/less/generics.less b/public/less/generics.less
index bca1b45649..d2be83d01e 100644
--- a/public/less/generics.less
+++ b/public/less/generics.less
@@ -94,6 +94,12 @@
 		.user-icon-style(24px, 1.5rem);
 	}
 
+	&.avatar-md {
+		width: 32px;
+		height: 32px;
+		.user-icon-style(32px, 1.5rem);
+	}
+
 	&.avatar-lg {
 		width: 128px;
 		height: 128px;
diff --git a/public/src/modules/chat.js b/public/src/modules/chat.js
index f2ff94bd55..445b4212e4 100644
--- a/public/src/modules/chat.js
+++ b/public/src/modules/chat.js
@@ -26,6 +26,15 @@ define('chat', [
 			module.loadChatsDropdown(chatsListEl);
 		});
 
+		chatsListEl.on('click', '[data-roomid]', function() {
+			var roomId = this.getAttribute('data-roomid');
+			if (!ajaxify.currentPage.match(/^chats\//)) {
+				app.openChat(roomId);
+			} else {
+				ajaxify.go('chats/' + roomId);
+			}
+		});
+
 		$('[component="chats/mark-all-read"]').on('click', function() {
 			socket.emit('modules.chats.markAllRead', function(err) {
 				if (err) {
@@ -106,44 +115,11 @@ define('chat', [
 
 			chatsListEl.empty();
 
-			if (!rooms.length) {
-				translator.translate('[[modules:chat.no_active]]', function(str) {
-					$('<li />')
-						.addClass('no_active')
-						.html('<a href="#">' + str + '</a>')
-						.appendTo(chatsListEl);
-				});
-				return;
-			}
-
-			rooms.forEach(function(roomObj) {
-				function createUserImage(userObj) {
-					return '<a data-ajaxify="false">' +
-						(userObj.picture ?
-							'<img src="' +	userObj.picture + '" title="' +	userObj.username +'" />' :
-							'<div class="user-icon" style="background-color: ' + userObj['icon:bgColor'] + '">' + userObj['icon:text'] + '</div>') +
-						'<i class="fa fa-circle status ' + userObj.status + '"></i> ' +
-						roomObj.usernames + '</a>';
-				}
-
-				var dropdownEl = $('<li class="' + (roomObj.unread ? 'unread' : '') + '"/>')
-					.attr('data-roomId', roomObj.roomId)
-					.appendTo(chatsListEl);
-
-				if (roomObj.lastUser) {
-					dropdownEl.append(createUserImage(roomObj.lastUser));
-				} else {
-					translator.translate('[[modules:chat.no-users-in-room]]', function(str) {
-						dropdownEl.append(str);
-					});
-				}
-
-				dropdownEl.click(function() {
-					if (!ajaxify.currentPage.match(/^chats\//)) {
-						app.openChat(roomObj.roomId);
-					} else {
-						ajaxify.go('chats/' + roomObj.roomId);
-					}
+			templates.parse('partials/chat_dropdown', {
+				rooms: rooms
+			}, function(html) {
+				translator.translate(html, function(translated) {
+					chatsListEl.html(translated);
 				});
 			});
 		});