diff --git a/src/components/EventItem.astro b/src/components/EventItem.astro
index 44f402e..41f2170 100644
--- a/src/components/EventItem.astro
+++ b/src/components/EventItem.astro
@@ -46,26 +46,34 @@ function dateEnd(str, days) {
 ---
 
 <div class="w3pn-event-item">
-    <div class="event-header flex gap-4">
-        <div class="w-28 text-right leading-normal">
-            <div>{dateFormat(item.date)}</div>
-            {item.days && item.days > 1 &&
-                <div>{dateFormat(dateEnd(item.date, item.days))}</div>
-            }
-        </div>
-        <div>
-            <div class="text-lg text-white">{nameRenderer(item)}</div>
-            <div class="flex gap-2">
-                <img src={`/flags/${item.country}.svg`} class="w-4" />
-                <div>
-                    {item.city}, {item.country.toUpperCase()}
-                    {item.coincidence &&
-                        <span>&nbsp; - {ccRenderer(item)}</span>
-                    }
+    <div class="event-header flex">
+        <div class="header-base sm:flex gap-4 grow px-3 py-2.5 sm:px-4 sm:py-3 cursor-pointer">
+            <div class="w-full sm:w-28 flex sm:block sm:text-right leading-normal">
+                <div class="">{dateFormat(item.date)}</div>
+                {item.days && item.days > 1 &&
+                    <div class="ml-1.5"> <span class="inline-block sm:hidden">- </span>{dateFormat(dateEnd(item.date, item.days))}</div>
+                }
+            </div>
+            <div>
+                <div class="text-lg text-white">{nameRenderer(item)}</div>
+                <div class="flex gap-2">
+                    <img src={`/flags/${item.country}.svg`} class="w-4" />
+                    <div>
+                        {item.city}, {item.country.toUpperCase()}
+                        {item.coincidence &&
+                            <span>&nbsp; - {ccRenderer(item)}</span>
+                        }
+                    </div>
                 </div>
             </div>
+            {item.links?.rsvp &&
+                <div class="py-1 grow text-right">
+                    <a href={item.links?.rsvp} class="button inverted"><button>Join</button></a>
+                </div>
+            }
+
         </div>
-        <div class="grow"></div>
+
     </div>
     <div class="detail hidden flex sm:gap-4">
         <div class="w-0 sm:w-28"></div>
@@ -75,7 +83,7 @@ function dateEnd(str, days) {
 
             <div class="mt-4 mb-2">
                 {item.links?.rsvp &&
-                    <a href={item.links.rsvp} class="button inverted"><button>More details & pre-registration</button></a>
+                    <a href={item.links.rsvp} class="button inverted"><button>More details & RSVP</button></a>
                 }
                 {item.links?.web &&
                     <a href={item.links.web} class="button inverted"><button>Website</button></a>
diff --git a/src/pages/events.astro b/src/pages/events.astro
index 37cbbd1..336c6e6 100644
--- a/src/pages/events.astro
+++ b/src/pages/events.astro
@@ -60,9 +60,12 @@ for (const year of pastYears.reverse()) {
 	</div>
 
 	<script>
-		document.querySelectorAll('.event-header').forEach((el) => {
-			el.addEventListener('click', () => {
-				const detail = el.parentElement.querySelector('.detail')
+		document.querySelectorAll('.event-header .header-base').forEach((el) => {
+			el.addEventListener('click', (ev) => {
+				if (ev.target.tagName === "BUTTON") {
+					return false;
+				}
+				const detail = el.parentElement.parentElement.querySelector('.detail')
 				document.querySelectorAll('.detail:not(.hidden)').forEach(e => (detail !== e ? e.classList.add('hidden') : null));
 		  		detail.classList.toggle('hidden');
 			});
diff --git a/src/styles/base.css b/src/styles/base.css
index 439d261..383cb90 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -91,13 +91,17 @@
   }
   
   .w3pn-event-item {
-    @apply w-full border border-[#202020] mb-3 hover:bg-[#0f0f0f]/30;
+    @apply w-full border border-[#202020] mb-3;
   }
 
-  .w3pn-event-item .event-header {
-    @apply px-4 py-3 cursor-pointer;
+  .w3pn-event-item .header-base:hover {
+    @apply bg-[#0f0f0f]/30;
   }
 
+  /*.w3pn-event-item .event-header {
+    @apply ;
+  }*/
+
   .w3pn-event-item .detail {
     @apply bg-[#0f0f0f] px-4 py-3;
   }