diff --git a/clubhaus/homepage/templates/homepage/events.html b/clubhaus/homepage/templates/homepage/events.html
index 714873d..608636e 100644
--- a/clubhaus/homepage/templates/homepage/events.html
+++ b/clubhaus/homepage/templates/homepage/events.html
@@ -144,8 +144,8 @@
             </div>
 
             <!-- cards section -->
-            <div class="row align-items-md-stretch text-break" id="info">
-                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
+            <div class="row d-flex justify-content-around align-items-stretch text-break" id="info">
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3 flex-grow-1">
                     <div class="h-100 p-3 text-white bg-dark rounded-3">
                         <h2><i class="bi-clock display-2"></i></h2>
                         {% if next_event.date %}
@@ -164,21 +164,26 @@
                     </div>
                 </div>
 
-                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
+                {% if next_event.location %}
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3 flex-grow-1">
                     <div class="h-100 p-3 text-white bg-dark rounded-3">
                         <h2><i class="bi-pin-map display-2"></i></h2>
                         <p class="fs-2 fw-bold">{{ next_event.location|linebreaksbr }}</p>
                     </div>
                 </div>
+                {% endif %}
 
-                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
+                {% if next_event.beverages %}
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3 flex-grow-1">
                     <div class="h-100 p-3 text-white bg-dark rounded-3">
                         <h2><i class="bi-cup-straw display-2"></i></h2>
                         <p class="fs-2 fw-bold">{{ next_event.beverages|linebreaksbr }}</p>
                     </div>
                 </div>
+                {% endif %}
 
-                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3">
+                {% if next_event.food %}
+                <div class="col-lg-3 col-md-6 mb-lg-0 mb-md-4 mb-3 flex-grow-1">
                     <div class="h-100 p-3 text-white bg-dark rounded-3">
                         <h2>
                             <span class="material-symbols-outlined display-2">lunch_dining
@@ -187,6 +192,7 @@
                         <p class="fs-2 fw-bold">{{ next_event.food|linebreaksbr }}</p>
                     </div>
                 </div>
+                {% endif %}
             </div>
         </div>
     </main>