diff --git a/support/doctype/support_ticket/support_ticket.css b/support/doctype/support_ticket/support_ticket.css
index 370d99c8514..dbfff3c65c4 100644
--- a/support/doctype/support_ticket/support_ticket.css
+++ b/support/doctype/support_ticket/support_ticket.css
@@ -1,16 +1,8 @@
-.communication {
-	border: 1px solid #aaa; 
-	border-top: 0px;
-	padding: 7px; 
-	background-color: #f2f2f2
-}
 
-.communication:hover {
-	background-color: #fffff0;
-}
-
-.communication:first-child {
-	border-top: 1px solid #aaa; 
+.comm-content {
+	border-top: 1px solid #ddd; 
+	padding: 10px;
+	display: none;
 }
 
 .support-ticket-wrapper {
diff --git a/support/doctype/support_ticket/support_ticket.js b/support/doctype/support_ticket/support_ticket.js
index 689ddbf0415..5185b9a56be 100644
--- a/support/doctype/support_ticket/support_ticket.js
+++ b/support/doctype/support_ticket/support_ticket.js
@@ -14,14 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-// threading structure
-// -------- orginal message --------
-// xoxoxoxo
-// -------- reply 1 --------
-// -------- reply 2 --------
-// xoxoxoxo
-// -------- new reply --------
-
 $.extend(cur_frm.cscript, {
 	onload: function(doc, dt, dn) {
 		//
@@ -56,9 +48,6 @@ $.extend(cur_frm.cscript, {
 		refresh_field('status');
 	},
 	
-	//
-	// make thread listing
-	//
 	make_listing: function(doc) {
 		var wrapper = cur_frm.fields_dict['thread_html'].wrapper;
 		$(wrapper)
@@ -73,17 +62,12 @@ $.extend(cur_frm.cscript, {
 			
 		comm_list.sort(function(a, b) { return new Date(a.modified) > new Date(b.modified) 
 			? -1 : 1 })
-				
-		$.each(comm_list, function(i, c) {
-			var comm = new erpnext.CommunicationView({
-				doc: c,
-				support_ticket: doc,
-				parent: wrapper
-			});
-			if(i==0) {
-				comm.toggle();
-			}
-		});
+		
+		new erpnext.CommunicationView({
+			list: comm_list,
+			parent: wrapper
+		})
+
 	},
 	
 	send: function(doc, dt, dn) {
@@ -131,36 +115,47 @@ $.extend(cur_frm.cscript, {
 
 erpnext.CommunicationView = Class.extend({
 	init: function(opts) {
+		this.comm_list = [];
 		$.extend(this, opts);
-		this.prepare();
 		this.make();
-		this.toggle();
-	},
-	prepare: function() {
-		//this.doc.when = comment_when(this.doc.modified);
-		this.doc.when = this.doc.modified;
-		if(this.doc.content.indexOf("<br>")== -1 && this.doc.content.indexOf("<p>")== -1) {
-			this.doc.content = this.doc.content.replace(/\n/g, "<br>");
-		}
-		this.doc.content = this.doc.content.split("=== In response to ===")[0];
-		this.doc.content = this.doc.content.split("-----Original Message-----")[0];
 	},
 	make: function() {
 		var me = this;
-		this.body = $(repl('<div class="communication" title="Click to Expand / Collapse">\
+		this.make_body();
+		$.each(this.list, function(i, d) {
+			me.prepare(d);
+			me.make_line(d);
+		});
+		// show first
+		this.comm_list[0].find('.comm-content').toggle(true);
+	},
+	make_body: function() {
+		this.body = $("<table class='table table-bordered table-hover table-striped'>").appendTo(this.parent);
+	},
+	prepare: function(doc) {
+		//doc.when = comment_when(this.doc.modified);
+		doc.when = doc.modified;
+		if(doc.content.indexOf("<br>")== -1 && doc.content.indexOf("<p>")== -1) {
+			doc.content = doc.content.replace(/\n/g, "<br>");
+		}
+		doc.email_address = doc.email_address.replace(/</, "&lt;").replace(/>/, "&gt;");
+		doc.content = doc.content.split("=== In response to ===")[0];
+		doc.content = doc.content.split("-----Original Message-----")[0];
+	},
+	make_line: function(doc) {
+		var me = this;
+		var comm = $(repl('<tr><td title="Click to Expand / Collapse">\
 				<p><b>%(email_address)s on %(when)s</b></p>\
-				<div class="comm-content" style="border-top: 1px solid #ddd; padding: 10px"></div>\
-			</div>', this.doc))
-			.appendTo(this.parent)
+				<div class="comm-content"></div>\
+			</td></tr>', doc))
+			.appendTo(this.body)
 			.css({"cursor":"pointer"})
 			.click(function() {
 				$(this).find(".comm-content").toggle();
 			});
-			
-		this.body.find(".comm-content").html(this.doc.content);
-	},
-	toggle: function() {
-		this.body.find(".comm-content").toggle();
+		
+		this.comm_list.push(comm);
+		comm.find(".comm-content").html(doc.content);
 	}
 })