diff --git a/css/event_create.css b/css/event_create.css
index 5adf8a3..84a1a33 100644
--- a/css/event_create.css
+++ b/css/event_create.css
@@ -215,7 +215,7 @@ textarea:focus {
 .option-card {
   position: relative;
   display: grid;
-  padding: 1.25rem;
+  padding: var(--space-31);
   border: 1.5px solid var(--olive-light);
   border-radius: var(--radius-md); 
   background: var(--butter-light);
@@ -241,11 +241,6 @@ textarea:focus {
   background: var(--olive-light);
 }
 
-/*
-.option-card:has(input:checked) small {
-  color: rgba(247, 246, 230, 0.88);
-}*/
-
 .option-card--invalid {
   border-color: var(--tomato) !important;
   box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
@@ -344,7 +339,7 @@ textarea:focus {
 }
 
 .error-message {
-  order: -1;              /* nach oben verschieben */
+  order: -1;  /* nach oben verschieben */
   text-align: center; 
   width: 100%;
 }
@@ -368,7 +363,7 @@ textarea:focus {
 .progress {
   flex: 1;
   height: 0.3rem;
-  background: var(--olive-lightg);
+  background: var(--olive-light);
   border-radius: var(--radius-sm);
   overflow: hidden;
 }
@@ -523,15 +518,6 @@ textarea:focus-visible {
     align-items: stretch;
   }
 
-  .button--text {
-    justify-content: flex-start;
-  }
-
-  /*
-  .button--primary {
-    width: 100%;
-  */
-
   .event-flow-header {
     justify-content: flex-start;
   }
@@ -556,4 +542,4 @@ textarea:focus-visible {
   .option-grid--4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-}
+}
\ No newline at end of file
diff --git a/css/event_overview.css b/css/event_overview.css
index 11c1ea7..e59ec8a 100644
--- a/css/event_overview.css
+++ b/css/event_overview.css
@@ -71,7 +71,6 @@
     color: var(--olive);
     font-size: 18px;
     letter-spacing: var(--ls-la);
-    font-weight: 500;
 }
 
 .filter-row {
@@ -84,32 +83,32 @@
 
 .category-group {
     display: flex;
-    gap: var(--space-2);
+    gap: var(--space-1);
     margin-bottom: 0;
     flex-wrap: wrap;
     flex: 1;
 }
 
 .category-item {
-    border: 2px solid var(--olive);
-    border-radius: var(--radius-md);
-    background: var(--butter);
-    color: var(--black);
+    border: 1.5px solid var(--tomato);
+    border-radius: var(--radius-pill);
+    background: var(--butter-light);
+    color: var(--tomato);
     line-height: 1.3;
-    padding: var(--space-1) var(--space-4);
+    padding: var(--space-1) var(--space-31);
     min-height: 40px;
     cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
+    transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .category-item:hover {
-    background: #faf8e8;
+    background: var(--tomato);
+    color: var(--butter-light);
 }
 
 .category-item.active {
-    border-color: transparent;
-    background: var(--olive);
-    color: var(--white);
+    background: var(--tomato);
+    color: var(--butter-light);
 }
 
 .meta-filter-group {
@@ -130,26 +129,26 @@
 
 .meta-filter select,
 .meta-filter input[type="date"] {
-    border: 2px solid var(--olive);
-    border-radius: var(--radius-md);
-    background: var(--butter);
+    border: 1.5px solid var(--tomato);
+    border-radius: var(--radius-sm);
+    background: var(--butter-light);
     color: var(--black);
-    line-height: 1.3;
     padding: var(--space-1) var(--space-4);
     min-height: 40px;
     height: 40px;
     box-sizing: border-box;
 }
 
+/*
 .meta-filter select:focus,
 .meta-filter input[type="date"]:focus {
     outline: 2px solid rgba(107, 107, 5, 0.35);
     outline-offset: 1px;
-}
+}*/
 
 .meta-filter input[type="date"] {
     color-scheme: light;
-    accent-color: var(--olive);
+    accent-color: var(--tomato);
 }
 
 .meta-filter input[type="date"]::-webkit-calendar-picker-indicator {
@@ -185,7 +184,7 @@
 
 .event-card {
     /* Core card container for every overview event entry. */
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--butter-light);
     border-radius: var(--radius-lg);
     padding: var(--space-5) 40px var(--space-4);
     display: flex;
@@ -193,7 +192,12 @@
     align-items: flex-start;
     gap: var(--space-6);
     cursor: pointer;
-    box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.event-card:hover {
+  box-shadow: var(--shadow-interaction);
+  transform: translateY(-3px);
 }
 
 .event-main {
@@ -202,29 +206,29 @@
 }
 
 .event-date-time {
-    margin: 0;
+    display: inline-flex;
+    gap: var(--space-0);
 }
 
 .event-top-row {
     /* Primary metadata line: location + date/time/guest counters. */
     display: flex;
     align-items: center;
-    gap: var(--space-5);
-    margin-bottom: var(--space-1);
+    gap: var(--space-4);
+    margin-bottom: var(--space-4);
     flex-wrap: wrap;
 }
 
 .event-location {
     display: inline-flex;
-    align-items: center;
-    gap: 6px;
+    gap: var(--space-0);
 }
 
-.event-location img {
-    width: 18px;
-    height: 18px;
+.event-location .icon path{
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
     display: block;
-    filter: brightness(0) saturate(100%) invert(35%) sepia(95%) saturate(501%) hue-rotate(22deg) brightness(96%) contrast(96%);
 }
 
 .event-meta-row {
@@ -283,7 +287,7 @@
     /* Sold-out visual state, intentionally high-contrast and always filled. */
     border: 2px solid var(--tomato);
     border-radius: var(--radius-pill);
-    color: var(--white);
+    color: var(--butter-light);
     background: var(--tomato);
     opacity: 1;
     font-weight: 600;
@@ -308,39 +312,6 @@
     background: var(--olive);
 }
 
-.btn-primary-register:hover,
-.btn-primary-register:focus-visible {
-    background: #575704;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 10px rgba(107, 107, 5, 0.28);
-}
-
-.btn-primary-register:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 6px rgba(107, 107, 5, 0.25);
-}
-
-.btn-primary-danger {
-    background: var(--tomato);
-}
-
-.btn-primary-danger:hover,
-.btn-primary-danger:focus-visible {
-    background: var(--tomato-dark);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28);
-}
-
-.btn-primary-danger:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25);
-}
-
-.btn-primary:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
 .btn-primary-own,
 .btn-primary-own:disabled {
     background: var(--olive-light);
@@ -396,7 +367,7 @@
     border: 0;
     border-radius: var(--radius-pill);
     background: var(--olive);
-    color: var(--white);
+    color: var(--butter-light);
     font-weight: 600;
     padding: 10px 22px;
     cursor: pointer;
@@ -440,7 +411,7 @@
 }
 
 .detail-top-row {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: var(--space-5);
     flex-wrap: wrap;
@@ -489,7 +460,7 @@
     height: 32px;
     border-radius: 999px;
     background: var(--olive);
-    color: var(--white);
+    color: var(--butter-light);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -607,7 +578,7 @@
     right: 0;
     border: 0;
     background: transparent;
-    color: var(--white);
+    color: var(--butter-light);
     font-size: 40px;
     line-height: 1;
     cursor: pointer;
@@ -656,7 +627,7 @@
     height: 34px;
     border-radius: 50%;
     background: var(--tomato);
-    color: var(--white);
+    color: var(--butter-light);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -705,18 +676,21 @@
 
 .detail-action-bar {
     /* Sticky bottom CTA bar with summary and booking controls. */
+    
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: var(--space-2);
-    background: rgba(255, 255, 255, 0.95);
-    border: 1px solid var(--olive-light);
+    background: var(--white);
+    backdrop-filter: blur(3px) saturate(140%);
+    -webkit-backdrop-filter: blur(3px) saturate(140%);
     border-radius: var(--radius-md);
+    box-shadow: var(--shadow-interaction);
+
     padding: 10px 14px;
     position: sticky;
     bottom: 18px;
-    z-index: 12;
-    box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
+    z-index: 1001;
 }
 
 .detail-action-summary {
@@ -897,10 +871,6 @@
         font-size: 15px;
     }
 
-    .category-group {
-        gap: 10px;
-    }
-
     .category-item {
         font-size: 15px;
         padding: 8px 14px;
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index 091435a..d065923 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -23,7 +23,7 @@
     --olive-dark: #545404;
     --olive-light: #C8CC7A;
     --butter: #F5F1BC;
-    --butter-light: #F7F6E6;
+    --butter-light: #FAF9F0;
     --white: #ffffff;
     --black: #141411;
     --brown: #66340d;
@@ -39,9 +39,11 @@
     --shadow-error: 0 0 0 2px rgba(255, 59, 48, 0.1);
 
     /* Spacing Scale > 1rem = 16px*/
+    --space-0: 0.25rem; /* 4px */
     --space-1: 0.5rem; /* 8px */
     --space-2: 0.75rem; /* 12px */
     --space-3: 1rem; /* 16px */
+    --space-31: 1.25rem; /* 20px */
     --space-4: 1.5rem; /* 24px */
     --space-5: 2rem; /* 32px */
     --space-6: 2.5rem; /* 40px */
@@ -79,7 +81,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: 2.5rem;
+    font-size: clamp(2.25rem, 5vw, 3rem);
     font-weight: 600;
     line-height: 120%;
     letter-spacing: var(--ls-sm);
@@ -88,6 +90,15 @@ h1 {
 }
 
 h2 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: var(--ls-sm);
+    color: var(--brown);
+    margin-bottom: 1.5rem;
+}
+
+h3 {
     font-size: 2rem;
     font-weight: 600;
     line-height: 120%;
@@ -122,6 +133,13 @@ p {
     margin: 0 auto;
 }
 
+.icon {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 20px;
+    display: inline-block;
+}
+
 /* Top Navigation */
 .top-nav-wrap {
     position: sticky;
@@ -234,7 +252,7 @@ p {
     font-family: var(--font-main);
     font-weight: 400;
     font-size: 1.25rem;
-    color: var(--butter);
+    color: var(--butter-light);
     cursor: pointer;
     text-decoration: none;
     transition: background-color 0.2s ease, border-color 0.2s ease;
@@ -245,6 +263,36 @@ p {
     border-color: var(--olive-dark);
 }
 
+.button-primary:disabled {
+    border-color: transparent;
+    background: transparent;
+    color: var(--olive-dark);
+    opacity: 0.6;
+    padding: 0.375rem 0 0.375rem 1.5rem;
+    cursor: not-allowed;
+}
+
+.button-primary-abmelden {
+    display: inline-block;
+    padding: 0.375rem 1.5rem;
+    background-color: var(--blue);
+    border: 1.5px solid var(--blue);
+    border-radius: var(--radius-lg);
+    font-family: var(--font-main);
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: var(--butter-light);
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.button-primary-abmelden:hover,
+.button-primary-abmelden:focus-visible {
+    background: var(--blue-dark);
+    border-color: var(--blue-dark);
+}
+
 .button-secondary {
     display: inline-block;
     padding: 0.375rem 1.5rem;
diff --git a/data/events.json b/data/events.json
index 270a96a..c8ce60a 100644
--- a/data/events.json
+++ b/data/events.json
@@ -85,7 +85,7 @@
   {
     "id": 3,
     "title": "Japanese Delight",
-    "location": "ZÜRICH",
+    "location": "Zürich",
     "address": "Limmatquai 92, 8001 Zürich",
     "date": "02. MAI. 2026",
     "time": "12:30 UHR",
diff --git a/event_overview.html b/event_overview.html
index 4698647..c1043ac 100644
--- a/event_overview.html
+++ b/event_overview.html
@@ -4,12 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Event-Overview</title>
-    
-    <!-- Globales Stylesheet -->
-    <link rel="stylesheet" href="css/stylesheet_global.css">
+
     <!-- Stylesheet für diese Seite-->
     <link rel="stylesheet" href="css/event_overview.css">
     <script src="js/navigation.js" defer></script>
+    
+    <!-- Globales Stylesheet -->
+    <link rel="stylesheet" href="css/stylesheet_global.css">
+
 </head>
 
 <body>
@@ -28,7 +30,7 @@
 <!-- Main content: page headline, filter controls and dynamic event list -->
 <main class="container">
     <!-- Page headline -->
-    <h1 class="overview-title">Events</h1>
+    <h1>Events</h1>
 
     <!-- Filter section: category chips + location/date filters -->
     <section class="filter-section">
@@ -36,11 +38,11 @@
         <div class="filter-row">
             <!-- Primary category filter buttons -->
             <div class="category-group">
-                <button class="category-item" type="button" data-cat="BRUNCH">BRUNCH</button>
-                <button class="category-item" type="button" data-cat="LUNCH">LUNCH</button>
-                <button class="category-item" type="button" data-cat="DINNER">DINNER</button>
-                <button class="category-item" type="button" data-cat="COFFEE">COFFEE</button>
-                <button class="category-item active" type="button" data-cat="ALLE">ALLE</button>
+                <button class="category-item active" type="button" data-cat="ALLE">Alle</button>
+                <button class="category-item" type="button" data-cat="BRUNCH">Brunch</button>
+                <button class="category-item" type="button" data-cat="LUNCH">Lunch</button>
+                 <button class="category-item" type="button" data-cat="COFFEE">Kaffee + Kuchen</button>
+                <button class="category-item" type="button" data-cat="DINNER">Dinner</button>
             </div>
 
             <!-- Secondary filters populated/handled by JavaScript -->
diff --git a/js/event_detail.js b/js/event_detail.js
index 7180880..6cc4e83 100644
--- a/js/event_detail.js
+++ b/js/event_detail.js
@@ -6,7 +6,8 @@
     // DOM entry point and shared asset path.
     // -------------------------------------------------------------
     const detailContainer = document.getElementById('detail-view');
-    const locationIconPath = 'assets/icon_location-pin.svg';
+    const locationIconPath = 'assets/icon_location.svg';
+    const calendarIconPath = 'assets/icon_calendar.svg';
     const currentUser = getCurrentUser();
     
     // Read event id from query string (detail page deep-link support).
@@ -347,11 +348,12 @@
 
                 <section class="detail-hero">
                     <div class="detail-top-row">
-                        <span class="event-location">
-                            <img src="${locationIconPath}" alt="">
+                    <span class="event-location">
+                            <img src="${locationIconPath}" class="icon" alt="">
                             ${event.location}
                         </span>
-                        <p class="event-date-time">${displayDate} | ${displayTime} | ${confirmedGuests}/${totalGuests} Gäste</p>
+                        <span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime} | 
+                        ${confirmedGuests}/${totalGuests} Gäste <span class="event-location">
                     </div>
                     <h1 class="detail-title">${event.title}</h1>
                     <div class="event-meta-row detail-chip-row">
diff --git a/js/event_overview.js b/js/event_overview.js
index b3bff24..d9b9055 100644
--- a/js/event_overview.js
+++ b/js/event_overview.js
@@ -9,7 +9,8 @@
     const filterButtons = document.querySelectorAll('.category-item');
     const locationFilter = document.getElementById('location-filter');
     const dateFilter = document.getElementById('date-filter');
-    const locationIconPath = 'assets/icon_location-pin.svg';
+    const locationIconPath = 'assets/icon_location.svg'; 
+    const calendarIconPath = 'assets/icon_calendar.svg';
 
     // -------------------------------------------------------------
     // In-memory state for fetched events and currently active category.
@@ -367,27 +368,29 @@
                 : '';
 
             const actionMarkup = isOwnEvent
-                ? '<button class="btn-primary btn-primary-own" type="button" data-registration-action="own" disabled>Dein Event!</button>'
+                ? '<button class="button-primary" type="button" data-registration-action="own" disabled>Dein Event!</button>'
                 : isRegistered
-                    ? '<button class="btn-primary btn-primary-danger" type="button" data-registration-action="unregister">Abmelden</button>'
+                    ? '<button class="button-primary button-primary-abmelden" type="button" data-registration-action="unregister">Abmelden</button>'
                     : isRegistrationClosed
-                        ? '<button class="btn-primary btn-primary-danger" type="button" data-registration-action="closed" disabled>Anmeldung geschlossen</button>'
+                        ? '<button class="button-primary" button-primary-abmelden" type="button" data-registration-action="closed" disabled>Anmeldung geschlossen</button>'
                     : isFull
                         ? ''
                         : !currentUser
-                            ? '<button class="btn-primary btn-primary-register" type="button" data-registration-action="login">Anmelden</button>'
-                            : '<button class="btn-primary btn-primary-register" type="button" data-registration-action="register">Anmelden</button>';
+                            ? '<button class="button-primary btn-primary-register" type="button" data-registration-action="login">Anmelden</button>'
+                            : '<button class="button-primary btn-primary-register" type="button" data-registration-action="register">Anmelden</button>';
 
             card.innerHTML = `
                 <div class="event-main">
                     <div class="event-top-row">
                         <span class="event-location">
-                            <img src="${locationIconPath}" alt="">
+                            <img src="${locationIconPath}" class="icon" alt="">
                             ${event.location}
                         </span>
-                        <p class="event-date-time">${displayDate} | ${displayTime} | ${bookedSeats}/${totalCapacity} Gäste</p>
+                        <span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
+                        </span>
+                        <span class="event-date-time"> ${bookedSeats}/${totalCapacity} Gäste</span>
                     </div>
-                    <h2 class="event-title">${event.title}</h2>
+                    <h3 class="event-title">${event.title}</h3>
                     <div class="event-meta-row">
                         <span class="event-tag">${event.category}</span>
                         <span class="event-tag">${event.diet}</span>
@@ -395,7 +398,7 @@
                     </div>
                 </div>
                 <div class="event-side${isFull ? ' event-side-full' : ''}">
-                    <span class="event-spots${isFull ? ' event-spots-full' : ''}">${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze FREI`}</span>
+                    <span class="event-spots${isFull ? ' event-spots-full' : ''}">${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze frei`}</span>
                     ${actionMarkup}
                 </div>
             `;