diff --git a/e2e/playwright/flow-tests.spec.ts b/e2e/playwright/flow-tests.spec.ts
index a7eb2e937..2b8d38f98 100644
--- a/e2e/playwright/flow-tests.spec.ts
+++ b/e2e/playwright/flow-tests.spec.ts
@@ -175,7 +175,7 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
   }
 
   // deselect line tool
-  await page.getByRole('button', { name: 'Line' }).click()
+  await page.getByRole('button', { name: 'Line', exact: true }).click()
   await page.waitForTimeout(500)
 
   const line1 = await u.getSegmentBodyCoords(`[data-overlay-index="${0}"]`, 0)
@@ -203,7 +203,7 @@ async function doBasicSketch(page: Page, openPanes: string[]) {
     await expect(page.locator('.cm-cursor')).toHaveCount(2)
   }
 
-  await page.getByRole('button', { name: 'Constraints' }).click()
+  await page.getByRole('button', { name: 'Length: open menu' }).click()
   await page.getByRole('button', { name: 'Equal Length' }).click()
 
   // Open the code pane.
@@ -452,7 +452,7 @@ test.describe('Testing Camera Movement', () => {
     // await expect(u.codeLocator).toHaveText(code)
 
     // click the line button
-    await page.getByRole('button', { name: 'Line' }).click()
+    await page.getByRole('button', { name: 'Line', exact: true }).click()
 
     const hoverOverNothing = async () => {
       // await u.canvasLocator.hover({position: {x: 700, y: 325}})
@@ -1462,7 +1462,9 @@ test.describe('Can create sketches on all planes and their back sides', () => {
     await page.mouse.click(clickCoords.x, clickCoords.y)
     await page.waitForTimeout(300) // wait for animation
 
-    await expect(page.getByRole('button', { name: 'Line' })).toBeVisible()
+    await expect(
+      page.getByRole('button', { name: 'Line', exact: true })
+    ).toBeVisible()
 
     // draw a line
     const startXPx = 600
@@ -1472,7 +1474,7 @@ test.describe('Can create sketches on all planes and their back sides', () => {
 
     await expect(page.locator('.cm-content')).toHaveText(code)
 
-    await page.getByRole('button', { name: 'Line' }).click()
+    await page.getByRole('button', { name: 'Line', exact: true }).click()
     await u.openAndClearDebugPanel()
     await page.getByRole('button', { name: 'Exit Sketch' }).click()
     await u.expectCmdLog('[data-message-type="execution-done"]')
@@ -1551,7 +1553,9 @@ test.describe('Copilot ghost text', () => {
     await expect(page.locator('.cm-ghostText')).not.toBeVisible()
   })
 
-  test('copilot disabled in sketch mode no select plane', async ({ page }) => {
+  test.skip('copilot disabled in sketch mode no select plane', async ({
+    page,
+  }) => {
     const u = await getUtils(page)
     // const PUR = 400 / 37.5 //pixeltoUnitRatio
     await page.setViewportSize({ width: 1200, height: 500 })
@@ -2098,7 +2102,7 @@ test.describe('Testing settings', () => {
       .hover()
     await page
       .getByRole('button', {
-        name: 'Roll back theme ; Has tooltip: Roll back to match default',
+        name: 'Roll back theme',
       })
       .click()
     await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
@@ -2150,7 +2154,7 @@ test.describe('Testing settings', () => {
       .hover()
     await page
       .getByRole('button', {
-        name: 'Roll back theme ; Has tooltip: Roll back to match default',
+        name: 'Roll back theme',
       })
       .click()
     await expect(page.locator('select[name="app-theme"]')).toHaveValue('system')
@@ -2564,7 +2568,7 @@ test.describe('Testing selections', () => {
     |> line([-${commonPoints.num2}, 0], %)`)
 
     // deselect line tool
-    await page.getByRole('button', { name: 'Line' }).click()
+    await page.getByRole('button', { name: 'Line', exact: true }).click()
 
     await u.closeDebugPanel()
     const selectionSequence = async () => {
@@ -2589,8 +2593,10 @@ test.describe('Testing selections', () => {
       // click a segment hold shift and click an axis, see that a relevant constraint is enabled
       await topHorzSegmentClick()
       await page.keyboard.down('Shift')
-      const constrainButton = page.getByRole('button', { name: 'Constraints' })
-      const absYButton = page.getByRole('button', { name: 'ABS Y' })
+      const constrainButton = page.getByRole('button', {
+        name: 'Length: open menu',
+      })
+      const absYButton = page.getByRole('button', { name: 'Absolute Y' })
       await constrainButton.click()
       await expect(absYButton).toBeDisabled()
       await page.waitForTimeout(100)
@@ -3414,21 +3420,6 @@ const extrude001 = extrude(50, sketch001)
     await expect(
       page.getByRole('button', { name: 'Edit Sketch' })
     ).not.toBeVisible()
-
-    // selecting an editable sketch but clicking "start sketch" should start a new sketch and not edit the existing one
-    await page.getByText(selectionsSnippets.extrudeAndEditAllowed).click()
-    await page.getByRole('button', { name: 'Start Sketch' }).click()
-    await page.waitForTimeout(200)
-    await page.getByTestId('KCL Code').click()
-    await page.waitForTimeout(200)
-    await page.mouse.click(734, 134)
-    await page.waitForTimeout(100)
-    await page.getByTestId('KCL Code').click()
-    // expect main content to contain `sketch005` i.e. started a new sketch
-    await page.waitForTimeout(300)
-    await expect(page.locator('.cm-content')).toHaveText(
-      /sketch001 = startSketchOn\('XZ'\)/
-    )
   })
 
   test('Deselecting line tool should mean nothing happens on click', async ({
@@ -3465,7 +3456,7 @@ const extrude001 = extrude(50, sketch001)
     let previousCodeContent = await page.locator('.cm-content').innerText()
 
     // deselect the line tool by clicking it
-    await page.getByRole('button', { name: 'Line' }).click()
+    await page.getByRole('button', { name: 'Line', exact: true }).click()
 
     await page.mouse.click(700, 200)
     await page.waitForTimeout(100)
@@ -3478,7 +3469,7 @@ const extrude001 = extrude(50, sketch001)
     await expect(page.locator('.cm-content')).toHaveText(previousCodeContent)
 
     // select line tool again
-    await page.getByRole('button', { name: 'Line' }).click()
+    await page.getByRole('button', { name: 'Line', exact: true }).click()
 
     await u.closeDebugPanel()
 
@@ -3811,13 +3802,24 @@ const extrude001 = extrude(distance001, sketch001)`.replace(
     const sketchButton = page.getByRole('button', { name: 'Start Sketch' })
     const cmdBarButton = page.getByRole('button', { name: 'Commands' })
     const rectangleToolCommand = page.getByRole('option', {
-      name: 'Rectangle',
+      name: 'rectangle',
+    })
+    const rectangleToolButton = page.getByRole('button', {
+      name: 'Corner rectangle',
+      exact: true,
+    })
+    const lineToolCommand = page.getByRole('option', {
+      name: 'Line',
+    })
+    const lineToolButton = page.getByRole('button', {
+      name: 'Line',
+      exact: true,
     })
-    const rectangleToolButton = page.getByRole('button', { name: 'Rectangle' })
-    const lineToolCommand = page.getByRole('option', { name: 'Line' })
-    const lineToolButton = page.getByRole('button', { name: 'Line' })
     const arcToolCommand = page.getByRole('option', { name: 'Tangential Arc' })
-    const arcToolButton = page.getByRole('button', { name: 'Tangential Arc' })
+    const arcToolButton = page.getByRole('button', {
+      name: 'Tangential Arc',
+      exact: true,
+    })
 
     // Start a sketch
     await sketchButton.click()
@@ -3864,7 +3866,7 @@ test.describe('Regression tests', () => {
     await u.waitForAuthSkipAppStart()
 
     // expand variables section
-    const variablesTabButton = page.getByTestId('Variables')
+    const variablesTabButton = page.getByTestId('variables-pane-button')
     await variablesTabButton.click()
 
     // can find sketch001 in the variables summary (pretty-json-container, makes sure we're not looking in the code editor)
@@ -3889,7 +3891,7 @@ test.describe('Regression tests', () => {
 
     await u.waitForAuthSkipAppStart()
 
-    const variablesTabButton = page.getByTestId('Variables')
+    const variablesTabButton = page.getByTestId('variables-pane-button')
     await variablesTabButton.click()
     // expect to see "myVar:5"
     await expect(
@@ -4150,7 +4152,7 @@ test.describe('Sketch tests', () => {
     await u.expectCmdLog('[data-message-type="execution-done"]', 10_000)
     await page.waitForTimeout(100)
 
-    await page.getByRole('button', { name: 'Line' }).click()
+    await page.getByRole('button', { name: 'Line', exact: true }).click()
     await page.waitForTimeout(100)
 
     await page.mouse.click(700, 200)
@@ -4177,9 +4179,7 @@ test.describe('Sketch tests', () => {
       page.getByRole('button', { name: 'Exit Sketch' })
     ).toBeVisible()
 
-    await expect(
-      page.getByText('click plane or face to sketch on')
-    ).toBeVisible()
+    await expect(page.getByText('select a plane or face')).toBeVisible()
 
     await page.keyboard.press('Escape')
     await expect(
@@ -4730,7 +4730,7 @@ test.describe('Sketch tests', () => {
       await expect(page.locator('.cm-content')).toHaveText(code)
       // Assert the tool was unequipped
       await expect(
-        page.getByRole('button', { name: 'Line' })
+        page.getByRole('button', { name: 'Line', exact: true })
       ).not.toHaveAttribute('aria-pressed', 'true')
 
       // exit sketch
@@ -4892,8 +4892,7 @@ test.describe('Testing constraints', () => {
     await page.mouse.click(834, 244)
     await page.keyboard.up('Shift')
 
-    await page.getByRole('button', { name: 'Constraints', exact: true }).click()
-    await page.getByRole('button', { name: 'length', exact: true }).click()
+    await page.getByRole('button', { name: 'Length', exact: true }).click()
     await page.getByText('Add constraining value').click()
 
     await expect(page.locator('.cm-content')).toHaveText(
@@ -4947,12 +4946,10 @@ const part002 = startSketchOn('XZ')
     await page.waitForTimeout(100) // this wait is needed for webkit - not sure why
     await page
       .getByRole('button', {
-        name: 'Constraints',
+        name: 'Length: open menu',
       })
       .click()
-    await page
-      .getByRole('button', { name: 'remove constraints', exact: true })
-      .click()
+    await page.getByRole('button', { name: 'remove constraints' }).click()
 
     await page.getByText('line([39.13, 68.63], %)').click()
     const activeLinesContent = await page.locator('.cm-activeLine').all()
@@ -5013,11 +5010,11 @@ const part002 = startSketchOn('XZ')
         await page.keyboard.up('Shift')
         await page
           .getByRole('button', {
-            name: 'Constraints',
+            name: 'Length: open menu',
           })
           .click()
         await page
-          .getByRole('button', { name: 'perpendicular distance', exact: true })
+          .getByRole('button', { name: 'Perpendicular Distance' })
           .click()
 
         const createNewVariableCheckbox = page.getByTestId(
@@ -5112,12 +5109,10 @@ const part002 = startSketchOn('XZ')
         await page.keyboard.up('Shift')
         await page
           .getByRole('button', {
-            name: 'Constraints',
+            name: 'Length: open menu',
           })
           .click()
-        await page
-          .getByRole('button', { name: constraint, exact: true })
-          .click()
+        await page.getByRole('button', { name: constraint }).click()
 
         const createNewVariableCheckbox = page.getByTestId(
           'create-new-variable-checkbox'
@@ -5158,25 +5153,25 @@ const part002 = startSketchOn('XZ')
       {
         testName: 'Add variable',
         addVariable: true,
-        constraint: 'ABS X',
+        constraint: 'Absolute X',
         value: 'xDis001, 61.34',
       },
       {
         testName: 'No variable',
         addVariable: false,
-        constraint: 'ABS X',
+        constraint: 'Absolute X',
         value: '154.9, 61.34',
       },
       {
         testName: 'Add variable',
         addVariable: true,
-        constraint: 'ABS Y',
+        constraint: 'Absolute Y',
         value: '154.9, yDis001',
       },
       {
         testName: 'No variable',
         addVariable: false,
-        constraint: 'ABS Y',
+        constraint: 'Absolute Y',
         value: '154.9, 61.34',
       },
     ] as const
@@ -5212,7 +5207,7 @@ const part002 = startSketchOn('XZ')
           u.getSegmentBodyCoords(`[data-overlay-index="${2}"]`),
         ])
 
-        if (constraint === 'ABS X') {
+        if (constraint === 'Absolute X') {
           await page.mouse.click(600, 130)
         } else {
           await page.mouse.click(900, 250)
@@ -5223,7 +5218,7 @@ const part002 = startSketchOn('XZ')
         await page.keyboard.up('Shift')
         await page
           .getByRole('button', {
-            name: 'Constraints',
+            name: 'Length: open menu',
           })
           .click()
         await page
@@ -5331,10 +5326,10 @@ const part002 = startSketchOn('XZ')
         await page.keyboard.up('Shift')
         await page
           .getByRole('button', {
-            name: 'Constraints',
+            name: 'Length: open menu',
           })
           .click()
-        await page.getByTestId('angle').click()
+        await page.getByTestId('dropdown-constraint-angle').click()
 
         const createNewVariableCheckbox = page.getByTestId(
           'create-new-variable-checkbox'
@@ -5432,10 +5427,10 @@ const part002 = startSketchOn('XZ')
         await page.mouse.click(line3.x, line3.y)
         await page
           .getByRole('button', {
-            name: 'Constraints',
+            name: 'Length: open menu',
           })
           .click()
-        await page.getByTestId(constraint).click()
+        await page.getByTestId('dropdown-constraint-' + constraint).click()
 
         if (!addVariable) {
           await page.getByTestId('create-new-variable-checkbox').click()
@@ -5523,7 +5518,7 @@ const part002 = startSketchOn('XZ')
         await expect(activeLinesContent).toHaveLength(codeAfter.length)
 
         const constraintMenuButton = page.getByRole('button', {
-          name: 'Constraints',
+          name: 'Length: open menu',
         })
         const constraintButton = page
           .getByRole('button', {
@@ -5606,7 +5601,7 @@ const part002 = startSketchOn('XZ')
         await page.mouse.click(line3.x - 3, line3.y + 20)
         await page.keyboard.up('Shift')
         const constraintMenuButton = page.getByRole('button', {
-          name: 'Constraints',
+          name: 'Length: open menu',
         })
         const constraintButton = page.getByRole('button', {
           name: constraintName,
@@ -5683,7 +5678,7 @@ const part002 = startSketchOn('XZ')
         await page.mouse.click(axisClick.x, axisClick.y)
         await page.keyboard.up('Shift')
         const constraintMenuButton = page.getByRole('button', {
-          name: 'Constraints',
+          name: 'Length: open menu',
         })
         const constraintButton = page.getByRole('button', {
           name: constraintName,
@@ -5742,10 +5737,10 @@ const part002 = startSketchOn('XZ')
 
     await page
       .getByRole('button', {
-        name: 'Constraints',
+        name: 'Length: open menu',
       })
       .click()
-    await page.getByRole('button', { name: 'horizontal', exact: true }).click()
+    await page.getByRole('button', { name: 'Horizontal', exact: true }).click()
 
     let activeLinesContent = await page.locator('.cm-activeLine').all()
     await expect(activeLinesContent[0]).toHaveText(`|> xLine(3.13, %)`)
@@ -5766,13 +5761,13 @@ const part002 = startSketchOn('XZ')
     await page.waitForTimeout(300)
     await page
       .getByRole('button', {
-        name: 'Constraints',
+        name: 'Length: open menu',
       })
       .click()
     // await expect(page.getByRole('button', { name: 'length', exact: true })).toBeVisible()
     await page.waitForTimeout(200)
     // await page.getByRole('button', { name: 'length', exact: true }).click()
-    await page.locator('[data-testid="length"]').click()
+    await page.getByTestId('dropdown-constraint-length').click()
 
     await page.getByLabel('length Value').fill('10')
     await page.getByRole('button', { name: 'Add constraining value' }).click()
@@ -7064,6 +7059,8 @@ test.describe('Test network and connection issues', () => {
 
     await u.waitForAuthSkipAppStart()
 
+    const networkToggle = page.getByTestId('network-toggle')
+
     // This is how we wait until the stream is online
     await expect(
       page.getByRole('button', { name: 'Start Sketch' })
@@ -7077,7 +7074,7 @@ test.describe('Test network and connection issues', () => {
     await expect(networkPopover).not.toBeVisible()
 
     // (First check) Expect the network to be up
-    await expect(page.getByText('Network Health (Connected)')).toBeVisible()
+    await expect(networkToggle).toContainText('Connected')
 
     // Click the network widget
     await networkWidget.click()
@@ -7099,7 +7096,7 @@ test.describe('Test network and connection issues', () => {
     })
 
     // Expect the network to be down
-    await expect(page.getByText('Network Health (Offline)')).toBeVisible()
+    await expect(networkToggle).toContainText('Offline')
 
     // Click the network widget
     await networkWidget.click()
@@ -7125,7 +7122,7 @@ test.describe('Test network and connection issues', () => {
     ).not.toBeDisabled({ timeout: 15000 })
 
     // (Second check) expect the network to be up
-    await expect(page.getByText('Network Health (Connected)')).toBeVisible()
+    await expect(networkToggle).toContainText('Connected')
   })
 
   test('Engine disconnect & reconnect in sketch mode', async ({
@@ -7137,6 +7134,8 @@ test.describe('Test network and connection issues', () => {
       browserName === 'webkit',
       'Skip on Safari until `window.tearDown` is working there'
     )
+    const networkToggle = page.getByTestId('network-toggle')
+
     const u = await getUtils(page)
     await page.setViewportSize({ width: 1200, height: 500 })
     const PUR = 400 / 37.5 //pixeltoUnitRatio
@@ -7179,7 +7178,7 @@ test.describe('Test network and connection issues', () => {
     |> line([${commonPoints.num1}, 0], %)`)
 
     // Expect the network to be up
-    await expect(page.getByText('Network Health (Connected)')).toBeVisible()
+    await expect(networkToggle).toContainText('Connected')
 
     // simulate network down
     await u.emulateNetworkConditions({
@@ -7191,7 +7190,7 @@ test.describe('Test network and connection issues', () => {
     })
 
     // Expect the network to be down
-    await expect(page.getByText('Network Health (Offline)')).toBeVisible()
+    await expect(networkToggle).toContainText('Offline')
 
     // Ensure we are not in sketch mode
     await expect(
@@ -7216,7 +7215,7 @@ test.describe('Test network and connection issues', () => {
     ).not.toBeDisabled({ timeout: 15000 })
 
     // Expect the network to be up
-    await expect(page.getByText('Network Health (Connected)')).toBeVisible()
+    await expect(networkToggle).toContainText('Connected')
     await expect(page.getByTestId('loading-stream')).not.toBeAttached()
 
     // Click off the code pane.
@@ -7233,7 +7232,7 @@ test.describe('Test network and connection issues', () => {
     await page.waitForTimeout(150)
 
     // Click the line tool
-    await page.getByRole('button', { name: 'Line' }).click()
+    await page.getByRole('button', { name: 'Line', exact: true }).click()
 
     await page.waitForTimeout(150)
 
@@ -7260,7 +7259,7 @@ test.describe('Test network and connection issues', () => {
       page.getByRole('button', { name: 'Exit Sketch' })
     ).toBeVisible()
     await expect(
-      page.getByRole('button', { name: 'Line' })
+      page.getByRole('button', { name: 'Line', exact: true })
     ).not.toHaveAttribute('aria-pressed', 'true')
 
     // Exit sketch
@@ -7665,7 +7664,7 @@ test('Keyboard shortcuts can be viewed through the help menu', async ({
     .waitFor({ state: 'visible' })
 
   // Open the help menu
-  await page.getByRole('button', { name: 'Help', exact: false }).click()
+  await page.getByRole('button', { name: 'Help and resources' }).click()
 
   // Open the keyboard shortcuts
   await page.getByRole('button', { name: 'Keyboard Shortcuts' }).click()
@@ -7689,8 +7688,11 @@ test('First escape in tool pops you out of tool, second exits sketch mode', asyn
   await u.expectCmdLog('[data-message-type="execution-done"]')
   await u.closeDebugPanel()
 
-  const lineButton = page.getByRole('button', { name: 'Line' })
-  const arcButton = page.getByRole('button', { name: 'Tangential Arc' })
+  const lineButton = page.getByRole('button', { name: 'Line', exact: true })
+  const arcButton = page.getByRole('button', {
+    name: 'Tangential Arc',
+    exact: true,
+  })
 
   // Test these hotkeys perform actions when
   // focus is on the canvas
@@ -7702,6 +7704,7 @@ test('First escape in tool pops you out of tool, second exits sketch mode', asyn
   await page.mouse.move(800, 300)
   await page.mouse.click(800, 300)
   await page.waitForTimeout(1000)
+  await expect(lineButton).toBeVisible()
   await expect(lineButton).toHaveAttribute('aria-pressed', 'true')
 
   // Draw a line
@@ -7771,9 +7774,12 @@ test('Basic default modeling and sketch hotkeys work', async ({ page }) => {
   await u.closeDebugPanel()
 
   const codePane = page.getByRole('textbox').locator('div')
-  const codePaneButton = page.getByTestId('KCL Code')
-  const lineButton = page.getByRole('button', { name: 'Line' })
-  const arcButton = page.getByRole('button', { name: 'Tangential Arc' })
+  const codePaneButton = page.getByTestId('code-pane-button')
+  const lineButton = page.getByRole('button', { name: 'Line', exact: true })
+  const arcButton = page.getByRole('button', {
+    name: 'Tangential Arc',
+    exact: true,
+  })
   const extrudeButton = page.getByRole('button', { name: 'Extrude' })
 
   // Test that the hotkeys do nothing when
@@ -7794,7 +7800,7 @@ test('Basic default modeling and sketch hotkeys work', async ({ page }) => {
   await page.mouse.click(600, 250)
 
   // work-around: to stop "keyboard.press('s')" from typing in the editor even when it should be blurred
-  await page.getByRole('button', { name: 'Commands ⌘K' }).click()
+  await page.getByRole('button', { name: 'Commands' }).click()
   await page.waitForTimeout(100)
   await page.keyboard.press('Escape')
   await page.waitForTimeout(100)
diff --git a/e2e/playwright/snapshot-tests.spec.ts b/e2e/playwright/snapshot-tests.spec.ts
index 5f37d09b0..5bbe69eb5 100644
--- a/e2e/playwright/snapshot-tests.spec.ts
+++ b/e2e/playwright/snapshot-tests.spec.ts
@@ -431,7 +431,9 @@ test('Draft segments should look right', async ({ page, context }) => {
   |> line([7.25, 0], %)`
   await expect(page.locator('.cm-content')).toHaveText(code)
 
-  await page.getByRole('button', { name: 'Tangential Arc' }).click()
+  await page
+    .getByRole('button', { name: 'Tangential Arc', exact: true })
+    .click()
 
   await page.mouse.move(startXPx + PUR * 30, 500 - PUR * 20, { steps: 10 })
 
@@ -475,8 +477,10 @@ test('Draft rectangles should look right', async ({ page, context }) => {
   const startXPx = 600
 
   // Equip the rectangle tool
-  await page.getByRole('button', { name: 'Line' }).click()
-  await page.getByRole('button', { name: 'Rectangle' }).click()
+  await page.getByRole('button', { name: 'Line', exact: true }).click()
+  await page
+    .getByRole('button', { name: 'Corner rectangle', exact: true })
+    .click()
 
   // Draw the rectangle
   await page.mouse.click(startXPx + PUR * 20, 500 - PUR * 30)
@@ -535,7 +539,9 @@ test.describe('Client side scene scale should match engine scale', () => {
   |> line([7.25, 0], %)`
     await expect(u.codeLocator).toHaveText(code)
 
-    await page.getByRole('button', { name: 'Tangential Arc' }).click()
+    await page
+      .getByRole('button', { name: 'Tangential Arc', exact: true })
+      .click()
     await page.waitForTimeout(100)
 
     await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
@@ -545,7 +551,9 @@ test.describe('Client side scene scale should match engine scale', () => {
     await expect(u.codeLocator).toHaveText(code)
 
     // click tangential arc tool again to unequip it
-    await page.getByRole('button', { name: 'Tangential Arc' }).click()
+    await page
+      .getByRole('button', { name: 'Tangential Arc', exact: true })
+      .click()
     await page.waitForTimeout(100)
 
     // screen shot should show the sketch
@@ -634,7 +642,9 @@ test.describe('Client side scene scale should match engine scale', () => {
   |> line([184.3, 0], %)`
     await expect(u.codeLocator).toHaveText(code)
 
-    await page.getByRole('button', { name: 'Tangential Arc' }).click()
+    await page
+      .getByRole('button', { name: 'Tangential Arc', exact: true })
+      .click()
     await page.waitForTimeout(100)
 
     await page.mouse.click(startXPx + PUR * 30, 500 - PUR * 20)
@@ -643,7 +653,9 @@ test.describe('Client side scene scale should match engine scale', () => {
   |> tangentialArcTo([551.2, -62.01], %)`
     await expect(u.codeLocator).toHaveText(code)
 
-    await page.getByRole('button', { name: 'Tangential Arc' }).click()
+    await page
+      .getByRole('button', { name: 'Tangential Arc', exact: true })
+      .click()
     await page.waitForTimeout(100)
 
     // screen shot should show the sketch
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png
index 3f482e5dd..33062d7cf 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png
index 813be687f..8b4a8b843 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png
index 837dcb00f..2c42d7a6d 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png
index 6ead3c3f5..f7cca18b9 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png
index 55e52e3ae..72f306ed1 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png
index 50121562b..9eb4ac2bd 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png
index fc9cd52f6..e8a8ad2f6 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-1-Google-Chrome-linux.png
index c87e52b26..d9974fa77 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-on-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-on-1-Google-Chrome-linux.png
index 53a4ec95d..5b68ec143 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-on-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-on-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png
index 44a9afc82..c726617b3 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-2d-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-2d-1-Google-Chrome-linux.png
index b0cde33b7..bc3c94a7d 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-2d-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-2d-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-3d-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-3d-1-Google-Chrome-linux.png
index 4f5ee2644..af1d8b0e0 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-3d-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Zoom-to-fit-on-load---solid-3d-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png
index 41b639aa3..04ccc0ac3 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png
index 847df3860..d7362934b 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png
index a7f624c82..60c31b2c3 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png
index 8b20d67f8..8b4db660e 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png
index 72dc9efb9..dbcda0f45 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png
index 679794a1f..c69bea0d0 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png differ
diff --git a/e2e/playwright/test-utils.ts b/e2e/playwright/test-utils.ts
index 14e226d3f..43cd31e68 100644
--- a/e2e/playwright/test-utils.ts
+++ b/e2e/playwright/test-utils.ts
@@ -21,7 +21,7 @@ async function waitForPageLoad(page: Page) {
     timeout: 20_000,
   })
 
-  await expect(page.getByTestId('start-sketch')).toBeEnabled({
+  await expect(page.getByRole('button', { name: 'Start Sketch' })).toBeEnabled({
     timeout: 20_000,
   })
 }
@@ -58,8 +58,9 @@ async function waitForDefaultPlanesToBeVisible(page: Page) {
 }
 
 async function openKclCodePanel(page: Page) {
-  const paneLocator = page.getByTestId('KCL Code')
-  const isOpen = (await paneLocator?.getAttribute('aria-pressed')) === 'true'
+  const paneLocator = page.getByTestId('code-pane-button')
+  const ariaSelected = await paneLocator?.getAttribute('aria-pressed')
+  const isOpen = ariaSelected === 'true'
 
   if (!isOpen) {
     await paneLocator.click()
@@ -68,8 +69,10 @@ async function openKclCodePanel(page: Page) {
 }
 
 async function closeKclCodePanel(page: Page) {
-  const paneLocator = page.getByTestId('KCL Code')
-  const isOpen = (await paneLocator?.getAttribute('aria-pressed')) === 'true'
+  const paneLocator = page.getByTestId('code-pane-button')
+  const ariaSelected = await paneLocator?.getAttribute('aria-pressed')
+  const isOpen = ariaSelected === 'true'
+
   if (isOpen) {
     await paneLocator.click()
     await expect(paneLocator).not.toHaveAttribute('aria-pressed', 'true')
@@ -77,7 +80,8 @@ async function closeKclCodePanel(page: Page) {
 }
 
 async function openDebugPanel(page: Page) {
-  const debugLocator = page.getByTestId('Debug')
+  const debugLocator = page.getByTestId('debug-pane-button')
+  await expect(debugLocator).toBeVisible()
   const isOpen = (await debugLocator?.getAttribute('aria-pressed')) === 'true'
 
   if (!isOpen) {
@@ -87,7 +91,8 @@ async function openDebugPanel(page: Page) {
 }
 
 async function closeDebugPanel(page: Page) {
-  const debugLocator = page.getByTestId('Debug')
+  const debugLocator = page.getByTestId('debug-pane-button')
+  await expect(debugLocator).toBeVisible()
   const isOpen = (await debugLocator?.getAttribute('aria-pressed')) === 'true'
   if (isOpen) {
     await debugLocator.click()
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index 591c44c9a..633538d2a 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -1,4 +1,4 @@
-import { WheelEvent, useRef, useMemo } from 'react'
+import { useRef, useMemo, memo } from 'react'
 import { isCursorInSketchCommandRange } from 'lang/util'
 import { engineCommandManager, kclManager } from 'lib/singletons'
 import { useModelingContext } from 'hooks/useModelingContext'
@@ -12,11 +12,14 @@ import { ActionButtonDropdown } from 'components/ActionButtonDropdown'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Tooltip from 'components/Tooltip'
 import { useAppState } from 'AppState'
+import { CustomIcon } from 'components/CustomIcon'
 import {
-  canRectangleTool,
-  isEditingExistingSketch,
-} from 'machines/modelingMachine'
-import { DEV } from 'env'
+  toolbarConfig,
+  ToolbarItem,
+  ToolbarItemCallbackProps,
+  ToolbarItemResolved,
+  ToolbarModeName,
+} from 'lib/toolbar'
 
 export function Toolbar({
   className = '',
@@ -25,12 +28,14 @@ export function Toolbar({
   const { state, send, context } = useModelingContext()
   const { commandBarSend } = useCommandsContext()
   const iconClassName =
-    'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-primary dark:group-enabled:group-hover:!text-inherit group-pressed:!text-chalkboard-10 group-ui-open:!text-chalkboard-10 dark:group-ui-open:!text-chalkboard-10'
-  const bgClassName =
-    'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary/10 dark:group-enabled:group-hover:bg-primary group-pressed:bg-primary group-ui-open:bg-primary'
-  const buttonClassName =
-    'bg-chalkboard-10 dark:bg-chalkboard-100 enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!border-primary ui-open:!border-primary'
-  const pathId = useMemo(() => {
+    'group-disabled:text-chalkboard-50 !text-inherit dark:group-enabled:group-hover:!text-inherit'
+  const bgClassName = '!bg-transparent'
+  const buttonBgClassName =
+    'bg-chalkboard-transparent dark:bg-transparent disabled:bg-transparent dark:disabled:bg-transparent enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!bg-primary pressed:enabled:hover:!text-chalkboard-10'
+  const buttonBorderClassName =
+    '!border-transparent hover:!border-chalkboard-20 dark:enabled:hover:!border-primary pressed:!border-primary ui-open:!border-primary'
+
+  const sketchPathId = useMemo(() => {
     if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast)) {
       return false
     }
@@ -51,401 +56,292 @@ export function Toolbar({
     isExecuting ||
     !isStreamReady
 
-  const disableLineButton =
-    state.matches('Sketch.Rectangle tool.Awaiting second corner') ||
-    disableAllButtons
-  useHotkeys(
-    'l',
-    () =>
-      state.matches('Sketch.Line tool')
-        ? send('CancelSketch')
-        : send({
-            type: 'change tool',
-            data: { tool: 'line' },
-          }),
-    { enabled: !disableLineButton, scopes: ['sketch'] }
-  )
-  const disableTangentialArc =
-    (!isEditingExistingSketch(context) &&
-      !state.matches('Sketch.Tangential arc to')) ||
-    disableAllButtons
-  useHotkeys(
-    'a',
-    () =>
-      state.matches('Sketch.Tangential arc to')
-        ? send('CancelSketch')
-        : send({
-            type: 'change tool',
-            data: { tool: 'tangentialArc' },
-          }),
-    { enabled: !disableTangentialArc, scopes: ['sketch'] }
-  )
-  const disableRectangle =
-    (!canRectangleTool(context) && !state.matches('Sketch.Rectangle tool')) ||
-    disableAllButtons
-  useHotkeys(
-    'r',
-    () =>
-      state.matches('Sketch.Rectangle tool')
-        ? send('CancelSketch')
-        : send({
-            type: 'change tool',
-            data: { tool: 'rectangle' },
-          }),
-    { enabled: !disableRectangle, scopes: ['sketch'] }
-  )
-  useHotkeys(
-    's',
-    () =>
-      state.nextEvents.includes('Enter sketch') && pathId
-        ? send({ type: 'Enter sketch' })
-        : send({ type: 'Enter sketch', data: { forceNewSketch: true } }),
-    { enabled: !disableAllButtons, scopes: ['modeling'] }
-  )
-  useHotkeys(
-    'esc',
-    () =>
-      ['Sketch no face', 'Sketch.SketchIdle'].some(state.matches)
-        ? send('Cancel')
-        : send('CancelSketch'),
-    { enabled: !disableAllButtons, scopes: ['sketch'] }
-  )
-  useHotkeys(
-    'e',
-    () =>
-      commandBarSend({
-        type: 'Find and select command',
-        data: { name: 'Extrude', groupId: 'modeling' },
-      }),
-    { enabled: !disableAllButtons, scopes: ['modeling'] }
-  )
-  const disableFillet = !state.can('Fillet') || disableAllButtons
-  useHotkeys(
-    'f',
-    () =>
-      commandBarSend({
-        type: 'Find and select command',
-        data: { name: 'Fillet', groupId: 'modeling' },
-      }),
-    { enabled: !disableFillet, scopes: ['modeling'] }
+  const currentMode =
+    (Object.entries(toolbarConfig).find(([_, mode]) =>
+      mode.check(state)
+    )?.[0] as ToolbarModeName) || 'modeling'
+
+  /** These are the props that will be passed to the callbacks in the toolbar config
+   * They are memoized to prevent unnecessary re-renders,
+   * but they still get a lot of churn from the state machine
+   * so I think there's a lot of room for improvement here
+   */
+  const configCallbackProps: ToolbarItemCallbackProps = useMemo(
+    () => ({
+      modelingStateMatches: state.matches,
+      modelingSend: send,
+      commandBarSend,
+      sketchPathId,
+    }),
+    [state.matches, send, commandBarSend, sketchPathId]
   )
 
-  function handleToolbarButtonsWheelEvent(ev: WheelEvent<HTMLSpanElement>) {
-    const span = toolbarButtonsRef.current
-    if (!span) {
-      return
+  /**
+   * Resolve all the callbacks and values for the current mode,
+   * so we don't need to worry about the other modes
+   */
+  const currentModeItems: (
+    | ToolbarItemResolved
+    | ToolbarItemResolved[]
+    | 'break'
+  )[] = useMemo(() => {
+    return toolbarConfig[currentMode].items.map((maybeIconConfig) => {
+      if (maybeIconConfig === 'break') {
+        return 'break'
+      } else if (Array.isArray(maybeIconConfig)) {
+        return maybeIconConfig.map(resolveItemConfig)
+      } else {
+        return resolveItemConfig(maybeIconConfig)
+      }
+    })
+
+    function resolveItemConfig(
+      maybeIconConfig: ToolbarItem
+    ): ToolbarItemResolved {
+      return {
+        ...maybeIconConfig,
+        title:
+          typeof maybeIconConfig.title === 'string'
+            ? maybeIconConfig.title
+            : maybeIconConfig.title(configCallbackProps),
+        description: maybeIconConfig.description,
+        links: maybeIconConfig.links || [],
+        isActive: maybeIconConfig.isActive?.(state),
+        hotkey:
+          typeof maybeIconConfig.hotkey === 'string'
+            ? maybeIconConfig.hotkey
+            : maybeIconConfig.hotkey?.(state),
+        disabled:
+          disableAllButtons ||
+          maybeIconConfig.status !== 'available' ||
+          maybeIconConfig.disabled?.(state) === true,
+        disableHotkey: maybeIconConfig.disableHotkey?.(state),
+        status: maybeIconConfig.status,
+      }
     }
+  }, [currentMode, disableAllButtons, configCallbackProps])
 
-    span.scrollLeft = span.scrollLeft += ev.deltaY
-  }
-  const nextEvents = useMemo(() => state.nextEvents, [state.nextEvents])
-  const splitMenuItems = useMemo(
-    () =>
-      nextEvents
-        .filter(
-          (eventName) =>
-            eventName.includes('Make segment') ||
-            eventName.includes('Constrain')
-        )
-        .sort((a, b) => {
-          const aisEnabled = nextEvents
-            .filter((event) => state.can(event as any))
-            .includes(a)
-          const bIsEnabled = nextEvents
-            .filter((event) => state.can(event as any))
-            .includes(b)
-          if (aisEnabled && !bIsEnabled) {
-            return -1
-          }
-          if (!aisEnabled && bIsEnabled) {
-            return 1
-          }
-          return 0
-        })
-        .map((eventName) => ({
-          label: eventName
-            .replace('Make segment ', '')
-            .replace('Constrain ', ''),
-          onClick: () => send(eventName),
-          disabled:
-            !nextEvents
-              .filter((event) => state.can(event as any))
-              .includes(eventName) || disableAllButtons,
-        })),
-
-    [JSON.stringify(nextEvents), state]
-  )
   return (
-    <menu className="max-w-full whitespace-nowrap rounded px-1.5 py-0.5 backdrop-blur-sm bg-chalkboard-10/80 dark:bg-chalkboard-110/70 relative">
+    <menu className="max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-20 dark:border-chalkboard-80 border-t-0 shadow-sm">
       <ul
         {...props}
         ref={toolbarButtonsRef}
-        onWheel={handleToolbarButtonsWheelEvent}
-        className={'m-0 py-1 rounded-l-sm flex gap-2 items-center ' + className}
-        style={{ scrollbarWidth: 'thin' }}
+        className={
+          'has-[[aria-expanded=true]]:!pointer-events-none m-0 py-1 rounded-l-sm flex gap-1.5 items-center ' +
+          className
+        }
       >
-        {nextEvents.includes('Enter sketch') && (
-          <li className="contents">
-            <ActionButton
-              className={buttonClassName}
-              Element="button"
-              onClick={() =>
-                send({ type: 'Enter sketch', data: { forceNewSketch: true } })
-              }
-              iconStart={{
-                icon: 'sketch',
-                iconClassName,
-                bgClassName,
-              }}
-              disabled={disableAllButtons}
-            >
-              <span data-testid="start-sketch">Start Sketch</span>
-              <Tooltip
-                delay={1250}
-                position="bottom"
-                className="!px-2 !text-xs"
-              >
-                Shortcut: S
-              </Tooltip>
-            </ActionButton>
-          </li>
-        )}
-        {nextEvents.includes('Enter sketch') && pathId && (
-          <li className="contents">
-            <ActionButton
-              className={buttonClassName}
-              Element="button"
-              onClick={() => send({ type: 'Enter sketch' })}
-              iconStart={{
-                icon: 'sketch',
-                iconClassName,
-                bgClassName,
-              }}
-              disabled={disableAllButtons}
-            >
-              Edit Sketch
-              <Tooltip
-                delay={1250}
-                position="bottom"
-                className="!px-2 !text-xs"
-              >
-                Shortcut: S
-              </Tooltip>
-            </ActionButton>
-          </li>
-        )}
-        {nextEvents.includes('Cancel') && !state.matches('idle') && (
-          <li className="contents">
-            <ActionButton
-              className={buttonClassName}
-              Element="button"
-              onClick={() => send({ type: 'Cancel' })}
-              iconStart={{
-                icon: 'arrowLeft',
-                iconClassName,
-                bgClassName,
-              }}
-              disabled={disableAllButtons}
-            >
-              Exit Sketch
-              <Tooltip
-                delay={1250}
-                position="bottom"
-                className="!px-2 !text-xs"
-              >
-                Shortcut: Esc
-              </Tooltip>
-            </ActionButton>
-          </li>
-        )}
-        {state.matches('Sketch no face') && (
-          <li className="contents">
-            <div className="mx-2 text-sm">click plane or face to sketch on</div>
-          </li>
-        )}
-        {state.matches('Sketch') && !state.matches('idle') && (
-          <>
-            <li className="contents" key="line-button">
-              <ActionButton
-                className={buttonClassName}
+        {/* A menu item will either be a vertical line break, a button with a dropdown, or a single button */}
+        {currentModeItems.map((maybeIconConfig, i) => {
+          if (maybeIconConfig === 'break') {
+            return (
+              <div
+                key={'break-' + i}
+                className="h-5 w-[1px] block bg-chalkboard-30 dark:bg-chalkboard-80"
+              />
+            )
+          } else if (Array.isArray(maybeIconConfig)) {
+            return (
+              <ActionButtonDropdown
                 Element="button"
-                onClick={() =>
-                  state?.matches('Sketch.Line tool')
-                    ? send('CancelSketch')
-                    : send({
-                        type: 'change tool',
-                        data: { tool: 'line' },
-                      })
+                key={maybeIconConfig[0].id}
+                data-testid={maybeIconConfig[0].id + '-dropdown'}
+                id={maybeIconConfig[0].id + '-dropdown'}
+                name={maybeIconConfig[0].title}
+                className={
+                  'group/wrapper ' +
+                  buttonBorderClassName +
+                  ' !bg-transparent relative group !gap-0'
                 }
-                aria-pressed={state?.matches('Sketch.Line tool')}
-                iconStart={{
-                  icon: 'line',
-                  iconClassName,
-                  bgClassName,
-                }}
-                disabled={disableLineButton}
+                splitMenuItems={maybeIconConfig.map((itemConfig) => ({
+                  id: itemConfig.id,
+                  label: itemConfig.title,
+                  hotkey: itemConfig.hotkey,
+                  onClick: () => itemConfig.onClick(configCallbackProps),
+                  disabled:
+                    disableAllButtons ||
+                    itemConfig.status !== 'available' ||
+                    itemConfig.disabled === true,
+                  status: itemConfig.status,
+                }))}
               >
-                Line
-                <Tooltip
-                  delay={1250}
-                  position="bottom"
-                  className="!px-2 !text-xs"
+                <ActionButton
+                  Element="button"
+                  id={maybeIconConfig[0].id}
+                  data-testid={maybeIconConfig[0].id}
+                  iconStart={{
+                    icon: maybeIconConfig[0].icon,
+                    className: iconClassName,
+                    bgClassName: bgClassName,
+                  }}
+                  className={
+                    '!border-transparent !px-0 pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
+                    buttonBgClassName
+                  }
+                  aria-pressed={maybeIconConfig[0].isActive}
+                  disabled={
+                    disableAllButtons ||
+                    maybeIconConfig[0].status !== 'available' ||
+                    maybeIconConfig[0].disabled
+                  }
+                  name={maybeIconConfig[0].title}
+                  aria-description={maybeIconConfig[0].description}
+                  onClick={() =>
+                    maybeIconConfig[0].onClick(configCallbackProps)
+                  }
                 >
-                  Shortcut: L
-                </Tooltip>
-              </ActionButton>
-            </li>
-            <li className="contents" key="tangential-arc-button">
-              <ActionButton
-                className={buttonClassName}
-                Element="button"
-                onClick={() =>
-                  state.matches('Sketch.Tangential arc to')
-                    ? send('CancelSketch')
-                    : send({
-                        type: 'change tool',
-                        data: { tool: 'tangentialArc' },
-                      })
-                }
-                aria-pressed={state.matches('Sketch.Tangential arc to')}
-                iconStart={{
-                  icon: 'arc',
-                  iconClassName,
-                  bgClassName,
-                }}
-                disabled={disableTangentialArc}
-              >
-                Tangential Arc
-                <Tooltip
-                  delay={1250}
-                  position="bottom"
-                  className="!px-2 !text-xs"
-                >
-                  Shortcut: A
-                </Tooltip>
-              </ActionButton>
-            </li>
-            <li className="contents" key="rectangle-button">
-              <ActionButton
-                className={buttonClassName}
-                Element="button"
-                onClick={() =>
-                  state.matches('Sketch.Rectangle tool')
-                    ? send('CancelSketch')
-                    : send({
-                        type: 'change tool',
-                        data: { tool: 'rectangle' },
-                      })
-                }
-                aria-pressed={state.matches('Sketch.Rectangle tool')}
-                iconStart={{
-                  icon: 'rectangle',
-                  iconClassName,
-                  bgClassName,
-                }}
-                disabled={disableRectangle}
-                title={
-                  canRectangleTool(context)
-                    ? 'Rectangle'
-                    : 'Can only be used when a sketch is empty currently'
-                }
-              >
-                Rectangle
-                <Tooltip
-                  delay={1250}
-                  position="bottom"
-                  className="!px-2 !text-xs"
-                >
-                  Shortcut: R
-                </Tooltip>
-              </ActionButton>
-            </li>
-          </>
-        )}
-        {state.matches('Sketch.SketchIdle') &&
-          nextEvents.filter(
-            (eventName) =>
-              eventName.includes('Make segment') ||
-              eventName.includes('Constrain')
-          ).length > 0 && (
-            <ActionButtonDropdown
-              splitMenuItems={splitMenuItems}
-              className={buttonClassName}
-              Element="button"
-              iconStart={{
-                icon: 'dimension',
-                iconClassName,
-                bgClassName,
-              }}
-            >
-              Constraints
-            </ActionButtonDropdown>
-          )}
-        {state.matches('idle') && (
-          <li className="contents">
+                  <ToolbarItemContents
+                    itemConfig={maybeIconConfig[0]}
+                    configCallbackProps={configCallbackProps}
+                  />
+                </ActionButton>
+              </ActionButtonDropdown>
+            )
+          }
+          const itemConfig = maybeIconConfig
+
+          return (
             <ActionButton
-              className={buttonClassName}
               Element="button"
-              onClick={() =>
-                commandBarSend({
-                  type: 'Find and select command',
-                  data: { name: 'Extrude', groupId: 'modeling' },
-                })
-              }
-              disabled={!state.can('Extrude') || disableAllButtons}
-              title={
-                state.can('Extrude')
-                  ? 'extrude'
-                  : 'sketches need to be closed, or not already extruded'
-              }
+              key={itemConfig.id}
+              id={itemConfig.id}
+              data-testid={itemConfig.id}
               iconStart={{
-                icon: 'extrude',
-                iconClassName,
-                bgClassName,
+                icon: itemConfig.icon,
+                className: iconClassName,
+                bgClassName: bgClassName,
               }}
-            >
-              Extrude
-              <Tooltip
-                delay={1250}
-                position="bottom"
-                className="!px-2 !text-xs"
-              >
-                Shortcut: E
-              </Tooltip>
-            </ActionButton>
-          </li>
-        )}
-        {state.matches('idle') && (DEV || (window as any)._enableFillet) && (
-          <li className="contents">
-            <ActionButton
-              className={buttonClassName}
-              Element="button"
-              onClick={() =>
-                commandBarSend({
-                  type: 'Find and select command',
-                  data: { name: 'Fillet', groupId: 'modeling' },
-                })
+              className={
+                'pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
+                buttonBorderClassName +
+                ' ' +
+                buttonBgClassName +
+                (!itemConfig.showTitle ? ' !px-0' : '')
               }
-              disabled={disableFillet}
-              title={disableFillet ? 'fillet' : "edge can't be filleted"}
-              iconStart={{
-                icon: 'fillet', // todo: add fillet icon
-                iconClassName,
-                bgClassName,
-              }}
+              name={itemConfig.title}
+              aria-description={itemConfig.description}
+              aria-pressed={itemConfig.isActive}
+              disabled={
+                disableAllButtons ||
+                itemConfig.status !== 'available' ||
+                itemConfig.disabled
+              }
+              onClick={() => itemConfig.onClick(configCallbackProps)}
             >
-              Fillet
-              <Tooltip
-                delay={1250}
-                position="bottom"
-                className="!px-2 !text-xs"
-              >
-                Shortcut: F
-              </Tooltip>
+              <ToolbarItemContents
+                itemConfig={itemConfig}
+                configCallbackProps={configCallbackProps}
+              />
             </ActionButton>
-          </li>
-        )}
+          )
+        })}
       </ul>
+      {state.matches('Sketch no face') && (
+        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 py-1 px-2 bg-chalkboard-10 dark:bg-chalkboard-90 border border-chalkboard-20 dark:border-chalkboard-80 rounded shadow-lg">
+          <p className="text-xs">Select a plane or face to start sketching</p>
+        </div>
+      )}
     </menu>
   )
 }
+
+/**
+ * The single button and dropdown button share content, so we extract it here
+ * It contains a tooltip with the title, description, and links
+ * and a hotkey listener
+ */
+const ToolbarItemContents = memo(function ToolbarItemContents({
+  itemConfig,
+  configCallbackProps,
+}: {
+  itemConfig: ToolbarItemResolved
+  configCallbackProps: ToolbarItemCallbackProps
+}) {
+  useHotkeys(
+    itemConfig.hotkey || '',
+    () => {
+      itemConfig.onClick(configCallbackProps)
+    },
+    {
+      enabled:
+        itemConfig.status === 'available' &&
+        !!itemConfig.hotkey &&
+        !itemConfig.disabled &&
+        !itemConfig.disableHotkey,
+    }
+  )
+
+  return (
+    <>
+      <span className={!itemConfig.showTitle ? 'sr-only' : ''}>
+        {itemConfig.title}
+      </span>
+      <Tooltip
+        position="bottom"
+        wrapperClassName="!p-4 !pointer-events-auto"
+        contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
+      >
+        <div className="rounded-top flex items-center gap-2 pt-3 pb-2 px-2 bg-chalkboard-20/50 dark:bg-chalkboard-80/50">
+          <span
+            className={`text-sm flex-1 ${
+              itemConfig.status !== 'available'
+                ? 'text-chalkboard-70 dark:text-chalkboard-40'
+                : ''
+            }`}
+          >
+            {itemConfig.title}
+          </span>
+          {itemConfig.status === 'available' && itemConfig.hotkey ? (
+            <kbd className="flex-none hotkey">{itemConfig.hotkey}</kbd>
+          ) : itemConfig.status === 'kcl-only' ? (
+            <>
+              <span className="text-wrap font-sans flex-0 text-chalkboard-70 dark:text-chalkboard-40">
+                KCL code only
+              </span>
+              <CustomIcon
+                name="code"
+                className="w-5 h-5 text-chalkboard-70 dark:text-chalkboard-40"
+              />
+            </>
+          ) : (
+            itemConfig.status === 'unavailable' && (
+              <>
+                <span className="text-wrap font-sans flex-0 text-chalkboard-70 dark:text-chalkboard-40">
+                  In development
+                </span>
+                <CustomIcon
+                  name="lockClosed"
+                  className="w-5 h-5 text-chalkboard-70 dark:text-chalkboard-40"
+                />
+              </>
+            )
+          )}
+        </div>
+        <p className="px-2 text-ch font-sans">{itemConfig.description}</p>
+        {itemConfig.links.length > 0 && (
+          <>
+            <hr className="border-chalkboard-20 dark:border-chalkboard-80" />
+            <ul className="p-0 px-1 m-0 flex flex-col">
+              {itemConfig.links.map((link) => (
+                <li key={link.label} className="contents">
+                  <a
+                    href={link.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="flex items-center rounded-sm p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"
+                    onClickCapture={(e) =>
+                      e.nativeEvent.stopImmediatePropagation()
+                    }
+                  >
+                    <span className="flex-1">Open {link.label}</span>
+                    <CustomIcon name="link" className="w-4 h-4" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </Tooltip>
+    </>
+  )
+})
diff --git a/src/components/ActionButtonDropdown.tsx b/src/components/ActionButtonDropdown.tsx
index d8b5790b1..21ee82f91 100644
--- a/src/components/ActionButtonDropdown.tsx
+++ b/src/components/ActionButtonDropdown.tsx
@@ -1,56 +1,93 @@
 import { Popover } from '@headlessui/react'
-import { ActionButton, ActionButtonProps } from './ActionButton'
+import { ActionButtonProps } from './ActionButton'
+import { CustomIcon } from './CustomIcon'
 
-type ActionButtonSplitProps = Omit<ActionButtonProps, 'iconEnd'> & {
+type ActionButtonSplitProps = ActionButtonProps & { Element: 'button' } & {
+  name?: string
   splitMenuItems: {
+    id: string
     label: string
     shortcut?: string
     onClick: () => void
     disabled?: boolean
+    status?: 'available' | 'unavailable' | 'kcl-only'
   }[]
 }
 
 export function ActionButtonDropdown({
   splitMenuItems,
   className,
+  children,
   ...props
 }: ActionButtonSplitProps) {
+  const baseClassNames = `action-button p-0 m-0 group mono text-xs leading-none flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10`
   return (
-    <Popover className="relative">
-      <Popover.Button
-        as={ActionButton}
-        className={className}
-        {...props}
-        Element="button"
-        iconEnd={{
-          icon: 'caretDown',
-          className: 'ui-open:rotate-180',
-          bgClassName:
-            'bg-chalkboard-20 dark:bg-chalkboard-80 ui-open:bg-primary ui-open:text-chalkboard-10',
-        }}
-      />
-      <Popover.Panel
-        as="ul"
-        className="absolute z-20 left-1/2 -translate-x-1/2 top-full mt-1 w-fit max-h-[80vh] overflow-y-auto py-2 flex flex-col gap-1 align-stretch text-inherit dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-100 rounded shadow-lg border border-solid border-chalkboard-30 dark:border-chalkboard-80 text-sm m-0 p-0"
-      >
-        {splitMenuItems.map((item) => (
-          <li className="contents" key={item.label}>
-            <button
-              onClick={item.onClick}
-              className="block px-3 py-1 hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 text-sm w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
-              disabled={item.disabled}
-              data-testid={item.label}
-            >
-              <span className="capitalize">{item.label}</span>
-              {item.shortcut && (
-                <kbd className="bg-primary/10 dark:bg-chalkboard-80 dark:group-hover:bg-primary font-mono rounded-sm dark:text-inherit inline-block px-1 border-primary dark:border-chalkboard-90">
-                  {item.shortcut}
-                </kbd>
-              )}
-            </button>
-          </li>
-        ))}
-      </Popover.Panel>
+    <Popover className={`${baseClassNames} ${className}`}>
+      {({ close }) => (
+        <>
+          {children}
+          <Popover.Button className="border-transparent dark:border-transparent p-0 m-0 rounded-none !outline-none ui-open:border-primary ui-open:bg-primary">
+            <CustomIcon
+              name="caretDown"
+              className={
+                'w-3.5 h-5 text-chalkboard-70 dark:text-chalkboard-40 rounded-none ' +
+                'ui-open:rotate-180 ui-open:!text-chalkboard-10'
+              }
+            />
+            <span className="sr-only">
+              {props.name ? props.name + ': ' : ''}open menu
+            </span>
+          </Popover.Button>
+          <Popover.Panel
+            as="ul"
+            className="!pointer-events-auto absolute z-20 left-1/2 -translate-x-1/2 top-full mt-4 w-fit max-w-[280px] max-h-[80vh] overflow-y-auto py-2 flex flex-col align-stretch text-inherit dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-100 rounded shadow-lg border border-solid border-chalkboard-30 dark:border-chalkboard-80 text-sm m-0 p-0"
+          >
+            {splitMenuItems.map((item) => (
+              <li className="contents" key={item.label}>
+                <button
+                  onClick={() => {
+                    item.onClick()
+                    // Close the popover
+                    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"
+                  disabled={item.disabled}
+                  data-testid={'dropdown-' + item.id}
+                >
+                  <span className="capitalize flex-grow text-left">
+                    {item.label}
+                  </span>
+                  {item.status === 'unavailable' ? (
+                    <div className="flex flex-none items-center gap-1">
+                      <span className="text-chalkboard-70 dark:text-chalkboard-40">
+                        In development
+                      </span>
+                      <CustomIcon
+                        name="lockClosed"
+                        className="w-4 h-4 text-chalkboard-70 dark:text-chalkboard-40"
+                      />
+                    </div>
+                  ) : item.status === 'kcl-only' ? (
+                    <div className="flex flex-none items-center gap-1">
+                      <span className="text-chalkboard-70 dark:text-chalkboard-40">
+                        KCL code only
+                      </span>
+                      <CustomIcon
+                        name="code"
+                        className="w-4 h-4 text-chalkboard-70 dark:text-chalkboard-40"
+                      />
+                    </div>
+                  ) : item.shortcut ? (
+                    <kbd className="hotkey flex-none group-disabled/button:text-chalkboard-50 dark:group-disabled/button:text-chalkboard-70 group-disabled/button:border-chalkboard-20 dark:group-disabled/button:border-chalkboard-80">
+                      {item.shortcut}
+                    </kbd>
+                  ) : null}
+                </button>
+              </li>
+            ))}
+          </Popover.Panel>
+        </>
+      )}
     </Popover>
   )
 }
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
index 358317974..7543af27f 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -30,7 +30,7 @@ export const AppHeader = ({
       className={
         'w-full grid ' +
         styles.header +
-        ' overlaid-panes sticky top-0 z-20 px-2 items-center ' +
+        ' overlaid-panes sticky top-0 z-20 px-2 items-start ' +
         className
       }
     >
diff --git a/src/components/CustomIcon.tsx b/src/components/CustomIcon.tsx
index a9e0bf81f..2c9eee93b 100644
--- a/src/components/CustomIcon.tsx
+++ b/src/components/CustomIcon.tsx
@@ -6,7 +6,7 @@ const CustomIconMap = {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M10 1.5C8.60217 1.5 7.22591 1.84474 5.99313 2.50367C4.76035 3.1626 3.70911 4.1154 2.93251 5.27765C2.15592 6.43991 1.67794 7.77575 1.54093 9.16685C1.40392 10.558 1.6121 11.9614 2.14703 13.2528C2.68195 14.5442 3.52712 15.6838 4.60766 16.5706C5.6882 17.4574 6.97076 18.064 8.34173 18.3367C9.71271 18.6094 11.1298 18.5398 12.4674 18.134C13.8051 17.7282 15.022 16.9988 16.0104 16.0104C16.3068 15.714 16.5796 15.3974 16.8273 15.0634L16.0241 14.4677C15.8055 14.7624 15.5648 15.0418 15.3033 15.3033C14.4312 16.1754 13.3574 16.819 12.1771 17.1771C10.9969 17.5351 9.74651 17.5965 8.53682 17.3559C7.32714 17.1153 6.19547 16.58 5.24205 15.7976C4.28863 15.0151 3.5429 14.0096 3.07091 12.8701C2.59891 11.7306 2.41522 10.4923 2.53612 9.26487C2.65701 8.03743 3.07875 6.85874 3.76398 5.83322C4.44921 4.8077 5.37678 3.967 6.46453 3.38559C7.55227 2.80418 8.76662 2.5 10 2.5C10.3699 2.5 10.7376 2.52734 11.1005 2.58117L11.2472 1.59199C10.836 1.53099 10.4192 1.5 10 1.5ZM13.2067 3.22008C13.5383 3.37691 13.8593 3.5585 14.1668 3.76398C14.4743 3.96946 14.7649 4.19652 15.0367 4.44286L15.7083 3.70191C15.4002 3.42271 15.0709 3.16538 14.7223 2.93251C14.3738 2.69964 14.0101 2.49384 13.6342 2.31609L13.2067 3.22008ZM16.433 6.14423C16.6216 6.45886 16.7876 6.78818 16.9291 7.12987C17.0706 7.47157 17.1861 7.82181 17.2752 8.17765L18.2453 7.93467C18.1443 7.53138 18.0134 7.13444 17.853 6.74719C17.6926 6.35995 17.5044 5.98672 17.2907 5.63012L16.433 6.14423ZM17.491 10.368C17.473 10.7344 17.428 11.1004 17.3559 11.4632C17.2837 11.8259 17.1852 12.1813 17.0616 12.5267L18.0031 12.8636C18.1432 12.4721 18.2549 12.0694 18.3367 11.6583C18.4184 11.2472 18.4694 10.8323 18.4898 10.4171L17.491 10.368Z"
+        d="M10.5 5C11.3284 5 12 4.32843 12 3.5C12 2.67157 11.3284 2 10.5 2C9.82349 2 9.25159 2.44785 9.06458 3.06324C8.24048 3.17471 7.44026 3.43234 6.7024 3.82649C5.68662 4.36911 4.82039 5.15374 4.18045 6.11089C3.54051 7.06805 3.14664 8.16818 3.03373 9.31385C2.92082 10.4595 3.09238 11.6153 3.53318 12.6789C3.97399 13.7424 4.67043 14.6809 5.56079 15.4112C6.45115 16.1414 7.50795 16.6409 8.63758 16.8655C9.7672 17.0901 10.9348 17.0327 12.037 16.6986C12.6805 16.5035 13.2901 16.2176 13.8482 15.8513C14.0453 15.9466 14.2664 16 14.5 16C15.3284 16 16 15.3284 16 14.5C16 13.6716 15.3284 13 14.5 13C13.6716 13 13 13.6716 13 14.5C13 14.7212 13.0479 14.9312 13.1338 15.1202C12.7013 15.3842 12.2355 15.5935 11.7468 15.7416C10.802 16.0281 9.80098 16.0772 8.83255 15.8847C7.86413 15.6922 6.95818 15.264 6.19496 14.638C5.43174 14.012 4.83479 13.2076 4.45698 12.296C4.07917 11.3844 3.93214 10.3938 4.02891 9.41193C4.12568 8.43002 4.46326 7.4871 5.01177 6.66669C5.56028 5.84628 6.3028 5.17369 7.17358 4.70853C7.77986 4.38466 8.43528 4.16831 9.11077 4.06676C9.33434 4.61422 9.87212 5 10.5 5ZM12.571 4.57608C12.8364 4.70157 13.0934 4.84685 13.3396 5.01126C13.5858 5.17563 13.8184 5.35726 14.0359 5.55431L14.7073 4.81315C14.4534 4.58326 14.1821 4.37137 13.895 4.17964C13.6078 3.98786 13.308 3.81837 12.9983 3.67198L12.571 4.57608ZM15.1537 6.9154C15.3046 7.16714 15.4375 7.43061 15.5508 7.704C15.6641 7.97734 15.7566 8.25751 15.8279 8.54215L16.7979 8.29903C16.7147 7.96691 16.6068 7.64002 16.4746 7.32112C16.3425 7.00216 16.1874 6.69476 16.0112 6.40105L15.1537 6.9154ZM16.0006 10.2944C15.9862 10.5875 15.9502 10.8803 15.8925 11.1705C15.8347 11.4607 15.7558 11.745 15.6569 12.0213L16.5983 12.3584C16.7138 12.036 16.8058 11.7043 16.8732 11.3657C16.9406 11.0271 16.9826 10.6855 16.9994 10.3435L16.0006 10.2944Z"
         fill="currentColor"
       />
     </svg>
@@ -71,6 +71,46 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  booleanExclude: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5H5V12H8.33325V15.3333H15.3333V8.33333H12V5ZM12 8.33333H8.33325V12H12V8.33333Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  booleanIntersect: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 6H11V8H9H8V9V11H6V6ZM8 12H6H5V11V6V5H6H11H12V6V8H14H15V9V14V15H14H9H8V14V12ZM9 12V14H14V9H12V11V12H12H11H9Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  booleanSubtract: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 6H11V11H6V6ZM5 5H6H11H12V6V8H15V15H7.99998V12H6H5V11V6V5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  booleanUnion: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5H5V12H8V15H15V8H12V5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   bug: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -101,6 +141,26 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  chamfer3d: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 6V5H7H9L15 11V13V14H14V15H13H6H5V14V7V6H6ZM13 14H6V7H8.58579L13 11.4142V14Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  circle: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 4C9.21207 4 8.43186 4.15519 7.7039 4.45672C6.97595 4.75825 6.31451 5.20021 5.75736 5.75736C5.20021 6.31451 4.75825 6.97594 4.45672 7.7039C4.1552 8.43185 4 9.21207 4 10C4 10.7879 4.15519 11.5681 4.45672 12.2961C4.75825 13.0241 5.20021 13.6855 5.75736 14.2426C6.31451 14.7998 6.97594 15.2417 7.7039 15.5433C8.43185 15.8448 9.21207 16 10 16C10.7879 16 11.5681 15.8448 12.2961 15.5433C13.0241 15.2417 13.6855 14.7998 14.2426 14.2426C14.7998 13.6855 15.2417 13.0241 15.5433 12.2961C15.8448 11.5681 16 10.7879 16 10C16 9.21207 15.8448 8.43185 15.5433 7.7039C15.2417 6.97595 14.7998 6.31451 14.2426 5.75736C13.6855 5.20021 13.0241 4.75825 12.2961 4.45672C11.5681 4.15519 10.7879 4 10 4ZM7.32122 3.53284C8.1705 3.18106 9.08075 3 10 3C10.9193 3 11.8295 3.18106 12.6788 3.53284C13.5281 3.88463 14.2997 4.40024 14.9497 5.05025C15.5998 5.70026 16.1154 6.47194 16.4672 7.32122C16.8189 8.1705 17 9.08075 17 10C17 10.9193 16.8189 11.8295 16.4672 12.6788C16.1154 13.5281 15.5998 14.2997 14.9497 14.9497C14.2997 15.5998 13.5281 16.1154 12.6788 16.4672C11.8295 16.8189 10.9193 17 10 17C9.08074 17 8.17049 16.8189 7.32121 16.4672C6.47193 16.1154 5.70026 15.5998 5.05025 14.9497C4.40024 14.2997 3.88462 13.5281 3.53284 12.6788C3.18106 11.8295 3 10.9192 3 10C3 9.08074 3.18106 8.17049 3.53284 7.32121C3.88463 6.47193 4.40024 5.70026 5.05026 5.05025C5.70027 4.40024 6.47194 3.88462 7.32122 3.53284Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   clipboardCheckmark: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -182,7 +242,7 @@ const CustomIconMap = {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M10 3L10.3536 3.35355L12.3536 5.35355L11.6465 6.06066L10.5 4.91421V11.5854C11.0826 11.7913 11.5 12.3469 11.5 13C11.5 13.8284 10.8284 14.5 10 14.5C9.17157 14.5 8.5 13.8284 8.5 13C8.5 12.3469 8.91741 11.7913 9.5 11.5854V4.91421L8.35356 6.06066L7.64645 5.35355L9.64645 3.35355L10 3ZM1.95887 12.3282L8 8.63644V9.80838L2.91773 12.9142L10 17.2423L17.0823 12.9142L12 9.80838V8.63644L18.0411 12.3282L19 12.9142L19 14.9683H18V13.5253L10.5 18.1087V19.9683H9.5V18.1087L2 13.5253V14.9683H1L1 12.9142L1.95887 12.3282Z"
+        d="M10 2.51583L10.3536 2.86938L12.3536 4.86938L11.6465 5.57649L10.5 4.43004V10.1012C11.0826 10.3071 11.5 10.8627 11.5 11.5158C11.5 12.3443 10.8284 13.0158 10 13.0158C9.17157 13.0158 8.5 12.3443 8.5 11.5158C8.5 10.8627 8.9174 10.3071 9.5 10.1012V4.43004L8.35356 5.57649L7.64645 4.86938L9.64645 2.86938L10 2.51583ZM3.95886 10.8441L8.5 8.06893V9.24088L4.91773 11.43L10 14.5359L15.0823 11.43L11.5 9.24087V8.06893L16.0411 10.8441L17 11.43L17 13.4842H16V12.0412L10.5 15.4023V17.4842H9.5V15.4023L4 12.0412V13.4842H3V11.43L3.95886 10.8441Z"
         fill="currentColor"
       />
     </svg>
@@ -203,6 +263,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  fillet3d: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 6V5H7H10C12.7614 5 15 7.23858 15 10V13V14H14V15H13H6H5V14V7V6H6ZM6 7H10C11.6569 7 13 8.34315 13 10V14H6V7Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   file: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -263,6 +333,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  hole: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.44141 3.77773L5.86999 5.29277L12.7003 6.74461L13.0466 6.81819L15.0555 4.88135L15.7415 5.59773L13.6999 7.56607L13.6785 7.54375V7.95252V15.3589L15.0555 14.0313L15.7415 14.7477L13.6999 16.7161L13.6785 16.6938V16.7185L12.7003 16.5105L5.685 15.0194L4.70685 14.8115V13.8115V6.04554V5.04554L4.73466 5.05145L4.71383 5.02969L6.75542 3.06135L7.44141 3.77773ZM5.685 6.25345L12.7003 7.74461V15.5105L5.685 14.0194V6.25345ZM8.63431 8.91669C8.82484 10.2312 9.80376 11.448 11.0461 11.9188C10.8003 12.6735 10.064 13.1027 9.19383 12.9178C8.12261 12.6901 7.25421 11.6177 7.25421 10.5225C7.25421 9.62626 7.83586 8.9925 8.63431 8.91669ZM8.65548 7.88811C7.30121 7.8585 6.27606 8.85522 6.27606 10.3146C6.27606 11.9621 7.58239 13.5753 9.19383 13.9178C10.6117 14.2191 11.7933 13.4364 12.0568 12.1219C12.06 12.1058 12.0631 12.0896 12.066 12.0734C12.096 11.9083 12.1116 11.7352 12.1116 11.555C12.1116 9.90758 10.8053 8.29439 9.19383 7.95187C9.00991 7.91278 8.82997 7.89193 8.65548 7.88811Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   horizontal: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -316,7 +396,7 @@ const CustomIconMap = {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M15.5 6C16.3284 6 17 5.32843 17 4.5C17 3.67157 16.3284 3 15.5 3C14.6716 3 14 3.67157 14 4.5C14 4.73107 14.0522 4.94993 14.1456 5.14543L5.14543 14.1456C4.94993 14.0522 4.73107 14 4.5 14C3.67157 14 3 14.6716 3 15.5C3 16.3284 3.67157 17 4.5 17C5.32843 17 6 16.3284 6 15.5C6 15.2679 5.94729 15.0482 5.8532 14.852L14.852 5.8532C15.0482 5.94729 15.2679 6 15.5 6Z"
+        d="M14.75 6.375C15.5784 6.375 16.25 5.70343 16.25 4.875C16.25 4.04657 15.5784 3.375 14.75 3.375C13.9216 3.375 13.25 4.04657 13.25 4.875C13.25 5.16584 13.3328 5.43736 13.4761 5.66726L5.88512 13.7657C5.69226 13.6754 5.47702 13.625 5.25 13.625C4.42157 13.625 3.75 14.2966 3.75 15.125C3.75 15.9534 4.42157 16.625 5.25 16.625C6.07843 16.625 6.75 15.9534 6.75 15.125C6.75 14.889 6.69549 14.6657 6.59837 14.467L14.26 6.29315C14.4136 6.34619 14.5784 6.375 14.75 6.375Z"
         fill="currentColor"
       />
     </svg>
@@ -331,6 +411,36 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  lockClosed: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 5.5C8.61929 5.5 7.5 6.61929 7.5 8V9H12.5V8C12.5 6.61929 11.3807 5.5 10 5.5ZM6.5 8V9H6H5V10V15V16H6H14H15V15V10V9H14H13.5V8C13.5 6.067 11.933 4.5 10 4.5C8.067 4.5 6.5 6.067 6.5 8ZM6 10V15H14V10H6ZM10.5 11V12.1338C10.7989 12.3067 11 12.6299 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.6299 9.2011 12.3067 9.5 12.1338V11H10.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  lockOpen: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 4.5C8.61929 4.5 7.5 5.61929 7.5 7H6.5C6.5 5.067 8.067 3.5 10 3.5C11.933 3.5 13.5 5.067 13.5 7V9H14H15V10V15V16H14H6H5V15V10V9H6H12.5V7C12.5 5.61929 11.3807 4.5 10 4.5ZM6 10V15H14V10H6ZM10.5 11V12.1338C10.7989 12.3067 11 12.6299 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 12.6299 9.2011 12.3067 9.5 12.1338V11H10.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  loft: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.7954 6.22689C14.7749 5.73715 15 5.2456 15 5C15 4.7544 14.7749 4.26285 13.7954 3.77311C12.8758 3.31327 11.5353 3 10 3C8.46473 3 7.12424 3.31327 6.20457 3.77311C5.22509 4.26285 5 4.7544 5 5C5 5.2456 5.22509 5.73715 6.20457 6.22689C6.29872 6.27397 6.39728 6.3195 6.5 6.36333L6.5 7.43698C4.98593 6.89239 4 6.00376 4 5C4 3.34315 6.68629 2 10 2C13.3137 2 16 3.34315 16 5C16 6.00376 15.0141 6.89239 13.5 7.43698V6.36333C13.6027 6.3195 13.7013 6.27397 13.7954 6.22689ZM11.5 8.5531V9.72505L15.0823 11.9142L10 15.0201L4.91773 11.9142L8.5 9.72505V8.5531L3.95886 11.3282L3 11.9142V13.9683H4V12.5253L9.5 15.8864V17.9683H10.5V15.8864L16 12.5253V13.9683H17L17 11.9142L16.0411 11.3282L11.5 8.5531ZM10 4.29289L10.3536 4.64645L12.3536 6.64644L11.6465 7.35355L10.5 6.20711V10.5854C11.0826 10.7913 11.5 11.3469 11.5 12C11.5 12.8284 10.8284 13.5 10 13.5C9.17157 13.5 8.5 12.8284 8.5 12C8.5 11.3469 8.91741 10.7913 9.5 10.5854V6.20711L8.35356 7.35355L7.64645 6.64644L9.64645 4.64645L10 4.29289Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   'make-variable': (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -351,6 +461,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  mirror: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.41667 13.8333V17H10.4167V13.7738L12.5 14.5179L12.6682 14.047L12.8363 13.5761L10.4167 12.7119V7.28805L12.8363 6.42388L12.6682 5.95301L12.5 5.48214L10.4167 6.22619V3H9.41667V6.16667L4 4.23214L3 3.875V4.93686V15.0631V16.125L4 15.7679L9.41667 13.8333ZM9.41667 12.7715V7.22853L4 5.294V14.706L9.41667 12.7715ZM16.5 6.0625H17V4.93686V4.40593V3.875L16.5 4.05357L16 4.23214L14.5 4.76786L14.6682 5.23873L14.8363 5.7096L16 5.294V6.0625H16.5ZM16.5 7.8125H17V12.1875H16.5H16V7.8125H16.5ZM16.5 13.9375H17V15.0631V15.5941V16.125L16.5 15.9464L16 15.7679L14.5 15.2321L14.6682 14.7613L14.8363 14.2904L16 14.706V13.9375H16.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   move: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -401,6 +521,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  plane: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.92871 5.11391L4.43964 5.00995V4.10898V3.60898V3.10898L4.92871 3.21293L5.41778 3.31689L6.29907 3.50421V4.00421V4.50421L5.41778 4.31689V5.21786L4.92871 5.11391ZM11.8774 4.68991L8.1585 3.89945V4.39945V4.89945L11.8774 5.68991V5.18991V4.68991ZM13.7368 5.08515V5.58515V6.08515L14.6181 6.27247V7.17344L15.1071 7.2774L15.5962 7.38135V6.48038V5.98038V5.48038L15.1071 5.37643L14.6181 5.27247L13.7368 5.08515ZM15.5962 9.28233L15.1071 9.17837L14.6181 9.07441V12.8764L15.1071 12.9803L15.5962 13.0843V9.28233ZM15.5962 14.9852L15.1071 14.8813L14.6181 14.7773V15.6783L13.7368 15.491V15.991V16.491L14.6181 16.6783L15.1071 16.7823L15.5962 16.8862V16.3862V15.8862V14.9852ZM11.8774 16.0957V15.5957V15.0957L8.1585 14.3053V14.8053V15.3053L11.8774 16.0957ZM6.29907 14.91V14.41V13.91L5.41778 13.7227V12.8217L4.92871 12.7178L4.43964 12.6138V13.5148V14.0148V14.5148L4.92871 14.6188L5.41778 14.7227L6.29907 14.91ZM4.43964 10.7129L4.92871 10.8168L5.41778 10.9208V7.11883L4.92871 7.01488L4.43964 6.91092V10.7129Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   plus: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -411,6 +541,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  polygon: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.99291 4.23607L4.03556 8.56434L6.31106 15.5676H13.6748L15.9503 8.56434L9.99291 4.23607ZM17.1258 8.18237L9.99291 3L2.85999 8.18237L5.58452 16.5676H14.4013L17.1258 8.18237Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   questionMark: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -439,6 +579,22 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  revolve: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.89927 4.693C7.36143 4.41381 7.87 4.21672 8.40842 4.10376C7.83595 4.69964 7.47 5.50199 7.47 6.31393C7.47 7.34818 8.06376 8.11443 8.9218 8.3459C8.85859 8.44278 8.80068 8.54347 8.74845 8.64757C8.69108 8.76191 8.6411 8.87927 8.59864 8.99896L9.87934 8.72674C10.0433 8.52252 10.2451 8.35006 10.4752 8.21957L10.4736 8.21676C11.6445 7.74118 12.53 6.5014 12.53 5.2384C12.53 4.20393 11.936 3.43756 11.0776 3.20628L11.0781 3.19471C9.34471 2.75461 7.64421 2.9631 6.28878 3.78191C4.93335 4.60073 4.01395 5.97492 3.69937 7.6522C3.55495 8.4222 3.54245 9.23235 3.65633 10.0495L3.88904 10L4.59283 9.85042C4.53004 9.23247 4.55179 8.62188 4.6613 8.038C4.93318 6.58836 5.7278 5.40068 6.89927 4.693ZM7.47005 15.1799C6.65634 14.4835 5.96657 13.6244 5.46142 12.6658L4.54925 12.8597L4.57626 12.9127C5.40057 14.5194 6.672 15.8914 8.18092 16.8103C8.28057 16.8945 8.38913 16.9684 8.50564 17.0308L9.08339 16.1011C8.87304 15.9884 8.70487 15.8151 8.5944 15.5972C8.48392 15.3793 8.43471 15.1238 8.45129 14.8543C8.46788 14.5848 8.54973 14.31 8.68929 14.0552C8.82885 13.8005 9.02162 13.574 9.24981 13.3967C9.47801 13.2193 9.73427 13.0969 9.99495 13.0406C10.2556 12.9843 10.5123 12.996 10.7413 13.0747C10.9608 13.15 11.1481 13.2845 11.2874 13.4665C11.7756 13.525 12.1412 13.4705 12.4217 13.3627C12.354 13.1483 12.2554 12.9503 12.128 12.7748C11.8981 12.4582 11.5819 12.225 11.2086 12.0968C11.1027 12.0605 10.9931 12.0329 10.8808 12.0141C10.6353 11.9374 10.407 11.816 10.2071 11.6571L9.0562 11.9017C9.09421 11.9513 9.13379 11.9999 9.17491 12.0473C9.2375 12.1194 9.30323 12.1884 9.37183 12.254C9.16516 12.3521 8.9652 12.4755 8.77697 12.6218C8.40494 12.9109 8.09066 13.2801 7.86313 13.6955C7.6356 14.1108 7.50216 14.5588 7.47513 14.9982C7.47137 15.0592 7.46969 15.1198 7.47005 15.1799ZM9.99038 7.3647L10 7.36268C10.8571 7.18051 11.5518 6.32252 11.5518 5.44631C11.5518 4.5701 10.8571 4.00748 10 4.18965C9.14293 4.37183 8.44815 5.22981 8.44815 6.10602C8.44815 6.9614 9.11029 7.51793 9.93915 7.37442C9.95332 7.36608 9.96757 7.35785 9.98189 7.34973L9.99038 7.3647ZM16.6 8.29822L16.1109 8.40218L14.074 8.83515V9.83515L16.1109 9.40218L16.6 9.29822V8.29822ZM7.96305 11.1341L12.037 10.2681V9.26813L7.96305 10.1341V11.1341ZM3.8891 12L5.92607 11.567V10.567L3.8891 11L3.40002 11.104V12.104L3.8891 12ZM15.4172 11.1225L15.9703 10.8085L16.0604 11.4381L16.4532 14.1827L15.5948 14.3056L15.5027 13.662L15.5423 12.9555L15.3598 13.5867C15.1404 13.9788 14.8672 14.3472 14.529 14.662C13.8137 15.3278 12.8466 15.7187 11.5898 15.635C11.3638 16.0194 10.9459 16.2774 10.4678 16.2774C9.74943 16.2774 9.16711 15.6951 9.16711 14.9767C9.16711 14.2584 9.74943 13.6761 10.4678 13.6761C11.1178 13.6761 11.6565 14.153 11.753 14.776C12.7384 14.8173 13.4355 14.4952 13.9382 14.0273C14.4048 13.5929 14.7326 13.0058 14.9513 12.384L13.4607 13.2302L13.0326 12.4761L15.4172 11.1225Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   search: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -459,6 +615,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  shell: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.24585 3.87359L5.67443 5.38863L12.5048 6.84046L12.851 6.91405L14.8599 4.97721L15.5459 5.69359L13.5043 7.66193L13.4829 7.63961V8.04838V15.4548L14.8599 14.1272L15.5459 14.8436L13.5043 16.8119L13.4829 16.7896V16.8143L12.5048 16.6064L5.48944 15.1152L4.51129 14.9073V13.9073V6.14139V5.14139L4.5391 5.14731L4.51827 5.12555L6.55986 3.15721L7.24585 3.87359ZM5.48944 6.34931L12.5048 7.84046V15.6064L5.48944 14.1152V6.34931ZM10.5978 13.3098V11.2576L9.62543 11.0509L7.8814 12.7324L10.5978 13.3098ZM7.19195 12.0176V8.74893L9.13482 9.1619V10.1445L7.19195 12.0176ZM11.576 13.5177V11.4655L11.5761 11.4656V8.6808L11.576 8.68078L10.5978 8.47287L9.13482 8.16189L7.19195 7.74893L6.21381 7.54101L6.2138 7.54102V8.54102V12.3779V13.3779L7.19195 13.5859L10.5978 14.3098L11.576 14.5177L11.576 14.5177V13.5177Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   sketch: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -469,6 +635,32 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  spline: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.0052 6.91281C15.5851 6.70544 16 6.15118 16 5.5C16 4.67157 15.3284 4 14.5 4C13.6716 4 13 4.67157 13 5.5C13 6.15503 13.4199 6.712 14.0051 6.91646C14.0058 7.31235 13.9653 7.7498 13.8414 8.1571C13.6773 8.69654 13.3777 9.1532 12.854 9.42296C12.3204 9.69782 11.4691 9.82282 10.1135 9.5099C8.62632 9.16662 7.50955 9.26015 6.69015 9.68223C5.86086 10.1094 5.42244 10.8281 5.20399 11.546C5.04308 12.0748 4.99567 12.6189 4.99693 13.0864C4.41594 13.2932 4 13.848 4 14.5C4 15.3284 4.67157 16 5.5 16C6.32843 16 7 15.3284 7 14.5C7 13.8458 6.58114 13.2893 5.99696 13.0843C5.99585 12.6867 6.03606 12.2466 6.16068 11.8371C6.32483 11.2976 6.62436 10.841 7.14807 10.5712C7.68167 10.2964 8.53295 10.1714 9.88859 10.4843C11.3758 10.8276 12.4925 10.734 13.3119 10.312C14.1412 9.88478 14.5796 9.16611 14.7981 8.44821C14.9584 7.92128 15.0061 7.3792 15.0052 6.91281Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  sweep: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.4743 3.19282L15.7063 2.49694L14.9738 2.53539L11.7806 2.703L11.833 3.70162L12.2189 3.68137L13.0309 3.47351L12.4065 3.79549C11.5985 4.23813 10.7423 4.7732 10.0381 5.41523C9.28624 6.1008 8.66584 6.94665 8.50598 7.97341C8.36948 8.8502 8.57961 9.78564 9.20597 10.7756C9.07507 10.9983 9 11.2577 9 11.5347C9 12.3631 9.67157 13.0347 10.5 13.0347C11.3284 13.0347 12 12.3631 12 11.5347C12 10.7063 11.3284 10.0347 10.5 10.0347C10.3174 10.0347 10.1425 10.0673 9.98067 10.127C9.51409 9.34655 9.40701 8.68651 9.49408 8.12725C9.60506 7.41442 10.0472 6.76028 10.7119 6.15418C11.3749 5.54964 12.218 5.03092 13.0491 4.58458C13.4267 4.38176 13.797 4.19644 14.1426 4.02567L13.5257 5.87659L14.4743 6.19282L15.4743 3.19282ZM10.4854 8.10284C10.4627 8.2645 10.4579 8.44276 10.4848 8.63934L15.0823 11.4489L10 14.5548L4.91773 11.4489L7.66526 9.76987C7.56422 9.41819 7.50187 9.06536 7.47765 8.71258L3.95886 10.8629L3 11.4489V13.5031H4V12.06L9.5 15.4211V17.5031H10.5V15.4211L16 12.06V13.5031H17L17 11.4489L16.0411 10.8629L10.6351 7.55929C10.5598 7.74567 10.5101 7.92698 10.4854 8.10284Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   tangent: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -479,6 +671,14 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  text: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.3107 14.9933L11.5524 12.3321H8.37616L7.61786 14.9933H5.98682L8.90553 5.00671H11.0946L14.0133 14.9933H12.3107ZM10.0215 6.62345H9.90705L8.67661 11.0015H11.2519L10.0215 6.62345Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   'three-dots': (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
index 0749580a7..c058b4379 100644
--- a/src/components/HelpMenu.tsx
+++ b/src/components/HelpMenu.tsx
@@ -23,7 +23,8 @@ export function HelpMenu(props: React.PropsWithChildren) {
           name="questionMark"
           className="w-7 h-7 rounded-full bg-chalkboard-110 dark:bg-chalkboard-80 text-chalkboard-10"
         />
-        <Tooltip position="top-right" className="ui-open:hidden">
+        <span className="sr-only">Help and resources</span>
+        <Tooltip position="top-right" wrapperClassName="ui-open:hidden">
           Help and resources
         </Tooltip>
       </Popover.Button>
diff --git a/src/components/LowerRightControls.tsx b/src/components/LowerRightControls.tsx
index 1c503e9e4..674553327 100644
--- a/src/components/LowerRightControls.tsx
+++ b/src/components/LowerRightControls.tsx
@@ -80,7 +80,9 @@ export function LowerRightControls({
             name="bug"
             className={`w-5 h-5 ${linkOverrideClassName}`}
           />
-          <Tooltip position="top">Report a bug</Tooltip>
+          <Tooltip position="top" contentClassName="text-xs">
+            Report a bug
+          </Tooltip>
         </a>
         <Link
           to={
@@ -93,7 +95,10 @@ export function LowerRightControls({
             name="settings"
             className={`w-5 h-5 ${linkOverrideClassName}`}
           />
-          <Tooltip position="top">Settings</Tooltip>
+          <span className="sr-only">Settings</span>
+          <Tooltip position="top" contentClassName="text-xs">
+            Settings
+          </Tooltip>
         </Link>
         <NetworkHealthIndicator />
         <HelpMenu />
diff --git a/src/components/ModelingSidebar/ModelingSidebar.tsx b/src/components/ModelingSidebar/ModelingSidebar.tsx
index 4b75ac323..c24c5bdac 100644
--- a/src/components/ModelingSidebar/ModelingSidebar.tsx
+++ b/src/components/ModelingSidebar/ModelingSidebar.tsx
@@ -203,7 +203,8 @@ function ModelingPaneButton({
     <button
       className="pointer-events-auto flex items-center justify-center border-transparent dark:border-transparent p-0 m-0 rounded-sm !outline-0 focus-visible:border-primary"
       onClick={onClick}
-      data-testid={paneConfig.title}
+      name={paneConfig.title}
+      data-testid={paneConfig.id + '-pane-button'}
       {...props}
     >
       <ActionIcon
@@ -219,14 +220,12 @@ function ModelingPaneButton({
           'rounded-sm ' + (paneIsOpen ? '!bg-primary' : '!bg-transparent')
         }
       />
-      <Tooltip
-        position="right"
-        className="!max-w-none flex gap-4 items-center justify-between"
-        hoverOnly
-        delay={800}
-      >
-        <span className="flex-none">{paneConfig.title}</span>
-        <kbd className="hotkey">{paneConfig.keybinding}</kbd>
+      <span className="sr-only">{paneConfig.title} pane</span>
+      <Tooltip position="right" hoverOnly>
+        <span className="flex-1">{paneConfig.title} pane: </span>
+        <span className="hotkey text-xs capitalize">
+          {paneConfig.keybinding}
+        </span>
       </Tooltip>
     </button>
   )
diff --git a/src/components/NetworkHealthIndicator.tsx b/src/components/NetworkHealthIndicator.tsx
index 95663f44e..2a5af365f 100644
--- a/src/components/NetworkHealthIndicator.tsx
+++ b/src/components/NetworkHealthIndicator.tsx
@@ -95,7 +95,6 @@ export const NetworkHealthIndicator = () => {
         }
         data-testid="network-toggle"
       >
-        <span className="sr-only">Network Health</span>
         <ActionIcon
           icon={overallConnectionStateIcon[overallState]}
           className="p-1"
@@ -104,7 +103,7 @@ export const NetworkHealthIndicator = () => {
             'rounded-sm ' + overallConnectionStateColor[overallState].bg
           }
         />
-        <Tooltip position="top-right" className="ui-open:hidden">
+        <Tooltip position="top-right">
           Network Health ({NETWORK_HEALTH_TEXT[overallState]})
         </Tooltip>
       </Popover.Button>
diff --git a/src/components/ProjectSidebarMenu.tsx b/src/components/ProjectSidebarMenu.tsx
index 676c41847..5b992b011 100644
--- a/src/components/ProjectSidebarMenu.tsx
+++ b/src/components/ProjectSidebarMenu.tsx
@@ -127,7 +127,10 @@ function ProjectMenuPopover({
             <>
               <span>Export current part</span>
               {!findCommand(exportCommandInfo) && (
-                <Tooltip position="right" className="!max-w-none min-w-fit">
+                <Tooltip
+                  position="right"
+                  wrapperClassName="!max-w-none min-w-fit"
+                >
                   Awaiting engine connection
                 </Tooltip>
               )}
diff --git a/src/components/Tooltip.module.css b/src/components/Tooltip.module.css
index accd6cb44..a1fd8dcaf 100644
--- a/src/components/Tooltip.module.css
+++ b/src/components/Tooltip.module.css
@@ -1,16 +1,11 @@
 /* Adapted from https://github.com/argyleink/gui-challenges/blob/main/tooltips/tool-tip.css */
 
-.tooltip {
+.tooltipWrapper {
   /* Used to power spacing and layout for RTL languages */
   --isRTL: -1;
 
   /* internal CSS vars */
   --_delay: 200ms;
-  --_triangle-width: 8px;
-  --_triangle-height: 12px;
-  --_p-inline-arrow-alignment: calc(
-    50% + calc(var(--isRTL) * var(--_triangle-width) / 2)
-  );
   --_p-block: 4px;
   --_bg: var(--chalkboard-10);
   --_shadow-alpha: 8%;
@@ -18,26 +13,21 @@
 
   pointer-events: none;
   user-select: none;
+  visibility: hidden;
+  position: absolute;
+  z-index: 1;
 
   /* The parts that will be transitioned */
   opacity: 0;
   transform: translate(var(--_x, 0), var(--_y, 0));
   transition: transform 0.15s ease-out, opacity 0.11s ease-out;
+}
 
-  position: absolute;
-  z-index: 1;
+.tooltip {
+  @apply relative;
   inline-size: max-content;
-  max-inline-size: 25ch;
-  text-align: start;
-  font-family: var(--mono-font-family);
-  text-transform: none;
-  font-size: 0.9rem;
-  font-weight: normal;
-  line-height: initial;
-  letter-spacing: 0;
   padding: var(--_p-block) calc(2 * var(--_p-block));
   margin: 0;
-  border-radius: 3px;
   background: var(--_bg);
   @apply text-chalkboard-110;
   will-change: filter;
@@ -57,26 +47,28 @@
 }
 
 /* :has and :is are pretty fresh CSS pseudo-selectors, may not see full support */
-:has(> .tooltip) {
+:has(> .tooltipWrapper) {
   position: relative;
 }
 
-:is(:hover, :active) > .tooltip {
+:is(:hover, :active) > .tooltipWrapper {
+  visibility: visible;
   opacity: 1;
   transition-delay: var(--_delay);
 }
 
-:is(:focus-visible) > .tooltip.withFocus {
+:is(:focus-visible) > .tooltipWrapper.withFocus {
+  visibility: visible;
   opacity: 1;
 }
 
-.tooltip:focus-visible {
+*:focus-visible .tooltipWrapper {
   --_delay: 0 !important;
 }
 
 /* prepend some prose for screen readers only */
-.tooltip::before {
-  content: '; Has tooltip: ';
+.tooltip::before,
+.tooltip::after {
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
@@ -87,20 +79,19 @@
   position: absolute;
 }
 
+.tooltip::before {
+  content: '; Has tooltip: ';
+}
+
 /* Sometimes there's no visible label,
  * so we'll use the tooltip as the label
 */
 .tooltip:only-child::before {
-  content: 'Tooltip:';
+  content: '';
 }
 
-.caret {
-  width: 8px;
-  height: var(--_triangle-height);
-  position: absolute;
-  z-index: -1;
-  transform-origin: center center;
-  color: var(--_bg);
+.tooltip:only-child::after {
+  content: ' (tooltip)';
 }
 
 .top,
@@ -108,129 +99,80 @@
   text-align: center;
 }
 
-.tooltip.top {
+.tooltipWrapper.top {
   inset-inline-start: 50%;
-  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
+  inset-block-end: 100%;
   --_x: calc(50% * var(--isRTL));
 }
 
-.top .caret {
-  inset-block-start: calc(100% - 1px);
-  inset-inline-start: 50%;
-  transform: translateX(-50%);
-}
-
-.tooltip.top-right {
-  inset-inline-end: var(--_p-inline-arrow-alignment);
-  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
-}
-
-/* The corner caret SVG is bottom-right oriented by default */
-.top-right .caret {
-  inset-block-start: calc(100% - 1px);
+.tooltipWrapper.top-right {
+  inset-block-end: 100%;
   inset-inline-end: 0;
 }
 
-.tooltip.right {
-  inset-inline-start: calc(100% + var(--_triangle-height));
+.tooltipWrapper.right {
+  inset-inline-start: 100%;
   inset-block-end: 50%;
   --_y: 50%;
 }
 
-.right .caret {
-  inset-inline-end: calc(100% - 1px);
-  inset-block-start: 50%;
-  transform: translateY(-50%) rotate(90deg);
-}
-
-.tooltip.bottom-right {
-  inset-inline-end: var(--_p-inline-arrow-alignment);
-  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
-}
-
-.bottom-right .caret {
-  inset-block-end: calc(100% - 1px);
+.tooltipWrapper.bottom-right {
+  inset-block-start: 100%;
   inset-inline-end: 0;
-  transform: rotate(180deg) scaleX(-1);
 }
 
-.tooltip.bottom {
+.tooltipWrapper.bottom {
   --_x: calc(50% * var(--isRTL));
   inset-inline-start: 50%;
-  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
+  inset-block-start: 100%;
 }
 
-.bottom .caret {
-  inset-block-end: calc(100% - 1px);
-  inset-inline-start: 50%;
-  transform: translateX(-50%) scaleY(-1);
+.tooltipWrapper.bottom-left {
+  inset-block-start: 100%;
 }
 
-.tooltip.bottom-left {
-  inset-inline-start: var(--_p-inline-arrow-alignment);
-  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
-}
-
-.bottom-left .caret {
-  inset-block-end: calc(100% - 1px);
-  inset-inline-start: 0;
-  transform: rotate(180deg);
-}
-
-.tooltip.left {
-  inset-inline-end: calc(
-    100% + var(--_p-inline-arrow-alignment) + var(--_triangle-height)
-  );
+.tooltipWrapper.left {
+  inset-inline-end: 100%;
   inset-block-end: 50%;
   --_y: 50%;
 }
 
-.left .caret {
-  inset-inline-start: calc(100% - 1px);
-  inset-block-start: 50%;
-  transform: translateY(-50%) rotate(-90deg);
-}
-
-.tooltip.top-left {
-  inset-inline-start: var(--_p-inline-arrow-alignment);
-  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
-}
-
-.top-left .caret {
-  inset-block-start: calc(100% - 1px);
-  inset-inline-start: 0;
-  transform: rotate(-90deg);
+.tooltipWrapper.top-left {
+  inset-block-end: 100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
   /* TOP || BLOCK-START */
-  :has(> :is(.tooltip.top, .tooltip.top-left, .tooltip.top-right)):not(
-      :hover,
-      :active
-    )
-    .tooltip {
+  :has(
+      > :is(
+          .tooltipWrapper.top,
+          .tooltipWrapper.top-left,
+          .tooltipWrapper.top-right
+        )
+    ):not(:hover, :active)
+    .tooltipWrapper {
     --_y: 3px;
   }
 
   /* RIGHT || INLINE-END */
-  :has(> :is(.tooltip.right)):not(:hover, :active) .tooltip {
+  :has(> :is(.tooltipWrapper.right)):not(:hover, :active) .tooltipWrapper {
     --_x: calc(var(--isRTL) * -3px * -1);
   }
 
   /* BOTTOM || BLOCK-END */
   :has(
       > :is(
-          .tooltip.bottom,
-          .tooltip.tooltip.bottom-left,
-          .tooltip.bottom-right
+          .tooltipWrapper.bottom,
+          .tooltipWrapper.bottom-left,
+          .tooltipWrapper.bottom-right
         )
     ):not(:hover, :active)
-    .tooltip {
+    .tooltipWrapper {
     --_y: -3px;
   }
 
   /* BOTTOM || BLOCK-END */
-  :has(> :is(.tooltip.left)):not(:hover, :active) .tooltip {
+  :has(> :is(.tooltipWrapper.left)):not(:hover, :active) .tooltipWrapper {
     --_x: calc(var(--isRTL) * 3px * -1);
   }
 }
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index a0189f7f4..58c4d3f3b 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -3,7 +3,6 @@
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from './Tooltip.module.css'
 
-const SIDES = ['top', 'bottom', 'left', 'right'] as const
 type TopOrBottom = 'top' | 'bottom'
 type LeftOrRight = 'left' | 'right'
 type Corner = `${TopOrBottom}-${LeftOrRight}`
@@ -11,53 +10,36 @@ type TooltipPosition = TopOrBottom | LeftOrRight | Corner
 
 interface TooltipProps extends React.PropsWithChildren {
   position?: TooltipPosition
-  className?: string
+  wrapperClassName?: string
+  contentClassName?: string
   delay?: number
   hoverOnly?: boolean
+  inert?: boolean
 }
 
 export default function Tooltip({
   children,
   position = 'top',
-  className,
+  wrapperClassName: className,
+  contentClassName,
   delay = 200,
   hoverOnly = false,
+  inert = true,
 }: TooltipProps) {
   return (
     <div
       // @ts-ignore while awaiting merge of this PR for support of "inert" https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
-      inert="true"
+      inert={inert}
       role="tooltip"
-      className={`${styles.tooltip} ${hoverOnly ? '' : styles.withFocus} ${
+      className={`p-3 ${
+        position !== 'left' && position !== 'right' ? 'px-0' : ''
+      } ${styles.tooltipWrapper} ${hoverOnly ? '' : styles.withFocus} ${
         styles[position]
       } ${className}`}
       style={{ '--_delay': delay + 'ms' } as React.CSSProperties}
     >
-      {children}
-      <div className={styles.caret}>
-        {SIDES.includes(position as any) ? (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 8 12"
-          >
-            <path
-              fill="currentColor"
-              d="M3.0513 9.154c.304.9116 1.5935.9116 1.8974 0L8 0H0l3.0513 9.154Z"
-            />
-          </svg>
-        ) : (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 8 10"
-          >
-            <path
-              fill="currentColor"
-              d="m0 0 6.168 9.252C6.7168 10.0751 8 9.6865 8 8.6971V0H0Z"
-            />
-          </svg>
-        )}
+      <div className={`rounded ${styles.tooltip} ${contentClassName || ''}`}>
+        {children}
       </div>
     </div>
   )
diff --git a/src/lib/toolbar.ts b/src/lib/toolbar.ts
new file mode 100644
index 000000000..ca1b6c202
--- /dev/null
+++ b/src/lib/toolbar.ts
@@ -0,0 +1,714 @@
+import { CustomIconName } from 'components/CustomIcon'
+import { DEV } from 'env'
+import { commandBarMachine } from 'machines/commandBarMachine'
+import {
+  canRectangleTool,
+  isEditingExistingSketch,
+  modelingMachine,
+} from 'machines/modelingMachine'
+import { EventFrom, StateFrom } from 'xstate'
+
+export type ToolbarModeName = 'modeling' | 'sketching'
+
+type ToolbarMode = {
+  check: (state: StateFrom<typeof modelingMachine>) => boolean
+  items: (ToolbarItem | ToolbarItem[] | 'break')[]
+}
+
+export interface ToolbarItemCallbackProps {
+  modelingStateMatches: StateFrom<typeof modelingMachine>['matches']
+  modelingSend: (event: EventFrom<typeof modelingMachine>) => void
+  commandBarSend: (event: EventFrom<typeof commandBarMachine>) => void
+  sketchPathId: string | false
+}
+
+export type ToolbarItem = {
+  id: string
+  onClick: (props: ToolbarItemCallbackProps) => void
+  icon?: CustomIconName
+  status: 'available' | 'unavailable' | 'kcl-only'
+  disabled?: (state: StateFrom<typeof modelingMachine>) => boolean
+  disableHotkey?: (state: StateFrom<typeof modelingMachine>) => boolean
+  title: string | ((props: ToolbarItemCallbackProps) => string)
+  showTitle?: boolean
+  hotkey?:
+    | string
+    | ((state: StateFrom<typeof modelingMachine>) => string | string[])
+  description: string
+  links: { label: string; url: string }[]
+  isActive?: (state: StateFrom<typeof modelingMachine>) => boolean
+}
+
+export type ToolbarItemResolved = Omit<
+  ToolbarItem,
+  'disabled' | 'disableHotkey' | 'hotkey' | 'isActive' | 'title'
+> & {
+  title: string
+  disabled?: boolean
+  disableHotkey?: boolean
+  hotkey?: string | string[]
+  isActive?: boolean
+}
+
+export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
+  modeling: {
+    check: (state) =>
+      !(state.matches('Sketch') || state.matches('Sketch no face')),
+    items: [
+      {
+        id: 'sketch',
+        onClick: ({ modelingSend, sketchPathId }) =>
+          !sketchPathId
+            ? modelingSend({
+                type: 'Enter sketch',
+                data: { forceNewSketch: true },
+              })
+            : modelingSend({ type: 'Enter sketch' }),
+        icon: 'sketch',
+        status: 'available',
+        disabled: (state) => !state.matches('idle'),
+        title: ({ sketchPathId }) =>
+          `${sketchPathId ? 'Edit' : 'Start'} Sketch`,
+        showTitle: true,
+        hotkey: 'S',
+        description: 'Start drawing a 2D sketch',
+        links: [
+          { label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/startSketchOn' },
+        ],
+      },
+      'break',
+      {
+        id: 'extrude',
+        onClick: ({ commandBarSend }) =>
+          commandBarSend({
+            type: 'Find and select command',
+            data: { name: 'Extrude', groupId: 'modeling' },
+          }),
+        disabled: (state) => !state.can('Extrude'),
+        icon: 'extrude',
+        status: 'available',
+        title: 'Extrude',
+        hotkey: 'E',
+        description: 'Pull a sketch into 3D along its normal or perpendicular.',
+        links: [{ label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/extrude' }],
+      },
+      {
+        id: 'revolve',
+        onClick: () => console.error('Revolve not yet implemented'),
+        icon: 'revolve',
+        status: 'kcl-only',
+        title: 'Revolve',
+        hotkey: 'R',
+        description:
+          'Create a 3D body by rotating a sketch region about an axis.',
+        links: [
+          { label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/revolve' },
+          {
+            label: 'KCL example',
+            url: 'https://zoo.dev/docs/kcl-samples/ball-bearing',
+          },
+        ],
+      },
+      {
+        id: 'sweep',
+        onClick: () => console.error('Sweep not yet implemented'),
+        icon: 'sweep',
+        status: 'unavailable',
+        title: 'Sweep',
+        hotkey: 'W',
+        description:
+          'Create a 3D body by moving a sketch region along an arbitrary path.',
+        links: [
+          {
+            label: 'GitHub discussion',
+            url: 'https://github.com/KittyCAD/modeling-app/discussions/498',
+          },
+        ],
+      },
+      {
+        id: 'loft',
+        onClick: () => console.error('Loft not yet implemented'),
+        icon: 'loft',
+        status: 'unavailable',
+        title: 'Loft',
+        hotkey: 'L',
+        description:
+          'Create a 3D body by blending between two or more sketches.',
+        links: [
+          {
+            label: 'GitHub discussion',
+            url: 'https://github.com/KittyCAD/modeling-app/discussions/613',
+          },
+        ],
+      },
+      'break',
+      {
+        id: 'fillet3d',
+        onClick: ({ commandBarSend }) =>
+          commandBarSend({
+            type: 'Find and select command',
+            data: { name: 'Fillet', groupId: 'modeling' },
+          }),
+        icon: 'fillet3d',
+        status: DEV ? 'available' : 'kcl-only',
+        disabled: (state) => !state.can('Fillet'),
+        title: 'Fillet',
+        hotkey: 'F',
+        description: 'Round the edges of a 3D solid.',
+        links: [{ label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/fillet' }],
+      },
+      {
+        id: 'chamfer',
+        onClick: () => console.error('Chamfer not yet implemented'),
+        icon: 'chamfer3d',
+        status: 'kcl-only',
+        title: 'Chamfer',
+        hotkey: 'C',
+        description: 'Bevel the edges of a 3D solid.',
+        links: [{ label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/chamfer' }],
+      },
+      {
+        id: 'shell',
+        onClick: () => console.error('Shell not yet implemented'),
+        icon: 'shell',
+        status: 'kcl-only',
+        title: 'Shell',
+        description: 'Hollow out a 3D solid.',
+        links: [{ label: 'KCL docs', url: 'https://zoo.dev/docs/kcl/shell' }],
+      },
+      {
+        id: 'hole',
+        onClick: () => console.error('Hole not yet implemented'),
+        icon: 'hole',
+        status: 'unavailable',
+        title: 'Hole',
+        description: 'Create a hole in a 3D solid.',
+        links: [],
+      },
+      'break',
+      [
+        {
+          id: 'boolean-union',
+          onClick: () => console.error('Boolean union not yet implemented'),
+          icon: 'booleanUnion',
+          status: '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: () => console.error('Boolean subtract not yet implemented'),
+          icon: 'booleanSubtract',
+          status: '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: () => console.error('Boolean intersect not yet implemented'),
+          icon: 'booleanIntersect',
+          status: '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',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          id: 'plane-offset',
+          onClick: () =>
+            console.error('Plane through normal not yet implemented'),
+          icon: 'plane',
+          status: 'unavailable',
+          title: 'Offset plane',
+          description: 'Create a plane parallel to an existing plane.',
+          links: [],
+        },
+        {
+          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: [],
+        },
+      ],
+    ],
+  },
+  sketching: {
+    check: (state) =>
+      state.matches('Sketch') || state.matches('Sketch no face'),
+    items: [
+      {
+        id: 'sketch-exit',
+        onClick: ({ modelingSend }) =>
+          modelingSend({
+            type: 'Cancel',
+          }),
+        disableHotkey: (state) =>
+          !(
+            state.matches('Sketch.SketchIdle') ||
+            state.matches('Sketch no face')
+          ),
+        icon: 'arrowLeft',
+        status: 'available',
+        title: 'Exit sketch',
+        showTitle: true,
+        hotkey: 'Esc',
+        description: 'Exit the current sketch',
+        links: [],
+      },
+      'break',
+      {
+        id: 'line',
+        onClick: ({ modelingStateMatches: matches, modelingSend }) =>
+          modelingSend({
+            type: 'change tool',
+            data: {
+              tool: !matches('Sketch.Line tool') ? 'line' : 'none',
+            },
+          }),
+        icon: 'line',
+        status: 'available',
+        disabled: (state) =>
+          state.matches('Sketch no face') ||
+          state.matches('Sketch.Rectangle tool.Awaiting second corner'),
+        title: 'Line',
+        hotkey: (state) =>
+          state.matches('Sketch.Line tool') ? ['Esc', 'L'] : 'L',
+        description: 'Start drawing straight lines',
+        links: [],
+        isActive: (state) => state.matches('Sketch.Line tool'),
+      },
+      [
+        {
+          id: 'tangential-arc',
+          onClick: ({ modelingStateMatches, modelingSend }) =>
+            modelingSend({
+              type: 'change tool',
+              data: {
+                tool: !modelingStateMatches('Sketch.Tangential arc to')
+                  ? 'tangentialArc'
+                  : 'none',
+              },
+            }),
+          icon: 'arc',
+          status: 'available',
+          disabled: (state) =>
+            !isEditingExistingSketch(state.context) &&
+            !state.matches('Sketch.Tangential arc to'),
+          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: () => console.error('Three-point arc not yet implemented'),
+          icon: 'arc',
+          status: 'unavailable',
+          title: 'Three-point Arc',
+          showTitle: false,
+          description: 'Draw a circular arc defined by three points',
+          links: [
+            {
+              label: 'GitHub issue',
+              url: 'https://github.com/KittyCAD/modeling-app/issues/1659',
+            },
+          ],
+        },
+      ],
+      {
+        id: 'spline',
+        onClick: () => console.error('Spline not yet implemented'),
+        icon: 'spline',
+        status: 'unavailable',
+        title: 'Spline',
+        showTitle: false,
+        description: 'Draw a spline curve through a series of points',
+        links: [],
+      },
+      'break',
+      [
+        {
+          id: 'circle-center',
+          onClick: () => console.error('Center circle not yet implemented'),
+          icon: 'circle',
+          status: 'unavailable',
+          title: 'Center circle',
+          showTitle: false,
+          description: 'Start drawing a circle from its center',
+          links: [
+            {
+              label: 'GitHub issue',
+              url: 'https://github.com/KittyCAD/modeling-app/issues/1501',
+            },
+          ],
+        },
+        {
+          id: 'circle-three-points',
+          onClick: () =>
+            console.error('Three-point circle not yet implemented'),
+          icon: 'circle',
+          status: 'unavailable',
+          disabled: () => true,
+          title: 'Three-point circle',
+          showTitle: false,
+          description: 'Draw a circle defined by three points',
+          links: [],
+        },
+      ],
+      [
+        {
+          id: 'corner-rectangle',
+          onClick: ({ modelingStateMatches, modelingSend }) =>
+            modelingSend({
+              type: 'change tool',
+              data: {
+                tool: !modelingStateMatches('Sketch.Rectangle tool')
+                  ? 'rectangle'
+                  : 'none',
+              },
+            }),
+          icon: 'rectangle',
+          status: 'available',
+          disabled: (state) =>
+            !canRectangleTool(state.context) &&
+            !state.matches('Sketch.Rectangle tool'),
+          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: () => console.error('Center rectangle not yet implemented'),
+          icon: 'rectangle',
+          status: 'unavailable',
+          title: 'Center rectangle',
+          showTitle: false,
+          description: 'Start drawing a rectangle from its center',
+          links: [],
+        },
+      ],
+      {
+        id: 'polygon',
+        onClick: () => console.error('Polygon not yet implemented'),
+        icon: 'polygon',
+        status: 'unavailable',
+        title: 'Polygon',
+        showTitle: false,
+        description: 'Draw a polygon with a specified number of sides',
+        links: [],
+      },
+      {
+        id: 'text',
+        onClick: () => console.error('Text not yet implemented'),
+        icon: 'text',
+        status: 'unavailable',
+        title: 'Text',
+        showTitle: false,
+        description: 'Add text to your sketch as geometry.',
+        links: [],
+      },
+      'break',
+      {
+        id: 'mirror',
+        onClick: () => console.error('Mirror not yet implemented'),
+        icon: 'mirror',
+        status: 'unavailable',
+        title: 'Mirror',
+        showTitle: false,
+        description: 'Mirror sketch entities about a line or axis',
+        links: [],
+      },
+      [
+        {
+          id: 'constraint-length',
+          disabled: (state) =>
+            !(
+              state.matches('Sketch.SketchIdle') &&
+              state.nextEvents.includes('Constrain length') &&
+              state.can('Constrain length')
+            ),
+          onClick: ({ modelingSend }) =>
+            modelingSend({ type: 'Constrain length' }),
+          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.nextEvents.includes('Constrain angle') &&
+              state.can('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.nextEvents.includes('Make segment vertical') &&
+              state.can('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.nextEvents.includes('Make segment horizontal') &&
+              state.can('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.nextEvents.includes('Constrain parallel') &&
+              state.can('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.nextEvents.includes('Constrain equal length') &&
+              state.can('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.nextEvents.includes('Constrain horizontal distance') &&
+              state.can('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.nextEvents.includes('Constrain vertical distance') &&
+              state.can('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.nextEvents.includes('Constrain ABS X') &&
+              state.can('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.nextEvents.includes('Constrain ABS Y') &&
+              state.can('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.nextEvents.includes('Constrain perpendicular distance') &&
+              state.can('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.nextEvents.includes('Constrain horizontally align') &&
+              state.can('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.nextEvents.includes('Constrain vertically align') &&
+              state.can('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.nextEvents.includes('Constrain snap to X') &&
+              state.can('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.nextEvents.includes('Constrain snap to Y') &&
+              state.can('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.nextEvents.includes('Constrain remove constraints') &&
+              state.can('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: [],
+        },
+      ],
+    ],
+  },
+}