diff --git a/sites/dev/components/header/index.mjs b/sites/dev/components/header/index.mjs
index 09aebd209fc..dd050c191c1 100644
--- a/sites/dev/components/header/index.mjs
+++ b/sites/dev/components/header/index.mjs
@@ -1,9 +1,8 @@
 // Hooks
-import { useState, useEffect, useContext } from 'react'
+import { useContext } from 'react'
 import { useTranslation } from 'next-i18next'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
-import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import {
   I18nIcon,
@@ -17,7 +16,7 @@ import {
   FreeSewingIcon,
   HeartIcon,
 } from 'shared/components/icons.mjs'
-import { Ribbon } from 'shared/components/ribbon.mjs'
+import { HeaderWrapper } from 'shared/components/wrappers/header.mjs'
 import { ModalThemePicker, ns as themeNs } from 'shared/components/modal/theme-picker.mjs'
 import { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
 
@@ -100,38 +99,11 @@ const NavIcons = ({ setModal }) => {
   )
 }
 
-export const Header = () => {
+export const Header = (props) => {
   const { setModal } = useContext(ModalContext) || {}
-  const { loading } = useContext(LoadingContext)
-  const [prevScrollPos, setPrevScrollPos] = useState(0)
-  const [show, setShow] = useState(true)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleScroll = () => {
-        const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0
-        if (curScrollPos >= prevScrollPos) {
-          if (show && curScrollPos > 20) setShow(false)
-        } else setShow(true)
-        setPrevScrollPos(curScrollPos)
-      }
-      window.addEventListener('scroll', handleScroll)
-      return () => window.removeEventListener('scroll', handleScroll)
-    }
-  }, [prevScrollPos, show])
 
   return (
-    <header
-      className={`
-      fixed bottom-0 lg:bottom-auto lg:top-0 left-0
-      bg-neutral
-      w-full
-      z-30
-      transition-transform
-      ${show || loading ? '' : 'fixed bottom-0 lg:top-0 left-0 translate-y-36 lg:-translate-y-36'}
-      drop-shadow-xl
-    `}
-    >
+    <HeaderWrapper {...props}>
       <div className="m-auto md:px-8">
         <div className="p-0 flex flex-row gap-2 justify-between text-neutral-content items-center">
           {/* Non-mobile content */}
@@ -145,7 +117,6 @@ export const Header = () => {
           </div>
         </div>
       </div>
-      <Ribbon />
-    </header>
+    </HeaderWrapper>
   )
 }
