diff --git a/e2e/playwright/basic-sketch.spec.ts b/e2e/playwright/basic-sketch.spec.ts
index adf2270bf..d386bda7e 100644
--- a/e2e/playwright/basic-sketch.spec.ts
+++ b/e2e/playwright/basic-sketch.spec.ts
@@ -137,7 +137,7 @@ async function doBasicSketch(
     await page.waitForTimeout(100)
   }
 
-  await page.getByRole('button', { name: 'Length: open menu' }).click()
+  await page.getByRole('button', { name: 'constraints: open menu' }).click()
   await page.getByRole('button', { name: 'Equal Length' }).click()
 
   // Open the code pane.
diff --git a/e2e/playwright/editor-tests.spec.ts b/e2e/playwright/editor-tests.spec.ts
index de0c4bdcf..cfd34c12d 100644
--- a/e2e/playwright/editor-tests.spec.ts
+++ b/e2e/playwright/editor-tests.spec.ts
@@ -1353,4 +1353,51 @@ sketch001 = startSketchOn(XZ)
       15
     )
   })
+
+  test(`test-toolbar-buttons`, async ({
+    page,
+    homePage,
+    toolbar,
+    scene,
+    cmdBar,
+  }) => {
+    await test.step('Load an empty file', async () => {
+      await page.addInitScript(async () => {
+        localStorage.setItem('persistCode', '')
+      })
+      await page.setBodyDimensions({ width: 1200, height: 500 })
+      await homePage.goToModelingScene()
+
+      // wait until scene is ready to be interacted with
+      await scene.connectionEstablished()
+      await scene.settled(cmdBar)
+    })
+
+    await test.step('Test toolbar button correct selection', async () => {
+      await toolbar.expectToolbarMode.toBe('modeling')
+
+      await toolbar.startSketchPlaneSelection()
+
+      // Click on a default plane
+      await page.mouse.click(700, 200)
+
+      // tools cannot be selected immediately, couldn't find an event to await instead.
+      await page.waitForTimeout(1000)
+
+      await toolbar.selectCenterRectangle()
+
+      await expect(page.getByTestId('center-rectangle')).toHaveAttribute(
+        'aria-pressed',
+        'true'
+      )
+    })
+
+    await test.step('Test Toolbar dropdown remembering last selection', async () => {
+      // Select another tool
+      await page.getByTestId('circle-center').click()
+
+      // center-rectangle should still be the active option in the rectangle dropdown
+      await expect(page.getByTestId('center-rectangle')).toBeVisible()
+    })
+  })
 })
