diff --git a/apps/web/src/app/add-event/AddEventModal.tsx b/apps/web/src/app/add-event/AddEventModal.tsx
index 3d5ae47..f5844b8 100644
--- a/apps/web/src/app/add-event/AddEventModal.tsx
+++ b/apps/web/src/app/add-event/AddEventModal.tsx
@@ -104,9 +104,9 @@ const AddEventModal: React.FC<AddEventModalProps> = ({ isOpen, onClose, editEven
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
       onClick={handleBackdropClick}
     >
-      <div className={`brand-panel w-full max-w-md rounded-2xl relative ${className}`}>
+      <div className={`brand-panel relative w-full max-w-md ${className}`}>
         <div className="p-6">
-          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.24em] text-[#D946EF]">
+          <p className="mb-2 eyebrow">
             {isEditing ? "Edit event" : "Manual event"}
           </p>
           <h3 className="mb-6 text-2xl font-bold text-white">
@@ -123,7 +123,7 @@ const AddEventModal: React.FC<AddEventModalProps> = ({ isOpen, onClose, editEven
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 placeholder="Team Meeting"
-                className="brand-input px-3 py-2"
+                className="brand-input"
                 required
               />
             </div>
@@ -137,7 +137,7 @@ const AddEventModal: React.FC<AddEventModalProps> = ({ isOpen, onClose, editEven
                 value={destination}
                 onChange={(e) => setDestination(e.target.value)}
                 placeholder="Technikum Wien or Hoechstaedtplatz 6, 1200 Wien"
-                className="brand-input px-3 py-2"
+                className="brand-input"
                 required
               />
             </div>
@@ -151,7 +151,7 @@ const AddEventModal: React.FC<AddEventModalProps> = ({ isOpen, onClose, editEven
                   type="date"
                   value={eventDate}
                   onChange={(e) => setEventDate(e.target.value)}
-                  className="brand-input px-3 py-2"
+                  className="brand-input"
                   required
                 />
               </div>
@@ -164,7 +164,7 @@ const AddEventModal: React.FC<AddEventModalProps> = ({ isOpen, onClose, editEven
                   type="time"
                   value={eventTime}
                   onChange={(e) => setEventTime(e.target.value)}
-                  className="brand-input px-3 py-2"
+                  className="brand-input"
                   required
                 />
               </div>
diff --git a/apps/web/src/app/calendar/BatchEditPanel.tsx b/apps/web/src/app/calendar/BatchEditPanel.tsx
index 6378bd7..013677f 100644
--- a/apps/web/src/app/calendar/BatchEditPanel.tsx
+++ b/apps/web/src/app/calendar/BatchEditPanel.tsx
@@ -67,9 +67,9 @@ export default function BatchEditPanel() {
   if (events.length === 0) return null;
 
   return (
-    <div className="brand-panel overflow-hidden rounded-2xl">
-      <div className="border-b border-white/10 p-4">
-        <p className="mb-1 text-xs font-semibold uppercase tracking-[0.24em] text-brand-fuchsia">Bulk action</p>
+    <div className="brand-panel overflow-hidden">
+      <div className="section-header">
+        <p className="mb-1 eyebrow">Bulk action</p>
         <h3 className="text-lg font-semibold text-white">Batch-edit destinations</h3>
         <p className="mt-1 text-sm text-[#F4F1EA]/55">
           Replace the destination on multiple events at once — useful when a calendar stores a room number but you need a full address.
@@ -80,14 +80,14 @@ export default function BatchEditPanel() {
         {/* Filters */}
         <div className="grid gap-3 sm:grid-cols-2">
           <div>
-            <label htmlFor="batch-source" className="mb-1 block text-xs font-semibold uppercase tracking-[0.18em] text-[#F4F1EA]/55">
+            <label htmlFor="batch-source" className="mb-1 block label-muted">
               Calendar source
             </label>
             <select
               id="batch-source"
               value={sourceFilter}
               onChange={(e) => { setSourceFilter(e.target.value); setApplied(null); }}
-              className="brand-input px-3 py-2 text-sm"
+              className="brand-input text-sm"
             >
               <option value="__all__">All sources ({events.length} events)</option>
               {sources.map((s) => (
@@ -99,7 +99,7 @@ export default function BatchEditPanel() {
           </div>
 
           <div>
-            <label htmlFor="batch-dest-filter" className="mb-1 block text-xs font-semibold uppercase tracking-[0.18em] text-[#F4F1EA]/55">
+            <label htmlFor="batch-dest-filter" className="mb-1 block label-muted">
               Current destination contains
             </label>
             <input
@@ -108,14 +108,14 @@ export default function BatchEditPanel() {
               value={destContains}
               onChange={(e) => { setDestContains(e.target.value); setApplied(null); }}
               placeholder="e.g. HS, Seminarraum, Room …"
-              className="brand-input px-3 py-2 text-sm"
+              className="brand-input text-sm"
             />
           </div>
         </div>
 
         {/* Preview */}
         <div>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-[#F4F1EA]/55">
+          <p className="mb-2 label-muted">
             Matched events ({matched.length})
           </p>
           {matched.length === 0 ? (
@@ -137,7 +137,7 @@ export default function BatchEditPanel() {
         {/* Replace with */}
         <div className="flex gap-3 items-end">
           <div className="flex-1">
-            <label htmlFor="batch-new-dest" className="mb-1 block text-xs font-semibold uppercase tracking-[0.18em] text-[#F4F1EA]/55">
+            <label htmlFor="batch-new-dest" className="mb-1 block label-muted">
               Replace destination with
             </label>
             <input
@@ -146,7 +146,7 @@ export default function BatchEditPanel() {
               value={newDestination}
               onChange={(e) => { setNewDestination(e.target.value); setApplied(null); }}
               placeholder="e.g. Universitätsplatz 3, 8010 Graz"
-              className="brand-input px-3 py-2 text-sm"
+              className="brand-input text-sm"
             />
           </div>
           <Button
diff --git a/apps/web/src/app/calendar/CalendarPanel.tsx b/apps/web/src/app/calendar/CalendarPanel.tsx
index 691df4a..6830608 100644
--- a/apps/web/src/app/calendar/CalendarPanel.tsx
+++ b/apps/web/src/app/calendar/CalendarPanel.tsx
@@ -54,8 +54,8 @@ const CalendarPanel: React.FC<CalendarPanelProps> = ({ className = "" }) => {
     }`;
 
   return (
-    <div className={`brand-panel overflow-hidden rounded-2xl ${className}`}>
-      <div className="border-b border-white/10 p-4">
+    <div className={`brand-panel overflow-hidden ${className}`}>
+      <div className="section-header">
         <div className="flex items-center justify-between">
           <h3 className="text-lg font-semibold text-white">Import Calendar</h3>
         </div>
diff --git a/apps/web/src/app/calendar/CalendarView.tsx b/apps/web/src/app/calendar/CalendarView.tsx
index 4c8adeb..12a8a05 100644
--- a/apps/web/src/app/calendar/CalendarView.tsx
+++ b/apps/web/src/app/calendar/CalendarView.tsx
@@ -40,14 +40,14 @@ const CalendarView: React.FC<CalendarViewProps> = ({ events, onDateSelect, selec
       <div className="mb-4 flex items-center justify-between">
         <button
           onClick={() => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))}
-          className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-white/[0.05] text-[#F4F1EA]/76 transition-colors hover:border-[#D946EF]/45 hover:text-white"
+          className="icon-btn"
         >
           &lt;
         </button>
         <h2 className="text-xl font-semibold text-white">{format(currentDate, "MMMM yyyy")}</h2>
         <button
           onClick={() => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))}
-          className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-white/[0.05] text-[#F4F1EA]/76 transition-colors hover:border-[#D946EF]/45 hover:text-white"
+          className="icon-btn"
         >
           &gt;
         </button>
@@ -140,7 +140,7 @@ const CalendarView: React.FC<CalendarViewProps> = ({ events, onDateSelect, selec
   };
 
   return (
-    <div className={`brand-panel rounded-2xl p-4 ${className}`}>
+    <div className={`brand-panel p-4 ${className}`}>
       {renderHeader()}
       {renderDays()}
       {renderCells()}
diff --git a/apps/web/src/app/calendar/DayEvents.tsx b/apps/web/src/app/calendar/DayEvents.tsx
index e2781c6..438818f 100644
--- a/apps/web/src/app/calendar/DayEvents.tsx
+++ b/apps/web/src/app/calendar/DayEvents.tsx
@@ -28,7 +28,7 @@ const DayEvents: React.FC<DayEventsProps> = ({ events, date, originStation, clas
 
   if (filteredEvents.length === 0) {
     return (
-      <div className={`brand-panel rounded-2xl px-4 py-8 text-center text-[#F4F1EA]/60 ${className}`}>
+      <div className={`brand-panel px-4 py-8 text-center text-[#F4F1EA]/60 ${className}`}>
         <p>No events scheduled for {format(date, "MMMM d, yyyy")}</p>
       </div>
     );
diff --git a/apps/web/src/app/calendar/UrlTab.tsx b/apps/web/src/app/calendar/UrlTab.tsx
index f087443..7ff219f 100644
--- a/apps/web/src/app/calendar/UrlTab.tsx
+++ b/apps/web/src/app/calendar/UrlTab.tsx
@@ -39,7 +39,7 @@ const UrlTab: React.FC<UrlTabProps> = ({ onLoadCalendar, loading, error, classNa
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             placeholder="https://example.com/calendar.ics"
-            className="brand-input px-3 py-2"
+            className="brand-input"
             required
           />
         </div>
diff --git a/apps/web/src/app/calendar/page.tsx b/apps/web/src/app/calendar/page.tsx
index d4a9ff1..9634c76 100644
--- a/apps/web/src/app/calendar/page.tsx
+++ b/apps/web/src/app/calendar/page.tsx
@@ -31,7 +31,7 @@ export default function CalendarPage() {
     <div className="mx-auto max-w-6xl p-4 sm:p-6 lg:p-8">
       <div className="mb-6 flex flex-col gap-4 rounded-2xl border border-white/10 bg-[#17112A]/55 p-5 shadow-[0_22px_70px_rgba(0,0,0,0.24)] backdrop-blur-xl sm:flex-row sm:items-end sm:justify-between">
         <div>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-[0.28em] text-brand-fuchsia">Calendar sync</p>
+          <p className="mb-2 eyebrow">Calendar sync</p>
           <h1 className="text-3xl font-extrabold text-white sm:text-4xl">Calendar</h1>
           <p className="mt-2 text-brand-light/66">View and manage every appointment from a single departure-focused calendar.</p>
         </div>
diff --git a/apps/web/src/app/event/BikeSection.tsx b/apps/web/src/app/event/BikeSection.tsx
index 00b036e..35a4e02 100644
--- a/apps/web/src/app/event/BikeSection.tsx
+++ b/apps/web/src/app/event/BikeSection.tsx
@@ -33,8 +33,8 @@ const BikeSection: React.FC<BikeSectionProps> = ({
   }
 
   return (
-    <div className={`mt-4 overflow-hidden rounded-xl border border-white/10 bg-black/16 ${className}`}>
-      <div className="border-b border-white/10 p-4">
+    <div className={`section-card mt-4 ${className}`}>
+      <div className="section-header">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-lg font-semibold text-white">Bicycle Route</h3>
diff --git a/apps/web/src/app/event/EventCard.tsx b/apps/web/src/app/event/EventCard.tsx
index 7ea6823..bb22edb 100644
--- a/apps/web/src/app/event/EventCard.tsx
+++ b/apps/web/src/app/event/EventCard.tsx
@@ -128,24 +128,24 @@ export default function EventCard({ event, originStation }: EventCardProps) {
 
   return (
     <>
-    <div className="brand-panel overflow-hidden rounded-2xl p-4 sm:p-5">
+    <div className="brand-panel overflow-hidden p-4 sm:p-5">
       <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <p className="mb-1 text-xs font-semibold uppercase tracking-[0.24em] text-brand-fuchsia">Next stop</p>
+          <p className="mb-1 eyebrow">Next stop</p>
           <h3 className="text-2xl font-bold text-white">{event.title}</h3>
         </div>
         <div className="flex items-start gap-2">
           <CountdownBadge countdown={countdown} status={status} />
           <button
             onClick={() => setEditOpen(true)}
-            className="rounded-lg border border-white/10 bg-white/[0.05] px-2.5 py-1.5 text-xs font-medium text-[#F4F1EA]/60 transition-colors hover:border-brand-fuchsia/40 hover:text-white"
+            className="ghost-btn hover:border-brand-fuchsia/40 hover:text-white"
             aria-label="Edit event"
           >
             Edit
           </button>
           <button
             onClick={handleRemove}
-            className="rounded-lg border border-white/10 bg-white/[0.05] px-2.5 py-1.5 text-xs font-medium text-[#F4F1EA]/60 transition-colors hover:border-red-500/50 hover:text-red-400"
+            className="ghost-btn hover:border-red-500/50 hover:text-red-400"
             aria-label="Remove event"
           >
             Remove
@@ -155,11 +155,11 @@ export default function EventCard({ event, originStation }: EventCardProps) {
 
       <div className="mb-5 grid gap-3 sm:grid-cols-2">
         <div className="brand-panel-soft rounded-xl p-3">
-          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-light/42">Destination</p>
+          <p className="label-muted">Destination</p>
           <p className="mt-1 text-sm font-medium text-brand-light">{event.destination}</p>
         </div>
         <div className="brand-panel-soft rounded-xl p-3">
-          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-light/42">Appointment</p>
+          <p className="label-muted">Appointment</p>
           <p className="mt-1 text-sm font-medium text-brand-light">{format(event.eventTime, "EEE dd MMM yyyy HH:mm")}</p>
         </div>
       </div>
@@ -183,7 +183,7 @@ export default function EventCard({ event, originStation }: EventCardProps) {
             <span className="flex items-center justify-between gap-3">
               <span className="font-semibold text-white">{option.label}</span>
               {activeMode === option.id && (
-                <span className="rounded-full bg-brand-pink/20 px-2 py-0.5 text-xs font-semibold text-pink-100">
+                <span className="badge-pill bg-brand-pink/20">
                   Active
                 </span>
               )}
@@ -195,20 +195,20 @@ export default function EventCard({ event, originStation }: EventCardProps) {
 
       <div className="mb-4 grid gap-3 rounded-xl border border-white/10 bg-black/16 p-3 text-sm sm:grid-cols-3">
         <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-brand-light/42">Leave by</p>
-          <p className="mt-1 font-semibold text-white">
+          <p className="label-muted">Leave by</p>
+          <p className="stat-value">
             {departureTime ? format(departureTime, "HH:mm") : "Pending"}
           </p>
         </div>
         <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-brand-light/42">Arrive by</p>
-          <p className="mt-1 font-semibold text-white">
+          <p className="label-muted">Arrive by</p>
+          <p className="stat-value">
             {arrivalTime ? format(arrivalTime, "HH:mm") : format(new Date(event.eventTime.getTime() - arrivalBufferMinutes * 60_000), "HH:mm")}
           </p>
         </div>
         <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.16em] text-brand-light/42">Buffer</p>
-          <p className="mt-1 font-semibold text-white">
+          <p className="label-muted">Buffer</p>
+          <p className="stat-value">
             {arrivalBufferMinutes} min {calculatedMode ? `via ${calculatedMode}` : ""}
           </p>
         </div>
diff --git a/apps/web/src/app/event/JourneyList.tsx b/apps/web/src/app/event/JourneyList.tsx
index 9b19363..0e44ff9 100644
--- a/apps/web/src/app/event/JourneyList.tsx
+++ b/apps/web/src/app/event/JourneyList.tsx
@@ -92,7 +92,7 @@ const JourneyList: React.FC<JourneyListProps> = ({
                   {journey.cancelled ? "Cancelled" : journey.trains.join(", ")}
                 </span>
                 {index === 0 && (
-                  <span className="ml-2 rounded-full bg-brand-fuchsia/20 px-2 py-0.5 text-xs font-semibold text-pink-100">
+                  <span className="ml-2 badge-pill bg-brand-fuchsia/20">
                     Top
                   </span>
                 )}
diff --git a/apps/web/src/app/event/TrainSection.tsx b/apps/web/src/app/event/TrainSection.tsx
index 9205ae6..9ce7c84 100644
--- a/apps/web/src/app/event/TrainSection.tsx
+++ b/apps/web/src/app/event/TrainSection.tsx
@@ -47,8 +47,8 @@ const TrainSection: React.FC<TrainSectionProps> = ({
   walkError,
 }) => {
   return (
-    <div className={`overflow-hidden rounded-xl border border-white/10 bg-black/16 ${className}`}>
-      <div className="border-b border-white/10 p-4">
+    <div className={`section-card ${className}`}>
+      <div className="section-header">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-lg font-semibold text-white">Trains</h3>
diff --git a/apps/web/src/app/event/WalkingOption.tsx b/apps/web/src/app/event/WalkingOption.tsx
index 07b31fa..0d56c80 100644
--- a/apps/web/src/app/event/WalkingOption.tsx
+++ b/apps/web/src/app/event/WalkingOption.tsx
@@ -25,8 +25,8 @@ const WalkingOption: React.FC<WalkingOptionProps> = ({ walkRoute, walkLoading, w
   }
 
   return (
-    <div className={`overflow-hidden rounded-xl border border-white/10 bg-black/16 ${className}`}>
-      <div className="border-b border-white/10 p-4">
+    <div className={`section-card ${className}`}>
+      <div className="section-header">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-lg font-semibold text-white">Final Walk</h3>
diff --git a/apps/web/src/app/event/WienerLinienSection.tsx b/apps/web/src/app/event/WienerLinienSection.tsx
index 16078cf..51287b7 100644
--- a/apps/web/src/app/event/WienerLinienSection.tsx
+++ b/apps/web/src/app/event/WienerLinienSection.tsx
@@ -72,7 +72,7 @@ export default function WienerLinienSection({
         const stopDepartures = departuresByStop.get(stop.id) ?? [];
 
         return (
-          <div key={stop.id} className="mb-4 rounded-xl border border-white/10 bg-black/16 p-4 last:mb-0">
+          <div key={stop.id} className="section-card mb-4 p-4 last:mb-0">
             <h3 className="text-sm font-semibold text-white">{stop.name}</h3>
 
             {stopDepartures.length === 0 ? (
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 02f6218..bcd9859 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -66,6 +66,7 @@ body {
 
 .brand-panel {
   border: 1px solid rgba(244, 241, 234, 0.12);
+  border-radius: 1rem;
   background:
     linear-gradient(145deg, rgba(23, 17, 42, 0.92), rgba(11, 10, 24, 0.9)),
     rgba(23, 17, 42, 0.88);
@@ -84,6 +85,7 @@ body {
   border: 1px solid rgba(244, 241, 234, 0.14);
   background: rgba(255, 255, 255, 0.06);
   color: #F4F1EA;
+  padding: 0.5rem 0.75rem;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
 }
@@ -98,3 +100,43 @@ body {
   box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.16);
   background: rgba(255, 255, 255, 0.08);
 }
+
+/* ── Section containers ── */
+
+.section-card {
+  @apply overflow-hidden rounded-xl border border-white/10 bg-black/16;
+}
+
+.section-header {
+  @apply border-b border-white/10 p-4;
+}
+
+/* ── Typography utilities ── */
+
+.eyebrow {
+  @apply text-xs font-semibold uppercase tracking-[0.24em] text-brand-fuchsia;
+}
+
+.label-muted {
+  @apply text-xs font-semibold uppercase tracking-[0.16em] text-brand-light/42;
+}
+
+.stat-value {
+  @apply mt-1 font-semibold text-white;
+}
+
+/* ── Interactive elements ── */
+
+.icon-btn {
+  @apply inline-flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-white/[0.06] text-sm text-brand-light/80 transition-colors hover:border-brand-fuchsia/45 hover:bg-brand-fuchsia/12 hover:text-white focus:outline-none focus:ring-2 focus:ring-brand-fuchsia/60;
+}
+
+.ghost-btn {
+  @apply rounded-lg border border-white/10 bg-white/[0.05] px-2.5 py-1.5 text-xs font-medium text-brand-light/60 transition-colors;
+}
+
+/* ── Badges ── */
+
+.badge-pill {
+  @apply rounded-full px-2 py-0.5 text-xs font-semibold text-pink-100;
+}
diff --git a/apps/web/src/app/layout/Header.tsx b/apps/web/src/app/layout/Header.tsx
index f3d331e..0200bb4 100644
--- a/apps/web/src/app/layout/Header.tsx
+++ b/apps/web/src/app/layout/Header.tsx
@@ -68,7 +68,7 @@ const Header: React.FC<HeaderProps> = ({ className = "" }) => {
             <button
               onClick={toggle}
               aria-label="Toggle dark mode"
-              className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-white/[0.06] text-sm text-brand-light/80 transition-colors hover:border-brand-fuchsia/45 hover:bg-brand-fuchsia/12 hover:text-white focus:outline-none focus:ring-2 focus:ring-brand-fuchsia/60"
+              className="icon-btn"
             >
               {mounted && dark ? (
                 <svg aria-hidden="true" viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
@@ -84,7 +84,7 @@ const Header: React.FC<HeaderProps> = ({ className = "" }) => {
             <button
               onClick={() => setShowSettingsModal(true)}
               aria-label="Settings"
-              className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-white/[0.06] text-sm text-brand-light/80 transition-colors hover:border-brand-fuchsia/45 hover:bg-brand-fuchsia/12 hover:text-white focus:outline-none focus:ring-2 focus:ring-brand-fuchsia/60"
+              className="icon-btn"
             >
               <svg aria-hidden="true" viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5z" />
@@ -97,7 +97,7 @@ const Header: React.FC<HeaderProps> = ({ className = "" }) => {
       <AddEventModal isOpen={showAddEventModal} onClose={() => setShowAddEventModal(false)} />
       {showSettingsModal && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4 backdrop-blur-sm">
-          <div className="brand-panel relative w-full max-w-sm rounded-2xl p-6">
+          <div className="brand-panel relative w-full max-w-sm p-6">
             <button
               onClick={() => setShowSettingsModal(false)}
               className="absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-lg text-brand-light/50 transition-colors hover:bg-white/10 hover:text-white"
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 443908f..dcd0669 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -25,7 +25,7 @@ export default function Home() {
       <section className="mb-7 overflow-hidden rounded-2xl border border-white/10 bg-[#17112A]/55 p-5 shadow-[0_22px_70px_rgba(0,0,0,0.28)] backdrop-blur-xl sm:p-7">
         <div className="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
           <div>
-            <p className="mb-2 text-xs font-semibold uppercase tracking-[0.28em] text-brand-fuchsia">Departure desk</p>
+            <p className="mb-2 eyebrow">Departure desk</p>
             <h1 className="max-w-2xl text-3xl font-extrabold leading-tight text-white sm:text-5xl">
               Leave before the clock turns against you.
             </h1>
@@ -43,7 +43,7 @@ export default function Home() {
         </div>
       </section>
       {!nextEvent ? (
-        <div className="brand-panel mx-auto max-w-2xl rounded-2xl px-6 py-14 text-center">
+        <div className="brand-panel mx-auto max-w-2xl px-6 py-14 text-center">
           <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#8B5CF6] to-brand-pink text-2xl font-black text-white shadow-[0_16px_44px_rgba(178,60,255,0.4)]">
             T
           </div>