diff --git a/designs/aaron/i18n/en.json b/designs/aaron/i18n/en.json
index ac6fdfa0f7e..1d4412dee90 100644
--- a/designs/aaron/i18n/en.json
+++ b/designs/aaron/i18n/en.json
@@ -6,8 +6,10 @@
     "neckBinding": "Neck opening knit binding"
   },
   "s": {
-    "cutArmBinding": "Not shown: the **Arm opening knit binding**, two strips of fabric {{{ width }}} wide and {{{ length }}} long <small>(this includes seam allowance)</small>",
-    "cutNeckBinding": "Not shown: the **Neck opening knit binding**, a strip of fabric {{{ width }}} wide and {{{ length }}} long <small>(this includes seam allowance)</small>",
+    "cutArmBinding.t": "The arm opening knit binding is not currently shown",
+    "cutArmBinding.d": "The **Arm opening knit binding** are two strips of fabric {{{ width }}} wide and {{{ length }}} long (this includes seam allowance). They are not shown because the **expand** core setting is currently disabled. Enable it to show this pattern part.",
+    "cutNeckBinding.t": "The neck opening knit binding is not currently shown",
+    "cutNeckBinding.d": "The **Neck opening knit binding** is a strip of fabric {{{ width }}} wide and {{{ length }}} long (this includes seam allowance). It is not shown because the **expand** core setting is currently disabled. Enable it to show this pattern part.",
     "cutOneStripToFinishTheNeckOpening": "Cut one strip to finish the neck opening",
     "cutTwoStripsToFinishTheArmholes": "Cut two strips to finish the armholes",
     "length": "Length",
diff --git a/designs/aaron/src/arm-binding.mjs b/designs/aaron/src/arm-binding.mjs
index eb182eb521d..28878694f67 100644
--- a/designs/aaron/src/arm-binding.mjs
+++ b/designs/aaron/src/arm-binding.mjs
@@ -23,7 +23,8 @@ export const armBinding = {
     if (!expand) {
       // Expand is on, do not draw the part but flag this to the user
       store.flag.note({
-        msg: `aaron:cutArmBinding`,
+        title: `aaron:cutArmBinding.t`,
+        desc: `aaron:cutArmBinding.d`,
         replace: {
           width: units(w),
           length: units(l),
diff --git a/designs/aaron/src/neck-binding.mjs b/designs/aaron/src/neck-binding.mjs
index fecc47fb20e..ee1a1f1c8ea 100644
--- a/designs/aaron/src/neck-binding.mjs
+++ b/designs/aaron/src/neck-binding.mjs
@@ -23,7 +23,8 @@ export const neckBinding = {
     if (!expand) {
       // Expand is on, do not draw the part but flag this to the user
       store.flag.note({
-        msg: `aaron:cutNeckBinding`,
+        title: `aaron:cutNeckBinding.t`,
+        desc: `aaron:cutNeckBinding.d`,
         replace: {
           width: units(w),
           length: units(l),
diff --git a/designs/albert/i18n/en.json b/designs/albert/i18n/en.json
index 4178a4f476c..9f6be980179 100644
--- a/designs/albert/i18n/en.json
+++ b/designs/albert/i18n/en.json
@@ -8,8 +8,10 @@
   },
   "s": {
     "attachStrap": "Attach strap",
-    "cutPocket": "Not shown: the **Pocket**, a rectangle of {{{ width }}} wide and {{{ length }}} long <small>(this includes seam allowance)</small>",
-    "cutStrap": "Not shown: the **Straps**, two rectangles of {{{ width }}} wide and {{{ length }}} long <small>(this includes seam allowance)</small>",
+    "cutPocket.t": "The pocket is not currently shown",
+    "cutPocket.d": "The **Pocket** is a rectangular piece of fabric {{{ width }}} wide and {{{ length }}} long (this includes seam allowance). It is not shown because the **expand** core setting is currently disabled. Enable it to show this pattern part.",
+    "cutStrap.t": "The straps are not currently shown",
+    "cutStrap.d": "The **Straps** are two strips of fabric {{{ width }}} wide and {{{ length }}} long (this includes seam allowance)</small>. They are not shown because the **expand** core setting is currently disabled. Enable it to show this pattern part.",
     "foldHere": "Fold here"
   },
   "o": {
diff --git a/designs/albert/src/pocket.mjs b/designs/albert/src/pocket.mjs
index 15764f4461a..78072c72d49 100644
--- a/designs/albert/src/pocket.mjs
+++ b/designs/albert/src/pocket.mjs
@@ -22,7 +22,8 @@ export const pocket = {
     if (!expand) {
       // Expand is on, do not draw the part but flag this to the user
       store.flag.note({
-        msg: `albert:cutPocket`,
+        title: `albert:cutPocket.t`,
+        desc: `albert:cutPocket.d`,
         replace: {
           width: units(pocketSize * 2 + 2 * sa),
           length: units(pocketSize + 2 * sa + store.get('strapWidth')),
diff --git a/designs/albert/src/strap.mjs b/designs/albert/src/strap.mjs
index cbb0bff914c..defcb2f4de8 100644
--- a/designs/albert/src/strap.mjs
+++ b/designs/albert/src/strap.mjs
@@ -41,10 +41,11 @@ export const strap = {
     if (!expand) {
       // Expand is on, do not draw the part but flag this to the user
       store.flag.note({
-        msg: `albert:cutStrap`,
+        title: `albert:cutStrap.t`,
+        desc: `albert:cutStrap.d`,
         replace: {
-          width: units(store.get('strapWidth') + 2 * sa),
-          length: units(store.get('strapLength') + store.get('strapWidth') * 2 + 2 * sa),
+          width: units(strapWidth + 2 * sa),
+          length: units(strapLength + strapWidth * 2 + 2 * sa),
         },
         suggest: {
           text: 'flag:show',
diff --git a/plugins/plugin-annotations/src/flag.mjs b/plugins/plugin-annotations/src/flag.mjs
index 3f87691b9e3..c5138e9560a 100644
--- a/plugins/plugin-annotations/src/flag.mjs
+++ b/plugins/plugin-annotations/src/flag.mjs
@@ -34,13 +34,13 @@ function flag(type, store, data) {
     type = data.type
   }
 
-  if (!data.id && !data.msg) {
-    store.log.warning(`store.flag.${type} called without an id or msg property`)
+  if (!data.id && !data.title) {
+    store.log.warn(`store.flag.${type} called without an id or title property`)
     console.log(data)
     return
   }
 
-  store.set([...storeRoot, type, data.id ? data.id : data.msg], data)
+  store.set([...storeRoot, type, data.id ? data.id : data.title], data)
 }
 
 /*
@@ -53,7 +53,7 @@ function flag(type, store, data) {
 function unflag(type, store, id) {
   if (type === 'preset' && presets[id]) {
     type = presets[id].type
-    id = presets[id].id || presets[id].msg
+    id = presets[id].id || presets[id].title
   }
   store.unset([...storeRoot, type, id])
 }
@@ -64,7 +64,8 @@ function unflag(type, store, id) {
 const presets = {
   expand: {
     type: 'tip',
-    msg: 'flag:expandIsOff',
+    title: 'flag:expandIsOff.t',
+    desc: 'flag:expandIsOff.d',
     suggest: {
       text: 'flag:enable',
       icon: 'expand',
diff --git a/sites/shared/components/accordion.mjs b/sites/shared/components/accordion.mjs
index b0e0dd9d644..25ccfad7b4d 100644
--- a/sites/shared/components/accordion.mjs
+++ b/sites/shared/components/accordion.mjs
@@ -26,22 +26,25 @@ const BaseAccordion = ({
 }) => {
   const [active, setActive] = useState()
 
+  console.log(items)
   return (
     <nav>
-      {items.map((item, i) =>
-        active === i ? (
-          <div key={i} {...propsGetter(active, i)}>
-            <button onClick={setActive} className="w-full">
+      {items
+        .filter((item) => item[0])
+        .map((item, i) =>
+          active === i ? (
+            <div key={i} {...propsGetter(active, i)}>
+              <button onClick={setActive} className="w-full">
+                {item[0]}
+              </button>
+              {item[1]}
+            </div>
+          ) : (
+            <button key={i} {...getProps(active, i)} onClick={() => setActive(i)}>
               {item[0]}
             </button>
-            {item[1]}
-          </div>
-        ) : (
-          <button key={i} {...getProps(active, i)} onClick={() => setActive(i)}>
-            {item[0]}
-          </button>
-        )
-      )}
+          )
+        )}
     </nav>
   )
 }
diff --git a/sites/shared/components/icons.mjs b/sites/shared/components/icons.mjs
index 572f8d5d562..f770fc26893 100644
--- a/sites/shared/components/icons.mjs
+++ b/sites/shared/components/icons.mjs
@@ -318,6 +318,12 @@ export const FingerprintIcon = (props) => (
   </IconWrapper>
 )
 
+export const FlagIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
+  </IconWrapper>
+)
+
 export const FreeSewingIcon = (props) => (
   <IconWrapper {...props} stroke={0} fill>
     <path d={logoPath} />
diff --git a/sites/shared/components/workbench/views/draft/index.mjs b/sites/shared/components/workbench/views/draft/index.mjs
index 34de1fd3fb3..18521fa3a29 100644
--- a/sites/shared/components/workbench/views/draft/index.mjs
+++ b/sites/shared/components/workbench/views/draft/index.mjs
@@ -49,7 +49,6 @@ export const DraftView = ({
         pattern: output,
         setSettings,
         Header: DraftHeader,
-        flags: pattern.setStores?.[0]?.plugins?.['plugin-annotations']?.flags,
         menu: (
           <DraftMenu
             {...{
@@ -66,6 +65,7 @@ export const DraftView = ({
               renderProps,
               view,
               setView,
+              flags: pattern.setStores?.[0]?.plugins?.['plugin-annotations']?.flags,
             }}
           />
         ),
diff --git a/sites/shared/components/workbench/views/draft/menu.mjs b/sites/shared/components/workbench/views/draft/menu.mjs
index 792b42c7db0..2f0a146e2cd 100644
--- a/sites/shared/components/workbench/views/draft/menu.mjs
+++ b/sites/shared/components/workbench/views/draft/menu.mjs
@@ -9,8 +9,12 @@ import {
 import { UiSettings, ns as uiNs } from 'shared/components/workbench/menus/ui-settings/index.mjs'
 import { useTranslation } from 'next-i18next'
 import { nsMerge } from 'shared/utils.mjs'
-import { SettingsIcon, OptionsIcon, DesktopIcon } from 'shared/components/icons.mjs'
+import { SettingsIcon, OptionsIcon, DesktopIcon, FlagIcon } from 'shared/components/icons.mjs'
 import { Accordion } from 'shared/components/accordion.mjs'
+import {
+  FlagsAccordionTitle,
+  FlagsAccordionEntries,
+} from 'shared/components/workbench/views/flags.mjs'
 
 export const ns = nsMerge(coreMenuNs, designMenuNs, uiNs)
 
@@ -26,6 +30,7 @@ export const DraftMenu = ({
   DynamicDocs,
   view,
   setView,
+  flags = false,
 }) => {
   const { t } = useTranslation()
   const control = account.control
@@ -61,18 +66,24 @@ export const DraftMenu = ({
     },
   ]
 
-  return (
-    <Accordion
-      items={sections.map((section) => [
-        <>
-          <h5 className="flex flex-row gap-2 items-center justify-between w-full">
-            <span>{t(`${section.ns}:${section.name}.t`)}</span>
-            {section.icon}
-          </h5>
-          <p className="text-left">{t(`${section.ns}:${section.name}.d`)}</p>
-        </>,
-        section.menu,
-      ])}
-    />
+  const items = []
+  if (flags)
+    items.push([
+      <FlagsAccordionTitle flags={flags} />,
+      <FlagsAccordionEntries {...{ update, control, flags }} />,
+    ])
+  items.push(
+    ...sections.map((section) => [
+      <>
+        <h5 className="flex flex-row gap-2 items-center justify-between w-full">
+          <span>{t(`${section.ns}:${section.name}.t`)}</span>
+          {section.icon}
+        </h5>
+        <p className="text-left">{t(`${section.ns}:${section.name}.d`)}</p>
+      </>,
+      section.menu,
+    ])
   )
+
+  return <Accordion items={items} />
 }
diff --git a/sites/shared/components/workbench/views/flags.mjs b/sites/shared/components/workbench/views/flags.mjs
index 4eb33dbdeb4..88fbedcfa88 100644
--- a/sites/shared/components/workbench/views/flags.mjs
+++ b/sites/shared/components/workbench/views/flags.mjs
@@ -13,16 +13,10 @@ import {
   ErrorIcon,
   WrenchIcon as FixmeIcon,
   ExpandIcon,
+  FlagIcon,
 } from 'shared/components/icons.mjs'
 import Markdown from 'react-markdown'
-
-const flagColors = {
-  note: 'primary',
-  tip: 'accent',
-  warn: 'error',
-  error: 'error',
-  fixme: 'warning',
-}
+import { SubAccordion } from 'shared/components/accordion.mjs'
 
 const flagIcons = {
   note: ChatIcon,
@@ -34,39 +28,14 @@ const flagIcons = {
   expand: ExpandIcon,
 }
 
-export const Flags = ({ flags, update }) => {
-  const handleUpdate = (config) => {
-    if (config.settings) update.settings(...config.settings)
-    if (config.ui) update.ui(...config.settings)
-  }
-
-  return (
-    <div className="p-4 flex flex-row overflow-x-auto w-full gap-4 max-w-screen">
-      {flagTypes.map((type) =>
-        flags[type]
-          ? Object.values(flags[type]).map((flag) => (
-              <Flag type={type} data={flag} handleUpdate={handleUpdate} key={flag.id} />
-            ))
-          : null
-      )}
-    </div>
-  )
-}
-
-export const Flag = ({ type, data, handleUpdate }) => {
-  const { t } = useTranslation(nsMerge('flag', data.ns, data.msg.split(':').shift()))
-  const [hide, setHide] = useState(false)
-
-  if (hide || !data.msg) return null
-
-  const color = flagColors[type]
+export const Flag = ({ type, data, t, handleUpdate }) => {
   const Icon = flagIcons[type]
   const BtnIcon = data.suggest?.icon ? flagIcons[data.suggest.icon] : false
 
   const button =
     data.suggest?.text && data.suggest?.update ? (
       <button
-        className={`btn btn-sm sm:btn-normal btn-neutral btn-outline grow flex flex-row items-center justify-between sm:grow-0 shrink-0 z-10 ${
+        className={`btn btn-secondary btn-outline flex flex-row items-center ${
           BtnIcon ? 'gap-6' : ''
         }`}
         onClick={() => handleUpdate(data.suggest.update)}
@@ -76,43 +45,87 @@ export const Flag = ({ type, data, handleUpdate }) => {
       </button>
     ) : null
 
-  const msg = data.replace
-    ? mustache.render(t(data.msg), { ...data.replace, '&quot;': '"' })
-    : t(data.msg)
+  const desc = data.replace ? mustache.render(t(data.desc), data.replace) : t(data.desc)
 
   return (
-    <div className="w-4/5 max-w-md shrink-0">
-      <div className={`relative bg-${color} bg-opacity-10`}>
-        <div className="p-3 rounded-lg shadow text-base">
-          <div className="flex flex-row flex-wrap sm:flex-nowrap gap-2 items-start z-10">
-            <div className="first:mt-0 popout-content grow z-10 md flag">
-              <Markdown>{msg}</Markdown>
-            </div>
-            {button ? (
-              <div className="flex flex-row justify-between sm:flex-col gap-2 shrink-0 z-10 w-full sm:w-auto">
-                {button}
-                <button
-                  className="w-1/2 sm:w-full btn btn-ghost btn-sm z-10 flex flex-row items-center justify-between w-full"
-                  onClick={() => setHide(true)}
-                >
-                  {t('flag:dismiss')}
-                  <Icon className="w-5 h-6 sm:w-6 h-6" />
-                </button>
-              </div>
-            ) : (
-              <div className="flex flex-col gap-2">
-                <button
-                  className="btn btn-sm btn-circle btn-ghost"
-                  onClick={() => setHide(true)}
-                  title={t('flag:hide')}
-                >
-                  <Icon className="w-5 h-5 sm:w-6 h-6" />
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
+    <div className="flex flex-col gap-2 items-start">
+      <div className="first:mt-0 grow md flag">
+        <Markdown children={desc} />
       </div>
+      {button ? <div className="mt-2 w-full flex flex-row justify-end">{button}</div> : null}
     </div>
   )
 }
+
+const flattenFlags = (flags) => {
+  const all = {}
+  const ns = ['flag']
+  for (const type of flagTypes) {
+    let i = 0
+    if (flags[type]) {
+      for (const [key, flag] of Object.entries(flags[type])) {
+        i++
+        all[`${type}-${i}`] = { ...flag, type }
+        if (flag.ns) ns.push(flag.ns)
+        if (flag.title.includes(':')) ns.push(flag.title.split(':').shift())
+        if (flag.desc.includes(':')) ns.push(flag.desc.split(':').shift())
+      }
+    }
+  }
+
+  return [all, ns]
+}
+
+export const FlagsAccordionTitle = ({ flags }) => {
+  const { t } = useTranslation(['flag'])
+  const [flagList] = flattenFlags(flags)
+
+  if (Object.keys(flagList).length < 1) return null
+
+  return (
+    <>
+      <h5 className="flex flex-row gap-2 items-center justify-between w-full">
+        <span>
+          {t('flag:flagMenu.t')} ({Object.keys(flagList).length})
+        </span>
+        <FlagIcon className="w-8 h-8" />
+      </h5>
+      <p className="text-left">
+        {Object.keys(flagList).length > 1 ? t('flag:flagMenuMany.d') : t('flag:flagMenuOne.d')}
+      </p>
+    </>
+  )
+}
+
+export const FlagsAccordionEntries = ({ flags, update }) => {
+  const [flagList, ns] = flattenFlags(flags)
+  const { t } = useTranslation(nsMerge(ns))
+  const [all, setAll] = useState(flagList)
+
+  if (Object.keys(flagList).length < 1) return null
+
+  const handleUpdate = (config) => {
+    if (config.settings) update.settings(...config.settings)
+    if (config.ui) update.ui(...config.settings)
+  }
+
+  return (
+    <SubAccordion
+      items={Object.entries(all).map(([key, flag], i) => {
+        const Icon = flagIcons[flag.type]
+        const title = flag.replace ? mustache.render(t(flag.title), flag.replace) : t(flag.title)
+
+        return [
+          <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>
+            </div>
+            <span className="uppercase font-bold">{flag.type}</span>
+          </div>,
+          <Flag key={key} t={t} type={flag.type} data={flag} handleUpdate={handleUpdate} />,
+        ]
+      })}
+    />
+  )
+}
diff --git a/sites/shared/i18n/flag/en.yaml b/sites/shared/i18n/flag/en.yaml
index cbb20a3c813..377e6f67bd8 100644
--- a/sites/shared/i18n/flag/en.yaml
+++ b/sites/shared/i18n/flag/en.yaml
@@ -1,5 +1,9 @@
 dismiss: Dismiss
-expandIsOff: The **expand** core setting is disabled. Some parts are not fully drawn. Enable it to see them.
+expandIsOff.t: This design saves space (and trees) because expand is disabled
+expandIsOff.d: Because the **expand** core setting is currently disabled, some parts are not fully drawn or not shown at all. Typically, these are simple rectangles that only take up space. To expand all pattern parts to their full size, enable the expand setting.
 enable: Enable
+flagMenu.t: Messages from the designer
+flagMenuOne.d: The designer of this pattern has flagged something about your current draft that deserves your attention.
+flagMenuMany.d: The designer of this pattern has flagged some things about your current draft that deserve your attention.
 hide: Hide
 show: Show