diff --git a/images/city-boston.jpg b/images/city-boston.jpg
index 1eb3f39..38f0362 100644
Binary files a/images/city-boston.jpg and b/images/city-boston.jpg differ
diff --git a/images/city-boston.webp b/images/city-boston.webp
new file mode 100644
index 0000000..e69de29
diff --git a/images/city-sydney.jpg b/images/city-sydney.jpg
index 440de38..13a1c51 100644
Binary files a/images/city-sydney.jpg and b/images/city-sydney.jpg differ
diff --git a/script.js b/script.js
index 972eb42..c8b9443 100644
--- a/script.js
+++ b/script.js
@@ -504,6 +504,15 @@ var si = 0,
                 }
               }
 
+              var heroImages = {
+                'meppel.odoo4projects.com': 'images/holland.webp',
+                'boston.odoo4projects.com': 'images/city-boston.jpg',
+                'manchester.odoo4projects.com': 'images/england.webp',
+                'mumbai.odoo4projects.com': 'images/india.webp',
+                'saopaulo.odoo4projects.com': 'images/brazil.webp',
+                'sydney.odoo4projects.com': 'images/city-sydney.jpg'
+              };
+
               function markBest() {
                 var valid = results.filter(function(r) { return r.time >= 0; });
                 if (valid.length === 0) return;
@@ -514,6 +523,11 @@ var si = 0,
                     c.el.classList.add('server-best');
                   }
                 });
+                /* Swap hero background to best server's city */
+                var hero = document.querySelector('.hero');
+                if (hero && heroImages[best.host]) {
+                  hero.style.setProperty('--hero-bg', "url('" + heroImages[best.host] + "')");
+                }
                 /* Update banner status */
                 bannerStatus.innerHTML =
                   '<span class="status-dot" style="animation:none;background:#4ade80;opacity:1;transform:scale(1)"></span> Fastest route found';
diff --git a/style.css b/style.css
index c194704..9633e90 100644
--- a/style.css
+++ b/style.css
@@ -112,9 +112,10 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
   content: '';
   position: absolute;
   inset: 0;
-  background: url('images/city-amsterdam.jpg') center/cover no-repeat;
+  background: var(--hero-bg, url('images/city-amsterdam.jpg')) center/cover no-repeat;
   opacity: 0.12;
   z-index: 0;
+  transition: background-image 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .hero .container { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }
 .hero-kicker {