diff --git a/less/chats.less b/less/chats.less
index 1a1d550..a96b980 100644
--- a/less/chats.less
+++ b/less/chats.less
@@ -3,24 +3,40 @@
 	max-height: 608px;
 	overflow-x: hidden;
 	overflow-y: auto;
+	border-top: 1px solid @gray-lighter;
 
 	li {
+		position: relative;
 		clear: both;
 		list-style-type: none;
 		padding: 0.5em;
+		height: 70px;
 		.pointer;
 
+		border-left: 1px solid;
+		border-right: 1px solid;
+		border-bottom: 1px solid;
+		border-color: @gray-lighter;
+
+		background: @body-bg;
+
 		&.typing {
-			span:after {
+			.username:after {
 				visibility: visible;
 			}
 		}
 
 		&.unread {
-			.bg-variant(@state-warning-bg);
+			background: lighten(@brand-primary, 25%);
 		}
 
-		span {
+		&.bg-primary {
+			background: @brand-primary;
+		}
+
+		.username {
+			font-size: 18px;
+
 			&:after {
 				display: inline-block;
 				font-family: "FontAwesome";
@@ -30,6 +46,13 @@
 			}
 		}
 
+		.teaser-timestamp {
+			font-size: 10px;
+			position: absolute;
+			top: 8px;
+			right: 24px;
+		}
+
 		a {
 			display: block;
 			.text-ellipsis;
@@ -40,11 +63,21 @@
 		}
 
 		.user-img {
-			width:24px;
-			height:24px;
+			width: 50px;
+			height: 50px;
+			float: left;
+			margin-top: 4px;
+			margin-right: 13px;
 			margin-left: 0.5em;
 			border-radius: 50%;
 		}
+
+		.status {
+			position: absolute;
+			left: 50px;
+			font-size: 20px;
+			top: 10px;
+		}
 	}
 }
 
@@ -163,4 +196,19 @@
 	textarea {
 		resize: none;
 	}
+}
+
+.expanded-chat {
+	h1 {
+		margin: 0px;
+		padding-bottom: 20px;
+	}
+
+	.chat-content {
+		padding-top: 10px;
+	}
+
+	.input-group {
+		position: absolute;
+	}
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 577af91..acc84c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "nbbpm": {
     "compatibility": "^0.8.0"
   },
diff --git a/templates/chats.tpl b/templates/chats.tpl
index 0d95b58..23457b1 100644
--- a/templates/chats.tpl
+++ b/templates/chats.tpl
@@ -1,27 +1,48 @@
 <div class="row">
-	<div class="col-sm-9">
+	<div class="col-sm-4">
+		<ul class="chats-list recent-chats" data-nextstart="{nextStart}">
+			<!-- BEGIN chats -->
+			<li data-username="{chats.username}" data-uid="{chats.uid}" class="<!-- IF chats.unread -->unread<!-- ENDIF chats.unread -->">
+				<img class="user-img" src="{chats.picture}">
+				<i component="user/status" title="[[global:{chats.status}]]" class="fa fa-circle status {chats.status}"></i>
+				<span class="username">{chats.username}</span>
+				<span class="teaser-content">{chats.teaser.content}</span>
+				<span class="teaser-timestamp timeago" title="{chats.teaser.timestampISO}"></span>
+			</li>
+			<!-- END chats -->
+			<!-- BEGIN contacts -->
+			<li data-username="{contacts.username}" data-uid="{contacts.uid}">
+				<i component="user/status" title="[[global:{contacts.status}]]" class="fa fa-circle status {contacts.status}"></i>
+				<img class="user-img" src="{contacts.picture}">
+				<span class="username">{contacts.username}</span>
+			</li>
+			<!-- END contacts -->
+		</ul>
+		
+	</div>
+
+	<div class="col-sm-8">
 		<!-- IF !allowed -->
 		<div class="alert alert-warning">
 			[[error:chat-restricted]]
 		</div>
 		<!-- ENDIF !allowed -->
 		<!-- IF meta -->
-		<div class="panel panel-default expanded-chat" data-uid="{meta.uid}" data-username="{meta.username}">
-			<div class="panel-heading">
-				<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>
-				<h2 class="panel-title">[[modules:chat.message-history]]</h2>
-			</div>
-			<div class="panel-body">
-				<span class="since-bar"><a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
-				<ul class="chat-content">
-					<!-- IMPORT partials/chat_messages.tpl -->
-				</ul>
-				<div class="input-group">
-					<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input" rows="1"></textarea>
-					<span class="input-group-btn">
-						<button class="btn btn-primary" type="button" data-action="send">[[modules:chat.send]]</button>
-					</span>
-				</div>
+		<div class="expanded-chat" data-uid="{meta.uid}" data-username="{meta.username}">
+			
+			<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>
+			<h1>{meta.username}</h1>
+
+		
+			<span class="since-bar"><a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
+			<ul class="chat-content">
+				<!-- IMPORT partials/chat_messages.tpl -->
+			</ul>
+			<div class="input-group">
+				<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input" rows="1"></textarea>
+				<span class="input-group-btn">
+					<button class="btn btn-primary" type="button" data-action="send">[[modules:chat.send]]</button>
+				</span>
 			</div>
 		</div>
 		<!-- ELSE -->
@@ -30,38 +51,4 @@
 		</div>
 		<!-- ENDIF meta -->
 	</div>
-	<div class="col-sm-3">
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<h2 class="panel-title">[[modules:chat.contacts]]</h2>
-			</div>
-			<div class="panel-body">
-				<ul class="chats-list">
-					<!-- BEGIN contacts -->
-					<li data-username="{contacts.username}" data-uid="{contacts.uid}">
-						<i component="user/status" title="[[global:{contacts.status}]]" class="fa fa-circle status {contacts.status}"></i>
-						<img class="user-img" src="{contacts.picture}">
-						<span>{contacts.username}</span>
-					</li>
-					<!-- END contacts -->
-				</ul>
-			</div>
-		</div>
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<h2 class="panel-title">[[modules:chat.recent-chats]]</h2>
-			</div>
-			<div class="panel-body">
-				<ul class="chats-list recent-chats" data-nextstart="{nextStart}">
-					<!-- BEGIN chats -->
-					<li data-username="{chats.username}" data-uid="{chats.uid}" class="<!-- IF chats.unread -->unread<!-- ENDIF chats.unread -->">
-						<i component="user/status" title="[[global:{chats.status}]]" class="fa fa-circle status {chats.status}"></i>
-						<img class="user-img" src="{chats.picture}">
-						<span>{chats.username}</span>
-					</li>
-					<!-- END chats -->
-				</ul>
-			</div>
-		</div>
-	</div>
 </div>