diff --git a/css/style.css b/css/style.css
index c1f1b3d87..134e86917 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1701,6 +1701,12 @@ ul.viewcontact_wrapper > li {
 }
 
 /* private mail */
+.message-content-wrapper > li {
+/* we need this overwriting because we have no template file
+   for the general mail page /message
+*/
+    list-style-type: none;
+}
 .mail-thread {
     max-height: calc(100vh - 200px);
 }
@@ -1710,6 +1716,7 @@ ul.viewcontact_wrapper > li {
     max-height: auto;
     /*height: 500px;*/
     margin-bottom: 0px;
+    padding: 0 15px;
 }
 #mail-conversation.can-reply {
 /*    border-bottom-left-radius: 0px;
@@ -1734,9 +1741,38 @@ ul.viewcontact_wrapper > li {
     max-height: 120px;
 }
 .mail-conv-wrapper {
-    padding: 15px;
-    border-bottom: 1px solid rgba(238, 238, 238, 0.95)
+    padding: 15px 0;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
 }
+#message-sidebar {
+    height: calc(100vh - 150px);
+}
+#message-preview {
+    /*padding: 0 10px;*/
+    height: calc(100% - 20px);
+}
+#message-preview ul {
+    margin: 0px;
+}
+#message-preview .media-list li {
+    padding: 0px 10px;
+    border: none;
+}
+#message-preview .media-list li:hover {
+    border-left: none !important;
+}
+#message-preview .media-list li a {
+    color: $link_color;
+}
+.mail-list-outside-wrapper {
+    padding: 5px 0;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
+}
+.mail-list-outside-wrapper .contact-photo-wrapper {
+    height: 48px;
+    width: 48px;
+}
+
 #prvmail-end {
     clear:both;
 }
diff --git a/templates/mail_conv.tpl b/templates/mail_conv.tpl
index dd091249a..5bda169b6 100644
--- a/templates/mail_conv.tpl
+++ b/templates/mail_conv.tpl
@@ -1,6 +1,6 @@
 <div id="mail_conv-{{$mail.id}}" class="mail-conv-wrapper message-{{$mail.id}}">
 	<div class="media">
-		<div class="pull-left contact-photo-wrapper">
+		<div class="media-left contact-photo-wrapper">
 			<a href="{{$mail.from_url}}">
 				<img class="media-object" src="{{$mail.from_photo}}" alt="{{$mail.from_name}}" />
 			</a>
diff --git a/templates/mail_list.tpl b/templates/mail_list.tpl
index 18a2acc96..f05221dd6 100644
--- a/templates/mail_list.tpl
+++ b/templates/mail_list.tpl
@@ -1,30 +1,29 @@
-<div class="mail-list-outside-wrapper">
-	
 
-		
-	<div class="media">
-		<div class="media-left">
-			<a href="{{$from_url}}">
-				<img class="media-object" src="{{$from_photo}}" alt="{{$from_name}}" style="min-width:80px; min-height:80px; width:80px; height:80px; max-width:80px; max-height:80px;" />
-			</a>
-		</div>
-		<div class="media-body">
-			<div class="text-muted time ago pull-right" title="{{$date}}">{{$ago}}</div>
-			
-			<h5 class="media-heading">{{$from_name}}</h5>
-			<a href="message/{{$id}}">
-				<h4>{{$subject}}</h4>
-			</a>
-			<a href="message/dropconv/{{$id}}" onclick="return confirmDelete();"  title="{{$delete}}" class="close pull-right" onmouseover="imgbright(this);" onmouseout="imgdull(this);" >&times;</a>
-			<p class="text-muted">{{$count}}</p>
+<li>
+	<div class="mail-list-outside-wrapper">
+
+		<div class="media">
+			<div class="media-left contact-photo-wrapper">
+				<a href="{{$from_url}}">
+					<img class="media-object" src="{{$from_photo}}" alt="{{$from_name}}" />
+				</a>
+			</div>
+			<div class="media-body">
+				<div class="text-muted time ago pull-right" title="{{$date}}">{{$ago}}</div>
+
+				<h4 class="media-heading">{{$from_name}}</h4>
+				<div class="mail-list-subject"><a href="message/{{$id}}">{{$subject}}</a></div>
+				<a href="message/dropconv/{{$id}}" onclick="return confirmDelete();"  title="{{$delete}}" class="close pull-right" onmouseover="imgbright(this);" onmouseout="imgdull(this);" >&times;</a>
+				<p class="text-muted">{{$count}}</p>
+			</div>
+
 		</div>
 
+
+
 	</div>
+	<div class="mail-list-delete-end"></div>
 
+	<div class="mail-list-outside-wrapper-end"></div>
 
-	
-</div>
-<div class="mail-list-delete-end"></div>
-
-<div class="mail-list-outside-wrapper-end"></div>
-
+</li>
\ No newline at end of file
diff --git a/templates/message_side.tpl b/templates/message_side.tpl
new file mode 100644
index 000000000..88fe8ea42
--- /dev/null
+++ b/templates/message_side.tpl
@@ -0,0 +1,12 @@
+<div id="message-sidebar" class="widget">
+	<div id="message-new"><a href="{{$new.url}}" accesskey="m" class="{{if $new.sel}}newmessage-selected{{/if}}">{{$new.label}}</a> </div>
+
+	{{if $tabs}}
+	<div id="message-preview" class="panel panel-default">
+		<ul class="media-list">
+		{{$tabs}}
+		</ul>
+	</div>
+	{{/if}}
+
+</div>
diff --git a/templates/msg-header.tpl b/templates/msg-header.tpl
index 6645a4a74..8d648d89a 100644
--- a/templates/msg-header.tpl
+++ b/templates/msg-header.tpl
@@ -58,6 +58,7 @@ else
 		//var objDiv = document.getElementById("mail-conversation");
 		//objDiv.scrollTop = objDiv.scrollHeight;
 		$('#mail-conversation').perfectScrollbar();
+		$('#message-preview').perfectScrollbar();
 		$('#mail-conversation').scrollTop($('#mail-conversation')[0].scrollHeight);