diff --git a/less/chats.less b/less/chats.less
index e989732..3e6fdd1 100644
--- a/less/chats.less
+++ b/less/chats.less
@@ -1,3 +1,7 @@
+.chats-page {
+	margin-top: 10px;
+}
+
 .chats-list {
 	padding: 0;
 	overflow-x: hidden;
@@ -9,7 +13,7 @@
 		clear: both;
 		list-style-type: none;
 		padding: 0.5em;
-		height: 90px;
+		height: 80px;
 		.pointer;
 
 		border-left: 1px solid;
@@ -17,8 +21,6 @@
 		border-bottom: 1px solid;
 		border-color: @gray-lighter;
 
-
-
 		&.typing {
 			.username:after {
 				visibility: visible;
@@ -26,7 +28,9 @@
 		}
 
 		&.unread {
-			background: lighten(@brand-primary, 25%);
+			background: lighten(@brand-primary, 35%);
+			border-bottom: 0;
+			
 		}
 
 		.teaser-content {
@@ -34,10 +38,24 @@
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			font-size: 13px;
+			opacity: 0.8;
+		}
+
+		.room-name {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: block;
+		}
+
+		.teaser-content, .room-name {
+			padding-left: 80px;
 		}
 
 		&.bg-primary {
 			background: @brand-primary;
+			border-bottom: 0;
 		}
 
 		.username {
@@ -54,6 +72,7 @@
 
 		.teaser-timestamp {
 			font-size: 10px;
+			margin-top: 10px;
 		}
 
 		a {
@@ -84,14 +103,55 @@
 
 		.members {
 			padding-left: 1rem;
+			z-index: 1;
+			position: absolute;
+			bottom: 2px;
+			left: 53px;
 
 			li {
 				display: inline-block;
 				width: 16px;
 				padding: 0;
 				margin: 0;
+
+				&:first-child {
+					display: none;
+				}
+
+				.avatar {
+					border: 2px solid white;
+					width: 28px;
+					height: 28px;
+					line-height: 26px;
+				}
+
+				img {
+					margin-top: -4px;
+				}
+			}
+		}
+
+		.main-avatar {
+			position: absolute;
+			top: 0px;
+			left: 0px;
+
+			div, img {				
+				height: 80px;
+				width: 80px;
+				font-size: 40px;
+				border-radius: 0;
 			}
 		}
+
+		.avatar-placeholder {
+			height: 80px;
+			width: 80px;
+			background: @gray-lighter;
+			position: absolute;
+			top: 0px;
+			left: 0px;
+		}
 	}
 }
 
@@ -152,6 +212,11 @@
 				border-top: 1px solid @gray-lighter;
 			}
 
+			&[data-break="true"]:first-child {
+				border-top: 0;
+				margin-top: -1.5px;
+			}
+
 			.chat-user-image {
 				.user-icon-style(32px, 1.6rem, 50%);
 				float: left;
@@ -226,6 +291,10 @@
 		padding: 1rem 0;
 		text-align: center;
 	}
+
+	.controlsToggle {
+		margin-right: 10px;
+	}
 }
 
 .expanded-chat {
diff --git a/templates/chats.tpl b/templates/chats.tpl
index 5ef5fd5..b27d065 100644
--- a/templates/chats.tpl
+++ b/templates/chats.tpl
@@ -1,7 +1,7 @@
 
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
-<div class="row">
+<div class="row chats-page">
 	<div class="col-md-4">
 		<div class="chat-search hidden-xs">
 			<input class="form-control" type="text" component="chat/search" placeholder="[[users:enter_username]]" />
@@ -19,16 +19,19 @@
 	<div class="col-md-8 hidden-sm hidden-xs">
 		<!-- IF roomId -->
 		<div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
-
 			<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
+			<button class="close controlsToggle" component="expanded-chat/controlsToggle"><i class="fa fa-gear"></i></button>
 
-			<!-- IF showUserInput -->
-			<div class="users-tag-container">
-				<input class="users-tag-input" type="text" class="form-control" placeholder="[[modules:chat.add-users-to-room]]" tabindex="4"/>
-			</div>
-			<!-- ENDIF showUserInput -->
+			<div class="controls hide" component="expanded-chat/controls">
+				<!-- IF showUserInput -->
+				<div class="users-tag-container">
+					<input class="users-tag-input" type="text" class="form-control" placeholder="[[modules:chat.add-users-to-room]]" tabindex="4"/>
+				</div>
+				<!-- ENDIF showUserInput -->
 
-			<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
+				<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
+				<hr />
+			</div>
 
 			<ul class="chat-content">
 				<!-- IMPORT partials/chats/messages.tpl -->
diff --git a/templates/partials/chats/recent_room.tpl b/templates/partials/chats/recent_room.tpl
index 94cb96f..3acf5a1 100644
--- a/templates/partials/chats/recent_room.tpl
+++ b/templates/partials/chats/recent_room.tpl
@@ -1,24 +1,28 @@
 <li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
 	<i class="fa fa-times pull-right leave" component="chat/leave"></i>
-	<div>
-		<p><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></p>
-		<ul class="members">
-			<!-- BEGIN rooms.users -->
-			<li>
-				<a href="{config.relative_path}/user/{rooms.users.userslug}">
-					<!-- IF rooms.users.picture -->
-					<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
-					<!-- ELSE -->
-					<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
-					<!-- ENDIF rooms.users.picture -->
-				</a>
-			</li>
-			<!-- END rooms.users -->
-			<!-- IF !rooms.lastUser.uid -->
-			<li>[[modules:chat.no-users-in-room]]</li>
-			<!-- ENDIF !rooms.lastUser.uid -->
-		</ul>
+	<strong class="room-name">
+		<!-- IF !rooms.lastUser.uid -->
+		<span>[[modules:chat.no-users-in-room]]</span>
+		<!-- ELSE -->
+		<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
+		<!-- ENDIF !rooms.lastUser.uid -->
+	</strong>
+	<div class="avatar-placeholder"></div>
+	<!-- BEGIN rooms.users -->
+	<!-- IF @first -->
+	<div class="main-avatar">
+		<!-- IMPORT partials/chats/user.tpl -->
 	</div>
+	<!-- ENDIF @first -->
+	<!-- END rooms.users -->
+
+	<ul class="members">
+		<!-- BEGIN rooms.users -->
+		<li>
+			<!-- IMPORT partials/chats/user.tpl -->
+		</li>
+		<!-- END rooms.users -->
+	</ul>
 
 	<span class="teaser-content">{rooms.teaser.content}</span>
 	<span class="teaser-timestamp timeago pull-right" title="{rooms.teaser.timestampISO}"></span>
diff --git a/templates/partials/chats/user.tpl b/templates/partials/chats/user.tpl
new file mode 100644
index 0000000..851f3c6
--- /dev/null
+++ b/templates/partials/chats/user.tpl
@@ -0,0 +1,7 @@
+<a href="{config.relative_path}/user/{rooms.users.userslug}">
+	<!-- IF rooms.users.picture -->
+	<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
+	<!-- ELSE -->
+	<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
+	<!-- ENDIF rooms.users.picture -->
+</a>
\ No newline at end of file