diff --git a/components/event-detail/EventDetail.jsx b/components/event-detail/EventDetail.jsx
index 19002ad93..8d6f224e6 100644
--- a/components/event-detail/EventDetail.jsx
+++ b/components/event-detail/EventDetail.jsx
@@ -138,6 +138,29 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
               }}
             />
           ) : null}
+          {isFullPage && (getGoogleCalendarUrl(event) || getIcsContent(event)) ? (
+            <div className="event-detail__calendar-links">
+              {getGoogleCalendarUrl(event) && (
+                <a
+                  className="event-detail__calendar-link"
+                  href={getGoogleCalendarUrl(event)}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Add to Google Calendar
+                </a>
+              )}
+              {getIcsContent(event) && (
+                <button
+                  className="event-detail__calendar-link"
+                  onClick={() => downloadIcs(event)}
+                  type="button"
+                >
+                  Download .ics
+                </button>
+              )}
+            </div>
+          ) : null}
         </div>
         {!isFullPage ? (
           <PlayLink href={event.linkUrl}>
@@ -155,27 +178,6 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
           >
             {getLiteral(`event-button:${event.type}`)} <IconArrowRight />
           </a>
-          <div className="event-detail__calendar-links">
-            {getGoogleCalendarUrl(event) && (
-              <a
-                className="event-detail__calendar-link"
-                href={getGoogleCalendarUrl(event)}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Add to Google Calendar
-              </a>
-            )}
-            {getIcsContent(event) && (
-              <button
-                className="event-detail__calendar-link"
-                onClick={() => downloadIcs(event)}
-                type="button"
-              >
-                Download .ics
-              </button>
-            )}
-          </div>
         </div>
       ) : null}
     </article>
diff --git a/components/event-detail/event-detail.scss b/components/event-detail/event-detail.scss
index 6527baf64..98a6bde7f 100644
--- a/components/event-detail/event-detail.scss
+++ b/components/event-detail/event-detail.scss
@@ -293,21 +293,25 @@
 }
 .event-detail__calendar-links {
   display: flex;
-  gap: 16px;
-  margin-top: 12px;
+  gap: 12px;
+  margin-top: 24px;
+  flex-wrap: wrap;
 }
 
 .event-detail__calendar-link {
-  font-size: 14px;
-  color: var(--color-fg-muted, #656d76);
-  text-decoration: underline;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
+  font-size: 0.875rem;
   font-family: inherit;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 100px;
+  padding: 8px 16px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.2s ease, color 0.2s ease;
 
   &:hover {
-    color: var(--color-fg-default, #1f2328);
+    background: rgba(255, 255, 255, 0.95);
+    color: #6e40c9;
   }
 }