diff --git a/broadcast_module/templates/broadcasts/event_card.html b/broadcast_module/templates/broadcasts/event_card.html
index 3297ed9..8da199c 100644
--- a/broadcast_module/templates/broadcasts/event_card.html
+++ b/broadcast_module/templates/broadcasts/event_card.html
@@ -6,13 +6,20 @@
       <div class="flex items-center gap-3">
         <div class="avatar">
           <div class="w-10 h-10 rounded-full overflow-hidden">
-
             {% if event.user.profile and event.user.profile.avatar_url %}
-              <img src="{{ event.user.profile.avatar_url.url }}" alt="{{ event.user.profile.display_name }}">
+              <img src="{{ event.user.profile.avatar_url.url }}"
+                   class="w-10 h-10 rounded-full object-cover"
+                   alt="{{ event.user.username }}">
             {% elif event.author_avatar_url %}
-              <img src="{{ event.author_avatar_url }}" alt="{{ event.author_display_name }}">
+              <img src="{{ event.author_avatar_url }}"
+                   class="w-10 h-10 rounded-full object-cover"
+                   alt="{{ event.author_display_name|default:event.user.username }}">
             {% else %}
-              <img src="{% static 'images/default-avatar.png' %}" alt="{{ event.user.username }}">
+              <div class="w-10 h-10 rounded-full bg-primary text-primary-content flex items-center justify-center">
+                <span class="text-sm font-bold">
+                  {% firstof event.user.profile.display_name event.author_display_name event.user.username as dn %}{{ dn|slice:":1"|upper }}
+                </span>
+              </div>
             {% endif %}
           </div>
         </div>
diff --git a/broadcast_module/templates/broadcasts/event_list.html b/broadcast_module/templates/broadcasts/event_list.html
index 2be639f..a9923fc 100644
--- a/broadcast_module/templates/broadcasts/event_list.html
+++ b/broadcast_module/templates/broadcasts/event_list.html
@@ -28,7 +28,10 @@
         <div id="tab-indicator" class="absolute bottom-0 rounded-full transition-all duration-300 ease-out" 
              style="height:4px; left:0; width:0; background-color: #A3E635;"></div>
       </div>
-      <button class="btn btn-warning ml-4 max-sm:text-xs" onclick="showCreateModal()">+ Create New Broadcast</button>
+      <button class="btn btn-warning ml-4 btn-sm sm:btn-md" onclick="showCreateModal()">
+        <span class="hidden sm:inline">+ Create New Broadcast</span>
+        <span class="sm:hidden">+ New</span>
+      </button>
     </div>
 
     <div class="flex flex-col gap-6" id="events-container">
@@ -250,8 +253,11 @@ <h2 class="text-xl font-semibold ">Create New Broadcast</h2>
   })
   .then(response => {
     if (!response.ok) throw new Error(`Pin failed: ${response.status}`);
+    return response;
+  })
+  .then(() => {
+    window.location.reload();
   })
-  .then(() => loadEvents(currentTab))
   .catch(error => {
     console.error('Error pinning event:', error);
     alert('Failed to pin event.');
@@ -265,8 +271,11 @@ <h2 class="text-xl font-semibold ">Create New Broadcast</h2>
   })
   .then(response => {
     if (!response.ok) throw new Error(`Unpin failed: ${response.status}`);
+    return response;
+  })
+  .then(() => {
+    window.location.reload();
   })
