diff --git a/Gemfile.lock b/Gemfile.lock
index 340c26b57..b49fed13a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (4.1.0)
+    ably-ui (4.1.0.dev.5a3c660)
       view_component (~> 2.33.0)
 
 GEM
diff --git a/cypress/integration/core/footer/__snapshots__/snapshots.js.snap b/cypress/integration/core/footer/__snapshots__/snapshots.js.snap
index c4e9760f8..f4cb127e1 100644
--- a/cypress/integration/core/footer/__snapshots__/snapshots.js.snap
+++ b/cypress/integration/core/footer/__snapshots__/snapshots.js.snap
@@ -142,7 +142,7 @@ exports[`Footer Snapshot Test > react > test case common to both #0`] = `
             >System status</a
           ><iframe
             class="w-24 h-24 mt-4"
-            src="https://status.ably.io/embed/icon"
+            src="https://status.ably.com/embed/icon"
             allowtransparency="true"
             frameborder="0"
             scrolling="no"
@@ -434,7 +434,7 @@ exports[`Footer Snapshot Test > view component > test case common to both #0`] =
           >
           <iframe
             class="w-24 h-24 mt-4"
-            src="https://status.ably.io/embed/icon"
+            src="https://status.ably.com/embed/icon"
             allowtransparency="true"
             frameborder="0"
             scrolling="no"
diff --git a/cypress/integration/core/showcase/__snapshots__/screenshots.js.snap b/cypress/integration/core/showcase/__snapshots__/screenshots.js.snap
index a8c41aed5..0db2201e5 100644
--- a/cypress/integration/core/showcase/__snapshots__/screenshots.js.snap
+++ b/cypress/integration/core/showcase/__snapshots__/screenshots.js.snap
@@ -164,7 +164,7 @@ exports[`Footer Snapshot Test > react > test case common to both #0`] = `
             >System status</a
           ><iframe
             class="w-24 h-24 mt-4"
-            src="https://status.ably.io/embed/icon"
+            src="https://status.ably.com/embed/icon"
             allowtransparency="true"
             frameborder="0"
             scrolling="no"
@@ -437,7 +437,7 @@ exports[`Footer Snapshot Test > view component > test case common to both #0`] =
             >System status</a
           ><iframe
             class="w-24 h-24 mt-4"
-            src="https://status.ably.io/embed/icon"
+            src="https://status.ably.com/embed/icon"
             allowtransparency="true"
             frameborder="0"
             scrolling="no"
diff --git a/cypress/integration/core/showcase/__snapshots__/snapshots.js.snap b/cypress/integration/core/showcase/__snapshots__/snapshots.js.snap
index cf88e58eb..42f98eecb 100644
--- a/cypress/integration/core/showcase/__snapshots__/snapshots.js.snap
+++ b/cypress/integration/core/showcase/__snapshots__/snapshots.js.snap
@@ -349,7 +349,7 @@ exports[`Footer Snapshot Test > react > test case common to both #0`] = `
             >System status</a
           ><iframe
             class="w-24 h-24 mt-4"
-            src="https://status.ably.io/embed/icon"
+            src="https://status.ably.com/embed/icon"
             allowtransparency="true"
             frameborder="0"
             scrolling="no"
@@ -624,7 +624,7 @@ exports[`Footer Snapshot Test > view component > test case common to both #0`] =
             >System status</a
           ><iframe
             class="w-24 h-24 mt-4"
-            src="https://status.ably.io/embed/icon"
+            src="https://status.ably.com/embed/icon"
             allowtransparency="true"
             frameborder="0"
             scrolling="no"
diff --git a/cypress/integration/core/uptime/__snapshots__/snapshots.js.snap b/cypress/integration/core/uptime/__snapshots__/snapshots.js.snap
index a67fc39fc..78f1d5a46 100644
--- a/cypress/integration/core/uptime/__snapshots__/snapshots.js.snap
+++ b/cypress/integration/core/uptime/__snapshots__/snapshots.js.snap
@@ -443,3 +443,1015 @@ exports[`Uptime Snapshot Test > react > test case common to both #1`] = `
   Sorry, we can’t retrieve uptime data right now.
 </div>
 `;
