diff --git a/ux.symfony.com/assets/styles/components/_Banner.scss b/ux.symfony.com/assets/styles/components/_Banner.scss
index 7e6f456480e..aef2d0c2e92 100644
--- a/ux.symfony.com/assets/styles/components/_Banner.scss
+++ b/ux.symfony.com/assets/styles/components/_Banner.scss
@@ -3,10 +3,26 @@
 // -----------------------------------------------------------------
 
 .Banner {
-  background: #0A0A0A;
-  color: #fff;
-  transition: transform 250ms linear;
+  --color-front: #fff;
+  --color-back: #0A0A0A;
+  --color-text: color-mix(in oklab, var(--color-front) 80%, var(--color-back) 20%);
+  --color-light: color-mix(in oklab, var(--color-front) 50%, var(--color-back) 50%);
+  
+  --space-block: .5rem;
+  --space-inline: 2rem;
+  --font-size: .8rem;
+
+  @media screen and (min-width: 768px) {
+    --font-size: .9rem;
+    --space-inline: 1rem;
+  }
+
+  background: var(--color-back);
+  color: var(--color-front);
+  z-index: 10;
+  position: relative;
 }
+
 .Banner + .App {
   position: relative;
 }
@@ -15,84 +31,102 @@
   transform: translateY(-100%);
 }
 
