diff --git a/packages/freesewing.dev/components/layouts/bare.js b/packages/freesewing.dev/components/layouts/bare.js
index f26b9bca699..22a17e2be89 100644
--- a/packages/freesewing.dev/components/layouts/bare.js
+++ b/packages/freesewing.dev/components/layouts/bare.js
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import Logo from 'shared/components/logos/freesewing.js'
 import Aside from 'shared/components/navigation/aside'
 import get from 'lodash.get'
+import ThemePicker from 'shared/components/theme-picker'
 
 const PageTitle = ({ app, slug, title }) => {
   if (title) return <h1>{title}</h1>
@@ -59,7 +60,7 @@ const DefaultLayout = ({ app, title=false, children=[] }) => {
 
   return (
     <>
-      <Aside app={app} slug={slug} mobileOnly />
+      <Aside app={app} slug={slug} before={<ThemePicker app={app} />} mobileOnly/>
       {children}
     </>
   )
diff --git a/packages/freesewing.dev/components/layouts/docs.js b/packages/freesewing.dev/components/layouts/docs.js
index 285e5a3c124..0af52ccbe7e 100644
--- a/packages/freesewing.dev/components/layouts/docs.js
+++ b/packages/freesewing.dev/components/layouts/docs.js
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import Logo from 'shared/components/logos/freesewing.js'
 import Aside from 'shared/components/navigation/aside'
 import get from 'lodash.get'
+import ThemePicker from 'shared/components/theme-picker'
 
 const PageTitle = ({ app, slug, title }) => {
   if (title) return <h1>{title}</h1>
@@ -59,7 +60,7 @@ const DefaultLayout = ({ app, title=false, children=[] }) => {
 
   return (
     <div className="m-auto flex flex-row justify-center">
-      <Aside app={app} slug={slug} />
+      <Aside app={app} slug={slug} before={<ThemePicker app={app}/>}/>
       <section className="py-28 md:py-36">
         <div>
           {title && (