diff --git a/Gemfile.lock b/Gemfile.lock
index adf447ac0..6e9130a13 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.7.0.dev.a0d338f)
+    ably-ui (8.7.0.dev.35edbd4)
       view_component (>= 2.33, < 2.50)
 
 GEM
diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb
index fd11af0bb..c6e0b0b87 100644
--- a/lib/ably_ui/version.rb
+++ b/lib/ably_ui/version.rb
@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.7.0.dev.a0d338f'
+  VERSION = '8.7.0.dev.35edbd4'
 end
diff --git a/package.json b/package.json
index aa36f614d..afb64508b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.7.0-dev.a0d338f",
+  "version": "8.7.0-dev.35edbd4",
   "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": {
     "type": "git",
diff --git a/preview/Gemfile b/preview/Gemfile
index 996b645c7..affcb188f 100644
--- a/preview/Gemfile
+++ b/preview/Gemfile
@@ -37,7 +37,7 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '8.7.0.dev.a0d338f', require: 'ably_ui'
+gem 'ably-ui', '8.7.0.dev.35edbd4', require: 'ably_ui'
 
 # https://stackoverflow.com/questions/71191685/visit-psych-nodes-alias-unknown-alias-default-psychbadalias
 gem 'psych', '< 4'
diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock
index 5da8f9cfa..1a2aa7766 100644
--- a/preview/Gemfile.lock
+++ b/preview/Gemfile.lock
@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (8.7.0.dev.a0d338f)
+    ably-ui (8.7.0.dev.35edbd4)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.5.1)
       actionpack (= 6.0.5.1)
@@ -175,7 +175,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  ably-ui (= 8.7.0.dev.a0d338f)
+  ably-ui (= 8.7.0.dev.35edbd4)
   bootsnap (>= 1.4.2)
   byebug
   dotenv-rails
diff --git a/preview/package.json b/preview/package.json
index 1948fdef5..f8d928515 100644
--- a/preview/package.json
+++ b/preview/package.json
@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "8.7.0-dev.a0d338f",
+    "@ably/ui": "8.7.0-dev.35edbd4",
     "@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 a5a3a303f..9b82fa3ff 100644
--- a/preview/yarn.lock
+++ b/preview/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/ui@8.7.0-dev.a0d338f":
-  version "8.7.0-dev.a0d338f"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-8.7.0-dev.a0d338f.tgz#e56e1bfcc38597416b972b581a26812c40b825ad"
-  integrity sha512-IFkjYZgGYbl2PgJWWLoMDU5rPUmfZyLkBBjqOw1LlpS+fb8BaSfCILW/9a56101TTzEQvmjhaAhTuBHCI7wEKQ==
+"@ably/ui@8.7.0-dev.35edbd4":
+  version "8.7.0-dev.35edbd4"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-8.7.0-dev.35edbd4.tgz#18f0f156493dafdf4816c8f24ea9e6fe5c75b97c"
+  integrity sha512-LQCdob5I0te/xi5Jcx9p8MdJuwRMcAeCLeenwSpu8Zardr40SO89n1U6NwsFvMOvJcoTKPsE077RJ96/za768A==
   dependencies:
     addsearch-js-client "^0.7.0"
     array-flat-polyfill "^1.0.1"
diff --git a/src/core/MeganavContentDevelopers/component.html.erb b/src/core/MeganavContentDevelopers/component.html.erb
index e1076ff25..c5c110d30 100644
--- a/src/core/MeganavContentDevelopers/component.html.erb
+++ b/src/core/MeganavContentDevelopers/component.html.erb
@@ -35,7 +35,6 @@
         </li>
       </ul>
     </div>
-
     <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
         <li>
@@ -65,9 +64,17 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Multiplayer reference guide</p>
+              <p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
-
     <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
         Quick links
diff --git a/src/core/MeganavContentDevelopers/component.jsx b/src/core/MeganavContentDevelopers/component.jsx
index 6a65ba52b..dc21d551c 100644
--- a/src/core/MeganavContentDevelopers/component.jsx
+++ b/src/core/MeganavContentDevelopers/component.jsx
@@ -58,7 +58,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">Tutorials & Demos</p>
-                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources. </p>
+                <p className="ui-meganav-media-copy">Get stuck in with our hands-on resources.</p>
               </div>
             </a>
           </li>
@@ -71,6 +71,15 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/reference-guide-multiplayer")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Multiplayer reference guide</p>
+                <p className="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+              </div>
+            </a>
+          </li>
         </ul>
       </div>
 
@@ -99,6 +108,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               <p className="ui-meganav-media-heading">
                 Status
                 <iframe
+                  title="Ably status"
                   src="https://status.ably.com/embed/icon"
                   allowtransparency="true"
                   frameBorder="0"