diff --git a/site/src/components/header/SubNav.astro b/site/src/components/header/SubNav.astro
index b67de6a371..1ddabe25d8 100644
--- a/site/src/components/header/SubNav.astro
+++ b/site/src/components/header/SubNav.astro
@@ -1,32 +1,27 @@
 ---
+import { getVersionedDocsPath } from '@libs/path'
 
+const slug = Astro.url.pathname.split('/')[4]
+
+const sidebarMap = {
+  'getting-started': 'Getting started',
+  foundation: 'Foundation',
+  components: 'Components',
+  utilities: 'Utilities',
+  layout: 'Layout'
+}
 ---
 
 <!--OUDS mod: doesn’t exist anymore in Bootstrap-->
 <nav class="bd-subnavbar py-small d-lg-none" aria-label="Secondary navigation">
-  <div class="container-fluid container-max-width d-flex justify-content-end">
-    <button
-      class="btn btn-default btn-icon"
-      type="button"
-      data-bs-toggle="offcanvas"
-      data-bs-target="#bdSidebar"
-      aria-controls="bdSidebar"
-      aria-label="Toggle docs navigation"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        class="bi"
-        fill="currentColor"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"
-        ></path>
-      </svg>
+  <div class="container-fluid container-max-width d-flex justify-content-start">
+    <button class="btn btn-default" type="button" data-bs-toggle="offcanvas"
+      data-bs-target="#bdSidebar" aria-controls="bdSidebar">
+        <svg aria-hidden="true">
+          <use xlink:href={`${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#outgoing')}`}></use>
+        </svg>
+      <span class="d-none d-sm-inline">Browse docs: {sidebarMap[slug]}</span>
+      <span class="d-sm-none">Browse docs</span><span class="visually-hidden">{sidebarMap[slug]}</span>
     </button>
   </div>
 </nav>
diff --git a/site/src/components/home/MastHead.astro b/site/src/components/home/MastHead.astro
index 282e924acd..1ebdadb599 100644
--- a/site/src/components/home/MastHead.astro
+++ b/site/src/components/home/MastHead.astro
@@ -28,7 +28,7 @@ import Code from '@components/shortcodes/Code.astro'
         />
       </div>
 
-      <div class="d-flex mb-scaled-medium gap-medium">
+      <div class="d-grid d-md-flex col-12 col-sm-7 me-auto mb-scaled-medium gap-medium">
         <a href={getVersionedDocsPath('getting-started/introduction')} class="btn btn-strong">
           <svg class="bi me-small" aria-hidden="true">
             <use xlink:href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#book-half')}></use>
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index ce8310c25d..17ef691ad9 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -133,7 +133,7 @@ const multipleComponents = componentsVersions.length > 1 ? 's' : ''
           frontmatter.toc && headings && headings.length > 0 && (
             <h2 class="mb-none" id="docs-toc">
               <button
-                class="btn btn-default p-md-none mb-small mb-md-none text-decoration-none bd-toc-toggle d-md-none"
+                class="btn btn-default p-md-none mb-small mb-md-none text-decoration-none d-md-none"
                 type="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#tocContents"
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 5c4cb00bbd..fe16c18462 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -53,19 +53,6 @@
   }
 }
 
