diff --git a/website/static/css/activity.css b/website/static/css/activity.css
index 4f6f62a97..8defc159c 100644
--- a/website/static/css/activity.css
+++ b/website/static/css/activity.css
@@ -1,30 +1,73 @@
-.activity-strip-section >img{
-		width: auto;
-		height: 100px;
-	}
+.activity-strip-section > img{
+    width: auto;
+    height: 100px;
+}
 
 .activity-screenshot img{
-	height:auto;
+    height: auto;
+}
+
+.activity-strip-section > div > .small{
+    position: relative;
+    top: 10px;
 }
 
+.more_info{
+    display: none;
+    cursor: pointer;
+}
 
+.text-trunc{
+    display: none;
+}
 
 @media only screen and (max-width: 450px){
+    .activity-strip .activity-strip-section{
+        width: 95%;
+        height: auto;	
+    }
+
+    .activity-strip{
+        height: 160px;
+    }
 
+    .activity-screenshot{
+        position: absolute;
+        top: 100px;
+    }
 
-	.activity-strip .activity-strip-section{
-		width: 95%;
-		height: auto;
-		
-		
-	}
-
-	.activity-strip{
-		height:auto;
-		overflow: auto;
-	}
-	.activity-screenshot{
-		position: absolute;
-		top:100px;
-	}
-}
\ No newline at end of file
+    .bug-type{
+        right: 0;
+    }
+
+    .activity-strip-section > div{
+	    overflow: auto;
+    }
+
+    .more_info{
+        display: block;
+        margin: 10px 0;
+        cursor: pointer;
+        color: #999;
+    }
+    
+    .activity-strip-section > div > .small{
+        display: none;
+    }
+	
+	.text-trunc{
+        display: block;
+        margin-top: 10px;
+    }
+	
+	.text-trunc:first-letter{
+        text-transform: uppercase;
+    }
+}
+
+@media only screen and (min-width: 400px){
+    .bug-type{
+        position: relative;
+        right: 0
+    }
+}
diff --git a/website/static/js/activity.js b/website/static/js/activity.js
new file mode 100644
index 000000000..42425bebb
--- /dev/null
+++ b/website/static/js/activity.js
@@ -0,0 +1,33 @@
+$(document).ready(function(){
+	$('.text-trunc').each(function(index, ele){
+		var text = $(ele).siblings('.small').text().trim() 
+		var actor = /^[^\s]+/.exec(text)
+		var rest = text.slice(actor[0].length).trim().substring(0, 20).split(" ").slice(0, -1).join(" ") + "...";
+		$(ele).text(actor[0]+ ' '+rest);
+	})
+
+	$('.more_info').click(function(){
+		if($(this)[0]==$('.open')[0]){
+			close_panel()
+			return;
+		}
+        close_panel()
+		$(this).html("<a>See less</a>")
+		$(this).parent().animate({'height':'200px'})
+		$(this).parent().parent().animate({'height': '200px'})
+		$(this).parent().parent().parent().animate({'height': '200px'})
+		$(this).siblings('.text-trunc').hide()
+		$(this).siblings('.small').show()
+		$(this).addClass('open')
+	})
+
+	function close_panel(){
+		$('.open').html('<a>See more</a>')
+		$('.open').parent().animate({'height':'160px'})
+		$('.open').parent().parent().animate({'height': '160px'})
+		$('.open').parent().parent().parent().animate({'height': '160px'})
+		$('.open').siblings('.small').hide()
+		$('.open').siblings('.text-trunc').show()
+		$('.open').removeClass('open')	
+	}
+})
diff --git a/website/templates/_activity.html b/website/templates/_activity.html
index b150edb45..97523616f 100644
--- a/website/templates/_activity.html
+++ b/website/templates/_activity.html
@@ -8,7 +8,7 @@
             <img src="{% gravatar_url activity.actor.email 100 %}" width="100" class="img-responsive img-rounded">
         {% endif %}
         
-        <div>
+        <div class="info">
             {% if activity.action_object %}
                 {% if activity.action_object.get_absolute_url %}
                     <a href="{{ activity.action_object.get_absolute_url }}">{{ activity.action_object }}</a>
@@ -34,7 +34,7 @@
                     <span class="label label-danger text-capitalize">{{activity.target.status}}</span>
                 {% endif %}                    
             {% endif %}
-
+            <div class="text-trunc"></div>
             <div class="small">
                 {% if activity.actor.get_absolute_url %}
                     <a href="{{ activity.actor.get_absolute_url }}" class="text-capitalize">
@@ -47,6 +47,7 @@
                 <a href="//{{ activity.target.domain_name }}">{{ activity.target.domain_name }}</a>
                 <span class="label label-info bug-type">{{activity.target.get_label_display}}</span>
             </div>
+            <div class="more_info"><a>See More </a></div>
         </div>
     </div>
 
diff --git a/website/templates/index.html b/website/templates/index.html
index 40c00861b..6a7a871ac 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -7,7 +7,7 @@
 
 {% block content %}
     <script src="{% static "js/jquery.validate.js" %}"></script>
-    
+    <script src="{% static 'js/activity.js' %}"></script>    
     <section class="hero">
         <div class="heading">
             <h1 class="page-header">Find Bugs, Win Points and Prizes</h1>
@@ -22,7 +22,6 @@ <h1 class="page-header">Find Bugs, Win Points and Prizes</h1>
             </ul>
         </div>
     </section>
-
     <div class="row icon-row">
         <div class="col-sm-4">
             <div class="mega-block no-shadow">