diff --git a/mail/templates/mobile/app.css b/mail/templates/mobile/app.css
index f1fe0a50e1..3297efffb4 100644
--- a/mail/templates/mobile/app.css
+++ b/mail/templates/mobile/app.css
@@ -916,7 +916,7 @@ body {
   /*height: 20px !important;*/
 }
 #mail-index div#mail-index_nm tr.mail td img {
-  height: 12px;
+  max-height: 50px;
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
@@ -1891,6 +1891,13 @@ tr.forwarded span.status_img {
   font-size: 12px;
   font-family: Arial;
 }
+.bodypreview {
+  font-size: 10px;
+  font-style: italic;
+  font-weight: normal;
+  font-family: Arial;
+  color: grey;
+}
 TR.sieveRowActive {
   font-size: 11px;
   height: 20px;
@@ -2599,7 +2606,7 @@ div.mailComposeHeaderSection > table {
   transition: all 0.1s ease-out;
 }
 /* tablets and smartphones  */
-@media only screen and (max-device-width: 1024px) {
+@media all {
   div.mailDisplayContainer {
     margin-top: 30px;
     margin-left: 0;
@@ -2877,6 +2884,7 @@ div.mailComposeHeaderSection > table {
   }
   #mail-index table.egwGridView_outer tbody tr span.status_img {
     padding: 0 2px 2px 0;
+    display: inline;
   }
   #mail-index table.egwGridView_outer tbody tr span.deleted.status_img {
     background-image: url(images/kmmsgdel.png);
@@ -2899,4 +2907,14 @@ div.mailComposeHeaderSection > table {
   #mail-index table.egwGridView_outer tbody tr span.forwarded.status_img {
     background-image: url(images/kmmsgforwarded.png);
   }
+  #mail-index table.egwGridView_outer tbody tr span.bodypreview {
+    max-height: 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-left: 2px;
+    font-style: normal;
+    font-size: 8pt;
+    padding-top: 5px;
+  }
 }
diff --git a/mail/templates/mobile/app.less b/mail/templates/mobile/app.less
index 578e48c4df..c05c4f2fcc 100644
--- a/mail/templates/mobile/app.less
+++ b/mail/templates/mobile/app.less
@@ -18,7 +18,7 @@
 @import (less) "../pixelegg/app.css";
 
 /* tablets and smartphones  */
-@media only screen and (max-device-width:1024px) {
+@media all {
 	div.mailDisplayContainer{
 		margin-top: 30px;
 		margin-left:0;
@@ -316,7 +316,8 @@
 					text-decoration : line-through;
 				}
 				span.status_img {
-				padding:0 2px 2px 0;
+					padding:0 2px 2px 0;
+					display:inline;
 				}
 				span.deleted.status_img {
 					background-image: url(images/kmmsgdel.png);
@@ -339,6 +340,16 @@
 				span.forwarded.status_img {
 					background-image: url(images/kmmsgforwarded.png);
 				}
+				span.bodypreview {
+					max-height: 12px;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					padding-left: 2px;
+					font-style: normal;
+					font-size: 8pt;
+					padding-top: 5px;
+				}
 			}
 		}
 	}
diff --git a/mail/templates/mobile/index.xet b/mail/templates/mobile/index.xet
index 8bc0d5070d..494dad5c3b 100644
--- a/mail/templates/mobile/index.xet
+++ b/mail/templates/mobile/index.xet
@@ -21,6 +21,7 @@
 							<description  class="status_img $row_cont[class]"/>
 							<description id="${row}[subject]" no_lang="1" class="$row_cont[class]" />
 						</hbox>
+						<description id="${row}[bodypreview]" no_lang="1" class='et2_label bodypreview'/>
 					</vbox>
 					<vbox>
 						<hbox>
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index 0dac6b2c73..cb605057aa 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -904,7 +904,7 @@ body {
   /*height: 20px !important;*/
 }
 #mail-index div#mail-index_nm tr.mail td img {
-  height: 12px;
+  max-height: 50px;
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
@@ -922,7 +922,7 @@ body {
   background-repeat: repeat-x;
 }
 #mail-index div#mail-index_nm tr.mail div span {
-  max-height: 50px;
+  height: 12px;
   -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
@@ -1880,13 +1880,11 @@ tr.forwarded span.status_img {
   font-family: Arial;
 }
 .bodypreview {
-  white-space: normal !important;
-  max-height: 25px !important;
-  font-size: 11px;
+  font-size: 10px;
   font-style: italic;
-  font-weight : normal !important;
+  font-weight: normal;
   font-family: Arial;
-  color: grey  !important; 
+  color: grey;
 }
 TR.sieveRowActive {
   font-size: 11px;