-.bd-toc-toggle {
-  display: flex;
-  align-items: center;
-  border-width: 1px; // OUDS mod
-
-  @include media-breakpoint-down(sm) {
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  // OUDS mod: no `@include media-breakpoint-down(md)`
-}
-
 .bd-toc-collapse {
   @include media-breakpoint-down(md) {
     nav {
diff --git a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
index 616b97958c..ad83452243 100644
--- a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -132,6 +132,10 @@
     <path fill-rule="evenodd"
           d="M500,100C265.279,100,75,251.1,75,437.5c0,144.464,114.3,267.724,275,315.873V925L500,775c234.722,0,425-151.1,425-337.5S734.722,100,500,100Zm0,475H325a25,25,0,0,1,0-50H500A25,25,0,0,1,500,575ZM675,450H325a25,25,0,0,1,0-50H675A25,25,0,0,1,675,450Zm0-125H325a25,25,0,0,1,0-50H675A25,25,0,0,1,675,325Z"/>
   </symbol>
+  <!-- icon outgoing v1.4 -->
+  <symbol id="outgoing" viewBox="0 0 24 24" fill="currentColor">
+    <path d="m9.074 7.427 5.402.001v-4.8l7.721 7.726a1.8 1.8 0 0 1 0 2.545l-7.721 7.729v-4.8h-6.6a3.6 3.6 0 0 0-3.6 3.6v1.944A7.798 7.798 0 0 1 9.074 7.427Z"/>
+  </symbol>
   <symbol id="component-atom" viewBox="0 0 24 24" fill="currentColor">
     <path fill-rule="evenodd"
           d="M19.01 8.676c-.246-.1-.5-.193-.765-.28.506-2.05.198-4.603-1.135-5.22-1.104-.637-2.647-.273-4.354 1.023l.858.858c.928-.626 1.926-1.281 2.896-.841 1.054.772.798 2.527.577 3.848a19.641 19.641 0 0 0-2.585-.443c-.84-1.148-1.735-2.17-2.796-3.073C7.633.992 4.565 3.38 5.75 8.393c-5.262 1.608-5.208 5.617.032 7.198-1.138 4.807 1.636 7.313 5.587 4.153 1.867-1.48 3.33-3.422 4.533-5.484l-.654-1.294c-1.078 2.002-2.414 3.9-4.104 5.405-3.24 2.833-5.042 1.75-4.204-2.452.83.198 1.673.342 2.522.431.331.454.672.885 1.02 1.29l.858-.842c-.093-.108-.185-.22-.277-.332.285.01.3.016.59.017l1.007-1.213c-.847.028-1.694.008-2.538-.062a23.169 23.169 0 0 1-1.285-2.091l-.6 1.37c.106.18.215.358.325.534a17.553 17.553 0 0 1-1.333-.266c.124-.42.27-.849.436-1.284l.01.018.612-1.45-.006-.01a23.308 23.308 0 0 1 1.888-3.267 23.35 23.35 0 0 1 3.672.002c1.253 1.827 2.298 3.87 2.925 5.99l-.153.036-.988 1.413c.493-.079.97-.174 1.429-.285.628 3.08-.182 5.376-3.406 3.066l-.85.866c3.905 2.982 6.507.377 5.413-4.26 4.513-1.318 5.677-4.998.797-6.914ZM8.115 9.764c-.347.566-.889 1.736-1.186 2.343a19.578 19.578 0 0 0-.852 2.318c-4.047-1.372-4.103-3.47-.033-4.864.122.417.264.842.425 1.272l.804-1.352a9.099 9.099 0 0 1-.077-.254c.45-.11.923-.204 1.413-.282-.168.268-.333.54-.494.819Zm3.879-2.274c-.1 0-.701.01-.883.017.085-.104.17-.207.255-.307l-.85-.85c-.342.397-.678.822-1.005 1.268a19.62 19.62 0 0 0-2.604.445c-1.205-6.659 3.548-3.712 5.995-.556-.3-.01-.603-.016-.908-.017Zm8.431 5.58c-.515.52-1.612 1.066-2.506 1.352-.562-1.911-1.455-3.772-2.52-5.473.486.077.954.17 1.4.28-.033.115-.068.23-.105.347l.75 1.482c.195-.506.365-1.006.508-1.495 1.541.508 4.193 1.851 2.473 3.507Zm-8.431-2.964a1.921 1.921 0 1 0 0 3.843 1.921 1.921 0 0 0 0-3.843Z"
diff --git a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
index 616b97958c..ad83452243 100644
--- a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -132,6 +132,10 @@
     <path fill-rule="evenodd"
           d="M500,100C265.279,100,75,251.1,75,437.5c0,144.464,114.3,267.724,275,315.873V925L500,775c234.722,0,425-151.1,425-337.5S734.722,100,500,100Zm0,475H325a25,25,0,0,1,0-50H500A25,25,0,0,1,500,575ZM675,450H325a25,25,0,0,1,0-50H675A25,25,0,0,1,675,450Zm0-125H325a25,25,0,0,1,0-50H675A25,25,0,0,1,675,325Z"/>
   </symbol>
+  <!-- icon outgoing v1.4 -->
+  <symbol id="outgoing" viewBox="0 0 24 24" fill="currentColor">
+    <path d="m9.074 7.427 5.402.001v-4.8l7.721 7.726a1.8 1.8 0 0 1 0 2.545l-7.721 7.729v-4.8h-6.6a3.6 3.6 0 0 0-3.6 3.6v1.944A7.798 7.798 0 0 1 9.074 7.427Z"/>
+  </symbol>
   <symbol id="component-atom" viewBox="0 0 24 24" fill="currentColor">
     <path fill-rule="evenodd"
           d="M19.01 8.676c-.246-.1-.5-.193-.765-.28.506-2.05.198-4.603-1.135-5.22-1.104-.637-2.647-.273-4.354 1.023l.858.858c.928-.626 1.926-1.281 2.896-.841 1.054.772.798 2.527.577 3.848a19.641 19.641 0 0 0-2.585-.443c-.84-1.148-1.735-2.17-2.796-3.073C7.633.992 4.565 3.38 5.75 8.393c-5.262 1.608-5.208 5.617.032 7.198-1.138 4.807 1.636 7.313 5.587 4.153 1.867-1.48 3.33-3.422 4.533-5.484l-.654-1.294c-1.078 2.002-2.414 3.9-4.104 5.405-3.24 2.833-5.042 1.75-4.204-2.452.83.198 1.673.342 2.522.431.331.454.672.885 1.02 1.29l.858-.842c-.093-.108-.185-.22-.277-.332.285.01.3.016.59.017l1.007-1.213c-.847.028-1.694.008-2.538-.062a23.169 23.169 0 0 1-1.285-2.091l-.6 1.37c.106.18.215.358.325.534a17.553 17.553 0 0 1-1.333-.266c.124-.42.27-.849.436-1.284l.01.018.612-1.45-.006-.01a23.308 23.308 0 0 1 1.888-3.267 23.35 23.35 0 0 1 3.672.002c1.253 1.827 2.298 3.87 2.925 5.99l-.153.036-.988 1.413c.493-.079.97-.174 1.429-.285.628 3.08-.182 5.376-3.406 3.066l-.85.866c3.905 2.982 6.507.377 5.413-4.26 4.513-1.318 5.677-4.998.797-6.914ZM8.115 9.764c-.347.566-.889 1.736-1.186 2.343a19.578 19.578 0 0 0-.852 2.318c-4.047-1.372-4.103-3.47-.033-4.864.122.417.264.842.425 1.272l.804-1.352a9.099 9.099 0 0 1-.077-.254c.45-.11.923-.204 1.413-.282-.168.268-.333.54-.494.819Zm3.879-2.274c-.1 0-.701.01-.883.017.085-.104.17-.207.255-.307l-.85-.85c-.342.397-.678.822-1.005 1.268a19.62 19.62 0 0 0-2.604.445c-1.205-6.659 3.548-3.712 5.995-.556-.3-.01-.603-.016-.908-.017Zm8.431 5.58c-.515.52-1.612 1.066-2.506 1.352-.562-1.911-1.455-3.772-2.52-5.473.486.077.954.17 1.4.28-.033.115-.068.23-.105.347l.75 1.482c.195-.506.365-1.006.508-1.495 1.541.508 4.193 1.851 2.473 3.507Zm-8.431-2.964a1.921 1.921 0 1 0 0 3.843 1.921 1.921 0 0 0 0-3.843Z"
diff --git a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
index f485900452..75e85bf25f 100644
--- a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -108,6 +108,10 @@
   <symbol id="ui-radios" viewBox="0 0 24 24" fill="currentColor">
     <path fill-rule="evenodd" d="M6.96 8.227h9.493a.633.633 0 0 1 0 1.265H6.961a.633.633 0 0 1 0-1.265Zm0-3.797h9.493a.633.633 0 1 1 0 1.265H6.961a.633.633 0 1 1 0-1.265Zm10.722 9.175h-9.85l-5.198 4.588a.632.632 0 0 1-.996-.734l1.734-3.854H2.53A2.533 2.533 0 0 1 0 11.075V2.568A2.571 2.571 0 0 1 2.568 0h11.037a.633.633 0 1 1 0 1.265H2.568c-.718 0-1.302.585-1.302 1.303v8.507c0 .697.567 1.265 1.264 1.265h1.82a.633.633 0 0 1 .578.892l-.932 2.072 3.179-2.806a.631.631 0 0 1 .419-.158h10.088c.718 0 1.303-.584 1.303-1.303V2.568c0-.718-.585-1.303-1.303-1.303h-.992a.632.632 0 1 1 0-1.265h.992a2.571 2.571 0 0 1 2.568 2.568v8.47a2.571 2.571 0 0 1-2.568 2.567Z"/>
   </symbol>
+  <!-- icon outgoing v1.4 -->
+  <symbol id="outgoing" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M3.12 17.695a.72.72 0 0 1 .72.72v.785a.72.72 0 0 1-1.44 0v-.785a.72.72 0 0 1 .72-.72Zm11.242-13.39c.26-.3.684-.3.945 0l6.075 6.993c.29.333.29.874 0 1.208l-6.075 6.992c-.261.3-.684.3-.945 0a.853.853 0 0 1 0-1.087l5-5.753h-9.91c-2.997 0-4.345.965-4.97 1.779a3.211 3.211 0 0 0-.567 1.156 2.67 2.67 0 0 0-.076.456v.015-.005a.72.72 0 0 1-1.44 0h.72c-.7 0-.72-.001-.72-.002v-.01a1.377 1.377 0 0 1 .002-.072 4.103 4.103 0 0 1 .119-.74 4.65 4.65 0 0 1 .82-1.676c.958-1.246 2.776-2.341 6.112-2.341h9.971l-5.062-5.826a.853.853 0 0 1 0-1.087Z"/>
+  </symbol>
   <!-- Orange version -->
   <symbol id="component-atom" viewBox="0 0 24 24" fill="currentColor">
     <path fill-rule="evenodd"