diff --git a/e2e/playwright/fixtures/toolbarFixture.ts b/e2e/playwright/fixtures/toolbarFixture.ts
index 282ad87eb..8b98af630 100644
--- a/e2e/playwright/fixtures/toolbarFixture.ts
+++ b/e2e/playwright/fixtures/toolbarFixture.ts
@@ -169,7 +169,7 @@ export class ToolbarFixture {
   }
   selectCenterRectangle = async () => {
     await this.page
-      .getByRole('button', { name: 'caret down Corner rectangle:' })
+      .getByRole('button', { name: 'caret down rectangles:' })
       .click()
     await expect(
       this.page.getByTestId('dropdown-center-rectangle')
@@ -178,7 +178,7 @@ export class ToolbarFixture {
   }
   selectBoolean = async (operation: 'union' | 'subtract' | 'intersect') => {
     await this.page
-      .getByRole('button', { name: 'caret down Union: open menu' })
+      .getByRole('button', { name: 'caret down booleans: open menu' })
       .click()
     const operationTestId = `dropdown-boolean-${operation}`
     await expect(this.page.getByTestId(operationTestId)).toBeVisible()
@@ -186,25 +186,19 @@ export class ToolbarFixture {
   }
 
   selectCircleThreePoint = async () => {
-    await this.page
-      .getByRole('button', { name: 'caret down Center circle:' })
-      .click()
+    await this.page.getByRole('button', { name: 'caret down circles:' }).click()
     await expect(
       this.page.getByTestId('dropdown-circle-three-points')
     ).toBeVisible()
     await this.page.getByTestId('dropdown-circle-three-points').click()
   }
   selectArc = async () => {
-    await this.page
-      .getByRole('button', { name: 'caret down Tangential Arc:' })
-      .click()
+    await this.page.getByRole('button', { name: 'caret down arcs:' }).click()
     await expect(this.page.getByTestId('dropdown-arc')).toBeVisible()
     await this.page.getByTestId('dropdown-arc').click()
   }
   selectThreePointArc = async () => {
-    await this.page
-      .getByRole('button', { name: 'caret down Tangential Arc:' })
-      .click()
+    await this.page.getByRole('button', { name: 'caret down arcs:' }).click()
     await expect(
       this.page.getByTestId('dropdown-three-point-arc')
     ).toBeVisible()
diff --git a/e2e/playwright/testing-constraints.spec.ts b/e2e/playwright/testing-constraints.spec.ts
index 12755f752..3882e3e20 100644
--- a/e2e/playwright/testing-constraints.spec.ts
+++ b/e2e/playwright/testing-constraints.spec.ts
@@ -115,7 +115,7 @@ test.describe('Testing constraints', { tag: ['@skipWin'] }, () => {
     await page.waitForTimeout(100) // this wait is needed for webkit - not sure why
     await page
       .getByRole('button', {
-        name: 'Length: open menu',
+        name: 'constraints: open menu',
       })
       .click()
     await page.getByRole('button', { name: 'remove constraints' }).click()
@@ -189,7 +189,7 @@ test.describe('Testing constraints', { tag: ['@skipWin'] }, () => {
         await page.waitForTimeout(100)
         await page
           .getByRole('button', {
-            name: 'Length: open menu',
+            name: 'constraints: open menu',
           })
           .click()
         await page
@@ -299,7 +299,7 @@ test.describe('Testing constraints', { tag: ['@skipWin'] }, () => {
         await page.keyboard.up('Shift')
         await page
           .getByRole('button', {
-            name: 'Length: open menu',
+            name: 'constraints: open menu',
           })
           .click()
         await page.getByRole('button', { name: constraint }).click()
@@ -420,7 +420,7 @@ test.describe('Testing constraints', { tag: ['@skipWin'] }, () => {
         await page.waitForTimeout(100)
         await page
           .getByRole('button', {
-            name: 'Length: open menu',
+            name: 'constraints: open menu',
           })
           .click()
         await page
@@ -533,7 +533,7 @@ test.describe('Testing constraints', { tag: ['@skipWin'] }, () => {
         await page.keyboard.up('Shift')
         await page
           .getByRole('button', {
-            name: 'Length: open menu',
+            name: 'constraints: open menu',
           })
           .click()
         await page.getByTestId('dropdown-constraint-angle').click()
@@ -627,7 +627,7 @@ test.describe('Testing constraints', { tag: ['@skipWin'] }, () => {
         await page.mouse.click(line3.x, line3.y)
         await page
           .getByRole('button', {
-            name: 'Length: open menu',
+            name: 'constraints: open menu',
           })
           .click()
         await page.getByTestId('dropdown-constraint-' + constraint).click()
@@ -719,7 +719,7 @@ part002 = startSketchOn(XZ)
         await page.mouse.click(line3.x, line3.y)
         await page
           .getByRole('button', {
-            name: 'Length: open menu',
+            name: 'constraints: open menu',
           })
           .click()
         await page.getByTestId('dropdown-constraint-' + constraint).click()
@@ -817,7 +817,7 @@ part002 = startSketchOn(XZ)
         const activeLinesContent = await page.locator('.cm-activeLine').all()
 
         const constraintMenuButton = page.getByRole('button', {
-          name: 'Length: open menu',
+          name: 'constraints: open menu',
         })
         const constraintButton = page
           .getByRole('button', {
@@ -905,7 +905,7 @@ part002 = startSketchOn(XZ)
         await page.mouse.click(line3.x - 3, line3.y + 20)
         await page.keyboard.up('Shift')
         const constraintMenuButton = page.getByRole('button', {
-          name: 'Length: open menu',
+          name: 'constraints: open menu',
         })
         const constraintButton = page.getByRole('button', {
           name: constraintName,
@@ -990,7 +990,7 @@ part002 = startSketchOn(XZ)
         await page.keyboard.up('Shift')
         await page.waitForTimeout(100)
         const constraintMenuButton = page.getByRole('button', {
-          name: 'Length: open menu',
+          name: 'constraints: open menu',
         })
         const constraintButton = page.getByRole('button', {
           name: constraintName,
@@ -1057,7 +1057,7 @@ part002 = startSketchOn(XZ)
 
     await page
       .getByRole('button', {
-        name: 'Length: open menu',
+        name: 'constraints: open menu',
       })
       .click()
     await page.waitForTimeout(500)
diff --git a/e2e/playwright/testing-selections.spec.ts b/e2e/playwright/testing-selections.spec.ts
index 1b2485dae..72572f602 100644
--- a/e2e/playwright/testing-selections.spec.ts
+++ b/e2e/playwright/testing-selections.spec.ts
@@ -124,7 +124,7 @@ test.describe('Testing selections', { tag: ['@skipWin'] }, () => {
 
       // click a segment hold shift and click an axis, see that a relevant constraint is enabled
       const constrainButton = page.getByRole('button', {
-        name: 'Length: open menu',
+        name: 'constraints: open menu',
       })
       const absXButton = page.getByRole('button', { name: 'Absolute X' })
 
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index 93a438652..fc9aa65d2 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -17,12 +17,14 @@ import { isDesktop } from '@src/lib/isDesktop'
 import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
 import { editorManager, kclManager } from '@src/lib/singletons'
 import type {
+  ToolbarDropdown,
   ToolbarItem,
   ToolbarItemCallbackProps,
   ToolbarItemResolved,
+  ToolbarItemResolvedDropdown,
   ToolbarModeName,
 } from '@src/lib/toolbar'
-import { toolbarConfig } from '@src/lib/toolbar'
+import { isToolbarItemResolvedDropdown, toolbarConfig } from '@src/lib/toolbar'
 import { isArray } from '@src/lib/utils'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 
@@ -131,21 +133,27 @@ export function Toolbar({
    */
   const currentModeItems: (
     | ToolbarItemResolved
-    | ToolbarItemResolved[]
+    | ToolbarItemResolvedDropdown
     | 'break'
   )[] = useMemo(() => {
     return toolbarConfig[currentMode].items.map((maybeIconConfig) => {
       if (maybeIconConfig === 'break') {
         return 'break'
-      } else if (isArray(maybeIconConfig)) {
-        return maybeIconConfig.map(resolveItemConfig)
+      } else if (isToolbarDropdown(maybeIconConfig)) {
+        return {
+          id: maybeIconConfig.id,
+          array: maybeIconConfig.array.map((item) =>
+            resolveItemConfig(item, maybeIconConfig.id)
+          ),
+        }
       } else {
         return resolveItemConfig(maybeIconConfig)
       }
     })
 
     function resolveItemConfig(
-      maybeIconConfig: ToolbarItem
+      maybeIconConfig: ToolbarItem,
+      dropdownId?: string
     ): ToolbarItemResolved {
       const isDisabled =
         disableAllButtons ||
@@ -176,6 +184,14 @@ export function Toolbar({
     }
   }, [currentMode, disableAllButtons, configCallbackProps])
 
+  // To remember the last selected item in an ActionButtonDropdown
+  const [lastSelectedMultiActionItem, _] = useState(
+    new Map<
+      number /* index in currentModeItems */,
+      number /* index in maybeIconConfig */
+    >()
+  )
+
   return (
     <menu
       data-current-mode={currentMode}
@@ -199,24 +215,33 @@ export function Toolbar({
                 className="h-5 w-[1px] block bg-chalkboard-30 dark:bg-chalkboard-80"
               />
             )
-          } else if (isArray(maybeIconConfig)) {
+          } else if (isToolbarItemResolvedDropdown(maybeIconConfig)) {
             // A button with a dropdown
+            const selectedIcon =
+              maybeIconConfig.array.find((c) => c.isActive) ||
+              maybeIconConfig.array[lastSelectedMultiActionItem.get(i) ?? 0]
+
+            // Save the last selected item in the dropdown
+            lastSelectedMultiActionItem.set(
+              i,
+              maybeIconConfig.array.indexOf(selectedIcon)
+            )
             return (
               <ActionButtonDropdown
                 Element="button"
-                key={maybeIconConfig[0].id}
-                data-testid={maybeIconConfig[0].id + '-dropdown'}
-                id={maybeIconConfig[0].id + '-dropdown'}
-                name={maybeIconConfig[0].title}
+                key={selectedIcon.id}
+                data-testid={selectedIcon.id + '-dropdown'}
+                id={selectedIcon.id + '-dropdown'}
+                name={maybeIconConfig.id}
                 className={
-                  (maybeIconConfig[0].alwaysDark
+                  (maybeIconConfig.array[0].alwaysDark
                     ? 'dark bg-chalkboard-90 '
                     : '!bg-transparent ') +
                   'group/wrapper ' +
                   buttonBorderClassName +
                   ' relative group !gap-0'
                 }
-                splitMenuItems={maybeIconConfig.map((itemConfig) => ({
+                splitMenuItems={maybeIconConfig.array.map((itemConfig) => ({
                   id: itemConfig.id,
                   label: itemConfig.title,
                   hotkey: itemConfig.hotkey,
@@ -236,11 +261,11 @@ export function Toolbar({
                 >
                   <ActionButton
                     Element="button"
-                    id={maybeIconConfig[0].id}
-                    data-testid={maybeIconConfig[0].id}
+                    id={selectedIcon.id}
+                    data-testid={selectedIcon.id}
                     iconStart={{
-                      icon: maybeIconConfig[0].icon,
-                      iconColor: maybeIconConfig[0].iconColor,
+                      icon: selectedIcon.icon,
+                      iconColor: selectedIcon.iconColor,
                       className: iconClassName,
                       bgClassName: bgClassName,
                     }}
@@ -248,40 +273,36 @@ export function Toolbar({
                       '!border-transparent !px-0 pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
                       buttonBgClassName
                     }
-                    aria-pressed={maybeIconConfig[0].isActive}
+                    aria-pressed={selectedIcon.isActive}
                     disabled={
                       disableAllButtons ||
-                      maybeIconConfig[0].status !== 'available' ||
-                      maybeIconConfig[0].disabled
+                      selectedIcon.status !== 'available' ||
+                      selectedIcon.disabled
                     }
-                    name={maybeIconConfig[0].title}
+                    name={selectedIcon.title}
                     // aria-description is still in ARIA 1.3 draft.
                     // eslint-disable-next-line jsx-a11y/aria-props
-                    aria-description={maybeIconConfig[0].description}
-                    onClick={() =>
-                      maybeIconConfig[0].onClick(configCallbackProps)
-                    }
+                    aria-description={selectedIcon.description}
+                    onClick={() => selectedIcon.onClick(configCallbackProps)}
                   >
-                    <span
-                      className={!maybeIconConfig[0].showTitle ? 'sr-only' : ''}
-                    >
-                      {maybeIconConfig[0].title}
+                    <span className={!selectedIcon.showTitle ? 'sr-only' : ''}>
+                      {selectedIcon.title}
                     </span>
                     <ToolbarItemTooltip
-                      itemConfig={maybeIconConfig[0]}
+                      itemConfig={selectedIcon}
                       configCallbackProps={configCallbackProps}
                       wrapperClassName="ui-open:!hidden"
                       contentClassName={tooltipContentClassName}
                     >
                       {showRichContent ? (
                         <ToolbarItemTooltipRichContent
-                          itemConfig={maybeIconConfig[0]}
+                          itemConfig={selectedIcon}
                         />
                       ) : (
                         <ToolbarItemTooltipShortContent
-                          status={maybeIconConfig[0].status}
-                          title={maybeIconConfig[0].title}
-                          hotkey={maybeIconConfig[0].hotkey}
+                          status={selectedIcon.status}
+                          title={selectedIcon.title}
+                          hotkey={selectedIcon.hotkey}
                         />
                       )}
                     </ToolbarItemTooltip>
@@ -430,7 +451,9 @@ const ToolbarItemTooltipShortContent = ({
   >
     {title}
     {hotkey && (
-      <kbd className="inline-block ml-2 flex-none hotkey">{hotkey}</kbd>
+      <kbd className="inline-block ml-2 flex-none hotkey">
+        {displayHotkeys(hotkey)}
+      </kbd>
     )}
   </span>
 )
@@ -461,7 +484,9 @@ const ToolbarItemTooltipRichContent = ({
           {itemConfig.title}
         </span>
         {itemConfig.status === 'available' && itemConfig.hotkey ? (
-          <kbd className="flex-none hotkey">{itemConfig.hotkey}</kbd>
+          <kbd className="flex-none hotkey">
+            {displayHotkeys(itemConfig.hotkey)}
+          </kbd>
         ) : itemConfig.status === 'kcl-only' ? (
           <>
             <span className="text-wrap font-sans flex-0 text-chalkboard-70 dark:text-chalkboard-40">
@@ -522,3 +547,14 @@ const ToolbarItemTooltipRichContent = ({
     </>
   )
 }
+
+// We don't want to display Esc hotkeys to avoid confusion in the Toolbar UI (eg. "EscR")
+function displayHotkeys(hotkey: string | string[]) {
+  return (isArray(hotkey) ? hotkey : [hotkey]).filter((h) => h !== 'Esc')
+}
+
+function isToolbarDropdown(
+  item: ToolbarItem | ToolbarDropdown
+): item is ToolbarDropdown {
+  return 'array' in item
+}
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index 766d19d93..3da3e0b65 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -71,6 +71,7 @@ export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
         <button
           ref={ref as ForwardedRef<HTMLButtonElement>}
           className={classNames}
+          tabIndex={-1}
           {...rest}
         >
           {iconStart && <ActionIcon {...iconStart} />}
diff --git a/src/components/ActionButtonDropdown.tsx b/src/components/ActionButtonDropdown.tsx
index 37e037aa1..15bb7d2c1 100644
--- a/src/components/ActionButtonDropdown.tsx
+++ b/src/components/ActionButtonDropdown.tsx
@@ -69,6 +69,7 @@ export function ActionButtonDropdown({
                     close()
                   }}
                   className="group/button flex items-center gap-6 px-3 py-1 font-sans text-xs hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
+                  tabIndex={-1}
                   disabled={item.disabled}
                   data-testid={'dropdown-' + item.id}
                 >
diff --git a/src/index.css b/src/index.css
index fb216014c..c030b65f2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -86,7 +86,7 @@ textarea,
 
 button {
   @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
-  @apply focus-visible:outline-chalkboard-100;
+  @apply focus-visible:outline-none;
 }
 
 button:hover {
@@ -94,7 +94,7 @@ button:hover {
 }
 
 .dark button {
-  @apply border-chalkboard-70 focus-visible:outline-chalkboard-10;
+  @apply border-chalkboard-70;
 }
 
 .dark button:hover {
diff --git a/src/lib/toolbar.ts b/src/lib/toolbar.ts
index 3a89c8d08..5c33f9199 100644
--- a/src/lib/toolbar.ts
+++ b/src/lib/toolbar.ts
@@ -15,7 +15,12 @@ export type ToolbarModeName = 'modeling' | 'sketching'
 
 type ToolbarMode = {
   check: (state: StateFrom<typeof modelingMachine>) => boolean
-  items: (ToolbarItem | ToolbarItem[] | 'break')[]
+  items: (ToolbarItem | ToolbarDropdown | 'break')[]
+}
+
+export type ToolbarDropdown = {
+  id: string
+  array: ToolbarItem[]
 }
 
 export interface ToolbarItemCallbackProps {
@@ -58,6 +63,17 @@ export type ToolbarItemResolved = Omit<
   isActive?: boolean
 }
 
+export type ToolbarItemResolvedDropdown = {
+  id: string
+  array: ToolbarItemResolved[]
+}
+
+export const isToolbarItemResolvedDropdown = (
+  item: ToolbarItemResolved | ToolbarItemResolvedDropdown
+): item is ToolbarItemResolvedDropdown => {
+  return (item as ToolbarItemResolvedDropdown).array !== undefined
+}
+
 export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
   modeling: {
     check: (state) =>
@@ -208,97 +224,103 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
         links: [{ label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/shell' }],
       },
       'break',
-      [
-        {
-          id: 'boolean-union',
-          onClick: () =>
-            commandBarActor.send({
-              type: 'Find and select command',
-              data: { name: 'Boolean Union', groupId: 'modeling' },
-            }),
-          icon: 'booleanUnion',
-          status: DEV || IS_NIGHTLY_OR_DEBUG ? 'available' : 'unavailable',
-          title: 'Union',
-          hotkey: 'Shift + B U',
-          description: 'Combine two or more solids into a single solid.',
-          links: [
-            {
-              label: 'GitHub discussion',
-              url: 'https://github.com/KittyCAD/modeling-app/discussions/509',
-            },
-          ],
-        },
-        {
-          id: 'boolean-subtract',
-          onClick: () =>
-            commandBarActor.send({
-              type: 'Find and select command',
-              data: { name: 'Boolean Subtract', groupId: 'modeling' },
-            }),
-          icon: 'booleanSubtract',
-          status: DEV || IS_NIGHTLY_OR_DEBUG ? 'available' : 'unavailable',
-          title: 'Subtract',
-          hotkey: 'Shift + B S',
-          description: 'Subtract one solid from another.',
-          links: [
-            {
-              label: 'GitHub discussion',
-              url: 'https://github.com/KittyCAD/modeling-app/discussions/510',
-            },
-          ],
-        },
-        {
-          id: 'boolean-intersect',
-          onClick: () =>
-            commandBarActor.send({
-              type: 'Find and select command',
-              data: { name: 'Boolean Intersect', groupId: 'modeling' },
-            }),
-          icon: 'booleanIntersect',
-          status: DEV || IS_NIGHTLY_OR_DEBUG ? 'available' : 'unavailable',
-          title: 'Intersect',
-          hotkey: 'Shift + B I',
-          description: 'Create a solid from the intersection of two solids.',
-          links: [
-            {
-              label: 'GitHub discussion',
-              url: 'https://github.com/KittyCAD/modeling-app/discussions/511',
-            },
-          ],
-        },
-      ],
-      'break',
-      [
-        {
-          id: 'plane-offset',
-          onClick: () => {
-            commandBarActor.send({
-              type: 'Find and select command',
-              data: { name: 'Offset plane', groupId: 'modeling' },
-            })
+      {
+        id: 'booleans',
+        array: [
+          {
+            id: 'boolean-union',
+            onClick: () =>
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: { name: 'Boolean Union', groupId: 'modeling' },
+              }),
+            icon: 'booleanUnion',
+            status: DEV || IS_NIGHTLY_OR_DEBUG ? 'available' : 'unavailable',
+            title: 'Union',
+            hotkey: 'Shift + B U',
+            description: 'Combine two or more solids into a single solid.',
+            links: [
+              {
+                label: 'GitHub discussion',
+                url: 'https://github.com/KittyCAD/modeling-app/discussions/509',
+              },
+            ],
           },
-          hotkey: 'O',
-          icon: 'plane',
-          status: 'available',
-          title: 'Offset plane',
-          description: 'Create a plane parallel to an existing plane.',
-          links: [
-            {
-              label: 'KCL docs',
-              url: 'https://zoo.dev/docs/kcl/offsetPlane',
+          {
+            id: 'boolean-subtract',
+            onClick: () =>
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: { name: 'Boolean Subtract', groupId: 'modeling' },
+              }),
+            icon: 'booleanSubtract',
+            status: DEV || IS_NIGHTLY_OR_DEBUG ? 'available' : 'unavailable',
+            title: 'Subtract',
+            hotkey: 'Shift + B S',
+            description: 'Subtract one solid from another.',
+            links: [
+              {
+                label: 'GitHub discussion',
+                url: 'https://github.com/KittyCAD/modeling-app/discussions/510',
+              },
+            ],
+          },
+          {
+            id: 'boolean-intersect',
+            onClick: () =>
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: { name: 'Boolean Intersect', groupId: 'modeling' },
+              }),
+            icon: 'booleanIntersect',
+            status: DEV || IS_NIGHTLY_OR_DEBUG ? 'available' : 'unavailable',
+            title: 'Intersect',
+            hotkey: 'Shift + B I',
+            description: 'Create a solid from the intersection of two solids.',
+            links: [
+              {
+                label: 'GitHub discussion',
+                url: 'https://github.com/KittyCAD/modeling-app/discussions/511',
+              },
+            ],
+          },
+        ],
+      },
+      'break',
+      {
+        id: 'planes',
+        array: [
+          {
+            id: 'plane-offset',
+            onClick: () => {
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: { name: 'Offset plane', groupId: 'modeling' },
+              })
             },
-          ],
-        },
-        {
-          id: 'plane-points',
-          onClick: () =>
-            console.error('Plane through points not yet implemented'),
-          status: 'unavailable',
-          title: '3-point plane',
-          description: 'Create a plane from three points.',
-          links: [],
-        },
-      ],
+            hotkey: 'O',
+            icon: 'plane',
+            status: 'available',
+            title: 'Offset plane',
+            description: 'Create a plane parallel to an existing plane.',
+            links: [
+              {
+                label: 'KCL docs',
+                url: 'https://zoo.dev/docs/kcl/offsetPlane',
+              },
+            ],
+          },
+          {
+            id: 'plane-points',
+            onClick: () =>
+              console.error('Plane through points not yet implemented'),
+            status: 'unavailable',
+            title: '3-point plane',
+            description: 'Create a plane from three points.',
+            links: [],
+          },
+        ],
+      },
       {
         id: 'helix',
         onClick: () => {
@@ -315,43 +337,46 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
         links: [{ label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/helix' }],
       },
       'break',
-      [
-        {
-          id: 'text-to-cad',
-          onClick: () =>
-            commandBarActor.send({
-              type: 'Find and select command',
-              data: { name: 'Text-to-CAD', groupId: 'modeling' },
-            }),
-          icon: 'sparkles',
-          iconColor: '#29FFA4',
-          alwaysDark: true,
-          status: 'available',
-          title: 'Create with Zoo Text-to-CAD',
-          description: 'Create geometry with AI / ML.',
-          links: [
-            {
-              label: 'API docs',
-              url: 'https://zoo.dev/docs/api/ml/generate-a-cad-model-from-text',
-            },
-          ],
-        },
-        {
-          id: 'prompt-to-edit',
-          onClick: () =>
-            commandBarActor.send({
-              type: 'Find and select command',
-              data: { name: 'Prompt-to-edit', groupId: 'modeling' },
-            }),
-          icon: 'sparkles',
-          iconColor: '#29FFA4',
-          alwaysDark: true,
-          status: 'available',
-          title: 'Modify with Zoo Text-to-CAD',
-          description: 'Edit geometry with AI / ML.',
-          links: [],
-        },
-      ],
+      {
+        id: 'ai',
+        array: [
+          {
+            id: 'text-to-cad',
+            onClick: () =>
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: { name: 'Text-to-CAD', groupId: 'modeling' },
+              }),
+            icon: 'sparkles',
+            iconColor: '#29FFA4',
+            alwaysDark: true,
+            status: 'available',
+            title: 'Create with Zoo Text-to-CAD',
+            description: 'Create geometry with AI / ML.',
+            links: [
+              {
+                label: 'API docs',
+                url: 'https://zoo.dev/docs/api/ml/generate-a-cad-model-from-text',
+              },
+            ],
+          },
+          {
+            id: 'prompt-to-edit',
+            onClick: () =>
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: { name: 'Prompt-to-edit', groupId: 'modeling' },
+              }),
+            icon: 'sparkles',
+            iconColor: '#29FFA4',
+            alwaysDark: true,
+            status: 'available',
+            title: 'Modify with Zoo Text-to-CAD',
+            description: 'Edit geometry with AI / ML.',
+            links: [],
+          },
+        ],
+      },
     ],
   },
   sketching: {
@@ -403,84 +428,91 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
         links: [],
         isActive: (state) => state.matches({ Sketch: 'Line tool' }),
       },
-      [
-        {
-          id: 'tangential-arc',
-          onClick: ({ modelingState, modelingSend }) =>
-            modelingSend({
-              type: 'change tool',
-              data: {
-                tool: !modelingState.matches({ Sketch: 'Tangential arc to' })
-                  ? 'tangentialArc'
-                  : 'none',
+      {
+        id: 'arcs',
+        array: [
+          {
+            id: 'tangential-arc',
+            onClick: ({ modelingState, modelingSend }) =>
+              modelingSend({
+                type: 'change tool',
+                data: {
+                  tool: !modelingState.matches({ Sketch: 'Tangential arc to' })
+                    ? 'tangentialArc'
+                    : 'none',
+                },
+              }),
+            icon: 'arc',
+            status: 'available',
+            disabled: (state) =>
+              (!isEditingExistingSketch(state.context) &&
+                !state.matches({ Sketch: 'Tangential arc to' })) ||
+              pipeHasCircle(state.context),
+            disabledReason: (state) =>
+              !isEditingExistingSketch(state.context) &&
+              !state.matches({ Sketch: 'Tangential arc to' })
+                ? "Cannot start a tangential arc because there's no previous line to be tangential to.  Try drawing a line first or selecting an existing sketch to edit."
+                : undefined,
+            title: 'Tangential Arc',
+            hotkey: (state) =>
+              state.matches({ Sketch: 'Tangential arc to' })
+                ? ['Esc', 'A']
+                : 'A',
+            description: 'Start drawing an arc tangent to the current segment',
+            links: [],
+            isActive: (state) => state.matches({ Sketch: 'Tangential arc to' }),
+          },
+          {
+            id: 'three-point-arc',
+            onClick: ({ modelingState, modelingSend }) =>
+              modelingSend({
+                type: 'change tool',
+                data: {
+                  tool: !modelingState.matches({
+                    Sketch: 'Arc three point tool',
+                  })
+                    ? 'arcThreePoint'
+                    : 'none',
+                },
+              }),
+            icon: 'arc',
+            status: 'available',
+            title: 'Three-point Arc',
+            hotkey: (state) =>
+              state.matches({ Sketch: 'Arc three point tool' })
+                ? ['Esc', 'T']
+                : 'T',
+            showTitle: false,
+            description: 'Draw a circular arc defined by three points',
+            links: [
+              {
+                label: 'GitHub issue',
+                url: 'https://github.com/KittyCAD/modeling-app/issues/1659',
               },
-            }),
-          icon: 'arc',
-          status: 'available',
-          disabled: (state) =>
-            (!isEditingExistingSketch(state.context) &&
-              !state.matches({ Sketch: 'Tangential arc to' })) ||
-            pipeHasCircle(state.context),
-          disabledReason: (state) =>
-            !isEditingExistingSketch(state.context) &&
-            !state.matches({ Sketch: 'Tangential arc to' })
-              ? "Cannot start a tangential arc because there's no previous line to be tangential to.  Try drawing a line first or selecting an existing sketch to edit."
-              : undefined,
-          title: 'Tangential Arc',
-          hotkey: (state) =>
-            state.matches({ Sketch: 'Tangential arc to' }) ? ['Esc', 'A'] : 'A',
-          description: 'Start drawing an arc tangent to the current segment',
-          links: [],
-          isActive: (state) => state.matches({ Sketch: 'Tangential arc to' }),
-        },
-        {
-          id: 'three-point-arc',
-          onClick: ({ modelingState, modelingSend }) =>
-            modelingSend({
-              type: 'change tool',
-              data: {
-                tool: !modelingState.matches({ Sketch: 'Arc three point tool' })
-                  ? 'arcThreePoint'
-                  : 'none',
-              },
-            }),
-          icon: 'arc',
-          status: 'available',
-          title: 'Three-point Arc',
-          hotkey: (state) =>
-            state.matches({ Sketch: 'Arc three point tool' })
-              ? ['Esc', 'T']
-              : 'T',
-          showTitle: false,
-          description: 'Draw a circular arc defined by three points',
-          links: [
-            {
-              label: 'GitHub issue',
-              url: 'https://github.com/KittyCAD/modeling-app/issues/1659',
-            },
-          ],
-          isActive: (state) =>
-            state.matches({ Sketch: 'Arc three point tool' }),
-        },
-        {
-          id: 'arc',
-          onClick: ({ modelingState, modelingSend }) =>
-            modelingSend({
-              type: 'change tool',
-              data: {
-                tool: !modelingState.matches({ Sketch: 'Arc tool' })
-                  ? 'arc'
-                  : 'none',
-              },
-            }),
-          icon: 'arc',
-          status: DEV ? 'available' : 'unavailable',
-          title: 'Arc',
-          description: 'Start drawing an arc',
-          links: [],
-          isActive: (state) => state.matches({ Sketch: 'Arc tool' }),
-        },
-      ],
+            ],
+            isActive: (state) =>
+              state.matches({ Sketch: 'Arc three point tool' }),
+          },
+          {
+            id: 'arc',
+            onClick: ({ modelingState, modelingSend }) =>
+              modelingSend({
+                type: 'change tool',
+                data: {
+                  tool: !modelingState.matches({ Sketch: 'Arc tool' })
+                    ? 'arc'
+                    : 'none',
+                },
+              }),
+            icon: 'arc',
+            status: DEV ? 'available' : 'unavailable',
+            title: 'Arc',
+            description: 'Start drawing an arc',
+            links: [],
+            isActive: (state) => state.matches({ Sketch: 'Arc tool' }),
+          },
+        ],
+      },
       {
         id: 'spline',
         onClick: () => console.error('Spline not yet implemented'),
@@ -492,102 +524,110 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
         links: [],
       },
       'break',
-      [
-        {
-          id: 'circle-center',
-          onClick: ({ modelingState, modelingSend }) =>
-            modelingSend({
-              type: 'change tool',
-              data: {
-                tool: !modelingState.matches({ Sketch: 'Circle tool' })
-                  ? 'circle'
-                  : 'none',
-              },
-            }),
-          icon: 'circle',
-          status: 'available',
-          title: 'Center circle',
-          disabled: (state) => state.matches('Sketch no face'),
-          isActive: (state) =>
-            state.matches({ Sketch: 'Circle tool' }) ||
-            state.matches({ Sketch: 'Circle three point tool' }),
-          hotkey: (state) =>
-            state.matches({ Sketch: 'Circle tool' }) ? ['Esc', 'C'] : 'C',
-          showTitle: false,
-          description: 'Start drawing a circle from its center',
-          links: [],
-        },
-        {
-          id: 'circle-three-points',
-          onClick: ({ modelingState, modelingSend }) =>
-            modelingSend({
-              type: 'change tool',
-              data: {
-                tool: !modelingState.matches({
-                  Sketch: 'Circle three point tool',
-                })
-                  ? 'circleThreePoint'
-                  : 'none',
-              },
-            }),
-          icon: 'circle',
-          status: 'available',
-          title: '3-point circle',
-          showTitle: false,
-          description: 'Draw a circle defined by three points',
-          links: [],
-        },
-      ],
-      [
-        {
-          id: 'corner-rectangle',
-          onClick: ({ modelingState, modelingSend }) =>
-            modelingSend({
-              type: 'change tool',
-              data: {
-                tool: !modelingState.matches({ Sketch: 'Rectangle tool' })
-                  ? 'rectangle'
-                  : 'none',
-              },
-            }),
-          icon: 'rectangle',
-          status: 'available',
-          disabled: (state) => state.matches('Sketch no face'),
-          title: 'Corner rectangle',
-          hotkey: (state) =>
-            state.matches({ Sketch: 'Rectangle tool' }) ? ['Esc', 'R'] : 'R',
-          description: 'Start drawing a rectangle',
-          links: [],
-          isActive: (state) => state.matches({ Sketch: 'Rectangle tool' }),
-        },
-        {
-          id: 'center-rectangle',
-          onClick: ({ modelingState, modelingSend }) =>
-            modelingSend({
-              type: 'change tool',
-              data: {
-                tool: !modelingState.matches({
-                  Sketch: 'Center Rectangle tool',
-                })
-                  ? 'center rectangle'
-                  : 'none',
-              },
-            }),
-          icon: 'arc',
-          status: 'available',
-          disabled: (state) => state.matches('Sketch no face'),
-          title: 'Center rectangle',
-          hotkey: (state) =>
-            state.matches({ Sketch: 'Center Rectangle tool' })
-              ? ['Esc', 'C']
-              : 'C',
-          description: 'Start drawing a rectangle from its center',
-          links: [],
-          isActive: (state) => {
-            return state.matches({ Sketch: 'Center Rectangle tool' })
+      {
+        id: 'circles',
+        array: [
+          {
+            id: 'circle-center',
+            onClick: ({ modelingState, modelingSend }) =>
+              modelingSend({
+                type: 'change tool',
+                data: {
+                  tool: !modelingState.matches({ Sketch: 'Circle tool' })
+                    ? 'circle'
+                    : 'none',
+                },
+              }),
+            icon: 'circle',
+            status: 'available',
+            title: 'Center circle',
+            disabled: (state) => state.matches('Sketch no face'),
+            isActive: (state) => state.matches({ Sketch: 'Circle tool' }),
+            hotkey: (state) =>
+              state.matches({ Sketch: 'Circle tool' }) ? ['Esc', 'C'] : 'C',
+            showTitle: false,
+            description: 'Start drawing a circle from its center',
+            links: [],
           },
-        },
-      ],
+          {
+            id: 'circle-three-points',
+            onClick: ({ modelingState, modelingSend }) =>
+              modelingSend({
+                type: 'change tool',
+                data: {
+                  tool: !modelingState.matches({
+                    Sketch: 'Circle three point tool',
+                  })
+                    ? 'circleThreePoint'
+                    : 'none',
+                },
+              }),
+            icon: 'circle',
+            status: 'available',
+            title: '3-point circle',
+            isActive: (state) =>
+              state.matches({ Sketch: 'Circle three point tool' }),
+            hotkey: (state) =>
+              state.matches({ Sketch: 'Circle three point tool' }) ? 'Esc' : [],
+            showTitle: false,
+            description: 'Draw a circle defined by three points',
+            links: [],
+          },
+        ],
+      },
+      {
+        id: 'rectangles',
+        array: [
+          {
+            id: 'corner-rectangle',
+            onClick: ({ modelingState, modelingSend }) =>
+              modelingSend({
+                type: 'change tool',
+                data: {
+                  tool: !modelingState.matches({ Sketch: 'Rectangle tool' })
+                    ? 'rectangle'
+                    : 'none',
+                },
+              }),
+            icon: 'rectangle',
+            status: 'available',
+            disabled: (state) => state.matches('Sketch no face'),
+            title: 'Corner rectangle',
+            hotkey: (state) =>
+              state.matches({ Sketch: 'Rectangle tool' }) ? ['Esc', 'R'] : 'R',
+            description: 'Start drawing a rectangle',
+            links: [],
+            isActive: (state) => state.matches({ Sketch: 'Rectangle tool' }),
+          },
+          {
+            id: 'center-rectangle',
+            onClick: ({ modelingState, modelingSend }) =>
+              modelingSend({
+                type: 'change tool',
+                data: {
+                  tool: !modelingState.matches({
+                    Sketch: 'Center Rectangle tool',
+                  })
+                    ? 'center rectangle'
+                    : 'none',
+                },
+              }),
+            icon: 'rectangle',
+            status: 'available',
+            disabled: (state) => state.matches('Sketch no face'),
+            title: 'Center rectangle',
+            hotkey: (state) =>
+              state.matches({ Sketch: 'Center Rectangle tool' })
+                ? ['Esc', 'C']
+                : 'C',
+            description: 'Start drawing a rectangle from its center',
+            links: [],
+            isActive: (state) => {
+              return state.matches({ Sketch: 'Center Rectangle tool' })
+            },
+          },
+        ],
+      },
       {
         id: 'polygon',
         onClick: () => console.error('Polygon not yet implemented'),
@@ -619,269 +659,272 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
         description: 'Mirror sketch entities about a line or axis',
         links: [],
       },
-      [
-        {
-          id: 'constraint-length',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({
-                type: 'Constrain length',
-                data: {
-                  selection: state.context.selectionRanges,
-                  // dummy data is okay for checking if the constrain is possible
-                  length: {
-                    valueAst: createLiteral(1),
-                    valueText: '1',
-                    valueCalculated: '1',
+      {
+        id: 'constraints',
+        array: [
+          {
+            id: 'constraint-length',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({
+                  type: 'Constrain length',
+                  data: {
+                    selection: state.context.selectionRanges,
+                    // dummy data is okay for checking if the constrain is possible
+                    length: {
+                      valueAst: createLiteral(1),
+                      valueText: '1',
+                      valueCalculated: '1',
+                    },
                   },
+                })
+              ),
+            onClick: () =>
+              commandBarActor.send({
+                type: 'Find and select command',
+                data: {
+                  name: 'Constrain length',
+                  groupId: 'modeling',
                 },
-              })
-            ),
-          onClick: () =>
-            commandBarActor.send({
-              type: 'Find and select command',
-              data: {
-                name: 'Constrain length',
-                groupId: 'modeling',
-              },
-            }),
-          icon: 'dimension',
-          status: 'available',
-          title: 'Length',
-          showTitle: false,
-          description: 'Constrain the length of a straight segment',
-          links: [],
-        },
-        {
-          id: 'constraint-angle',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain angle' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain angle' }),
-          status: 'available',
-          title: 'Angle',
-          showTitle: false,
-          description: 'Constrain the angle between two segments',
-          links: [],
-        },
-        {
-          id: 'constraint-vertical',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Make segment vertical' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Make segment vertical' }),
-          status: 'available',
-          title: 'Vertical',
-          showTitle: false,
-          description:
-            'Constrain a straight segment to be vertical relative to the sketch',
-          links: [],
-        },
-        {
-          id: 'constraint-horizontal',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Make segment horizontal' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Make segment horizontal' }),
-          status: 'available',
-          title: 'Horizontal',
-          showTitle: false,
-          description:
-            'Constrain a straight segment to be horizontal relative to the sketch',
-          links: [],
-        },
-        {
-          id: 'constraint-parallel',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain parallel' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain parallel' }),
-          status: 'available',
-          title: 'Parallel',
-          showTitle: false,
-          description: 'Constrain two segments to be parallel',
-          links: [],
-        },
-        {
-          id: 'constraint-equal-length',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain equal length' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain equal length' }),
-          status: 'available',
-          title: 'Equal length',
-          showTitle: false,
-          description: 'Constrain two segments to be equal length',
-          links: [],
-        },
-        {
-          id: 'constraint-horizontal-distance',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain horizontal distance' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain horizontal distance' }),
-          status: 'available',
-          title: 'Horizontal distance',
-          showTitle: false,
-          description: 'Constrain the horizontal distance between two points',
-          links: [],
-        },
-        {
-          id: 'constraint-vertical-distance',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain vertical distance' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain vertical distance' }),
-          status: 'available',
-          title: 'Vertical distance',
-          showTitle: false,
-          description: 'Constrain the vertical distance between two points',
-          links: [],
-        },
-        {
-          id: 'constraint-absolute-x',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain ABS X' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain ABS X' }),
-          status: 'available',
-          title: 'Absolute X',
-          showTitle: false,
-          description: 'Constrain the x-coordinate of a point',
-          links: [],
-        },
-        {
-          id: 'constraint-absolute-y',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain ABS Y' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain ABS Y' }),
-          status: 'available',
-          title: 'Absolute Y',
-          showTitle: false,
-          description: 'Constrain the y-coordinate of a point',
-          links: [],
-        },
-        {
-          id: 'constraint-perpendicular-distance',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain perpendicular distance' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain perpendicular distance' }),
-          status: 'available',
-          title: 'Perpendicular distance',
-          showTitle: false,
-          description:
-            'Constrain the perpendicular distance between two segments',
-          links: [],
-        },
-        {
-          id: 'constraint-align-horizontal',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain horizontally align' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain horizontally align' }),
-          status: 'available',
-          title: 'Horizontally align',
-          showTitle: false,
-          description: 'Align the ends of two or more segments horizontally',
-          links: [],
-        },
-        {
-          id: 'constraint-align-vertical',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain vertically align' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain vertically align' }),
-          status: 'available',
-          title: 'Vertically align',
-          showTitle: false,
-          description: 'Align the ends of two or more segments vertically',
-          links: [],
-        },
-        {
-          id: 'snap-to-x',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain snap to X' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain snap to X' }),
-          status: 'available',
-          title: 'Snap to X',
-          showTitle: false,
-          description: 'Snap a point to an x-coordinate',
-          links: [],
-        },
-        {
-          id: 'snap-to-y',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain snap to Y' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain snap to Y' }),
-          status: 'available',
-          title: 'Snap to Y',
-          showTitle: false,
-          description: 'Snap a point to a y-coordinate',
-          links: [],
-        },
-        {
-          id: 'constraint-remove',
-          disabled: (state) =>
-            !(
-              state.matches({ Sketch: 'SketchIdle' }) &&
-              state.can({ type: 'Constrain remove constraints' })
-            ),
-          onClick: ({ modelingSend }) =>
-            modelingSend({ type: 'Constrain remove constraints' }),
-          status: 'available',
-          title: 'Remove constraints',
-          showTitle: false,
-          description: 'Remove all constraints from the segment',
-          links: [],
-        },
-      ],
+              }),
+            icon: 'dimension',
+            status: 'available',
+            title: 'Length',
+            showTitle: false,
+            description: 'Constrain the length of a straight segment',
+            links: [],
+          },
+          {
+            id: 'constraint-angle',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain angle' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain angle' }),
+            status: 'available',
+            title: 'Angle',
+            showTitle: false,
+            description: 'Constrain the angle between two segments',
+            links: [],
+          },
+          {
+            id: 'constraint-vertical',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Make segment vertical' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Make segment vertical' }),
+            status: 'available',
+            title: 'Vertical',
+            showTitle: false,
+            description:
+              'Constrain a straight segment to be vertical relative to the sketch',
+            links: [],
+          },
+          {
+            id: 'constraint-horizontal',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Make segment horizontal' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Make segment horizontal' }),
+            status: 'available',
+            title: 'Horizontal',
+            showTitle: false,
+            description:
+              'Constrain a straight segment to be horizontal relative to the sketch',
+            links: [],
+          },
+          {
+            id: 'constraint-parallel',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain parallel' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain parallel' }),
+            status: 'available',
+            title: 'Parallel',
+            showTitle: false,
+            description: 'Constrain two segments to be parallel',
+            links: [],
+          },
+          {
+            id: 'constraint-equal-length',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain equal length' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain equal length' }),
+            status: 'available',
+            title: 'Equal length',
+            showTitle: false,
+            description: 'Constrain two segments to be equal length',
+            links: [],
+          },
+          {
+            id: 'constraint-horizontal-distance',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain horizontal distance' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain horizontal distance' }),
+            status: 'available',
+            title: 'Horizontal distance',
+            showTitle: false,
+            description: 'Constrain the horizontal distance between two points',
+            links: [],
+          },
+          {
+            id: 'constraint-vertical-distance',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain vertical distance' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain vertical distance' }),
+            status: 'available',
+            title: 'Vertical distance',
+            showTitle: false,
+            description: 'Constrain the vertical distance between two points',
+            links: [],
+          },
+          {
+            id: 'constraint-absolute-x',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain ABS X' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain ABS X' }),
+            status: 'available',
+            title: 'Absolute X',
+            showTitle: false,
+            description: 'Constrain the x-coordinate of a point',
+            links: [],
+          },
+          {
+            id: 'constraint-absolute-y',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain ABS Y' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain ABS Y' }),
+            status: 'available',
+            title: 'Absolute Y',
+            showTitle: false,
+            description: 'Constrain the y-coordinate of a point',
+            links: [],
+          },
+          {
+            id: 'constraint-perpendicular-distance',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain perpendicular distance' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain perpendicular distance' }),
+            status: 'available',
+            title: 'Perpendicular distance',
+            showTitle: false,
+            description:
+              'Constrain the perpendicular distance between two segments',
+            links: [],
+          },
+          {
+            id: 'constraint-align-horizontal',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain horizontally align' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain horizontally align' }),
+            status: 'available',
+            title: 'Horizontally align',
+            showTitle: false,
+            description: 'Align the ends of two or more segments horizontally',
+            links: [],
+          },
+          {
+            id: 'constraint-align-vertical',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain vertically align' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain vertically align' }),
+            status: 'available',
+            title: 'Vertically align',
+            showTitle: false,
+            description: 'Align the ends of two or more segments vertically',
+            links: [],
+          },
+          {
+            id: 'snap-to-x',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain snap to X' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain snap to X' }),
+            status: 'available',
+            title: 'Snap to X',
+            showTitle: false,
+            description: 'Snap a point to an x-coordinate',
+            links: [],
+          },
+          {
+            id: 'snap-to-y',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain snap to Y' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain snap to Y' }),
+            status: 'available',
+            title: 'Snap to Y',
+            showTitle: false,
+            description: 'Snap a point to a y-coordinate',
+            links: [],
+          },
+          {
+            id: 'constraint-remove',
+            disabled: (state) =>
+              !(
+                state.matches({ Sketch: 'SketchIdle' }) &&
+                state.can({ type: 'Constrain remove constraints' })
+              ),
+            onClick: ({ modelingSend }) =>
+              modelingSend({ type: 'Constrain remove constraints' }),
+            status: 'available',
+            title: 'Remove constraints',
+            showTitle: false,
+            description: 'Remove all constraints from the segment',
+            links: [],
+          },
+        ],
+      },
     ],
   },
 }