diff --git a/packages/freesewing.dev/components/header.js b/packages/freesewing.dev/components/header.js
new file mode 100644
index 00000000000..20bcb86e6a2
--- /dev/null
+++ b/packages/freesewing.dev/components/header.js
@@ -0,0 +1,36 @@
+const Right = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+</svg>
+)
+const Left = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+</svg>
+)
+
+const Header = ({ app }) => {
+  return (
+      <header className={`
+        bg-primary
+        p-4
+        block
+        sm:hidden
+        z-10
+      `}>
+          <button
+            className={`
+              btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
+              hover:border hover:bg-transparent hover:border-base-100
+            `}
+            onClick={app.togglePrimaryMenu}>
+              {app.primaryMenu
+                ? <><Left />&nbsp; Hide menu</>
+                : <>Show menu &nbsp;<Right /></>
+              }
+          </button>
+      </header>
+  )
+}
+
+export default Header
diff --git a/packages/freesewing.dev/package.json b/packages/freesewing.dev/package.json
index cf35753276b..aeeb63e86bf 100644
--- a/packages/freesewing.dev/package.json
+++ b/packages/freesewing.dev/package.json
@@ -12,6 +12,7 @@
     "serve": "pm2 start npm --name 'freesewing.dev' -- run start"
   },
   "dependencies": {
+    "@heroicons/react": "^1.0.5",
     "@mdx-js/loader": "^2.0.0-rc.2",
     "@mdx-js/mdx": "^2.0.0-rc.2",
     "@mdx-js/react": "^2.0.0-rc.2",
diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js
index 27fc3494d0c..11347a13e2a 100644
--- a/packages/freesewing.dev/pages/index.js
+++ b/packages/freesewing.dev/pages/index.js
@@ -7,18 +7,7 @@ export default (props) => {
   return (
     <Page app={app} title='FIXME: Create homepage content'>
       <Logo size={200} theme={app.theme}/>
-    <p className="bg-secondary hover:bold mr-4 hover:bg-base-100">test</p>
-    <p className="cursor-pointer label justify-start gap-4 font-lg lg:font-xl font-bold border rounded mb-2">saef</p>
-
-                <label className="cursor-pointer label justify-start gap-4 font-lg lg:font-xl font-bold">
-                  <input
-                    type="checkbox"
-                    checked={develop}
-                    className="toggle toggle-secondary"
-                    onChange={() => setDevelop(!develop)}
-                  />
-                  <span className="ml-4 label-text text-secondary">{develop ? 'Disable' : 'Enable'} Developer View</span>
-                </label>
+      <button className="btn btn-primary" onClick={app.togglePrimaryMenu}>toggle menu</button>
     </Page>
   )
 }
diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js
index 80bdc6f5d3a..4ef6842b996 100644
--- a/packages/freesewing.shared/components/layouts/default.js
+++ b/packages/freesewing.shared/components/layouts/default.js
@@ -5,6 +5,8 @@ import Link from 'next/link'
 import Logo from 'shared/components/logos/freesewing.js'
 import PrimaryNavigation from 'shared/components/navigation/primary'
 import get from 'lodash.get'
+// Site components
+import Header from 'site/components/header'
 
 const iconSize= 48
 
@@ -71,14 +73,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
     bg-base-100
     lg:py-8
     `} data-theme={app.theme}>
-      <header className={`
-        bg-primary
-        p-4
-        block
-        sm:hidden
-      `}>
-        header
-      </header>
+      <Header app={app}/>
       <main className={`
         grow flex flex-row
         sm:py-8
@@ -89,9 +84,11 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
         <aside className={`
           fixed top-0 right-0
           ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
+          pt-16
+          sm:pt-4
           sm:relative sm:transform-none
           h-screen w-screen
-          bg-base-50
+          bg-base-100
           sm:bg-base-50
           sm:max-w-[38.2%]
           sm:flex sm:flex-row-reverse
diff --git a/packages/freesewing.shared/components/navigation/primary.js b/packages/freesewing.shared/components/navigation/primary.js
index 0f3dc9a0c8b..98d5d980781 100644
--- a/packages/freesewing.shared/components/navigation/primary.js
+++ b/packages/freesewing.shared/components/navigation/primary.js
@@ -156,7 +156,7 @@ const TopTheme = ({ app }) => (
     hover:cursor-row-resize
     hover:bg-base-200
     p-2
-    text-primary
+    text-content-base
   `}>
     <Icon icon='theme' className="text-secondary"/>
     <div className={`grow`}>
diff --git a/packages/freesewing.shared/config/tailwind.config.js b/packages/freesewing.shared/config/tailwind.config.js
index a983e299c3b..c0c0b823a21 100644
--- a/packages/freesewing.shared/config/tailwind.config.js
+++ b/packages/freesewing.shared/config/tailwind.config.js
@@ -5,6 +5,8 @@ module.exports = {
   content: [
     './pages/*.js',
     './pages/**/*.js',
+    './components/*.js',
+    './components/**/*.js',
     '../freesewing.shared/components/**/*.js',
   ],
   plugins: [