diff --git a/app/elements/docs/layout.mjs b/app/elements/docs/layout.mjs
index 0cc88ed1..28f50a1c 100644
--- a/app/elements/docs/layout.mjs
+++ b/app/elements/docs/layout.mjs
@@ -77,7 +77,7 @@ export default function DocsLayout({ html, state }) {
     <docs-symbols class="hidden"></docs-symbols>
 
     <div id="sidebar" class="hidden block-lg pi-2 pbe2">
-      <docs-nav aria-label="sidebar"></docs-nav>
+      <docs-nav aria-label="sidebar" searchid="search-widescreen"></docs-nav>
     </div>
 
     <div id="content" class="pbs0 pbs-none-lg pbe2">
diff --git a/app/elements/docs/nav.mjs b/app/elements/docs/nav.mjs
index d89adf6a..e14f3708 100644
--- a/app/elements/docs/nav.mjs
+++ b/app/elements/docs/nav.mjs
@@ -48,8 +48,9 @@ function Description(item, classes = []) {
 }
 
 export default function DocsNav({ html, state }) {
-  const { store } = state
+  const { attrs, store } = state
   const { navData } = store
+  const { searchid } = attrs
 
   return html`
     <style>
@@ -61,28 +62,52 @@ export default function DocsNav({ html, state }) {
         margin-inline: calc(var(--space--4) * -1 - 4px);
         padding-inline: var(--space--4);
         border-inline-start: 4px solid transparent;
-        color: var(--rift-princess);
       }
 
       li a:hover,
       li a.active {
-        background-color: var(--cloud-ateneo);
-        border-color: var(--purple-princess);
+        background-color: var(--lily);
+        border-color: var(--purple);
       }
 
       .category-label {
-        color: var(--purple-white);
+        color: var(--purple);
       }
 
       .description {
-        color: var(--inky-lily);
+        color: var(--inky);
       }
 
       .hasChildren ul {
         padding-inline-start: var(--space--2);
       }
+
+      @media screen and (min-width: 56em) {
+        li a {
+          color: var(--rift-princess);
+        }
+
+        li a:hover,
+        li a.active {
+          background-color: var(--cloud-ateneo);
+          border-color: var(--purple-princess);
+        }
+
+        .category-label {
+          color: var(--purple-white);
+        }
+
+        .description {
+          color: var(--inky-lily);
+        }
+      }
     </style>
 
+    <div class="pbs2 flex gap0 align-items-center">
+      <docs-search searchid="${searchid}"></docs-search>
+      <docs-theme-toggle></docs-theme-toggle>
+    </div>
+
     <nav>${List(navData)}</nav>
   `
 }
diff --git a/app/elements/docs/search.mjs b/app/elements/docs/search.mjs
new file mode 100644
index 00000000..02a865c6
--- /dev/null
+++ b/app/elements/docs/search.mjs
@@ -0,0 +1,122 @@
+export default function DocsSearch({ html, state }) {
+  const { attrs, store } = state
+  const { searchTerm } = store
+  const { searchid } = attrs
+
+  const darkModeExtras = `
+    --docsearch-footer-background: var(--smoke-halite);
+    --docsearch-hit-background: var(--white-denim);
+    --docsearch-hit-color: var(--white);
+    --docsearch-modal-background: var(--smoke-halite);
+    --docsearch-searchbox-background: hsla(0deg 0% 0% / 0.5);
+    --docsearch-searchbox-focus-background: var(--white-denim);
+    --docsearch-text-color: var(--rift-white);
+    --mobile-nav-background: hsla(0deg 0% 0% / 0.66);
+  `
+
+  return html`
+    <style scope="global">
+      /* Docsearch overrides */
+      :root {
+        --docsearch-footer-background: var(--smoke);
+        --docsearch-footer-shadow: none;
+        --docsearch-highlight-color: var(--purple);
+        --docsearch-hit-background: var(--white);
+        --docsearch-hit-color: var(--rift);
+        --docsearch-hit-shadow: 0 1px 2px hsla(0deg 0% 0% / 0.125);
+        --docsearch-modal-background: var(--smoke);
+        --docsearch-modal-shadow: 0 2px 6px hsla(0deg 0% 0% / 0.5);
+        --docsearch-searchbox-background: hsla(0deg 0% 0% / 0.075);
+        --docsearch-searchbox-focus-background: var(--white);
+        --docsearch-searchbox-shadow: inset 0 0 0 2px var(--purple);
+        --docsearch-text-color: var(--rift);
+        --mobile-nav-background: hsla(0deg 0% 100% / 0.85);
+      }
+
+      /* Only use dark styles in widescreen; search shown in global nav docs subnav < 56em */
+      @media screen and (min-width:56em) and (prefers-color-scheme: dark) {
+        :root {
+          ${darkModeExtras}
+        }
+      }
+
+      @media screen and (min-width: 56em) {
+        :root[data-force-theme="dark"] {
+          ${darkModeExtras}
+        }
+      }
+
+      .DocSearch-Button {
+        font-weight: 400;
+        margin-inline-start: 0;
+      }
+
+      .DocSearch-Button:focus {
+        box-shadow: none;
+        outline: 2px auto Highlight;
+        outline: 2px auto -webkit-focus-ring-color;
+      }
+
+      /* Docsearch media query */
+      @media screen and (max-width: 768px) {
+        .DocSearch-Button {
+          background: var(--lily);
+        }
+      }
+
+      .DocSearch-Button-Keys {
+        min-inline-size: calc(32px + 0.8em);
+      }
+
+      .DocSearch-Button-Key {
+        font-weight: 400;
+        font-size: 0.75em;
+        inline-size: 16px;
+      }
+
+      .DocSearch-Container {
+        backdrop-filter: blur(2px) contrast(50%);
+        -webkit-backdrop-filter: blur(2px) contrast(50%);
+        font-size: var(--text-0);
+      }
+
+      /* unset Enhance Styles */
+      .DocSearch-Input:focus-visible {
+        outline: unset;
+        box-shadow: unset;
+      }
+
+      .DocSearch-Hit-content-wrapper {
+        font-weight: 400;
+      }
+
+      .DocSearch-Hit[aria-selected='true'] a {
+        background: var(--dark-purple);
+      }
+
+      .DocSearch-Hits mark {
+        font-weight: 600;
+      }
+    </style>
+
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+
+    <search id="${searchid}"></search>
+
+    <script type="module">
+      import docsearch from '/_static/bundles/docsearch-js.mjs'
+
+      docsearch({
+        appId: '1QR8CXPN0C',
+        apiKey: '781b7bc665ad54b682ab4a31a5ccb55e',
+        indexName: 'enhance',
+        container: '#${searchid}',
+        initialQuery: ${searchTerm ? `'${searchTerm}'` : 'null'},
+      })
+    </script>
+  `
+}
diff --git a/app/elements/docs/theme-toggle.mjs b/app/elements/docs/theme-toggle.mjs
index d5f3b1a7..ecba35d8 100644
--- a/app/elements/docs/theme-toggle.mjs
+++ b/app/elements/docs/theme-toggle.mjs
@@ -7,17 +7,36 @@ export default function DocsThemeToggle({ html }) {
         height: ${size}px;
         width: ${size}px;
       }
+
       input + svg {
         padding-bottom: 2px;
-        color: var(--purple-princess);
+        color: var(--purple);
       }
+
       input:hover + svg,
       input:checked + svg {
         opacity: 1;
-        color: var(--rift-white);
+        color: var(--rift);
       }
+
       input:checked + svg {
-        border-bottom: 2px solid var(--rift-white);
+        border-bottom: 2px solid var(--rift);
+      }
+
+      /* Allow dark mode styles when shown in widescreen layout */
+      @media screen and (min-width: 56em) {
+        input + svg {
+          color: var(--purple-princess);
+        }
+
+        input:hover + svg,
+        input:checked + svg {
+          color: var(--rift-white);
+        }
+
+        input:checked + svg {
+          border-bottom: 2px solid var(--rift-white);
+        }
       }
     </style>
 
diff --git a/app/elements/product-nav.mjs b/app/elements/product-nav.mjs
index 59b42067..4cda70ea 100644
--- a/app/elements/product-nav.mjs
+++ b/app/elements/product-nav.mjs
@@ -14,7 +14,7 @@ export default function ProductNav({ html }) {
       <h2 class="semibold">
         <a href="/docs">Docs</a>
       </h2>
-      <docs-nav></docs-nav>
+      <docs-nav searchid="search-mobile"></docs-nav>
     </masthead-slice>
   `
 }
diff --git a/package-lock.json b/package-lock.json
index 3f9f45b0..c264ee3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1953,7 +1953,7 @@
     },
     "node_modules/@begin/masthead": {
       "version": "0.0.1",
-      "resolved": "git+ssh://git@github.com/beginner-corp/masthead.git#aacc10b3459d8e434ef7a1239cbe420ff69380fb",
+      "resolved": "git+ssh://git@github.com/beginner-corp/masthead.git#414d5c46649c9faccb1a8e4bbf1dec376f7f1199",
       "dependencies": {
         "@enhance/arc-plugin-enhance": "^9.0.0",
         "@enhance/styles-cribsheet": "^0.0.9"
@@ -2004,16 +2004,16 @@
       }
     },
     "node_modules/@enhance/arc-plugin-enhance": {
-      "version": "9.1.2",
-      "resolved": "https://registry.npmjs.org/@enhance/arc-plugin-enhance/-/arc-plugin-enhance-9.1.2.tgz",
-      "integrity": "sha512-f5GWNWU1CG40WstMYj/jaWyAqC9qzETFHOYhGb151CPL5Ch9mKQsndSb6gxmTmQScmhYPE7cdEaaH1OwUZQEBg==",
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/@enhance/arc-plugin-enhance/-/arc-plugin-enhance-9.1.3.tgz",
+      "integrity": "sha512-GFpxZ4vPAsc6fFtOil3ETlMc7YIx4SWi+Gel0U4MImcUwvT2vMK+eoeH90xoxwKTpS74w6H666OrUlszIYgUPA==",
       "dependencies": {
         "@architect/asap": "^6.0.3",
         "@architect/functions": "^7.0.0",
         "@architect/plugin-bundles": "^3.2.0",
         "@begin/data": "^4.0.2",
         "@enhance/arc-plugin-rollup": "^2.0.0",
-        "@enhance/arc-plugin-styles": "^5.0.0",
+        "@enhance/arc-plugin-styles": "^5.0.1",
         "@enhance/enhance-style-transform": "^0.1.2",
         "@enhance/import-transform": "^4.0.0",
         "@enhance/ssr": "^3.5.0",
@@ -2038,13 +2038,13 @@
       }
     },
     "node_modules/@enhance/arc-plugin-styles": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@enhance/arc-plugin-styles/-/arc-plugin-styles-5.0.0.tgz",
-      "integrity": "sha512-tkJqgL39U3t4tCqsKToLYHZJfe3jp3L9e9gR9EWvmIYvzjR/pErRB19gZoL7cFwjtpiQ6Bo6DcZZiu2z9NS69g==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@enhance/arc-plugin-styles/-/arc-plugin-styles-5.0.1.tgz",
+      "integrity": "sha512-VJyEdbI/qkw3jQP+vmOQIXPFys663p0cmq+ExWHZ00G9yI2eZdoCTVvKDUrWuRoXdqhXed9qCkKVY3Tae/FJIg==",
       "dependencies": {
         "@architect/functions": "^5.3.1",
         "@architect/inventory": "^3.3.4",
-        "@enhance/styles": "^6.1.4"
+        "@enhance/styles": "^6.1.5"
       },
       "engines": {
         "node": ">=14"
@@ -2123,9 +2123,9 @@
       }
     },
     "node_modules/@enhance/styles": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/@enhance/styles/-/styles-6.1.4.tgz",
-      "integrity": "sha512-Q7898G5bfII7WfjJMjs2ZNFDKK41mVng7tK3kveyDhZqQbJznfVsWSReCAmTFd+/AmbqgjIeK0wdJpqQ2ozytg==",
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/@enhance/styles/-/styles-6.1.5.tgz",
+      "integrity": "sha512-/o6pIuykg5bGc5E4IDEl7BFVfMaqpdK921XVifWD0cPb5Nb8frb203RuInsgrMrn30mLlLvyLjv9nqR3RMKe7w==",
       "dependencies": {
         "color-to-hsla": "^0.1.1"
       },