diff --git a/sites/dev/components/layouts/docs.mjs b/sites/dev/components/layouts/docs.mjs
index 0a80bec6bd0..290579ea4d7 100644
--- a/sites/dev/components/layouts/docs.mjs
+++ b/sites/dev/components/layouts/docs.mjs
@@ -10,7 +10,7 @@ export const DocsLayout = ({ children = [], pageTitle = false }) => {
   const { title, crumbs } = useContext(NavigationContext)
 
   return (
-    <div className="grid grid-cols-4 m-auto justify-center place-items-stretch lg:mt-16">
+    <div className="grid grid-cols-4 m-auto justify-center place-items-stretch">
       <AsideNavigation />
       <section className="col-span-4 lg:col-span-3 py-8 lg:py-16 px-4 lg:pl-8 bg-base-50">
         {title && (
diff --git a/sites/dev/components/search.mjs b/sites/dev/components/search.mjs
index a08401de2fb..07bef9c796c 100644
--- a/sites/dev/components/search.mjs
+++ b/sites/dev/components/search.mjs
@@ -4,6 +4,8 @@ import { siteConfig } from 'site/site.config.mjs'
 import Link from 'next/link'
 import { ClearIcon } from 'shared/components/icons.mjs'
 
+export const ns = ['search']
+
 const searchClient = algoliasearch(siteConfig.algolia.app, siteConfig.algolia.key)
 
 const Hit = (props) => (
diff --git a/sites/dev/components/wrappers/layout.mjs b/sites/dev/components/wrappers/layout.mjs
deleted file mode 100644
index 74192275a65..00000000000
--- a/sites/dev/components/wrappers/layout.mjs
+++ /dev/null
@@ -1,26 +0,0 @@
-import Head from 'next/head'
-import { Header, ns as headerNs } from 'site/components/header/index.mjs'
-import { Footer, ns as footerNs } from 'shared/components/footer/index.mjs'
-
-export const ns = [...new Set([...headerNs, ...footerNs])]
-
-export const LayoutWrapper = ({ children = [], header = false }) => {
-  const ChosenHeader = header ? header : Header
-
-  return (
-    <div
-      className={`
-    flex flex-col justify-between
-    min-h-screen
-    bg-base-100
-    `}
-    >
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-      </Head>
-      <ChosenHeader />
-      <main className="grow">{children}</main>
-      <Footer />
-    </div>
-  )
-}
diff --git a/sites/lab/components/header/index.mjs b/sites/lab/components/header/index.mjs
index 10ca605854c..a7a3c6a86ce 100644
--- a/sites/lab/components/header/index.mjs
+++ b/sites/lab/components/header/index.mjs
@@ -1,9 +1,8 @@
 // Hooks
-import { useState, useEffect, useContext } from 'react'
+import { useContext } from 'react'
 import { useTranslation } from 'next-i18next'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
-import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import {
   DesignIcon,
@@ -17,7 +16,7 @@ import {
   GitHubIcon,
   PlusIcon,
 } from 'shared/components/icons.mjs'
-import { Ribbon } from 'shared/components/ribbon.mjs'
+import { HeaderWrapper } from 'shared/components/wrappers/header.mjs'
 import { ModalThemePicker, ns as themeNs } from 'shared/components/modal/theme-picker.mjs'
 import { ModalLocalePicker, ns as localeNs } from 'shared/components/modal/locale-picker.mjs'
 import { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
@@ -93,38 +92,11 @@ const NavIcons = ({ setModal }) => {
   )
 }
 
-export const Header = ({ setSearch }) => {
+export const Header = ({ setSearch, show }) => {
   const { setModal } = useContext(ModalContext)
-  const { loading } = useContext(LoadingContext)
-  const [prevScrollPos, setPrevScrollPos] = useState(0)
-  const [show, setShow] = useState(true)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleScroll = () => {
-        const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0
-        if (curScrollPos >= prevScrollPos) {
-          if (show && curScrollPos > 20) setShow(false)
-        } else setShow(true)
-        setPrevScrollPos(curScrollPos)
-      }
-      window.addEventListener('scroll', handleScroll)
-      return () => window.removeEventListener('scroll', handleScroll)
-    }
-  }, [prevScrollPos, show])
 
   return (
-    <header
-      className={`
-      fixed bottom-0 lg:bottom-auto lg:top-0 left-0
-      bg-neutral
-      w-full
-      z-30
-      transition-transform
-      ${show || loading ? '' : 'fixed bottom-0 lg:top-0 left-0 translate-y-36 lg:-translate-y-36'}
-      drop-shadow-xl
-    `}
-    >
+    <HeaderWrapper {...{ setSearch, show }}>
       <div className="m-auto md:px-8">
         <div className="p-0 flex flex-row gap-2 justify-between text-neutral-content items-center">
           {/* Non-mobile content */}
@@ -138,7 +110,6 @@ export const Header = ({ setSearch }) => {
           </div>
         </div>
       </div>
-      <Ribbon />
-    </header>
+    </HeaderWrapper>
   )
 }
diff --git a/sites/lab/components/layouts/docs.mjs b/sites/lab/components/layouts/docs.mjs
index aca2b765c40..00d85faf839 100644
--- a/sites/lab/components/layouts/docs.mjs
+++ b/sites/lab/components/layouts/docs.mjs
@@ -10,9 +10,9 @@ export const DocsLayout = ({ children = [], pageTitle = false }) => {
   const { title, crumbs } = useContext(NavigationContext)
 
   return (
-    <div className="grid grid-cols-4 m-auto justify-center place-items-stretch lg:mt-16">
+    <div className="grid grid-cols-4 m-auto justify-center place-items-stretch">
       <AsideNavigation />
-      <section className="col-span-4 lg:col-span-3 py-24 px-4 lg:pl-8 bg-base-50">
+      <section className="col-span-4 lg:col-span-3 py-8 lg:py-24 px-4 lg:pl-8 bg-base-50">
         {title && (
           <div className="xl:pl-4">
             <Breadcrumbs crumbs={crumbs} title={pageTitle ? pageTitle : title} />
diff --git a/sites/lab/components/layouts/lab.mjs b/sites/lab/components/layouts/lab.mjs
index 2a59eb01044..0acaf114474 100644
--- a/sites/lab/components/layouts/lab.mjs
+++ b/sites/lab/components/layouts/lab.mjs
@@ -14,7 +14,7 @@ export const BeforeNav = ({ app }) => (
 )
 
 export const LabLayout = ({ app, AltMenu, children = [] }) => (
-  <div className="py-24 lg:py-36 flex flex-row">
+  <div className="pb-24 flex flex-row">
     <div className="w-full xl:w-3/4 px-8">{children}</div>
     <aside
       className={`
diff --git a/sites/lab/components/layouts/workbench.mjs b/sites/lab/components/layouts/workbench.mjs
index ef1ac12b2f4..48aa2916d00 100644
--- a/sites/lab/components/layouts/workbench.mjs
+++ b/sites/lab/components/layouts/workbench.mjs
@@ -1,7 +1,7 @@
 export const ns = []
 
 export const WorkbenchLayout = (props) => (
-  <section id="fs-workbench" className="m-0 lg:mt-24 p-0">
+  <section id="fs-workbench" className="m-0 p-0">
     {props.children}
   </section>
 )
diff --git a/sites/lab/components/search.mjs b/sites/lab/components/search.mjs
index 3c068311b7a..05776e05154 100644
--- a/sites/lab/components/search.mjs
+++ b/sites/lab/components/search.mjs
@@ -1 +1,2 @@
+export const ns = []
 export const Search = () => null
diff --git a/sites/lab/components/wrappers/layout.mjs b/sites/lab/components/wrappers/layout.mjs
deleted file mode 100644
index 74192275a65..00000000000
--- a/sites/lab/components/wrappers/layout.mjs
+++ /dev/null
@@ -1,26 +0,0 @@
-import Head from 'next/head'
-import { Header, ns as headerNs } from 'site/components/header/index.mjs'
-import { Footer, ns as footerNs } from 'shared/components/footer/index.mjs'
-
-export const ns = [...new Set([...headerNs, ...footerNs])]
-
-export const LayoutWrapper = ({ children = [], header = false }) => {
-  const ChosenHeader = header ? header : Header
-
-  return (
-    <div
-      className={`
-    flex flex-col justify-between
-    min-h-screen
-    bg-base-100
-    `}
-    >
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-      </Head>
-      <ChosenHeader />
-      <main className="grow">{children}</main>
-      <Footer />
-    </div>
-  )
-}
diff --git a/sites/org/components/header/index.mjs b/sites/org/components/header/index.mjs
index 74f8fa30360..5e4772a6deb 100644
--- a/sites/org/components/header/index.mjs
+++ b/sites/org/components/header/index.mjs
@@ -1,9 +1,8 @@
 // Hooks
-import { useState, useEffect, useContext } from 'react'
+import { useContext } from 'react'
 import { useTranslation } from 'next-i18next'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
-import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import {
   DesignIcon,
@@ -18,7 +17,7 @@ import {
   PageIcon,
   PlusIcon,
 } from 'shared/components/icons.mjs'
-import { Ribbon } from 'shared/components/ribbon.mjs'
+import { HeaderWrapper } from 'shared/components/wrappers/header.mjs'
 import { ModalThemePicker, ns as themeNs } from 'shared/components/modal/theme-picker.mjs'
 import { ModalLocalePicker, ns as localeNs } from 'shared/components/modal/locale-picker.mjs'
 import { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
@@ -101,38 +100,10 @@ const NavIcons = ({ setModal, setSearch }) => {
   )
 }
 
-export const Header = ({ setSearch }) => {
+export const Header = ({ setSearch, show }) => {
   const { setModal } = useContext(ModalContext)
-  const { loading } = useContext(LoadingContext)
-  const [prevScrollPos, setPrevScrollPos] = useState(0)
-  const [show, setShow] = useState(true)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleScroll = () => {
-        const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0
-        if (curScrollPos >= prevScrollPos) {
-          if (show && curScrollPos > 20) setShow(false)
-        } else setShow(true)
-        setPrevScrollPos(curScrollPos)
-      }
-      window.addEventListener('scroll', handleScroll)
-      return () => window.removeEventListener('scroll', handleScroll)
-    }
-  }, [prevScrollPos, show])
-
   return (
-    <header
-      className={`
-      fixed bottom-0 lg:bottom-auto lg:top-0 left-0
-      bg-neutral
-      w-full
-      z-30
-      transition-transform
-      ${show || loading ? '' : 'fixed bottom-0 lg:top-0 left-0 translate-y-36 lg:-translate-y-36'}
-      drop-shadow-xl
-    `}
-    >
+    <HeaderWrapper setSearch={setSearch} show={show}>
       <div className="m-auto md:px-8">
         <div className="p-0 flex flex-row gap-2 justify-between text-neutral-content items-center">
           {/* Non-mobile content */}
@@ -146,7 +117,6 @@ export const Header = ({ setSearch }) => {
           </div>
         </div>
       </div>
-      <Ribbon />
-    </header>
+    </HeaderWrapper>
   )
 }
diff --git a/sites/org/components/layouts/docs.mjs b/sites/org/components/layouts/docs.mjs
index 2f8f5754db6..c967924f5f4 100644
--- a/sites/org/components/layouts/docs.mjs
+++ b/sites/org/components/layouts/docs.mjs
@@ -10,7 +10,7 @@ export const DocsLayout = ({ children = [], pageTitle = false }) => {
   const { crumbs } = useContext(NavigationContext)
 
   return (
-    <div className="grid grid-cols-4 mx-auto justify-center place-items-stretch lg:mt-16">
+    <div className="grid grid-cols-4 mx-auto justify-center place-items-stretch">
       <AsideNavigation />
       <section className="col-span-4 lg:col-span-3 py-8 lg:py-24 px-4 lg:pl-8 bg-base-50">
         {pageTitle && (
diff --git a/sites/org/components/layouts/workbench.mjs b/sites/org/components/layouts/workbench.mjs
index ef1ac12b2f4..48aa2916d00 100644
--- a/sites/org/components/layouts/workbench.mjs
+++ b/sites/org/components/layouts/workbench.mjs
@@ -1,7 +1,7 @@
 export const ns = []
 
 export const WorkbenchLayout = (props) => (
-  <section id="fs-workbench" className="m-0 lg:mt-24 p-0">
+  <section id="fs-workbench" className="m-0 p-0">
     {props.children}
   </section>
 )
diff --git a/sites/shared/components/navigation/aside.mjs b/sites/shared/components/navigation/aside.mjs
index e695c9578db..4dd91d57542 100644
--- a/sites/shared/components/navigation/aside.mjs
+++ b/sites/shared/components/navigation/aside.mjs
@@ -6,20 +6,18 @@ export const AsideNavigation = ({ mobileOnly = false, before = [], after = [] })
   <aside
     className={`
     hidden lg:block
-    fixed top-0 right-0 h-screen
-    overflow-y-auto z-20
+    min-h-screen
+    z-20
     bg-base-100 text-base-content
-    px-0 pb-20 pt-8 shrink-0
+    px-0 pb-20 shrink-0 pt-8
 
     lg:w-auto
-    lg:sticky lg:relative lg:transform-none
     lg:justify-center
     lg:bg-base-300 lg:bg-opacity-10
-    lg:pt-16
     ${mobileOnly ? 'block lg:hidden w-full ' : ''}
   `}
   >
-    <div className="w-screen lg:w-auto">
+    <div className="w-screen lg:w-auto lg:sticky lg:top-28 max-h-screen overflow-y-auto">
       {before}
       <MainSections />
       <div className="mt-4 pt-4">
diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs
index d28dfa8c802..2840eefd2c3 100644
--- a/sites/shared/components/workbench/header.mjs
+++ b/sites/shared/components/workbench/header.mjs
@@ -59,7 +59,7 @@ const NavIcons = ({ setView, setDense, dense, view }) => {
         extraClasses="text-success bg-neutral hover:bg-success hover:text-neutral"
       >
         {dense ? (
-          <RightIcon className={`${iconSize} animate-bounce-right`} stroke={4} />
+          <RightIcon className={`${iconSize} group-hover:animate-bounce-right`} stroke={4} />
         ) : (
           <LeftIcon className={`${iconSize} animate-bounce-right`} stroke={4} />
         )}
@@ -143,19 +143,23 @@ const NavIcons = ({ setView, setDense, dense, view }) => {
 
 export const WorkbenchHeader = ({ view, setView }) => {
   const [dense, setDense] = useState(true)
-
   return (
     <header
       className={`
-      hidden lg:block
+      h-full w-64 min-h-screen pt-4
       bg-neutral
-      w-64 min-h-screen pt-4
+
       transition-all
       drop-shadow-xl
       ${dense ? '-ml-52' : 'ml-0'}
+      group
     `}
     >
-      <div className="hidden lg:flex lg:flex-col lg:justify-between items-center w-full">
+      <div
+        className={`
+      flex flex-col lg:justify-between
+      items-center w-full sticky lg:top-26`}
+      >
         <NavIcons {...{ setView, setDense, dense, view }} />
       </div>
     </header>
diff --git a/sites/shared/components/workbench/index.mjs b/sites/shared/components/workbench/index.mjs
index 54ec9f602d1..ab6e0fadbef 100644
--- a/sites/shared/components/workbench/index.mjs
+++ b/sites/shared/components/workbench/index.mjs
@@ -182,8 +182,8 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) =
   }
 
   return (
-    <div className="flex flex-row">
-      <div className="grow-no shrink-no">
+    <div className="flex flex-row content-stretch">
+      <div className="grow-0 shrink-0">
         <WorkbenchHeader {...{ view, setView, update }} />
       </div>
       <div className="grow">{viewContent}</div>
diff --git a/sites/shared/components/wrappers/header.mjs b/sites/shared/components/wrappers/header.mjs
new file mode 100644
index 00000000000..ac26b9184f9
--- /dev/null
+++ b/sites/shared/components/wrappers/header.mjs
@@ -0,0 +1,26 @@
+// Hooks
+import { useContext } from 'react'
+import { LoadingContext } from 'shared/context/loading-context.mjs'
+import { Ribbon } from 'shared/components/ribbon.mjs'
+
+export const HeaderWrapper = ({ setSearch, show, children }) => {
+  const { loading } = useContext(LoadingContext)
+  return (
+    <header
+      className={`
+      fixed bottom-0 lg:bottom-auto lg:top-0 left-0
+      bg-neutral
+      w-full
+      z-30
+      transition-transform
+      duration-300 ease-in-out
+      ${show || loading ? '' : 'bottom-0 lg:top-0 left-0 translate-y-36 lg:-translate-y-36'}
+      drop-shadow-xl
+    `}
+    >
+      {' '}
+      {children}
+      <Ribbon />
+    </header>
+  )
+}
diff --git a/sites/org/components/wrappers/layout.mjs b/sites/shared/components/wrappers/layout.mjs
similarity index 53%
rename from sites/org/components/wrappers/layout.mjs
rename to sites/shared/components/wrappers/layout.mjs
index 6cc14943a5d..396ea917712 100644
--- a/sites/org/components/wrappers/layout.mjs
+++ b/sites/shared/components/wrappers/layout.mjs
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import Head from 'next/head'
 import { Header, ns as headerNs } from 'site/components/header/index.mjs'
 import { Footer, ns as footerNs } from 'shared/components/footer/index.mjs'
@@ -14,6 +15,23 @@ export const LayoutWrapper = ({
 }) => {
   const ChosenHeader = header ? header : Header
 
+  const [prevScrollPos, setPrevScrollPos] = useState(0)
+  const [showHeader, setShowHeader] = useState(true)
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const handleScroll = () => {
+        const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0
+        if (curScrollPos >= prevScrollPos) {
+          if (showHeader && curScrollPos > 20) setShowHeader(false)
+        } else setShowHeader(true)
+        setPrevScrollPos(curScrollPos)
+      }
+      window.addEventListener('scroll', handleScroll)
+      return () => window.removeEventListener('scroll', handleScroll)
+    }
+  }, [prevScrollPos, showHeader])
+
   return (
     <div
       className={`
@@ -25,14 +43,22 @@ export const LayoutWrapper = ({
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <ChosenHeader setSearch={setSearch} />
-      <main className="grow">{children}</main>
+      <ChosenHeader show={showHeader} />
+
+      <main
+        className={`grow transition-margin duration-300 ease-in-out ${
+          showHeader ? 'lg:mt-24 ' : 'lg:mt-4'
+        }`}
+      >
+        {children}
+      </main>
+
       {!noSearch && search && (
         <>
           <div
             className={`
-          fixed w-full max-h-screen bg-base-100 top-0 z-30 pt-0 pb-16 px-8
-          md:rounded-lg md:top-24
+          w-full max-h-screen bg-base-100 top-0 z-30 pt-0 pb-16 px-8
+          md:rounded-lg
           md:max-w-xl md:m-auto md:inset-x-12
           md:max-w-2xl
           lg:max-w-4xl
diff --git a/sites/shared/components/wrappers/page.mjs b/sites/shared/components/wrappers/page.mjs
index 91359defc4a..fa59c8e80c8 100644
--- a/sites/shared/components/wrappers/page.mjs
+++ b/sites/shared/components/wrappers/page.mjs
@@ -6,7 +6,7 @@ import { useTheme } from 'shared/hooks/use-theme.mjs'
 // Components
 import Head from 'next/head'
 import { SwipeWrapper } from 'shared/components/wrappers/swipes.mjs'
-import { LayoutWrapper, ns as layoutNs } from 'site/components/wrappers/layout.mjs'
+import { LayoutWrapper, ns as layoutNs } from 'shared/components/wrappers/layout.mjs'
 import { DocsLayout, ns as docsNs } from 'site/components/layouts/docs.mjs'
 import { Feeds } from 'site/components/feeds.mjs'
 import { ModalContext } from 'shared/context/modal-context.mjs'
@@ -58,7 +58,7 @@ export const PageWrapper = (props) => {
       })
       setNavupdates(navupdates + 1)
     }
-  }, [path, pageTitle, slug])
+  }, [path, pageTitle, slug, locale, navupdates, setNavigation])
 
   /*
    * Hotkeys (keyboard actions)