diff --git a/src/_includes/components/events-banner.njk b/src/_includes/components/events-banner.njk
deleted file mode 100644
index 0829f60ffa..0000000000
--- a/src/_includes/components/events-banner.njk
+++ /dev/null
@@ -1,76 +0,0 @@
-{% set colors = ["bg-indigo-700 hover:bg-indigo-600", "bg-indigo-800 hover:bg-indigo-700", "bg-indigo-900 hover:bg-indigo-800"] %}
-{% set hasFutureEvents = false %}
-
-{% for event in events %}
-    {% if event.expire | isFutureDate %}
-        {% set hasFutureEvents = true %}
-    {% endif %}
-{% endfor %}
-
-{% if hasFutureEvents %}
-<div class="event-banner-container bg-indigo-700 hidden sm:block">
-    {% for event in events %}
-        {% if event.expire | isFutureDate %}
-            {% set color = colors[loop.index0 % colors.length] %}
-            <a href="{{ event.link }}" class="event-banner hidden sm:flex text-center w-full py-1 pb-3 sm:py-3 {{ color }} text-indigo-100 text-sm px-2 gap-1 sm:gap-2 flex-col sm:flex-row items-center justify-center">
-                <span class="hidden sm:block font-semibold">{{ event.type }}</span>
-                <span class="hidden sm:block">-</span>
-                <span class="">{{ event.title }}</span>
-                <span class="hidden sm:block">-</span>
-                <span class="flex items-center gap-1 font-medium underline" >
-                    {{ event.buttonText }} {% include "components/icons/chevron-right-sm.svg" %}
-                </span>
-            </a>
-        {% endif %}
-    {% endfor %}
-</div>
-{% endif %}
-
-<script>
-    window.onload = function() {
-        const banners = document.querySelectorAll('.event-banner');
-        const container = document.querySelector('.event-banner-container');
-        
-        // If there are no banners, exit the function
-        if (banners.length === 0) return;
-        
-        let currentBanner = 0;
-
-        // Change the container color to match the current banner
-        function changeContainerColor(banner) {
-            const colorClass = banner.className.match(/bg-\w+-\d+/)[0];
-            const hoverColorClass = banner.className.match(/hover:bg-\w+-\d+/)[0];
-            container.className = 'event-banner-container ' + colorClass + ' ' + hoverColorClass + ' hidden sm:block';
-        }
-
-        // All banners are hidden by default
-        banners.forEach(banner => banner.style.visibility = 'hidden');
-
-        // Show the first banner
-        banners[0].style.visibility = 'visible';
-        changeContainerColor(banners[0]);
-
-        // If there is more than one banner, change the visible banner every 10 seconds
-        if (banners.length > 1) {
-            setInterval(function() {
-                // Hide the current banner
-                banners[currentBanner].style.visibility = 'hidden';
-
-                // Increment the current banner index
-                currentBanner = (currentBanner + 1) % banners.length;
-
-                // Show the new banner
-                banners[currentBanner].style.visibility = 'visible';
-                banners[currentBanner].style.animation = 'none'; // reset animation
-                // force reflow, triggering a new animation
-                void banners[currentBanner].offsetWidth;
-                banners[currentBanner].style.animation = 'slideDown 0.5s ease';
-
-                // Change the container color to match the new banner
-                setTimeout(function() {
-                    changeContainerColor(banners[currentBanner]);
-                }, 500); // wait for the slideDown animation to finish
-            }, 10000);
-        }
-    };
-</script>
diff --git a/src/_includes/components/top-utility-bar.njk b/src/_includes/components/top-utility-bar.njk
new file mode 100644
index 0000000000..261885a07e
--- /dev/null
+++ b/src/_includes/components/top-utility-bar.njk
@@ -0,0 +1,72 @@
+{# Slim top utility bar — rotating announcements (left) + quick links (right).
+   Pattern adapted from tailscale.com's slim top bar. The announcement slot
+   rotates through any live events (same behaviour as the old events-banner)
+   plus the standing promos below. #}
+<style>
+    .ff-utility-announce > .ff-utility-item { display: none; }
+    .ff-utility-announce > .ff-utility-item:first-child { display: inline-flex; }
+</style>
+<div class="ff-utility-bar w-full bg-indigo-700 text-indigo-100 text-sm px-6">
+    <div class="mx-auto max-screen-none lg:max-w-screen-xl 2xl:max-w-[1920px] flex items-center justify-between gap-4 py-3">
+        <!-- Announcements (rotating: live events, then standing promos) -->
+        <div class="ff-utility-announce min-w-0 flex-1 flex items-center">
+            {% for event in events %}
+                {% if event.expire | isFutureDate %}
+                <a href="{{ event.link }}" class="ff-utility-item group inline-flex items-center gap-2 min-w-0 no-underline hover:no-underline text-indigo-100 hover:text-white">
+                    <span class="shrink-0 rounded-sm bg-white text-indigo-700 text-[11px] font-semibold uppercase tracking-wide px-1.5 py-0.5">{{ event.type }}</span>
+                    <span class="truncate">{{ event.title }}</span>
+                    <span class="shrink-0 hidden sm:inline-flex items-center gap-1 font-medium text-white underline-offset-2 group-hover:underline">
+                        {{ event.buttonText }}
+                        <span class="transition-transform group-hover:translate-x-0.5">&rarr;</span>
+                    </span>
+                </a>
+                {% endif %}
+            {% endfor %}
+            <!-- Standing promo: FlowFuse Expert / AI -->
+            <a href="/ai/" class="ff-utility-item group inline-flex items-center gap-2 min-w-0 no-underline hover:no-underline text-indigo-100 hover:text-white">
+                <span class="shrink-0 rounded-sm bg-white text-indigo-700 text-[11px] font-semibold uppercase tracking-wide px-1.5 py-0.5">New</span>
+                <span class="truncate">Meet FlowFuse Expert — build industrial applications with AI.</span>
+                <span class="shrink-0 hidden sm:inline-flex items-center gap-1 font-medium text-white underline-offset-2 group-hover:underline">
+                    Learn more
+                    <span class="transition-transform group-hover:translate-x-0.5">&rarr;</span>
+                </span>
+            </a>
+            <!-- Standing promo: device agent install -->
+            <a href="/docs/device-agent/install/overview/" class="ff-utility-item group inline-flex items-center gap-2 min-w-0 no-underline hover:no-underline text-indigo-100 hover:text-white">
+                <span class="shrink-0 rounded-sm bg-white text-indigo-700 text-[11px] font-semibold uppercase tracking-wide px-1.5 py-0.5">Get started</span>
+                <span class="truncate">Begin with installing the FlowFuse device agent on your hardware.</span>
+                <span class="shrink-0 hidden sm:inline-flex items-center gap-1 font-medium text-white underline-offset-2 group-hover:underline">
+                    Download
+                    <span class="transition-transform group-hover:translate-x-0.5">&rarr;</span>
+                </span>
+            </a>
+        </div>
+        <!-- Mobile Sign In (quick-links nav below is hidden under md) -->
+        <a href="{{ site.appURL }}" class="md:hidden shrink-0 text-indigo-100 hover:text-white no-underline hover:no-underline font-medium">Sign In</a>
+        <!-- Quick links (right) -->
+        <nav class="hidden md:flex items-center gap-5 shrink-0" aria-label="Quick links">
+            <a href="/blog/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Blog</a>
+            <a href="/docs/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Docs</a>
+            <a href="/support/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Support</a>
+            <a href="/docs/device-agent/install/overview/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Download</a>
+            <span class="h-4 w-px bg-indigo-400/40" aria-hidden="true"></span>
+            <a href="{{ site.appURL }}" class="text-indigo-100 hover:text-white no-underline hover:no-underline font-medium">Sign In</a>
+        </nav>
+    </div>
+</div>
+<script>
+    (function () {
+        var items = document.querySelectorAll('.ff-utility-announce > .ff-utility-item');
+        if (items.length === 0) return;
+        var i = 0;
+        for (var k = 0; k < items.length; k++) {
+            items[k].style.display = (k === 0 ? 'inline-flex' : 'none');
+        }
+        if (items.length < 2) return;
+        setInterval(function () {
+            items[i].style.display = 'none';
+            i = (i + 1) % items.length;
+            items[i].style.display = 'inline-flex';
+        }, 7000);
+    })();
+</script>
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index e63c08770c..8f1d130414 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -224,8 +224,8 @@ eleventyComputed:
     <a href="#main-content" class="skip-to-main">Skip to main content</a>
     <div class="flex-grow base">
         <div class="w-full">
-            <!-- Events Banner -->
-            {% include "../components/events-banner.njk" %}
+            <!-- Top Utility Bar (announcement + quick links) -->
+            {% include "../components/top-utility-bar.njk" %}
             <!-- Navigation Header -->
             <header id="ff-header" class="ff-header">
                 <nav class="relative w-full flex items-center justify-between mx-auto max-screen-none lg:max-w-screen-xl 2xl:max-w-[1920px]">
@@ -235,7 +235,10 @@ eleventyComputed:
                     <a class="w-8 h-8 hidden md:block lg:hidden shrink-0" href="/" aria-label="FlowFuse home" style="font-family:'Baloo 2', sans-serif">
                         {% include "components/flowfuse-square.svg" %}
                     </a>
-                    <div class="flex items-center gap-1 md:hidden">
+                    <div class="flex items-center gap-2 md:hidden relative z-20">
+                        <a class="ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/contact-us" onclick="capture('cta-talk-us', {'position': 'header-mobile'})">
+                            Contact Us
+                        </a>
                         <button id="nav-toggle" class="text-gray-700 flex items-center text-red-hero">
                             <svg class="burger fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
                             <svg class="close fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
@@ -291,7 +294,7 @@ eleventyComputed:
                             </ul>
                         {% endnavoption %}
                         {% navoption "AI", "/ai/", 0, false, false, "nav-collapsible" %}{% endnavoption %}
-                        {% navoption "Docs", "/docs/", 0, false, false, "nav-collapsible" %}{% endnavoption %}
+                        {% navoption "Docs", "/docs/", 0, false, false, "md:hidden" %}{% endnavoption %}
                         {% navoption "Pricing", "/pricing/", 0, false, false, "nav-collapsible" %}{% endnavoption %}
                         <!-- More dropdown for overflow items -->
                         <li id="nav-more" class="ff-nav-dropdown relative hover:cursor-pointer" style="display:none">
@@ -301,7 +304,6 @@ eleventyComputed:
                     </ul>
                     <!-- CTAs -->
                     <ul class="cta hidden md:flex flex-row items-center justify-end font-medium text no-underline z-10 bg-transparent w-auto">
-			            <li class="flex"><a href="{{ site.appURL }}">Sign In</a></li>
 			            <li class="hidden md:flex"><a href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'header'})">Free Trial</a></li>
                         <li class="flex">
                             <a class="ml-2 ff-btn ff-btn--primary uppercase text-sm inline-flex whitespace-nowrap" href="/contact-us" onclick="capture('cta-talk-us', {'position': 'header'})">