-  .then(() => loadEvents(currentTab))
   .catch(error => {
     console.error('Error unpinning event:', error);
     alert('Failed to unpin event.');
diff --git a/broadcast_module/views.py b/broadcast_module/views.py
index 3852a95..35dcb2b 100644
--- a/broadcast_module/views.py
+++ b/broadcast_module/views.py
@@ -36,11 +36,19 @@ def broadcast_list(request) -> Any:
     else:
         suggested_followers = User.objects.order_by('?')[:2]
 
+    from django.db.models import Q
+    upcoming_event = Event.objects.filter(
+        Q(end_time__isnull=True) | Q(end_time__gte=now)
+    ).select_related(
+        'user', 'user__profile'
+    ).order_by('-is_pinned', 'start_time').first()
+
     return render(request, 'broadcasts/event_list.html', {
         'events': events_page.object_list,
         'initial_tab': 'trending',
         'has_next': events_page.has_next(),
-        'suggested_followers': suggested_followers
+        'suggested_followers': suggested_followers,
+        'upcoming_event': upcoming_event
     })
 
 
diff --git a/feeds_module/templates/components/suggested_followers_card.html b/feeds_module/templates/components/suggested_followers_card.html
index 810dddb..c9bbf6a 100644
--- a/feeds_module/templates/components/suggested_followers_card.html
+++ b/feeds_module/templates/components/suggested_followers_card.html
@@ -29,7 +29,7 @@ <h2 class="card-title text-lg font-bold">Friends Recommendation</h2>
             <p class="text-sm text-base-content/70">@{{ follower.username }}</p>
           </div>
         </div>
-        <a href="#" class="btn btn-sm btn-primary">Follow</a>
+        <a href="{% url 'profile_module:profile_detail' username=follower.username %}" class="btn btn-sm btn-primary">Follow</a>
       </div>
       {% endfor %}
     </div>
diff --git a/feeds_module/templates/components/upcoming_events_card.html b/feeds_module/templates/components/upcoming_events_card.html
index 12cf1d8..e86b8eb 100644
--- a/feeds_module/templates/components/upcoming_events_card.html
+++ b/feeds_module/templates/components/upcoming_events_card.html
@@ -1,7 +1,52 @@
 {% load static %}
 <div class="card w-full bg-base-100 shadow-sm overflow-hidden relative">
-    <div class="card-body z-10 text-white">
-      <h1 class="italic font-semibold text-xl mb-2">Upcoming Events</h1>
+  <div class="card-body z-10 text-white relative">
+    <h1 class="italic font-semibold text-xl mb-1">Upcoming Events</h1>
+    {% if upcoming_event %}
+      <p class="text-sm mb-2 line-clamp-2">
+        {{ upcoming_event.description|truncatechars:100 }}
+      </p>
+      <div class="flex">
+        <div class="w-full space-y-2">
+          <div class="flex gap-2">
+            <i data-lucide="calendar-days" class="w-6 h-6"></i>
+            {% if upcoming_event.start_time %}
+              {{ upcoming_event.start_time|date:"D, H:i" }} WIB
+            {% else %}
+              Today, 19:00 WIB
+            {% endif %}
+          </div>
+          <div class="flex gap-2">
+            <i data-lucide="map-pin" class="w-6 h-6"></i>
+            {{ upcoming_event.location_name|default:"TBA" }}
+          </div>
+        </div>
+        <div class="w-full space-y-2">
+          <div class="flex gap-2">
+            <i data-lucide="user" class="w-6 h-6"></i>
+            {{ upcoming_event.user.username }}
+          </div>
+          <div class="flex gap-2">
+            <i data-lucide="dollar-sign" class="w-6 h-6"></i>
+            {% if upcoming_event.fee %}
+              Rp{{ upcoming_event.fee|floatformat:0 }}
+            {% else %}
+              Free
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-end">
+        <a
+          href="{{ upcoming_event.rsvp_url }}"
+          target="_blank"
+          class="btn btn-primary bg-lime-500 border-lime-500 hover:bg-lime-600 hover:border-lime-600 text-white"
+          onclick="{% if upcoming_event.pk %}postClick('{{ upcoming_event.pk }}'){% endif %}"
+        >
+          Join Event
+        </a>
+      </div>
+    {% else %}
       <div class="flex">
         <div class="w-full space-y-2">
           <div class="flex gap-2">
@@ -26,16 +71,19 @@ <h1 class="italic font-semibold text-xl mb-2">Upcoming Events</h1>
       </div>
       <div class="flex justify-end">
         <button
-          type="submit"
+          type="button"
           class="btn btn-primary bg-lime-500 border-lime-500 hover:bg-lime-600 hover:border-lime-600 text-white"
         >
           Join Event
         </button>
       </div>
-    </div>
-    <img
-      src="{% static 'images/latest-bg.webp' %}"
-      alt="bg"
-      class="absolute w-full h-full object-cover scale-105"
-    />
-  </div>
\ No newline at end of file
+    {% endif %}
+  </div>
+
+  <div class="absolute inset-0 bg-black/25 z-[5]"></div>
+  <img
+    src="{% static 'images/latest-bg.webp' %}"
+    alt="bg"
+    class="absolute w-full h-full object-cover scale-105"
+  />
+</div>
\ No newline at end of file