diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 850a0151b..28f953925 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -82,7 +82,7 @@
   <body class="layout-{{ layout | stripExtension }}">
     <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
     <wa-page view="desktop" disable-navigation-toggle="">
-      <header slot="header">
+      <header slot="header" class="wa-split">
         {# Logo #}
         <div id="docs-branding">
           {# Nav toggle #}
@@ -98,9 +98,9 @@
           <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
         </div>
 
-        <div id="docs-toolbar">
+        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
           {# Desktop selectors #}
-          <div class="only-desktop">
+          <div class="only-desktop wa-cluster wa-gap-xs">
             {% include "preset-theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}
           </div>
@@ -118,7 +118,7 @@
       {% if hasSidebar %}
         {# Mobile selectors #}
         <div class="wa-mobile-only" slot="navigation-header">
-          <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
+          <div class="wa-cluster wa-gap-xs">
             {% include "preset-theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}
           </div>
diff --git a/docs/assets/scripts/preset-theme.js b/docs/assets/scripts/preset-theme.js
index 58227a3ed..ef868db01 100644
--- a/docs/assets/scripts/preset-theme.js
+++ b/docs/assets/scripts/preset-theme.js
@@ -56,7 +56,9 @@
         customElements.whenDefined(selectedItem.localName).then(async () => {
           await selectedItem.updateComplete;
           selectedItem.checked = true;
-          container.querySelector('.preset-theme-selector__text').textContent = selectedItem.innerText;
+          container.querySelectorAll('.preset-theme-selector__text').forEach(themeSelector => {
+            themeSelector.textContent = selectedItem.innerText;
+          });
         });
       }
     });
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index d9937e1ce..7f4bfc1c2 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -34,10 +34,6 @@ wa-page::part(header-actions) {
 }
 
 wa-page > header {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   padding-inline: var(--wa-space-xl);
 
   a[href='/'] {
@@ -215,6 +211,20 @@ wa-page::part(menu) {
   scrollbar-width: thin;
 }
 
+wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
+  padding: 0;
+
+  & wa-details::part(icon) {
+    padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
+  }
+}
+
+[slot='navigation-header'] wa-menu {
+  font-family: var(--wa-font-family-body);
+  font-size: var(--wa-font-size-m);
+  font-weight: var(--wa-font-weight-normal);
+}
+
 /* Main content */
 wa-page > main {
   max-width: 80ch;
