diff --git a/css/event_overview.css b/css/event_overview.css
index 4c70889..ca1a8f8 100644
--- a/css/event_overview.css
+++ b/css/event_overview.css
@@ -160,7 +160,9 @@
     flex: 1;
 }
 
-.event-date-time {
+.event-location,
+.event-date-time,
+.event-gast {
     display: inline-flex;
     gap: var(--space-0);
 }
@@ -369,26 +371,17 @@
     margin-bottom: 30px;
 }
 
-.host-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 999px;
-    background: var(--olive);
-    color: var(--butter-light);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-}
-
 .host-name {
-    font-weight: 500;
+    margin-left: 12px;
+    font-weight: 600;
+    letter-spacing: var(--ls-sm);
 }
 
+/*
 .host-role {
-    border: 1.5px solid var(--olive);
-    background: var(--olive);;
-    color: var(--butter-light);
+    border: 1.5px solid var(--olive-light);
+    background: var(--olive-light);;
+    color: var(--olive);
     border-radius: var(--radius-pill);
     font-family: var(--font-main);
     font-weight: 400;
@@ -396,7 +389,7 @@
     line-height: 1;
     letter-spacing: var(--ls-la);
     padding: var(--space-1) var(--space-20);
-}
+}*/
 
 .detail-gallery {
     grid-area: gallery;
@@ -616,7 +609,7 @@
 .detail-action-meta {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: 16px;
     flex-wrap: wrap;
 }
 
@@ -627,8 +620,8 @@
 }
 
 .detail-action-location img {
-    width: 16px;
-    height: 16px;
+    width: 18px;
+    height: 18px;
 }
 
 
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index 223fe7f..7c0ca4f 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -173,8 +173,9 @@ p {
 }
 
 /* Event-Beschrieb oberhalb von Eventtitel */
-.event-date-time,
 .event-location,
+.event-date-time,
+.event-gast,
 .profile-event-meta {
     color: var(--olive);
     font-family: var(--font-main);
@@ -277,7 +278,8 @@ p {
 
 
 /* Badge */
-.badge {
+.badge,
+.host-role {
     position: relative;
     display: inline-block;
     width: fit-content;
@@ -289,7 +291,8 @@ p {
     z-index: 0;
 }
 
-.badge::before {
+.badge::before,
+.host-role::before {
     content: "";
     position: absolute;
     inset: 0;
diff --git a/js/event_detail.js b/js/event_detail.js
index e0437f4..6d2b94f 100644
--- a/js/event_detail.js
+++ b/js/event_detail.js
@@ -8,7 +8,7 @@
     const detailContainer = document.getElementById('detail-view');
     const locationIconPath = 'assets/icon_location.svg';
     const calendarIconPath = 'assets/icon_calendar.svg';
-    const calendarIconPath = 'assets/icon_gast.svg';
+    const gastIconPath = 'assets/icon_gast.svg';
     const currentUser = getCurrentUser();
     
     // Read event id from query string (detail page deep-link support).
@@ -345,11 +345,16 @@
                 <section class="detail-hero">
                     <div class="detail-top-row">
                     <span class="event-location">
-                            <img src="${locationIconPath}" class="icon" alt="">
-                            ${event.location}
-                        </span>
-                        <span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime} | 
-                        ${confirmedGuests}/${totalGuests} Gäste <span class="event-location">
+                        <img src="${locationIconPath}" class="icon" alt="">${event.location}
+                    </span>
+                    
+                    <span class="event-date-time"> 
+                        <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
+                    </span>
+
+                    <span class="event-date-time"> 
+                        <img src="${gastIconPath}" class="icon" alt="">${confirmedGuests}/${totalGuests} 
+                    </span>
                     </div>
                     <h1 class="detail-title">${event.title}</h1>
                     <div class="event-meta-row detail-chip-row">
@@ -411,7 +416,16 @@
                                 <img src="${locationIconPath}" alt="">
                                 ${event.location}
                             </span>
-                            <span class="detail-action-meta-text">| ${displayDate} | ${displayTime} | ${confirmedGuests}/${totalGuests} Gäste</span>
+
+                            <span class="event-date-time detail-action-location">
+                                <img src="${calendarIconPath}" alt=""> ${displayDate} | ${displayTime}
+                            </span>
+
+                            <span class="event-gast detail-action-location">
+                                <img src="${gastIconPath}" alt="">
+                                ${confirmedGuests}/${totalGuests} 
+                            </span>
+                         
                         </small>
                         <strong>${event.title}</strong>
                     </div>
diff --git a/js/event_overview.js b/js/event_overview.js
index 0e9fbc7..8dbd04d 100644
--- a/js/event_overview.js
+++ b/js/event_overview.js
@@ -11,7 +11,8 @@
     const dateFilter = document.getElementById('date-filter');
     const locationIconPath = 'assets/icon_location.svg'; 
     const calendarIconPath = 'assets/icon_calendar.svg';
-    const calendarIconPath = 'assets/icon_gast.svg';
+    const gastIconPath = 'assets/icon_gast.svg';
+
 
     // -------------------------------------------------------------
     // In-memory state for fetched events and currently active category.
@@ -394,7 +395,7 @@
                         </span>
                         <span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
                         </span>
-                        <span class="event-date-time"> ${bookedSeats}/${totalCapacity} Gäste</span>
+                        <span class="event-gast"> <img src="${gastIconPath}" class="icon" alt="Gaeste Icon">${bookedSeats}/${totalCapacity} </span>
                     </div>
                     <h2>${event.title}</h2>
                     <div class="event-meta-row">