diff --git a/sites/org/components/header/index.mjs b/sites/org/components/header/index.mjs
index 6a2753c2ed9..facd9d26249 100644
--- a/sites/org/components/header/index.mjs
+++ b/sites/org/components/header/index.mjs
@@ -116,10 +116,10 @@ const NavIcons = ({ setModal, setSearch }) => {
   )
 }
 
-export const Header = ({ show }) => {
+export const Header = () => {
   const { setModal } = useContext(ModalContext)
   return (
-    <HeaderWrapper show={show}>
+    <HeaderWrapper>
       <div className="m-auto">
         <div className="p-0 flex flex-row gap-2 justify-between text-neutral-content items-center">
           {/* Non-mobile content */}
diff --git a/sites/org/components/layouts/default.mjs b/sites/org/components/layouts/default.mjs
index 834b240a309..593201184ca 100644
--- a/sites/org/components/layouts/default.mjs
+++ b/sites/org/components/layouts/default.mjs
@@ -13,7 +13,7 @@ export const DefaultLayout = ({ children = [], pageTitle = false }) => (
 
     <BaseLayoutWide>
       {pageTitle && (
-        <div className="xl:pl-4 md:pt-8">
+        <div className="xl:pl-4">
           <Breadcrumbs />
           <h1 className="break-words">{pageTitle}</h1>
         </div>
diff --git a/sites/org/components/layouts/docs.mjs b/sites/org/components/layouts/docs.mjs
index 8fb739640bc..4e72166b8d1 100644
--- a/sites/org/components/layouts/docs.mjs
+++ b/sites/org/components/layouts/docs.mjs
@@ -60,7 +60,7 @@ export const DocsLayout = ({ children = [], frontmatter }) => {
         </BaseLayoutLeft>
 
         <BaseLayoutProse>
-          <div className="w-full md:pt-8">
+          <div className="w-full">
             <Breadcrumbs />
             <h1 className="break-words searchme">{frontmatter.title}</h1>
             <div className="block xl:hidden">
diff --git a/sites/org/components/layouts/post.mjs b/sites/org/components/layouts/post.mjs
index 0476cbfba7a..c0054abb4fc 100644
--- a/sites/org/components/layouts/post.mjs
+++ b/sites/org/components/layouts/post.mjs
@@ -31,7 +31,7 @@ export const PostLayout = ({ children = [], slug, frontmatter, locale }) => (
       </BaseLayoutLeft>
 
       <BaseLayoutProse>
-        <div className="w-full md:pt-8">
+        <div className="w-full">
           <Breadcrumbs />
           <h1 className="break-words searchme">{frontmatter.title}</h1>
           <div className="block xl:hidden">
diff --git a/sites/org/pages/new/[design].mjs b/sites/org/pages/new/[design].mjs
index 24d7d3d4fbb..58eb22243ab 100644
--- a/sites/org/pages/new/[design].mjs
+++ b/sites/org/pages/new/[design].mjs
@@ -16,7 +16,7 @@ const NewDesignPage = ({ page, design }) => {
   const Design = useDesign(design)
 
   return (
-    <PageWrapper {...page} title={design} layout={WorkbenchLayout}>
+    <PageWrapper {...page} title={design} layout={WorkbenchLayout} header={null}>
       <Workbench {...{ design, Design, DynamicDocs }} />
     </PageWrapper>
   )
diff --git a/sites/shared/components/base-layout.mjs b/sites/shared/components/base-layout.mjs
index c7db16e48fe..20a10a6b7cd 100644
--- a/sites/shared/components/base-layout.mjs
+++ b/sites/shared/components/base-layout.mjs
@@ -2,7 +2,7 @@
  * The default full-page FreeSewing layout
  */
 export const BaseLayout = ({ children = [] }) => (
-  <div className="flex flex-row items-start mt-8 w-full justify-between 2xl:px-36 xl:px-12 px-4 gap-0 lg:gap-4 xl:gap-8 3xl: gap-12">
+  <div className="flex flex-row items-start w-full justify-between 2xl:px-36 xl:px-12 px-4 gap-0 lg:gap-4 xl:gap-8 3xl: gap-12">
     {children}
   </div>
 )
@@ -11,26 +11,26 @@ export const BaseLayout = ({ children = [] }) => (
  * The left column of the default layout
  */
 export const BaseLayoutLeft = ({ children = [] }) => (
-  <div className="max-w-96 w-1/4 mt-8 hidden lg:block shrink-0">{children}</div>
+  <div className="max-w-96 w-1/4 hidden lg:block shrink-0 my-8">{children}</div>
 )
 
 /*
  * The right column of the default layout
  */
 export const BaseLayoutRight = ({ children = [] }) => (
-  <div className="max-w-96 w-1/4 mt-8 hidden xl:block">{children}</div>
+  <div className="max-w-96 w-1/4 hidden xl:block my-8">{children}</div>
 )
 
 /*
  * The main column for prose (text like docs and so on)
  */
 export const BaseLayoutProse = ({ children = [] }) => (
-  <div className="grow w-full m-auto max-w-prose mt-0 mb-8">{children}</div>
+  <div className="grow w-full m-auto max-w-prose my-8">{children}</div>
 )
 
 /*
  * The central column for wide content (no max-width)
  */
 export const BaseLayoutWide = ({ children = [] }) => (
-  <div className="grow w-full m-auto mt-0 mb-8 grow">{children}</div>
+  <div className="grow w-full m-auto my-8 grow">{children}</div>
 )
diff --git a/sites/shared/components/designs/design-picker.mjs b/sites/shared/components/designs/design-picker.mjs
index bec04cbbd20..72e86728d48 100644
--- a/sites/shared/components/designs/design-picker.mjs
+++ b/sites/shared/components/designs/design-picker.mjs
@@ -12,7 +12,7 @@ export const DesignPicker = ({ hrefBuilder = false }) => {
   for (const d in designs) translated[t(`${d}.t`)] = d
 
   return (
-    <div className="flex flex-row flex-wrap gap-2">
+    <div className="flex flex-row flex-wrap gap-2 mt-8">
       {Object.keys(translated)
         .sort()
         .map((d) => (
diff --git a/sites/shared/components/icons.mjs b/sites/shared/components/icons.mjs
index f770fc26893..273de79ca2d 100644
--- a/sites/shared/components/icons.mjs
+++ b/sites/shared/components/icons.mjs
@@ -391,6 +391,12 @@ export const KeyIcon = (props) => (
   </IconWrapper>
 )
 
+export const KioskIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M 3,17.033898 V 7.2838983 c 0,-1.242641 1.007359,-2.25 2.25,-2.25 h 13.5 c 1.242641,0 2.25,1.007359 2.25,2.25 v 9.7499997 m -18,0 c 0,1.242641 1.007359,2.25 2.25,2.25 h 13.5 c 1.242641,0 2.25,-1.007359 2.25,-2.25" />
+  </IconWrapper>
+)
+
 export const LabelIcon = (props) => (
   <IconWrapper {...props}>
     <path d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
diff --git a/sites/shared/components/workbench/menus/core-settings/config.mjs b/sites/shared/components/workbench/menus/core-settings/config.mjs
index ef9d5509011..7c17853ef7f 100644
--- a/sites/shared/components/workbench/menus/core-settings/config.mjs
+++ b/sites/shared/components/workbench/menus/core-settings/config.mjs
@@ -109,8 +109,8 @@ export const loadSettingsConfig = ({
   },
   expand: {
     control: 4, // Show when control > 3
-    list: [0, 1],
-    dflt: 0,
+    list: [1, 0],
+    dflt: 1,
     choiceTitles: {
       0: 'expandNo',
       1: 'expandYes',
diff --git a/sites/shared/components/workbench/menus/mobile-menubar.mjs b/sites/shared/components/workbench/menus/mobile-menubar.mjs
index 71c94e1aac0..1e17ea8f2dc 100644
--- a/sites/shared/components/workbench/menus/mobile-menubar.mjs
+++ b/sites/shared/components/workbench/menus/mobile-menubar.mjs
@@ -3,7 +3,6 @@ import { ModalContext } from 'shared/context/modal-context.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { CloseIcon } from 'shared/components/icons.mjs'
 import { MobileMenubarContext } from 'shared/context/mobile-menubar-context.mjs'
-import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
 import { MenuAltIcon } from 'shared/components/icons.mjs'
 
 /**
@@ -64,7 +63,6 @@ export const MobileMenubar = () => {
     <div
       className={`
       lg:hidden
-      ${shownHeaderSelector('bottom-16')}
       sticky bottom-0 w-20 -ml-20 self-end
       duration-300 transition-all
       flex flex-col-reverse gap-2 mb-2
diff --git a/sites/shared/components/workbench/menus/ui-settings/config.mjs b/sites/shared/components/workbench/menus/ui-settings/config.mjs
index 2654732e700..d9f59e99d2e 100644
--- a/sites/shared/components/workbench/menus/ui-settings/config.mjs
+++ b/sites/shared/components/workbench/menus/ui-settings/config.mjs
@@ -1,4 +1,4 @@
-import { RocketIcon, ControlIcon } from 'shared/components/icons.mjs'
+import { RocketIcon, ControlIcon, KioskIcon } from 'shared/components/icons.mjs'
 
 export const loadSettingsConfig = () => {
   const uiSettings = {
@@ -9,12 +9,26 @@ export const loadSettingsConfig = () => {
       choiceTitles: {},
       icon: ControlIcon,
     },
+    kiosk: {
+      control: 4, // Show when control > 3
+      list: [0, 1],
+      choiceTitles: {
+        0: 'ui-settings:websiteMode',
+        1: 'ui-settings:kioskMode',
+      },
+      //valueTitles: {
+      //  react: 'ui-settings:regular',
+      //  svg: 'ui-settings:kiosk',
+      //},
+      dflt: 0,
+      icon: KioskIcon,
+    },
     renderer: {
       control: 4, // Show when control > 3
       list: ['react', 'svg'],
       choiceTitles: {
-        react: 'renderWithReact',
-        svg: 'renderWithCore',
+        react: 'ui-settings:renderWithReact',
+        svg: 'ui-settings:renderWithCore',
       },
       valueTitles: {
         react: 'React',
diff --git a/sites/shared/components/workbench/menus/ui-settings/en.yaml b/sites/shared/components/workbench/menus/ui-settings/en.yaml
index 6913c5aa938..79b15a0361c 100644
--- a/sites/shared/components/workbench/menus/ui-settings/en.yaml
+++ b/sites/shared/components/workbench/menus/ui-settings/en.yaml
@@ -8,12 +8,13 @@ renderWithCore.t: Render with Freesewing's Core library
 renderWithCore.d: Render directly to SVG from Core. Allows no interactivity and is optimized for print. Use this if you want to know what it will look like when exported.
 control.t: User Experience
 control.d: Which user experience do you prefer? Please note that this is an account setting, so it will impact the entire website.
-inspect.t: Inspect
-inspect.d: Enabling this will allow you to drill down into the pattern, and pull up information about its various parts, paths, and points.
-inspectNo.t: Disable the inspector
-inspectNo.d: This is the default, the pattern inspector is disabled and the pattern is displayed as usual.
-inspectYes.t: Enable the inspector
-inspectYes.d: With the pattern inspector enabled and the React rendering engine selected, we will add interactivity to the pattern to allow you to inspect the various elements that make up the pattern.
+kiosk.t: Kiosk mode
+kiosk.d: Enable this to utilize the entire screen for the pattern drafting environment
+websiteMode.t: Regular mode
+websiteMode.d: Anchors the pattern drafting environment whithin the default website layout.
+kioskMode.t: Kiosk mode
+kioskMode.d: Utilizes the entire screen for the pattern drafting environment, hiding all other website elements.
+
 no: No
 yes: Yes
 draft: Draft
diff --git a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs
index 0c467df0e19..164bd010a29 100644
--- a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs
+++ b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs
@@ -16,6 +16,7 @@ export const ControlSettingInput = (props) => {
 }
 
 export const inputs = {
-  renderer: ListInput,
   control: ControlSettingInput,
+  kiosk: ListInput,
+  renderer: ListInput,
 }
diff --git a/sites/shared/components/workbench/menus/ui-settings/values.mjs b/sites/shared/components/workbench/menus/ui-settings/values.mjs
index 1cdc672cd14..d53dbecebfc 100644
--- a/sites/shared/components/workbench/menus/ui-settings/values.mjs
+++ b/sites/shared/components/workbench/menus/ui-settings/values.mjs
@@ -2,6 +2,7 @@ import { Difficulty } from 'shared/components/designs/difficulty.mjs'
 import { ListValue } from '../shared/values.mjs'
 
 export const values = {
-  renderer: ListValue,
   control: ({ control }) => <Difficulty score={control} color="primary" />,
+  kiosk: ListValue,
+  renderer: ListValue,
 }
diff --git a/sites/shared/components/workbench/new.mjs b/sites/shared/components/workbench/new.mjs
index 7b8d69b1d35..6b9be3c4a12 100644
--- a/sites/shared/components/workbench/new.mjs
+++ b/sites/shared/components/workbench/new.mjs
@@ -8,8 +8,9 @@ import { useControlState } from 'shared/components/account/control.mjs'
 // Dependencies
 import { pluginTheme } from '@freesewing/plugin-theme'
 import { pluginI18n } from '@freesewing/plugin-i18n'
-import { objUpdate, hasRequiredMeasurements } from 'shared/utils.mjs'
+import { objUpdate, hasRequiredMeasurements, nsMerge } from 'shared/utils.mjs'
 // Components
+import { Header, ns as headerNs } from 'site/components/header/index.mjs'
 import { WorkbenchHeader } from './header.mjs'
 import { ErrorView } from 'shared/components/error/view.mjs'
 import { ModalSpinner } from 'shared/components/modal/spinner.mjs'
@@ -45,6 +46,7 @@ export const ns = [
 
 const defaultUi = {
   renderer: 'react',
+  kiosk: false,
 }
 
 const views = {
@@ -61,6 +63,8 @@ const views = {
 
 const draftViews = ['draft', 'inspect']
 
+const kioskClasses = 'z-30 w-screen h-screen fixed top-0 left-0 bg-base-100'
+
 export const Workbench = ({ design, Design, DynamicDocs }) => {
   // Hooks
   const { t, i18n } = useTranslation([...ns, design])
@@ -214,10 +218,13 @@ export const Workbench = ({ design, Design, DynamicDocs }) => {
   }
 
   return (
-    <div className="flex flex-row min-h-screen">
-      <WorkbenchHeader {...{ view, setView, update }} />
-      <div className="grow">{viewContent}</div>
-      <MobileMenubar />
-    </div>
+    <>
+      {!ui.kiosk && <Header />}
+      <div className={`flex flex-row min-h-screen ${ui.kiosk ? kioskClasses : ''}`}>
+        <WorkbenchHeader {...{ view, setView, update }} />
+        <div className="grow">{viewContent}</div>
+        <MobileMenubar />
+      </div>
+    </>
   )
 }
diff --git a/sites/shared/components/workbench/views/draft/header.mjs b/sites/shared/components/workbench/views/draft/header.mjs
index 151bcd33386..194684c9726 100644
--- a/sites/shared/components/workbench/views/draft/header.mjs
+++ b/sites/shared/components/workbench/views/draft/header.mjs
@@ -22,8 +22,8 @@ import {
   ZoomInIcon,
   ZoomOutIcon,
   ExpandIcon,
+  KioskIcon,
 } from 'shared/components/icons.mjs'
-import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs'
 
 export const ns = ['common', 'core-settings', 'ui-settings']
 
@@ -128,11 +128,13 @@ export const DraftHeader = ({ update, settings, ui, control, account, design, se
 
   return (
     <div
-      className={`hidden lg:flex sticky top-0 z-20 ${shownHeaderSelector(
-        'lg:top-24'
-      )} transition-[top] duration-300 ease-in-out`}
+      className={`hidden lg:flex sticky top-0 ${
+        ui.kiosk ? 'z-50' : 'z-20'
+      }} transition-[top] duration-300 ease-in-out`}
     >
-      <div className="hidden lg:flex flex-row flex-wrap gap-4 py-4 pt-8 w-full bg-neutral text-neutral-content items-center justify-center">
+      <div
+        className={`hidden lg:flex flex-row flex-wrap gap-4 py-2 w-full bg-neutral text-neutral-content items-center justify-center`}
+      >
         {headerZoomButtons}
         <Spacer />
         <div className="flex flex-row items-center gap-4">
@@ -161,7 +163,7 @@ export const DraftHeader = ({ update, settings, ui, control, account, design, se
           />
           <IconButton
             Icon={ExpandIcon}
-            dflt={settings.expand}
+            dflt={settings.expand || typeof settings.expand === 'undefined' ? true : false}
             onClick={() =>
               update.settings(
                 ['expand'],
@@ -194,7 +196,14 @@ export const DraftHeader = ({ update, settings, ui, control, account, design, se
             </button>
           ))}
         </div>
-        <Spacer />
+        <div className="flex flex-row items-center gap-4">
+          <IconButton
+            Icon={KioskIcon}
+            dflt={ui.kiosk ? false : true}
+            onClick={() => update.ui(['kiosk'], ui.kiosk ? 0 : 1)}
+            title={t('ui-settings:kiosk.t')}
+          />
+        </div>
         <div className="flex flex-row items-center gap-4">
           <IconButton
             Icon={RocketIcon}
diff --git a/sites/shared/components/workbench/views/draft/menu.mjs b/sites/shared/components/workbench/views/draft/menu.mjs
index 2f0a146e2cd..d9c965ce289 100644
--- a/sites/shared/components/workbench/views/draft/menu.mjs
+++ b/sites/shared/components/workbench/views/draft/menu.mjs
@@ -1,3 +1,4 @@
+import { loadSettingsConfig as loadUiSettingsConfig } from 'shared/components/workbench/menus/ui-settings/config.mjs'
 import {
   DesignOptions,
   ns as designMenuNs,
@@ -7,6 +8,7 @@ import {
   ns as coreMenuNs,
 } from 'shared/components/workbench/menus/core-settings/index.mjs'
 import { UiSettings, ns as uiNs } from 'shared/components/workbench/menus/ui-settings/index.mjs'
+import { UiConfig } from 'shared/components/workbench/menus/ui-settings/config.mjs'
 import { useTranslation } from 'next-i18next'
 import { nsMerge } from 'shared/utils.mjs'
 import { SettingsIcon, OptionsIcon, DesktopIcon, FlagIcon } from 'shared/components/icons.mjs'
@@ -44,6 +46,7 @@ export const DraftMenu = ({
     DynamicDocs,
     control,
   }
+  const uiSettingsConfig = loadUiSettingsConfig()
 
   const sections = [
     {
@@ -67,7 +70,7 @@ export const DraftMenu = ({
   ]
 
   const items = []
-  if (flags)
+  if (control >= uiSettingsConfig.kiosk.control && flags)
     items.push([
       <FlagsAccordionTitle flags={flags} />,
       <FlagsAccordionEntries {...{ update, control, flags }} />,
diff --git a/sites/shared/components/workbench/views/flags.mjs b/sites/shared/components/workbench/views/flags.mjs
index 88fbedcfa88..9e4081a94d1 100644
--- a/sites/shared/components/workbench/views/flags.mjs
+++ b/sites/shared/components/workbench/views/flags.mjs
@@ -119,7 +119,7 @@ export const FlagsAccordionEntries = ({ flags, update }) => {
           <div className="w-full flex flex-row gap2 justify-between" key={i}>
             <div className="flex flex-row items-center gap-2">
               <Icon />
-              <span className="font-medium">{title}</span>
+              <span className="font-medium text-left">{title}</span>
             </div>
             <span className="uppercase font-bold">{flag.type}</span>
           </div>,
diff --git a/sites/shared/components/wrappers/header.mjs b/sites/shared/components/wrappers/header.mjs
index 66d9f392031..e2ec57f86c0 100644
--- a/sites/shared/components/wrappers/header.mjs
+++ b/sites/shared/components/wrappers/header.mjs
@@ -1,24 +1,11 @@
-export const HeaderWrapper = ({ show, children }) => (
+export const HeaderWrapper = ({ children }) => (
   <header
     className={`
-    fixed bottom-0 md:bottom-auto md:top-0 left-0
-    bg-neutral
-    w-full
-    z-30
-    transition-transform
-    duration-300 ease-in-out
-    ${show ? '' : 'translate-y-36 md:-translate-y-36'}
-    drop-shadow-xl
+    fixed bottom-0 left-0 md:relative
+    bg-neutral drop-shadow-xl w-full
+    border-t border-solid border-base-300 z-20
   `}
   >
-    {' '}
     {children}
   </header>
 )
-
-// can't use string interpolation or tailwind won't account for these classes
-const shownHeaderClasses = {
-  'bottom-16': 'group-[.header-shown]/layout:bottom-16',
-  'md:top-24': 'group-[.header-shown]/layout:md:top-24',
-}
-export const shownHeaderSelector = (cls) => shownHeaderClasses[cls]
diff --git a/sites/shared/components/wrappers/layout.mjs b/sites/shared/components/wrappers/layout.mjs
index 404fcfd281f..957d8f612d6 100644
--- a/sites/shared/components/wrappers/layout.mjs
+++ b/sites/shared/components/wrappers/layout.mjs
@@ -1,4 +1,3 @@
-import { useState, useEffect, useRef } 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'
@@ -15,44 +14,21 @@ export const LayoutWrapper = ({
   footer = true,
   slug,
 }) => {
-  const ChosenHeader = header ? header : Header
-  const prevScrollPos = useRef(0)
-  const [showHeader, setShowHeader] = useState(true)
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const handleScroll = () => {
-        const curScrollPos = typeof window !== 'undefined' ? window.pageYOffset : 0
-
-        if (curScrollPos >= prevScrollPos.current) {
-          if (curScrollPos > 20) setShowHeader(false)
-        } else setShowHeader(true)
-
-        prevScrollPos.current = curScrollPos
-      }
-
-      window.addEventListener('scroll', handleScroll)
-      return () => window.removeEventListener('scroll', handleScroll)
-    }
-  }, [prevScrollPos, setShowHeader])
-
   return (
     <div
       className={`
     flex flex-col justify-between
     min-h-screen
     bg-base-100
-    group/layout
-    header-${showHeader ? 'shown' : 'hidden'}
     `}
     >
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <ChosenHeader show={showHeader} slug={slug} />
+      {header && <Header slug={slug} />}
 
       <main
-        className={`grow transition-margin duration-300 ease-in-out md:group-[.header-shown]/layout:mt-20 lg:mt-4
+        className={`grow transition-margin duration-300 ease-in-out
         }`}
       >
         {children}
diff --git a/sites/shared/components/wrappers/page.mjs b/sites/shared/components/wrappers/page.mjs
index e1b9e369daa..35c31277551 100644
--- a/sites/shared/components/wrappers/page.mjs
+++ b/sites/shared/components/wrappers/page.mjs
@@ -20,7 +20,7 @@ export const PageWrapper = (props) => {
   /*
    * Deconstruct props
    */
-  const { layout = DefaultLayout, footer = true, header = false, children = [], path = [] } = props
+  const { layout = DefaultLayout, footer = true, header = true, children = [], path = [] } = props
   // Title is typically set in props.t but check props.title too
   const pageTitle = props.t ? props.t : props.title ? props.title : null