-.BannerInner {
+.Banner_inner {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  padding-block: .5rem;
-  gap: 1rem;
+  padding-block: var(--space-block);
+  gap: var(--space-inline);
   position: relative;
 }
 
-.BannerContent {
+.Banner::after {
+  height: 2px;
+  backdrop-filter: blur(4px);
+  width: 100%;
+  content: "";
+  background: rgb(255 255 255 / .1);
+}
+
+.Banner_content {
   flex: 1;
   display: flex;
-  flex-direction: column;
-  place-content: center;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
   gap: 0.25rem;
   text-wrap: balance;
 }
 
-.BannerText {
-  text-align: center;
+.Banner_text {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--font-size);
   line-height: 1.3;
-  font-weight: 400;
-  color: #fffd;
-}
-.BannerText em {
-  text-decoration: underline;
-  text-underline-offset: .25rem;
-  font-weight: 600;
-  font-style: normal;
+  font-weight: 300;
+  color: var(--color-text, var(--color-front));
+  .Icon {
+    transform: translateY(-12%);
+    margin-inline: calc(var(--space-inline) / 2);
+  }
 }
 
-.BannerAction {
-  display: grid;
-  place-content: center;
-  justify-content: center;
+.Banner_link {
+  color: var(--color-front);
+  font-weight: 400;
+  transition: all 300ms ease-out;
+  transform: none;
+  display: inline-flex;
+  text-decoration: underline 1px;
+  text-underline-offset: 0.2em;
+  text-decoration-color: var(--color-back);
+  
+  &:hover {
+    transition: all 150ms ease-out;
+    transform: translateY(-6%);
+    text-decoration-color: var(--color-text);
+    text-underline-offset: 0.3em;
+  }
+  
+  strong {
+    font-weight: 600;
+  }
 }
 
-.BannerButton {
+.Banner_cta {
   display: flex;
+  flex-direction: row;
+  gap: .75em;
   align-items: center;
-  padding: .15em .5em;
-  align-self: center;
-  color: #fffc;
-  font-size: .9em;
-  font-family: var(--font-family-title);
-  gap: .35em;
-  justify-content: center;
-  background: linear-gradient(#000e, #000d) padding-box,
-  linear-gradient(90deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%) border-box;
-  border-radius: 2em;
-  border: 2px solid transparent;
-  transition: all 250ms linear;
-}
-.BannerButton:hover {
-  color: #fff;
-}
-.BannerButton:after {
-  content: "";
-  position: absolute;
-  inset: 0;
-}
+  flex-wrap: nowrap;
+  flex-shrink: 0;
 
-.BannerButton svg {
-  width: 1em;
-  height: 1em;
-  color: currentColor;
-  transition: all 250ms linear;
-}
-.BannerButton:hover svg {
-  transform: scale(1.1);
+  span {
+    transition: all 350ms ease-out;
+  }
+
+  &:hover {
+    span {
+      transition: all 150ms linear;
+      transform: translateY(-0.1em);
+    }
+  }
+
+  .Icon {
+    width: 1.5em;
+    height: 1.5em;
+  }
 }
-@media screen and (min-width: 768px) {
-  .BannerInner {
-    padding: .5rem 2rem;
+
+@media screen and (max-width: 768px) {
+  .Banner_text .Icon,
+  .Banner_text .more, 
+  .Banner_cta span {
+    display: none;
   }
-  .BannerText {
-    font-size: .9rem;
+  .Banner_cta:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 100;
   }
 }
diff --git a/ux.symfony.com/assets/styles/sections/_nav.scss b/ux.symfony.com/assets/styles/sections/_nav.scss
index f0a59f060f3..d7e2040b141 100644
--- a/ux.symfony.com/assets/styles/sections/_nav.scss
+++ b/ux.symfony.com/assets/styles/sections/_nav.scss
@@ -61,7 +61,7 @@
 
 @media (max-width: 859px) {
   .AppNav_menu {
-    transform: translateY(-20%);
+    transform: translateY(-40%);
     opacity: 0;
     z-index: -1;
     transition: transform 350ms ease-out;
diff --git a/ux.symfony.com/templates/_banner.html.twig b/ux.symfony.com/templates/_banner.html.twig
index eb02f25b1d0..e54a457e499 100644
--- a/ux.symfony.com/templates/_banner.html.twig
+++ b/ux.symfony.com/templates/_banner.html.twig
@@ -1,15 +1,22 @@
-<aside class="Banner">
-    <div class="container-xxl">
-        <div class="BannerInner">
-            <div class="BannerContent">
-                <p class="BannerText">
-                    Ryan is the lead maintainer of Symfony UX. Now he <em>needs your help</em>.
+<aside class="Banner" style="--color-back: {{ color_back ?? '#D5054EFF' }}; --color-front: #ffffffdd;">
+    <div class="container-xxl px-4 px-md-5">
+        <div class="Banner_inner">
+            <div class="Banner_content">
+                <p class="Banner_text">
+                    <span>
+                        Get ready for an unforgettable
+                        <a href="https://live.symfony.com/2025-chicago/" class="Banner_link"><strong>SymfonyDay Chicago 2025</strong></a>!
+                        <twig:ux:icon name="si:heart-fill" />
+                    </span>
+                    <span class="more">
+                        Join us for a full day dedicated to
+                        <a href="https://gofund.me/44ecdba2" rel="external" class="Banner_link">Ryan Weaver</a>
+                        & Symfony UX!
+                    </span>
                 </p>
-            </div>
-            <div class="BannerAction">
-                <a href="https://gofund.me/44ecdba2" class="BannerButton" rel="external">
-                    <twig:ux:icon name="heart" aria-hidden="true"/>
-                    Donate
+                <a href="https://live.symfony.com/2025-chicago/" class="Banner_cta" rel="external">
+                    <twig:ux:icon name="ion:ticket" />
+                    <span>Get Your Tickets!</span>
                 </a>
             </div>
         </div>
diff --git a/ux.symfony.com/templates/ux_packages/chartjs.html.twig b/ux.symfony.com/templates/ux_packages/chartjs.html.twig
index 746bde80dc1..b13f1e56366 100644
--- a/ux.symfony.com/templates/ux_packages/chartjs.html.twig
+++ b/ux.symfony.com/templates/ux_packages/chartjs.html.twig
@@ -1,5 +1,9 @@
 {% extends 'ux_packages/package.html.twig' %}
 
+{% block banner %}
+    {{ include('_banner.html.twig', {color_back: '#165514'}) }}
+{% endblock %}
+
 {% block package_header %}
     {% component PackageHeader with {
         package: 'chartjs',
diff --git a/ux.symfony.com/templates/ux_packages/live_component.html.twig b/ux.symfony.com/templates/ux_packages/live_component.html.twig
index b8eb5a286a8..20b2cfbc817 100644
--- a/ux.symfony.com/templates/ux_packages/live_component.html.twig
+++ b/ux.symfony.com/templates/ux_packages/live_component.html.twig
@@ -1,5 +1,9 @@
 {% extends 'ux_packages/package.html.twig' %}
 
+{% block banner %}
+    {{ include('_banner.html.twig', {color_back: '#854e0d'}) }}
+{% endblock %}
+
 {% block package_header %}
     {% component PackageHeader with {
         package: 'live-component',
diff --git a/ux.symfony.com/templates/ux_packages/map.html.twig b/ux.symfony.com/templates/ux_packages/map.html.twig
index 8f7afe5edf6..7273ea33144 100644
--- a/ux.symfony.com/templates/ux_packages/map.html.twig
+++ b/ux.symfony.com/templates/ux_packages/map.html.twig
@@ -1,5 +1,9 @@
 {% extends 'ux_packages/package.html.twig' %}
 
+{% block banner %}
+    {{ include('_banner.html.twig', {color_back: '#165514'}) }}
+{% endblock %}
+
 {% set package = 'map'|ux_package %}
 
 {% block package_header %}
diff --git a/ux.symfony.com/templates/ux_packages/package.html.twig b/ux.symfony.com/templates/ux_packages/package.html.twig
index 709debc3be6..7b1c4b797b6 100644
--- a/ux.symfony.com/templates/ux_packages/package.html.twig
+++ b/ux.symfony.com/templates/ux_packages/package.html.twig
@@ -17,6 +17,10 @@
     }
 } %}
 
+{% block banner %}
+    {{ include('_banner.html.twig', {color_back: '#222'}) }}
+{% endblock %}
+
 {% block header %}
     {{ include('_header.html.twig', {
         theme: 'white'
diff --git a/ux.symfony.com/templates/ux_packages/stimulus.html.twig b/ux.symfony.com/templates/ux_packages/stimulus.html.twig
index 7b11dc69cd8..0d3b9c65ee5 100644
--- a/ux.symfony.com/templates/ux_packages/stimulus.html.twig
+++ b/ux.symfony.com/templates/ux_packages/stimulus.html.twig
@@ -1,5 +1,9 @@
 {% extends 'ux_packages/package.html.twig' %}
 
+{% block banner %}
+    {{ include('_banner.html.twig', {color_back: '#18543e'}) }}
+{% endblock %}
+
 {% block package_header %}
     <twig:Package:PackageHeader
         package="{{ 'stimulus'|ux_package }}"
diff --git a/ux.symfony.com/templates/ux_packages/turbo.html.twig b/ux.symfony.com/templates/ux_packages/turbo.html.twig
index f54cacf1fbd..d16863cae14 100644
--- a/ux.symfony.com/templates/ux_packages/turbo.html.twig
+++ b/ux.symfony.com/templates/ux_packages/turbo.html.twig
@@ -1,5 +1,9 @@
 {% extends 'ux_packages/package.html.twig' %}
 
+{% block banner %}
+    {{ include('_banner.html.twig', {color_back: '#331C50'}) }}
+{% endblock %}
+
 {% block package_header %}
     {% component PackageHeader with {
         package: 'turbo',
diff --git a/ux.symfony.com/templates/ux_packages/twig_component.html.twig b/ux.symfony.com/templates/ux_packages/twig_component.html.twig
index 91da8abbc18..bae2a5a4895 100644
--- a/ux.symfony.com/templates/ux_packages/twig_component.html.twig
+++ b/ux.symfony.com/templates/ux_packages/twig_component.html.twig
@@ -1,5 +1,9 @@
 {% extends 'ux_packages/package.html.twig' %}
 
+{% block banner %}
+    {{ include('_banner.html.twig', {color_back: '#4a5d20'}) }}
+{% endblock %}
+
 {% block package_header %}
     {% component PackageHeader with {
         package: 'twig-component',