diff --git a/website/templates/_activity.html b/website/templates/_activity.html
index da197d6cc..62037276c 100644
--- a/website/templates/_activity.html
+++ b/website/templates/_activity.html
@@ -1,6 +1,21 @@
 {% load gravatar %}
 {% load static %}
-<div class="list-group-item activity-strip overflow-auto">
+
+<style>
+    .truncate-450 {
+      display: none;
+    }
+  
+    @media only screen and (max-width: 500px) {
+      .truncate-450 {
+        display: inline;
+      }
+      .truncate-100 {
+        display: none;
+      }
+    }
+</style>
+<div class="list-group-item activity-strip overflow-hidden">
     <div class="activity-strip-section">
         {% if activity.user.userprofile.avatar %}
             <img src="{{ activity.user.userprofile.avatar }}" width="100" class="img-responsive img-rounded" loading="lazy">
@@ -15,11 +30,25 @@
         {% endif %}
 
         <div class="info">
-            <a href="/domain/{{ activity.domain_name }}">
-                <img src="http://www.{{ activity.domain_name }}/favicon.ico" height="25"
-                     onerror="this.onerror=null; this.style.display='none';" loading="lazy">
+            <div class="flex overflow-hidden gap-3">
+                <a href="/domain/{{ activity.domain_name }} h-auto">
+                    <img src="http://www.{{ activity.domain_name }}/favicon.ico"
+                        onerror="this.onerror=null; this.style.display='none';" loading="lazy"
+                        class="h-[30px] w-[30px]"
+                        >
+                </a>
+                {% if activity.status == "open" %}
+                    <span class="label label-success text-capitalize !leading-loose">{{ activity.status }}</span>
+                {% else %}
+                    <span class="label label-danger text-capitalize !leading-loose">{{ activity.status }}</span>
+                {% endif %}
+                <span class="label label-info !leading-loose">{{ activity.get_label_display }}</span>
+            </div>
+
+            <a href="{{ activity.get_absolute_url }}">
+                <span class="truncate-450">{{ activity.description|truncatechars:60 }}</span>
+                <span class="truncate-100">{{ activity.description|truncatechars:100 }}</span>
             </a>
-            <a href="{{ activity.get_absolute_url }}">{{ activity.description|truncatechars:100 }}</a>
 
             <div class="small">
                 <a href="{{ activity.user.get_absolute_url }}" data-toggle="popover"
@@ -35,12 +64,6 @@
                     {{ activity.comments.all|length }} comments
                 {% endif %}
             </a>
-            {% if activity.status == "open" %}
-            <span class="label label-success text-capitalize !leading-loose">{{ activity.status }}</span>
-        {% else %}
-            <span class="label label-danger text-capitalize !leading-loose">{{ activity.status }}</span>
-        {% endif %}
-        <span class="label label-info !leading-loose">{{ activity.get_label_display }}</span>
         </div>
     </div>
     <div class="activity-screenshot">
@@ -60,3 +83,4 @@
         {% endif %}
     </div>
 </div>
+
diff --git a/website/templates/index.html b/website/templates/index.html
index cb7190258..1f8d2f734 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -256,16 +256,22 @@ <h1 class="page-sub-header">{% trans "Latest activity" %}</h1>
                 <div class="list-group">
                     {% if leaderboard %}
                     {% for leader in leaderboard %}
-                    <div class="list-group-item activity-strip" style="height: 80px; border: 1px solid #DDDDDD">
-                        {% if leader.socialaccount_set.all.0.get_avatar_url %}
-                        <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}" class="profileimage" width="50"
-                            height="50">
-                        {% else %}
-                        <img src="{% gravatar_url leader.email 50 %}" class="profileimage">
-                        {% endif %}
-                        <a href="/profile/{{ leader.username }}" class="text-capitalize leaderboard-name">{{leader.username|truncatechars:20 }}</a>
-                        <span class="label label-success leaderboard-rank">{{ forloop.counter|ordinal }}</span>
-                        <div class="badge leaderboard-points">{{ leader.total_score }} {% trans "Points" %}</div>
+                    <div class="list-group-item activity-strip flex overflow-hidden" style="height: 80px; border: 1px solid #DDDDDD">
+                        <span class="h-full w-1/3 flex justify-center items-center">
+                            {% if leader.socialaccount_set.all.0.get_avatar_url %}
+                            <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}" class="profileimage" width="50"
+                                height="50">
+                            {% else %}
+                            <img src="{% gravatar_url leader.email 50 %}" class="profileimage">
+                            {% endif %}
+                        </span>
+                        <span class="h-full w-2/3 flex flex-col items-center justify-center  overflow-hidden">
+                            <a href="/profile/{{ leader.username }}" class="text-capitalize w-full h-1/2 font-bold text-2xl">{{leader.username|truncatechars:20 }}</a>
+                            <span class=" w-full h-1/2 flex justify-start items-center gap-3">
+                                <div class="badge ">{{ leader.total_score }} {% trans "Points" %}</div>
+                                <span class="label label-success">{{ forloop.counter|ordinal }}</span>
+                            </span>
+                        </span>
                     </div>
                     {% endfor %}
                     {% else %}