diff --git a/css/style.scss b/css/style.scss
index 591c1db9a2e..2bee9f4a83b 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -96,6 +96,13 @@
 	height: 32px;
 }
 
+#app-navigation .app-navigation-entry-utils-counter span {
+	padding: 2px 5px;
+	border-radius: 10px;
+	background-color: $color-primary;
+	color: $color-primary-text;
+}
+
 .public-room {
 	display: block !important;
 }
diff --git a/js/views/roomlistview.js b/js/views/roomlistview.js
index 359248866dc..2e900e1e54e 100644
--- a/js/views/roomlistview.js
+++ b/js/views/roomlistview.js
@@ -37,7 +37,7 @@
 	var ITEM_TEMPLATE = '<a class="app-navigation-entry-link" href="#{{id}}" data-token="{{token}}"><div class="avatar" data-user="{{name}}" data-user-display-name="{{displayName}}"></div> {{displayName}}</a>'+
 						'<div class="app-navigation-entry-utils">'+
 							'<ul>'+
-								'{{#if unreadMessages}}<li class="app-navigation-entry-utils-counter">{{unreadMessages}}</li>{{/if}}'+
+								'{{#if unreadMessages}}<li class="app-navigation-entry-utils-counter"><span>{{unreadMessages}}</span></li>{{/if}}'+
 								'<li class="app-navigation-entry-utils-menu-button"><button></button></li>'+
 							'</ul>'+
 						'</div>'+