diff --git a/Gemfile.lock b/Gemfile.lock
index 9d15bd22a..21a010e2b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (6.8.1)
+    ably-ui (6.5.3.dev.efd8d9f)
       view_component (>= 2.33, < 2.50)
 
 GEM
diff --git a/cypress/integration/core/code/__snapshots__/snapshots.js.snap b/cypress/integration/core/code/__snapshots__/snapshots.js.snap
index 676185688..ec7c40938 100644
--- a/cypress/integration/core/code/__snapshots__/snapshots.js.snap
+++ b/cypress/integration/core/code/__snapshots__/snapshots.js.snap
@@ -1,5 +1,5 @@
 exports[`Code Snapshot Test > react > test case common to both #0`] = `
-<div class="hljs p-32 overflow-auto" data-id="code">
+<div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="javascript"
   ><code class="language-javascript ui-text-code1"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
@@ -13,7 +13,7 @@ channel.subscribe(<span class="hljs-string">'greeting'</span>, <span class="hljs
 `;
 
 exports[`Code Snapshot Test > react > test case common to both #1`] = `
-<div class="hljs p-32 overflow-auto" data-id="code">
+<div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="swift"
   ><code class="language-swift ui-text-code1"><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>)
@@ -27,7 +27,7 @@ channel.subscribe(<span class="hljs-string">"greeting"</span>) { message <span c
 `;
 
 exports[`Code Snapshot Test > react > test case common to both #2`] = `
-<div class="hljs p-32 overflow-auto" data-id="code">
+<div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="java"
   ><code class="language-java ui-text-code1">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
@@ -47,7 +47,7 @@ channel.subscribe(<span class="hljs-string">"greeting"</span>, listener);</code>
 `;
 
 exports[`Code Snapshot Test > view component > test case common to both #0`] = `
-<div class="hljs p-32 overflow-auto" data-id="code">
+<div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="javascript"
   ><code class="language-javascript ui-text-code1"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
@@ -61,7 +61,7 @@ channel.subscribe(<span class="hljs-string">'greeting'</span>, <span class="hljs
 `;
 
 exports[`Code Snapshot Test > view component > test case common to both #1`] = `
-<div class="hljs p-32 overflow-auto" data-id="code">
+<div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="swift"
   ><code class="language-swift ui-text-code1"><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>)
@@ -75,7 +75,7 @@ channel.subscribe(<span class="hljs-string">"greeting"</span>) { message <span c
 `;
 
 exports[`Code Snapshot Test > view component > test case common to both #2`] = `
-<div class="hljs p-32 overflow-auto" data-id="code">
+<div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="java"
   ><code class="language-java ui-text-code1">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb
index 06a67bf0c..4a1389348 100644
--- a/lib/ably_ui/version.rb
+++ b/lib/ably_ui/version.rb
@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '6.8.1'
+  VERSION = '6.5.3.dev.efd8d9f'
 end
diff --git a/package.json b/package.json
index ae2a2c068..7b32db686 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.8.1",
+  "version": "6.5.3-dev.efd8d9f",
   "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 ecc70aa65..b474b617c 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', '6.8.1', require: 'ably_ui'
+gem 'ably-ui', '6.5.3.dev.efd8d9f', require: 'ably_ui'
diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock
index 6115aaf5f..8b9408652 100644
--- a/preview/Gemfile.lock
+++ b/preview/Gemfile.lock
@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (6.8.1)
+    ably-ui (6.5.3.dev.efd8d9f)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.3.4)
       actionpack (= 6.0.3.4)
@@ -169,7 +169,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  ably-ui (= 6.8.1)
+  ably-ui (= 6.5.3.dev.efd8d9f)
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)
diff --git a/preview/app/components/colours_list_component.rb b/preview/app/components/colours_list_component.rb
index b65824b72..2c9c55931 100644
--- a/preview/app/components/colours_list_component.rb
+++ b/preview/app/components/colours_list_component.rb
@@ -22,7 +22,7 @@ def colours
         group_name: "Neutrals",
         group_colours: [
           { bg: 'bg-light-grey', name: "Light Grey", hex: '#F5F5F6', rgb: '245, 245, 246' },
-          { bg: 'bg-mid-grey', name: "Mid Grey", hex: '#DBDBDC', rgb: '219, 219, 220' },
+          { bg: 'bg-mid-grey', name: "Mid Grey", hex: '#D9D9DA', rgb: '217, 217, 218' },
           { bg: 'bg-dark-grey', name: "Dark Grey", hex: '#76767C', rgb: '118, 118, 124' },
           { bg: 'bg-charcoal-grey', name: "Charcoal Grey", hex: '#292831', rgb: '41, 40, 49' }
         ]
diff --git a/preview/app/controllers/components_controller.rb b/preview/app/controllers/components_controller.rb
index bc39936df..0fa200b94 100644
--- a/preview/app/controllers/components_controller.rb
+++ b/preview/app/controllers/components_controller.rb
@@ -58,6 +58,8 @@ def icon
       icon-gui-tick
       icon-gui-warning
       icon-gui-clock
+      icon-gui-arrow-bidirectional-vertical
+      icon-gui-arrow-bidirectional-horizontal
     ]
 
     display_icons = %w[
diff --git a/preview/package.json b/preview/package.json
index bd683c782..453c6eba0 100644
--- a/preview/package.json
+++ b/preview/package.json
@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "6.8.1",
+    "@ably/ui": "6.5.3-dev.efd8d9f",
     "@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 06c566c9c..b7e13761a 100644
--- a/preview/yarn.lock
+++ b/preview/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/ui@6.8.1":
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-6.8.1.tgz#f64aeb26aef6c520302e7023d290077eef7287c0"
-  integrity sha512-LhSnMik4x4hfxYMo2qrLsAUyGy8PBnIjGDKynB3VPE6zW5UgD2Sg/6z0raBgp9lLOSrOszzht0MxqkzdvCVmkQ==
+"@ably/ui@6.5.3-dev.efd8d9f":
+  version "6.5.3-dev.efd8d9f"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-6.5.3-dev.efd8d9f.tgz#84d5024f5d8fc15c6d0611380e622b5e75d645c0"
+  integrity sha512-+HfxZbS6EsLbbsre4Vk1yJxdlHBqzj9TXpjmX0ukw1nSHXQZFpfyPMMcNqRXuzaoTN9BtwKPl1jMINJQv1ez6w==
   dependencies:
     array-flat-polyfill "^1.0.1"
     deepmerge "^4.2.2"
diff --git a/src/core/Code/component.jsx b/src/core/Code/component.jsx
index 65d51f5ff..2bbae42fb 100644
--- a/src/core/Code/component.jsx
+++ b/src/core/Code/component.jsx
@@ -4,11 +4,11 @@ import T from "prop-types";
 import "./component.css";
 import { highlight } from "./component.js";
 
-const Code = ({ language, snippet, textSize = "ui-text-code1" }) => {
+const Code = ({ language, snippet, textSize = "ui-text-code1", padding = "p-32", additionalCSS = "" }) => {
   const HTMLraw = highlight(language, `${snippet}`.trim());
   const className = `language-${language} ${textSize}`;
   return (
-    <div className="hljs p-32 overflow-auto" data-id="code">
+    <div className={`hljs overflow-auto ${padding} ${additionalCSS}`} data-id="code">
       <pre lang={language}>
         <code className={className} dangerouslySetInnerHTML={{ __html: HTMLraw }} />
       </pre>
@@ -20,6 +20,8 @@ Code.propTypes = {
   language: T.string,
   snippet: T.string,
   textSize: T.string,
+  padding: T.string,
+  additionalCSS: T.string,
 };
 
 export default Code;
diff --git a/src/core/icons/icon-gui-arrow-bidirectional-horizontal.svg b/src/core/icons/icon-gui-arrow-bidirectional-horizontal.svg
new file mode 100644
index 000000000..3c388b600
--- /dev/null
+++ b/src/core/icons/icon-gui-arrow-bidirectional-horizontal.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.45338 6L10.5433 3.67789L9.05668 2.33997L5.45668 6.33997V7.6779L9.05668 11.6779L10.5433 10.34L8.4373 8L18 8V6L8.45338 6ZM15.5646 18L5.99999 18L5.99999 16L15.5447 16L13.4567 13.6801L14.9433 12.3421L18.5433 16.3421L18.5433 17.6801L14.9433 21.6801L13.4567 20.3421L15.5646 18Z" fill="currentColor"/>
+</svg>
diff --git a/src/core/icons/icon-gui-arrow-bidirectional-vertical.svg b/src/core/icons/icon-gui-arrow-bidirectional-vertical.svg
new file mode 100644
index 000000000..db9e1bc89
--- /dev/null
+++ b/src/core/icons/icon-gui-arrow-bidirectional-vertical.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 8.24537L21.331 10.3433L22.669 8.85671L18.669 5.25671H17.331L13.331 8.85671L14.669 10.3433L17 8.24537L17 18H19L19 8.24537ZM7 15.3547L9.33103 13.2568L10.669 14.7433L6.66896 18.3433H5.33103L1.33103 14.7433L2.66896 13.2568L5 15.3547V6.00004H7V15.3547Z" fill="currentColor"/>
+</svg>
diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css
index 008687c02..f7fa8e9be 100644
--- a/src/core/styles/properties.css
+++ b/src/core/styles/properties.css
@@ -9,7 +9,7 @@
     --color-bright-red: #ff2739;
     --color-jazzy-pink: #ff17d2;
     --color-light-grey: #f5f5f6;
-    --color-mid-grey: #dbdbdc;
+    --color-mid-grey: #d9d9da;
     --color-dark-grey: #76767c;
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
diff --git a/tailwind.config.js b/tailwind.config.js
index 00a7deb38..7cfc2984a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -143,6 +143,7 @@ module.exports = {
       container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
       "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
       input: "0px 0px 8px 0px rgba(8, 103, 196, 1)", // color-gui-hover at 50%
+      quote: "0rem 1.5rem 2rem 0rem #0000000d",
       // opacity
     },
     letterSpacing: {