+
+exports[`Code Snapshot Test > react > test case common to both #0`] = `
+<div class="hljs p-32 overflow-auto" data-id="code">
+  <pre
+    lang="javascript"
+  ><code class="font-mono language-javascript"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
+<span class="hljs-keyword">var</span> channel = ably.channels.get(<span class="hljs-string">'web-pal'</span>);
+
+<span class="hljs-comment">// Subscribe to messages on channel</span>
+channel.subscribe(<span class="hljs-string">'greeting'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">message</span>) </span>{
+  alert(message.data);
+});</code></pre>
+</div>
+`;
+
+exports[`Code Snapshot Test > react > test case common to both #1`] = `
+<div class="hljs p-32 overflow-auto" data-id="code">
+  <pre
+    lang="swift"
+  ><code class="font-mono language-swift"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
+<span class="hljs-keyword">let</span> channel <span class="hljs-operator">=</span> ably.channels.get(<span class="hljs-string">"web-pal"</span>)
+
+<span class="hljs-comment">// Subscribe to messages on channel</span>
+channel.subscribe(<span class="hljs-string">"greeting"</span>) { message <span class="hljs-keyword">in</span>
+  <span class="hljs-built_in">print</span>(<span class="hljs-string">"<span class="hljs-subst">\\(message.data)</span>"</span>)
+}</code></pre>
+</div>
+`;
+
+exports[`Code Snapshot Test > react > test case common to both #2`] = `
+<div class="hljs p-32 overflow-auto" data-id="code">
+  <pre
+    lang="java"
+  ><code class="font-mono language-java">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
+Channel channel = ably.channels.get(<span class="hljs-string">"web-pal"</span>);
+
+<span class="hljs-comment">/* Subscribe to messages on channel */</span>
+
+MessageListener listener;
+listener = <span class="hljs-keyword">new</span> MessageListener() {
+  <span class="hljs-meta">@Override</span>
+  <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMessage</span><span class="hljs-params">(Message message)</span> </span>{
+    System.out.print(message.data);
+  };
+};
+channel.subscribe(<span class="hljs-string">"greeting"</span>, listener);</code></pre>
+</div>
+`;
+
+exports[`Code Snapshot Test > view component > test case common to both #0`] = `
+<div class="hljs p-32 overflow-auto" data-id="code">
+  <pre
+    lang="javascript"
+  ><code class="font-mono language-javascript"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
+<span class="hljs-keyword">var</span> channel = ably.channels.get(<span class="hljs-string">'web-pal'</span>);
+
+<span class="hljs-comment">// Subscribe to messages on channel</span>
+channel.subscribe(<span class="hljs-string">'greeting'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">message</span>) </span>{
+  alert(message.data);
+});</code></pre>
+</div>
+`;
+
+exports[`Code Snapshot Test > view component > test case common to both #1`] = `
+<div class="hljs p-32 overflow-auto" data-id="code">
+  <pre
+    lang="swift"
+  ><code class="font-mono language-swift"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
+<span class="hljs-keyword">let</span> channel <span class="hljs-operator">=</span> ably.channels.get(<span class="hljs-string">"web-pal"</span>)
+
+<span class="hljs-comment">// Subscribe to messages on channel</span>
+channel.subscribe(<span class="hljs-string">"greeting"</span>) { message <span class="hljs-keyword">in</span>
+  <span class="hljs-built_in">print</span>(<span class="hljs-string">"<span class="hljs-subst">\\(message.data)</span>"</span>)
+}</code></pre>
+</div>
+`;
+
+exports[`Code Snapshot Test > view component > test case common to both #2`] = `
+<div class="hljs p-32 overflow-auto" data-id="code">
+  <pre
+    lang="java"
+  ><code class="font-mono language-java">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
+Channel channel = ably.channels.get(<span class="hljs-string">"web-pal"</span>);
+
+<span class="hljs-comment">/* Subscribe to messages on channel */</span>
+
+MessageListener listener;
+listener = <span class="hljs-keyword">new</span> MessageListener() {
+  <span class="hljs-meta">@Override</span>
+  <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMessage</span><span class="hljs-params">(Message message)</span> </span>{
+    System.out.print(message.data);
+  };
+};
+channel.subscribe(<span class="hljs-string">"greeting"</span>, listener);</code></pre>
+</div>
+`;
+
+exports[`Chat button state > react > the button is inactive without Hubspot widget #0`] = `
+<button
+  type="button"
+  class="ui-btn-secondary self-start mt-16"
+  disabled=""
+  data-id="open-chat-widget"
+  data-enabled-label="Start a live chat"
+  data-disabled-label="Live chat unavailable"
+>
+  Live chat unavailable
+</button>
+`;
+
+exports[`Chat button state > vw > the button is inactive without Hubspot widget #0`] = `
+<button
+  type="button"
+  class="ui-btn-secondary self-start mt-16"
+  disabled=""
+  data-id="open-chat-widget"
+  data-enabled-label="Start a live chat"
+  data-disabled-label="Live chat unavailable"
+>
+  Live chat unavailable
+</button>
+`;
+
+exports[`Cookie Message Snapshot Test > react > the message component is visible #0`] = `
+<div class="ui-cookie-message">
+  <p class="ui-text-p2 pr-32">
+    <a href="/privacy" class="underline">How we use cookies</a> to improve your
+    experience.
+  </p>
+  <button class="ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap">
+    Accept and close
+  </button>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #0`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-zingy-green p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-cool-black mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-tick"></use>
+    </svg>
+    <p class="ui-flash-text text-cool-black">
+      Congratulations! You've won the Oscar
+    </p>
+    <button type="button" class="p-0 ml-auto self-start">
+      <svg class="h-24 w-24 transition-colors ui-icon-cool-black">
+        <use xlink:href="#sprite-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #1`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-electric-cyan p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-cool-black mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-ably-badge"></use>
+    </svg>
+    <p class="ui-flash-text text-cool-black">This is a notice</p>
+    <button type="button" class="p-0 ml-auto self-start">
+      <svg class="h-24 w-24 transition-colors ui-icon-cool-black">
+        <use xlink:href="#sprite-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #2`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-gui-error p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-white mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-warning"></use>
+    </svg>
+    <p class="ui-flash-text text-white">This is an error, very bad</p>
+    <button type="button" class="p-0 ml-auto self-start">
+      <svg class="h-24 w-24 transition-colors ui-icon-cool-black">
+        <use xlink:href="#sprite-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #3`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-active-orange p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <svg
+      class="text-white mr-16 self-baseline"
+      style="width: 1.5rem; height: 1.5rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-warning"></use>
+    </svg>
+    <p class="ui-flash-text text-white">This is an alert</p>
+    <button type="button" class="p-0 ml-auto self-start">
+      <svg class="h-24 w-24 transition-colors ui-icon-cool-black">
+        <use xlink:href="#sprite-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Flash Snapshot Test > renders correcty #4`] = `
+<div
+  class="ui-flash-message ui-grid-px ui-flash-message-enter"
+  data-id="ui-flash"
+>
+  <div
+    class="bg-electric-cyan p-32 flex align-center rounded shadow-container-subtle"
+  >
+    <p class="ui-flash-text text-cool-black">
+      Some useful information, you are welcome
+    </p>
+    <button type="button" class="p-0 ml-auto self-start">
+      <svg class="h-24 w-24 transition-colors ui-icon-cool-black">
+        <use xlink:href="#sprite-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Footer Snapshot Test > react > test case common to both #0`] = `
+<footer class="bg-light-grey font-sans antialiased" data-id="footer">
+  <div
+    class="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"
+  >
+    <div class="col-span-full md:col-span-2">
+      <div class="flex flex-row p-menu-row-snug">
+        <img
+          class="mr-24 -mt-16"
+          src="/assets/ably_ui/core/images/ably-stack-f942defb86ef288e999c451c1f7e34fbbe59b7200d738c080e15a9f8716bbdad.svg"
+          alt="Ably homepage"
+        />
+        <h2
+          class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
+        >
+          The Ably Platform
+        </h2>
+      </div>
+      <div class="grid grid-cols-4">
+        <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+          Easily power any realtime experience in your application via a simple
+          API that handles everything realtime.
+        </p>
+      </div>
+      <ul
+        class="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1"
+      >
+        <li class="p-menu-row-snug">
+          <a href="/pub-sub-messaging" class="ui-footer-menu-row-link"
+            >Pub/sub messaging</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/push-notifications" class="ui-footer-menu-row-link"
+            >Push notifications</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/integrations" class="ui-footer-menu-row-link"
+            >Third-party integrations</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/protocols" class="ui-footer-menu-row-link"
+            >Multiple protocol messaging</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/hub" class="ui-footer-menu-row-link"
+            >Streaming data sources</a
+          >
+        </li>
+      </ul>
+    </div>
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">Ably is for</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a href="/solutions/edtech" class="ui-footer-menu-row-link">EdTech</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            href="/solutions/automotive-logistics-and-mobility"
+            class="ui-footer-menu-row-link"
+            >Automotive, Logistics, &amp; Mobility</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/solutions/b2b-platforms" class="ui-footer-menu-row-link"
+            >B2B Platforms</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/solutions/healthcare" class="ui-footer-menu-row-link"
+            >Healthcare</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/hub" class="ui-footer-menu-row-link"
+            >Streaming data sources</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            href="/solutions/ecommerce-and-retail"
+            class="ui-footer-menu-row-link"
+            >eCommerce &amp; Retail</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/solutions/sports-and-media" class="ui-footer-menu-row-link"
+            >Sports &amp; Media</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/solutions/gaming" class="ui-footer-menu-row-link">Gaming</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            href="/solutions/iot-and-connected-devices"
+            class="ui-footer-menu-row-link"
+            >IoT &amp; Connected Devices</a
+          >
+        </li>
+      </ul>
+    </div>
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">Developers</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a
+            href="/documentation/quick-start-guide"
+            class="ui-footer-menu-row-link"
+            >Start in 5 minutes</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/documentation/" class="ui-footer-menu-row-link"
+            >Documentation</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/tutorials" class="ui-footer-menu-row-link">Tutorials</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="https://changelog.ably.com/" class="ui-footer-menu-row-link"
+            >Changelog</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/support" class="ui-footer-menu-row-link"
+            >Support &amp; FAQs</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/download" class="ui-footer-menu-row-link">SDKs</a>
+        </li>
+        <li class="p-menu-row-snug flex items-center">
+          <a
+            class="pr-8 ui-footer-menu-row-link"
+            href="https://status.ably.com/"
+            >System status</a
+          ><iframe
+            class="w-24 h-24 mt-4"
+            src="https://status.ably.com/embed/icon"
+            allowtransparency="true"
+            frameborder="0"
+            scrolling="no"
+          ></iframe>
+        </li>
+      </ul>
+    </div>
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">WHY ABLY</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a href="/customers" class="ui-footer-menu-row-link">Customers</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/case-studies" class="ui-footer-menu-row-link"
+            >Case Studies</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            href="/four-pillars-of-dependability"
+            class="ui-footer-menu-row-link"
+            >Four Pillars of Dependability</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/compare" class="ui-footer-menu-row-link"
+            >Compare our tech</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/protocols" class="ui-footer-menu-row-link"
+            >Multi protocol support</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/integrations" class="ui-footer-menu-row-link"
+            >Third-party integrations</a
+          >
+        </li>
+      </ul>
+    </div>
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">ABOUT</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a href="/about" class="ui-footer-menu-row-link">About Ably</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/pricing" class="ui-footer-menu-row-link">Pricing</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/blog" class="ui-footer-menu-row-link">Blog</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/careers" class="ui-footer-menu-row-link">Careers</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/open-policy" class="ui-footer-menu-row-link"
+            >Open protocol policy</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7"
+            rel="noopener noreferrer"
+            target="_blank"
+            class="ui-footer-menu-row-link"
+            >Press &amp; Media</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="/contact" class="ui-footer-menu-row-link">Contact us</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="max-w-screen-xl ui-grid-px mx-auto">
+    <hr class="border-t border-mid-grey" />
+  </div>
+  <div
+    class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2"
+  >
+    <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
+      <div class="inline-flex">
+        <a href="/privacy" class="pr-24 ui-footer-link">Cookies</a
+        ><a href="/legals" class="pr-24 ui-footer-link">Legals</a
+        ><a href="/data-protection" class="pr-24 ui-footer-link"
+          >Data Protection</a
+        ><a href="/privacy" class="ui-footer-link">Privacy</a>
+      </div>
+      <div class="pt-32 flex items-center">
+        <a
+          class="h-24 pr-24 text-cool-black hover:text-icon-twitter"
+          href="https://twitter.com/ablyrealtime"
+          ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
+            <use xlink:href="#sprite-twitter"></use></svg></a
+        ><a
+          class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
+          href="https://www.linkedin.com/company/ably-realtime"
+          ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
+            <use xlink:href="#sprite-linkedin"></use></svg></a
+        ><a
+          class="h-24 pr-24 text-cool-black hover:text-icon-github"
+          href="https://github.com/ably/"
+          ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
+            <use xlink:href="#sprite-github"></use></svg
+        ></a>
+        <div class="border-l border-mid-grey h-40"></div>
+        <a
+          class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
+          href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+          ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
+            <use xlink:href="#sprite-glassdoor"></use></svg
+        ></a>
+        <div class="pl-16 text-menu3 font-light">
+          <strong class="block font-medium">We're hiring!</strong
+          ><a
+            href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+            class="ui-footer-link"
+            >Learn more</a
+          >&nbsp;at Glassdoor
+        </div>
+      </div>
+    </div>
+    <div
+      class="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto"
+    >
+      <img
+        class="mr-24 w-96 h-96"
+        src="/assets/ably_ui/core/images/rocket-list-2021-585749315fb7d34591caa21db10b0a2abc6bb38bbe32f9f350b5ae48a05c26dd.png"
+        alt="Rocket List 2021"
+      /><img
+        class="w-96 h-96"
+        src="/assets/ably_ui/core/images/flexible-companies-dc4c35aaec0e576c23df2d8c684bf64739a0df9ed6410f84ea7ba61245ca4efc.png"
+        alt="Flexible Companies 2021"
+      />
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`Footer Snapshot Test > view component > test case common to both #0`] = `
+<footer class="bg-light-grey font-sans antialiased" data-id="footer">
+  <div
+    class="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"
+  >
+    <div class="col-span-full md:col-span-2">
+      <div class="flex flex-row p-menu-row-snug">
+        <img
+          alt="Ably homepage"
+          class="mr-24 -mt-16"
+          src="/assets/ably_ui/core/images/ably-stack-f942defb86ef288e999c451c1f7e34fbbe59b7200d738c080e15a9f8716bbdad.svg"
+        />
+        <h2
+          class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
+        >
+          The Ably Platform
+        </h2>
+      </div>
+
+      <div class="grid grid-cols-4">
+        <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+          Easily power any realtime experience in your application via a simple
+          API that handles everything realtime.
+        </p>
+      </div>
+
+      <ul
+        class="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1"
+      >
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/pub-sub-messaging"
+            >Pub/sub messaging</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/push-notifications"
+            >Push notifications</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/integrations"
+            >Third-party integrations</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/protocols"
+            >Multiple protocol messaging</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/hub"
+            >Streaming data sources</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">Ably is for</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/solutions/edtech">EdTech</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            class="ui-footer-menu-row-link"
+            href="/solutions/automotive-logistics-and-mobility"
+            >Automotive, Logistics, &amp; Mobility</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/solutions/b2b-platforms"
+            >B2B Platforms</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/solutions/healthcare"
+            >Healthcare</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/hub"
+            >Streaming data sources</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            class="ui-footer-menu-row-link"
+            href="/solutions/ecommerce-and-retail"
+            >eCommerce &amp; Retail</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/solutions/sports-and-media"
+            >Sports &amp; Media</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/solutions/gaming">Gaming</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            class="ui-footer-menu-row-link"
+            href="/solutions/iot-and-connected-devices"
+            >IoT &amp; Connected Devices</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">Developers</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a
+            class="ui-footer-menu-row-link"
+            href="/documentation/quick-start-guide"
+            >Start in 5 minutes</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/documentation"
+            >Documentation</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/tutorials">Tutorials</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="https://changelog.ably.com/" class="ui-footer-menu-row-link"
+            >Changelog</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/support"
+            >Support &amp; FAQs</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/download">SDKs</a>
+        </li>
+        <li class="p-menu-row-snug flex items-center">
+          <a
+            class="pr-8 ui-footer-menu-row-link"
+            href="https://status.ably.com/"
+            >System status</a
+          >
+          <iframe
+            class="w-24 h-24 mt-4"
+            src="https://status.ably.io/embed/icon"
+            allowtransparency="true"
+            frameborder="0"
+            scrolling="no"
+          ></iframe>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">WHY ABLY</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/customers">Customers</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/case-studies"
+            >Case Studies</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            class="ui-footer-menu-row-link"
+            href="/four-pillars-of-dependability"
+            >Four Pillars of Dependability</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/compare"
+            >Compare our tech</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/protocols"
+            >Multi protocol support</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/integrations"
+            >Third-party integrations</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">ABOUT</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/about">About Ably</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/pricing">Pricing</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/blog">Blog</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/careers">Careers</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/open-policy"
+            >Open protocol policy</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a
+            href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7"
+            target="_blank"
+            rel="noopener"
+            class="ui-footer-menu-row-link"
+            >Press &amp; Media</a
+          >
+        </li>
+        <li class="p-menu-row-snug">
+          <a class="ui-footer-menu-row-link" href="/contact">Contact us</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="max-w-screen-xl ui-grid-px mx-auto">
+    <hr class="border-t border-mid-grey" />
+  </div>
+
+  <div
+    class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2"
+  >
+    <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
+      <div class="inline-flex">
+        <a class="ui-footer-link pr-24" href="/privacy">Cookies</a>
+        <a class="ui-footer-link pr-24" href="/legals">Legals</a>
+        <a class="ui-footer-link pr-24" href="/data-protection"
+          >Data Protection</a
+        >
+        <a class="ui-footer-link" href="/privacy">Privacy</a>
+      </div>
+
+      <div class="pt-32 flex items-center">
+        <a
+          class="h-24 pr-24 text-cool-black hover:text-icon-twitter"
+          href="https://twitter.com/ablyrealtime"
+        >
+          <svg class=" " style="width: 1.5rem; height: 1.5rem">
+            <use xlink:href="#sprite-twitter"></use>
+          </svg>
+        </a>
+        <a
+          class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
+          href="https://www.linkedin.com/company/ably-realtime"
+        >
+          <svg class=" " style="width: 1.5rem; height: 1.5rem">
+            <use xlink:href="#sprite-linkedin"></use>
+          </svg>
+        </a>
+        <a
+          class="h-24 pr-24 text-cool-black hover:text-icon-github"
+          href="https://github.com/ably/"
+        >
+          <svg class=" " style="width: 1.5rem; height: 1.5rem">
+            <use xlink:href="#sprite-github"></use>
+          </svg>
+        </a>
+        <div class="border-l border-mid-grey h-40"></div>
+        <a
+          class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
+          href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+        >
+          <svg class=" " style="width: 1.5rem; height: 1.5rem">
+            <use xlink:href="#sprite-glassdoor"></use>
+          </svg>
+        </a>
+        <div class="pl-16 text-menu3 font-light">
+          <strong class="block font-medium">We're hiring!</strong>
+          <a
+            href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+            class="ui-footer-link"
+            >Learn more</a
+          >
+          at Glassdoor
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto"
+    >
+      <img
+        alt="Rocket List 2021"
+        class="mr-24 w-96 h-96"
+        src="/assets/ably_ui/core/images/rocket-list-2021-585749315fb7d34591caa21db10b0a2abc6bb38bbe32f9f350b5ae48a05c26dd.png"
+      />
+      <img
+        alt="Flexible Companies 2021"
+        class="w-96 h-96"
+        src="/assets/ably_ui/core/images/flexible-companies-dc4c35aaec0e576c23df2d8c684bf64739a0df9ed6410f84ea7ba61245ca4efc.png"
+      />
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`ControlMobileDropdown > react > renders correctly by default #0`] = `
+<button
+  type="button"
+  class="block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none"
+  data-id="meganav-control-mobile-dropdown"
+  aria-expanded="false"
+  aria-controls="meganav-mobile-dropdown"
+>
+  <svg
+    class="text-cool-black transition-colors"
+    data-id="meganav-control-mobile-dropdown-menu"
+    style="width: 1.5rem; height: 1.5rem;"
+  >
+    <use xlink:href="#sprite-icon-gui-burger-menu"></use></svg
+  ><svg
+    class="text-cool-black transition-colors hidden"
+    data-id="meganav-control-mobile-dropdown-close"
+    style="width: 1.5rem; height: 1.5rem;"
+  >
+    <use xlink:href="#sprite-icon-gui-close"></use>
+  </svg>
+</button>
+`;
+
+exports[`ControlMobileDropdown > react > renders correctly on click #0`] = `
+<button
+  type="button"
+  class="block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none"
+  data-id="meganav-control-mobile-dropdown"
+  aria-expanded="true"
+  aria-controls="meganav-mobile-dropdown"
+>
+  <svg
+    class="text-cool-black transition-colors hidden"
+    data-id="meganav-control-mobile-dropdown-menu"
+    style="width: 1.5rem; height: 1.5rem;"
+  >
+    <use xlink:href="#sprite-icon-gui-burger-menu"></use></svg
+  ><svg
+    class="text-cool-black transition-colors"
+    data-id="meganav-control-mobile-dropdown-close"
+    style="width: 1.5rem; height: 1.5rem;"
+  >
+    <use xlink:href="#sprite-icon-gui-close"></use>
+  </svg>
+</button>
+`;
+
+exports[`ControlMobileDropdown > vw > renders correctly by default #0`] = `
+<button
+  name="button"
+  type="button"
+  class="block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none"
+  data-id="meganav-control-mobile-dropdown"
+  aria-expanded="false"
+  aria-controls="meganav-mobile-dropdown"
+>
+  <svg
+    class="text-cool-black transition-colors"
+    style="width: 1.5rem; height: 1.5rem"
+    data-id="meganav-control-mobile-dropdown-menu"
+  >
+    <use xlink:href="#sprite-icon-gui-burger-menu"></use>
+  </svg>
+  <svg
+    class="text-cool-black transition-colors hidden"
+    style="width: 1.5rem; height: 1.5rem"
+    data-id="meganav-control-mobile-dropdown-close"
+  >
+    <use xlink:href="#sprite-icon-gui-close"></use>
+  </svg>
+</button>
+`;
+
+exports[`ControlMobileDropdown > vw > renders correctly on click #0`] = `
+<button
+  name="button"
+  type="button"
+  class="block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none"
+  data-id="meganav-control-mobile-dropdown"
+  aria-expanded="true"
+  aria-controls="meganav-mobile-dropdown"
+>
+  <svg
+    class="text-cool-black transition-colors hidden"
+    style="width: 1.5rem; height: 1.5rem"
+    data-id="meganav-control-mobile-dropdown-menu"
+  >
+    <use xlink:href="#sprite-icon-gui-burger-menu"></use>
+  </svg>
+  <svg
+    class="text-cool-black transition-colors"
+    style="width: 1.5rem; height: 1.5rem"
+    data-id="meganav-control-mobile-dropdown-close"
+  >
+    <use xlink:href="#sprite-icon-gui-close"></use>
+  </svg>
+</button>
+`;
+
+exports[`Notice > react > renders correctly by default #0`] = `
+<div
+  class="ui-announcement bg-gradient-active-orange text-white"
+  data-id="ui-notice"
+  style="display: none;"
+>
+  <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
+    <a href="/" class="font-light w-full pr-8 text-p3 self-center"
+      ><strong class="font-medium whitespace-nowrap pr-4"
+        >Something something</strong
+      ><span class="pr-4"
+        >Lorem ipsum dolor sit amet, in nonumes delectus nominati eam, novum
+        recusabo an mel. Aeque maiorum patrioque te per, congue epicurei
+        qualisque at quo. An has quis ludus appellantur. Id vis solum assentior
+        theophrastus</span
+      ><span class="underline cursor-pointer whitespace-nowrap"
+        >CLICK ME</span
+      ></a
+    ><button
+      type="button"
+      class="ml-auto h-20 w-20 border-none bg-none self-baseline"
+    >
+      <svg class="text-white " style="width: 1.25rem; height: 1.25rem;">
+        <use xlink:href="#sprite-icon-gui-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Notice > vw > renders correctly by default #0`] = `
+<div
+  class="ui-announcement bg-gradient-active-orange text-white"
+  data-id="ui-notice"
+  style="display: none;"
+>
+  <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
+    <a class="font-light w-full pr-8 text-p3 self-center" href="/">
+      <strong class="font-medium whitespace-nowrap pr-4"
+        >Something something</strong
+      >
+      <span class="pr-4"
+        >Lorem ipsum dolor sit amet, in nonumes delectus nominati eam, novum
+        recusabo an mel. Aeque maiorum patrioque te per, congue epicurei
+        qualisque at quo. An has quis ludus appellantur. Id vis solum assentior
+        theophrastus</span
+      >
+      <span class="underline cursor-pointer whitespace-nowrap">CLICK ME</span>
+    </a>
+    <button
+      name="button"
+      type="button"
+      class="h-20 w-20 mt-4 ml-auto border-none bg-none self-baseline"
+    >
+      <svg class="text-white " style="width: 1.25rem; height: 1.25rem">
+        <use xlink:href="#sprite-icon-gui-close"></use>
+      </svg>
+    </button>
+  </div>
+</div>
+`;
diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb
index 1bb4d0a1e..2f1cf6ae5 100644
--- a/lib/ably_ui/version.rb
+++ b/lib/ably_ui/version.rb
@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '4.1.0'
+  VERSION = '4.1.0.dev.5a3c660'
 end
diff --git a/package.json b/package.json
index e23277eab..61d052b65 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ably-ui",
-  "version": "4.1.0",
+  "version": "4.1.0-dev.5a3c660",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": "git@github.com:ably/ably-ui.git",
   "license": "Apache-2.0",
diff --git a/preview/Gemfile b/preview/Gemfile
index 680a2d473..46f3bd502 100644
--- a/preview/Gemfile
+++ b/preview/Gemfile
@@ -36,4 +36,4 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '4.1.0', require: 'ably_ui', source: 'https://rubygems.pkg.github.com/ably'
+gem 'ably-ui', '4.1.0.dev.5a3c660', require: 'ably_ui', source: 'https://rubygems.pkg.github.com/ably'
diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock
index 42a30882a..3baedd2dd 100644
--- a/preview/Gemfile.lock
+++ b/preview/Gemfile.lock
@@ -2,7 +2,7 @@ GEM
   remote: https://rubygems.org/
   remote: https://rubygems.pkg.github.com/ably/
   specs:
-    ably-ui (4.1.0)
+    ably-ui (4.1.0.dev.5a3c660)
       view_component (~> 2.33.0)
     actioncable (6.0.3.4)
       actionpack (= 6.0.3.4)
@@ -168,7 +168,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  ably-ui (= 4.1.0)!
+  ably-ui (= 4.1.0.dev.5a3c660)!
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)
diff --git a/preview/app/controllers/api/blog_controller.rb b/preview/app/controllers/api/blog_controller.rb
index 815139ef7..f0303eb92 100644
--- a/preview/app/controllers/api/blog_controller.rb
+++ b/preview/app/controllers/api/blog_controller.rb
@@ -8,17 +8,17 @@ def recent_blog_posts
         {
           title: "Achieving exactly-once delivery with Ably",
           link:
-            "https://www-stats.ably.io/blog/achieving-exactly-once-message-processing-with-ably/",
+            "https://ably.com/blog/achieving-exactly-once-message-processing-with-ably",
           pubDate: "Tue, 17 Nov 2020 12:21:08 GMT".to_time.strftime('%b %e, %Y')
         },
         {
           title: "Why Ably integrates with functions instead of delivering them",
-          link: "https://www-stats.ably.io/blog/why-we-dont-offer-functions/",
+          link: "https://ably.com/blog/why-we-dont-offer-functions",
           pubDate: "Tue, 28 Jul 2020 18:56:47 GMT".to_time.strftime('%b %e, %Y')
         },
         {
           title: "Adventures in BEAM optimization with our MQTT adapter",
-          link: "https://www-stats.ably.io/blog/beam-optimization-mqtt/",
+          link: "https://ably.com/blog/beam-optimization-mqtt",
           pubDate: "Fri, 17 Jul 2020 09:09:45 GMT".to_time.strftime('%b %e, %Y')
         },
       ]
diff --git a/preview/package.json b/preview/package.json
index 2cfe65c6e..41427abdb 100644
--- a/preview/package.json
+++ b/preview/package.json
@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ably-ui": "4.1.0",
+    "@ably/ably-ui": "4.1.0-dev.5a3c660",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",
diff --git a/preview/yarn.lock b/preview/yarn.lock
index 91e7ea898..8315fee4c 100644
--- a/preview/yarn.lock
+++ b/preview/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/ably-ui@4.1.0":
-  version "4.1.0"
-  resolved "https://npm.pkg.github.com/download/@ably/ably-ui/4.1.0/8b2817ab08e7ef9416b05482d9d44b9394ebb0d7fcbda2e4ff017b3e73d08f40#d5771382a96abfc1ce0697e17a48c07125c2fb33"
-  integrity sha512-8Ri2Zw5YQPBupIRUI6MYKbMWLSR5fTS1coUHaEd6761qBkkqF6m2H8Ly45O0kYRa3+pRl61KysEXgVQTjXIDYQ==
+"@ably/ably-ui@4.1.0-dev.5a3c660":
+  version "4.1.0-dev.5a3c660"
+  resolved "https://npm.pkg.github.com/download/@ably/ably-ui/4.1.0-dev.5a3c660/508094a5523732595537241eeb5dd67b2bdb453fb90004923ee49fc1daeaff32#6b79efac1583143aac1b371b017f868e3559a47c"
+  integrity sha512-Hj6Y2/uYKhigo7Z2zMYjXMvpGKP3QREB1D+NpPdjnztgc330gFqo2wradKdqLZXXgBE0cH9fZvhTjQXuLOGbAg==
   dependencies:
     array-flat-polyfill "^1.0.1"
     deepmerge "^4.2.2"
diff --git a/src/core/Footer/component.html.erb b/src/core/Footer/component.html.erb
index 23d2f9435..821a7237f 100644
--- a/src/core/Footer/component.html.erb
+++ b/src/core/Footer/component.html.erb
@@ -87,7 +87,7 @@
         </li>
         <li class="p-menu-row-snug flex items-center">
           <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
-          <iframe class="w-24 h-24 mt-4" src="https://status.ably.io/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
+          <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
         </li>
       </ul>
     </div>
diff --git a/src/core/Footer/component.jsx b/src/core/Footer/component.jsx
index 508bc94c3..5a1634d86 100644
--- a/src/core/Footer/component.jsx
+++ b/src/core/Footer/component.jsx
@@ -139,7 +139,7 @@ export default function Footer({ paths, urlBase }) {
               <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
                 System status
               </a>
-              <iframe className="w-24 h-24 mt-4" src="https://status.ably.io/embed/icon" allowtransparency="true" frameBorder="0" scrolling="no"></iframe>
+              <iframe className="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameBorder="0" scrolling="no"></iframe>
             </li>
           </ul>
         </div>