diff --git a/ux.symfony.com/assets/styles/components/_PackageHeader.scss b/ux.symfony.com/assets/styles/components/_PackageHeader.scss
index 7d2d6493b2b..e706df9013d 100644
--- a/ux.symfony.com/assets/styles/components/_PackageHeader.scss
+++ b/ux.symfony.com/assets/styles/components/_PackageHeader.scss
@@ -1,6 +1,7 @@
 .PackageHeader {
   h1 {
     text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .05);
+    text-wrap: balance;
 
     em {
       display: inline-flex;
diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php
index 85f00eb2734..a0a2eb251a9 100644
--- a/ux.symfony.com/src/Service/UxPackageRepository.php
+++ b/ux.symfony.com/src/Service/UxPackageRepository.php
@@ -37,8 +37,7 @@ public function findAll(?string $query = null): array
                 'map',
                 'UX Map',
                 'app_map',
-                '#fff',
-                // 'linear-gradient(to bottom right, #58D984EB, #0083A2D1), #3386dfd4',
+                '#1BA980',
                 'linear-gradient(to bottom right, #1BA980, #209127 75%, #C0CB2A)',
                 'Interactive Maps',
                 'Render interactive Maps in PHP with Leaflet or Google Maps.',
diff --git a/ux.symfony.com/templates/ux_packages/map.html.twig b/ux.symfony.com/templates/ux_packages/map.html.twig
index 4c1d2f6fb73..0277e6cd360 100644
--- a/ux.symfony.com/templates/ux_packages/map.html.twig
+++ b/ux.symfony.com/templates/ux_packages/map.html.twig
@@ -3,15 +3,18 @@
 {% set package = 'map'|ux_package %}
 
 {% block package_header %}
-    <twig:Hero
-        eyebrows="Assert('Mapper')"
-        title="UX Map"
-        url="{{ url('app_map') }}"
-    >
-        Embed <code>interactive maps</code> in your Symfony application in a breeze!
-        <br />
-        Decouple your code from your map provider: <code>Google Maps</code>, <code>LeaftLet</code>.
-    </twig:Hero>
+    {% component PackageHeader with {
+        package: 'map',
+        eyebrowText: 'Seamless Maps Integration',
+    } %}
+        {% block title_header %}
+            Embed <em>interactive maps</em> in a breeze!
+        {% endblock %}
+
+        {% block sub_content %}
+            Decouple your code from your map provider: <em>Google Maps</em>, <em>LeaftLet</em>.
+        {% endblock %}
+    {% endcomponent %}
 {% endblock %}
 
 {% block code_block_left %}