From 2a1273b6831ccdde1335fef3fcdba8dacf136ad7 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Mon, 4 Mar 2024 17:33:53 +0000
Subject: [PATCH] Major v3 web app update (#924)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added the new colours to the Tailwind config

* Fixed Tsailwind compile errors

* WIP Geist working in the app

* WIP Storybook

* Storybook is working again… ouch

* Use Geist mono for CodeMirror

* Some find/replace class changes

* Resizable colours improved

* WIP on primary button

* Minor style improvements

* Improve the side menu header styling

* Improved v2 breadcrumbs

* Account side menu tweaks

* The page now works with the NavBar and UpgradePrompt

* Removed unused import

* Refactored the buttons to be dry-er

* Removed the breadcrumbs

* WIP on nav bar

* WIP updating the button styles

* Fix for the old test page

* Fix for type errors

* Removed console.log

* Colour change in the resizable handle

* New loading bar divider

* Removed the design plugin

* Creating our own storybook pages

* Added some “storybook” pages

* Added DetailCell storybook

* WIP new animation for the loading page

* Added the new loading divider

* Fix for the time frame filter having a green border

* Style improvements to the new test page

* Small style improvements

* Improvements to the list pagination components

* Nav bar back button improved

* Improvements to the run page

* Lots of v2 style improvements

* Help looks better

* Improvements to the regenerate API key modal

* More general improvements

* Added section titles to our storybook

* Added form stories

* Fix for missing key prop

* Loading bar is working

* Fixed button submitting state

* Fix for the test button icon

* Code bg improved

* Improved oauth buttons

* Integration page header fix

* Various improvements, mainly changing button variants

* Segmented control style updates

* Added an outline of 3px for the segment control

* Fixes for the billing pages

* More pricing improvements

* Added dialog to storybook

* Typography now in storybook

* Free usage bar added to storybook

* Added inline clode to storybook

* Separated menu types into a sub section in storybook

* NamedIcon now in storybook

* Added page header to storybook

* Added pricing callout to storybook

* Added radio groups to storybook

* Added segmented controllers to storybook

* Added shortcuts to storybook

* Added switches to storybook

* Added toast to storybook

* Added tooltips to storybook

* Added tree view to storybook

* Added usage charts to storybook

* Tarted up the environment variables page

* Fix for the FreePlanUsage panel bg colours

* Added new badge variants

* Added the <TaskPath /> to the tasks table

* Span header improvements

* Started work on the timeline

* Started work on the timeline

* Fix for the run page header

* Timeline tick marks are working

* Timeline working

* Got the durations showing on hover

* Button improvements

* Experimenting with how the duration should be shown

* Lots of refinements to the timeline

* Much nicer API for the Timeline

* The switch is now purple to match the design, with inverted thumb when on

* Removed old stuff

* Export the props

* Added the span with duration back in

* Simplified more and fixed the span durations

* Put in some decent dummy data

* Rendering defaults

* Wip with the mouse cursor

* Improvements to the story

* Added Slider primitive

* Integrated the icons into the slider

* Lots of layout improvements

* Cleaned up imports

* “Root” indicator

* Animated background on partials

* Pull the styles through to the spans and log dots

* Fixed some bugs in the TreeView when nodes get created or destroyed

* Fix for incorrect parentTask reference

* Added run streaming endpoint for live refreshing

* Added the tabs to Storybook

* Fix for status font size mismatch

* Fix for the misaligned run filter status

* Set a minimum duration on the timeline

* The TreeView now re-calculates if the number of nodes has changed

* Partials now render to the end

* Improved the durations gutter

* The duration is calculated using the current time if there are partial events

* Added the environment label to storybook

* Improved the environment label style

* Removed bottom margin from badge

* Button style improvements

* Callouts style fits the new design better

* Got the scrollbars to appear on the tree/timeline

* Added scroll support

* Synced scrolling working

* Close button and exit icon for the detail panel

* secure field shows start of env

* Clipboard improvements

* Latest lockfile

* Fix for the durations wrapping

---------

Co-authored-by: James Ritchie <james@jamesritchie.co.uk>
---
 apps/webapp/.storybook/main.ts                |    1 -
 apps/webapp/.storybook/preview.tsx            |    2 +-
 apps/webapp/app/assets/icons/ExitIcon.tsx     |   14 +
 .../assets/images/error-banner-tile@2x.png    |  Bin 0 -> 166 bytes
 .../app/assets/images/tile-in-progress@2x.png |  Bin 0 -> 170 bytes
 apps/webapp/app/components/ActiveBadge.tsx    |    6 +-
 apps/webapp/app/components/ComingSoon.tsx     |    6 +-
 .../app/components/DefinitionTooltip.tsx      |    2 +-
 apps/webapp/app/components/ErrorDisplay.tsx   |    2 +-
 apps/webapp/app/components/Feedback.tsx       |    6 +-
 apps/webapp/app/components/ListPagination.tsx |   16 +-
 .../webapp/app/components/LoginPageLayout.tsx |    8 +-
 .../webapp/app/components/NoMobileOverlay.tsx |    4 +-
 .../app/components/ProductHuntBanner.tsx      |    2 +-
 .../app/components/UserProfilePhoto.tsx       |    2 +-
 apps/webapp/app/components/VersionLabel.tsx   |    6 +-
 .../app/components/billing/FreePlanUsage.tsx  |    6 +-
 .../components/billing/PricingCalculator.tsx  |   30 +-
 .../app/components/billing/PricingTiers.tsx   |   31 +-
 .../billing/RunsVolumeDiscountTable.tsx       |    2 +-
 .../app/components/billing/UpgradePrompt.tsx  |   70 +-
 .../app/components/billing/UsageBar.tsx       |    8 +-
 apps/webapp/app/components/code/CodeBlock.tsx |   24 +-
 .../webapp/app/components/code/InlineCode.tsx |    2 +-
 .../webapp/app/components/code/JSONEditor.tsx |   31 +-
 .../app/components/code/codeMirrorTheme.ts    |   13 +-
 .../environments/EndpointIndexStatus.tsx      |    2 +-
 .../environments/EnvironmentLabel.tsx         |   20 +-
 .../environments/RegenerateApiKeyModal.tsx    |   82 +-
 .../app/components/events/EventsFilters.tsx   |    2 +-
 .../app/components/events/EventsTable.tsx     |    8 +-
 .../frameworks/FrameworkComingSoon.tsx        |    8 +-
 .../frameworks/FrameworkSelector.tsx          |    2 +-
 .../helpContent/HelpContentText.tsx           |    9 +-
 .../ConnectToIntegrationSheet.tsx             |    6 +-
 .../integrations/ConnectToOAuthForm.tsx       |    6 +-
 .../components/integrations/CustomHelp.tsx    |    4 +-
 .../IntegrationWithMissingFieldSheet.tsx      |    2 +-
 .../integrations/SelectOAuthMethod.tsx        |    5 +-
 .../integrations/UpdateOAuthForm.tsx          |    6 +-
 .../components/jobs/DeleteJobModalContent.tsx |   11 +-
 .../app/components/jobs/JobSkeleton.tsx       |   10 +-
 .../app/components/layout/AppLayout.tsx       |   37 +-
 .../components/navigation/AccountSideMenu.tsx |   12 +-
 .../app/components/navigation/Breadcrumb.tsx  |   35 -
 .../navigation/PageNavigationIndicator.tsx    |   10 -
 .../app/components/navigation/SideMenu.tsx    |   26 +-
 .../components/navigation/SideMenuHeader.tsx  |    6 +-
 .../components/navigation/SideMenuItem.tsx    |   12 +-
 .../app/components/primitives/Alert.tsx       |    6 +-
 .../app/components/primitives/Badge.tsx       |   11 +-
 .../components/primitives/BreadcrumbIcon.tsx  |    2 +-
 .../app/components/primitives/Buttons.tsx     |  247 ++--
 .../app/components/primitives/Callout.tsx     |   58 +-
 .../app/components/primitives/Checkbox.tsx    |   34 +-
 .../app/components/primitives/ClientTabs.tsx  |   10 +-
 .../components/primitives/ClipboardField.tsx  |   43 +-
 .../app/components/primitives/DateField.tsx   |   16 +-
 .../app/components/primitives/DetailCell.tsx  |   10 +-
 .../app/components/primitives/Dialog.tsx      |   13 +-
 .../app/components/primitives/FormTitle.tsx   |    2 +-
 .../app/components/primitives/Headers.tsx     |    4 +-
 .../webapp/app/components/primitives/Help.tsx |    8 +-
 .../webapp/app/components/primitives/Icon.tsx |   22 +-
 .../app/components/primitives/Input.tsx       |   57 +-
 .../components/primitives/LabelValueStack.tsx |    2 +-
 .../primitives/LoadingBarDivider.tsx          |   52 +
 .../app/components/primitives/NamedIcon.tsx   |   46 +-
 .../app/components/primitives/PageHeader.tsx  |   79 +-
 .../app/components/primitives/Pagination.tsx  |   23 +-
 .../app/components/primitives/Paragraph.tsx   |   30 +-
 .../app/components/primitives/Popover.tsx     |   18 +-
 .../app/components/primitives/RadioButton.tsx |   36 +-
 .../app/components/primitives/Resizable.tsx   |   10 +-
 .../primitives/SegmentedControl.tsx           |   10 +-
 .../app/components/primitives/Select.tsx      |   17 +-
 .../app/components/primitives/Sheet.tsx       |   14 +-
 .../app/components/primitives/ShortcutKey.tsx |    4 +-
 .../app/components/primitives/Slider.tsx      |   52 +
 .../app/components/primitives/StepNumber.tsx  |    4 +-
 .../app/components/primitives/Switch.tsx      |   12 +-
 .../app/components/primitives/Table.tsx       |   20 +-
 .../webapp/app/components/primitives/Tabs.tsx |    8 +-
 .../app/components/primitives/TextArea.tsx    |    2 +-
 .../app/components/primitives/TextLink.tsx    |    2 +-
 .../app/components/primitives/Timeline.tsx    |  243 +++
 .../app/components/primitives/Toast.tsx       |    6 +-
 .../app/components/primitives/Tooltip.tsx     |    8 +-
 .../primitives/TreeView/TreeView.tsx          |   64 +-
 .../components/primitives/TreeView/reducer.ts |   13 +
 .../components/primitives/TreeView/utils.ts   |    2 +-
 apps/webapp/app/components/run/RunCard.tsx    |   18 +-
 .../webapp/app/components/run/RunOverview.tsx |  157 +-
 .../app/components/run/TaskAttemptStatus.tsx  |    2 +-
 apps/webapp/app/components/run/TaskCard.tsx   |    8 +-
 .../app/components/run/TaskCardSkeleton.tsx   |    6 +-
 apps/webapp/app/components/run/TaskStatus.tsx |    4 +-
 .../webapp/app/components/runs/RunFilters.tsx |    6 +-
 .../app/components/runs/RunStatuses.tsx       |    6 +-
 apps/webapp/app/components/runs/RunsTable.tsx |    8 +-
 .../app/components/runs/TimeFrameFilter.tsx   |   10 +-
 .../runs/WebhookDeliveryRunsTable.tsx         |    8 +-
 .../app/components/runs/v3/RunFilters.tsx     |    4 +-
 .../webapp/app/components/runs/v3/RunIcon.tsx |   10 +-
 .../app/components/runs/v3/SpanTitle.tsx      |   57 +-
 .../app/components/runs/v3/TaskRunStatus.tsx  |   18 +-
 .../app/components/runs/v3/TaskRunsTable.tsx  |    8 +-
 .../app/components/stories/Badges.stories.tsx |   25 -
 .../components/stories/Callout.stories.tsx    |   56 -
 .../components/stories/CodeBlock.stories.tsx  |  184 ---
 .../app/components/stories/Dialog.stories.tsx |   51 -
 .../app/components/stories/Forms.stories.tsx  |  253 ----
 .../components/stories/InlineCode.stories.tsx |   32 -
 .../app/components/stories/Menus.stories.tsx  |  144 --
 .../components/stories/PageHeader.stories.tsx |   69 -
 .../stories/SegmentedControl.stories.tsx      |   38 -
 .../app/presenters/v3/RunPresenter.server.ts  |   33 +-
 .../v3/RunStreamPresenter.server.ts           |  118 ++
 .../route.tsx                                 |   47 +-
 .../route.tsx                                 |   18 +-
 .../route.tsx                                 |   21 +-
 .../route.tsx                                 |  154 +-
 .../route.tsx                                 |   64 +-
 .../route.tsx                                 |   16 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   12 +-
 .../route.tsx                                 |   98 +-
 .../route.tsx                                 |   25 +-
 .../route.tsx                                 |   41 +-
 .../ConfigureEndpointSheet.tsx                |    3 +-
 .../route.tsx                                 |   50 +-
 .../route.tsx                                 |   64 +-
 .../route.tsx                                 |   48 +-
 .../route.tsx                                 |    6 -
 .../route.tsx                                 |   66 +-
 .../route.tsx                                 |   38 +-
 .../route.tsx                                 |    6 -
 .../route.tsx                                 |   26 +-
 .../route.tsx                                 |   12 +-
 .../route.tsx                                 |  313 ++--
 .../route.tsx                                 |  180 +--
 .../route.tsx                                 |   48 +-
 .../route.tsx                                 |   12 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |    7 -
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |    7 -
 .../route.tsx                                 |    7 -
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   11 +-
 .../route.tsx                                 |   11 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |   14 +-
 .../route.tsx                                 |   20 +-
 .../route.tsx                                 |   84 +-
 .../route.tsx                                 |  219 ++-
 .../route.tsx                                 |   40 +-
 .../route.tsx                                 |   60 +-
 .../route.tsx                                 |   35 -
 .../route.tsx                                 |   26 +-
 .../route.tsx                                 |   43 +-
 .../route.tsx                                 |   44 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   22 +-
 .../route.tsx                                 |   42 +-
 .../route.tsx                                 |   18 +-
 .../route.tsx                                 |   96 +-
 .../route.tsx                                 |   38 +-
 .../route.tsx                                 |   13 +
 .../route.tsx                                 |  494 +++++--
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   58 +-
 .../route.tsx                                 |   20 +-
 .../route.tsx                                 |   10 +-
 .../route.tsx                                 |   11 +-
 .../route.tsx                                 |   32 +-
 .../_app.orgs.$organizationSlug/route.tsx     |   27 +-
 .../route.tsx                                 |    6 +-
 .../route.tsx                                 |    2 +-
 .../route.tsx                                 |    4 +-
 .../webapp/app/routes/_app.orgs.new/route.tsx |    9 +-
 .../app/routes/account._index/route.tsx       |   18 +-
 .../app/routes/account.tokens/route.tsx       |   50 +-
 apps/webapp/app/routes/account/route.tsx      |   22 +-
 apps/webapp/app/routes/admin._index.tsx       |   13 +-
 apps/webapp/app/routes/invites.tsx            |    2 +-
 apps/webapp/app/routes/login._index/route.tsx |    4 +-
 apps/webapp/app/routes/login.magic/route.tsx  |    6 +-
 .../app/routes/resources.codeexample.tsx      |    2 +-
 .../app/routes/storybook.badges/route.tsx     |   15 +
 .../storybook.buttons/route.tsx}              |  162 +-
 .../app/routes/storybook.callout/route.tsx    |   62 +
 .../storybook.checkboxes/route.tsx}           |   28 +-
 .../storybook.clipboard-field/route.tsx}      |   39 +-
 .../app/routes/storybook.code-block/route.tsx |   39 +
 .../storybook.detail-cell/route.tsx}          |   29 +-
 .../app/routes/storybook.dialog/route.tsx     |   27 +
 .../storybook.environment-label/route.tsx     |   23 +
 .../storybook.free-plan-usage/route.tsx}      |   23 +-
 .../routes/storybook.inline-code/route.tsx    |   12 +
 .../routes/storybook.input-fields/route.tsx   |  108 ++
 .../app/routes/storybook.login-form/route.tsx |   39 +
 .../storybook.named-icon/route.tsx}           |   35 +-
 .../routes/storybook.page-header/route.tsx    |   29 +
 .../app/routes/storybook.popover/route.tsx    |   36 +
 .../storybook.pricing-callout/route.tsx}      |   20 +-
 .../storybook.radio-group/route.tsx}          |   23 +-
 .../routes/storybook.search-fields/route.tsx  |   56 +
 .../storybook.segmented-control/route.tsx     |   15 +
 .../app/routes/storybook.select/route.tsx     |   91 ++
 .../storybook.shortcuts/route.tsx}            |   32 +-
 .../routes/storybook.simple-form/route.tsx    |   55 +
 .../storybook.switch/route.tsx}               |   17 +-
 .../storybook.tabs.$tabNumber/route.tsx       |   10 +
 .../app/routes/storybook.tabs/route.tsx       |   18 +
 .../app/routes/storybook.timeline/route.tsx   |  276 ++++
 .../storybook.toast/route.tsx}                |   25 +-
 .../storybook.tooltip/route.tsx}              |   38 +-
 .../storybook.tree-view/route.tsx}            |   27 +-
 .../storybook.typography/route.tsx}           |   45 +-
 .../storybook.usage/route.tsx}                |   22 +-
 apps/webapp/app/routes/storybook/route.tsx    |  210 +++
 apps/webapp/app/tailwind.css                  |   11 +-
 apps/webapp/app/utils/handle.ts               |    2 -
 apps/webapp/app/utils/pathBuilder.ts          |    8 +
 apps/webapp/package.json                      |   13 +-
 apps/webapp/postcss.config.js                 |    5 +-
 apps/webapp/tailwind.config.js                |  249 ++--
 config-packages/tailwind-config/package.json  |    9 -
 .../tailwind-config/postcss.config.js         |    6 -
 .../tailwind-config/tailwind.config.js        |   24 -
 package.json                                  |    6 +-
 packages/core/src/v3/utils/durations.ts       |    4 +
 pnpm-lock.yaml                                | 1300 +++++++++++------
 .../app/components/ReactHooks.tsx             |    4 +-
 .../app/components/SendReactHookEventForm.tsx |    2 +-
 .../app/events/[eventId]/page.tsx             |    4 +-
 references/package-tester/package.json        |    2 +-
 240 files changed, 5187 insertions(+), 4513 deletions(-)
 create mode 100644 apps/webapp/app/assets/icons/ExitIcon.tsx
 create mode 100644 apps/webapp/app/assets/images/error-banner-tile@2x.png
 create mode 100644 apps/webapp/app/assets/images/tile-in-progress@2x.png
 delete mode 100644 apps/webapp/app/components/navigation/Breadcrumb.tsx
 delete mode 100644 apps/webapp/app/components/navigation/PageNavigationIndicator.tsx
 create mode 100644 apps/webapp/app/components/primitives/LoadingBarDivider.tsx
 create mode 100644 apps/webapp/app/components/primitives/Slider.tsx
 create mode 100644 apps/webapp/app/components/primitives/Timeline.tsx
 delete mode 100644 apps/webapp/app/components/stories/Badges.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/Callout.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/CodeBlock.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/Dialog.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/Forms.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/InlineCode.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/Menus.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/PageHeader.stories.tsx
 delete mode 100644 apps/webapp/app/components/stories/SegmentedControl.stories.tsx
 create mode 100644 apps/webapp/app/presenters/v3/RunStreamPresenter.server.ts
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.stream/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.badges/route.tsx
 rename apps/webapp/app/{components/stories/Button.stories.tsx => routes/storybook.buttons/route.tsx} (73%)
 create mode 100644 apps/webapp/app/routes/storybook.callout/route.tsx
 rename apps/webapp/app/{components/stories/Checkboxes.stories.tsx => routes/storybook.checkboxes/route.tsx} (81%)
 rename apps/webapp/app/{components/stories/ClipboardField.stories.tsx => routes/storybook.clipboard-field/route.tsx} (76%)
 create mode 100644 apps/webapp/app/routes/storybook.code-block/route.tsx
 rename apps/webapp/app/{components/stories/DetailCell.stories.tsx => routes/storybook.detail-cell/route.tsx} (50%)
 create mode 100644 apps/webapp/app/routes/storybook.dialog/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.environment-label/route.tsx
 rename apps/webapp/app/{components/stories/FreePlanUsage.stories.tsx => routes/storybook.free-plan-usage/route.tsx} (60%)
 create mode 100644 apps/webapp/app/routes/storybook.inline-code/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.input-fields/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.login-form/route.tsx
 rename apps/webapp/app/{components/stories/NamedIcon.stories.tsx => routes/storybook.named-icon/route.tsx} (54%)
 create mode 100644 apps/webapp/app/routes/storybook.page-header/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.popover/route.tsx
 rename apps/webapp/app/{components/stories/PricingCallout.stories.tsx => routes/storybook.pricing-callout/route.tsx} (56%)
 rename apps/webapp/app/{components/stories/RadioGroup.stories.tsx => routes/storybook.radio-group/route.tsx} (74%)
 create mode 100644 apps/webapp/app/routes/storybook.search-fields/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.segmented-control/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.select/route.tsx
 rename apps/webapp/app/{components/stories/Shortcuts.stories.tsx => routes/storybook.shortcuts/route.tsx} (70%)
 create mode 100644 apps/webapp/app/routes/storybook.simple-form/route.tsx
 rename apps/webapp/app/{components/stories/Switch.stories.tsx => routes/storybook.switch/route.tsx} (59%)
 create mode 100644 apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.tabs/route.tsx
 create mode 100644 apps/webapp/app/routes/storybook.timeline/route.tsx
 rename apps/webapp/app/{components/stories/ToastUI.stories.tsx => routes/storybook.toast/route.tsx} (69%)
 rename apps/webapp/app/{components/stories/Tooltip.stories.tsx => routes/storybook.tooltip/route.tsx} (55%)
 rename apps/webapp/app/{components/stories/TreeView.stories.tsx => routes/storybook.tree-view/route.tsx} (89%)
 rename apps/webapp/app/{components/stories/Typography.stories.tsx => routes/storybook.typography/route.tsx} (76%)
 rename apps/webapp/app/{components/stories/UsageBar.stories.tsx => routes/storybook.usage/route.tsx} (78%)
 create mode 100644 apps/webapp/app/routes/storybook/route.tsx
 delete mode 100644 config-packages/tailwind-config/package.json
 delete mode 100644 config-packages/tailwind-config/postcss.config.js
 delete mode 100644 config-packages/tailwind-config/tailwind.config.js

diff --git a/apps/webapp/.storybook/main.ts b/apps/webapp/.storybook/main.ts
index 1fea1efde..60217579c 100644
--- a/apps/webapp/.storybook/main.ts
+++ b/apps/webapp/.storybook/main.ts
@@ -27,7 +27,6 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "storybook-addon-variants",
     "storybook-addon-designs",
-    "@storybook/addon-docs",
     {
       name: "@storybook/addon-styling",
       options: {
diff --git a/apps/webapp/.storybook/preview.tsx b/apps/webapp/.storybook/preview.tsx
index 14932b462..c5113ec63 100644
--- a/apps/webapp/.storybook/preview.tsx
+++ b/apps/webapp/.storybook/preview.tsx
@@ -19,7 +19,7 @@ const preview: Preview = {
       values: [
         {
           name: "App background",
-          value: "#0B1018",
+          value: "#15171A",
         },
       ],
     },
diff --git a/apps/webapp/app/assets/icons/ExitIcon.tsx b/apps/webapp/app/assets/icons/ExitIcon.tsx
new file mode 100644
index 000000000..3bbd24cfc
--- /dev/null
+++ b/apps/webapp/app/assets/icons/ExitIcon.tsx
@@ -0,0 +1,14 @@
+export function ExitIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <line x1="3.5" y1="8" x2="11.5" y2="8" stroke="currentColor" stroke-linecap="round" />
+      <line x1="15.5" y1="1.5" x2="15.5" y2="14.5" stroke="currentColor" stroke-linecap="round" />
+      <path
+        d="M8.5 4.5L12 8L8.5 11.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/assets/images/error-banner-tile@2x.png b/apps/webapp/app/assets/images/error-banner-tile@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d601bfced71586c33d929a53d03a0b7ab5362e1
GIT binary patch
literal 166
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`xt=bLAr*{E&l&PHDDbo<M)4;k
zJvwz{S-FV*%O_7<FBnY_P~v=FnsuqhzT@?ocZVm=>8}6&zKpAR{qw#<3AbAh`X-2k
zGqOx)=qheFXu09%gn*oW?dG@7PbJ)*ijd1)RvO20)J*@rQ1;6DZBJW(7BhId`njxg
HN@xNAz+FJi

literal 0
HcmV?d00001

diff --git a/apps/webapp/app/assets/images/tile-in-progress@2x.png b/apps/webapp/app/assets/images/tile-in-progress@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..5724c3a0a2de74fd7f64c902fba768600798126a
GIT binary patch
literal 170
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;Ap{I*uNCo5C%duPxiX1EtO5O*3
zw?FqTGpti#k^E&zi4TcC?k!32o+ftqo$}!mJ)ZZ4D_UPVdgQS0+93MkSXu&y^g)Ab
z%>rv04SWuJ_)L=Q^gPYE=g^k~m2J$iH@HfYjSX6Q6C_?caxAM1`YXn<>?fmCgIeAL
T*Ohrd%Naaf{an^LB{Ts5SSUS&

literal 0
HcmV?d00001

diff --git a/apps/webapp/app/components/ActiveBadge.tsx b/apps/webapp/app/components/ActiveBadge.tsx
index cb7aef6a0..0b0ba45e9 100644
--- a/apps/webapp/app/components/ActiveBadge.tsx
+++ b/apps/webapp/app/components/ActiveBadge.tsx
@@ -17,13 +17,13 @@ export function ActiveBadge({ active, className, badgeSize = "normal" }: ActiveB
   switch (active) {
     case true:
       return (
-        <span className={cn(variant[badgeSize], "bg-slate-800 text-green-500", className)}>
+        <span className={cn(variant[badgeSize], "bg-charcoal-800 text-green-500", className)}>
           Active
         </span>
       );
     case false:
       return (
-        <span className={cn(variant[badgeSize], "bg-slate-800 text-dimmed", className)}>
+        <span className={cn(variant[badgeSize], "bg-charcoal-800 text-text-dimmed", className)}>
           Disabled
         </span>
       );
@@ -52,6 +52,6 @@ export function NewBadge({
   badgeSize?: keyof typeof variant;
 }) {
   return (
-    <span className={cn(variant[badgeSize], "bg-green-600 text-background", className)}>New!</span>
+    <span className={cn(variant[badgeSize], "text-background bg-green-600", className)}>New!</span>
   );
 }
diff --git a/apps/webapp/app/components/ComingSoon.tsx b/apps/webapp/app/components/ComingSoon.tsx
index 283f1f4a5..54d4f9e0a 100644
--- a/apps/webapp/app/components/ComingSoon.tsx
+++ b/apps/webapp/app/components/ComingSoon.tsx
@@ -13,10 +13,10 @@ type ComingSoonProps = {
 export function ComingSoon({ title, description, icon }: ComingSoonProps) {
   return (
     <MainCenteredContainer>
-      <div className="flex flex-col justify-center rounded border border-slate-800 bg-slate-850">
-        <div className="flex items-center gap-2 border-b border-slate-750 px-4 py-4">
+      <div className="flex flex-col justify-center rounded border border-charcoal-800 bg-charcoal-850">
+        <div className="flex items-center gap-2 border-b border-charcoal-750 px-4 py-4">
           {typeof icon === "string" ? (
-            <NamedIconInBox name={icon} className={"h-10 w-10 bg-midnight-800"} />
+            <NamedIconInBox name={icon} className={"bg-midnight-800 h-10 w-10"} />
           ) : (
             icon
           )}
diff --git a/apps/webapp/app/components/DefinitionTooltip.tsx b/apps/webapp/app/components/DefinitionTooltip.tsx
index ad02663f9..d69924149 100644
--- a/apps/webapp/app/components/DefinitionTooltip.tsx
+++ b/apps/webapp/app/components/DefinitionTooltip.tsx
@@ -15,7 +15,7 @@ export function DefinitionTip({
     <TooltipProvider>
       <Tooltip disableHoverableContent>
         <TooltipTrigger>
-          <span className="underline decoration-slate-600 decoration-dashed underline-offset-4 transition hover:decoration-slate-500">
+          <span className="underline decoration-charcoal-600 decoration-dashed underline-offset-4 transition hover:decoration-charcoal-500">
             {children}
           </span>
         </TooltipTrigger>
diff --git a/apps/webapp/app/components/ErrorDisplay.tsx b/apps/webapp/app/components/ErrorDisplay.tsx
index c40360a27..d1e763bef 100644
--- a/apps/webapp/app/components/ErrorDisplay.tsx
+++ b/apps/webapp/app/components/ErrorDisplay.tsx
@@ -40,7 +40,7 @@ type DisplayOptionsProps = {
 export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
   return (
     <div className="p-4">
-      <Header1 className="mb-4 border-b border-slate-800 pb-4">{title}</Header1>
+      <Header1 className="mb-4 border-b border-charcoal-800 pb-4">{title}</Header1>
       {message && <Header3>{message}</Header3>}
       <LinkButton to={button ? button.to : "/"} variant="primary/medium" className="mt-8">
         {button ? button.title : "Home"}
diff --git a/apps/webapp/app/components/Feedback.tsx b/apps/webapp/app/components/Feedback.tsx
index ea67f783a..63d4f801b 100644
--- a/apps/webapp/app/components/Feedback.tsx
+++ b/apps/webapp/app/components/Feedback.tsx
@@ -114,11 +114,11 @@ function DiscordBanner() {
     <a
       href="https://trigger.dev/discord"
       target="_blank"
-      className="group mb-4 flex w-full items-center justify-between rounded-md border border-slate-600 bg-gradient-to-br from-blue-400/30 to-indigo-400/50 p-4 transition hover:border-indigo-400"
+      className="group mb-4 flex w-full items-center justify-between rounded-md border border-charcoal-600 bg-gradient-to-br from-blue-400/30 to-indigo-400/50 p-4 transition hover:border-indigo-400"
     >
       <div className="flex flex-col gap-y-2">
         <DiscordIcon className="h-8 w-8" />
-        <h2 className="font-title text-2xl text-bright transition group-hover:text-white">
+        <h2 className="font-title text-2xl text-text-bright transition group-hover:text-white">
           Join the Trigger.dev
           <br />
           Discord community
@@ -127,7 +127,7 @@ function DiscordBanner() {
           Get help or answer questions from the Trigger.dev community.
         </Paragraph>
       </div>
-      <ChevronRightIcon className="h-5 w-5 text-slate-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
+      <ChevronRightIcon className="h-5 w-5 text-charcoal-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
     </a>
   );
 }
diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx
index 05ed9ceda..c62b74972 100644
--- a/apps/webapp/app/components/ListPagination.tsx
+++ b/apps/webapp/app/components/ListPagination.tsx
@@ -25,11 +25,13 @@ function NextButton({ cursor }: { cursor?: string }) {
   return (
     <LinkButton
       to={path ?? "#"}
-      variant={"tertiary/small"}
-      TrailingIcon="chevron-right"
+      variant={"minimal/small"}
+      TrailingIcon="arrow-right"
+      trailingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
-        !path && "cursor-default opacity-50 group-hover:bg-transparent group-hover:text-slate-800"
+        !path &&
+          "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
       )}
       onClick={(e) => !path && e.preventDefault()}
     >
@@ -44,11 +46,13 @@ function PreviousButton({ cursor }: { cursor?: string }) {
   return (
     <LinkButton
       to={path ?? "#"}
-      variant={"tertiary/small"}
-      LeadingIcon="chevron-left"
+      variant={"minimal/small"}
+      LeadingIcon="arrow-left"
+      leadingIconClassName="text-text-dimmed"
       className={cn(
         "flex items-center",
-        !path && "cursor-default opacity-50 group-hover:bg-transparent group-hover:text-slate-800"
+        !path &&
+          "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed"
       )}
       onClick={(e) => !path && e.preventDefault()}
     >
diff --git a/apps/webapp/app/components/LoginPageLayout.tsx b/apps/webapp/app/components/LoginPageLayout.tsx
index 70917e6c5..877b6e362 100644
--- a/apps/webapp/app/components/LoginPageLayout.tsx
+++ b/apps/webapp/app/components/LoginPageLayout.tsx
@@ -43,7 +43,7 @@ const quotes: QuoteType[] = [
 ];
 
 const layout = "group grid place-items-center text-center overflow-hidden";
-const gridCell = "hover:bg-midnight-850 rounded-lg transition bg-midnight-850/40";
+const gridCell = "hover:bg-background-bright rounded-lg transition bg-background-bright/40";
 const opacity = "opacity-10 group-hover:opacity-100 transition group-hover:scale-105";
 const logos = "h-[60%] w-[60%] transition grayscale group-hover:grayscale-0";
 const features = "h-[60%] w-[60%] text-gray-500 grayscale transition group-hover:grayscale-0";
@@ -61,7 +61,7 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <main className="grid h-full grid-cols-12">
-      <div className="border-midnight-750 z-10 col-span-12 border-r bg-midnight-850 md:col-span-6">
+      <div className="border-midnight-750 z-10 col-span-12 border-r bg-background-bright md:col-span-6">
         <div className="flex h-full flex-col items-center justify-between p-6">
           <div className="flex w-full items-center justify-between">
             <a href="https://trigger.dev">
@@ -106,12 +106,12 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
         <LoginTooltip side="top" content={<QuoteTooltipContent />}>
           <div className={cn(layout, gridCell, wider)}>
             <div className="px-4">
-              <Header3 className="relative text-2xl font-normal leading-8 text-gray-600 transition before:relative before:right-1 before:top-0 before:text-4xl before:text-slate-600 before:opacity-20 before:content-['❝'] group-hover:text-slate-500 group-hover:before:opacity-30 lg-height:text-xl md-height:text-lg">
+              <Header3 className="relative text-2xl font-normal leading-8 text-gray-600 transition before:relative before:right-1 before:top-0 before:text-4xl before:text-charcoal-600 before:opacity-20 before:content-['❝'] group-hover:text-charcoal-500 group-hover:before:opacity-30 lg-height:text-xl md-height:text-lg">
                 {randomQuote?.quote}
               </Header3>
               <Paragraph
                 variant="small"
-                className="mt-4 text-gray-700 transition group-hover:text-slate-600"
+                className="mt-4 text-gray-700 transition group-hover:text-charcoal-600"
               >
                 {randomQuote?.person}
               </Paragraph>
diff --git a/apps/webapp/app/components/NoMobileOverlay.tsx b/apps/webapp/app/components/NoMobileOverlay.tsx
index 2e6de051b..3a22850ee 100644
--- a/apps/webapp/app/components/NoMobileOverlay.tsx
+++ b/apps/webapp/app/components/NoMobileOverlay.tsx
@@ -7,9 +7,9 @@ export function NoMobileOverlay() {
     <>
       <div className="fixed inset-0 z-[9999] flex items-center justify-center sm:hidden">
         <div className="relative h-full w-full bg-black opacity-90"></div>
-        <div className="absolute mx-8 flex flex-col items-center gap-6 rounded-lg bg-slate-850 px-8 py-10 text-center">
+        <div className="absolute mx-8 flex flex-col items-center gap-6 rounded-lg bg-charcoal-850 px-8 py-10 text-center">
           <XMarkIcon className="absolute top-14 h-8 w-8 text-rose-600" />
-          <DevicePhoneMobileIcon className="h-16 w-16 text-slate-500" />
+          <DevicePhoneMobileIcon className="h-16 w-16 text-charcoal-500" />
           <Paragraph>Trigger.dev is currently only available on desktop.</Paragraph>
           <LinkButton to="https://trigger.dev" variant="primary/medium">
             Back Home
diff --git a/apps/webapp/app/components/ProductHuntBanner.tsx b/apps/webapp/app/components/ProductHuntBanner.tsx
index 39642da98..b85893836 100644
--- a/apps/webapp/app/components/ProductHuntBanner.tsx
+++ b/apps/webapp/app/components/ProductHuntBanner.tsx
@@ -14,7 +14,7 @@ export function ProductHuntBanner() {
       <LinkButton
         to="https://www.producthunt.com/posts/trigger-dev"
         target="_blank"
-        className="!text-white underline underline-offset-2 transition hover:decoration-slate-100 hover:decoration-2"
+        className="!text-white underline underline-offset-2 transition hover:decoration-charcoal-100 hover:decoration-2"
         variant="tertiary/small"
       >
         Vote for us today only!
diff --git a/apps/webapp/app/components/UserProfilePhoto.tsx b/apps/webapp/app/components/UserProfilePhoto.tsx
index a59e0a653..5903353d1 100644
--- a/apps/webapp/app/components/UserProfilePhoto.tsx
+++ b/apps/webapp/app/components/UserProfilePhoto.tsx
@@ -25,6 +25,6 @@ export function UserAvatar({
       />
     </div>
   ) : (
-    <UserCircleIcon className={cn("aspect-square text-slate-400", className)} />
+    <UserCircleIcon className={cn("aspect-square text-charcoal-400", className)} />
   );
 }
diff --git a/apps/webapp/app/components/VersionLabel.tsx b/apps/webapp/app/components/VersionLabel.tsx
index 9c44e765c..e2470454a 100644
--- a/apps/webapp/app/components/VersionLabel.tsx
+++ b/apps/webapp/app/components/VersionLabel.tsx
@@ -14,13 +14,13 @@ export function VersionLabel({ environment, userName, version }: VersionLabelPro
   return (
     <div
       className={cn(
-        "inline-flex items-center justify-stretch justify-items-stretch rounded-sm border border-midnight-700 text-xxs"
+        "border-midnight-700 inline-flex items-center justify-stretch justify-items-stretch rounded-sm border text-xxs"
       )}
     >
-      <div className="px-1 text-xs tabular-nums text-dimmed">v{version}</div>
+      <div className="px-1 text-xs tabular-nums text-text-dimmed">v{version}</div>
       <div
         className={cn(
-          "inline-flex items-center justify-center rounded-r-sm border-l border-midnight-700 px-1 text-xxs font-medium uppercase tracking-wider",
+          "border-midnight-700 inline-flex items-center justify-center rounded-r-sm border-l px-1 text-xxs font-medium uppercase tracking-wider",
           environmentTextClassName(environment)
         )}
       >
diff --git a/apps/webapp/app/components/billing/FreePlanUsage.tsx b/apps/webapp/app/components/billing/FreePlanUsage.tsx
index 95c260449..f652fee75 100644
--- a/apps/webapp/app/components/billing/FreePlanUsage.tsx
+++ b/apps/webapp/app/components/billing/FreePlanUsage.tsx
@@ -18,14 +18,14 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
   return (
     <div
       className={cn(
-        "rounded border border-slate-900 bg-[#101722] p-2.5",
+        "rounded border border-charcoal-700 bg-charcoal-750 p-2.5",
         hasHitLimit && "border-rose-800/60"
       )}
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-1">
-          <ArrowUpCircleIcon className="h-5 w-5 text-dimmed" />
-          <Paragraph className="text-2sm text-bright">Free Plan</Paragraph>
+          <ArrowUpCircleIcon className="h-5 w-5 text-text-dimmed" />
+          <Paragraph className="text-2sm text-text-bright">Free Plan</Paragraph>
         </div>
         <Link to={to} className="text-2sm text-indigo-500">
           Learn more
diff --git a/apps/webapp/app/components/billing/PricingCalculator.tsx b/apps/webapp/app/components/billing/PricingCalculator.tsx
index 35379116a..daca65a2e 100644
--- a/apps/webapp/app/components/billing/PricingCalculator.tsx
+++ b/apps/webapp/app/components/billing/PricingCalculator.tsx
@@ -84,18 +84,18 @@ function ConcurrentRunsSlider({
             max={options.length - 1}
             step={1}
           >
-            <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
-              <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />
+            <Slider.Track className="relative h-[8px] grow rounded-full bg-grid-bright">
+              <Slider.Range className="absolute h-full rounded-full bg-primary" />
             </Slider.Track>
             <Slider.Thumb
-              className="block h-5 w-5 rounded-full border-4 border-indigo-500 bg-slate-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-indigo-400 hover:bg-slate-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              className="block h-5 w-5 rounded-full border-4 border-primary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-primary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
           <div className="ml-1.5 flex w-[99.85%] items-center justify-between">
             {options.map((tier, i) => {
               return (
-                <Paragraph variant="extra-small" className="text-slate-600" key={i}>
+                <Paragraph variant="extra-small" key={i}>
                   {tier.upto}
                 </Paragraph>
               );
@@ -103,13 +103,13 @@ function ConcurrentRunsSlider({
           </div>
         </div>
         <div className="flex h-full items-start">
-          <span className="ml-6 text-dimmed">=</span>
-          <Header2 className="min-w-[8ch] text-right text-dimmed">
+          <span className="ml-6 text-text-dimmed">=</span>
+          <Header2 className="min-w-[8ch] text-right text-text-dimmed">
             {formatCurrency(cost, true)}
           </Header2>
         </div>
       </div>
-      <hr className="mt-6 border-border" />
+      <hr className="mt-6 border-grid-bright" />
     </div>
   );
 }
@@ -157,11 +157,11 @@ function RunsSlider({
             max={runIncrements}
             step={1}
           >
-            <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
-              <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />
+            <Slider.Track className="relative h-[8px] grow rounded-full bg-grid-bright">
+              <Slider.Range className="absolute h-full rounded-full bg-primary" />
             </Slider.Track>
             <Slider.Thumb
-              className="block h-5 w-5 rounded-full border-4 border-indigo-500 bg-slate-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-indigo-400 hover:bg-slate-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              className="block h-5 w-5 rounded-full border-4 border-primary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-primary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
               aria-label="Concurrent runs slider"
             />
           </Slider.Root>
@@ -185,13 +185,13 @@ function RunsSlider({
           </div>
         </div>
         <div className="flex h-full items-start">
-          <span className="ml-6 text-dimmed">=</span>
-          <Header2 className="min-w-[8ch] text-right text-dimmed">
+          <span className="ml-6 text-text-dimmed">=</span>
+          <Header2 className="min-w-[8ch] text-right text-text-dimmed">
             {formatCurrency(cost, true)}
           </Header2>
         </div>
       </div>
-      <hr className="mt-6 border-border" />
+      <hr className="mt-6 border-grid-bright" />
     </div>
   );
 }
@@ -250,9 +250,7 @@ function SliderMarker({
             : "justify-middle right-0"
         )}
       >
-        <Paragraph variant="extra-small" className="text-slate-600">
-          {text}
-        </Paragraph>
+        <Paragraph variant="extra-small">{text}</Paragraph>
       </div>
     </div>
   );
diff --git a/apps/webapp/app/components/billing/PricingTiers.tsx b/apps/webapp/app/components/billing/PricingTiers.tsx
index cdd08553a..30b9c2a00 100644
--- a/apps/webapp/app/components/billing/PricingTiers.tsx
+++ b/apps/webapp/app/components/billing/PricingTiers.tsx
@@ -144,7 +144,7 @@ export function TierFree({
         <div className="py-6">
           {buttonPath ? (
             <LinkButton
-              variant="secondary/large"
+              variant="tertiary/large"
               fullWidth
               className="text-md font-medium"
               to={buttonPath}
@@ -153,7 +153,7 @@ export function TierFree({
             </LinkButton>
           ) : (
             <Button
-              variant="secondary/large"
+              variant="tertiary/large"
               fullWidth
               className="text-md font-medium"
               disabled={isLoading || isCurrentPlan}
@@ -275,7 +275,7 @@ export function TierPro({
       <Form action={`/resources/${organizationSlug}/subscribe`} method="post" {...form.props}>
         <Header title={plan.title} isHighlighted cost={selectedTier?.tierCost} />
 
-        <div className="mb-2 mt-6 font-sans text-sm font-normal text-bright">
+        <div className="mb-2 mt-6 font-sans text-sm font-normal text-text-bright">
           <DefinitionTip
             title={pricingDefinitions.concurrentRuns.title}
             content={pricingDefinitions.concurrentRuns.content}
@@ -460,7 +460,7 @@ function TierContainer({
     <div
       className={cn(
         "flex w-full min-w-[16rem] flex-col rounded-md border p-6",
-        isHighlighted ? "border-indigo-500" : "border-border"
+        isHighlighted ? "border-primary" : "border-grid-bright"
       )}
     >
       {children}
@@ -479,13 +479,15 @@ function Header({
 }) {
   return (
     <div className="flex flex-col gap-2">
-      <h2 className={cn("text-xl font-medium", isHighlighted ? "text-indigo-500" : "text-dimmed")}>
+      <h2
+        className={cn("text-xl font-medium", isHighlighted ? "text-primary" : "text-text-dimmed")}
+      >
         {title}
       </h2>
       {flatCost === 0 || flatCost ? (
-        <h3 className="text-4xl font-medium">
+        <h3 className="text-4xl font-medium text-text-bright">
           ${flatCost}
-          <span className="text-2sm font-normal tracking-wide text-dimmed">/month</span>
+          <span className="text-2sm font-normal tracking-wide text-text-dimmed">/month</span>
         </h3>
       ) : (
         <h2 className="text-4xl font-medium">Custom</h2>
@@ -498,7 +500,9 @@ function TierLimit({ children }: { children: React.ReactNode }) {
   return (
     <div>
       <hr className="my-[1.9rem]" />
-      <div className="mb-[0.6rem] mt-6 font-sans text-sm font-normal text-bright">{children}</div>
+      <div className="mb-[0.6rem] mt-6 font-sans text-sm font-normal text-text-bright">
+        {children}
+      </div>
     </div>
   );
 }
@@ -507,11 +511,16 @@ function FeatureItem({ checked, children }: { checked?: boolean; children: React
   return (
     <li className="flex items-center gap-2">
       {checked ? (
-        <CheckIcon className="h-4 w-4 text-green-500" />
+        <CheckIcon className="h-4 w-4 text-primary" />
       ) : (
-        <XMarkIcon className="h-4 w-4 text-slate-500" />
+        <XMarkIcon className="h-4 w-4 text-charcoal-500" />
       )}
-      <div className={cn("font-sans text-sm font-normal", checked ? "text-bright" : "text-dimmed")}>
+      <div
+        className={cn(
+          "font-sans text-sm font-normal",
+          checked ? "text-text-bright" : "text-text-dimmed"
+        )}
+      >
         {children}
       </div>
     </li>
diff --git a/apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx b/apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx
index 11d719d58..2bd1b4455 100644
--- a/apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx
+++ b/apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx
@@ -13,7 +13,7 @@ export function RunsVolumeDiscountTable({
   brackets: RunPriceBracket[];
 }) {
   const runsVolumeDiscountRow =
-    "flex justify-between whitespace-nowrap border-b gap-16 border-border last:pb-0 last:border-none py-2";
+    "flex justify-between whitespace-nowrap border-b gap-16 border-grid-bright last:pb-0 last:border-none py-2";
 
   const bracketData = bracketInfo(brackets);
 
diff --git a/apps/webapp/app/components/billing/UpgradePrompt.tsx b/apps/webapp/app/components/billing/UpgradePrompt.tsx
index 5a132a235..fc9a41a27 100644
--- a/apps/webapp/app/components/billing/UpgradePrompt.tsx
+++ b/apps/webapp/app/components/billing/UpgradePrompt.tsx
@@ -1,43 +1,61 @@
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import tileBgPath from "~/assets/images/error-banner-tile@2x.png";
 import { MatchedOrganization } from "~/hooks/useOrganizations";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { formatNumberCompact } from "~/utils/numberFormatter";
-import { plansPath } from "~/utils/pathBuilder";
 import { LinkButton } from "../primitives/Buttons";
+import { Icon } from "../primitives/Icon";
 import { Paragraph } from "../primitives/Paragraph";
-import { Callout } from "../primitives/Callout";
 
 type UpgradePromptProps = {
-  organization: MatchedOrganization;
+  runsEnabled: boolean;
+  runCountCap: number;
+  planPath: string;
 };
 
-export function UpgradePrompt({ organization }: UpgradePromptProps) {
-  const currentPlan = useCurrentPlan();
-
-  if (!currentPlan || !currentPlan.usage.exceededRunCount || !currentPlan.usage.runCountCap) {
-    return null;
-  }
-
+export function UpgradePrompt({ runsEnabled, runCountCap, planPath }: UpgradePromptProps) {
   return (
-    <Callout variant="error" className="flex h-full items-center rounded-none px-1 py-0">
-      <div className="flex items-center justify-between gap-3">
-        <Paragraph variant="extra-small" className="text-white">
-          {organization.runsEnabled
-            ? `You have exceeded the monthly ${formatNumberCompact(
-                currentPlan.usage.runCountCap
-              )} runs
+    <div
+      className="flex h-10 items-center justify-between border border-error bg-repeat py-0 pl-3 pr-2"
+      style={{ backgroundImage: `url(${tileBgPath})`, backgroundSize: "8px 8px" }}
+    >
+      <div className="flex items-center gap-2">
+        <Icon icon={ExclamationCircleIcon} className="h-5 w-5 text-error" />
+        <Paragraph variant="small" className="text-error">
+          {runsEnabled
+            ? `You have exceeded the monthly ${formatNumberCompact(runCountCap)} runs
           limit`
             : `No runs are executing because you have exceeded the free limit`}
         </Paragraph>
-        <LinkButton
-          variant={"primary/small"}
-          LeadingIcon={ArrowUpCircleIcon}
-          leadingIconClassName="px-0"
-          to={plansPath(organization)}
-        >
-          Upgrade
-        </LinkButton>
       </div>
-    </Callout>
+      <LinkButton
+        variant={"primary/small"}
+        LeadingIcon={ArrowUpCircleIcon}
+        leadingIconClassName="px-0"
+        to={planPath}
+      >
+        Upgrade
+      </LinkButton>
+    </div>
   );
 }
+
+export function useShowUpgradePrompt(organization?: MatchedOrganization) {
+  const currentPlan = useCurrentPlan();
+  const shouldShow =
+    organization !== undefined &&
+    currentPlan !== undefined &&
+    currentPlan.usage.exceededRunCount &&
+    currentPlan.usage.runCountCap !== undefined;
+
+  if (!shouldShow) {
+    return { shouldShow };
+  }
+
+  return {
+    shouldShow,
+    runCountCap: currentPlan.usage.runCountCap!,
+    runsEnabled: organization.runsEnabled,
+  };
+}
diff --git a/apps/webapp/app/components/billing/UsageBar.tsx b/apps/webapp/app/components/billing/UsageBar.tsx
index 0dfaeb4e9..8cd580bc0 100644
--- a/apps/webapp/app/components/billing/UsageBar.tsx
+++ b/apps/webapp/app/components/billing/UsageBar.tsx
@@ -38,7 +38,7 @@ export function UsageBar({
 
   return (
     <div className="h-fit w-full py-16">
-      <div className="relative h-3 w-full rounded-sm bg-slate-800">
+      <div className="relative h-3 w-full rounded-sm bg-charcoal-800">
         {billingLimit && (
           <motion.div
             initial={{ width: 0 }}
@@ -145,16 +145,16 @@ function Legend({ text, value, position, percentage, tooltipContent }: LegendPro
   return (
     <div
       className={cn(
-        "absolute left-full z-10 flex border-slate-400",
+        "absolute left-full z-10 flex border-charcoal-400",
         positions[position],
         flipLegendPosition === true ? "-translate-x-full border-r" : "border-l"
       )}
     >
       <SimpleTooltip
         button={
-          <Paragraph className="mr-px h-fit whitespace-nowrap bg-background px-1.5 text-xs text-dimmed">
+          <Paragraph className="mr-px h-fit whitespace-nowrap bg-background-dimmed px-1.5 text-xs text-text-dimmed">
             {text}
-            <span className="ml-1 text-bright">{value}</span>
+            <span className="ml-1 text-text-bright">{value}</span>
           </Paragraph>
         }
         variant="dark"
diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index 5c7579be3..2c9c68b43 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -46,7 +46,7 @@ const extraLinesWhenClipping = 0.35;
 const defaultTheme: PrismTheme = {
   plain: {
     color: "#9CDCFE",
-    backgroundColor: "#0e1521",
+    backgroundColor: "#1A1B1F",
   },
   styles: [
     {
@@ -196,7 +196,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
 
     return (
       <div
-        className={cn("relative overflow-hidden rounded-md border border-slate-800", className)}
+        className={cn("relative overflow-hidden rounded-md border border-charcoal-800", className)}
         style={{
           backgroundColor: theme.plain.backgroundColor,
         }}
@@ -215,7 +215,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                 className={cn(
                   "absolute  right-3 z-50 transition-colors duration-100 hover:cursor-pointer",
                   showChrome ? "top-10" : "top-3",
-                  copied ? "text-emerald-500" : "text-slate-500 hover:text-slate-300"
+                  copied ? "text-emerald-500" : "text-charcoal-500 hover:text-charcoal-300"
                 )}
               >
                 {copied ? (
@@ -242,7 +242,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
             }) => (
               <div
                 dir="ltr"
-                className="overflow-auto px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+                className="overflow-auto px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
                 style={{
                   maxHeight,
                 }}
@@ -291,7 +291,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                           {showLineNumbers && (
                             <div
                               className={
-                                "mr-2 flex-none select-none text-right text-slate-500 transition-opacity duration-500"
+                                "mr-2 flex-none select-none text-right text-charcoal-500 transition-opacity duration-500"
                               }
                               style={{
                                 width: `calc(8 * ${maxLineWidth / 16}rem)`,
@@ -328,7 +328,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
         ) : (
           <div
             dir="ltr"
-            className="overflow-auto px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+            className="overflow-auto px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
             style={{
               maxHeight,
             }}
@@ -347,17 +347,17 @@ CodeBlock.displayName = "CodeBlock";
 
 function Chrome({ title }: { title?: string }) {
   return (
-    <div className="grid h-7 grid-cols-[100px_auto_100px] border-b border-slate-800 bg-slate-900">
+    <div className="grid h-7 grid-cols-[100px_auto_100px] border-b border-charcoal-800 bg-charcoal-900">
       <div className="ml-2 flex items-center gap-2">
-        <div className="h-3 w-3 rounded-full bg-slate-700" />
-        <div className="h-3 w-3 rounded-full bg-slate-700" />
-        <div className="h-3 w-3 rounded-full bg-slate-700" />
+        <div className="h-3 w-3 rounded-full bg-charcoal-700" />
+        <div className="h-3 w-3 rounded-full bg-charcoal-700" />
+        <div className="h-3 w-3 rounded-full bg-charcoal-700" />
       </div>
       <div className="flex items-center justify-center">
         <div
           className={cn(
-            "rounded-sm px-3 py-0.5 text-xs text-slate-500",
-            title && "bg-midnight-900"
+            "rounded-sm px-3 py-0.5 text-xs text-charcoal-500",
+            title && "bg-background-dimmed"
           )}
         >
           {title}
diff --git a/apps/webapp/app/components/code/InlineCode.tsx b/apps/webapp/app/components/code/InlineCode.tsx
index 55e3f707d..c78970808 100644
--- a/apps/webapp/app/components/code/InlineCode.tsx
+++ b/apps/webapp/app/components/code/InlineCode.tsx
@@ -1,7 +1,7 @@
 import { cn } from "~/utils/cn";
 
 const inlineCode =
-  "px-1 py-0.5 rounded border border-slate-800 bg-midnight-850 text-sky-200 font-mono";
+  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono";
 
 const variants = {
   "extra-extra-small": "text-xxs",
diff --git a/apps/webapp/app/components/code/JSONEditor.tsx b/apps/webapp/app/components/code/JSONEditor.tsx
index 7d5ef0c23..9bca0f341 100644
--- a/apps/webapp/app/components/code/JSONEditor.tsx
+++ b/apps/webapp/app/components/code/JSONEditor.tsx
@@ -1,6 +1,6 @@
 import { json as jsonLang } from "@codemirror/lang-json";
 import type { ViewUpdate } from "@codemirror/view";
-import { CheckIcon, ClipboardIcon } from "@heroicons/react/20/solid";
+import { CheckIcon, ClipboardIcon, TrashIcon } from "@heroicons/react/20/solid";
 import type { ReactCodeMirrorProps, UseCodeMirror } from "@uiw/react-codemirror";
 import { useCodeMirror } from "@uiw/react-codemirror";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -108,20 +108,13 @@ export function JSONEditor(opts: JSONEditorProps) {
   }, [view]);
 
   return (
-    <div className={cn(opts.className, "relative")}>
-      <div
-        className="h-full w-full"
-        ref={editor}
-        onBlur={() => {
-          if (!onBlur) return;
-          onBlur(editor.current?.textContent ?? "");
-        }}
-      />
-      <div className="absolute right-3 top-3 flex items-center gap-2">
+    <div className={cn(opts.className, "grid grid-rows-[2.5rem_1fr]")}>
+      <div className="mx-3 flex items-center justify-end gap-2 border-b border-grid-dimmed">
         {showClearButton && (
           <Button
             type="button"
-            variant="secondary/small"
+            variant="minimal/small"
+            TrailingIcon={TrashIcon}
             onClick={(event) => {
               event.preventDefault();
               event.stopPropagation();
@@ -134,9 +127,9 @@ export function JSONEditor(opts: JSONEditorProps) {
         {showCopyButton && (
           <Button
             type="button"
-            variant="secondary/small"
-            LeadingIcon={copied ? CheckIcon : ClipboardIcon}
-            leadingIconClassName={copied ? "text-green-500 group-hover:text-green-500" : undefined}
+            variant="minimal/small"
+            TrailingIcon={copied ? CheckIcon : ClipboardIcon}
+            trailingIconClassName={copied ? "text-green-500 group-hover:text-green-500" : undefined}
             onClick={(event) => {
               event.preventDefault();
               event.stopPropagation();
@@ -147,6 +140,14 @@ export function JSONEditor(opts: JSONEditorProps) {
           </Button>
         )}
       </div>
+      <div
+        className="w-full overflow-auto"
+        ref={editor}
+        onBlur={() => {
+          if (!onBlur) return;
+          onBlur(editor.current?.textContent ?? "");
+        }}
+      />
     </div>
   );
 }
diff --git a/apps/webapp/app/components/code/codeMirrorTheme.ts b/apps/webapp/app/components/code/codeMirrorTheme.ts
index c74ff8de3..74d074b3c 100644
--- a/apps/webapp/app/components/code/codeMirrorTheme.ts
+++ b/apps/webapp/app/components/code/codeMirrorTheme.ts
@@ -1,8 +1,7 @@
-import { EditorView } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import type { Extension } from "@codemirror/state";
-import { HighlightStyle } from "@codemirror/language";
-import { tagHighlighter, tags } from "@lezer/highlight";
-import { syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
 
 export function darkTheme(): Extension {
   const chalky = "#e5c07b",
@@ -21,11 +20,11 @@ export function darkTheme(): Extension {
     tooltipBackground = "#353a42",
     selection = "rgb(71 85 105)",
     cursor = "#528bff",
-    scrollbarTrack = "#0E1521",
+    scrollbarTrack = "rgba(0,0,0,0)",
     scrollbarTrackActive = "#131B2B",
     scrollbarThumb = "#293649",
     scrollbarThumbActive = "#3C4B62",
-    scrollbarBg = "#0E1521";
+    scrollbarBg = "rgba(0,0,0,0)";
 
   const jsonHeroEditorTheme = EditorView.theme(
     {
@@ -36,7 +35,7 @@ export function darkTheme(): Extension {
 
       ".cm-content": {
         caretColor: cursor,
-        fontFamily: "monospace",
+        fontFamily: "Geist Mono Variable",
         fontSize: "14px",
       },
 
diff --git a/apps/webapp/app/components/environments/EndpointIndexStatus.tsx b/apps/webapp/app/components/environments/EndpointIndexStatus.tsx
index 67398b0b7..41c87db47 100644
--- a/apps/webapp/app/components/environments/EndpointIndexStatus.tsx
+++ b/apps/webapp/app/components/environments/EndpointIndexStatus.tsx
@@ -63,7 +63,7 @@ export function endpointIndexStatusTitle(status: EndpointIndexStatus): string {
 export function endpointIndexStatusClassNameColor(status: EndpointIndexStatus): string {
   switch (status) {
     case "PENDING":
-      return "text-dimmed";
+      return "text-text-dimmed";
     case "STARTED":
       return "text-blue-500";
     case "SUCCESS":
diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
index 4df18297b..cc3852202 100644
--- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx
+++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
@@ -2,21 +2,29 @@ import { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
 import { cn } from "~/utils/cn";
 
 type Environment = Pick<RuntimeEnvironment, "type">;
+const variants = {
+  small: "h-4 text-xxs px-[0.1875rem] rounded-[2px]",
+  large: "h-6 text-xs px-1.5 rounded",
+};
 
 export function EnvironmentLabel({
   environment,
+  size = "small",
   userName,
   className,
 }: {
   environment: Environment;
+  size?: keyof typeof variants;
   userName?: string;
   className?: string;
 }) {
   return (
     <span
       className={cn(
-        "inline-flex h-4 items-center justify-center rounded-[2px] px-1 text-xxs font-medium uppercase tracking-wider text-midnight-900 whitespace-nowrap",
-        environmentColorClassName(environment),
+        "text-midnight-900 inline-flex items-center justify-center whitespace-nowrap border font-medium uppercase tracking-wider",
+        environmentBorderClassName(environment),
+        environmentTextClassName(environment),
+        variants[size],
         className
       )}
     >
@@ -54,13 +62,13 @@ export function environmentColorClassName(environment: Environment) {
 export function environmentBorderClassName(environment: Environment) {
   switch (environment.type) {
     case "PRODUCTION":
-      return "border-green-500";
+      return "border-green-500/50";
     case "STAGING":
-      return "border-amber-500";
+      return "border-amber-500/50";
     case "DEVELOPMENT":
-      return "border-pink-500";
+      return "border-pink-500/50";
     case "PREVIEW":
-      return "border-yellow-500";
+      return "border-yellow-500/50";
   }
 }
 
diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
index 86caba799..08d266770 100644
--- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
+++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx
@@ -1,4 +1,4 @@
-import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/20/solid";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { useFetcher } from "@remix-run/react";
 import { useState } from "react";
@@ -9,6 +9,10 @@ import { Header1 } from "../primitives/Headers";
 import { Input } from "../primitives/Input";
 import { Paragraph } from "../primitives/Paragraph";
 import { Spinner } from "../primitives/Spinner";
+import { Callout } from "../primitives/Callout";
+import { Fieldset } from "../primitives/Fieldset";
+import { InputGroup } from "../primitives/InputGroup";
+import { FormButtons } from "../primitives/FormButtons";
 
 type ModalProps = {
   id: string;
@@ -27,8 +31,8 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button
-          variant="tertiary/small"
-          leadingIconClassName="text-dimmed"
+          variant="minimal/small"
+          leadingIconClassName="text-text-dimmed"
           LeadingIcon={ArrowPathIcon}
         >
           Regenerate
@@ -58,47 +62,47 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod
   }
 
   return (
-    <div className="flex w-full flex-col items-center gap-y-5 pb-4">
-      <div className="mt-3 flex gap-x-3 rounded-md border border-ui-border py-4 pl-3 pr-5">
-        <ExclamationTriangleIcon className="relative top-1 h-6 w-6 min-w-[2rem] text-amber-500" />
-        <Paragraph>
-          Regenerating the keys for this environment will temporarily break any live Jobs in the
-          <span className="text-bright"> {title} Environment</span> until the new API keys are set
-          in the relevant environment variables.
-        </Paragraph>
-      </div>
+    <div className="flex flex-col items-center gap-y-5 py-4">
+      <Callout variant="warning">
+        {`Regenerating the keys for this environment will temporarily break any live Jobs in the
+        ${title} Environmentuntil the new API keys are set in the relevant environment variables.`}
+      </Callout>
       <fetcher.Form
         method="post"
         action={`/resources/environments/${id}/regenerate-api-key`}
-        className="mt-2 flex w-full flex-col items-center gap-2"
+        className="mt-2 w-full"
       >
-        <div className="mb-4 flex items-center gap-x-2">
-          <Paragraph variant="small/bright">Enter this text below to confirm:</Paragraph>
-          <Paragraph
-            variant="small"
-            className="select-all rounded-md border border-ui-border bg-slate-900 px-2 py-1 font-mono text-bright"
-          >
-            {randomWord}
-          </Paragraph>
-        </div>
-        <div className="flex items-center">
-          <Input
-            type="text"
-            placeholder="Confirmation text"
-            fullWidth
-            value={confirmationText}
-            onChange={(e) => setConfirmationText(e.target.value)}
-            className="rounded-r-none"
-            variant="large"
+        <Fieldset className="w-full">
+          <InputGroup>
+            <Paragraph variant="small/bright">Enter this text below to confirm:</Paragraph>
+            <Paragraph
+              variant="small"
+              className="select-all rounded-md border border-grid-bright bg-charcoal-900 px-2 py-1 font-mono"
+            >
+              {randomWord}
+            </Paragraph>
+            <Input
+              type="text"
+              placeholder="Confirmation text"
+              fullWidth
+              value={confirmationText}
+              onChange={(e) => setConfirmationText(e.target.value)}
+            />
+          </InputGroup>
+          <FormButtons
+            confirmButton={
+              <Button
+                type="submit"
+                variant={"primary/small"}
+                LeadingIcon={isSubmitting ? Spinner : undefined}
+                disabled={confirmationText !== randomWord}
+              >
+                Regenerate
+              </Button>
+            }
+            cancelButton={<Button variant={"tertiary/small"}>Cancel</Button>}
           />
-          <Button
-            variant="primary/large"
-            disabled={confirmationText !== randomWord}
-            className="rounded-l-none"
-          >
-            {isSubmitting ? <Spinner color="white" /> : <>Regenerate</>}
-          </Button>
-        </div>
+        </Fieldset>
       </fetcher.Form>
     </div>
   );
diff --git a/apps/webapp/app/components/events/EventsFilters.tsx b/apps/webapp/app/components/events/EventsFilters.tsx
index f2bf2ff12..cdbeb7ee0 100644
--- a/apps/webapp/app/components/events/EventsFilters.tsx
+++ b/apps/webapp/app/components/events/EventsFilters.tsx
@@ -96,7 +96,7 @@ export function EventsFilters() {
 
       <TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
 
-      <Button variant="tertiary/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
+      <Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
         Clear
       </Button>
     </div>
diff --git a/apps/webapp/app/components/events/EventsTable.tsx b/apps/webapp/app/components/events/EventsTable.tsx
index ad62c7f5d..c80de1d96 100644
--- a/apps/webapp/app/components/events/EventsTable.tsx
+++ b/apps/webapp/app/components/events/EventsTable.tsx
@@ -101,9 +101,9 @@ export function EventsTable({
                 </TableCell>
                 <TableCell to={path}>
                   {event.isTest ? (
-                    <CheckIcon className="h-4 w-4 text-slate-400" />
+                    <CheckIcon className="h-4 w-4 text-charcoal-400" />
                   ) : (
-                    <StopIcon className="h-4 w-4 text-slate-850" />
+                    <StopIcon className="h-4 w-4 text-charcoal-850" />
                   )}
                 </TableCell>
                 <TableCell to={path}>{event.runs}</TableCell>
@@ -115,9 +115,9 @@ export function EventsTable({
         {isLoading && (
           <TableBlankRow
             colSpan={8}
-            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-slate-900/90"
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-charcoal-900/90"
           >
-            <Spinner /> <span className="text-dimmed">Loading…</span>
+            <Spinner /> <span className="text-text-dimmed">Loading…</span>
           </TableBlankRow>
         )}
       </TableBody>
diff --git a/apps/webapp/app/components/frameworks/FrameworkComingSoon.tsx b/apps/webapp/app/components/frameworks/FrameworkComingSoon.tsx
index da30882e4..5dbc99fd6 100644
--- a/apps/webapp/app/components/frameworks/FrameworkComingSoon.tsx
+++ b/apps/webapp/app/components/frameworks/FrameworkComingSoon.tsx
@@ -36,18 +36,18 @@ export function FrameworkComingSoon({
           Choose a different framework
         </LinkButton>
       </div>
-      <Paragraph spacing className="border-b border-slate-800 pb-4">
+      <Paragraph spacing className="border-b border-charcoal-800 pb-4">
         We're working hard to bring support for {frameworkName} in Trigger.dev. Follow along with
         the GitHub issue or contribute and help us bring it to Trigger.dev faster.
       </Paragraph>
       <a
         href={githubIssueUrl}
         target="_blank"
-        className="group mt-4 block max-w-sm rounded-md bg-bright px-10 py-8 transition hover:bg-slate-100"
+        className="bg-bright group mt-4 block max-w-sm rounded-md px-10 py-8 transition hover:bg-charcoal-100"
       >
         <Paragraph spacing>triggerdotdev/trigger.dev</Paragraph>
         <h2 className="text-2xl font-semibold text-black">
-          <span className="mr-1 font-normal text-dimmed">#{githubIssueNumber}</span>Framework:
+          <span className="mr-1 font-normal text-text-dimmed">#{githubIssueNumber}</span>Framework:
           support for {frameworkName}
         </h2>
         <div className="mt-4 flex items-center gap-1.5">
@@ -55,7 +55,7 @@ export function FrameworkComingSoon({
           <Paragraph variant="small">View on GitHub</Paragraph>
           <NamedIcon
             name="arrow-right"
-            className="h-4 w-4 text-dimmed transition group-hover:translate-x-1"
+            className="h-4 w-4 text-text-dimmed transition group-hover:translate-x-1"
           />
         </div>
       </a>
diff --git a/apps/webapp/app/components/frameworks/FrameworkSelector.tsx b/apps/webapp/app/components/frameworks/FrameworkSelector.tsx
index 993a0bc64..b81c567e8 100644
--- a/apps/webapp/app/components/frameworks/FrameworkSelector.tsx
+++ b/apps/webapp/app/components/frameworks/FrameworkSelector.tsx
@@ -89,7 +89,7 @@ function FrameworkLink({ children, to, supported = false }: FrameworkLinkProps)
     <Link
       to={to}
       className={cn(
-        "flex h-28 w-full items-center justify-center rounded-md border border-slate-750 px-8 py-4 transition hover:bg-slate-850",
+        "flex h-28 w-full items-center justify-center rounded-md border border-charcoal-750 px-8 py-4 transition hover:bg-charcoal-850",
         !supported && "border opacity-30 grayscale transition hover:opacity-100 hover:grayscale-0"
       )}
     >
diff --git a/apps/webapp/app/components/helpContent/HelpContentText.tsx b/apps/webapp/app/components/helpContent/HelpContentText.tsx
index 78d4807f5..e16e45969 100644
--- a/apps/webapp/app/components/helpContent/HelpContentText.tsx
+++ b/apps/webapp/app/components/helpContent/HelpContentText.tsx
@@ -21,6 +21,7 @@ import selectExample from "./select-example.png";
 import { StepContentContainer } from "../StepContentContainer";
 import { TriggerDevCommand } from "../SetupCommands";
 import { IntegrationIcon } from "~/assets/icons/IntegrationIcon";
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 
 export function HowToRunYourJob() {
   const organization = useOrganization();
@@ -41,7 +42,7 @@ export function HowToRunYourJob() {
           to={jobTestPath(organization, project, job)}
           variant={"primary/small"}
           LeadingIcon={"beaker"}
-          leadingIconClassName="text-bright"
+          leadingIconClassName="text-text-bright"
         >
           Test
         </LinkButton>
@@ -55,9 +56,9 @@ export function HowToRunYourJob() {
 
         <LinkButton
           to="https://trigger.dev/docs/documentation/guides/running-jobs"
-          variant={"primary/small"}
-          LeadingIcon={"docs"}
-          leadingIconClassName="text-bright"
+          variant={"tertiary/small"}
+          LeadingIcon={BookOpenIcon}
+          leadingIconClassName="text-text-bright"
         >
           How to run a Job
         </LinkButton>
diff --git a/apps/webapp/app/components/integrations/ConnectToIntegrationSheet.tsx b/apps/webapp/app/components/integrations/ConnectToIntegrationSheet.tsx
index d5a121342..37c80df5e 100644
--- a/apps/webapp/app/components/integrations/ConnectToIntegrationSheet.tsx
+++ b/apps/webapp/app/components/integrations/ConnectToIntegrationSheet.tsx
@@ -50,16 +50,16 @@ export function ConnectToIntegrationSheet({
           </div>
           <LinkButton
             to={apiReferencePath(integration.identifier)}
-            variant="secondary/small"
+            variant="tertiary/small"
             TrailingIcon="arrow-up-right"
-            trailingIconClassName="h-4 w-4 text-slate-400"
+            trailingIconClassName="h-4 w-4 text-charcoal-400"
             target="_blank"
           >
             View examples
           </LinkButton>
           <LinkButton
             to={docsIntegrationPath(integration.identifier)}
-            variant="secondary/small"
+            variant="tertiary/small"
             LeadingIcon="docs"
             target="_blank"
           >
diff --git a/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx b/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx
index 98ee5ffdc..a6757a6db 100644
--- a/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx
+++ b/apps/webapp/app/components/integrations/ConnectToOAuthForm.tsx
@@ -179,7 +179,7 @@ export function ConnectToOAuthForm({
                 </fieldset> */}
             <div className="mb-2 mt-4 flex items-center justify-between">
               <Header3>Select {integration.name} scopes</Header3>
-              <Paragraph variant="small" className="text-slate-500">
+              <Paragraph variant="small" className="text-charcoal-500">
                 {simplur`${selectedScopes.size} scope[|s] selected`}
               </Paragraph>
             </div>
@@ -232,7 +232,7 @@ export function ConnectToOAuthForm({
         )}
       </Fieldset>
 
-      <div className="absolute bottom-0 left-0 flex w-full items-center justify-end gap-x-4 rounded-b-md border-t border-slate-800 bg-midnight-900 p-4">
+      <div className="absolute bottom-0 left-0 flex w-full items-center justify-end gap-x-4 rounded-b-md border-t border-charcoal-800 bg-background-dimmed p-4">
         <FormError>{scopes.error}</FormError>
         <Button
           type="submit"
@@ -241,7 +241,7 @@ export function ConnectToOAuthForm({
           variant="primary/medium"
           LeadingIcon={integration.icon ?? integration.identifier}
         >
-          Connect to {integration.name}
+          {`Connect to ${integration.name}`}
         </Button>
       </div>
     </fetcher.Form>
diff --git a/apps/webapp/app/components/integrations/CustomHelp.tsx b/apps/webapp/app/components/integrations/CustomHelp.tsx
index 5b555eeb3..d47602371 100644
--- a/apps/webapp/app/components/integrations/CustomHelp.tsx
+++ b/apps/webapp/app/components/integrations/CustomHelp.tsx
@@ -41,14 +41,14 @@ export function CustomHelp({ api }: { api: Api }) {
             modified to suit your use-case.
           </Paragraph>
           {api.examples.length > 1 && (
-            <div className=" flex w-full flex-row gap-4 overflow-x-scroll	scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+            <div className=" flex w-full flex-row gap-4 overflow-x-scroll	scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
               {api.examples?.map((example, index) => (
                 <button
                   onClick={() => changeCodeExample(index)}
                   key={example.codeUrl}
                   className={cn(
                     "w-64 min-w-[16rem] p-2 transition-colors duration-300 sm:w-full sm:rounded",
-                    "border-px focus:border-px cursor-pointer border border-slate-900 bg-slate-900 text-slate-300 transition duration-300  hover:bg-slate-800 focus:border focus:border-indigo-600"
+                    "border-px focus:border-px cursor-pointer border border-charcoal-900 bg-charcoal-900 text-charcoal-300 transition duration-300  hover:bg-charcoal-800 focus:border focus:border-indigo-600"
                   )}
                 >
                   {example.title}
diff --git a/apps/webapp/app/components/integrations/IntegrationWithMissingFieldSheet.tsx b/apps/webapp/app/components/integrations/IntegrationWithMissingFieldSheet.tsx
index 4dfb3431f..44b105104 100644
--- a/apps/webapp/app/components/integrations/IntegrationWithMissingFieldSheet.tsx
+++ b/apps/webapp/app/components/integrations/IntegrationWithMissingFieldSheet.tsx
@@ -37,7 +37,7 @@ export function IntegrationWithMissingFieldSheet({
           </div>
           <LinkButton
             to={docsIntegrationPath(integration.identifier)}
-            variant="secondary/small"
+            variant="tertiary/small"
             LeadingIcon="docs"
             target="_blank"
           >
diff --git a/apps/webapp/app/components/integrations/SelectOAuthMethod.tsx b/apps/webapp/app/components/integrations/SelectOAuthMethod.tsx
index 60ef7420d..127031e51 100644
--- a/apps/webapp/app/components/integrations/SelectOAuthMethod.tsx
+++ b/apps/webapp/app/components/integrations/SelectOAuthMethod.tsx
@@ -8,6 +8,7 @@ import { Paragraph } from "../primitives/Paragraph";
 import { Client } from "~/presenters/IntegrationsPresenter.server";
 import { UpdateOAuthForm } from "./UpdateOAuthForm";
 import { LinkButton } from "../primitives/Buttons";
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 
 export function SelectOAuthMethod({
   integration,
@@ -114,8 +115,8 @@ export function SelectOAuthMethod({
               We support external authentication providers through Auth Resolvers. Read the docs to
               learn more:{" "}
               <LinkButton
-                variant="secondary/small"
-                LeadingIcon={"docs"}
+                variant={"tertiary/small"}
+                LeadingIcon={BookOpenIcon}
                 TrailingIcon={"external-link"}
                 to="https://trigger.dev/docs/documentation/guides/using-integrations-byo-auth"
                 target="_blank"
diff --git a/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx b/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx
index e2ff1f596..06e8d79b0 100644
--- a/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx
+++ b/apps/webapp/app/components/integrations/UpdateOAuthForm.tsx
@@ -168,7 +168,7 @@ export function UpdateOAuthForm({
                 </fieldset> */}
             <div className="mb-2 mt-4 flex items-center justify-between">
               <Header3>Select {integration.name} scopes</Header3>
-              <Paragraph variant="small" className="text-slate-500">
+              <Paragraph variant="small" className="text-charcoal-500">
                 {simplur`${selectedScopes.size} scope[|s] selected`}
               </Paragraph>
             </div>
@@ -221,7 +221,7 @@ export function UpdateOAuthForm({
         )}
       </Fieldset>
 
-      <div className="absolute bottom-0 left-0 flex w-full items-center justify-end gap-x-4 rounded-b-md border-t border-slate-800 bg-midnight-900 p-4">
+      <div className="absolute bottom-0 left-0 flex w-full items-center justify-end gap-x-4 rounded-b-md border-t border-charcoal-800 bg-background-dimmed p-4">
         <FormError>{scopes.error}</FormError>
         <Button
           type="submit"
@@ -230,7 +230,7 @@ export function UpdateOAuthForm({
           variant="primary/medium"
           LeadingIcon={integration.identifier}
         >
-          Connect to {integration.name}
+          {`Connect to ${integration.name}`}
         </Button>
       </div>
     </fetcher.Form>
diff --git a/apps/webapp/app/components/jobs/DeleteJobModalContent.tsx b/apps/webapp/app/components/jobs/DeleteJobModalContent.tsx
index 47692ad15..c53a85088 100644
--- a/apps/webapp/app/components/jobs/DeleteJobModalContent.tsx
+++ b/apps/webapp/app/components/jobs/DeleteJobModalContent.tsx
@@ -74,7 +74,7 @@ export function DeleteJobDialogContent({
       <Header2
         className={cn(
           canDelete ? "border-rose-500 bg-rose-500/10" : "border-amber-500 bg-amber-500/10",
-          "rounded border px-3.5 py-2 text-center text-bright"
+          "rounded border px-3.5 py-2 text-center text-text-bright"
         )}
       >
         {canDelete
@@ -84,8 +84,9 @@ export function DeleteJobDialogContent({
       <Paragraph variant="small" className="px-6 text-center">
         {canDelete ? (
           <>
-            This will permanently delete the Job <span className="strong text-bright">{title}</span>
-            . This includes the deletion of all Run history. This cannot be undone.
+            This will permanently delete the Job{" "}
+            <span className="strong text-text-bright">{title}</span>. This includes the deletion of
+            all Run history. This cannot be undone.
           </>
         ) : (
           <>
@@ -111,7 +112,7 @@ export function DeleteJobDialogContent({
               <>
                 <NamedIcon
                   name="trash-can"
-                  className="mr-1.5 h-4 w-4 text-bright transition group-hover:text-bright"
+                  className="mr-1.5 h-4 w-4 text-text-bright transition group-hover:text-text-bright"
                 />
                 Delete this Job
               </>
@@ -123,7 +124,7 @@ export function DeleteJobDialogContent({
           <>
             <NamedIcon
               name="trash-can"
-              className="mr-1.5 h-4 w-4 text-bright transition group-hover:text-bright"
+              className="mr-1.5 h-4 w-4 text-text-bright transition group-hover:text-text-bright"
             />
             Delete this Job
           </>
diff --git a/apps/webapp/app/components/jobs/JobSkeleton.tsx b/apps/webapp/app/components/jobs/JobSkeleton.tsx
index fd8b5c07c..3b9d48d03 100644
--- a/apps/webapp/app/components/jobs/JobSkeleton.tsx
+++ b/apps/webapp/app/components/jobs/JobSkeleton.tsx
@@ -1,17 +1,17 @@
 export function JobSkeleton() {
   return (
-    <div className={"flex w-full gap-x-4 bg-midnight-850 p-4 pr-5 "}>
-      <div className="aspect-square h-6 w-6 rounded border border-slate-800 bg-slate-900 p-1.5 md:h-10 md:w-10 lg:h-12 lg:w-12" />
+    <div className={"flex w-full gap-x-4 bg-background-bright p-4 pr-5 "}>
+      <div className="aspect-square h-6 w-6 rounded border border-charcoal-800 bg-charcoal-900 p-1.5 md:h-10 md:w-10 lg:h-12 lg:w-12" />
       <div className="flex w-full">
         <div className="flex w-full flex-col justify-between gap-y-1">
           <div className="flex items-baseline justify-between gap-x-3 pr-3 md:justify-start md:pr-0">
-            <div className="h-5 w-1/4 rounded border border-slate-800 bg-slate-900" />
+            <div className="h-5 w-1/4 rounded border border-charcoal-800 bg-charcoal-900" />
           </div>
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-            <div className="h-2.5 w-1/2 rounded border border-slate-800 bg-slate-900" />
+            <div className="h-2.5 w-1/2 rounded border border-charcoal-800 bg-charcoal-900" />
           </div>
           <div className="flex flex-wrap gap-x-4 gap-y-1">
-            <div className="h-1 w-1/5 rounded border border-slate-800 bg-slate-900" />
+            <div className="h-1 w-1/5 rounded border border-charcoal-800 bg-charcoal-900" />
           </div>
         </div>
       </div>
diff --git a/apps/webapp/app/components/layout/AppLayout.tsx b/apps/webapp/app/components/layout/AppLayout.tsx
index b9e72d1aa..73e7d7920 100644
--- a/apps/webapp/app/components/layout/AppLayout.tsx
+++ b/apps/webapp/app/components/layout/AppLayout.tsx
@@ -1,20 +1,28 @@
+import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { cn } from "~/utils/cn";
+import { useShowUpgradePrompt } from "../billing/UpgradePrompt";
 
 /** This container is used to surround the entire app, it correctly places the nav bar */
 export function AppContainer({ children }: { children: React.ReactNode }) {
   return <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden")}>{children}</div>;
 }
 
+export function MainBody({ children }: { children: React.ReactNode }) {
+  return <div className={cn("grid grid-rows-1 overflow-hidden")}>{children}</div>;
+}
+
 /** This container should be placed around the content on a page */
-export function PageContainer({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
+export function PageContainer({ children }: { children: React.ReactNode }) {
+  const organization = useOptionalOrganization();
+  const showUpgradePrompt = useShowUpgradePrompt(organization);
+
   return (
-    <div className={cn("grid h-full grid-rows-[auto_1fr] overflow-hidden", className)}>
+    <div
+      className={cn(
+        "grid overflow-hidden",
+        showUpgradePrompt.shouldShow ? "grid-rows-[5rem_1fr]" : "grid-rows-[2.5rem_1fr]"
+      )}
+    >
       {children}
     </div>
   );
@@ -23,16 +31,19 @@ export function PageContainer({
 export function PageBody({
   children,
   scrollable = true,
+  className,
 }: {
   children: React.ReactNode;
   scrollable?: boolean;
+  className?: string;
 }) {
   return (
     <div
       className={cn(
         scrollable
-          ? "overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
-          : "overflow-hidden"
+          ? "overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          : "overflow-hidden",
+        className
       )}
     >
       {children}
@@ -40,10 +51,6 @@ export function PageBody({
   );
 }
 
-export function PageBodyPadding({ children }: { children: React.ReactNode }) {
-  return <div className="p-4">{children}</div>;
-}
-
 export function MainCenteredContainer({
   children,
   className,
@@ -52,7 +59,7 @@ export function MainCenteredContainer({
   className?: string;
 }) {
   return (
-    <div className="h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+    <div className="h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
       <div className={cn("mx-auto mt-[25vh] max-w-xs overflow-y-auto", className)}>{children}</div>
     </div>
   );
diff --git a/apps/webapp/app/components/navigation/AccountSideMenu.tsx b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
index 8decbf403..2f96629e2 100644
--- a/apps/webapp/app/components/navigation/AccountSideMenu.tsx
+++ b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
@@ -16,15 +16,13 @@ export function AccountSideMenu({ user }: { user: User }) {
   return (
     <div
       className={cn(
-        "flex h-full flex-col gap-y-8 overflow-hidden border-r border-ui-border transition"
+        "flex h-full flex-col gap-y-8 overflow-hidden border-r border-grid-bright bg-background-bright transition"
       )}
     >
       <div className="flex h-full flex-col">
-        <div
-          className={cn("flex items-center justify-between border-b bg-background p-px transition")}
-        >
+        <div className={cn("flex items-center justify-between border-b p-px transition")}>
           <LinkButton
-            variant="tertiary/medium"
+            variant="minimal/medium"
             LeadingIcon={ArrowLeftIcon}
             to={rootPath()}
             fullWidth
@@ -33,7 +31,7 @@ export function AccountSideMenu({ user }: { user: User }) {
             Account
           </LinkButton>
         </div>
-        <div className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+        <div className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="mb-6 flex flex-col gap-1 px-1">
             <SideMenuHeader title={user.name ?? user.displayName ?? user.email} />
 
@@ -58,7 +56,7 @@ export function AccountSideMenu({ user }: { user: User }) {
             </div>
           )}
         </div>
-        <div className="flex flex-col gap-1 border-t border-border p-1">
+        <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
           <SideMenuItem
             name="Join our Discord"
             icon={DiscordIcon}
diff --git a/apps/webapp/app/components/navigation/Breadcrumb.tsx b/apps/webapp/app/components/navigation/Breadcrumb.tsx
deleted file mode 100644
index 6cad225f0..000000000
--- a/apps/webapp/app/components/navigation/Breadcrumb.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { UIMatch, useMatches } from "@remix-run/react";
-import { Fragment, ReactNode } from "react";
-import { BreadcrumbIcon } from "../primitives/BreadcrumbIcon";
-import { Handle } from "~/utils/handle";
-import { LinkButton } from "../primitives/Buttons";
-
-export type BreadcrumbItem = (match: UIMatch, allMatches: UIMatch[]) => ReactNode;
-
-export function Breadcrumb() {
-  const matches = useMatches() as UIMatch<unknown, Handle>[];
-
-  return (
-    <div className="flex items-center px-1">
-      {matches
-        .filter((b) => b.handle && b.handle.breadcrumb)
-        .map((match, index) => {
-          const breadcrumb = match.handle.breadcrumb as BreadcrumbItem;
-
-          return (
-            <Fragment key={match.id}>
-              {index !== 0 && <BreadcrumbIcon />} {breadcrumb(match, matches)}
-            </Fragment>
-          );
-        })}
-    </div>
-  );
-}
-
-export function BreadcrumbLink({ title, to }: { title: string; to: string }) {
-  return (
-    <LinkButton to={to} variant="tertiary/small">
-      {title}
-    </LinkButton>
-  );
-}
diff --git a/apps/webapp/app/components/navigation/PageNavigationIndicator.tsx b/apps/webapp/app/components/navigation/PageNavigationIndicator.tsx
deleted file mode 100644
index 7a84c3bcb..000000000
--- a/apps/webapp/app/components/navigation/PageNavigationIndicator.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useNavigation } from "@remix-run/react";
-import { Spinner } from "../primitives/Spinner";
-import { cn } from "~/utils/cn";
-
-export function PageNavigationIndicator({ className }: { className?: string }) {
-  const navigation = useNavigation();
-  if (navigation.state === "loading") {
-    return <Spinner color="blue" className={cn("h-4 w-4", className)} />;
-  }
-}
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 8d92fd0c2..e4ae2084c 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -110,21 +110,21 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
   return (
     <div
       className={cn(
-        "flex h-full flex-col gap-y-8 overflow-hidden border-r border-ui-border transition"
+        "flex h-full flex-col gap-y-8 overflow-hidden border-r border-grid-bright bg-background-bright transition"
       )}
     >
       <div className="flex h-full flex-col">
         <div
           className={cn(
-            "flex items-center justify-between border-b bg-background px-1 py-1 transition",
-            showHeaderDivider ? " border-border" : "border-transparent"
+            "flex items-center justify-between px-1 py-1 transition",
+            showHeaderDivider ? " border-grid-bright" : "border-transparent"
           )}
         >
           <ProjectSelector organizations={organizations} project={project} />
           <UserMenu user={user} />
         </div>
         <div
-          className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+          className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
           ref={borderRef}
         >
           <div className="mb-6 flex flex-col gap-1 px-1">
@@ -182,7 +182,7 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
             />
           </div>
         </div>
-        <div className="flex flex-col gap-1 border-t border-border p-1">
+        <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
           {currentPlan?.subscription?.isPaying === true && (
             <Dialog>
               <DialogTrigger asChild>
@@ -206,13 +206,13 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
                       support with the Trigger.dev team.
                     </Paragraph>
                   </div>
-                  <hr className="border-slate-800" />
+                  <hr className="border-charcoal-800" />
                   <div>
                     <StepNumber stepNumber="1" title="Create a new Slack channel" />
                     <StepContentContainer>
                       <Paragraph>
                         In your Slack app, create a new channel from the main menu by going to File{" "}
-                        <ArrowRightIcon className="inline h-4 w-4 text-dimmed" /> New Channel
+                        <ArrowRightIcon className="inline h-4 w-4 text-text-dimmed" /> New Channel
                       </Paragraph>
                     </StepContentContainer>
                     <StepNumber stepNumber="2" title="Setup your channel" />
@@ -312,7 +312,7 @@ function ProjectSelector({
         <span className="truncate">{project.name ?? "Select a project"}</span>
       </PopoverArrowTrigger>
       <PopoverContent
-        className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+        className="min-w-[16rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         align="start"
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >
@@ -328,7 +328,7 @@ function ProjectSelector({
                       key={p.id}
                       to={projectPath(organization, p)}
                       title={
-                        <div className="flex w-full items-center justify-between text-bright">
+                        <div className="flex w-full items-center justify-between text-text-bright">
                           <span className="grow truncate text-left">{p.name}</span>
                           <MenuCount count={p.jobCount} />
                         </div>
@@ -348,7 +348,7 @@ function ProjectSelector({
             </div>
           </Fragment>
         ))}
-        <div className="border-t border-slate-800 p-1">
+        <div className="border-t border-charcoal-800 p-1">
           <PopoverMenuItem to={newOrganizationPath()} title="New Organization" icon="plus" />
         </div>
       </PopoverContent>
@@ -367,16 +367,16 @@ function UserMenu({ user }: { user: SideMenuUser }) {
 
   return (
     <Popover onOpenChange={(open) => setProfileMenuOpen(open)}>
-      <PopoverCustomTrigger isOpen={isProfileMenuOpen} className="p-1">
+      <PopoverCustomTrigger isOpen={isProfileMenuOpen} className="p-1 hover:bg-transparent">
         <UserProfilePhoto
           className={cn(
-            "h-5 w-5 text-slate-600",
+            "h-5 w-5 rounded-full border border-transparent text-charcoal-600 transition hover:border-charcoal-600",
             user.isImpersonating && "rounded-full border border-yellow-500"
           )}
         />
       </PopoverCustomTrigger>
       <PopoverContent
-        className="min-w-[12rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+        className="min-w-[12rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         align="start"
       >
         <Fragment>
diff --git a/apps/webapp/app/components/navigation/SideMenuHeader.tsx b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
index 299aa6b0e..8502ea0e3 100644
--- a/apps/webapp/app/components/navigation/SideMenuHeader.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
@@ -16,17 +16,17 @@ export function SideMenuHeader({ title, children }: { title: string; children?:
     <div className="group flex items-center justify-between pl-1.5">
       <Paragraph
         variant="extra-extra-small/caps"
-        className="cursor-default truncate text-slate-500"
+        className="cursor-default truncate text-charcoal-500"
       >
         {title}
       </Paragraph>
       {children !== undefined ? (
         <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}>
           <PopoverCustomTrigger className="p-1">
-            <EllipsisHorizontalIcon className="h-4 w-4 text-slate-500 transition group-hover:text-bright" />
+            <EllipsisHorizontalIcon className="h-4 w-4 text-charcoal-500 transition group-hover:text-text-bright" />
           </PopoverCustomTrigger>
           <PopoverContent
-            className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+            className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
             align="start"
           >
             <div className="flex flex-col gap-1 p-1">{children}</div>
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index 273017a06..41c0f2ee5 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -35,13 +35,13 @@ export function SideMenuItem({
       fullWidth
       textAlignLeft
       LeadingIcon={icon}
-      leadingIconClassName={isActive ? iconColor : "text-dimmed"}
+      leadingIconClassName={isActive ? iconColor : "text-text-dimmed"}
       to={to}
       target={target}
       className={cn(
-        "text-bright group-hover:bg-slate-850",
-        subItem ? "text-dimmed" : "",
-        isActive ? "bg-slate-850 text-bright" : "group-hover:text-bright"
+        "text-text-bright group-hover:bg-charcoal-750",
+        subItem ? "text-text-dimmed" : "",
+        isActive ? "bg-tertiary text-text-bright" : "group-hover:text-text-bright"
       )}
     >
       <div className="flex w-full items-center justify-between">
@@ -69,5 +69,7 @@ export function SideMenuItem({
 }
 
 export function MenuCount({ count }: { count: number | string }) {
-  return <div className="rounded-full bg-slate-900 px-2 py-1 text-xxs text-dimmed">{count}</div>;
+  return (
+    <div className="rounded-full bg-charcoal-900 px-2 py-1 text-xxs text-text-dimmed">{count}</div>
+  );
 }
diff --git a/apps/webapp/app/components/primitives/Alert.tsx b/apps/webapp/app/components/primitives/Alert.tsx
index 15b922fac..bd5a83ab9 100644
--- a/apps/webapp/app/components/primitives/Alert.tsx
+++ b/apps/webapp/app/components/primitives/Alert.tsx
@@ -27,7 +27,7 @@ const AlertOverlay = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in",
+      "fixed inset-0 z-50 bg-background-dimmed/80 backdrop-blur-sm transition-opacity animate-in fade-in",
       className
     )}
     {...props}
@@ -45,7 +45,7 @@ const AlertContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
+        "fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background-dimmed p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
         className
       )}
       {...props}
@@ -85,7 +85,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/apps/webapp/app/components/primitives/Badge.tsx b/apps/webapp/app/components/primitives/Badge.tsx
index c45aad0e6..b8ecd826e 100644
--- a/apps/webapp/app/components/primitives/Badge.tsx
+++ b/apps/webapp/app/components/primitives/Badge.tsx
@@ -3,9 +3,14 @@ import { cn } from "~/utils/cn";
 
 const variants = {
   default:
-    "grid place-items-center rounded-full px-2 h-5 tracking-wider text-xxs bg-slate-700 text-bright uppercase whitespace-nowrap",
+    "grid place-items-center rounded-full px-2 h-5 tracking-wider text-xxs bg-charcoal-750 text-text-bright uppercase whitespace-nowrap",
+  small:
+    "grid place-items-center rounded-full px-[0.4rem] h-4 tracking-wider text-xxs bg-background-dimmed text-text-dimmed uppercase whitespace-nowrap",
   outline:
-    "grid place-items-center rounded-sm px-1 h-5 tracking-wider text-xxs border border-dimmed text-dimmed uppercase whitespace-nowrap",
+    "grid place-items-center rounded-sm px-1.5 h-5 tracking-wider text-xxs border border-dimmed text-text-dimmed uppercase whitespace-nowrap",
+  v3: "grid place-items-center rounded-full px-[0.4rem] h-5 tracking-wider text-xxs bg-charcoal-750 text-primary whitespace-nowrap",
+  "outline-rounded":
+    "grid place-items-center rounded-full px-1.5 h-5 tracking-wider text-xxs border border-blue-500 text-blue-500 uppercase whitespace-nowrap",
 };
 
 type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -15,7 +20,7 @@ type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
 export function Badge({ className, variant = "default", children, ...props }: BadgeProps) {
   return (
     <div className={cn(variants[variant], className)} {...props}>
-      <span className="-mb-0.5">{children}</span>
+      <span>{children}</span>
     </div>
   );
 }
diff --git a/apps/webapp/app/components/primitives/BreadcrumbIcon.tsx b/apps/webapp/app/components/primitives/BreadcrumbIcon.tsx
index c649a2480..b5dfb55ba 100644
--- a/apps/webapp/app/components/primitives/BreadcrumbIcon.tsx
+++ b/apps/webapp/app/components/primitives/BreadcrumbIcon.tsx
@@ -3,7 +3,7 @@ import { cn } from "~/utils/cn";
 export function BreadcrumbIcon({ className }: { className?: string }) {
   return (
     <svg
-      className={cn("text-slate-650", className)}
+      className={cn("text-charcoal-600", className)}
       width="9"
       height="20"
       viewBox="0 0 9 26"
diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index ffc8c0dc5..64f84c336 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -1,160 +1,139 @@
 import { Link, LinkProps, NavLink, NavLinkProps } from "@remix-run/react";
-import React, { ReactComponentElement, forwardRef, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { IconNamesOrString, NamedIcon } from "./NamedIcon";
 import { ShortcutKey } from "./ShortcutKey";
 
+const sizes = {
+  small: {
+    button: "h-6 px-2.5 text-xs",
+    icon: "h-3.5 -mx-1",
+    iconSpacing: "gap-x-2.5",
+    shortcutVariant: "small" as const,
+    shortcut: "ml-2 -mr-1.5 justify-self-center",
+  },
+  medium: {
+    button: "h-8 px-2.5 text-sm",
+    icon: "h-4 -mx-1",
+    iconSpacing: "gap-x-2.5",
+    shortcutVariant: "medium" as const,
+    shortcut: "ml-2 -mr-1.5 rounded justify-self-center",
+  },
+  large: {
+    button: "h-10 px-2 text-sm font-medium",
+    icon: "h-5",
+    iconSpacing: "gap-x-0.5",
+    shortcutVariant: "medium" as const,
+    shortcut: "ml-1.5 -mr-0.5",
+  },
+  "extra-large": {
+    button: "h-12 px-2 text-base font-medium",
+    icon: "h-5",
+    iconSpacing: "gap-x-0.5",
+    shortcutVariant: "medium" as const,
+    shortcut: "ml-1.5 -mr-0.5",
+  },
+};
+
+type Size = keyof typeof sizes;
+
+const theme = {
+  primary: {
+    textColor:
+      "text-charcoal-900 group-hover:text-charcoal-900 transition group-disabled:text-charcoal-900",
+    button:
+      "bg-primary group-hover:bg-apple-200 group-disabled:opacity-50 group-disabled:bg-primary group-disabled:pointer-events-none",
+    shortcut:
+      "border-black/40 text-charcoal-900 group-hover:border-black/60 group-hover:text-charcoal-900",
+  },
+  secondary: {
+    textColor: "text-primary group-hover:text-apple-200 transition group-disabled:text-primary",
+    button:
+      "bg-transparent border border-primary group-hover:border-apple-200 group-hover:bg-apple-950 group-disabled:opacity-30 group-disabled:border-primary group-disabled:bg-transparent group-disabled:pointer-events-none",
+    shortcut:
+      "border-primary/30 text-apple-200 group-hover:text-text-bright/80 group-hover:border-dimmed/60",
+  },
+  tertiary: {
+    textColor: "text-text-bright transition group-disabled:text-text-dimmed/80",
+    button:
+      "bg-tertiary group-hover:bg-charcoal-600 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none",
+    shortcut:
+      "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed",
+  },
+  minimal: {
+    textColor:
+      "text-text-dimmed group-hover:text-text-bright transition group-disabled:text-text-dimmed/80",
+    button:
+      "bg-transparent group-hover:bg-tertiary disabled:opacity-50 group-disabled:bg-transparent group-disabled:pointer-events-none",
+    shortcut:
+      "border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60",
+  },
+  danger: {
+    textColor:
+      "text-text-bright group-hover:text-white transition group-disabled:text-text-bright/80",
+    button:
+      "bg-error group-hover:bg-rose-500 disabled:opacity-50 group-disabled:bg-error group-disabled:pointer-events-none",
+    shortcut: "border-text-bright text-text-bright group-hover:border-bright/60",
+  },
+};
+
+type Theme = keyof typeof theme;
+
+function createVariant(sizeName: Size, themeName: Theme) {
+  return {
+    textColor: theme[themeName].textColor,
+    button: cn(sizes[sizeName].button, theme[themeName].button),
+    icon: sizes[sizeName].icon,
+    iconSpacing: sizes[sizeName].iconSpacing,
+    shortcutVariant: sizes[sizeName].shortcutVariant,
+    shortcut: cn(sizes[sizeName].shortcut, theme[themeName].shortcut),
+  };
+}
+
 const variant = {
-  "primary/small": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-bright/80 px-1",
-    button:
-      "h-6 px-[5px] text-xs bg-indigo-600 group-hover:bg-indigo-500/90 group-disabled:opacity-50 group-disabled:pointer-events-none",
-    icon: "h-3.5",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "small" as const,
-    shortcut:
-      "ml-1 -mr-0.5 border-bright/40 text-bright group-hover:border-bright/60 justify-self-center",
-  },
-  "secondary/small": {
-    textColor: "text-dimmed group-hover:text-bright transition group-disabled:text-dimmed/80 px-1",
-    button:
-      "h-6 px-[5px] text-xs bg-slate-800 group-hover:bg-slate-700/70 disabled:opacity-50 group-disabled:pointer-events-none",
-    icon: "h-3.5",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "small" as const,
-    shortcut:
-      "ml-1 -mr-0.5 border-dimmed/40 text-dimmed group-hover:text-bright/80 group-hover:border-dimmed/60",
-  },
-  "tertiary/small": {
-    textColor: "text-dimmed group-hover:text-bright transition group-disabled:text-dimmed/80 px-1",
-    button:
-      "h-6 px-[5px] text-xs bg-transparent group-hover:bg-slate-850 disabled:opacity-50 group-disabled:pointer-events-none",
-    icon: "h-3.5",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "small" as const,
-    shortcut:
-      "ml-1 -mr-0.5 border-dimmed/40 text-dimmed group-hover:text-bright/80 group-hover:border-dimmed/60",
-  },
-  "danger/small": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-bright/80 px-1",
-    button:
-      "h-6 px-[5px] text-xs bg-rose-600 group-hover:bg-rose-500 disabled:opacity-50 group-disabled:pointer-events-none",
-    icon: "h-3.5",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "small" as const,
-    shortcut: "ml-1 -mr-0.5 border-bright/40 text-bright group-hover:border-bright/60",
-  },
-  "primary/medium": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-bright/80 px-1",
-    button: "h-8 px-2 text-sm bg-indigo-600 group-hover:bg-indigo-500/90 disabled:opacity-50",
-    icon: "h-4",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "medium" as const,
-    shortcut: "ml-1.5 -mr-0.5 border-bright/40 text-bright group-hover:border-bright/60",
-  },
-  "secondary/medium": {
-    textColor: "text-dimmed group-hover:text-bright transition group-disabled:text-dimmed/80 px-1",
-    button: "h-8 px-2 text-sm bg-slate-800 group-hover:bg-slate-700/70 disabled:opacity-50",
-    icon: "h-4",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "medium" as const,
-    shortcut:
-      "ml-1.5 -mr-0.5 border-dimmed/40 text-dimmed group-hover:border-dimmed group-hover:text-bright",
-  },
-  "tertiary/medium": {
-    textColor: "text-dimmed group-hover:text-bright transition group-disabled:text-dimmed/80 px-1",
-    button: "h-8 px-2 text-sm bg-transparent group-hover:bg-slate-850 disabled:opacity-50",
-    icon: "h-4",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "medium" as const,
-    shortcut:
-      "ml-1.5 -mr-0.5 border-bright/40 text-dimmed group-hover:border-bright/60 group-hover:text-bright",
-  },
-  "danger/medium": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-bright/80 px-1",
-    button: "h-8 px-2 text-sm bg-rose-600 group-hover:bg-rose-500 disabled:opacity-50",
-    icon: "h-4",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "medium" as const,
-    shortcut: "ml-1.5 -mr-0.5 border-bright/40 text-bright group-hover:border-bright/60",
-  },
-  "primary/large": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-dimmed/80 px-1",
-    button:
-      "h-10 px-2 text-sm font-medium bg-indigo-600 group-hover:bg-indigo-500/90 group-disabled:opacity-50 group-disabled:group-hover:bg-indigo-600",
-    icon: "h-5",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: undefined,
-    shortcut: undefined,
-  },
-  "secondary/large": {
-    textColor: "text-bright group-disabled:text-dimmed px-1",
-    button:
-      "h-10 px-2 text-sm transition font-medium bg-slate-800 group-hover:bg-slate-700/70 group-disabled:opacity-40 group-disabled:group-hover:bg-slate-800",
-    icon: "h-5",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: undefined,
-    shortcut: undefined,
-  },
-  "danger/large": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-bright/50 px-1",
-    button:
-      "h-10 px-2 text-md bg-rose-600 group-hover:bg-rose-500 group-disabled:opacity-50 group-disabled:group-hover:bg-rose-600",
-    icon: "h-5",
-    iconSpacing: "gap-x-0.5",
-    shortcutVariant: "medium" as const,
-    shortcut: "ml-1.5 -mr-0.5 border-bright/40 text-bright group-hover:border-bright/60",
-  },
-  "primary/extra-large": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-dimmed/80",
-    button:
-      "h-12 px-2 text-md font-medium bg-indigo-600 group-hover:bg-indigo-500/90 disabled:opacity-50",
-    icon: "h-5",
-    iconSpacing: undefined,
-    shortcutVariant: undefined,
-    shortcut: undefined,
-  },
-  "secondary/extra-large": {
-    textColor: "text-dimmed",
-    button:
-      "h-12 px-2 text-md text-dimmed group-hover:text-bright transition font-medium bg-slate-800 group-hover:bg-slate-700/70 disabled:opacity-50",
-    icon: "h-5",
-    iconSpacing: undefined,
-    shortcutVariant: undefined,
-    shortcut: undefined,
-  },
-  "danger/extra-large": {
-    textColor: "text-bright group-hover:text-white transition group-disabled:text-bright/50",
-    button:
-      "h-12 px-2 text-md bg-rose-600 group-hover:bg-rose-500 group-disabled:opacity-50 group-disabled:group-hover:bg-rose-600",
-    icon: "h-5",
-    iconSpacing: undefined,
-    shortcutVariant: "medium" as const,
-    shortcut: "ml-1.5 -mr-0.5 border-bright/40 text-bright group-hover:border-bright/60",
-  },
+  "primary/small": createVariant("small", "primary"),
+  "primary/medium": createVariant("medium", "primary"),
+  "primary/large": createVariant("large", "primary"),
+  "primary/extra-large": createVariant("extra-large", "primary"),
+  "secondary/small": createVariant("small", "secondary"),
+  "secondary/medium": createVariant("medium", "secondary"),
+  "secondary/large": createVariant("large", "secondary"),
+  "secondary/extra-large": createVariant("extra-large", "secondary"),
+  "tertiary/small": createVariant("small", "tertiary"),
+  "tertiary/medium": createVariant("medium", "tertiary"),
+  "tertiary/large": createVariant("large", "tertiary"),
+  "tertiary/extra-large": createVariant("extra-large", "tertiary"),
+  "minimal/small": createVariant("small", "minimal"),
+  "minimal/medium": createVariant("medium", "minimal"),
+  "minimal/large": createVariant("large", "minimal"),
+  "minimal/extra-large": createVariant("extra-large", "minimal"),
+  "danger/small": createVariant("small", "danger"),
+  "danger/medium": createVariant("medium", "danger"),
+  "danger/large": createVariant("large", "danger"),
+  "danger/extra-large": createVariant("extra-large", "danger"),
   "menu-item": {
-    textColor: "text-bright px-1",
+    textColor: "text-text-bright px-1",
     button:
-      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-slate-800 transition",
+      "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-charcoal-800 transition",
     icon: "h-5",
     iconSpacing: "gap-x-0.5",
     shortcutVariant: undefined,
     shortcut: undefined,
   },
   "small-menu-item": {
-    textColor: "text-bright",
+    textColor: "text-text-bright",
     button:
-      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-dimmed bg-transparent group-hover:bg-slate-850 transition",
+      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-850 transition",
     icon: "h-4",
     iconSpacing: "gap-x-1.5",
     shortcutVariant: undefined,
     shortcut: undefined,
   },
   "small-menu-sub-item": {
-    textColor: "text-dimmed",
+    textColor: "text-text-dimmed",
     button:
-      "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-dimmed bg-transparent group-hover:bg-slate-850 transition",
+      "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-850 transition",
     icon: undefined,
     iconSpacing: undefined,
     shortcutVariant: undefined,
diff --git a/apps/webapp/app/components/primitives/Callout.tsx b/apps/webapp/app/components/primitives/Callout.tsx
index 6c15367b0..8bc5461c8 100644
--- a/apps/webapp/app/components/primitives/Callout.tsx
+++ b/apps/webapp/app/components/primitives/Callout.tsx
@@ -18,52 +18,52 @@ import { Spinner } from "./Spinner";
 
 export const variantClasses = {
   info: {
-    className: "border-slate-700 bg-slate-800",
-    icon: <InformationCircleIcon className="h-5 w-5 shrink-0 text-dimmed" />,
-    textColor: "text-bright",
-    linkClassName: "transition hover:bg-slate-750",
+    className: "border-charcoal-700 bg-charcoal-800",
+    icon: <InformationCircleIcon className="h-5 w-5 shrink-0 text-text-dimmed" />,
+    textColor: "text-text-bright",
+    linkClassName: "transition hover:bg-charcoal-750",
   },
   warning: {
-    className: "border-yellow-400/20 bg-yellow-400/30",
-    icon: <ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-yellow-400" />,
+    className: "border-warning/20 bg-warning/10",
+    icon: <ExclamationTriangleIcon className="h-5 w-5 shrink-0 text-warning" />,
     textColor: "text-yellow-200",
-    linkClassName: "transition hover:bg-yellow-400/40",
+    linkClassName: "transition hover:bg-warning/20",
   },
   error: {
-    className: "border-rose-500/20 bg-rose-500/30",
-    icon: <ExclamationCircleIcon className="h-5 w-5 shrink-0 text-rose-400" />,
+    className: "border-error/20 bg-error/10",
+    icon: <ExclamationCircleIcon className="h-5 w-5 shrink-0 text-error" />,
     textColor: "text-rose-200",
-    linkClassName: "transition hover:bg-rose-500/40",
+    linkClassName: "transition hover:bg-error/20",
   },
   idea: {
-    className: "border-green-400/20 bg-green-400/30",
-    icon: <LightBulbIcon className="h-5 w-5 shrink-0 text-green-400" />,
+    className: "border-success/20 bg-success/10",
+    icon: <LightBulbIcon className="h-5 w-5 shrink-0 text-success" />,
     textColor: "text-green-200",
-    linkClassName: "transition hover:bg-green-400/40",
+    linkClassName: "transition hover:bg-success/20",
   },
   success: {
-    className: "border-green-400/20 bg-green-400/30",
-    icon: <CheckCircleIcon className="h-5 w-5 shrink-0 text-green-400" />,
+    className: "border-success/20 bg-success/10",
+    icon: <CheckCircleIcon className="h-5 w-5 shrink-0 text-success" />,
     textColor: "text-green-200",
-    linkClassName: "transition hover:bg-green-400/40",
+    linkClassName: "transition hover:bg-success/20",
   },
   docs: {
-    className: "border-blue-400/20 bg-blue-400/30",
+    className: "border-blue-400/20 bg-blue-400/10",
     icon: <BookOpenIcon className="mt-0.5 h-5 w-5 shrink-0 text-blue-400" />,
     textColor: "text-blue-200",
-    linkClassName: "transition hover:bg-blue-400/40",
+    linkClassName: "transition hover:bg-blue-400/20",
   },
   pending: {
     className: "border-blue-400/20 bg-blue-800/30",
     icon: <Spinner className="h-5 w-5 shrink-0 " />,
     textColor: "text-blue-300",
-    linkClassName: "transition hover:bg-blue-400/40",
+    linkClassName: "transition hover:bg-blue-400/20",
   },
   pricing: {
-    className: "border-indigo-400/20 bg-indigo-800/30",
-    icon: <ChartBarIcon className="h-5 w-5 shrink-0 text-indigo-500" />,
-    textColor: "text-indigo-200",
-    linkClassName: "transition hover:bg-indigo-400/40",
+    className: "border-charcoal-700 bg-charcoal-800",
+    icon: <ChartBarIcon className="h-5 w-5 shrink-0 text-text-dimmed" />,
+    textColor: "text-text-bright",
+    linkClassName: "transition hover:bg-charcoal-750",
   },
 } as const;
 
@@ -93,13 +93,13 @@ export function Callout({
           href={to}
           target="_blank"
           className={cn(
-            `flex w-full items-center justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
+            `flex w-full items-start justify-between gap-2.5 rounded-md border py-2 pl-2 pr-3 shadow-md backdrop-blur-sm`,
             variantDefinition.className,
             variantDefinition.linkClassName,
             className
           )}
         >
-          <div className={"flex w-full items-center gap-x-2"}>
+          <div className={"flex w-full items-start gap-x-2"}>
             {icon ? icon : variantDefinition.icon}
 
             {typeof children === "string" ? (
@@ -135,7 +135,9 @@ export function Callout({
               children
             )}
           </div>
-          <ChevronRightIcon className={cn("h-5 w-5", variantDefinition.textColor)} />
+          <div className="flex h-full items-center">
+            <ChevronRightIcon className={cn("h-5 w-5", variantDefinition.textColor)} />
+          </div>
         </Link>
       );
     }
@@ -144,13 +146,13 @@ export function Callout({
   return (
     <div
       className={cn(
-        "flex w-full items-center gap-2 rounded-md border pl-2 pr-2 shadow-md backdrop-blur-sm",
+        "flex w-full items-start gap-2 rounded-md border pl-2 pr-2 shadow-md backdrop-blur-sm",
         cta ? "py-2" : "py-2.5",
         variantDefinition.className,
         className
       )}
     >
-      <div className={cn(`flex w-full items-center gap-2.5`)}>
+      <div className={cn(`flex w-full items-start gap-2.5`)}>
         {icon ? icon : variantDefinition.icon}
 
         {typeof children === "string" ? (
diff --git a/apps/webapp/app/components/primitives/Checkbox.tsx b/apps/webapp/app/components/primitives/Checkbox.tsx
index 9dae321d1..f706c2ac9 100644
--- a/apps/webapp/app/components/primitives/Checkbox.tsx
+++ b/apps/webapp/app/components/primitives/Checkbox.tsx
@@ -7,44 +7,44 @@ import { Paragraph } from "./Paragraph";
 const variants = {
   "simple/small": {
     button: "w-fit pr-4",
-    label: "text-sm text-bright mt-0.5 select-none",
-    description: "text-dimmed",
+    label: "text-sm text-text-bright mt-0.5 select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-1",
     isChecked: "",
     isDisabled: "opacity-70",
   },
   simple: {
     button: "w-fit pr-4",
-    label: "text-bright select-none",
-    description: "text-dimmed",
+    label: "text-text-bright select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-1",
     isChecked: "",
     isDisabled: "opacity-70",
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-slate-800 hover:bg-slate-850 hover:border-slate-750 transition",
-    label: "text-sm text-bright select-none",
-    description: "text-dimmed",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition",
+    label: "text-sm text-text-bright select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-0",
-    isChecked: "bg-slate-850 border-slate-750 hover:!bg-slate-850",
+    isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-slate-800 hover:bg-slate-850 hover:border-slate-750 transition",
-    label: "text-bright select-none",
-    description: "text-dimmed",
+      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition",
+    label: "text-text-bright select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-1",
-    isChecked: "bg-slate-850 border-slate-750 hover:!bg-slate-850",
+    isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   description: {
-    button: "w-full py-2 pl-3 pr-4 checked:hover:bg-slate-850 transition",
-    label: "text-bright font-semibold",
-    description: "text-dimmed",
+    button: "w-full py-2 pl-3 pr-4 checked:hover:bg-charcoal-850 transition",
+    label: "text-text-bright font-semibold",
+    description: "text-text-dimmed",
     inputPosition: "mt-1",
-    isChecked: "bg-slate-850",
+    isChecked: "bg-charcoal-850",
     isDisabled: "opacity-70",
   },
 };
@@ -137,7 +137,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           className={cn(
             inputPositionClasses,
             props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-            "rounded-sm border border-slate-700 bg-transparent transition checked:!bg-indigo-500 read-only:border-slate-650 read-only:!bg-slate-700 group-hover:bg-slate-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none focus-visible:ring-indigo-500  disabled:border-slate-650 disabled:!bg-slate-700"
+            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-700 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
           )}
           id={id}
           ref={ref}
diff --git a/apps/webapp/app/components/primitives/ClientTabs.tsx b/apps/webapp/app/components/primitives/ClientTabs.tsx
index daefcaa3b..c8ac014dd 100644
--- a/apps/webapp/app/components/primitives/ClientTabs.tsx
+++ b/apps/webapp/app/components/primitives/ClientTabs.tsx
@@ -26,7 +26,7 @@ const ClientTabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap border-r border-slate-700 px-2 text-sm ring-offset-background transition-all first:pl-0 last:border-none data-[state=active]:text-indigo-500 data-[state=inactive]:text-dimmed data-[state=inactive]:hover:text-bright focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap border-r border-charcoal-700 px-2 text-sm transition-all first:pl-0 last:border-none data-[state=active]:text-indigo-500 data-[state=inactive]:text-text-dimmed data-[state=inactive]:hover:text-text-bright focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       className
     )}
     {...props}
@@ -41,7 +41,7 @@ const ClientTabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-1 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:ring-ring mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ export type TabsProps = {
 export function ClientTabsWithUnderline({ className, tabs, currentValue, layoutId }: TabsProps) {
   return (
     <TabsPrimitive.List
-      className={cn(`flex flex-row gap-x-6 border-b border-slate-700`, className)}
+      className={cn(`flex flex-row gap-x-6 border-b border-charcoal-700`, className)}
     >
       {tabs.map((tab, index) => {
         const isActive = currentValue === tab.value;
@@ -75,7 +75,7 @@ export function ClientTabsWithUnderline({ className, tabs, currentValue, layoutI
             <span
               className={cn(
                 "text-sm transition duration-200",
-                isActive ? "text-indigo-500" : "text-slate-200"
+                isActive ? "text-indigo-500" : "text-charcoal-200"
               )}
             >
               {tab.label}
@@ -83,7 +83,7 @@ export function ClientTabsWithUnderline({ className, tabs, currentValue, layoutI
             {isActive ? (
               <motion.div layoutId={layoutId} className="mt-1 h-0.5 w-full bg-indigo-500" />
             ) : (
-              <div className="mt-1 h-0.5 w-full bg-slate-500 opacity-0 transition duration-200 group-hover:opacity-100" />
+              <div className="mt-1 h-0.5 w-full bg-charcoal-500 opacity-0 transition duration-200 group-hover:opacity-100" />
             )}
           </TabsPrimitive.Trigger>
         );
diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
index 6bae87ce4..d401e9c59 100644
--- a/apps/webapp/app/components/primitives/ClipboardField.tsx
+++ b/apps/webapp/app/components/primitives/ClipboardField.tsx
@@ -4,12 +4,12 @@ import { cn } from "~/utils/cn";
 import { Button } from "./Buttons";
 import { IconNames, NamedIcon } from "./NamedIcon";
 
-const variations = {
+const variants = {
   "primary/small": {
     container:
-      "flex items-center text-dimmed font-mono rounded border border-slate-800 bg-slate-850 text-xs transition hover:border-slate-750 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-charcoal-850 text-xs transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
-      "bg-slate-850 border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
+      "bg-charcoal-750 border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "primary/small" as const,
     button: "rounded-l-none min-w-[3.1rem]",
     iconSize: "h-3 w-3",
@@ -17,29 +17,30 @@ const variations = {
   },
   "secondary/small": {
     container:
-      "flex items-center text-dimmed font-mono rounded border border-slate-750 bg-slate-850 text-xs transition hover:border-slate-750 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-transparent text-xs transition hover:bg-charcoal-800 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
-      "bg-slate-850 border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
-    buttonVariant: "secondary/small" as const,
-    button: "rounded-l-none border-l border-slate-750 min-w-[3.1rem]",
+      "bg-charcoal-750 border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
+    buttonVariant: "tertiary/small" as const,
+    button: "rounded-l-none border-l border-charcoal-750 min-w-[3.1rem]",
     iconSize: "h-3 w-3",
     iconPadding: "pl-1",
   },
   "tertiary/small": {
     container:
-      "flex items-center text-dimmed font-mono rounded border border-slate-850 bg-transparent text-xs transition hover:border-slate-800 hover:bg-slate-950 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "group flex items-center text-text-dimmed font-mono rounded bg-transparent text-xs transition hover:border-charcoal-700 hover:bg-tertiary focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
-    buttonVariant: "tertiary/small" as const,
-    button: "rounded-l-none border-l border-slate-850 min-w-[3.1rem]",
+    buttonVariant: "minimal/small" as const,
+    button:
+      "rounded-l-none border-l border-transparent group-hover:border-charcoal-700 min-w-[3.1rem]",
     iconSize: "h-3 w-3",
     iconPadding: "pl-1",
   },
   "primary/medium": {
     container:
-      "flex items-center text-dimmed font-mono rounded border border-slate-800 bg-slate-850 text-sm transition hover:border-slate-750 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border border-charcoal-800 bg-charcoal-850 text-sm transition hover:border-charcoal-750 hover:bg-charcoal-800 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
-      "bg-slate-850 border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
+      "bg-charcoal-850 border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "primary/medium" as const,
     button: "rounded-l-none min-w-[4rem]",
     iconSize: "h-4 w-4",
@@ -47,21 +48,21 @@ const variations = {
   },
   "secondary/medium": {
     container:
-      "flex items-center text-dimmed font-mono rounded border border-slate-750 bg-slate-850 text-sm transition hover:border-slate-750 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border border-charcoal-750 bg-charcoal-850 text-sm transition hover:border-charcoal-750 hover:bg-charcoal-800 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
-      "bg-slate-850 border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
+      "bg-charcoal-850 border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "secondary/medium" as const,
-    button: "rounded-l-none border-l border-slate-750 min-w-[4rem]",
+    button: "rounded-l-none border-l border-charcoal-750 min-w-[4rem]",
     iconSize: "h-4 w-4",
     iconPadding: "pl-2",
   },
   "tertiary/medium": {
     container:
-      "flex items-center text-dimmed font-mono rounded border border-slate-850 bg-transparent text-sm transition hover:border-slate-800 hover:bg-slate-950 focus:border-4 focus:border-solid focus:border-l-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border border-charcoal-850 bg-transparent text-sm transition hover:border-charcoal-800 hover:bg-charcoal-950 focus:border-4 focus:border-solid focus:border-l-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "tertiary/medium" as const,
-    button: "rounded-l-none border-l border-slate-850 min-w-[4rem]",
+    button: "rounded-l-none border-l border-charcoal-850 min-w-[4rem]",
     iconSize: "h-4 w-4",
     iconPadding: "pl-2",
   },
@@ -70,7 +71,7 @@ const variations = {
 type ClipboardFieldProps = {
   value: string;
   secure?: boolean | string;
-  variant: keyof typeof variations;
+  variant: keyof typeof variants;
   className?: string;
   icon?: IconNames | React.ReactNode;
   fullWidth?: boolean;
@@ -104,9 +105,9 @@ export function ClipboardField({
     setIsSecure(secure !== undefined && secure);
   }, [secure]);
 
-  const { container, input, buttonVariant, button } = variations[variant];
-  const iconClassName = variations[variant].iconSize;
-  const iconPosition = variations[variant].iconPadding;
+  const { container, input, buttonVariant, button } = variants[variant];
+  const iconClassName = variants[variant].iconSize;
+  const iconPosition = variants[variant].iconPadding;
   const inputIcon = useRef<HTMLInputElement>(null);
 
   return (
diff --git a/apps/webapp/app/components/primitives/DateField.tsx b/apps/webapp/app/components/primitives/DateField.tsx
index 1b149e42d..403aaa0d9 100644
--- a/apps/webapp/app/components/primitives/DateField.tsx
+++ b/apps/webapp/app/components/primitives/DateField.tsx
@@ -90,7 +90,7 @@ export function DateField({
 
   return (
     <div className={`flex flex-col items-start ${className || ""}`}>
-      <span {...labelProps} className="mb-1 ml-0.5 text-xs text-slate-300">
+      <span {...labelProps} className="mb-1 ml-0.5 text-xs text-charcoal-300">
         {label}
       </span>
       <div className="flex flex-row items-center gap-1">
@@ -98,7 +98,7 @@ export function DateField({
           {...fieldProps}
           ref={ref}
           className={cn(
-            "flex rounded-sm border border-slate-800 bg-midnight-900 p-0.5 px-1.5 transition-colors focus-within:border-slate-500 hover:border-slate-700 focus-within:hover:border-slate-500",
+            "flex rounded-sm border border-charcoal-800 bg-charcoal-750 p-0.5 px-1.5 transition-colors focus-within:border-charcoal-500 hover:border-charcoal-700 focus-within:hover:border-charcoal-500",
             fieldClassName
           )}
         >
@@ -118,7 +118,7 @@ export function DateField({
         </div>
         {showNowButton && (
           <Button
-            variant="secondary/small"
+            variant="tertiary/small"
             onClick={() => {
               const now = new Date();
               setValue(utcDateToCalendarDate(new Date()));
@@ -130,7 +130,7 @@ export function DateField({
         )}
         {showClearButton && (
           <Button
-            variant="secondary/small"
+            variant="tertiary/small"
             LeadingIcon={"close"}
             onClick={() => {
               setValue(undefined);
@@ -187,13 +187,13 @@ function DateSegment({ segment, state }: DateSegmentProps) {
         minWidth: minWidthForSegment(segment),
       }}
       className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums outline-none focus:bg-indigo-500 focus:text-white ${
-        !segment.isEditable ? "text-slate-500" : "text-bright"
+        !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
       }`}
     >
       {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}
       <span
         aria-hidden="true"
-        className="block text-center italic text-slate-500 group-focus:text-white"
+        className="block text-center italic text-charcoal-500 group-focus:text-white"
         style={{
           visibility: segment.isPlaceholder ? undefined : "hidden",
           height: segment.isPlaceholder ? "" : 0,
@@ -232,10 +232,10 @@ function DateSegmentGuide({ segment }: { segment: DateSegment }) {
         minWidth: minWidthForSegment(segment),
       }}
       className={`group box-content rounded-sm px-0.5 text-right text-sm tabular-nums outline-none ${
-        !segment.isEditable ? "text-slate-500" : "text-bright"
+        !segment.isEditable ? "text-charcoal-500" : "text-text-bright"
       }`}
     >
-      <span className="block text-center italic text-slate-500">
+      <span className="block text-center italic text-charcoal-500">
         {segment.type !== "literal" ? segment.placeholder : segment.text}
       </span>
     </div>
diff --git a/apps/webapp/app/components/primitives/DetailCell.tsx b/apps/webapp/app/components/primitives/DetailCell.tsx
index 6047cc150..0be8597c8 100644
--- a/apps/webapp/app/components/primitives/DetailCell.tsx
+++ b/apps/webapp/app/components/primitives/DetailCell.tsx
@@ -51,19 +51,19 @@ export function DetailCell({
   return (
     <div
       className={cn(
-        "group flex h-11 w-full items-center gap-3 rounded-md p-1 pr-3 transition hover:bg-slate-900",
+        "group flex h-11 w-full items-center gap-3 rounded-md p-1 pr-3 transition hover:bg-charcoal-900",
         className
       )}
     >
       <IconInBox
         icon={leadingIcon}
-        className={cn("flex-none transition group-hover:border-slate-750", leadingIconClassName)}
+        className={cn("flex-none transition group-hover:border-charcoal-750", leadingIconClassName)}
       />
       <div className="flex flex-1 flex-col">
         <Paragraph
           variant={variation.label.variant}
           className={cn(
-            "flex-1 text-left transition group-hover:text-bright",
+            "flex-1 text-left transition group-hover:text-text-bright",
             variation.label.className
           )}
         >
@@ -73,7 +73,7 @@ export function DetailCell({
           <Paragraph
             variant={variation.description.variant}
             className={cn(
-              "flex-1 text-left text-dimmed transition group-hover:text-bright",
+              "flex-1 text-left text-text-dimmed transition group-hover:text-text-bright",
               variation.description.className
             )}
           >
@@ -85,7 +85,7 @@ export function DetailCell({
         <Icon
           icon={trailingIcon}
           className={cn(
-            "h-6 w-6 flex-none transition group-hover:border-slate-750",
+            "h-6 w-6 flex-none transition group-hover:border-charcoal-750",
             trailingIconClassName
           )}
         />
diff --git a/apps/webapp/app/components/primitives/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx
index 3a382112f..7f9562a35 100644
--- a/apps/webapp/app/components/primitives/Dialog.tsx
+++ b/apps/webapp/app/components/primitives/Dialog.tsx
@@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/90 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-background-dimmed/90 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
@@ -43,14 +43,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background px-4 pb-6 pt-3 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background-dimmed px-4 pb-6 pt-3 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}
     >
       <hr className="absolute left-0 top-12 w-full" />
       {children}
-      <DialogPrimitive.Close className="absolute right-3 top-3 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus-visible:ring-ring absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
         <div className="flex gap-x-2">
           <ShortcutKey
             shortcut={{
@@ -73,7 +73,10 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col text-left font-medium text-dimmed", className)} {...props} />
+  <div
+    className={cn("flex flex-col text-left font-medium text-text-dimmed", className)}
+    {...props}
+  />
 );
 DialogHeader.displayName = "DialogHeader";
 
@@ -103,7 +106,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
diff --git a/apps/webapp/app/components/primitives/FormTitle.tsx b/apps/webapp/app/components/primitives/FormTitle.tsx
index 98b8c635b..cc2f698ca 100644
--- a/apps/webapp/app/components/primitives/FormTitle.tsx
+++ b/apps/webapp/app/components/primitives/FormTitle.tsx
@@ -21,7 +21,7 @@ export function FormTitle({
     <div
       className={cn(
         "mb-4 flex flex-col gap-3 pb-4",
-        divide ? "border-b border-ui-border" : "",
+        divide ? "border-b border-grid-bright" : "",
         className
       )}
     >
diff --git a/apps/webapp/app/components/primitives/Headers.tsx b/apps/webapp/app/components/primitives/Headers.tsx
index 7d9c9ef21..809c24f65 100644
--- a/apps/webapp/app/components/primitives/Headers.tsx
+++ b/apps/webapp/app/components/primitives/Headers.tsx
@@ -16,8 +16,8 @@ const headerVariants = {
 };
 
 const textColorVariants = {
-  bright: "text-bright",
-  dimmed: "text-dimmed",
+  bright: "text-text-bright",
+  dimmed: "text-text-dimmed",
 };
 
 export type HeaderVariant = keyof typeof headerVariants;
diff --git a/apps/webapp/app/components/primitives/Help.tsx b/apps/webapp/app/components/primitives/Help.tsx
index 816b2e3f7..9f9ad1273 100644
--- a/apps/webapp/app/components/primitives/Help.tsx
+++ b/apps/webapp/app/components/primitives/Help.tsx
@@ -46,7 +46,7 @@ export function HelpTrigger({ title }: { title: string }) {
     <></>
   ) : (
     <Button
-      variant="tertiary/small"
+      variant="minimal/small"
       LeadingIcon="lightbulb"
       leadingIconClassName="text-amber-400"
       onClick={() => setOpen(true)}
@@ -78,9 +78,9 @@ export function HelpContent({
             </div>
             {allowDismissing && (
               <Button
-                variant="tertiary/small"
+                variant="minimal/small"
                 TrailingIcon="close"
-                trailingIconClassName="text-slate-400"
+                trailingIconClassName="text-charcoal-400"
                 onClick={() => setOpen(false)}
               >
                 Dismiss
@@ -88,7 +88,7 @@ export function HelpContent({
             )}
           </div>
 
-          <div className="grow rounded border border-slate-850 bg-midnight-850/80 bg-contain bg-left-top bg-no-repeat p-6">
+          <div className="grow rounded border border-charcoal-850 bg-background-bright/80 bg-contain bg-left-top bg-no-repeat p-6">
             {children}
           </div>
         </div>
diff --git a/apps/webapp/app/components/primitives/Icon.tsx b/apps/webapp/app/components/primitives/Icon.tsx
index a2907054b..00200a188 100644
--- a/apps/webapp/app/components/primitives/Icon.tsx
+++ b/apps/webapp/app/components/primitives/Icon.tsx
@@ -3,7 +3,10 @@ import { IconNamesOrString, NamedIcon } from "./NamedIcon";
 import { cn } from "~/utils/cn";
 import { render } from "react-dom";
 
-export type RenderIcon = IconNamesOrString | FunctionComponent<{className?: string}> | React.ReactNode;
+export type RenderIcon =
+  | IconNamesOrString
+  | FunctionComponent<{ className?: string }>
+  | React.ReactNode;
 
 type IconProps = {
   icon?: RenderIcon;
@@ -17,7 +20,7 @@ export function Icon(props: IconProps) {
   if (typeof props.icon === "string") {
     return <NamedIcon name={props.icon} className={props.className ?? ""} fallback={<></>} />;
   }
-  
+
   if (typeof props.icon === "function") {
     const Icon = props.icon;
     return <Icon className={props.className} />;
@@ -26,9 +29,16 @@ export function Icon(props: IconProps) {
   if (React.isValidElement(props.icon)) {
     return <>{props.icon}</>;
   }
-  
-  if (props.icon && typeof props.icon === 'object' && ('type' in props.icon || '$$typeof' in props.icon)) {
-    return createElement<FunctionComponent<any>>(props.icon as any, { className: props.className } as any);
+
+  if (
+    props.icon &&
+    typeof props.icon === "object" &&
+    ("type" in props.icon || "$$typeof" in props.icon)
+  ) {
+    return createElement<FunctionComponent<any>>(
+      props.icon as any,
+      { className: props.className } as any
+    );
   }
 
   console.error("Invalid icon", props);
@@ -39,7 +49,7 @@ export function IconInBox({ boxClassName, ...props }: IconProps & { boxClassName
   return (
     <div
       className={cn(
-        "grid h-9 w-9 place-content-center rounded-sm border border-slate-750 bg-slate-850",
+        "grid h-9 w-9 place-content-center rounded-sm border border-charcoal-750 bg-charcoal-850",
         boxClassName
       )}
     >
diff --git a/apps/webapp/app/components/primitives/Input.tsx b/apps/webapp/app/components/primitives/Input.tsx
index cc14bb5dd..9a0604670 100644
--- a/apps/webapp/app/components/primitives/Input.tsx
+++ b/apps/webapp/app/components/primitives/Input.tsx
@@ -3,45 +3,43 @@ import { useImperativeHandle, useRef } from "react";
 import { cn } from "~/utils/cn";
 import { Icon, RenderIcon } from "./Icon";
 
-const containerBase = "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-2 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text"
+const containerBase =
+  "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-2 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
 
-const inputBase = "h-full w-full text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none"
+const inputBase =
+  "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none";
 
-const shortcutBase = "grid h-fit place-content-center border border-dimmed/40 font-normal text-dimmed"
+const shortcutBase =
+  "grid h-fit place-content-center border border-dimmed/40 font-normal text-text-dimmed";
 
 const variants = {
   large: {
     container:
-      "px-1 w-full h-10 rounded-[3px] border border-slate-800 bg-slate-850 hover:border-slate-750 hover:bg-slate-800",
-    input:
-      "px-2 text-sm",
+      "px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-750 hover:bg-charcoal-650",
+    input: "px-2 text-sm",
     iconSize: "h-4 w-4 ml-1",
-    shortcut:
-      "mr-1 min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem] select-none",
+    shortcut: "mr-1 min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem] select-none",
   },
   medium: {
-    container: "px-1 h-8 w-full rounded border border-slate-800 bg-slate-850 hover:border-slate-750 hover:bg-slate-800",
-    input:
-      "px-1.5 rounded text-sm",
+    container:
+      "px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-750 hover:bg-charcoal-650",
+    input: "px-1.5 rounded text-sm",
     iconSize: "h-4 w-4 ml-0.5",
-    shortcut:
-      "min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem]",
+    shortcut: "min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem]",
   },
   small: {
-    container: "px-0.5 h-6 w-full rounded border border-slate-800 bg-slate-850 hover:border-slate-750 hover:bg-slate-800",
-    input:
-      "px-1 rounded text-xs",
+    container:
+      "px-0.5 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-750 hover:bg-charcoal-650",
+    input: "px-1 rounded text-xs",
     iconSize: "h-3 w-3 ml-0.5",
-    shortcut:
-      "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
+    shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
   },
   tertiary: {
-    container: "px-0.5 h-6 w-full rounded border border-transparent hover:border-slate-800 hover:bg-slate-850",
-    input:
-    "px-1 rounded text-xs",
+    container:
+      "px-0.5 h-6 w-full rounded border border-transparent hover:border-charcoal-800 hover:bg-charcoal-750",
+    input: "px-1 rounded text-xs",
     iconSize: "h-3 w-3 ml-0.5",
-    shortcut:
-    "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]"
+    shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
   },
 };
 
@@ -64,14 +62,17 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <div
-        className={cn("flex items-center", containerBase, containerClassName, fullWidth ? "w-full" : "max-w-max")}
+        className={cn(
+          "flex items-center",
+          containerBase,
+          containerClassName,
+          fullWidth ? "w-full" : "max-w-max"
+        )}
         onClick={() => innerRef.current && innerRef.current.focus()}
       >
         {icon && (
-          <div
-            className="pointer-events-none flex items-center"
-          >
-            <Icon icon={icon} className={cn(iconClassName, "text-dimmed")} />
+          <div className="pointer-events-none flex items-center">
+            <Icon icon={icon} className={cn(iconClassName, "text-text-dimmed")} />
           </div>
         )}
         <input
diff --git a/apps/webapp/app/components/primitives/LabelValueStack.tsx b/apps/webapp/app/components/primitives/LabelValueStack.tsx
index a8ff3e1c2..977ef6ee8 100644
--- a/apps/webapp/app/components/primitives/LabelValueStack.tsx
+++ b/apps/webapp/app/components/primitives/LabelValueStack.tsx
@@ -83,7 +83,7 @@ function ValueButton({ value, href, variant = "secondary" }: ValueButtonStackPro
         <Paragraph variant={variation.value}>
           <a href={href} className="underline underline-offset-2" target="_blank">
             {value}
-            <ArrowTopRightOnSquareIcon className="ml-1 inline-block h-4 w-4 text-dimmed" />
+            <ArrowTopRightOnSquareIcon className="ml-1 inline-block h-4 w-4 text-text-dimmed" />
           </a>
         </Paragraph>
       }
diff --git a/apps/webapp/app/components/primitives/LoadingBarDivider.tsx b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
new file mode 100644
index 000000000..f227f9e73
--- /dev/null
+++ b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
@@ -0,0 +1,52 @@
+import { AnimatePresence, useAnimate, usePresence } from "framer-motion";
+import { useEffect } from "react";
+
+type LoadingBarDividerProps = {
+  isLoading: boolean;
+};
+
+export function LoadingBarDivider({ isLoading }: LoadingBarDividerProps) {
+  return (
+    <div className="relative h-px w-full bg-grid-bright">
+      <AnimationDivider isLoading={isLoading} />
+    </div>
+  );
+}
+
+export function AnimationDivider({ isLoading }: LoadingBarDividerProps) {
+  const [scope, animate] = useAnimate();
+  const [isPresent, safeToRemove] = usePresence();
+
+  useEffect(() => {
+    if (isPresent) {
+      const enterAnimation = async () => {
+        await animate(
+          [
+            [scope.current, { width: "30%", left: "35%" }, { duration: 1, ease: "easeIn" }],
+            [scope.current, { width: 0, left: "100%" }, { duration: 1, ease: "easeOut" }],
+          ],
+          { repeat: Infinity, repeatType: "reverse" }
+        );
+      };
+      enterAnimation();
+    } else {
+      const exitAnimation = async () => {
+        await animate(scope.current, { opacity: 0 });
+        safeToRemove();
+      };
+
+      exitAnimation();
+    }
+  }, [isPresent, isLoading]);
+
+  return (
+    <AnimatePresence>
+      {isLoading && (
+        <div
+          ref={scope}
+          className="width-0 absolute left-0 top-0 h-full bg-gradient-to-r from-transparent from-5% via-blue-500 to-transparent to-95%"
+        />
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/NamedIcon.tsx b/apps/webapp/app/components/primitives/NamedIcon.tsx
index d776a1d88..217ee73af 100644
--- a/apps/webapp/app/components/primitives/NamedIcon.tsx
+++ b/apps/webapp/app/components/primitives/NamedIcon.tsx
@@ -74,7 +74,7 @@ import { Spinner } from "./Spinner";
 import tablerSpritePath from "./tabler-sprite.svg";
 
 const icons = {
-  account: (className: string) => <UserCircleIcon className={cn("text-slate-400", className)} />,
+  account: (className: string) => <UserCircleIcon className={cn("text-charcoal-400", className)} />,
   active: (className: string) => <CheckCircleIcon className={cn("text-green-500", className)} />,
   "arrow-right": (className: string) => <ArrowRightIcon className={cn("text-white", className)} />,
   "arrow-left": (className: string) => <ArrowLeftIcon className={cn("text-white", className)} />,
@@ -82,32 +82,34 @@ const icons = {
   beaker: (className: string) => <BeakerIcon className={cn("text-purple-500", className)} />,
   bell: (className: string) => <BellAlertIcon className={cn("text-amber-500", className)} />,
   billing: (className: string) => <CreditCardIcon className={cn("text-teal-500", className)} />,
-  browser: (className: string) => <WindowIcon className={cn("text-dimmed", className)} />,
+  browser: (className: string) => <WindowIcon className={cn("text-text-dimmed", className)} />,
   calendar: (className: string) => (
     <CalendarDaysIcon className={cn("text-purple-500", className)} />
   ),
-  check: (className: string) => <CheckIcon className={cn("text-dimmed", className)} />,
+  check: (className: string) => <CheckIcon className={cn("text-text-dimmed", className)} />,
   "chevron-down": (className: string) => (
-    <ChevronDownIcon className={cn("text-dimmed", className)} />
+    <ChevronDownIcon className={cn("text-text-dimmed", className)} />
+  ),
+  "chevron-up": (className: string) => (
+    <ChevronUpIcon className={cn("text-text-dimmed", className)} />
   ),
-  "chevron-up": (className: string) => <ChevronUpIcon className={cn("text-dimmed", className)} />,
   "chevron-left": (className: string) => (
-    <ChevronLeftIcon className={cn("text-dimmed", className)} />
+    <ChevronLeftIcon className={cn("text-text-dimmed", className)} />
   ),
   "chevron-right": (className: string) => (
-    <ChevronRightIcon className={cn("text-dimmed", className)} />
+    <ChevronRightIcon className={cn("text-text-dimmed", className)} />
   ),
   countdown: (className: string) => <HourglassIcon className={cn("text-amber-400", className)} />,
   clock: (className: string) => <ClockIcon className={cn("text-cyan-500", className)} />,
-  close: (className: string) => <XMarkIcon className={cn("text-dimmed", className)} />,
+  close: (className: string) => <XMarkIcon className={cn("text-text-dimmed", className)} />,
   "connection-alert": (className: string) => (
     <BellAlertIcon className={cn("text-amber-500", className)} />
   ),
-  docs: (className: string) => <BookOpenIcon className={cn("text-slate-400", className)} />,
+  docs: (className: string) => <BookOpenIcon className={cn("text-charcoal-400", className)} />,
   dynamic: (className: string) => <DynamicTriggerIcon className={cn("text-cyan-500", className)} />,
   error: (className: string) => <ErrorIcon className={cn("text-rose-500", className)} />,
   "external-link": (className: string) => (
-    <ArrowTopRightOnSquareIcon className={cn("text-dimmed", className)} />
+    <ArrowTopRightOnSquareIcon className={cn("text-text-dimmed", className)} />
   ),
   flag: (className: string) => <FlagIcon className={cn("text-sky-500", className)} />,
   folder: (className: string) => <FolderIcon className={cn("text-indigo-600", className)} />,
@@ -119,7 +121,7 @@ const icons = {
     <HandRaisedIcon className={cn("text-amber-400", className)} />
   ),
   heart: (className: string) => <HeartIcon className={cn("text-rose-500", className)} />,
-  house: (className: string) => <HomeIcon className={cn("text-dimmed", className)} />,
+  house: (className: string) => <HomeIcon className={cn("text-text-dimmed", className)} />,
   id: (className: string) => <FingerPrintIcon className={cn("text-rose-200", className)} />,
   inactive: (className: string) => <XCircleIcon className={cn("text-rose-500", className)} />,
   info: (className: string) => <InformationCircleIcon className={cn("text-blue-500", className)} />,
@@ -135,11 +137,11 @@ const icons = {
   key: (className: string) => <KeyIcon className={cn("text-amber-400", className)} />,
   lightbulb: (className: string) => <LightBulbIcon className={cn("text-amber-400", className)} />,
   "clipboard-checked": (className: string) => (
-    <ClipboardDocumentCheckIcon className={cn("text-dimmed", className)} />
+    <ClipboardDocumentCheckIcon className={cn("text-text-dimmed", className)} />
   ),
-  list: (className: string) => <ListBulletIcon className={cn("text-slate-400", className)} />,
+  list: (className: string) => <ListBulletIcon className={cn("text-charcoal-400", className)} />,
   log: (className: string) => (
-    <ChatBubbleLeftEllipsisIcon className={cn("text-slate-400", className)} />
+    <ChatBubbleLeftEllipsisIcon className={cn("text-charcoal-400", className)} />
   ),
   "logo-icon": (className: string) => <LogoIcon className={cn(className)} />,
   organization: (className: string) => (
@@ -149,16 +151,20 @@ const icons = {
   "plus-small": (className: string) => (
     <PlusSmallIcon className={cn("text-green-600", className)} />
   ),
-  property: (className: string) => <Cog8ToothIcon className={cn("text-slate-600", className)} />,
+  property: (className: string) => <Cog8ToothIcon className={cn("text-charcoal-600", className)} />,
   pulse: (className: string) => <ActivityIcon className={cn("text-green-600", className)} />,
   "qr-code": (className: string) => <QrCodeIcon className={cn("text-amber-400", className)} />,
-  refresh: (className: string) => <ArrowPathIcon className={cn("text-bright", className)} />,
+  refresh: (className: string) => <ArrowPathIcon className={cn("text-text-bright", className)} />,
   sapling: (className: string) => <SaplingIcon className={cn("text-green-500", className)} />,
-  search: (className: string) => <MagnifyingGlassIcon className={cn("text-dimmed", className)} />,
-  settings: (className: string) => <Cog8ToothIcon className={cn("text-slate-600", className)} />,
+  search: (className: string) => (
+    <MagnifyingGlassIcon className={cn("text-text-dimmed", className)} />
+  ),
+  settings: (className: string) => <Cog8ToothIcon className={cn("text-charcoal-600", className)} />,
   spinner: (className: string) => <Spinner className={className} color="blue" />,
   "spinner-white": (className: string) => <Spinner className={className} color="white" />,
-  squares: (className: string) => <Square2StackIcon className={cn("text-dimmed", className)} />,
+  squares: (className: string) => (
+    <Square2StackIcon className={cn("text-text-dimmed", className)} />
+  ),
   star: (className: string) => <StarIcon className={cn("text-yellow-500", className)} />,
   stop: (className: string) => <StopIcon className={cn("text-rose-500", className)} />,
   team: (className: string) => <UserGroupIcon className={cn("text-blue-500", className)} />,
@@ -258,7 +264,7 @@ export function NamedIconInBox({
   return (
     <div
       className={cn(
-        "grid place-content-center rounded-sm border border-slate-750 bg-slate-850",
+        "grid place-content-center rounded-sm border border-charcoal-750 bg-charcoal-850",
         className
       )}
     >
diff --git a/apps/webapp/app/components/primitives/PageHeader.tsx b/apps/webapp/app/components/primitives/PageHeader.tsx
index ee72b45fb..72c2314e5 100644
--- a/apps/webapp/app/components/primitives/PageHeader.tsx
+++ b/apps/webapp/app/components/primitives/PageHeader.tsx
@@ -1,33 +1,46 @@
-import { Link } from "@remix-run/react";
-import { Header1 } from "./Headers";
-import { BreadcrumbIcon } from "./BreadcrumbIcon";
-import { ChevronLeftIcon } from "@heroicons/react/24/solid";
-import { Paragraph } from "./Paragraph";
-import { cn } from "~/utils/cn";
-import { NamedIcon } from "./NamedIcon";
-import { Tabs, TabsProps } from "./Tabs";
-import { Icon, RenderIcon } from "./Icon";
-import { Button, LinkButton } from "./Buttons";
 import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
+import { ChevronLeftIcon } from "@heroicons/react/24/solid";
+import { Link, useNavigation } from "@remix-run/react";
+import { useOptionalOrganization } from "~/hooks/useOrganizations";
+import { cn } from "~/utils/cn";
+import { plansPath } from "~/utils/pathBuilder";
+import { UpgradePrompt, useShowUpgradePrompt } from "../billing/UpgradePrompt";
+import { BreadcrumbIcon } from "./BreadcrumbIcon";
+import { LinkButton } from "./Buttons";
+import { Header2, Header3 } from "./Headers";
+import { NamedIcon } from "./NamedIcon";
+import { Paragraph } from "./Paragraph";
+import { Tabs, TabsProps } from "./Tabs";
+import { LoadingBarDivider } from "./LoadingBarDivider";
 
 type WithChildren = {
   children: React.ReactNode;
 };
 
-export function PageHeader({ children, hideBorder }: WithChildren & { hideBorder?: boolean }) {
+export function NavBar({ children }: WithChildren) {
+  const organization = useOptionalOrganization();
+  const showUpgradePrompt = useShowUpgradePrompt(organization);
+  const navigation = useNavigation();
+  const isLoading = navigation.state === "loading" || navigation.state === "submitting";
+
   return (
-    <div className={cn("mx-4 pt-4", hideBorder ? "" : "border-b border-ui-border pb-4")}>
-      {children}
+    <div>
+      <div className="grid h-10 w-full grid-rows-[auto_1px] bg-background-bright">
+        <div className="flex w-full items-center justify-between pl-3 pr-1">{children}</div>
+        <LoadingBarDivider isLoading={isLoading} />
+      </div>
+      {showUpgradePrompt.shouldShow && organization && (
+        <UpgradePrompt
+          runsEnabled={showUpgradePrompt.runsEnabled}
+          runCountCap={showUpgradePrompt.runCountCap}
+          planPath={plansPath(organization)}
+        />
+      )}
     </div>
   );
 }
 
-export function PageTitleRow({ children }: WithChildren) {
-  return <div className="flex items-center justify-between">{children}</div>;
-}
-
 type PageTitleProps = {
-  icon?: RenderIcon;
   title: string;
   backButton?: {
     to: string;
@@ -35,45 +48,31 @@ type PageTitleProps = {
   };
 };
 
-export function PageTitle({ icon, title, backButton }: PageTitleProps) {
+export function PageTitle({ title, backButton }: PageTitleProps) {
   return (
     <div className="flex items-center gap-2">
       {backButton && (
         <div className="group flex items-center gap-2">
           <Link
             to={backButton.to}
-            className="flex items-center gap-1 text-slate-400 transition group-hover:text-white"
+            className="text-xs text-text-dimmed transition group-hover:text-text-bright"
           >
-            <ChevronLeftIcon className="h-6" />
-            <Header1 textColor="dimmed" className="transition group-hover:text-white">
-              {backButton.text}
-            </Header1>
+            {backButton.text}
           </Link>
-          <BreadcrumbIcon className="h-6" />
+          <BreadcrumbIcon className="h-5" />
         </div>
       )}
-      <Header1 className="flex items-center gap-1">
-        {icon && <Icon icon={icon} className="h-5 w-5" />}
-        {title}
-      </Header1>
+      <Header2 className="flex items-center gap-1">{title}</Header2>
     </div>
   );
 }
 
-export function PageButtons({ children }: WithChildren) {
+export function PageAccessories({ children }: WithChildren) {
   return <div className="flex items-center gap-3">{children}</div>;
 }
 
-export function PageDescription({ children }: WithChildren) {
-  return (
-    <Paragraph variant="small" className="mb-0 mt-2">
-      {children}
-    </Paragraph>
-  );
-}
-
 export function PageInfoRow({ children }: WithChildren) {
-  return <div className="mt-2 flex w-full items-center gap-2">{children}</div>;
+  return <div className="flex w-full items-center gap-2">{children}</div>;
 }
 
 export function PageInfoGroup({
@@ -139,7 +138,7 @@ function PageInfoPropertyContent({
 
 export function PageTabs(props: TabsProps) {
   return (
-    <div className="mt-4">
+    <div className="mb-2 mt-2">
       <Tabs {...props} />
     </div>
   );
diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx
index 5367c0229..c859452f9 100644
--- a/apps/webapp/app/components/primitives/Pagination.tsx
+++ b/apps/webapp/app/components/primitives/Pagination.tsx
@@ -21,12 +21,12 @@ export function PaginationControls({
   }
 
   return (
-    <div className="flex items-center justify-between rounded-b-lg border-t border-slate-850 bg-slate-700/20 py-3 pl-4 pr-3 text-slate-400">
+    <div className="flex items-center justify-between rounded-b-lg border-t border-charcoal-850 bg-charcoal-700/20 py-3 pl-4 pr-3 text-charcoal-400">
       <div className="flex flex-1 justify-between sm:hidden">
         {currentPage > 1 && (
           <Link
             to={pageUrl(location, currentPage - 1)}
-            className="relative inline-flex items-center rounded-md border border-slate-300 bg-slate-700/20 px-4 py-2 text-xs hover:bg-slate-50"
+            className="hover:bg-charcoal-50 relative inline-flex items-center rounded-md border border-charcoal-300 bg-charcoal-700/20 px-4 py-2 text-xs"
           >
             Previous
           </Link>
@@ -34,7 +34,7 @@ export function PaginationControls({
         {currentPage < totalPages && (
           <Link
             to={pageUrl(location, currentPage + 1)}
-            className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-slate-700/20 px-4 py-2 text-xs hover:bg-slate-50"
+            className="hover:bg-charcoal-50 relative ml-3 inline-flex items-center rounded-md border border-charcoal-300 bg-charcoal-700/20 px-4 py-2 text-xs"
           >
             Next
           </Link>
@@ -42,7 +42,7 @@ export function PaginationControls({
       </div>
       <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
         <div>
-          <p className="text-sm text-slate-400">
+          <p className="text-sm text-charcoal-400">
             Showing <span className="font-medium">{(currentPage - 1) * pageSize + 1}</span> to{" "}
             <span className="font-medium">{currentPage * pageSize}</span> of{" "}
             <span className="font-medium">{totalResults}</span> results
@@ -56,8 +56,8 @@ export function PaginationControls({
             <LinkDisabled
               to={pageUrl(location, currentPage - 1)}
               disabled={currentPage === 1}
-              className="relative inline-flex items-center rounded-l border border-slate-500 bg-slate-700/20 px-2 text-xs font-medium text-slate-400 transition hover:border-slate-400 hover:bg-slate-400 hover:text-slate-800 focus:z-20"
-              disabledClassName="opacity-30 cursor-default hover:bg-slate-700/20 hover:border-slate-500 hover:!text-slate-400"
+              className="relative inline-flex items-center rounded-l border border-charcoal-500 bg-charcoal-700/20 px-2 text-xs font-medium text-charcoal-400 transition hover:border-charcoal-400 hover:bg-charcoal-400 hover:text-charcoal-800 focus:z-20"
+              disabledClassName="opacity-30 cursor-default hover:bg-charcoal-700/20 hover:border-charcoal-500 hover:!text-charcoal-400"
             >
               <span className="sr-only">Previous</span>
               <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
@@ -70,8 +70,8 @@ export function PaginationControls({
             <LinkDisabled
               to={pageUrl(location, currentPage + 1)}
               disabled={currentPage === totalPages}
-              className="relative inline-flex items-center rounded-r border border-slate-500 bg-slate-700/20 px-2 text-xs font-medium text-slate-400 transition hover:border-slate-400 hover:bg-slate-400 hover:text-slate-800 focus:z-20"
-              disabledClassName="opacity-30 cursor-default hover:bg-slate-700/20 hover:border-slate-500 hover:!text-slate-400"
+              className="relative inline-flex items-center rounded-r border border-charcoal-500 bg-charcoal-700/20 px-2 text-xs font-medium text-charcoal-400 transition hover:border-charcoal-400 hover:bg-charcoal-400 hover:text-charcoal-800 focus:z-20"
+              disabledClassName="opacity-30 cursor-default hover:bg-charcoal-700/20 hover:border-charcoal-500 hover:!text-charcoal-400"
             >
               <span className="sr-only">Next</span>
               <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
@@ -94,8 +94,9 @@ function pageUrl(location: ReturnType<typeof useLocation>, page: number): string
 const baseClass =
   "relative inline-flex items-center border px-3.5 py-2 text-xs font-medium focus:z-20 transition";
 const unselectedClass =
-  "bg-slate-700/20 border-slate-500 text-slate-400 hover:bg-slate-400 hover:text-slate-900";
-const selectedClass = "z-10 bg-slate-500 border-slate-500 hover:bg-slate-400 text-slate-900";
+  "bg-charcoal-700/20 border-charcoal-500 text-charcoal-400 hover:bg-charcoal-400 hover:text-charcoal-900";
+const selectedClass =
+  "z-10 bg-charcoal-500 border-charcoal-500 hover:bg-charcoal-400 text-charcoal-900";
 
 function PageLinkComponent({
   page,
@@ -120,7 +121,7 @@ function PageLinkComponent({
     }
   } else {
     return (
-      <span className="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-xs font-medium text-slate-500">
+      <span className="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-xs font-medium text-charcoal-500">
         ...
       </span>
     );
diff --git a/apps/webapp/app/components/primitives/Paragraph.tsx b/apps/webapp/app/components/primitives/Paragraph.tsx
index 8a3b6b386..d545863bb 100644
--- a/apps/webapp/app/components/primitives/Paragraph.tsx
+++ b/apps/webapp/app/components/primitives/Paragraph.tsx
@@ -4,64 +4,64 @@ import { IconNamesOrString, NamedIcon } from "./NamedIcon";
 
 const paragraphVariants = {
   base: {
-    text: "font-sans text-base font-normal text-dimmed",
+    text: "font-sans text-base font-normal text-text-dimmed",
     spacing: "mb-3",
   },
   "base/bright": {
-    text: "font-sans text-base font-normal text-bright",
+    text: "font-sans text-base font-normal text-text-bright",
     spacing: "mb-3",
   },
   small: {
-    text: "font-sans text-sm font-normal text-dimmed",
+    text: "font-sans text-sm font-normal text-text-dimmed",
     spacing: "mb-2",
   },
   "small/bright": {
-    text: "font-sans text-sm font-normal text-bright",
+    text: "font-sans text-sm font-normal text-text-bright",
     spacing: "mb-2",
   },
   "extra-small": {
-    text: "font-sans text-xs font-normal text-dimmed",
+    text: "font-sans text-xs font-normal text-text-dimmed",
     spacing: "mb-1.5",
   },
   "extra-small/bright": {
-    text: "font-sans text-xs font-normal text-bright",
+    text: "font-sans text-xs font-normal text-text-bright",
     spacing: "mb-1.5",
   },
   "extra-small/mono": {
-    text: "font-mono text-xs font-normal text-dimmed",
+    text: "font-mono text-xs font-normal text-text-dimmed",
     spacing: "mb-1.5",
   },
   "extra-small/bright/mono": {
-    text: "font-mono text-xs text-bright",
+    text: "font-mono text-xs text-text-bright",
     spacing: "mb-1.5",
   },
   "extra-small/caps": {
-    text: "font-sans text-xs uppercase tracking-wider font-normal text-dimmed",
+    text: "font-sans text-xs uppercase tracking-wider font-normal text-text-dimmed",
     spacing: "mb-1.5",
   },
   "extra-small/bright/caps": {
-    text: "font-sans text-xs uppercase tracking-wider font-normal text-bright",
+    text: "font-sans text-xs uppercase tracking-wider font-normal text-text-bright",
     spacing: "mb-1.5",
   },
   "extra-extra-small": {
-    text: "font-sans text-xxs font-normal text-dimmed",
+    text: "font-sans text-xxs font-normal text-text-dimmed",
     spacing: "mb-1",
   },
   "extra-extra-small/bright": {
-    text: "font-sans text-xxs font-normal text-bright",
+    text: "font-sans text-xxs font-normal text-text-bright",
     spacing: "mb-1",
   },
 
   "extra-extra-small/caps": {
-    text: "font-sans text-xxs uppercase tracking-wider font-normal text-dimmed",
+    text: "font-sans text-xxs uppercase tracking-wider font-normal text-text-dimmed",
     spacing: "mb-1",
   },
   "extra-extra-small/bright/caps": {
-    text: "font-sans text-xxs uppercase tracking-wider font-normal text-bright",
+    text: "font-sans text-xxs uppercase tracking-wider font-normal text-text-bright",
     spacing: "mb-1",
   },
   "extra-extra-small/dimmed/caps": {
-    text: "font-sans text-xxs uppercase tracking-wider font-normal text-dimmed",
+    text: "font-sans text-xxs uppercase tracking-wider font-normal text-text-dimmed",
     spacing: "mb-1",
   },
 };
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 937ab88a0..1b6be047f 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       avoidCollisions={true}
       className={cn(
-        "z-50 min-w-max rounded-md border border-slate-700 bg-midnight-850 p-4 text-popover-foreground shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-max rounded-md border border-charcoal-700 bg-background-bright p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       style={{
@@ -41,7 +41,7 @@ function PopoverSectionHeader({
   variant?: ParagraphVariant;
 }) {
   return (
-    <Paragraph variant={variant} className="bg-slate-900 px-2.5 py-1.5">
+    <Paragraph variant={variant} className="bg-charcoal-900 px-2.5 py-1.5">
       {title}
     </Paragraph>
   );
@@ -71,7 +71,7 @@ function PopoverMenuItem({
       fullWidth
       textAlignLeft
       TrailingIcon={isSelected ? "check" : undefined}
-      className={isSelected ? "bg-slate-750 group-hover:bg-slate-800" : undefined}
+      className={isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-800" : undefined}
     >
       {title}
     </LinkButton>
@@ -88,7 +88,7 @@ function PopoverCustomTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded text-dimmed transition hover:bg-slate-850 hover:text-bright",
+        "group flex items-center justify-end gap-1 rounded text-text-dimmed transition hover:bg-charcoal-850 hover:text-text-bright",
         className
       )}
     >
@@ -113,7 +113,7 @@ function PopoverArrowTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex h-6 items-center gap-1 rounded px-2 text-dimmed transition hover:bg-slate-850 hover:text-bright",
+        "group flex h-6 items-center gap-1 rounded px-2 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright",
         fullWidth && "w-full justify-between",
         className
       )}
@@ -121,7 +121,7 @@ function PopoverArrowTrigger({
       <Paragraph
         variant="extra-small"
         className={cn(
-          "flex transition group-hover:text-bright",
+          "flex transition group-hover:text-text-bright",
           overflowHidden && "overflow-hidden"
         )}
       >
@@ -129,7 +129,7 @@ function PopoverArrowTrigger({
       </Paragraph>
       <ChevronDownIcon
         className={cn(
-          "h-3 w-3 min-w-[0.75rem] text-slate-600 transition group-hover:text-bright",
+          "h-3 w-3 min-w-[0.75rem] text-charcoal-600 transition group-hover:text-text-bright",
           isOpen && "-rotate-180"
         )}
       />
@@ -146,11 +146,11 @@ function PopoverVerticalEllipseTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded px-1.5 py-1.5 text-dimmed transition hover:bg-slate-750 hover:text-bright",
+        "group flex items-center justify-end gap-1 rounded px-1.5 py-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright",
         className
       )}
     >
-      <EllipsisVerticalIcon className={cn("h-5 w-5 transition group-hover:text-bright")} />
+      <EllipsisVerticalIcon className={cn("h-5 w-5 transition group-hover:text-text-bright")} />
     </PopoverTrigger>
   );
 }
diff --git a/apps/webapp/app/components/primitives/RadioButton.tsx b/apps/webapp/app/components/primitives/RadioButton.tsx
index 43feed10e..277855c31 100644
--- a/apps/webapp/app/components/primitives/RadioButton.tsx
+++ b/apps/webapp/app/components/primitives/RadioButton.tsx
@@ -8,47 +8,47 @@ import { Paragraph } from "./Paragraph";
 const variants = {
   "simple/small": {
     button: "w-fit pr-4 data-[disabled]:opacity-70",
-    label: "text-sm text-bright mt-0.5 select-none",
-    description: "text-dimmed",
+    label: "text-sm text-text-bright mt-0.5 select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-1",
     icon: "w-8 h-8 mb-2",
   },
   simple: {
     button: "w-fit pr-4 data-[disabled]:opacity-70",
-    label: "text-bright select-none",
-    description: "text-dimmed",
+    label: "text-text-bright select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-1",
     icon: "w-8 h-8 mb-2",
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-slate-800 hover:bg-slate-850 hover:border-slate-750 transition data-[disabled]:opacity-70 data-[disabled]:hover:bg-transparent data-[state=checked]:bg-slate-850",
-    label: "text-sm text-bright select-none",
-    description: "text-dimmed",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition data-[disabled]:opacity-70 data-[disabled]:hover:bg-transparent data-[state=checked]:bg-charcoal-850",
+    label: "text-sm text-text-bright select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-0",
     icon: "w-8 h-8 mb-2",
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-slate-800 hover:bg-slate-850 hover:border-slate-750 transition data-[state=checked]:bg-slate-850 data-[disabled]:opacity-70",
-    label: "text-bright select-none",
-    description: "text-dimmed",
+      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-800 hover:bg-charcoal-850 hover:border-charcoal-750 transition data-[state=checked]:bg-charcoal-850 data-[disabled]:opacity-70",
+    label: "text-text-bright select-none",
+    description: "text-text-dimmed",
     inputPosition: "mt-1",
     icon: "w-8 h-8 mb-2",
   },
   description: {
     button:
-      "w-full p-2.5 hover:bg-slate-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-slate-850 border-slate-800 border rounded-sm",
-    label: "text-bright font-semibold -mt-1 text-left",
-    description: "text-dimmed -mt-0 text-left",
+      "w-full p-2.5 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-800 border rounded-sm",
+    label: "text-text-bright font-semibold -mt-1 text-left",
+    description: "text-text-dimmed -mt-0 text-left",
     inputPosition: "mt-0",
     icon: "w-8 h-8 mb-2",
   },
   icon: {
     button:
-      "w-full p-2.5 pb-4 hover:bg-slate-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-slate-850 border-slate-800 border rounded-sm",
-    label: "text-bright font-semibold -mt-1 text-left",
-    description: "text-dimmed -mt-0 text-left",
+      "w-full p-2.5 pb-4 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-800 border rounded-sm",
+    label: "text-text-bright font-semibold -mt-1 text-left",
+    description: "text-text-dimmed -mt-0 text-left",
     inputPosition: "mt-0",
     icon: "mb-3",
   },
@@ -70,7 +70,7 @@ export function RadioButtonCircle({
   return (
     <div
       className={cn(
-        "aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-slate-700 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         boxClassName
       )}
     >
@@ -129,7 +129,7 @@ export const RadioGroupItem = React.forwardRef<
       >
         <div
           className={cn(
-            "aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-slate-700 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 shrink-0 overflow-hidden rounded-full border border-charcoal-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             variation.inputPosition
           )}
         >
diff --git a/apps/webapp/app/components/primitives/Resizable.tsx b/apps/webapp/app/components/primitives/Resizable.tsx
index d95ec6b42..776b210f3 100644
--- a/apps/webapp/app/components/primitives/Resizable.tsx
+++ b/apps/webapp/app/components/primitives/Resizable.tsx
@@ -8,7 +8,7 @@ const ResizablePanelGroup = ({
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
   <ResizablePrimitive.PanelGroup
-    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+    className={cn("flex w-full data-[panel-group-direction=vertical]:flex-col", className)}
     {...props}
   />
 );
@@ -24,16 +24,16 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "focus-visible:ring-ring group relative flex w-0.75 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 hover:w-0.75 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     )}
     {...props}
   >
-    <div className="absolute left-[0.0625rem] top-0 h-full w-px bg-border group-hover:left-0 group-hover:w-0.75 group-hover:bg-indigo-500" />
+    <div className="absolute left-[0.0625rem] top-0 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-lavender-500" />
     {withHandle && (
-      <div className="z-10 flex h-5 w-3 flex-col items-center justify-center gap-[0.1875rem] bg-background group-hover:hidden">
+      <div className="z-10 flex h-5 w-3 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden">
         {Array.from({ length: 3 }).map((_, index) => (
-          <div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-slate-750" />
+          <div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-charcoal-600" />
         ))}
       </div>
     )}
diff --git a/apps/webapp/app/components/primitives/SegmentedControl.tsx b/apps/webapp/app/components/primitives/SegmentedControl.tsx
index b01d9eb9f..5576ad2cf 100644
--- a/apps/webapp/app/components/primitives/SegmentedControl.tsx
+++ b/apps/webapp/app/components/primitives/SegmentedControl.tsx
@@ -25,7 +25,7 @@ export default function SegmentedControl({
   onChange,
 }: SegmentedControlProps) {
   return (
-    <div className={cn("flex h-10 rounded bg-slate-850", fullWidth ? "w-full" : "w-fit")}>
+    <div className={cn("flex h-10 rounded bg-charcoal-700", fullWidth ? "w-full" : "w-fit")}>
       <RadioGroup
         value={value}
         defaultValue={defaultValue ?? options[0].value}
@@ -46,11 +46,11 @@ export default function SegmentedControl({
                 cn(
                   "relative flex h-full grow cursor-pointer text-center font-normal focus:outline-none",
                   active
-                    ? "ring-offset-2 focus-visible:ring focus-visible:ring-indigo-500 focus-visible:ring-opacity-60"
+                    ? "ring-offset-2 focus-visible:ring focus-visible:ring-primary focus-visible:ring-opacity-60"
                     : "",
                   checked
-                    ? "text-bright"
-                    : "rounded-[2px] text-dimmed transition hover:bg-slate-750/50 hover:text-bright"
+                    ? "text-text-bright"
+                    : "rounded-[2px] text-text-dimmed transition hover:bg-charcoal-750/50 hover:text-text-bright"
                 )
               }
             >
@@ -64,7 +64,7 @@ export default function SegmentedControl({
                       <motion.div
                         layoutId={`segmented-control-${name}`}
                         transition={{ duration: 0.4, type: "spring" }}
-                        className="absolute inset-0 rounded-[2px] bg-indigo-600 shadow-md"
+                        className="absolute inset-0 rounded-[2px] shadow-md outline outline-3 outline-primary"
                       ></motion.div>
                     )}
                   </div>
diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
index 3d3b32af2..3610790b7 100644
--- a/apps/webapp/app/components/primitives/Select.tsx
+++ b/apps/webapp/app/components/primitives/Select.tsx
@@ -6,9 +6,10 @@ import { Check, ChevronDown } from "lucide-react";
 import { cn } from "~/utils/cn";
 
 const sizes = {
-  "secondary/small": "text-xs h-6 bg-tertiary hover:bg-tertiary-foreground pr-2 pl-1 bg-slate-800",
+  "secondary/small":
+    "text-xs h-6 bg-tertiary hover:bg-tertiary-foreground pr-2 pl-1 bg-charcoal-800",
   medium:
-    "text-sm h-8 bg-slate-850 border border-slate-800 hover:bg-slate-800 hover:border-slate-750 px-2.5",
+    "text-sm h-8 bg-charcoal-850 border border-charcoal-800 hover:bg-charcoal-800 hover:border-charcoal-750 px-2.5",
 };
 
 export type SelectProps = {
@@ -28,7 +29,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        "group flex items-center justify-between gap-x-2 rounded text-dimmed ring-offset-background transition placeholder:text-dimmed hover:text-bright focus-visible:bg-tertiary-foreground focus-visible:text-bright focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+        "ring-offset-background focus-visible:bg-tertiary-foreground focus-visible:ring-ring group flex items-center justify-between gap-x-2 rounded text-text-dimmed transition placeholder:text-text-dimmed hover:text-text-bright focus-visible:text-text-bright focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
         width === "full" ? "w-full" : "w-min",
         sizeClassName,
         className
@@ -39,7 +40,7 @@ const SelectTrigger = React.forwardRef<
       <SelectPrimitive.Icon asChild>
         <ChevronDown
           className={cn(
-            "h-4 w-4 text-dimmed transition group-hover:text-bright group-focus:text-bright"
+            "h-4 w-4 text-text-dimmed transition group-hover:text-text-bright group-focus:text-text-bright"
           )}
         />
       </SelectPrimitive.Icon>
@@ -56,7 +57,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-max overflow-hidden rounded-md border border-slate-700 bg-popover text-bright shadow-md animate-in fade-in-40",
+        "relative z-50 min-w-max overflow-hidden rounded-md border border-charcoal-700 bg-background-dimmed text-text-bright shadow-md animate-in fade-in-40",
         position === "popper" && "translate-y-1",
         className
       )}
@@ -84,7 +85,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "-ml-1 -mr-1 mb-1 bg-slate-900 py-1.5 pl-2 pr-2 font-sans text-xxs font-normal uppercase leading-normal tracking-wider text-dimmed first-of-type:-mt-0",
+      "-ml-1 -mr-1 mb-1 bg-charcoal-900 py-1.5 pl-2 pr-2 font-sans text-xxs font-normal uppercase leading-normal tracking-wider text-text-dimmed first-of-type:-mt-0",
       className
     )}
     {...props}
@@ -99,7 +100,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative my-0.5 flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-12 text-sm outline-none transition first-of-type:my-1 last-of-type:my-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-750 focus:bg-slate-750/50",
+      "relative my-0.5 flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-12 text-sm outline-none transition first-of-type:my-1 last-of-type:my-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-charcoal-750 focus:bg-charcoal-750/50",
       className
     )}
     {...props}
@@ -121,7 +122,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));
diff --git a/apps/webapp/app/components/primitives/Sheet.tsx b/apps/webapp/app/components/primitives/Sheet.tsx
index 844c29ca1..dd9d1895d 100644
--- a/apps/webapp/app/components/primitives/Sheet.tsx
+++ b/apps/webapp/app/components/primitives/Sheet.tsx
@@ -41,7 +41,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-midnight-900/80 transition animate-in duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-background-dimmed/80 transition duration-200 animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
       className
     )}
     {...props}
@@ -51,7 +51,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 scale-100 gap-4 bg-midnight-900 shadow-lg shadow-white/10 opacity-100 border-l border-ui-border",
+  "fixed z-50 scale-100 gap-4 bg-background-dimmed shadow-lg shadow-white/10 opacity-100 border-l border-grid-bright",
   {
     variants: {
       position: {
@@ -154,8 +154,8 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       <div className="grid max-h-full grid-rows-[2.75rem_1fr] overflow-hidden">
-        <div className="flex items-center gap-2 border-b border-ui-border p-2">
-          <SheetPrimitive.Close className="rounded-sm p-1 transition hover:bg-slate-800 disabled:pointer-events-none">
+        <div className="flex items-center gap-2 border-b border-grid-bright p-2">
+          <SheetPrimitive.Close className="rounded-sm p-1 transition hover:bg-charcoal-800 disabled:pointer-events-none">
             <NamedIcon name="close" className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
@@ -171,7 +171,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName;
 export const SheetBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700",
+      "overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
       className
     )}
     {...props}
@@ -181,7 +181,7 @@ export const SheetBody = ({ className, ...props }: React.HTMLAttributes<HTMLDivE
 export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "mx-4 flex shrink-0 items-center gap-4 border-b border-ui-border py-3.5",
+      "mx-4 flex shrink-0 items-center gap-4 border-b border-grid-bright py-3.5",
       className
     )}
     {...props}
@@ -194,7 +194,7 @@ export const SheetFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn("shrink-0", className)} {...props}>
-    <div className="mx-4 border-t border-ui-border py-3">{children}</div>
+    <div className="mx-4 border-t border-grid-bright py-3">{children}</div>
   </div>
 );
 
diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx
index 8be993c12..1bf0e3cbc 100644
--- a/apps/webapp/app/components/primitives/ShortcutKey.tsx
+++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx
@@ -5,9 +5,9 @@ import { useOperatingSystem } from "./OperatingSystemProvider";
 
 const variants = {
   small:
-    "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-dimmed group-hover:text-bright/80 group-hover:border-dimmed/60 transition uppercase",
+    "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase",
   medium:
-    "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-dimmed group-hover:text-bright/80 group-hover:border-dimmed/60 transition uppercase",
+    "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase",
 };
 
 export type ShortcutKeyVariant = keyof typeof variants;
diff --git a/apps/webapp/app/components/primitives/Slider.tsx b/apps/webapp/app/components/primitives/Slider.tsx
new file mode 100644
index 000000000..928ada018
--- /dev/null
+++ b/apps/webapp/app/components/primitives/Slider.tsx
@@ -0,0 +1,52 @@
+import * as RadixSlider from "@radix-ui/react-slider";
+import { ComponentProps } from "react";
+import { cn } from "~/utils/cn";
+import { Icon, RenderIcon } from "./Icon";
+
+const variants = {
+  tertiary: {
+    container: "h-6 gap-1 rounded-sm hover:bg-charcoal-700 px-1",
+    icons: "h-4 w-4 text-text-bright",
+    root: "h-4",
+    track: "h-1 bg-grid-bright group-hover:bg-background-dimmed",
+    range: "bg-transparent group-hover:bg-secondary",
+    thumb:
+      "h-3 w-3 border-2 border-text-dimmed bg-grid-bright shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] hover:border-text-dimmed focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)]",
+  },
+};
+
+type VariantName = keyof typeof variants;
+
+export type SliderProps = ComponentProps<typeof RadixSlider.Root> & {
+  LeadingIcon?: RenderIcon;
+  TrailingIcon?: RenderIcon;
+  variant: VariantName;
+};
+
+export function Slider({ variant, className, LeadingIcon, TrailingIcon, ...props }: SliderProps) {
+  const variation = variants[variant];
+  return (
+    <div className={cn("group flex items-center", variation.container)}>
+      {LeadingIcon && <Icon icon={LeadingIcon} className={variation.icons} />}
+      <RadixSlider.Root
+        className={cn(
+          "relative flex touch-none select-none items-center",
+          variation.root,
+          className
+        )}
+        {...props}
+      >
+        <RadixSlider.Track className={cn("relative grow rounded-full", variation.track)}>
+          <RadixSlider.Range className={cn("absolute h-full rounded-full", variation.range)} />
+        </RadixSlider.Track>
+        <RadixSlider.Thumb
+          className={cn(
+            "block cursor-pointer rounded-full transition focus:outline-none",
+            variation.thumb
+          )}
+        />
+      </RadixSlider.Root>
+      {TrailingIcon && <Icon icon={TrailingIcon} className={variation.icons} />}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/StepNumber.tsx b/apps/webapp/app/components/primitives/StepNumber.tsx
index 1ae524bff..8cf198ba4 100644
--- a/apps/webapp/app/components/primitives/StepNumber.tsx
+++ b/apps/webapp/app/components/primitives/StepNumber.tsx
@@ -21,14 +21,14 @@ export function StepNumber({
     <div className={cn("mr-3", className)}>
       {active ? (
         <div className="flex items-center gap-x-3">
-          <span className="flex h-6 w-6 items-center justify-center rounded bg-green-600 py-1 text-xs font-semibold text-slate-900 shadow">
+          <span className="flex h-6 w-6 items-center justify-center rounded bg-green-600 py-1 text-xs font-semibold text-charcoal-900 shadow">
             {stepNumber}
           </span>
           <Header2>{title}</Header2>
         </div>
       ) : (
         <div className="flex items-center gap-x-3">
-          <span className="flex h-6 w-6 items-center justify-center rounded border border-slate-700 bg-slate-800 py-1 text-xs font-semibold text-dimmed shadow">
+          <span className="flex h-6 w-6 items-center justify-center rounded border border-charcoal-700 bg-charcoal-800 py-1 text-xs font-semibold text-text-dimmed shadow">
             {complete ? "✓" : stepNumber}
           </span>
 
diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx
index b7bef1169..f4e1c67e0 100644
--- a/apps/webapp/app/components/primitives/Switch.tsx
+++ b/apps/webapp/app/components/primitives/Switch.tsx
@@ -6,16 +6,16 @@ import { cn } from "~/utils/cn";
 
 const variations = {
   large: {
-    container: "flex items-center gap-x-2 rounded-md hover:bg-slate-850 p-2",
+    container: "flex items-center gap-x-2 rounded-md hover:bg-charcoal-850 p-2",
     root: "h-6 w-11",
     thumb: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-    text: "text-sm text-slate-400 group-hover:text-slate-200",
+    text: "text-sm text-charcoal-400 group-hover:text-charcoal-200",
   },
   small: {
-    container: "flex items-center gap-x-1.5 rounded hover:bg-slate-850 pr-1 py-[0.1rem] pl-1.5",
+    container: "flex items-center gap-x-1.5 rounded hover:bg-charcoal-850 pr-1 py-[0.1rem] pl-1.5",
     root: "h-3 w-6",
     thumb: "h-2.5 w-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
-    text: "text-xs text-slate-400 group-hover:text-slate-200 hover:cursor-pointer",
+    text: "text-xs text-charcoal-400 group-hover:text-charcoal-200 hover:cursor-pointer",
   },
 };
 
@@ -37,14 +37,14 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
         ) : null}
         <div
           className={cn(
-            "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-primary group-data-[state=unchecked]:bg-slate-700 focus-visible:outline-none",
+            "group-focus-visible:ring-ring group-focus-visible:ring-offset-background peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-focus-visible:ring-2 group-focus-visible:ring-offset-2 group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-secondary group-data-[state=unchecked]:bg-charcoal-700 focus-visible:outline-none",
             root
           )}
         >
           <SwitchPrimitives.Thumb
             className={cn(
               thumb,
-              "pointer-events-none block rounded-full bg-slate-200 shadow-lg ring-0 transition-transform"
+              "pointer-events-none block rounded-full bg-charcoal-200 shadow-lg ring-0 transition group-data-[state=checked]:bg-charcoal-700"
             )}
           />
         </div>
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index e698a47d5..29f9cd059 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -16,7 +16,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
     return (
       <div
         className={cn(
-          "overflow-x-auto whitespace-nowrap rounded-md border border-ui-border scrollbar-thin scrollbar-track-midnight-850 scrollbar-thumb-slate-700",
+          "overflow-x-auto whitespace-nowrap rounded-md border border-grid-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
           containerClassName,
           fullWidth && "w-full"
         )}
@@ -39,7 +39,7 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
     return (
       <thead
         ref={ref}
-        className={cn("rounded-t-md", "relative divide-y divide-ui-border bg-slate-850", className)}
+        className={cn("rounded-t-md", "relative divide-y divide-grid-dimmed", className)}
       >
         {children}
       </thead>
@@ -55,7 +55,7 @@ type TableBodyProps = {
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   ({ className, children }, ref) => {
     return (
-      <tbody ref={ref} className={cn("relative divide-y divide-ui-border", className)}>
+      <tbody ref={ref} className={cn("relative divide-y divide-grid-dimmed", className)}>
         {children}
       </tbody>
     );
@@ -106,7 +106,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         ref={ref}
         scope="col"
         className={cn(
-          "px-4 py-2 align-middle text-xxs font-normal uppercase tracking-wider text-dimmed",
+          "px-4 py-2 align-middle text-xxs font-normal uppercase tracking-wider text-text-dimmed",
           alignmentClassName,
           className
         )}
@@ -126,7 +126,7 @@ type TableCellProps = TableCellBasicProps & {
 };
 
 const stickyStyles =
-  "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem] before:bg-gradient-to-r before:from-transparent before:to-background before:content-[''] group-hover:before:to-slate-900";
+  "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem] before:bg-gradient-to-r before:from-transparent before:to-background before:content-[''] group-hover:before:to-charcoal-900";
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   (
@@ -153,7 +153,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
     }
 
     const flexClasses = cn(
-      "flex w-full whitespace-nowrap px-4 py-3 text-xs text-dimmed",
+      "flex w-full whitespace-nowrap px-4 py-3 text-xs text-text-dimmed",
       alignment === "left"
         ? "justify-start text-left"
         : alignment === "center"
@@ -165,9 +165,9 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       <td
         ref={ref}
         className={cn(
-          "text-xs text-slate-400",
+          "text-xs text-charcoal-400",
           to || onClick || hasAction
-            ? "cursor-pointer group-hover:bg-slate-900"
+            ? "cursor-pointer group-hover:bg-charcoal-900"
             : "px-4 py-3 align-middle",
           !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
@@ -211,7 +211,7 @@ export const TableCellChevron = forwardRef<
       alignment="right"
     >
       {children}
-      <ChevronRightIcon className="h-4 w-4 text-dimmed transition group-hover:text-bright" />
+      <ChevronRightIcon className="h-4 w-4 text-text-dimmed transition group-hover:text-text-bright" />
     </TableCell>
   );
 });
@@ -238,7 +238,7 @@ export const TableCellMenu = forwardRef<
       <Popover onOpenChange={(open) => setIsOpen(open)}>
         <PopoverVerticalEllipseTrigger isOpen={isOpen} />
         <PopoverContent
-          className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
+          className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
           align="end"
         >
           <div className="flex flex-col gap-1 p-1">{children}</div>
diff --git a/apps/webapp/app/components/primitives/Tabs.tsx b/apps/webapp/app/components/primitives/Tabs.tsx
index 00c701a30..c675e2b82 100644
--- a/apps/webapp/app/components/primitives/Tabs.tsx
+++ b/apps/webapp/app/components/primitives/Tabs.tsx
@@ -8,12 +8,12 @@ export type TabsProps = {
     to: string;
   }[];
   className?: string;
-  layoutId: string
+  layoutId: string;
 };
 
 export function Tabs({ tabs, className, layoutId }: TabsProps) {
   return (
-    <div className={cn(`flex flex-row gap-x-6 border-b border-ui-border`, className)}>
+    <div className={cn(`flex flex-row gap-x-6 border-b border-grid-bright`, className)}>
       {tabs.map((tab, index) => (
         <NavLink key={index} to={tab.to} className="group flex flex-col items-center pt-1" end>
           {({ isActive, isPending }) => (
@@ -21,7 +21,7 @@ export function Tabs({ tabs, className, layoutId }: TabsProps) {
               <span
                 className={cn(
                   "text-sm transition duration-200",
-                  isActive || isPending ? "text-indigo-500" : "text-slate-200"
+                  isActive || isPending ? "text-indigo-500" : "text-charcoal-200"
                 )}
               >
                 {tab.label}
@@ -29,7 +29,7 @@ export function Tabs({ tabs, className, layoutId }: TabsProps) {
               {isActive || isPending ? (
                 <motion.div layoutId={layoutId} className="mt-1 h-0.5 w-full bg-indigo-500" />
               ) : (
-                <div className="mt-1 h-0.5 w-full bg-slate-500 opacity-0 transition duration-200 group-hover:opacity-100" />
+                <div className="mt-1 h-0.5 w-full bg-charcoal-500 opacity-0 transition duration-200 group-hover:opacity-100" />
               )}
             </>
           )}
diff --git a/apps/webapp/app/components/primitives/TextArea.tsx b/apps/webapp/app/components/primitives/TextArea.tsx
index fafff8e03..5e56452c7 100644
--- a/apps/webapp/app/components/primitives/TextArea.tsx
+++ b/apps/webapp/app/components/primitives/TextArea.tsx
@@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
       {...props}
       rows={rows ?? 6}
       className={cn(
-        "w-full rounded-md border border-slate-800 bg-slate-850 px-3 text-sm text-bright ring-offset-background transition file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground hover:border-slate-750 hover:bg-slate-800 focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+        "ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:ring-ring focus-visible:ring-ring w-full rounded-md border border-charcoal-800 bg-charcoal-850 px-3 text-sm text-text-bright transition file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-750 hover:bg-charcoal-800 focus:outline-none focus:ring-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
     />
diff --git a/apps/webapp/app/components/primitives/TextLink.tsx b/apps/webapp/app/components/primitives/TextLink.tsx
index 5762d9f05..984edbf61 100644
--- a/apps/webapp/app/components/primitives/TextLink.tsx
+++ b/apps/webapp/app/components/primitives/TextLink.tsx
@@ -6,7 +6,7 @@ const variations = {
   primary:
     "text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group",
   secondary:
-    "text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group",
+    "text-text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group",
 } as const;
 
 type TextLinkProps = {
diff --git a/apps/webapp/app/components/primitives/Timeline.tsx b/apps/webapp/app/components/primitives/Timeline.tsx
new file mode 100644
index 000000000..23ea46d20
--- /dev/null
+++ b/apps/webapp/app/components/primitives/Timeline.tsx
@@ -0,0 +1,243 @@
+import {
+  Component,
+  ComponentPropsWithoutRef,
+  Fragment,
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+
+interface MousePosition {
+  x: number;
+  y: number;
+}
+const MousePositionContext = createContext<MousePosition | undefined>(undefined);
+export function MousePositionProvider({ children }: { children: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<MousePosition | undefined>(undefined);
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!ref.current) {
+        setPosition(undefined);
+        return;
+      }
+
+      const { top, left, width, height } = ref.current.getBoundingClientRect();
+      const x = (e.clientX - left) / width;
+      const y = (e.clientY - top) / height;
+
+      if (x < 0 || x > 1 || y < 0 || y > 1) {
+        setPosition(undefined);
+        return;
+      }
+
+      setPosition({ x, y });
+    },
+    [ref.current]
+  );
+
+  return (
+    <div
+      ref={ref}
+      onMouseEnter={handleMouseMove}
+      onMouseLeave={() => setPosition(undefined)}
+      onMouseMove={handleMouseMove}
+      style={{ width: "100%", height: "100%" }}
+    >
+      <MousePositionContext.Provider value={position}>{children}</MousePositionContext.Provider>
+    </div>
+  );
+}
+export const useMousePosition = () => {
+  return useContext(MousePositionContext);
+};
+
+type TimelineContextState = {
+  startMs: number;
+  durationMs: number;
+};
+const TimelineContext = createContext<TimelineContextState>({} as TimelineContextState);
+
+function useTimeline() {
+  return useContext(TimelineContext);
+}
+
+type TimelineMousePositionContextState = { x: number; y: number } | undefined;
+const TimelineMousePositionContext = createContext<TimelineMousePositionContextState>(undefined);
+function useTimelineMousePosition() {
+  return useContext(TimelineMousePositionContext);
+}
+
+export type RootProps = {
+  /** If the timeline doesn't start at zero. Doesn't impact layout but gives you the times back */
+  startMs?: number;
+  durationMs: number;
+  /** A number between 0 and 1, determines the width between min and max */
+  scale: number;
+  minWidth: number;
+  maxWidth: number;
+  children?: ReactNode;
+  className?: string;
+};
+
+/** The main element that determines the dimensions for all sub-elements */
+export function Root({
+  startMs = 0,
+  durationMs,
+  scale,
+  minWidth,
+  maxWidth,
+  children,
+  className,
+}: RootProps) {
+  const pixelWidth = calculatePixelWidth(minWidth, maxWidth, scale);
+
+  return (
+    <TimelineContext.Provider value={{ startMs, durationMs }}>
+      <div
+        className={className}
+        style={{
+          position: "relative",
+          width: `${pixelWidth}px`,
+        }}
+      >
+        <MousePositionProvider>{children}</MousePositionProvider>
+      </div>
+    </TimelineContext.Provider>
+  );
+}
+
+export type RowProps = ComponentPropsWithoutRef<"div">;
+
+/** This simply acts as a container, with position relative.
+ *  This allows you to nest "Rows" and put heights on them */
+export function Row({ className, children, ...props }: RowProps) {
+  return (
+    <div {...props} className={className} style={{ ...props.style, position: "relative" }}>
+      {children}
+    </div>
+  );
+}
+
+export type PointProps = {
+  ms: number;
+  className?: string;
+  children?: (ms: number) => ReactNode;
+};
+
+/** A point in time, it has no duration */
+export function Point({ ms, className, children }: PointProps) {
+  const { startMs, durationMs } = useTimeline();
+  const position = inverseLerp(startMs, startMs + durationMs, ms);
+  return (
+    <div
+      className={className}
+      style={{
+        position: "absolute",
+        left: `${position * 100}%`,
+      }}
+    >
+      {children && children(ms)}
+    </div>
+  );
+}
+
+export type SpanProps = {
+  startMs: number;
+  durationMs: number;
+  className?: string;
+  children?: ReactNode;
+};
+
+/** As span of time with a start and duration */
+export function Span({ startMs, durationMs, className, children }: SpanProps) {
+  const { startMs: rootStartMs, durationMs: rootDurationMs } = useTimeline();
+  const position = inverseLerp(rootStartMs, rootStartMs + rootDurationMs, startMs);
+  const width =
+    inverseLerp(rootStartMs, rootStartMs + rootDurationMs, startMs + durationMs) - position;
+  return (
+    <div
+      className={className}
+      style={{
+        position: "absolute",
+        left: `${position * 100}%`,
+        width: `${width * 100}%`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type EquallyDistributeProps = {
+  count: number;
+  children: (ms: number, index: number) => ReactNode;
+};
+
+/** Render a child equally distributed across the duration */
+export function EquallyDistribute({ count, children }: EquallyDistributeProps) {
+  const { startMs, durationMs } = useTimeline();
+
+  return (
+    <>
+      {Array.from({ length: count }).map((_, index) => {
+        const ms = startMs + (durationMs / (count - 1)) * index;
+        return <Fragment key={index}>{children(ms, index)}</Fragment>;
+      })}
+    </>
+  );
+}
+
+export type FollowCursorProps = {
+  children: (ms: number) => ReactNode;
+};
+
+/** Renders a child that follows the cursor */
+export function FollowCursor({ children }: FollowCursorProps) {
+  const { startMs, durationMs } = useTimeline();
+  const relativeMousePosition = useMousePosition();
+  const ms = relativeMousePosition?.x
+    ? lerp(startMs, startMs + durationMs, relativeMousePosition.x)
+    : undefined;
+
+  if (ms === undefined) return null;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        left: relativeMousePosition ? `${relativeMousePosition?.x * 100}%` : 0,
+        height: "100%",
+        pointerEvents: "none",
+      }}
+    >
+      {children(ms)}
+    </div>
+  );
+}
+
+/** Gives the total width of the root */
+function calculatePixelWidth(minWidth: number, maxWidth: number, scale: number) {
+  return lerp(minWidth, maxWidth, scale);
+}
+
+/** Linearly interpolates between the min/max values, using t.
+ * It can't go outside the range   */
+function lerp(min: number, max: number, t: number) {
+  return min + (max - min) * clamp(t, 0, 1);
+}
+
+/** Inverse lerp */
+function inverseLerp(min: number, max: number, value: number) {
+  return (value - min) / (max - min);
+}
+
+/** Clamps a value between a min and max */
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
diff --git a/apps/webapp/app/components/primitives/Toast.tsx b/apps/webapp/app/components/primitives/Toast.tsx
index 8bd6954a1..d0b1eab67 100644
--- a/apps/webapp/app/components/primitives/Toast.tsx
+++ b/apps/webapp/app/components/primitives/Toast.tsx
@@ -39,7 +39,7 @@ export function ToastUI({
 }) {
   return (
     <div
-      className={`self-end rounded-md border border-border bg-background`}
+      className={`self-end rounded-md border border-grid-bright bg-background-dimmed`}
       style={{
         width: toastWidth,
       }}
@@ -50,9 +50,9 @@ export function ToastUI({
         ) : (
           <ExclamationCircleIcon className="mt-1 h-6 w-6 min-w-[1.5rem] text-rose-600" />
         )}
-        <Paragraph className="py-1 text-dimmed">{message}</Paragraph>
+        <Paragraph className="py-1 text-text-dimmed">{message}</Paragraph>
         <button
-          className="ms-auto rounded p-2 text-dimmed transition hover:bg-midnight-800 hover:text-bright"
+          className="hover:bg-midnight-800 ms-auto rounded p-2 text-text-dimmed transition hover:text-text-bright"
           onClick={() => toast.dismiss(t)}
         >
           <XMarkIcon className="h-4 w-4" />
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index f855a0fbb..fd0ded4a3 100644
--- a/apps/webapp/app/components/primitives/Tooltip.tsx
+++ b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -4,8 +4,8 @@ import { cn } from "~/utils/cn";
 
 const variantClasses = {
   basic:
-    "bg-popover border border-slate-800 rounded-md px-3 py-1.5 text-sm text-bright shadow-md fade-in-50",
-  dark: "bg-background border border-border rounded px-3 py-2 text-sm text-bright shadow-md fade-in-50",
+    "bg-background-dimmed border border-charcoal-800 rounded-md px-3 py-1.5 text-sm text-text-bright shadow-md fade-in-50",
+  dark: "bg-background-dimmed border border-grid-bright rounded px-3 py-2 text-sm text-text-bright shadow-md fade-in-50",
 };
 
 type Variant = keyof typeof variantClasses;
@@ -15,7 +15,7 @@ const TooltipProvider = TooltipPrimitive.Provider;
 const TooltipArrow = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Arrow>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
->(({ ...props }, ref) => <TooltipPrimitive.Arrow className="z-50 fill-popover" {...props} />);
+>(({ ...props }, ref) => <TooltipPrimitive.Arrow className="fill-popover z-50" {...props} />);
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
 
 const Tooltip = React.forwardRef<
@@ -98,7 +98,7 @@ export function LoginTooltip({
         <TooltipTrigger asChild>{children}</TooltipTrigger>
         <TooltipContent
           className={cn(
-            "max-w-xs border-slate-800 bg-slate-900 px-5 py-4 backdrop-blur-md",
+            "max-w-xs border-charcoal-800 bg-charcoal-900 px-5 py-4 backdrop-blur-md",
             className
           )}
           side={side}
diff --git a/apps/webapp/app/components/primitives/TreeView/TreeView.tsx b/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
index 5613667f1..f3d955724 100644
--- a/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
+++ b/apps/webapp/app/components/primitives/TreeView/TreeView.tsx
@@ -1,5 +1,15 @@
 import { VirtualItem, Virtualizer, useVirtualizer } from "@tanstack/react-virtual";
-import { Fragment, RefObject, useCallback, useEffect, useReducer, useRef, useState } from "react";
+import {
+  Fragment,
+  MutableRefObject,
+  RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
 import { UnmountClosed } from "react-collapse";
 import { cn } from "~/utils/cn";
 import { Changes, NodeState, NodesState, reducer } from "./reducer";
@@ -14,7 +24,6 @@ import {
 export type TreeViewProps<TData> = {
   tree: FlatTree<TData>;
   parentClassName?: string;
-
   renderNode: (params: {
     node: FlatTreeItem<TData>;
     state: NodeState;
@@ -25,7 +34,9 @@ export type TreeViewProps<TData> = {
   nodes: UseTreeStateOutput["nodes"];
   autoFocus?: boolean;
   virtualizer: Virtualizer<HTMLElement, Element>;
-  parentRef: RefObject<any>;
+  parentRef: MutableRefObject<HTMLElement | null>;
+  scrollRef?: MutableRefObject<HTMLElement | null>;
+  onScroll?: (scrollTop: number) => void;
 } & Pick<UseTreeStateOutput, "getTreeProps" | "getNodeProps">;
 
 export function TreeView<TData>({
@@ -38,20 +49,43 @@ export function TreeView<TData>({
   parentClassName,
   virtualizer,
   parentRef,
+  scrollRef,
+  onScroll,
 }: TreeViewProps<TData>) {
   useEffect(() => {
     if (autoFocus) {
       parentRef.current?.focus();
     }
-  }, [autoFocus, parentRef]);
+  }, [autoFocus, parentRef.current]);
 
   const virtualItems = virtualizer.getVirtualItems();
 
+  const scrollCallback = useCallback(
+    (event: Event) => {
+      if (!onScroll) return;
+      const target = event.target as HTMLElement;
+      onScroll?.(target.scrollTop);
+    },
+    [onScroll]
+  );
+
+  useEffect(() => {
+    //subscribe to parentRef scroll event
+    if (!scrollRef?.current || onScroll === undefined) return;
+    scrollRef.current.addEventListener("scroll", scrollCallback);
+    return () => scrollRef.current?.removeEventListener("scroll", scrollCallback);
+  }, [scrollRef?.current]);
+
   return (
     <div
-      ref={parentRef}
+      ref={(element) => {
+        parentRef.current = element;
+        if (scrollRef) {
+          scrollRef.current = element;
+        }
+      }}
       className={cn(
-        "w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700 focus-within:outline-none",
+        "w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 focus-within:outline-none",
         parentClassName
       )}
       {...getTreeProps()}
@@ -75,7 +109,10 @@ export function TreeView<TData>({
           }}
         >
           {virtualItems.map((virtualItem) => {
-            const node = tree.find((node) => node.id === virtualItem.key)!;
+            const node = tree.find((node) => node.id === virtualItem.key);
+            if (!node) return null;
+            const state = nodes[node.id];
+            if (!state) return null;
             return (
               <div
                 key={node.id}
@@ -84,10 +121,10 @@ export function TreeView<TData>({
                 className="overflow-clip [&_.ReactCollapse--collapse]:transition-all"
                 {...getNodeProps(node.id)}
               >
-                <UnmountClosed key={node.id} isOpened={nodes[node.id].visible}>
+                <UnmountClosed key={node.id} isOpened={state.visible}>
                   {renderNode({
                     node,
-                    state: nodes[node.id],
+                    state,
                     index: virtualItem.index,
                     virtualizer: virtualizer,
                     virtualItem,
@@ -155,6 +192,7 @@ export function useTree<TData>({
   estimatedRowHeight,
   filter,
 }: TreeStateHookProps<TData>): UseTreeStateOutput {
+  const previousNodeCount = useRef(tree.length);
   const previousSelectedId = useRef<string | undefined>(selectedId);
 
   const [state, dispatch] = useReducer(
@@ -176,6 +214,13 @@ export function useTree<TData>({
     }
   }, [state.changes.collapsedIds]);
 
+  useEffect(() => {
+    if (tree.length !== previousNodeCount.current) {
+      previousNodeCount.current = tree.length;
+      dispatch({ type: "UPDATE_TREE", payload: { tree } });
+    }
+  }, [previousNodeCount.current, tree.length]);
+
   const virtualizer = useVirtualizer({
     count: tree.length,
     getItemKey: (index) => tree[index].id,
@@ -365,6 +410,7 @@ export function useTree<TData>({
   const getNodeProps = useCallback(
     (id: string) => {
       const node = state.nodes[id];
+      if (!node) return {};
       const treeItemIndex = tree.findIndex((node) => node.id === id);
       const treeItem = tree[treeItemIndex];
       return {
diff --git a/apps/webapp/app/components/primitives/TreeView/reducer.ts b/apps/webapp/app/components/primitives/TreeView/reducer.ts
index 200a4126d..027b02479 100644
--- a/apps/webapp/app/components/primitives/TreeView/reducer.ts
+++ b/apps/webapp/app/components/primitives/TreeView/reducer.ts
@@ -1,6 +1,8 @@
 import { FlatTree } from "./TreeView";
 import {
   applyVisibility,
+  collapsedIdsFromState,
+  concreteStateFromInput,
   firstVisibleNode,
   generateChanges,
   lastVisibleNode,
@@ -343,6 +345,17 @@ export function reducer(state: TreeState, action: Action): TreeState {
 
       return state;
     }
+    case "UPDATE_TREE": {
+      //update the tree but try and keep the selected and expanded states
+      const selectedId = selectedIdFromState(state.nodes);
+      const collapsedIds = collapsedIdsFromState(state.nodes);
+      const newState = concreteStateFromInput({
+        tree: action.payload.tree,
+        selectedId,
+        collapsedIds,
+      });
+      return newState;
+    }
   }
 
   throw new Error(`Unhandled action type: ${(action as any).type}`);
diff --git a/apps/webapp/app/components/primitives/TreeView/utils.ts b/apps/webapp/app/components/primitives/TreeView/utils.ts
index 251003b18..6fb98b535 100644
--- a/apps/webapp/app/components/primitives/TreeView/utils.ts
+++ b/apps/webapp/app/components/primitives/TreeView/utils.ts
@@ -195,7 +195,7 @@ function difference<T>(a: Set<T>, b: Set<T>): Set<T> {
   return new Set([...a].filter((x) => !b.has(x)));
 }
 
-function collapsedIdsFromState(state: NodesState): string[] {
+export function collapsedIdsFromState(state: NodesState): string[] {
   return Object.entries(state)
     .filter(([_, s]) => s.expanded === false)
     .map(([id]) => id);
diff --git a/apps/webapp/app/components/run/RunCard.tsx b/apps/webapp/app/components/run/RunCard.tsx
index 841ca2954..02b2cb6fe 100644
--- a/apps/webapp/app/components/run/RunCard.tsx
+++ b/apps/webapp/app/components/run/RunCard.tsx
@@ -29,14 +29,14 @@ export function RunPanel({
     <div
       className={cn(
         "overflow-hidden rounded-md border transition duration-150",
-        styleName === "normal" && "bg-slate-900",
+        styleName === "normal" && "bg-charcoal-900",
         selected
           ? "border-green-500"
           : styleName === "normal"
-          ? "border-slate-850"
-          : "border-slate-900",
+          ? "border-charcoal-850"
+          : "border-charcoal-900",
         onClick && "cursor-pointer",
-        onClick && !selected && "hover:border-slate-500/30",
+        onClick && !selected && "hover:border-charcoal-500/30",
         className
       )}
       onClick={() => onClick && onClick()}
@@ -63,7 +63,9 @@ export function RunPanelHeader({
     <div
       className={cn(
         "flex items-center justify-between px-2",
-        styleName === "normal" ? "h-10 border-b border-slate-850 bg-midnight-850 py-2" : "pt-2"
+        styleName === "normal"
+          ? "h-10 border-b border-charcoal-850 bg-background-bright py-2"
+          : "pt-2"
       )}
     >
       <div className="flex items-center gap-2">
@@ -140,7 +142,7 @@ export function RunPanelIconSection({
 }
 
 export function RunPanelDivider() {
-  return <div className="mb-4 border-b border-slate-700 pb-4" />;
+  return <div className="mb-4 border-b border-charcoal-700 pb-4" />;
 }
 
 export function RunPanelIconProperty({
@@ -154,7 +156,7 @@ export function RunPanelIconProperty({
 }) {
   return (
     <div className="flex items-center gap-2">
-      <div className="flex h-8 w-8 items-center justify-center rounded-sm border border-slate-800 bg-slate-850">
+      <div className="flex h-8 w-8 items-center justify-center rounded-sm border border-charcoal-800 bg-charcoal-850">
         {typeof icon === "string" ? <NamedIcon name={icon} className="h-5 w-5" /> : icon}
       </div>
       <div className="flex flex-col gap-0.5">
@@ -191,7 +193,7 @@ export function RunPanelProperties({
 
 export function TaskSeparator({ depth }: { depth: number }) {
   return (
-    <div className="h-4 w-4 border-r border-slate-600" style={{ marginLeft: `${depth}rem` }} />
+    <div className="h-4 w-4 border-r border-charcoal-600" style={{ marginLeft: `${depth}rem` }} />
   );
 }
 
diff --git a/apps/webapp/app/components/run/RunOverview.tsx b/apps/webapp/app/components/run/RunOverview.tsx
index 2a34c4529..8b382ae31 100644
--- a/apps/webapp/app/components/run/RunOverview.tsx
+++ b/apps/webapp/app/components/run/RunOverview.tsx
@@ -29,13 +29,12 @@ import { Header2 } from "../primitives/Headers";
 import { Icon } from "../primitives/Icon";
 import { NamedIcon } from "../primitives/NamedIcon";
 import {
-  PageButtons,
-  PageHeader,
+  PageAccessories,
+  NavBar,
   PageInfoGroup,
   PageInfoProperty,
   PageInfoRow,
   PageTitle,
-  PageTitleRow,
 } from "../primitives/PageHeader";
 import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
@@ -96,79 +95,79 @@ export function RunOverview({ run, trigger, showRerun, paths, currentUser }: Run
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle
-            backButton={{
-              to: paths.back,
-              text: "Runs",
-            }}
-            title={
-              typeof run.number === "number" ? `Run #${run.number}` : `Run ${run.id.slice(0, 8)}`
-            }
-          />
-          <PageButtons>
-            {run.isTest && (
-              <span className="flex items-center gap-1 text-xs uppercase text-slate-600">
-                <NamedIcon name="beaker" className="h-4 w-4 text-slate-600" />
-                Test run
-              </span>
-            )}
-            {showRerun && run.isFinished && (
-              <RerunPopover
-                runId={run.id}
-                runPath={paths.run}
-                runsPath={paths.runsPath}
-                environmentType={run.environment.type}
-                status={run.basicStatus}
-              />
-            )}
-            {!run.isFinished && <CancelRun runId={run.id} />}
-          </PageButtons>
-        </PageTitleRow>
-        <PageInfoRow>
-          <PageInfoGroup>
-            <PageInfoProperty
-              icon={<RunStatusIcon status={run.status} className="h-4 w-4" />}
-              label={"Status"}
-              value={runStatusTitle(run.status)}
+      <NavBar>
+        <PageTitle
+          backButton={{
+            to: paths.back,
+            text: "Runs",
+          }}
+          title={
+            typeof run.number === "number" ? `Run #${run.number}` : `Run ${run.id.slice(0, 8)}`
+          }
+        />
+        <PageAccessories>
+          {run.isTest && (
+            <span className="flex items-center gap-1 text-xs uppercase text-charcoal-600">
+              <NamedIcon name="beaker" className="h-4 w-4 text-charcoal-600" />
+              Test run
+            </span>
+          )}
+          {showRerun && run.isFinished && (
+            <RerunPopover
+              runId={run.id}
+              runPath={paths.run}
+              runsPath={paths.runsPath}
+              environmentType={run.environment.type}
+              status={run.basicStatus}
             />
-            <PageInfoProperty
-              icon={"calendar"}
-              label={"Started"}
-              value={run.startedAt ? <DateTime date={run.startedAt} /> : "Not started yet"}
-            />
-            <PageInfoProperty icon={"property"} label={"Version"} value={`v${run.version}`} />
-            <PageInfoProperty
-              label={"Env"}
-              value={<EnvironmentLabel environment={run.environment} userName={usernameForEnv} />}
-            />
-            <PageInfoProperty
-              icon={"clock"}
-              label={"Duration"}
-              value={formatDuration(run.startedAt, run.completedAt, { style: "short" })}
-            />
-            <PageInfoProperty
-              icon={<Icon icon="alarm-filled" className="h-4 w-4 text-blue-500" />}
-              label={"Execution Time"}
-              value={formatDurationMilliseconds(run.executionDuration, { style: "short" })}
-            />
-            <PageInfoProperty
-              icon={<Icon icon="list-numbers" className="h-4 w-4 text-yellow-500" />}
-              label={"Execution Count"}
-              value={<>{run.executionCount}</>}
-            />
-          </PageInfoGroup>
-          <PageInfoGroup alignment="right">
-            <Paragraph variant="extra-small" className="whitespace-nowrap text-slate-600">
-              RUN ID: {run.id}
-            </Paragraph>
-          </PageInfoGroup>
-        </PageInfoRow>
-      </PageHeader>
+          )}
+          {!run.isFinished && <CancelRun runId={run.id} />}
+        </PageAccessories>
+      </NavBar>
       <PageBody scrollable={false}>
+        <div className="px-4 pt-4">
+          <PageInfoRow>
+            <PageInfoGroup>
+              <PageInfoProperty
+                icon={<RunStatusIcon status={run.status} className="h-4 w-4" />}
+                label={"Status"}
+                value={runStatusTitle(run.status)}
+              />
+              <PageInfoProperty
+                icon={"calendar"}
+                label={"Started"}
+                value={run.startedAt ? <DateTime date={run.startedAt} /> : "Not started yet"}
+              />
+              <PageInfoProperty icon={"property"} label={"Version"} value={`v${run.version}`} />
+              <PageInfoProperty
+                label={"Env"}
+                value={<EnvironmentLabel environment={run.environment} userName={usernameForEnv} />}
+              />
+              <PageInfoProperty
+                icon={"clock"}
+                label={"Duration"}
+                value={formatDuration(run.startedAt, run.completedAt, { style: "short" })}
+              />
+              <PageInfoProperty
+                icon={<Icon icon="alarm-filled" className="h-4 w-4 text-blue-500" />}
+                label={"Execution Time"}
+                value={formatDurationMilliseconds(run.executionDuration, { style: "short" })}
+              />
+              <PageInfoProperty
+                icon={<Icon icon="list-numbers" className="h-4 w-4 text-yellow-500" />}
+                label={"Execution Count"}
+                value={<>{run.executionCount}</>}
+              />
+            </PageInfoGroup>
+            <PageInfoGroup alignment="right">
+              <Paragraph variant="extra-small" className="whitespace-nowrap text-charcoal-600">
+                RUN ID: {run.id}
+              </Paragraph>
+            </PageInfoGroup>
+          </PageInfoRow>
+        </div>
         <div className="grid h-full grid-cols-2 gap-2">
-          <div className="flex flex-col gap-6 overflow-y-auto py-4 pl-4 pr-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <div className="flex flex-col gap-6 overflow-y-auto py-4 pl-4 pr-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <div>
               {run.status === "SUCCESS" &&
                 (run.tasks.length === 0 || run.tasks.every((t) => t.noop)) && (
@@ -285,7 +284,7 @@ export function RunOverview({ run, trigger, showRerun, paths, currentUser }: Run
           </div>
 
           {/* Detail view */}
-          <div className="overflow-y-auto py-4 pr-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <div className="overflow-y-auto py-4 pr-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <Header2 className="mb-2">Details</Header2>
             {selectedId ? <Outlet /> : <Callout variant="info">Select a task or trigger</Callout>}
           </div>
@@ -359,7 +358,7 @@ function RerunPopover({
             </div>
           )}
 
-          <div className="flex flex-col items-start divide-y divide-slate-800">
+          <div className="flex flex-col items-start divide-y divide-charcoal-800">
             <div className="p-4">
               <Paragraph variant="small" className="mb-3">
                 Start a brand new Job run with the same Trigger data as this one. This will re-do
@@ -371,9 +370,9 @@ function RerunPopover({
                 name={conform.INTENT}
                 value="start"
                 fullWidth
-                className="text-bright"
+                className="text-text-bright"
               >
-                <BoltIcon className="mr-1 h-3.5 w-3.5 text-bright" />
+                <BoltIcon className="mr-1 h-3.5 w-3.5 text-text-bright" />
                 Run again
               </Button>
             </div>
@@ -389,9 +388,9 @@ function RerunPopover({
                   name={conform.INTENT}
                   value="continue"
                   fullWidth
-                  className="text-bright"
+                  className="text-text-bright"
                 >
-                  <PlayIcon className="mr-1 h-3.5 w-3.5 text-bright" />
+                  <PlayIcon className="mr-1 h-3.5 w-3.5 text-text-bright" />
                   Retry Job run
                 </Button>
               </div>
diff --git a/apps/webapp/app/components/run/TaskAttemptStatus.tsx b/apps/webapp/app/components/run/TaskAttemptStatus.tsx
index 8943ad483..df87d1629 100644
--- a/apps/webapp/app/components/run/TaskAttemptStatus.tsx
+++ b/apps/webapp/app/components/run/TaskAttemptStatus.tsx
@@ -38,7 +38,7 @@ function taskAttemptStatusClassNameColor(status: TaskAttemptStatus): string {
     case "COMPLETED":
       return "text-green-500";
     case "PENDING":
-      return "text-slate-400";
+      return "text-charcoal-400";
     case "STARTED":
       return "text-blue-500";
     case "ERRORED":
diff --git a/apps/webapp/app/components/run/TaskCard.tsx b/apps/webapp/app/components/run/TaskCard.tsx
index 47cd572a6..a0ccc9e3a 100644
--- a/apps/webapp/app/components/run/TaskCard.tsx
+++ b/apps/webapp/app/components/run/TaskCard.tsx
@@ -64,7 +64,7 @@ export function TaskCard({
                 <TaskStatusIcon
                   status={status}
                   minimal={true}
-                  className={cn("h-5 w-5", !isSelected && "text-slate-400")}
+                  className={cn("h-5 w-5", !isSelected && "text-charcoal-400")}
                 />
               )
             }
@@ -112,11 +112,11 @@ export function TaskCard({
           </RunPanelBody>
           {subtasks && subtasks.length > 0 && (
             <button
-              className="mt-4 flex h-10 w-full items-center justify-between gap-2 bg-slate-800 px-2"
+              className="mt-4 flex h-10 w-full items-center justify-between gap-2 bg-charcoal-800 px-2"
               onClick={() => setExpanded((c) => !c)}
             >
               <div className="flex items-center gap-2">
-                <Square2StackIcon className="h-5 w-5 text-slate-400" />
+                <Square2StackIcon className="h-5 w-5 text-charcoal-400" />
                 <Paragraph variant="small">
                   {simplur`${expanded ? "Hide" : "Show"} ${subtasks.length} subtask[|s]`}
                 </Paragraph>
@@ -129,7 +129,7 @@ export function TaskCard({
                   expanded: { rotate: 180, transition: { ease: "anticipate" } },
                 }}
               >
-                <ChevronDownIcon className={"h-5 w-5 text-slate-400 transition"} />
+                <ChevronDownIcon className={"h-5 w-5 text-charcoal-400 transition"} />
               </motion.span>
             </button>
           )}
diff --git a/apps/webapp/app/components/run/TaskCardSkeleton.tsx b/apps/webapp/app/components/run/TaskCardSkeleton.tsx
index 47db3abec..e3708eb87 100644
--- a/apps/webapp/app/components/run/TaskCardSkeleton.tsx
+++ b/apps/webapp/app/components/run/TaskCardSkeleton.tsx
@@ -5,15 +5,15 @@ export function TaskCardSkeleton() {
     <RunPanel>
       <RunPanelHeader
         icon={undefined}
-        title={<div className="h-5 w-36 max-w-full rounded border bg-slate-800" />}
+        title={<div className="h-5 w-36 max-w-full rounded border bg-charcoal-800" />}
       />
       <RunPanelBody>
         <div className="flex w-full flex-col justify-between gap-y-1">
           <div className="flex items-baseline justify-between gap-x-3 pr-3 md:justify-start md:pr-0">
-            <div className="h-5 w-1/4 rounded border bg-slate-800" />
+            <div className="h-5 w-1/4 rounded border bg-charcoal-800" />
           </div>
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-            <div className="h-2.5 w-1/2 rounded border bg-slate-800" />
+            <div className="h-2.5 w-1/2 rounded border bg-charcoal-800" />
           </div>
         </div>
       </RunPanelBody>
diff --git a/apps/webapp/app/components/run/TaskStatus.tsx b/apps/webapp/app/components/run/TaskStatus.tsx
index 6a861516f..38a4703a7 100644
--- a/apps/webapp/app/components/run/TaskStatus.tsx
+++ b/apps/webapp/app/components/run/TaskStatus.tsx
@@ -41,7 +41,7 @@ function taskStatusClassNameColor(status: TaskStatus): string {
     case "COMPLETED":
       return "text-green-500";
     case "PENDING":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "RUNNING":
       return "text-blue-500";
     case "WAITING":
@@ -49,6 +49,6 @@ function taskStatusClassNameColor(status: TaskStatus): string {
     case "ERRORED":
       return "text-rose-500";
     case "CANCELED":
-      return "text-slate-500";
+      return "text-charcoal-500";
   }
 }
diff --git a/apps/webapp/app/components/runs/RunFilters.tsx b/apps/webapp/app/components/runs/RunFilters.tsx
index e912d353b..efaa8006e 100644
--- a/apps/webapp/app/components/runs/RunFilters.tsx
+++ b/apps/webapp/app/components/runs/RunFilters.tsx
@@ -141,7 +141,7 @@ export function RunsFilters() {
 
       <TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
 
-      <Button variant="tertiary/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
+      <Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
         Clear
       </Button>
     </div>
@@ -209,7 +209,7 @@ export function filterStatusTitle(status: FilterableStatus): string {
 export function filterStatusClassNameColor(status: FilterableStatus): string {
   switch (status) {
     case "QUEUED":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "IN_PROGRESS":
       return "text-blue-500";
     case "WAITING":
@@ -219,7 +219,7 @@ export function filterStatusClassNameColor(status: FilterableStatus): string {
     case "FAILED":
       return "text-rose-500";
     case "CANCELED":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "TIMEDOUT":
       return "text-amber-300";
     default: {
diff --git a/apps/webapp/app/components/runs/RunStatuses.tsx b/apps/webapp/app/components/runs/RunStatuses.tsx
index 871aafe21..f5f1cc228 100644
--- a/apps/webapp/app/components/runs/RunStatuses.tsx
+++ b/apps/webapp/app/components/runs/RunStatuses.tsx
@@ -100,14 +100,14 @@ export function runStatusClassNameColor(status: JobRunStatus): string {
     case "SUCCESS":
       return "text-green-500";
     case "PENDING":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "STARTED":
     case "EXECUTING":
     case "WAITING_TO_CONTINUE":
     case "WAITING_TO_EXECUTE":
       return "text-blue-500";
     case "QUEUED":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "FAILURE":
     case "UNRESOLVED_AUTH":
     case "INVALID_PAYLOAD":
@@ -121,7 +121,7 @@ export function runStatusClassNameColor(status: JobRunStatus): string {
     case "PREPROCESSING":
       return "text-blue-500";
     case "CANCELED":
-      return "text-slate-500";
+      return "text-charcoal-500";
     default: {
       const _exhaustiveCheck: never = status;
       throw new Error(`Non-exhaustive match for value: ${status}`);
diff --git a/apps/webapp/app/components/runs/RunsTable.tsx b/apps/webapp/app/components/runs/RunsTable.tsx
index 661eea4d9..c194da953 100644
--- a/apps/webapp/app/components/runs/RunsTable.tsx
+++ b/apps/webapp/app/components/runs/RunsTable.tsx
@@ -117,9 +117,9 @@ export function RunsTable({
                 </TableCell>
                 <TableCell to={path}>
                   {run.isTest ? (
-                    <CheckIcon className="h-4 w-4 text-slate-400" />
+                    <CheckIcon className="h-4 w-4 text-charcoal-400" />
                   ) : (
-                    <StopIcon className="h-4 w-4 text-slate-850" />
+                    <StopIcon className="h-4 w-4 text-charcoal-850" />
                   )}
                 </TableCell>
                 <TableCell to={path}>{run.version}</TableCell>
@@ -134,9 +134,9 @@ export function RunsTable({
         {isLoading && (
           <TableBlankRow
             colSpan={8}
-            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-slate-900/90"
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-charcoal-900/90"
           >
-            <Spinner /> <span className="text-dimmed">Loading…</span>
+            <Spinner /> <span className="text-text-dimmed">Loading…</span>
           </TableBlankRow>
         )}
       </TableBody>
diff --git a/apps/webapp/app/components/runs/TimeFrameFilter.tsx b/apps/webapp/app/components/runs/TimeFrameFilter.tsx
index 220a8c90e..135afdd95 100644
--- a/apps/webapp/app/components/runs/TimeFrameFilter.tsx
+++ b/apps/webapp/app/components/runs/TimeFrameFilter.tsx
@@ -51,17 +51,17 @@ export function TimeFrameFilter({ from, to, onRangeChanged }: RunTimeFrameFilter
     <Popover onOpenChange={(open) => setIsOpen(open)} open={isOpen} modal>
       <PopoverTrigger asChild>
         <Button
-          variant="secondary/small"
-          className="bg-slate-800 group-hover:bg-tertiary-foreground"
+          variant="tertiary/small"
+          className="group-hover:bg-tertiary-foreground bg-charcoal-800"
         >
           <Paragraph variant="extra-small" className="mr-2">
             {title(from, to, relativeTimeSeconds)}
           </Paragraph>
-          <ChevronDownIcon className="h-4 w-4 text-bright" />
+          <ChevronDownIcon className="h-4 w-4 text-text-bright" />
         </Button>
       </PopoverTrigger>
 
-      <PopoverContent align="start" className="bg-popover p-2">
+      <PopoverContent align="start" className="bg-background-dimmed p-2">
         <ClientTabs
           value={activeTab}
           onValueChange={(v) => setActiveTab(v as Mode)}
@@ -135,7 +135,7 @@ function RelativeTimeFrame({
           variant={value === timeframe.value ? "primary/small" : "tertiary/small"}
           className={cn(
             "w-full",
-            value !== timeframe.value && "border border-slate-700 group-hover:bg-slate-700"
+            value !== timeframe.value && "border border-charcoal-700 group-hover:bg-charcoal-700"
           )}
           onClick={() => {
             onValueChange(timeframe.value);
diff --git a/apps/webapp/app/components/runs/WebhookDeliveryRunsTable.tsx b/apps/webapp/app/components/runs/WebhookDeliveryRunsTable.tsx
index f6aef0e70..7b97fcd02 100644
--- a/apps/webapp/app/components/runs/WebhookDeliveryRunsTable.tsx
+++ b/apps/webapp/app/components/runs/WebhookDeliveryRunsTable.tsx
@@ -95,9 +95,9 @@ export function WebhookDeliveryRunsTable({
                 </TableCell>
                 <TableCell>
                   {run.verified ? (
-                    <CheckIcon className="h-4 w-4 text-slate-400" />
+                    <CheckIcon className="h-4 w-4 text-charcoal-400" />
                   ) : (
-                    <StopIcon className="h-4 w-4 text-slate-850" />
+                    <StopIcon className="h-4 w-4 text-charcoal-850" />
                   )}
                 </TableCell>
                 <TableCell>{run.createdAt ? <DateTime date={run.createdAt} /> : "–"}</TableCell>
@@ -108,9 +108,9 @@ export function WebhookDeliveryRunsTable({
         {isLoading && (
           <TableBlankRow
             colSpan={8}
-            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-slate-900/90"
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-charcoal-900/90"
           >
-            <Spinner /> <span className="text-dimmed">Loading…</span>
+            <Spinner /> <span className="text-text-dimmed">Loading…</span>
           </TableBlankRow>
         )}
       </TableBody>
diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx
index b4d63d19a..599ef3837 100644
--- a/apps/webapp/app/components/runs/v3/RunFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/RunFilters.tsx
@@ -167,7 +167,7 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP
             </SelectItem>
             {allTaskRunStatuses.map((status) => (
               <SelectItem key={status} value={status}>
-                <TaskRunStatus status={status} />
+                <TaskRunStatus status={status} className="text-xs" />
               </SelectItem>
             ))}
           </SelectContent>
@@ -198,7 +198,7 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP
 
       <TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
 
-      <Button variant="tertiary/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
+      <Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
         Clear
       </Button>
     </div>
diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx
index 5229f5029..ca708b5a4 100644
--- a/apps/webapp/app/components/runs/v3/RunIcon.tsx
+++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx
@@ -16,22 +16,22 @@ type TaskIconProps = {
 };
 
 export function RunIcon({ name, className }: TaskIconProps) {
-  if (!name) return <Squares2X2Icon className={cn(className, "text-slate-700")} />;
+  if (!name) return <Squares2X2Icon className={cn(className, "text-text-dimmed")} />;
 
   switch (name) {
     case "task":
       return <TaskIcon className={cn(className, "text-blue-500")} />;
     case "attempt":
-      return <AttemptIcon className={cn(className, "text-slate-700")} />;
+      return <AttemptIcon className={cn(className, "text-text-dimmed")} />;
     case "wait":
       return <ClockIcon className={cn(className, "text-teal-500")} />;
     case "trace":
-      return <Squares2X2Icon className={cn(className, "text-slate-700")} />;
+      return <Squares2X2Icon className={cn(className, "text-text-dimmed")} />;
     //log levels
     case "debug":
     case "log":
     case "info":
-      return <InformationCircleIcon className={cn(className, "text-slate-700")} />;
+      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
     case "warn":
       return <InformationCircleIcon className={cn(className, "text-amber-400")} />;
     case "error":
@@ -44,7 +44,7 @@ export function RunIcon({ name, className }: TaskIconProps) {
     <NamedIcon
       name={name}
       className={cn(className)}
-      fallback={<InformationCircleIcon className={cn(className, "text-slate-700")} />}
+      fallback={<InformationCircleIcon className={cn(className, "text-text-dimmed")} />}
     />
   );
 }
diff --git a/apps/webapp/app/components/runs/v3/SpanTitle.tsx b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
index 3bda38269..de034be0a 100644
--- a/apps/webapp/app/components/runs/v3/SpanTitle.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
@@ -64,7 +64,7 @@ export function SpanCodePathAccessory({
   return (
     <code
       className={cn(
-        "inline-flex items-center gap-0.5 rounded border border-slate-800 bg-midnight-850 px-1.5 py-0.5 font-mono text-sky-200",
+        "inline-flex items-center gap-0.5 rounded border border-charcoal-700 bg-charcoal-800 px-1.5 py-0.5 font-mono text-text-dimmed",
         className
       )}
     >
@@ -73,13 +73,13 @@ export function SpanCodePathAccessory({
           <span
             className={cn(
               "inline-flex items-center",
-              index === accessory.items.length - 1 ? "text-yellow-200" : "text-dimmed"
+              index === accessory.items.length - 1 ? "text-sun-100" : "text-text-dimmed"
             )}
           >
             {item.text}
           </span>
           {index < accessory.items.length - 1 && (
-            <span className="text-slate-500">
+            <span className="text-text-dimmed">
               <ChevronRightIcon className="h-4 w-4" />
             </span>
           )}
@@ -89,19 +89,19 @@ export function SpanCodePathAccessory({
   );
 }
 
-function eventTextClassName(event: SpanTitleProps) {
+function eventTextClassName(event: Pick<SpanTitleProps, "isError" | "style" | "level">) {
   if (event.isError) {
     return "text-rose-500";
   }
 
   switch (event.level) {
     case "TRACE": {
-      return classNameForVariant(event.style.variant);
+      return textClassNameForVariant(event.style.variant);
     }
     case "LOG":
     case "INFO":
     case "DEBUG": {
-      return classNameForVariant(event.style.variant);
+      return textClassNameForVariant(event.style.variant);
     }
     case "WARN": {
       return "text-amber-400";
@@ -110,18 +110,57 @@ function eventTextClassName(event: SpanTitleProps) {
       return "text-rose-500";
     }
     default: {
-      return classNameForVariant(event.style.variant);
+      return textClassNameForVariant(event.style.variant);
     }
   }
 }
 
-function classNameForVariant(variant: TaskEventStyle["variant"]) {
+export function eventBackgroundClassName(
+  event: Pick<SpanTitleProps, "isError" | "style" | "level">
+) {
+  if (event.isError) {
+    return "bg-rose-500";
+  }
+
+  switch (event.level) {
+    case "TRACE": {
+      return backgroundClassNameForVariant(event.style.variant);
+    }
+    case "LOG":
+    case "INFO":
+    case "DEBUG": {
+      return backgroundClassNameForVariant(event.style.variant);
+    }
+    case "WARN": {
+      return "bg-amber-400";
+    }
+    case "ERROR": {
+      return "bg-rose-500";
+    }
+    default: {
+      return backgroundClassNameForVariant(event.style.variant);
+    }
+  }
+}
+
+function textClassNameForVariant(variant: TaskEventStyle["variant"]) {
   switch (variant) {
     case "primary": {
       return "text-blue-500";
     }
     default: {
-      return "text-dimmed";
+      return "text-text-dimmed";
+    }
+  }
+}
+
+function backgroundClassNameForVariant(variant: TaskEventStyle["variant"]) {
+  switch (variant) {
+    case "primary": {
+      return "bg-blue-500";
+    }
+    default: {
+      return "bg-charcoal-500";
     }
   }
 }
diff --git a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
index d5342c604..5ec0a2c20 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunStatus.tsx
@@ -10,9 +10,15 @@ import { Spinner } from "~/components/primitives/Spinner";
 import { cn } from "~/utils/cn";
 import { ExtendedTaskAttemptStatus } from "./RunFilters";
 
-export function TaskRunStatus({ status }: { status: ExtendedTaskAttemptStatus | null }) {
+export function TaskRunStatus({
+  status,
+  className,
+}: {
+  status: ExtendedTaskAttemptStatus | null;
+  className?: string;
+}) {
   return (
-    <span className="inline-flex items-center gap-1">
+    <span className={cn("flex items-center gap-1", className)}>
       <TaskRunStatusIcon status={status} className="h-4 w-4" />
       <TaskRunStatusLabel status={status} />
     </span>
@@ -59,14 +65,14 @@ export function TaskRunStatusIcon({
 
 export function runStatusClassNameColor(status: ExtendedTaskAttemptStatus | null): string {
   if (status === null) {
-    return "text-slate-500";
+    return "text-charcoal-500";
   }
 
   switch (status) {
     case "ENQUEUED":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "PENDING":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "EXECUTING":
       return "text-blue-500";
     case "PAUSED":
@@ -74,7 +80,7 @@ export function runStatusClassNameColor(status: ExtendedTaskAttemptStatus | null
     case "FAILED":
       return "text-rose-500";
     case "CANCELED":
-      return "text-slate-500";
+      return "text-charcoal-500";
     case "COMPLETED":
       return "text-green-500";
     default: {
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index ea73b80ed..654c84ea3 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -94,9 +94,9 @@ export function TaskRunsTable({
                 </TableCell>
                 <TableCell to={path}>
                   {run.isTest ? (
-                    <CheckIcon className="h-4 w-4 text-slate-400" />
+                    <CheckIcon className="h-4 w-4 text-charcoal-400" />
                   ) : (
-                    <StopIcon className="h-4 w-4 text-slate-850" />
+                    <StopIcon className="h-4 w-4 text-charcoal-850" />
                   )}
                 </TableCell>
                 <TableCell to={path}>
@@ -110,9 +110,9 @@ export function TaskRunsTable({
         {isLoading && (
           <TableBlankRow
             colSpan={8}
-            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-slate-900/90"
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-charcoal-900/90"
           >
-            <Spinner /> <span className="text-dimmed">Loading…</span>
+            <Spinner /> <span className="text-text-dimmed">Loading…</span>
           </TableBlankRow>
         )}
       </TableBody>
diff --git a/apps/webapp/app/components/stories/Badges.stories.tsx b/apps/webapp/app/components/stories/Badges.stories.tsx
deleted file mode 100644
index 93a7f566f..000000000
--- a/apps/webapp/app/components/stories/Badges.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { Badge } from "../primitives/Badge";
-
-const meta: Meta = {
-  title: "Primitives/Badges",
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BadgesExample>;
-
-export const Basic: Story = {
-  render: () => <BadgesExample />,
-};
-
-function BadgesExample() {
-  return (
-    <div className="flex flex-col items-start gap-y-8 p-8">
-      <Badge>Default</Badge>
-      <Badge variant="outline">Outline</Badge>
-    </div>
-  );
-}
diff --git a/apps/webapp/app/components/stories/Callout.stories.tsx b/apps/webapp/app/components/stories/Callout.stories.tsx
deleted file mode 100644
index c8dc3debd..000000000
--- a/apps/webapp/app/components/stories/Callout.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { useState } from "react";
-import { Button } from "../primitives/Buttons";
-import { Callout } from "../primitives/Callout";
-import { EnvelopeIcon } from "@heroicons/react/24/solid";
-
-const meta: Meta = {
-  title: "Primitives/Callout",
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CalloutsSet>;
-
-export const Callouts: Story = {
-  render: () => <CalloutsSet />,
-};
-
-function CalloutsSet() {
-  return (
-    <div className="grid grid-cols-2">
-      <div className="flex flex-col items-start gap-y-4 p-4">
-        <Callout variant="info">This is an info callout</Callout>
-        <Callout variant="warning">This is a warning callout</Callout>
-        <Callout variant="error">This is an error callout</Callout>
-        <Callout variant="idea">This is an idea callout</Callout>
-        <Callout variant="docs">This is a docs callout</Callout>
-        <Callout variant="idea" icon={<EnvelopeIcon className="h-5 w-5 text-green-400" />}>
-          This has a custom icon
-        </Callout>
-      </div>
-      <div className="flex flex-col items-start gap-y-4 p-4">
-        <Callout to="#" variant="info">
-          This is an info callout
-        </Callout>
-        <Callout to="#" variant="warning">
-          This is a warning callout
-        </Callout>
-        <Callout to="#" variant="error">
-          This is an error callout
-        </Callout>
-        <Callout to="#" variant="idea">
-          This is an idea callout
-        </Callout>
-        <Callout to="#" variant="docs">
-          This is a docs callout
-        </Callout>
-        <Callout to="#" variant="idea" icon={<EnvelopeIcon className="h-5 w-5 text-green-400" />}>
-          This has a custom icon
-        </Callout>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/webapp/app/components/stories/CodeBlock.stories.tsx b/apps/webapp/app/components/stories/CodeBlock.stories.tsx
deleted file mode 100644
index 7d2e13620..000000000
--- a/apps/webapp/app/components/stories/CodeBlock.stories.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { CodeBlock } from "../code/CodeBlock";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { cn } from "~/utils/cn";
-
-const meta: Meta<typeof CodeBlock> = {
-  title: "code/CodeBlock",
-  component: CodeBlock,
-  decorators: [withDesign],
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CodeBlock>;
-
-export const Block: Story = {
-  args: {
-    code: `export const client = new TriggerClient("smoke-test", {
-  apiUrl: "http://localhost:3000",
-  endpoint: "http://localhost:3007/__trigger/entry",
-  logLevel: "debug",
-  longLine: "This is a long line that will scroll off the edge of the screen and cause a horizontal scrollbar",
-  onLog: (log) => {
-    console.log(log);
-  },
-  onLogError: (log) => {
-    console.error(log);
-  },
-  onLogWarning: (log) => {
-    console.warn(log);
-  },
-  onLogInfo: (log) => {
-    console.info(log);
-  },
-});`,
-    highlightedRanges: [
-      [6, 8],
-      [12, 14],
-    ],
-  },
-
-  render: (args) => <CodeBlock {...args} />,
-};
-
-Block.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
-  },
-};
-
-export const OneLiner: Story = {
-  args: {
-    code: `{ id: "my-first-job" }`,
-    showLineNumbers: false,
-  },
-
-  render: (args) => <CodeBlock {...args} />,
-};
-
-export const AnimatedLineHighlighting: Story = {
-  args: {
-    code: `{ id: "my-first-job" }`,
-    showLineNumbers: false,
-  },
-
-  render: (args) => <AnimatedHighlight />,
-};
-
-const highlightedRegions: { title: string; range?: [number, number][] }[] = [
-  {
-    title: "When a Stripe payment fails",
-    range: [
-      [1, 2],
-      [4, 4],
-    ],
-  },
-  {
-    title: ", ",
-  },
-  {
-    title: "schedule an email to the user",
-    range: [[6, 8]],
-  },
-  {
-    title: ", and ",
-  },
-  {
-    title: "send a notification to the admin",
-    range: [[10, 12]],
-  },
-  {
-    title: ".",
-  },
-];
-
-const code = `export const client = new TriggerClient("smoke-test", {
-  apiUrl: "http://localhost:3000",
-  endpoint: "http://localhost:3007/__trigger/entry",
-  logLevel: "debug",
-  longLine: "This is a long line that will scroll off the edge of the screen and cause a horizontal scrollbar",
-  onLog: (log) => {
-    console.log(log);
-  },
-  onLogError: (log) => {
-    console.error(log);
-  },
-  onLogWarning: (log) => {
-    console.warn(log);
-  },
-  onLogInfo: (log) => {
-    console.info(log);
-  },
-});`;
-
-function AnimatedHighlight() {
-  const firstRange = highlightedRegions.findIndex((region) => region.range);
-  const [highlighted, setHighlighted] = useState<number>(firstRange);
-  const [shouldAnimate, setShouldAnimate] = useState<boolean>(true);
-  const interval = useRef<NodeJS.Timer>();
-
-  useEffect(() => {
-    clearInterval(interval.current);
-    interval.current = setInterval(() => {
-      if (shouldAnimate) {
-        let nextIndex = highlightedRegions.findIndex((v, i) => {
-          return i > highlighted && v.range;
-        });
-        if (nextIndex === -1) {
-          nextIndex = highlightedRegions.findIndex((region) => region.range);
-        }
-        setHighlighted(nextIndex);
-      }
-    }, 2000);
-  }, [highlighted, shouldAnimate]);
-
-  const highlightedRanges = highlightedRegions[highlighted]?.range
-    ? highlightedRegions[highlighted].range!
-    : [];
-
-  return (
-    <div className="flex gap-2">
-      <p className="w-96">
-        {highlightedRegions.map((region, index) => (
-          <span
-            key={index}
-            onMouseEnter={() => {
-              if (region.range) {
-                setHighlighted(index);
-                setShouldAnimate(false);
-              }
-              setShouldAnimate(false);
-            }}
-            onMouseLeave={() => {
-              setShouldAnimate(true);
-              interval.current?.refresh();
-            }}
-            className={cn(
-              "transition-bg text-xl transition-colors duration-300",
-              region.range ? "cursor-pointer rounded px-1 text-indigo-500" : "text-slate-500",
-              highlighted === index && "bg-indigo-500 text-white"
-            )}
-          >
-            {region.title}
-          </span>
-        ))}
-      </p>
-      <div
-        onMouseEnter={() => {
-          setHighlighted(-1);
-          setShouldAnimate(false);
-        }}
-        onMouseLeave={() => {
-          setShouldAnimate(true);
-          setHighlighted(highlightedRegions.findIndex((region) => region.range));
-        }}
-      >
-        <CodeBlock code={code} highlightedRanges={highlightedRanges} />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/webapp/app/components/stories/Dialog.stories.tsx b/apps/webapp/app/components/stories/Dialog.stories.tsx
deleted file mode 100644
index a1806503b..000000000
--- a/apps/webapp/app/components/stories/Dialog.stories.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../primitives/Dialog";
-
-const meta: Meta<typeof Dialog> = {
-  title: "Primitives/Dialog",
-  // @ts-ignore
-  component: Dialog,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Dialog>;
-
-export const Basic: Story = {
-  args: {
-    // @ts-ignore
-    appear: true,
-    show: true,
-    title: "Dialog Title",
-  },
-  render: (args) => (
-    <Dialog {...args}>
-      <DialogTrigger>Open</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
-          <DialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers.
-          </DialogDescription>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
-  },
-};
diff --git a/apps/webapp/app/components/stories/Forms.stories.tsx b/apps/webapp/app/components/stories/Forms.stories.tsx
deleted file mode 100644
index eeb66b1fa..000000000
--- a/apps/webapp/app/components/stories/Forms.stories.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { Fieldset } from "../primitives/Fieldset";
-import { InputGroup } from "../primitives/InputGroup";
-import { Input } from "../primitives/Input";
-import { Hint } from "../primitives/Hint";
-import { FormError } from "../primitives/FormError";
-import { FormButtons } from "../primitives/FormButtons";
-import { Button } from "../primitives/Buttons";
-import { MainCenteredContainer } from "../layout/AppLayout";
-import { FormTitle } from "../primitives/FormTitle";
-import { Form } from "@remix-run/react";
-import { NamedIcon } from "../primitives/NamedIcon";
-import { Paragraph } from "../primitives/Paragraph";
-import { LogoIcon } from "../LogoIcon";
-import { Label } from "../primitives/Label";
-import { TextLink } from "../primitives/TextLink";
-import { EnvironmentLabel } from "../environments/EnvironmentLabel";
-
-const meta: Meta<typeof Forms> = {
-  title: "Primitives/Forms",
-  component: Forms,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Forms>;
-
-export const Basic: Story = {
-  args: {
-    text: "Action text",
-  },
-
-  render: (args) => <Forms />,
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
-  },
-};
-
-export const Login: Story = {
-  args: {
-    text: "Action text",
-  },
-
-  render: (args) => <LoginForm />,
-};
-
-export const Search: Story = {
-  args: {
-    text: "Action text",
-  },
-
-  render: (args) => <SearchForm />,
-};
-
-export const Inputs: Story = {
-  render: (args) => <InputFields />,
-};
-
-function Forms() {
-  return (
-    <MainCenteredContainer>
-      <div>
-        <FormTitle
-          LeadingIcon="organization"
-          title="Create a new Organization"
-          description="Organizations are a great way to group your Projects."
-        />
-        <Form>
-          <Fieldset>
-            <InputGroup>
-              <Label>Organization name</Label>
-              <Input
-                placeholder="Your org name"
-                required={true}
-                defaultValue="Acme Inc."
-                icon="organization"
-              />
-              <Hint>E.g. your company name or your workspace name.</Hint>
-            </InputGroup>
-
-            <InputGroup>
-              <Label>Project name</Label>
-              <Input placeholder="Your Project name" required={true} icon="folder" />
-              <FormError>You must enter a project name</FormError>
-              <Hint>Your Jobs will live inside this Project.</Hint>
-            </InputGroup>
-
-            <FormButtons
-              confirmButton={
-                <Button type="submit" variant={"primary/small"} TrailingIcon="arrow-right">
-                  Create
-                </Button>
-              }
-              cancelButton={<Button variant={"secondary/small"}>Cancel</Button>}
-            />
-          </Fieldset>
-        </Form>
-      </div>
-    </MainCenteredContainer>
-  );
-}
-
-function LoginForm() {
-  return (
-    <MainCenteredContainer>
-      <div className="flex flex-col items-center">
-        <LogoIcon className="mb-4 h-16 w-16" />
-        <FormTitle divide={false} title="Create your Trigger.dev account" />
-        <Form>
-          <Fieldset>
-            <Button variant="primary/large" fullWidth>
-              <NamedIcon name={"github"} className={"mr-1.5 h-4 w-4"} />
-              Continue with GitHub
-            </Button>
-            <Button variant="secondary/large" fullWidth>
-              <NamedIcon
-                name={"envelope"}
-                className={"mr-1.5 h-4 w-4 transition group-hover:text-bright"}
-              />
-              Continue with Email
-            </Button>
-            <Paragraph variant="small" className="mt-2 text-center">
-              By creating an account you agree to our <TextLink href="#">terms</TextLink> and{" "}
-              <TextLink href="#">privacy</TextLink> policies.
-            </Paragraph>
-          </Fieldset>
-        </Form>
-      </div>
-    </MainCenteredContainer>
-  );
-}
-
-function SearchForm() {
-  return (
-    <MainCenteredContainer>
-      <div>
-        <Form>
-          <Fieldset>
-            <InputGroup>
-              <Label>Medium search input</Label>
-              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
-            </InputGroup>
-            <InputGroup>
-              <Label>Small search input</Label>
-              <Input
-                placeholder="Search"
-                required={true}
-                variant="small"
-                icon="search"
-                shortcut="⌘K"
-                fullWidth={false}
-              />
-            </InputGroup>
-            <InputGroup>
-              <Label>Tertiary search input</Label>
-              <Input
-                placeholder="Search"
-                required={true}
-                variant="tertiary"
-                icon="search"
-                fullWidth={false}
-              />
-            </InputGroup>
-            <InputGroup>
-              <Label variant="small">This is a small label</Label>
-              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
-            </InputGroup>
-            <InputGroup>
-              <Label variant="medium">This is a medium label</Label>
-              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
-            </InputGroup>
-            <InputGroup>
-              <Label variant="large">This is a large label</Label>
-              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
-            </InputGroup>
-          </Fieldset>
-        </Form>
-      </div>
-    </MainCenteredContainer>
-  );
-}
-
-function InputFields() {
-  return (
-    <div className="flex gap-16">
-      <InputFieldSet />
-      <InputFieldSet disabled />
-    </div>
-  );
-}
-
-function InputFieldSet({ disabled }: { disabled?: boolean }) {
-  return (
-    <div>
-      <div className="m-8 flex w-64 flex-col gap-4">
-        <Input disabled={disabled} variant="large" placeholder="Name" autoFocus type="text" />
-        <Input disabled={disabled} variant="medium" placeholder="Name"  type="text" />
-        <Input disabled={disabled} variant="small" placeholder="Name"  type="text" />
-        <Input disabled={disabled} variant="tertiary" placeholder="Name"  type="text" />
-      </div>
-      <div className="m-8 flex w-64 flex-col gap-4">
-        <Input disabled={disabled} variant="large" placeholder="Search" icon="search" shortcut="⌘K" />
-        <Input disabled={disabled} variant="medium" placeholder="Search" icon="search" shortcut="⌘K" />
-        <Input disabled={disabled} variant="small" placeholder="Search" icon="search" shortcut="⌘K" />
-        <Input disabled={disabled} variant="tertiary" placeholder="Search" icon="search" shortcut="⌘K" />
-      </div>
-      <div className="m-8 flex w-64 flex-col gap-4">
-        <Input disabled={disabled}
-          variant="large"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          shortcut="⌘K"
-        />
-        <Input disabled={disabled}
-          variant="medium"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          shortcut="⌘K"
-        />
-        <Input disabled={disabled}
-          variant="small"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          shortcut="⌘K"
-        />
-        <Input disabled={disabled}
-          variant="tertiary"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
-          shortcut="⌘K"
-        />
-        <Input disabled={disabled}
-          variant="tertiary"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
-          shortcut="⌘K"
-        />
-        <Input disabled={disabled}
-          variant="tertiary"
-          placeholder="Search"
-          icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
-          shortcut="⌘K"
-        />
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/webapp/app/components/stories/InlineCode.stories.tsx b/apps/webapp/app/components/stories/InlineCode.stories.tsx
deleted file mode 100644
index 4001fc6d9..000000000
--- a/apps/webapp/app/components/stories/InlineCode.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { InlineCode } from "../code/InlineCode";
-import { Paragraph } from "../primitives/Paragraph";
-
-const meta: Meta<typeof InlineCode> = {
-  title: "code/InlineCode",
-  component: InlineCode,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof InlineCode>;
-
-export const Normal: Story = {
-  args: {
-    children: `{ id: "my-first-job" }`,
-  },
-  render: (args) => (
-    <Paragraph>
-      You should use <InlineCode {...args} /> when you want to achieve this.
-    </Paragraph>
-  ),
-};
-
-Normal.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
-  },
-};
diff --git a/apps/webapp/app/components/stories/Menus.stories.tsx b/apps/webapp/app/components/stories/Menus.stories.tsx
deleted file mode 100644
index b79f296a0..000000000
--- a/apps/webapp/app/components/stories/Menus.stories.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { Fragment, useState } from "react";
-
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "../primitives/Select";
-import { Header1, Header2 } from "../primitives/Headers";
-import { SelectSeparator } from "@radix-ui/react-select";
-import {
-  Popover,
-  PopoverArrowTrigger,
-  PopoverContent,
-  PopoverMenuItem,
-  PopoverSectionHeader,
-} from "../primitives/Popover";
-
-const meta: Meta<typeof SelectMenu> = {
-  title: "Primitives/Menus",
-  component: SelectMenu,
-  decorators: [withDesign],
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SelectMenu>;
-
-export const Selects: Story = {
-  render: (args) => <SelectMenu />,
-};
-
-export const Popovers: Story = {
-  render: (args) => <PopoverMenu />,
-};
-
-function SelectMenu() {
-  return (
-    <div className="flex flex-col">
-      <Header1 className="mb-4">Variants</Header1>
-      <Header2 className="my-4 font-mono">size=small width=content</Header2>
-      <SelectGroup>
-        <Select name="colorScheme" defaultValue="dark">
-          <SelectTrigger>
-            <SelectValue placeholder="Theme" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectLabel>Color Scheme</SelectLabel>
-            <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark">Dark</SelectItem>
-            <SelectItem value="system">System</SelectItem>
-            <SelectLabel>Other themes</SelectLabel>
-            <SelectItem value="sunset">Sunset</SelectItem>
-            <SelectItem value="midnight">Midnight</SelectItem>
-            <SelectSeparator />
-            <SelectItem value="lunar">Lunar</SelectItem>
-          </SelectContent>
-        </Select>
-      </SelectGroup>
-      <Header2 className="my-4 font-mono">size=small width=full</Header2>
-      <SelectGroup>
-        <Select name="colorScheme" defaultValue="dark">
-          <SelectTrigger width="full">
-            <SelectValue placeholder="Theme" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark">Dark</SelectItem>
-            <SelectItem value="system">System</SelectItem>
-            <SelectItem value="sunset">Sunset</SelectItem>
-            <SelectItem value="midnight">Midnight</SelectItem>
-            <SelectSeparator />
-            <SelectItem value="lunar">Lunar</SelectItem>
-          </SelectContent>
-        </Select>
-      </SelectGroup>
-      <Header2 className="my-4 font-mono">size=medium width=content</Header2>
-      <SelectGroup>
-        <Select name="colorScheme" defaultValue="dark">
-          <SelectTrigger size="medium">
-            <SelectValue placeholder="Theme" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark">Dark</SelectItem>
-            <SelectItem value="system">System</SelectItem>
-            <SelectItem value="sunset">Sunset</SelectItem>
-            <SelectItem value="midnight">Midnight</SelectItem>
-            <SelectSeparator />
-            <SelectItem value="lunar">Lunar</SelectItem>
-          </SelectContent>
-        </Select>
-      </SelectGroup>
-      <Header2 className="my-4 font-mono">size=medium width=full</Header2>
-      <SelectGroup>
-        <Select name="colorScheme" defaultValue="dark">
-          <SelectTrigger size="medium" width="full">
-            <SelectValue placeholder="Theme" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="light">Light</SelectItem>
-            <SelectItem value="dark">Dark</SelectItem>
-            <SelectItem value="system">System</SelectItem>
-            <SelectItem value="sunset">Sunset</SelectItem>
-            <SelectItem value="midnight">Midnight</SelectItem>
-            <SelectSeparator />
-            <SelectItem value="lunar">Lunar</SelectItem>
-          </SelectContent>
-        </Select>
-      </SelectGroup>
-    </div>
-  );
-}
-
-function PopoverMenu() {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <Popover onOpenChange={(open) => setIsOpen(open)}>
-      <PopoverArrowTrigger isOpen={isOpen}>My Blog</PopoverArrowTrigger>
-      <PopoverContent
-        className="min-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"
-        align="start"
-      >
-        <Fragment>
-          <PopoverSectionHeader title="Acme Ltd." />
-
-          <div className="flex flex-col gap-1 p-1">
-            <PopoverMenuItem to="#" title="My Blog" icon="folder" />
-            <PopoverMenuItem to="#" title="New Project" isSelected={false} icon="plus" />
-          </div>
-        </Fragment>
-        <div className="border-t border-slate-800 p-1">
-          <PopoverMenuItem to="#" title="New Organization" isSelected={false} icon="plus" />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/webapp/app/components/stories/PageHeader.stories.tsx b/apps/webapp/app/components/stories/PageHeader.stories.tsx
deleted file mode 100644
index eaed15a69..000000000
--- a/apps/webapp/app/components/stories/PageHeader.stories.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { LinkButton } from "../primitives/Buttons";
-import {
-  PageHeader,
-  PageTitleRow,
-  PageTitle,
-  PageButtons,
-  PageDescription,
-} from "../primitives/PageHeader";
-
-const meta: Meta<typeof PageHeaders> = {
-  title: "Primitives/PageHeaders",
-  component: PageHeaders,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PageHeaders>;
-
-export const Basic: Story = {
-  args: {
-    text: "Action text",
-  },
-
-  render: (args) => <PageHeaders />,
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
-  },
-};
-
-function PageHeaders() {
-  return (
-    <div className="flex flex-col gap-4 bg-slate-800 p-4">
-      <div className="bg-[#0B1018]">
-        <PageHeader>
-          <PageTitleRow>
-            <PageTitle title="Organizations" />
-            <PageButtons>
-              <LinkButton to={""} variant="primary/small" shortcut={{ key: "n" }}>
-                Create a new Organization
-              </LinkButton>
-            </PageButtons>
-          </PageTitleRow>
-          <PageDescription>
-            Create new Organizations and new Projects to help organize your Jobs.
-          </PageDescription>
-        </PageHeader>
-      </div>
-      <div className="bg-[#0B1018]">
-        <PageHeader>
-          <PageTitleRow>
-            <PageTitle title="Your Organizations" backButton={{ to: "#", text: "Orgs" }} />
-            <PageButtons>
-              <LinkButton to={""} variant="primary/small" shortcut={{ key: "n" }}>
-                Create a new Organization
-              </LinkButton>
-            </PageButtons>
-          </PageTitleRow>
-        </PageHeader>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/webapp/app/components/stories/SegmentedControl.stories.tsx b/apps/webapp/app/components/stories/SegmentedControl.stories.tsx
deleted file mode 100644
index e4acc2577..000000000
--- a/apps/webapp/app/components/stories/SegmentedControl.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { MainCenteredContainer } from "../layout/AppLayout";
-import SegmentedControl from "../primitives/SegmentedControl";
-
-const meta: Meta<typeof StyledSegmentedControl> = {
-  title: "Primitives/SegmentedControl",
-  decorators: [withDesign],
-  component: StyledSegmentedControl,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof StyledSegmentedControl>;
-
-export const Basic: Story = {
-  render: () => <StyledSegmentedControl />,
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/jBqUJJ2d4lU6aSeKIIOBMY/Trigger.dev?type=design&node-id=2577%3A87576&t=ambgtfvgnwXTHmzI-1",
-  },
-};
-
-const options = [
-  { label: "Label 1", value: "developer" },
-  { label: "Label 2", value: "Users" },
-];
-
-function StyledSegmentedControl() {
-  return (
-    <MainCenteredContainer>
-      <SegmentedControl name="name" options={options} />
-    </MainCenteredContainer>
-  );
-}
diff --git a/apps/webapp/app/presenters/v3/RunPresenter.server.ts b/apps/webapp/app/presenters/v3/RunPresenter.server.ts
index 505bbc7c6..419d5087b 100644
--- a/apps/webapp/app/presenters/v3/RunPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/RunPresenter.server.ts
@@ -1,3 +1,4 @@
+import { millisecondsToNanoseconds } from "@trigger.dev/core/v3/utils/durations";
 import { createTreeFromFlatItems, flattenTree } from "~/components/primitives/TreeView/TreeView";
 import { PrismaClient, prisma } from "~/db.server";
 import { getUsername } from "~/utils/username";
@@ -66,8 +67,37 @@ export class RunPresenter {
       throw new Error("Trace not found");
     }
 
+    //this tree starts at the passed in span (hides parent elements if there are any)
     const tree = createTreeFromFlatItems(traceSummary.spans, run.spanId);
 
+    //we need the start offset for each item, and the total duration of the entire tree
+    const treeRootStartTimeMs = tree ? tree?.data.startTime.getTime() : 0;
+    let totalDuration = tree?.data.duration ?? 0;
+    const events = tree
+      ? flattenTree(tree).map((n) => {
+          const offset = millisecondsToNanoseconds(
+            n.data.startTime.getTime() - treeRootStartTimeMs
+          );
+          totalDuration = Math.max(totalDuration, offset + n.data.duration);
+          return { ...n, data: { ...n.data, offset, isRoot: n.id === traceSummary.rootSpan.id } };
+        })
+      : [];
+
+    //if any elements are partial we want the total duration to represent all of the time until now
+    totalDuration = events.some((e) => e.data.isPartial)
+      ? millisecondsToNanoseconds(Date.now() - treeRootStartTimeMs)
+      : totalDuration;
+
+    //total duration should be a minimum of 1ms
+    totalDuration = Math.max(totalDuration, millisecondsToNanoseconds(1));
+
+    //we need to adjust any partial nodes so they run the full duration
+    for (const event of events) {
+      if (event.data.isPartial) {
+        event.data.duration = totalDuration - event.data.offset;
+      }
+    }
+
     return {
       run: {
         number: run.number,
@@ -79,9 +109,10 @@ export class RunPresenter {
           userName: getUsername(run.runtimeEnvironment.orgMember?.user),
         },
       },
-      events: tree ? flattenTree(tree) : [],
+      events: events,
       parentRunFriendlyId:
         tree?.id === traceSummary.rootSpan.id ? undefined : traceSummary.rootSpan.runId,
+      duration: totalDuration,
     };
   }
 }
diff --git a/apps/webapp/app/presenters/v3/RunStreamPresenter.server.ts b/apps/webapp/app/presenters/v3/RunStreamPresenter.server.ts
new file mode 100644
index 000000000..465471046
--- /dev/null
+++ b/apps/webapp/app/presenters/v3/RunStreamPresenter.server.ts
@@ -0,0 +1,118 @@
+import { JobRun, TaskRun, TaskRunAttempt } from "@trigger.dev/database";
+import { PrismaClient, prisma } from "~/db.server";
+import { logger } from "~/services/logger.server";
+import { sse } from "~/utils/sse.server";
+
+type RunWithAttempts = {
+  updatedAt: Date;
+  attempts: {
+    status: TaskRunAttempt["status"];
+    updatedAt: Date;
+  }[];
+};
+
+export class RunStreamPresenter {
+  #prismaClient: PrismaClient;
+
+  constructor(prismaClient: PrismaClient = prisma) {
+    this.#prismaClient = prismaClient;
+  }
+
+  public async call({
+    request,
+    runFriendlyId,
+  }: {
+    request: Request;
+    runFriendlyId: TaskRun["friendlyId"];
+  }) {
+    const run = await this.#runForUpdates(runFriendlyId);
+
+    if (!run) {
+      return new Response("Not found", { status: 404 });
+    }
+
+    let lastUpdatedAt = this.#getLatestUpdatedAt(run);
+
+    logger.info("RunStreamPresenter.call", {
+      runFriendlyId,
+      lastUpdatedAt,
+    });
+
+    return sse({
+      request,
+      run: async (send, stop) => {
+        const result = await this.#runForUpdates(runFriendlyId);
+        if (!result) {
+          return stop();
+        }
+
+        if (this.#isRunCompleted(result)) {
+          logger.info("RunStreamPresenter.call completed", {
+            runFriendlyId,
+            lastUpdatedAt,
+            completed: true,
+          });
+          send({ data: new Date().toISOString() });
+          return stop();
+        }
+
+        const newUpdatedAt = this.#getLatestUpdatedAt(result);
+        if (lastUpdatedAt !== newUpdatedAt) {
+          logger.info("RunStreamPresenter.call updated", {
+            runFriendlyId,
+            lastUpdatedAt,
+            newUpdatedAt,
+          });
+          send({ data: result.updatedAt.toISOString() });
+        }
+
+        logger.info("RunStreamPresenter.call waiting", {
+          runFriendlyId,
+          lastUpdatedAt,
+          newUpdatedAt,
+        });
+
+        lastUpdatedAt = newUpdatedAt;
+      },
+    });
+  }
+
+  #runForUpdates(friendlyId: string) {
+    return this.#prismaClient.taskRun.findUnique({
+      where: {
+        friendlyId,
+      },
+      select: {
+        updatedAt: true,
+        attempts: {
+          select: {
+            status: true,
+            updatedAt: true,
+          },
+          orderBy: {
+            createdAt: "desc",
+          },
+          take: 1,
+        },
+      },
+    });
+  }
+
+  #getLatestUpdatedAt(run: RunWithAttempts) {
+    const lastAttempt = run.attempts[0];
+    if (lastAttempt) {
+      return lastAttempt.updatedAt.getTime();
+    }
+
+    return run.updatedAt.getTime();
+  }
+
+  #isRunCompleted(run: RunWithAttempts) {
+    return run.attempts.some(
+      (attempt) =>
+        attempt.status === "FAILED" ||
+        attempt.status === "CANCELED" ||
+        attempt.status === "COMPLETED"
+    );
+  }
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug._index/route.tsx
index f7aaed590..2fcbff9a3 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug._index/route.tsx
@@ -1,61 +1,52 @@
 import { Link } from "@remix-run/react";
 import simplur from "simplur";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Header3 } from "~/components/primitives/Headers";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
 import {
-  PageHeader,
-  PageTitleRow,
-  PageTitle,
-  PageButtons,
-  PageInfoRow,
+  PageAccessories,
+  NavBar,
   PageInfoGroup,
+  PageInfoRow,
+  PageTitle,
 } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { useOrganization } from "~/hooks/useOrganizations";
-import { Handle } from "~/utils/handle";
 import { newProjectPath, projectPath } from "~/utils/pathBuilder";
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Projects" />,
-};
-
 export default function Page() {
   const organization = useOrganization();
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title={`${organization.title} projects`} />
-          <PageButtons>
-            <LinkButton
-              to={newProjectPath(organization)}
-              variant="primary/small"
-              shortcut={{ key: "n" }}
-            >
-              Create a new project
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
+      <NavBar>
+        <PageTitle title={`${organization.title} projects`} />
+        <PageAccessories>
+          <LinkButton
+            to={newProjectPath(organization)}
+            variant="primary/small"
+            shortcut={{ key: "n" }}
+          >
+            Create a new project
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
+      <PageBody>
         <PageInfoRow>
           <PageInfoGroup alignment="right">
-            <Paragraph variant="extra-small" className="text-slate-600">
+            <Paragraph variant="extra-small" className="text-charcoal-600">
               UID: {organization.id}
             </Paragraph>
           </PageInfoGroup>
         </PageInfoRow>
-      </PageHeader>
-      <PageBody>
         <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {organization.projects.length > 0 ? (
             organization.projects.map((project) => {
               return (
                 <li key={project.id}>
                   <Link
-                    className="flex gap-4 rounded-md border border-ui-border-dimmed p-4 transition hover:bg-slate-900 "
+                    className="border-grid-bright-dimmed flex gap-4 rounded-md border p-4 transition hover:bg-charcoal-900 "
                     to={projectPath(organization, project)}
                   >
                     <NamedIcon name="folder" className="h-10 w-10 flex-none" />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
index 2527a234c..51370c1ba 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing._index/route.tsx
@@ -32,7 +32,7 @@ export async function loader({ request, params }: DataFunctionArgs) {
 const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>) => {
   if (active && payload) {
     return (
-      <div className="flex gap-1 rounded border border-border bg-background px-3 py-2 text-xs text-bright">
+      <div className="flex gap-1 rounded border border-grid-bright bg-background-dimmed px-3 py-2 text-xs text-text-bright">
         <p>{label}:</p>
         <p>{payload[0].value}</p>
       </div>
@@ -52,7 +52,7 @@ export default function Page() {
     : false;
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 px-4">
       <Suspense
         fallback={
           <>
@@ -78,7 +78,7 @@ export default function Page() {
               <>
                 <div>
                   <Header2 spacing>Concurrent runs</Header2>
-                  <div className="flex w-full flex-col gap-5 rounded border border-border p-6">
+                  <div className="flex w-full flex-col gap-5 rounded border border-grid-bright p-6">
                     {hitConcurrencyLimit && (
                       <Callout
                         variant={"pricing"}
@@ -107,7 +107,7 @@ export default function Page() {
 
                 <div className="@container">
                   <Header2 spacing>Runs</Header2>
-                  <div className="flex flex-col gap-5 rounded border border-border p-6">
+                  <div className="flex flex-col gap-5 rounded border border-grid-bright p-6">
                     {hitsRunLimit && (
                       <Callout
                         variant={"error"}
@@ -142,13 +142,13 @@ export default function Page() {
                             <div className="flex w-full items-center gap-6">
                               <div className="flex flex-col gap-2">
                                 <Header3 className="">Month-to-date</Header3>
-                                <p className="text-3xl font-medium text-bright">
+                                <p className="text-3xl font-medium text-text-bright">
                                   {formatCurrency(data.runCostEstimation, false)}
                                 </p>
                               </div>
-                              <ArrowRightIcon className="h-6 w-6 text-dimmed/50" />
-                              <div className="flex flex-col gap-2 text-dimmed">
-                                <Header3 className="text-dimmed">Projected</Header3>
+                              <ArrowRightIcon className="h-6 w-6 text-text-dimmed/50" />
+                              <div className="flex flex-col gap-2 text-text-dimmed">
+                                <Header3 className="text-text-dimmed">Projected</Header3>
                                 <p className="text-3xl font-medium">
                                   {formatCurrency(data.projectedRunCostEstimation, false)}
                                 </p>
@@ -230,7 +230,7 @@ function LoadingElement({ title }: { title: string }) {
   return (
     <div>
       <Header2 spacing>{title}</Header2>
-      <div className="flex h-96 w-full items-center justify-center gap-5 rounded border border-border p-6">
+      <div className="flex h-96 w-full items-center justify-center gap-5 rounded border border-grid-bright p-6">
         <Spinner />
       </div>
     </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx
index 20e2fffea..67d9eee98 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx
@@ -1,22 +1,15 @@
-import { useForm } from "@conform-to/react";
-import { parse } from "@conform-to/zod";
-import { useActionData } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { SetPlanBodySchema } from "@trigger.dev/billing";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PricingCalculator } from "~/components/billing/PricingCalculator";
-import { PricingTiers, TierEnterprise, TierFree, TierPro } from "~/components/billing/PricingTiers";
+import { PricingTiers } from "~/components/billing/PricingTiers";
 import { RunsVolumeDiscountTable } from "~/components/billing/RunsVolumeDiscountTable";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Callout } from "~/components/primitives/Callout";
 import { Header2 } from "~/components/primitives/Headers";
 import { featuresForRequest } from "~/features.server";
-import { useFeatures } from "~/hooks/useFeatures";
 import { OrgBillingPlanPresenter } from "~/presenters/OrgBillingPlanPresenter";
-import { Handle } from "~/utils/handle";
+import { formatNumberCompact } from "~/utils/numberFormatter";
 import { OrganizationParamsSchema, organizationBillingPath } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
-import { formatNumberCompact } from "~/utils/numberFormatter";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   const { organizationSlug } = OrganizationParamsSchema.parse(params);
@@ -39,10 +32,6 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   });
 }
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Plans" />,
-};
-
 export default function Page() {
   const { plans, maxConcurrency, organizationSlug } = useTypedLoaderData<typeof loader>();
   const currentPlan = useCurrentPlan();
@@ -57,7 +46,7 @@ export default function Page() {
     : false;
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 px-4">
       {hitConcurrencyLimit && (
         <Callout variant={"pricing"}>
           Some of your runs are being queued because your run concurrency is limited to{" "}
@@ -74,9 +63,9 @@ export default function Page() {
       <PricingTiers organizationSlug={organizationSlug} plans={plans} />
       <div>
         <Header2 spacing>Estimate your usage</Header2>
-        <div className="flex h-full w-full rounded-md border border-border p-6">
+        <div className="flex h-full w-full rounded-md border border-grid-bright p-6">
           <PricingCalculator plans={plans} />
-          <div className="mx-6 min-h-full w-px bg-border" />
+          <div className="mx-6 min-h-full w-px bg-grid-bright" />
           <RunsVolumeDiscountTable brackets={plans.paid.runs?.pricing?.brackets ?? []} />
         </div>
       </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing/route.tsx
index 535991f8b..e9b75b92f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing/route.tsx
@@ -2,30 +2,23 @@ import { CalendarDaysIcon, ReceiptRefundIcon } from "@heroicons/react/20/solid";
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Outlet } from "@remix-run/react";
 import { ActiveSubscription } from "@trigger.dev/billing";
+import { formatDurationInDays } from "@trigger.dev/core/v3";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import {
-  PageButtons,
-  PageHeader,
+  PageAccessories,
+  NavBar,
   PageInfoGroup,
   PageInfoProperty,
   PageInfoRow,
   PageTabs,
   PageTitle,
-  PageTitleRow,
 } from "~/components/primitives/PageHeader";
 import { useFeatures } from "~/hooks/useFeatures";
 import { useOrganization } from "~/hooks/useOrganizations";
-import { Handle } from "~/utils/handle";
 import { plansPath, stripePortalPath, usagePath } from "~/utils/pathBuilder";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
-import { formatDurationInDays } from "@trigger.dev/core/v3";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Usage & Billing" />,
-};
 
 function planLabel(subscription: ActiveSubscription | undefined, periodEnd: Date) {
   if (!subscription) {
@@ -56,77 +49,78 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle title={isManagedCloud ? "Usage & Billing" : "Usage"} />
-          <PageButtons>
-            {isManagedCloud && (
-              <>
-                {currentPlan?.subscription?.isPaying && (
-                  <>
-                    <LinkButton to={stripePortalPath(organization)} variant="secondary/small">
-                      Invoices
-                    </LinkButton>
-                    <LinkButton to={stripePortalPath(organization)} variant="secondary/small">
-                      Manage card details
-                    </LinkButton>
-                  </>
-                )}
-                <LinkButton
-                  to={plansPath(organization)}
-                  variant="primary/small"
-                  LeadingIcon={ArrowUpCircleIcon}
-                  leadingIconClassName="px-0"
-                >
-                  Upgrade
-                </LinkButton>
-              </>
-            )}
-          </PageButtons>
-        </PageTitleRow>
-
-        <PageInfoRow>
-          <PageInfoGroup>
-            {currentPlan?.subscription && (
-              <PageInfoProperty
-                icon={<ReceiptRefundIcon className="h-4 w-4 text-green-600" />}
-                value={planLabel(currentPlan.subscription, currentPlan.usage.periodEnd)}
-              />
-            )}
-            {currentPlan?.subscription?.isPaying && (
-              <PageInfoProperty
-                icon={<CalendarDaysIcon className="h-4 w-4 text-green-600" />}
-                label={"Billing period"}
-                value={
-                  <>
-                    <DateTime date={currentPlan.usage.periodStart} includeTime={false} /> to{" "}
-                    <DateTime date={currentPlan.usage.periodEnd} includeTime={false} /> (
-                    {formatDurationInDays(currentPlan.usage.periodRemainingDuration)} remaining)
-                  </>
-                }
-              />
-            )}
-          </PageInfoGroup>
-        </PageInfoRow>
-        {isManagedCloud && (
-          <PageTabs
-            tabs={[
-              {
-                label: "Usage",
-                to: usagePath(organization),
-              },
-              {
-                label: "Plans",
-                to: plansPath(organization),
-              },
-            ]}
-            layoutId="usage-and-billing"
-          />
-        )}
-      </PageHeader>
+      <NavBar>
+        <PageTitle title={isManagedCloud ? "Usage & Billing" : "Usage"} />
+        <PageAccessories>
+          {isManagedCloud && (
+            <>
+              {currentPlan?.subscription?.isPaying && (
+                <>
+                  <LinkButton to={stripePortalPath(organization)} variant="secondary/small">
+                    Invoices
+                  </LinkButton>
+                  <LinkButton to={stripePortalPath(organization)} variant="secondary/small">
+                    Manage card details
+                  </LinkButton>
+                </>
+              )}
+              <LinkButton
+                to={plansPath(organization)}
+                variant="primary/small"
+                LeadingIcon={ArrowUpCircleIcon}
+                leadingIconClassName="px-0"
+              >
+                Upgrade
+              </LinkButton>
+            </>
+          )}
+        </PageAccessories>
+      </NavBar>
       <PageBody scrollable={false}>
-        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
-          <Outlet />
+        <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
+          <div className="px-4 pt-4">
+            <PageInfoRow>
+              <PageInfoGroup>
+                {currentPlan?.subscription && (
+                  <PageInfoProperty
+                    icon={<ReceiptRefundIcon className="h-4 w-4 text-green-600" />}
+                    value={planLabel(currentPlan.subscription, currentPlan.usage.periodEnd)}
+                  />
+                )}
+                {currentPlan?.subscription?.isPaying && (
+                  <PageInfoProperty
+                    icon={<CalendarDaysIcon className="h-4 w-4 text-green-600" />}
+                    label={"Billing period"}
+                    value={
+                      <>
+                        <DateTime date={currentPlan.usage.periodStart} includeTime={false} /> to{" "}
+                        <DateTime date={currentPlan.usage.periodEnd} includeTime={false} /> (
+                        {formatDurationInDays(currentPlan.usage.periodRemainingDuration)} remaining)
+                      </>
+                    }
+                  />
+                )}
+              </PageInfoGroup>
+            </PageInfoRow>
+            {isManagedCloud && (
+              <PageTabs
+                tabs={[
+                  {
+                    label: "Usage",
+                    to: usagePath(organization),
+                  },
+                  {
+                    label: "Plans",
+                    to: plansPath(organization),
+                  },
+                ]}
+                layoutId="usage-and-billing"
+              />
+            )}
+          </div>
+          <div className="overflow-y-auto pb-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <Outlet />
+          </div>
         </div>
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations/route.tsx
index 972305db1..78c5a2531 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations/route.tsx
@@ -9,7 +9,6 @@ import { ConnectToIntegrationSheet } from "~/components/integrations/ConnectToIn
 import { IntegrationWithMissingFieldSheet } from "~/components/integrations/IntegrationWithMissingFieldSheet";
 import { NoIntegrationSheet } from "~/components/integrations/NoIntegrationSheet";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -18,13 +17,7 @@ import { Header2 } from "~/components/primitives/Headers";
 import { Help, HelpContent, HelpTrigger } from "~/components/primitives/Help";
 import { Input } from "~/components/primitives/Input";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
-import {
-  PageButtons,
-  PageDescription,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Switch } from "~/components/primitives/Switch";
 import {
   Table,
@@ -45,7 +38,6 @@ import {
   IntegrationsPresenter,
 } from "~/presenters/IntegrationsPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import { OrganizationParamsSchema, docsPath, integrationClientPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -61,10 +53,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson(data);
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Integrations" />,
-};
-
 export default function Integrations() {
   const { clients, clientMissingFields, options, callbackUrl } =
     useTypedLoaderData<typeof loader>();
@@ -72,32 +60,27 @@ export default function Integrations() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="Integrations & APIs" />
-          <PageButtons>
-            <LinkButton
-              to={docsPath("/integrations/introduction")}
-              variant="secondary/small"
-              LeadingIcon="docs"
-            >
-              Integrations documentation
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-        <PageDescription>
-          Easily use an Integration, an existing Node.js SDK or make HTTP calls from a Job.
-        </PageDescription>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Integrations & APIs" />
+        <PageAccessories>
+          <LinkButton
+            to={docsPath("/integrations/introduction")}
+            variant="minimal/small"
+            LeadingIcon="docs"
+          >
+            Integrations documentation
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
 
       <PageBody scrollable={false}>
-        <div className="grid h-full max-w-full grid-cols-[2fr_3fr] divide-x divide-slate-900 overflow-hidden">
+        <div className="grid h-full max-w-full grid-cols-[2fr_3fr] divide-x divide-charcoal-900 overflow-hidden">
           <PossibleIntegrationsList
             options={options}
             organizationId={organization.id}
             callbackUrl={callbackUrl}
           />
-          <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             {clientMissingFields.length > 0 && (
               <IntegrationsWithMissingFields
                 clients={clientMissingFields}
@@ -133,7 +116,7 @@ function PossibleIntegrationsList({
   });
 
   return (
-    <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+    <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
       <div className="p-4">
         <div className="flex items-center justify-between">
           <Header2 className="mb-2">Connect an API</Header2>
@@ -150,7 +133,6 @@ function PossibleIntegrationsList({
         </div>
         <Input
           placeholder="Search APIs"
-          className="mb-2"
           variant="medium"
           icon="search"
           fullWidth={true}
@@ -202,10 +184,10 @@ function PossibleIntegrationsList({
             <button className="w-full">
               <DetailCell
                 leadingIcon="plus"
-                leadingIconClassName="text-dimmed"
+                leadingIconClassName="text-text-dimmed"
                 label="Request an API and we'll add it to the list as an Integration"
                 trailingIcon="chevron-right"
-                trailingIconClassName="text-slate-700 group-hover:text-bright"
+                trailingIconClassName="text-charcoal-700 group-hover:text-text-bright"
               />
             </button>
           }
@@ -216,10 +198,10 @@ function PossibleIntegrationsList({
         <a href="https://docs.trigger.dev/integrations/create" target="_blank">
           <DetailCell
             leadingIcon="integration"
-            leadingIconClassName="text-dimmed"
+            leadingIconClassName="text-text-dimmed"
             label="Learn how to create your own API Integrations"
             trailingIcon="external-link"
-            trailingIconClassName="text-slate-700 group-hover:text-bright"
+            trailingIconClassName="text-charcoal-700 group-hover:text-text-bright"
           />
         </a>
       </div>
@@ -333,7 +315,7 @@ function ConnectedIntegrationsList({
                                 client.customClientId ? (
                                   `${client.customClientId.substring(0, 8)}…`
                                 ) : (
-                                  <span className="text-slate-600">Auto</span>
+                                  <span className="text-charcoal-600">Auto</span>
                                 )
                               }
                               content={
@@ -449,7 +431,7 @@ function IntegrationsWithMissingFields({
                     integration={integration}
                     organizationId={organizationId}
                     button={
-                      <ChevronRightIcon className="h-4 w-4 text-dimmed transition group-hover:text-bright" />
+                      <ChevronRightIcon className="h-4 w-4 text-text-dimmed transition group-hover:text-text-bright" />
                     }
                     callbackUrl={callbackUrl}
                     existingIntegration={client}
@@ -482,7 +464,7 @@ function AddIntegrationConnection({
       leadingIcon={icon ?? identifier}
       label={name}
       trailingIcon="plus"
-      trailingIconClassName="text-slate-700 group-hover:text-bright"
+      trailingIconClassName="text-charcoal-700 group-hover:text-text-bright"
     />
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam._index/route.tsx
index f414b2434..ddd9b1dd4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam._index/route.tsx
@@ -1,11 +1,8 @@
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { HowToUseThisIntegration } from "~/components/helpContent/HelpContentText";
-import { JobSkeleton } from "~/components/jobs/JobSkeleton";
 import { JobsTable } from "~/components/jobs/JobsTable";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Callout } from "~/components/primitives/Callout";
-import { Header2 } from "~/components/primitives/Headers";
 import { Help, HelpContent, HelpTrigger } from "~/components/primitives/Help";
 import { Input } from "~/components/primitives/Input";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -14,12 +11,7 @@ import { useIntegrationClient } from "~/hooks/useIntegrationClient";
 import { JobListPresenter } from "~/presenters/JobListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
-import {
-  IntegrationClientParamSchema,
-  docsIntegrationPath,
-  trimTrailingSlash,
-} from "~/utils/pathBuilder";
+import { IntegrationClientParamSchema, docsIntegrationPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -36,10 +28,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson({ jobs });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Jobs" />,
-};
-
 export default function Page() {
   const { jobs } = useTypedLoaderData<typeof loader>();
   const client = useIntegrationClient();
@@ -65,7 +53,7 @@ export default function Page() {
               <HelpTrigger title="How do I use this integration?" />
             </div>
             {jobs.length === 0 ? (
-              <div className="mt-8 rounded border border-border px-2 py-6 text-center">
+              <div className="mt-8 rounded border border-grid-bright px-2 py-6 text-center">
                 <Paragraph variant="small">Jobs using this Integration will appear here.</Paragraph>
               </div>
             ) : (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.connections/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.connections/route.tsx
index 393cf061c..30a12e022 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.connections/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.connections/route.tsx
@@ -1,7 +1,6 @@
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { connectionType } from "~/components/integrations/connectionType";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
@@ -15,8 +14,7 @@ import {
 } from "~/components/primitives/Table";
 import { IntegrationClientConnectionsPresenter } from "~/presenters/IntegrationClientConnectionsPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
-import { IntegrationClientParamSchema, trimTrailingSlash } from "~/utils/pathBuilder";
+import { IntegrationClientParamSchema } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -32,12 +30,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson({ connections });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => (
-    <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Connections" />
-  ),
-};
-
 export default function Page() {
   const { connections } = useTypedLoaderData<typeof loader>();
 
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.scopes/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.scopes/route.tsx
index 032e7a8ae..41b3b3249 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.scopes/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam.scopes/route.tsx
@@ -1,11 +1,9 @@
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { IntegrationClientScopesPresenter } from "~/presenters/IntegrationClientScopesPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
-import { IntegrationClientParamSchema, trimTrailingSlash } from "~/utils/pathBuilder";
+import { IntegrationClientParamSchema } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -21,18 +19,14 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson({ scopes });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Scopes" />,
-};
-
 export default function Page() {
   const { scopes } = useTypedLoaderData<typeof loader>();
 
   return (
-    <ul className="flex max-w-md flex-col gap-4 divide-y divide-slate-800">
+    <ul className="flex max-w-md flex-col gap-4 divide-y divide-charcoal-800">
       {scopes.map((scope) => (
         <li key={scope.name} className="flex flex-col gap-1 pt-4 first:pt-0">
-          <Paragraph className="font-mono text-bright">{scope.name}</Paragraph>
+          <Paragraph className="font-mono text-text-bright">{scope.name}</Paragraph>
           <Paragraph variant="small">{scope.description}</Paragraph>
         </li>
       ))}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam/route.tsx
index 924696c34..1ba642eb9 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.integrations_.$clientParam/route.tsx
@@ -3,23 +3,19 @@ import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { connectionType } from "~/components/integrations/connectionType";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTime } from "~/components/primitives/DateTime";
 import {
-  PageHeader,
+  NavBar,
   PageInfoGroup,
   PageInfoProperty,
   PageInfoRow,
   PageTabs,
   PageTitle,
-  PageTitleRow,
 } from "~/components/primitives/PageHeader";
 import { useOrganization } from "~/hooks/useOrganizations";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { IntegrationClientPresenter } from "~/presenters/IntegrationClientPresenter.server";
-import { requireUser, requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
+import { requireUserId } from "~/services/session.server";
 import {
   IntegrationClientParamSchema,
   integrationClientConnectionsPath,
@@ -46,13 +42,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson({ client });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    return <BreadcrumbLink to={match.pathname} title={data?.client.title ?? "Integration"} />;
-  },
-};
-
 export default function Integrations() {
   const { client } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
@@ -77,47 +66,50 @@ export default function Integrations() {
 
   return (
     <PageContainer>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle
-            title={client.title}
-            backButton={{
-              to: organizationIntegrationsPath(organization),
-              text: "Integrations",
-            }}
-          />
-        </PageTitleRow>
-        <PageInfoRow>
-          <PageInfoGroup>
-            <PageInfoProperty
-              label="ID"
-              value={<ClipboardField value={client.slug} variant="tertiary/small" />}
-            />
-            <PageInfoProperty
-              icon={client.integration.icon ?? client.integration.identifier}
-              label="API"
-              value={client.integration.name}
-            />
-            <PageInfoProperty label="Method" value={client.authMethod.name} />
-            <PageInfoProperty label="Type" value={connectionType(client.type)} />
-            <PageInfoProperty icon="job" label="Jobs" value={client.jobCount} />
-            <PageInfoProperty
-              icon="key"
-              label="Client id"
-              value={client.customClientId ? client.customClientId : "Auto"}
-            />
-            <PageInfoProperty
-              icon="calendar"
-              label="Added"
-              value={<DateTime date={client.createdAt} />}
-            />
-          </PageInfoGroup>
-        </PageInfoRow>
-        <PageTabs layoutId="integrations" tabs={tabs} />
-      </PageHeader>
+      <NavBar>
+        <PageTitle
+          title={client.title}
+          backButton={{
+            to: organizationIntegrationsPath(organization),
+            text: "Integrations",
+          }}
+        />
+      </NavBar>
 
-      <PageBody scrollable={true}>
-        <Outlet />
+      <PageBody>
+        <div className="grid grid-rows-[auto_1fr]">
+          <div>
+            <PageInfoRow>
+              <PageInfoGroup>
+                <PageInfoProperty
+                  label="ID"
+                  value={<ClipboardField value={client.slug} variant="tertiary/small" />}
+                />
+                <PageInfoProperty
+                  icon={client.integration.icon ?? client.integration.identifier}
+                  label="API"
+                  value={client.integration.name}
+                />
+                <PageInfoProperty label="Method" value={client.authMethod.name} />
+                <PageInfoProperty label="Type" value={connectionType(client.type)} />
+                <PageInfoProperty icon="job" label="Jobs" value={client.jobCount} />
+                <PageInfoProperty
+                  icon="key"
+                  label="Client id"
+                  value={client.customClientId ? client.customClientId : "Auto"}
+                />
+                <PageInfoProperty
+                  icon="calendar"
+                  label="Added"
+                  value={<DateTime date={client.createdAt} />}
+                />
+              </PageInfoGroup>
+            </PageInfoRow>
+            <PageTabs layoutId="integrations" tabs={tabs} />
+          </div>
+
+          <Outlet />
+        </div>
       </PageBody>
     </PageContainer>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
index be037bc4c..9d9279c31 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
@@ -1,4 +1,4 @@
-import { conform, useFieldList, useForm, list, requestIntent } from "@conform-to/react";
+import { conform, list, requestIntent, useFieldList, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import type { ActionFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
@@ -8,7 +8,6 @@ import simplur from "simplur";
 import invariant from "tiny-invariant";
 import { z } from "zod";
 import { MainCenteredContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -18,16 +17,12 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { env } from "~/env.server";
-import { organizationMatchId, useOrganization } from "~/hooks/useOrganizations";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
+import { useOrganization } from "~/hooks/useOrganizations";
 import { inviteMembers } from "~/models/member.server";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { scheduleEmail } from "~/services/email.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import { acceptInvitePath, organizationTeamPath } from "~/utils/pathBuilder";
-import { loader } from "../_app.orgs.$organizationSlug/route";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 
 const schema = z.object({
   emails: z.preprocess((i) => {
@@ -90,20 +85,6 @@ export const action: ActionFunction = async ({ request, params }) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match, matches) => {
-    const orgMatch = matches.find((m) => m.id === organizationMatchId);
-    const data = useTypedMatchData<typeof loader>(orgMatch);
-    return (
-      <Fragment>
-        {data && <BreadcrumbLink to={organizationTeamPath(data?.organization)} title="Team" />}
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={match.pathname} title="Invite" />
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const organization = useOrganization();
   const lastSubmission = useActionData();
@@ -160,7 +141,7 @@ export default function Page() {
                 </Button>
               }
               cancelButton={
-                <LinkButton to={organizationTeamPath(organization)} variant={"secondary/small"}>
+                <LinkButton to={organizationTeamPath(organization)} variant={"tertiary/small"}>
                   Cancel
                 </LinkButton>
               }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx
index c7b661d89..fa47283bb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx
@@ -9,14 +9,7 @@ import { Header2 } from "~/components/primitives/Headers";
 import { Help, HelpContent, HelpTrigger } from "~/components/primitives/Help";
 import { Input } from "~/components/primitives/Input";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
-import {
-  PageHeader,
-  PageInfoGroup,
-  PageInfoProperty,
-  PageInfoRow,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Switch } from "~/components/primitives/Switch";
 import { TextLink } from "~/components/primitives/TextLink";
@@ -59,24 +52,14 @@ export default function Page() {
   const activeJobCount = jobs.filter((j) => j.status === "ACTIVE").length;
 
   return (
-    <PageContainer className={hasJobs ? "" : "grid-rows-1"}>
-      {hasJobs && (
-        <PageHeader>
-          <PageTitleRow>
-            <PageTitle title="Jobs" />
-          </PageTitleRow>
-          <PageInfoRow>
-            <PageInfoGroup>
-              <PageInfoProperty icon={"job"} label={"Total"} value={totalJobs} />
-              <PageInfoProperty icon={"job"} label={"Active"} value={activeJobCount} />
-            </PageInfoGroup>
-          </PageInfoRow>
-        </PageHeader>
-      )}
+    <PageContainer>
+      <NavBar>
+        <PageTitle title="Jobs" />
+      </NavBar>
       <PageBody>
         <Help>
           {(open) => (
-            <div className={cn("grid gap-4", open ? "h-full grid-cols-2" : " h-full grid-cols-1")}>
+            <div className={cn("grid gap-4", open ? "grid-cols-2" : "grid-cols-1")}>
               <div className="h-full">
                 {hasJobs ? (
                   <>
@@ -138,7 +121,7 @@ export default function Page() {
 
 function RunYourJobPrompt() {
   return (
-    <div className="mt-2 flex w-full gap-x-2 rounded border border-slate-800 bg-slate-900 p-4 pl-6">
+    <div className="mt-2 flex w-full gap-x-2 rounded border border-charcoal-800 bg-charcoal-900 p-4 pl-6">
       <ArrowUpIcon className="h-5 w-5 animate-bounce text-green-500" />
       <Paragraph variant="small" className="text-green-500">
         Your Job is ready to run! Click it to run it now.
@@ -162,7 +145,7 @@ function ExampleJobs() {
         height="250"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen
-        className="mb-4 border-b border-slate-800"
+        className="mb-4 border-b border-charcoal-800"
       />
       <Header2 spacing>How to create a Job</Header2>
       <Paragraph variant="small" spacing>
@@ -171,10 +154,10 @@ function ExampleJobs() {
       </Paragraph>
       <a
         href="https://trigger.dev/docs/documentation/guides/create-a-job"
-        className="mb-4 flex w-full items-center rounded border-b border-slate-800 py-2 transition hover:border-transparent hover:bg-slate-800"
+        className="mb-4 flex w-full items-center rounded border-b border-charcoal-800 py-2 transition hover:border-transparent hover:bg-charcoal-800"
       >
         <NamedIcon name={"external-link"} className={iconStyles} />
-        <Paragraph variant="small" className="font-semibold text-bright">
+        <Paragraph variant="small" className="font-semibold text-text-bright">
           How to create a Job
         </Paragraph>
       </a>
@@ -189,11 +172,11 @@ function ExampleJobs() {
           <a
             href={example.codeLink}
             key={example.title}
-            className="flex w-full items-center rounded border-b border-ui-border py-2 transition hover:border-transparent hover:bg-slate-800"
+            className="flex w-full items-center rounded border-b border-grid-bright py-2 transition hover:border-transparent hover:bg-charcoal-800"
           >
             {example.icon}
             <Paragraph variant="small">
-              <span className="font-semibold text-bright">{example.title}</span> -{" "}
+              <span className="font-semibold text-text-bright">{example.title}</span> -{" "}
               {example.description}
             </Paragraph>
           </a>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/ConfigureEndpointSheet.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/ConfigureEndpointSheet.tsx
index 65503d453..ed824a909 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/ConfigureEndpointSheet.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/ConfigureEndpointSheet.tsx
@@ -169,9 +169,8 @@ export function ConfigureEndpointSheet({ slug, endpoint, onClose }: ConfigureEnd
                     </div>
 
                     <Button
-                      variant="primary/small"
+                      variant="secondary/small"
                       type="submit"
-                      className="bg-green-700 group-hover:bg-green-600/90"
                       disabled={refreshingEndpoint}
                       LeadingIcon={refreshingEndpoint ? "spinner-white" : undefined}
                     >
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx
index d0a3ad7f9..fd28fced2 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx
@@ -2,28 +2,21 @@ import { useRevalidator } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { useEventSource } from "~/hooks/useEventSource";
 import {
   EndpointIndexStatusIcon,
   EndpointIndexStatusLabel,
 } from "~/components/environments/EndpointIndexStatus";
 import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel";
+import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal";
 import { HowToUseApiKeysAndEndpoints } from "~/components/helpContent/HelpContentText";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Badge } from "~/components/primitives/Badge";
 import { ButtonContent, LinkButton } from "~/components/primitives/Buttons";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { Help, HelpContent, HelpTrigger } from "~/components/primitives/Help";
-import {
-  PageButtons,
-  PageDescription,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   Table,
@@ -34,12 +27,12 @@ import {
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
+import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { ClientEndpoint, EnvironmentsPresenter } from "~/presenters/EnvironmentsPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
 import {
   ProjectParamSchema,
   docsPath,
@@ -49,7 +42,7 @@ import { requestUrl } from "~/utils/requestUrl.server";
 import { RuntimeEnvironmentType } from "../../../../../packages/database/src";
 import { ConfigureEndpointSheet } from "./ConfigureEndpointSheet";
 import { FirstEndpointSheet } from "./FirstEndpointSheet";
-import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal";
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -78,10 +71,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Environments & API Keys" />,
-};
-
 export default function Page() {
   const { environments, clients } = useTypedLoaderData<typeof loader>();
   const [selected, setSelected] = useState<
@@ -131,21 +120,18 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="Environments & API Keys" />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("/documentation/concepts/environments-endpoints#environments")}
-              variant="secondary/small"
-            >
-              Environments documentation
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-        <PageDescription>API Keys and endpoints for your environments.</PageDescription>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Environments & API Keys" />
+        <PageAccessories>
+          <LinkButton
+            variant={"minimal/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/documentation/concepts/environments-endpoints#environments")}
+          >
+            Environments documentation
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
       <PageBody>
         <Help defaultOpen={!isAnyClientFullyConfigured}>
           {(open) => (
@@ -294,10 +280,10 @@ function EndpointRow({
           </TableCell>
           <TableCell onClick={onClick} colSpan={5} alignment="right">
             <div className="flex items-center justify-end gap-4">
-              <span className="text-amber-500">
+              <span className="text-sun-400/50">
                 The {environmentTitle({ type })} environment is not configured
               </span>
-              <ButtonContent variant="secondary/small">Configure</ButtonContent>
+              <ButtonContent variant="tertiary/small">Configure</ButtonContent>
             </div>
           </TableCell>
         </TableRow>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events.$eventParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events.$eventParam/route.tsx
index 00b10433a..0e5101f7d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events.$eventParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events.$eventParam/route.tsx
@@ -1,24 +1,20 @@
+import { useNavigation } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
-import { requireUserId } from "~/services/session.server";
-import { EventParamSchema, projectEventsPath, projectPath } from "~/utils/pathBuilder";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
 import { EventDetail } from "~/components/event/EventDetail";
-import { EventPresenter } from "~/presenters/EventPresenter.server";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
-import { Fragment } from "react";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { RunsFilters } from "~/components/runs/RunFilters";
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
+import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { RunListSearchSchema } from "~/components/runs/RunStatuses";
-import { RunListPresenter } from "~/presenters/RunListPresenter.server";
-import { RunsTable } from "~/components/runs/RunsTable";
-import { RunsFilters } from "~/components/runs/RunFilters";
-import { ListPagination } from "../../components/ListPagination";
 import { useUser } from "~/hooks/useUser";
-import { useNavigation } from "@remix-run/react";
+import { EventPresenter } from "~/presenters/EventPresenter.server";
+import { RunListPresenter } from "~/presenters/RunListPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { EventParamSchema, projectEventsPath, projectPath } from "~/utils/pathBuilder";
+import { ListPagination } from "../../components/ListPagination";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -63,20 +59,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    const eventData = useTypedMatchData<typeof loader>(match);
-
-    return (
-      <Fragment>
-        {eventData && eventData.event && (
-          <BreadcrumbLink to={match.pathname} title={eventData.event.name} />
-        )}
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const { event, list } = useTypedLoaderData<typeof loader>();
   const navigation = useNavigation();
@@ -87,25 +69,23 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle
-            title={event.name}
-            backButton={{
-              to: projectEventsPath(organization, project),
-              text: "Events",
-            }}
-          />
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle
+          title={event.name}
+          backButton={{
+            to: projectEventsPath(organization, project),
+            text: "Events",
+          }}
+        />
+      </NavBar>
 
       <PageBody scrollable={false}>
         <div className="grid h-full grid-cols-2">
-          <div className="overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <div className="overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <EventDetail event={event} />
           </div>
 
-          <div className="overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+          <div className="overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             <div className="mb-2 flex items-center justify-between gap-x-2">
               <RunsFilters />
               <div className="flex items-center justify-end gap-x-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events._index/route.tsx
index c4953fdf8..53d7155b3 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events._index/route.tsx
@@ -1,25 +1,20 @@
 import { useNavigation } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { EventListSearchSchema } from "~/components/events/EventStatuses";
+import { EventsFilters } from "~/components/events/EventsFilters";
+import { EventsTable } from "~/components/events/EventsTable";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { LinkButton } from "~/components/primitives/Buttons";
-import {
-  PageButtons,
-  PageDescription,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
-import { EventsTable } from "~/components/events/EventsTable";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { useUser } from "~/hooks/useUser";
 import { EventListPresenter } from "~/presenters/EventListPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { ProjectParamSchema, docsPath, projectPath, trimTrailingSlash } from "~/utils/pathBuilder";
+import { ProjectParamSchema, docsPath, projectPath } from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
-import { EventListSearchSchema } from "~/components/events/EventStatuses";
-import { useUser } from "~/hooks/useUser";
-import { EventsFilters } from "~/components/events/EventsFilters";
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -57,24 +52,21 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title={`${project.name} events`} />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("documentation/concepts/triggers/events")}
-              variant="secondary/small"
-            >
-              Event documentation
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-        <PageDescription>All events in this project</PageDescription>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title={`${project.name} events`} />
+        <PageAccessories>
+          <LinkButton
+            variant={"minimal/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("documentation/concepts/triggers/events")}
+          >
+            Event documentation
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
 
       <PageBody scrollable={false}>
-        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="mb-2 flex items-center justify-between gap-x-2">
             <EventsFilters />
             <ListPagination list={list} />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events/route.tsx
index 5385d1eb7..5aca454de 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.events/route.tsx
@@ -1,10 +1,4 @@
 import { Outlet } from "@remix-run/react";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Events" />,
-};
 
 export default function Page() {
   return <Outlet />;
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx
index 4a719b382..b8c9a1bb8 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx
@@ -1,24 +1,22 @@
-import { CheckIcon } from "@heroicons/react/20/solid";
+import { BookOpenIcon, CheckIcon } from "@heroicons/react/20/solid";
 import { StopIcon } from "@heroicons/react/24/outline";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { HowToConnectHttpEndpoint } from "~/components/helpContent/HelpContentText";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Header1 } from "~/components/primitives/Headers";
 import { Help, HelpContent, HelpTrigger } from "~/components/primitives/Help";
 import {
-  PageButtons,
-  PageHeader,
+  PageAccessories,
+  NavBar,
   PageInfoGroup,
   PageInfoProperty,
   PageInfoRow,
   PageTitle,
-  PageTitleRow,
 } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
@@ -32,11 +30,9 @@ import {
 import { TextLink } from "~/components/primitives/TextLink";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { HttpEndpointPresenter } from "~/presenters/HttpEndpointPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
 import { HttpEndpointParamSchema, docsPath, projectHttpEndpointsPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -64,18 +60,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    return (
-      <BreadcrumbLink
-        to={match.pathname}
-        title={data?.httpEndpoint.title ?? data?.httpEndpoint.key ?? "Endpoint"}
-      />
-    );
-  },
-};
-
 export default function Page() {
   const { httpEndpoint, unconfiguredEnvironments, secret } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
@@ -83,26 +67,24 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle
-            title={httpEndpoint.title ?? httpEndpoint.key}
-            backButton={{
-              to: projectHttpEndpointsPath(organization, project),
-              text: "HTTP endpoints",
-            }}
-            icon={httpEndpoint.icon ?? undefined}
-          />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("documentation/concepts/http-endpoints")}
-              variant="secondary/small"
-            >
-              HTTP endpoints documentation
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
+      <NavBar>
+        <PageTitle
+          title={httpEndpoint.title ?? httpEndpoint.key}
+          backButton={{
+            to: projectHttpEndpointsPath(organization, project),
+            text: "HTTP endpoints",
+          }}
+        />
+        <PageAccessories>
+          <LinkButton
+            variant={"minimal/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("documentation/concepts/http-endpoints")}
+          >
+            HTTP endpoints documentation
+          </LinkButton>
+        </PageAccessories>
+
         {httpEndpoint.webhook && (
           <PageInfoRow>
             <PageInfoGroup>
@@ -114,7 +96,7 @@ export default function Page() {
             </PageInfoGroup>
           </PageInfoRow>
         )}
-      </PageHeader>
+      </NavBar>
       <PageBody>
         <Help defaultOpen={true}>
           {(open) => (
@@ -168,9 +150,9 @@ export default function Page() {
                               <TableCell>{httpEnvironment.source}</TableCell>
                               <TableCell>
                                 {httpEnvironment.immediateResponseFilter ? (
-                                  <CheckIcon className="h-4 w-4 text-slate-400" />
+                                  <CheckIcon className="h-4 w-4 text-charcoal-400" />
                                 ) : (
-                                  <StopIcon className="h-4 w-4 text-slate-850" />
+                                  <StopIcon className="h-4 w-4 text-charcoal-850" />
                                 )}
                               </TableCell>
                               <TableCell alignment="right">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx
index 30dd73dff..5887a111f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx
@@ -1,3 +1,4 @@
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
@@ -7,13 +8,7 @@ import { LinkButton } from "~/components/primitives/Buttons";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Help, HelpContent, HelpTrigger } from "~/components/primitives/Help";
 import { Icon } from "~/components/primitives/Icon";
-import {
-  PageButtons,
-  PageDescription,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   Table,
@@ -49,23 +44,18 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="HTTP endpoints" />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("documentation/concepts/http-endpoints")}
-              variant="secondary/small"
-            >
-              HTTP endpoints documentation
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-        <PageDescription>
-          HTTP endpoints allow you to receive webhooks from any API.
-        </PageDescription>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="HTTP endpoints" />
+        <PageAccessories>
+          <LinkButton
+            variant={"minimal/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("documentation/concepts/http-endpoints")}
+          >
+            HTTP endpoints documentation
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
       <PageBody>
         <Help defaultOpen={true}>
           {(open) => (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints/route.tsx
index bbaf2d369..5aca454de 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints/route.tsx
@@ -1,10 +1,4 @@
 import { Outlet } from "@remix-run/react";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="HTTP endpoints" />,
-};
 
 export default function Page() {
   return <Outlet />;
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam/route.tsx
index 9e5699853..0b0a09445 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam/route.tsx
@@ -1,26 +1,21 @@
 import { useRevalidator } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Fragment, useEffect } from "react";
+import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { useEventSource } from "~/hooks/useEventSource";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { RunOverview } from "~/components/run/RunOverview";
-import { jobMatchId, useJob } from "~/hooks/useJob";
+import { useEventSource } from "~/hooks/useEventSource";
+import { useJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import {
   RunParamsSchema,
   jobPath,
   jobRunsParentPath,
   runPath,
   runStreamingPath,
-  trimTrailingSlash,
 } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -44,21 +39,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match, matches) => {
-    const jobMatch = matches.find((m) => m.id === jobMatchId);
-    const runData = useTypedMatchData<typeof loader>(match);
-
-    return (
-      <Fragment>
-        {runData && runData.run && (
-          <BreadcrumbLink to={match.pathname} title={`Run #${runData.run.number}`} />
-        )}
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const { run } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.settings/route.tsx
index 98d0d63e1..e15428acd 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.settings/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.settings/route.tsx
@@ -1,7 +1,6 @@
-import { JobEnvironment, JobStatusTable } from "~/components/JobsStatusTable";
+import { JobStatusTable } from "~/components/JobsStatusTable";
 import { HowToDisableAJob } from "~/components/helpContent/HelpContentText";
 import { DeleteJobDialogContent } from "~/components/jobs/DeleteJobModalContent";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button } from "~/components/primitives/Buttons";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { Header2 } from "~/components/primitives/Headers";
@@ -11,12 +10,7 @@ import { useJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
-import { projectJobsPath, projectPath } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Settings" />,
-};
+import { projectJobsPath } from "~/utils/pathBuilder";
 
 export default function Page() {
   const job = useJob();
@@ -44,7 +38,7 @@ export default function Page() {
                 <DialogTrigger asChild>
                   <Button
                     variant="danger/small"
-                    leadingIconClassName="text-bright"
+                    leadingIconClassName="text-text-bright"
                     LeadingIcon="trash-can"
                   >
                     I want to delete this Job
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx
index e7638fb17..b2cff83f7 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx
@@ -1,5 +1,6 @@
 import { useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { BeakerIcon } from "@heroicons/react/20/solid";
 import { ClockIcon, CodeBracketIcon } from "@heroicons/react/24/outline";
 import { Form, useActionData, useSubmit } from "@remix-run/react";
 import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
@@ -8,7 +9,6 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { JSONEditor } from "~/components/code/JSONEditor";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -32,14 +32,8 @@ import { redirectBackWithErrorMessage, redirectWithSuccessMessage } from "~/mode
 import { TestJobPresenter } from "~/presenters/TestJobPresenter.server";
 import { TestJobService } from "~/services/jobs/testJob.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import { isValidIcon } from "~/utils/icon";
-import {
-  JobParamsSchema,
-  docsPath,
-  jobRunDashboardPath,
-  trimTrailingSlash,
-} from "~/utils/pathBuilder";
+import { JobParamsSchema, docsPath, jobRunDashboardPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -116,10 +110,6 @@ export const action: ActionFunction = async ({ request, params }) => {
   );
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Test" />,
-};
-
 const startingJson = "{\n\n}";
 
 export default function Page() {
@@ -213,180 +203,173 @@ export default function Page() {
   }
 
   return (
-    <div className="grid h-full grid-cols-1 gap-4">
-      <div className="flex h-full max-h-full overflow-hidden">
-        <Form
-          className="flex h-full max-h-full grow flex-col gap-4 overflow-y-auto"
-          method="post"
-          {...form.props}
-          onSubmit={(e) => submitForm(e)}
-        >
-          <div className="grid h-full grid-cols-[1fr_auto] overflow-hidden">
-            <div className="relative h-full flex-1 overflow-hidden rounded-l border border-border">
-              <JSONEditor
-                defaultValue={defaultJson}
-                readOnly={false}
-                basicSetup
-                onChange={(v) => {
-                  currentJson.current = v;
+    <div className="grid grid-cols-1 gap-4 overflow-hidden">
+      <Form
+        className="grid grid-rows-[1fr_2.5rem] overflow-hidden"
+        method="post"
+        {...form.props}
+        onSubmit={(e) => submitForm(e)}
+      >
+        <div className="grid grid-cols-[1fr_auto] overflow-hidden">
+          <div className="relative h-full flex-1 overflow-hidden rounded-l border border-grid-bright">
+            <JSONEditor
+              defaultValue={defaultJson}
+              readOnly={false}
+              basicSetup
+              onChange={(v) => {
+                currentJson.current = v;
 
-                  //deselect the example if it's been edited
-                  if (selectedCodeSampleId) {
-                    if (v !== selectedCodeSample) {
-                      setDefaultJson(v);
-                      setSelectedCodeSampleId(undefined);
-                    }
+                //deselect the example if it's been edited
+                if (selectedCodeSampleId) {
+                  if (v !== selectedCodeSample) {
+                    setDefaultJson(v);
+                    setSelectedCodeSampleId(undefined);
                   }
-                }}
-                height="100%"
-                min-height="100%"
-                max-height="100%"
-                autoFocus
-                placeholder="Use your schema to enter valid JSON or add one of the example payloads then click 'Run test'"
-                className="h-full"
-              />
-            </div>
-            <div className="flex h-full w-fit min-w-[20rem] flex-col gap-4 overflow-y-auto rounded-r border border-l-0 border-border p-4">
-              {examples.length > 0 && (
+                }
+              }}
+              height="100%"
+              min-height="100%"
+              max-height="100%"
+              autoFocus
+              placeholder="Use your schema to enter valid JSON or add one of the example payloads then click 'Run test'"
+              className="h-full"
+            />
+          </div>
+          <div className="flex h-full w-fit min-w-[20rem] flex-col gap-4 overflow-y-auto rounded-r border border-l-0 border-grid-bright p-4">
+            {examples.length > 0 && (
+              <div className="flex flex-col gap-2">
+                <Header2>Example payloads</Header2>
+                {examples.map((example) => (
+                  <button
+                    type="button"
+                    key={example.id}
+                    onClick={(e) => {
+                      setCode(example.payload ?? "");
+                      setSelectedCodeSampleId(example.id);
+                    }}
+                  >
+                    <DetailCell
+                      leadingIcon={isValidIcon(example.icon) ? example.icon : CodeBracketIcon}
+                      leadingIconClassName="text-blue-500"
+                      label={example.name}
+                      trailingIcon={example.id === selectedCodeSampleId ? "check" : "plus"}
+                      trailingIconClassName={
+                        example.id === selectedCodeSampleId
+                          ? "text-green-500 group-hover:text-green-400"
+                          : "text-charcoal-500 group-hover:text-text-bright"
+                      }
+                    />
+                  </button>
+                ))}
+              </div>
+            )}
+            <div className="flex flex-col gap-2">
+              <Header2>Recent payloads</Header2>
+              {runs.length === 0 ? (
+                <Callout variant="info">
+                  Recent payloads will show here once you've completed a Run.
+                </Callout>
+              ) : (
                 <div className="flex flex-col gap-2">
-                  <Header2>Example payloads</Header2>
-                  {examples.map((example) => (
+                  {runs.map((run) => (
                     <button
+                      key={run.id}
                       type="button"
-                      key={example.id}
                       onClick={(e) => {
-                        setCode(example.payload ?? "");
-                        setSelectedCodeSampleId(example.id);
+                        setCode(run.payload ?? "");
+                        setSelectedCodeSampleId(run.id);
                       }}
                     >
                       <DetailCell
-                        leadingIcon={isValidIcon(example.icon) ? example.icon : CodeBracketIcon}
-                        leadingIconClassName="text-blue-500"
-                        label={example.name}
-                        trailingIcon={example.id === selectedCodeSampleId ? "check" : "plus"}
+                        leadingIcon={ClockIcon}
+                        leadingIconClassName="text-charcoal-400"
+                        label={<DateTime date={run.created} />}
+                        description={
+                          <>
+                            {typeof run.number === "number"
+                              ? `Run #${run.number}`
+                              : `Run ${run.id.slice(0, 8)}`}
+                            <span className={runStatusClassNameColor(run.status)}>
+                              {runStatusTitle(run.status).toLocaleLowerCase()}
+                            </span>
+                          </>
+                        }
+                        trailingIcon={run.id === selectedCodeSampleId ? "check" : "plus"}
                         trailingIconClassName={
-                          example.id === selectedCodeSampleId
+                          run.id === selectedCodeSampleId
                             ? "text-green-500 group-hover:text-green-400"
-                            : "text-slate-500 group-hover:text-bright"
+                            : "text-charcoal-500 group-hover:text-text-bright"
                         }
                       />
                     </button>
                   ))}
                 </div>
               )}
-              <div className="flex flex-col gap-2">
-                <Header2>Recent payloads</Header2>
-                {runs.length === 0 ? (
-                  <Callout variant="info">
-                    Recent payloads will show here once you've completed a Run.
-                  </Callout>
-                ) : (
-                  <div className="flex flex-col gap-2">
-                    {runs.map((run) => (
-                      <button
-                        key={run.id}
-                        type="button"
-                        onClick={(e) => {
-                          setCode(run.payload ?? "");
-                          setSelectedCodeSampleId(run.id);
-                        }}
-                      >
-                        <DetailCell
-                          leadingIcon={ClockIcon}
-                          leadingIconClassName="text-slate-400"
-                          label={<DateTime date={run.created} />}
-                          description={
-                            <>
-                              {typeof run.number === "number"
-                                ? `Run #${run.number}`
-                                : `Run ${run.id.slice(0, 8)}`}
-                              <span className={runStatusClassNameColor(run.status)}>
-                                {runStatusTitle(run.status).toLocaleLowerCase()}
-                              </span>
-                            </>
-                          }
-                          trailingIcon={run.id === selectedCodeSampleId ? "check" : "plus"}
-                          trailingIconClassName={
-                            run.id === selectedCodeSampleId
-                              ? "text-green-500 group-hover:text-green-400"
-                              : "text-slate-500 group-hover:text-bright"
-                          }
-                        />
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
+            </div>
 
-              {selectedEnvironment?.hasAuthResolver && (
-                <div className="flex flex-col gap-2">
-                  <Header2>Account ID</Header2>
-                  <InputGroup fullWidth>
-                    <Input
-                      type="text"
-                      fullWidth
-                      variant="large"
-                      value={currentAccountId}
-                      placeholder={`e.g. abc_1234`}
-                      onChange={(e) => setCurrentAccountId(e.target.value)}
-                    />
-                    <FormError>{accountId.error}</FormError>
-                    <Hint>
-                      Learn about testing Jobs with an Account ID in our{" "}
-                      <TextLink href="https://trigger.dev/docs/documentation/guides/using-integrations-byo-auth#testing-jobs-with-account-id">
-                        BYOAuth docs
-                      </TextLink>
-                    </Hint>
-                  </InputGroup>
-                </div>
-              )}
-            </div>
+            {selectedEnvironment?.hasAuthResolver && (
+              <div className="flex flex-col gap-2">
+                <Header2>Account ID</Header2>
+                <InputGroup fullWidth>
+                  <Input
+                    type="text"
+                    fullWidth
+                    variant="large"
+                    value={currentAccountId}
+                    placeholder={`e.g. abc_1234`}
+                    onChange={(e) => setCurrentAccountId(e.target.value)}
+                  />
+                  <FormError>{accountId.error}</FormError>
+                  <Hint>
+                    Learn about testing Jobs with an Account ID in our{" "}
+                    <TextLink href="https://trigger.dev/docs/documentation/guides/using-integrations-byo-auth#testing-jobs-with-account-id">
+                      BYOAuth docs
+                    </TextLink>
+                  </Hint>
+                </InputGroup>
+              </div>
+            )}
           </div>
-          <div className="flex items-center justify-between">
-            <LinkButton
-              variant="tertiary/medium"
-              to="https://trigger.dev/docs/documentation/guides/testing-jobs"
-              TrailingIcon="external-link"
-            >
-              Learn more about running tests
-            </LinkButton>
-            <div className="flex flex-none items-center justify-end gap-2">
-              {payload.error ? (
-                <FormError id={payload.errorId}>{payload.error}</FormError>
-              ) : (
-                <div />
-              )}
-              <SelectGroup>
-                <Select
-                  name="environment"
-                  value={selectedEnvironmentId}
-                  onValueChange={setSelectedEnvironmentId}
-                >
-                  <SelectTrigger size="medium">
-                    <SelectValue placeholder="Select environment" className="m-0 p-0" /> Environment
-                  </SelectTrigger>
-                  <SelectContent>
-                    {environments.map((environment) => (
-                      <SelectItem key={environment.id} value={environment.id}>
-                        <EnvironmentLabel environment={environment} />
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </SelectGroup>
-              <Button
-                type="submit"
-                variant="primary/medium"
-                LeadingIcon="beaker"
-                leadingIconClassName="text-bright"
-                shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
+        </div>
+        <div className="flex items-center justify-between">
+          <LinkButton
+            variant="tertiary/medium"
+            to="https://trigger.dev/docs/documentation/guides/testing-jobs"
+            TrailingIcon="external-link"
+          >
+            Learn more about running tests
+          </LinkButton>
+          <div className="flex flex-none items-center justify-end gap-2">
+            {payload.error ? <FormError id={payload.errorId}>{payload.error}</FormError> : <div />}
+            <SelectGroup>
+              <Select
+                name="environment"
+                value={selectedEnvironmentId}
+                onValueChange={setSelectedEnvironmentId}
               >
-                Run test
-              </Button>
-            </div>
+                <SelectTrigger size="medium">
+                  <SelectValue placeholder="Select environment" className="m-0 p-0" /> Environment
+                </SelectTrigger>
+                <SelectContent>
+                  {environments.map((environment) => (
+                    <SelectItem key={environment.id} value={environment.id}>
+                      <EnvironmentLabel environment={environment} />
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </SelectGroup>
+            <Button
+              type="submit"
+              variant="primary/small"
+              LeadingIcon={BeakerIcon}
+              shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
+            >
+              Run test
+            </Button>
           </div>
-        </Form>
-      </div>
+        </div>
+      </Form>
     </div>
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route.tsx
index f529107d2..2b5e6df5c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route.tsx
@@ -2,37 +2,27 @@ import { Outlet, useLocation } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson } from "remix-typedjson";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
 import {
-  PageButtons,
-  PageHeader,
+  PageAccessories,
+  NavBar,
   PageInfoGroup,
   PageInfoProperty,
   PageInfoRow,
   PageTabs,
   PageTitle,
-  PageTitleRow,
 } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { useJob } from "~/hooks/useJob";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useOptionalRun } from "~/hooks/useRun";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { JobPresenter } from "~/presenters/JobPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { titleCase } from "~/utils";
-import { Handle } from "~/utils/handle";
-import {
-  JobParamsSchema,
-  jobPath,
-  jobSettingsPath,
-  jobTestPath,
-  trimTrailingSlash,
-} from "~/utils/pathBuilder";
+import { JobParamsSchema, jobPath, jobSettingsPath, jobTestPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -58,18 +48,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    return (
-      <BreadcrumbLink
-        to={trimTrailingSlash(match?.pathname ?? "")}
-        title={data?.job.title ?? "Job"}
-      />
-    );
-  },
-};
-
 export default function Job() {
   const organization = useOrganization();
   const project = useProject();
@@ -82,84 +60,84 @@ export default function Job() {
 
   return renderHeader ? (
     <PageContainer>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle title={job.title} />
-          {!isTestPage && (
-            <PageButtons>
-              <LinkButton
-                to={jobTestPath(organization, project, job)}
-                variant="primary/small"
-                shortcut={{ key: "t" }}
-              >
-                Test
-              </LinkButton>
-            </PageButtons>
-          )}
-        </PageTitleRow>
-        <PageInfoRow>
-          <PageInfoGroup>
-            <PageInfoProperty
-              icon={job.event.icon}
-              label={"Trigger"}
-              value={job.event.title}
-              to={job.event.link ?? undefined}
-            />
-            {job.dynamic && <PageInfoProperty icon="dynamic" value={"Dynamic"} />}
-            <PageInfoProperty icon="id" label={"ID"} value={job.slug} />
-            {job.properties &&
-              job.properties.map((property, index) => (
-                <PageInfoProperty
-                  key={index}
-                  icon="property"
-                  label={property.label}
-                  value={property.text}
-                />
-              ))}
-            {job.integrations.length > 0 && (
-              <PageInfoProperty
-                label="Integrations"
-                value={
-                  <span className="flex gap-0.5">
-                    {job.integrations.map((integration, index) => (
-                      <NamedIcon key={index} name={integration.icon} className={"h-4 w-4"} />
-                    ))}
-                  </span>
-                }
-              />
-            )}
-            <PageInfoProperty
-              icon="pulse"
-              label={"STATUS"}
-              value={titleCase(job.status.toLowerCase())}
-            />
-          </PageInfoGroup>
-          <PageInfoGroup alignment="right">
-            <Paragraph variant="extra-small" className="text-slate-600">
-              UID: {job.id}
-            </Paragraph>
-          </PageInfoGroup>
-        </PageInfoRow>
-
-        {job.noRunsHelp && (
-          <Callout variant="info" to={job.noRunsHelp.link} className="mt-2">
-            {job.noRunsHelp.text}
-          </Callout>
+      <NavBar>
+        <PageTitle title={job.title} />
+        {!isTestPage && (
+          <PageAccessories>
+            <LinkButton
+              to={jobTestPath(organization, project, job)}
+              variant="primary/small"
+              shortcut={{ key: "t" }}
+            >
+              Test
+            </LinkButton>
+          </PageAccessories>
         )}
+      </NavBar>
+      <PageBody className="grid grid-rows-[auto_1fr] px-4" scrollable={false}>
+        <div className="py-4">
+          <PageInfoRow>
+            <PageInfoGroup>
+              <PageInfoProperty
+                icon={job.event.icon}
+                label={"Trigger"}
+                value={job.event.title}
+                to={job.event.link ?? undefined}
+              />
+              {job.dynamic && <PageInfoProperty icon="dynamic" value={"Dynamic"} />}
+              <PageInfoProperty icon="id" label={"ID"} value={job.slug} />
+              {job.properties &&
+                job.properties.map((property, index) => (
+                  <PageInfoProperty
+                    key={index}
+                    icon="property"
+                    label={property.label}
+                    value={property.text}
+                  />
+                ))}
+              {job.integrations.length > 0 && (
+                <PageInfoProperty
+                  label="Integrations"
+                  value={
+                    <span className="flex gap-0.5">
+                      {job.integrations.map((integration, index) => (
+                        <NamedIcon key={index} name={integration.icon} className={"h-4 w-4"} />
+                      ))}
+                    </span>
+                  }
+                />
+              )}
+              <PageInfoProperty
+                icon="pulse"
+                label={"STATUS"}
+                value={titleCase(job.status.toLowerCase())}
+              />
+            </PageInfoGroup>
+            <PageInfoGroup alignment="right">
+              <Paragraph variant="extra-small" className="text-charcoal-600">
+                UID: {job.id}
+              </Paragraph>
+            </PageInfoGroup>
+          </PageInfoRow>
 
-        <PageTabs
-          layoutId="jobs"
-          tabs={[
-            { label: "Runs", to: jobPath(organization, project, job) },
-            { label: "Test", to: jobTestPath(organization, project, job) },
-            {
-              label: "Settings",
-              to: jobSettingsPath(organization, project, job),
-            },
-          ]}
-        />
-      </PageHeader>
-      <PageBody>
+          {job.noRunsHelp && (
+            <Callout variant="info" to={job.noRunsHelp.link} className="mt-2">
+              {job.noRunsHelp.text}
+            </Callout>
+          )}
+
+          <PageTabs
+            layoutId="jobs"
+            tabs={[
+              { label: "Runs", to: jobPath(organization, project, job) },
+              { label: "Test", to: jobTestPath(organization, project, job) },
+              {
+                label: "Settings",
+                to: jobSettingsPath(organization, project, job),
+              },
+            ]}
+          />
+        </div>
         <Outlet />
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.runs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.runs/route.tsx
index 0cf426832..ba87f3726 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.runs/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.runs/route.tsx
@@ -1,15 +1,11 @@
-import { Await, useLoaderData, useLocation, useNavigate, useNavigation } from "@remix-run/react";
+import { Await, useLoaderData, useNavigation } from "@remix-run/react";
 import { LoaderFunctionArgs, defer } from "@remix-run/server-runtime";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { Suspense } from "react";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { LinkButton } from "~/components/primitives/Buttons";
-import {
-  PageButtons,
-  PageDescription,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { RunsFilters } from "~/components/runs/RunFilters";
+import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -18,10 +14,7 @@ import { RunListPresenter } from "~/presenters/RunListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { ProjectParamSchema, docsPath, projectPath } from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
-import { RunListSearchSchema } from "~/components/runs/RunStatuses";
-import { RunsFilters } from "~/components/runs/RunFilters";
-import { Suspense } from "react";
-import { Spinner } from "~/components/primitives/Spinner";
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -61,24 +54,21 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title={`${project.name} runs`} />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("documentation/concepts/runs")}
-              variant="secondary/small"
-            >
-              Run documentation
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-        <PageDescription>All job runs in this project</PageDescription>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title={`${project.name} runs`} />
+        <PageAccessories>
+          <LinkButton
+            variant={"minimal/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("documentation/concepts/runs")}
+          >
+            Run documentation
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
 
       <PageBody scrollable={false}>
-        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <div className="mb-2 flex items-center justify-between gap-x-2">
             <RunsFilters />
             <Suspense fallback={<></>}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.settings/route.tsx
index 74f8b4a61..c6dade4c9 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.settings/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.settings/route.tsx
@@ -15,9 +15,8 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
-import { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { prisma } from "~/db.server";
-import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import {
@@ -177,11 +176,9 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title={`${project.name} project settings`} />
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title={`${project.name} project settings`} />
+      </NavBar>
 
       <PageBody>
         <div className="flex flex-col gap-4">
@@ -231,7 +228,6 @@ export default function Page() {
                     {...conform.input(projectSlug, { type: "text" })}
                     placeholder="Your project slug"
                     icon="warning"
-                    autoFocus
                   />
                   <FormError id={projectSlug.errorId}>{projectSlug.error}</FormError>
                   <FormError>{deleteForm.error}</FormError>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.astro/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.astro/route.tsx
index 0d1968921..c07ca0e46 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.astro/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.astro/route.tsx
@@ -5,7 +5,6 @@ import { Feedback } from "~/components/Feedback";
 import { InitCommand, RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
 import { InlineCode } from "~/components/code/InlineCode";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { Header1 } from "~/components/primitives/Headers";
@@ -16,12 +15,7 @@ import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
-import { Handle } from "~/utils/handle";
-import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Astro" />,
-};
+import { projectSetupPath } from "~/utils/pathBuilder";
 
 export default function SetUpAstro() {
   const organization = useOrganization();
@@ -37,7 +31,7 @@ export default function SetUpAstro() {
         <AstroLogo className="w-64" />
       </div>
       <div className="flex items-center justify-between">
-        <Header1 spacing className="text-bright">
+        <Header1 spacing className="text-text-bright">
           Get setup in 5 minutes
         </Header1>
         <div className="flex items-center gap-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.express/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.express/route.tsx
index 42179fbb3..1950d078b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.express/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.express/route.tsx
@@ -4,7 +4,6 @@ import { ExpressLogo } from "~/assets/logos/ExpressLogo";
 import { Feedback } from "~/components/Feedback";
 import { RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Badge } from "~/components/primitives/Badge";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
@@ -17,12 +16,7 @@ import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
-import { Handle } from "~/utils/handle";
-import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Express" />,
-};
+import { projectSetupPath } from "~/utils/pathBuilder";
 
 export default function Page() {
   const organization = useOrganization();
@@ -38,7 +32,7 @@ export default function Page() {
         <ExpressLogo className="w-64" />
       </div>
       <div className="flex items-center justify-between">
-        <Header1 spacing className="text-bright">
+        <Header1 spacing className="text-text-bright">
           Get setup in 5 minutes
         </Header1>
         <div className="flex items-center gap-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.fastify/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.fastify/route.tsx
index 4346b1b99..d9cb3fbeb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.fastify/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.fastify/route.tsx
@@ -1,12 +1,5 @@
 import { FastifyLogo } from "~/assets/logos/FastifyLogo";
 import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
-import { trimTrailingSlash } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Fastify" />,
-};
 
 export default function Page() {
   return (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx
index 0f221f53c..17d4c630c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nestjs/route.tsx
@@ -6,7 +6,6 @@ import { TriggerDevStep } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
 import { InlineCode } from "~/components/code/InlineCode";
 import { InstallPackages } from "~/components/code/InstallPackages";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Header1 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -16,14 +15,9 @@ import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
-import { Handle } from "~/utils/handle";
-import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
+import { projectSetupPath } from "~/utils/pathBuilder";
 import { CodeBlock } from "../../components/code/CodeBlock";
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="NestJS" />,
-};
-
 const AppModuleCode = `
 import { Module } from '@nestjs/common';
 import { ConfigModule, ConfigService } from '@nestjs/config';
@@ -131,7 +125,7 @@ export default function SetupNestJS() {
         <NestjsLogo className="w-52" />
       </div>
       <div className="flex items-center justify-between">
-        <Header1 spacing className="text-bright">
+        <Header1 spacing className="text-text-bright">
           Get setup in 5 minutes
         </Header1>
         <div className="flex items-center gap-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nextjs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nextjs/route.tsx
index 09fb9bab6..e5de3efa0 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nextjs/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nextjs/route.tsx
@@ -6,7 +6,6 @@ import { Feedback } from "~/components/Feedback";
 import { InitCommand, RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
 import { InlineCode } from "~/components/code/InlineCode";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import {
@@ -26,15 +25,10 @@ import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
-import { Handle } from "~/utils/handle";
-import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
+import { projectSetupPath } from "~/utils/pathBuilder";
 
 type SelectionChoices = "use-existing-project" | "create-new-next-app";
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Next.js" />,
-};
-
 export default function SetupNextjs() {
   const organization = useOrganization();
   const project = useProject();
@@ -51,7 +45,7 @@ export default function SetupNextjs() {
         <NextjsLogo className="w-56" />
       </div>
       <div className="flex items-center justify-between">
-        <Header1 spacing className="text-bright">
+        <Header1 spacing className="text-text-bright">
           Get setup in {selectedValue === "create-new-next-app" ? "5" : "2"} minutes
         </Header1>
         <div className="flex items-center gap-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt/route.tsx
index f2560a2e7..1c767168c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt/route.tsx
@@ -1,12 +1,5 @@
 import { NuxtLogo } from "~/assets/logos/NuxtLogo";
 import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
-import { trimTrailingSlash } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Nuxt" />,
-};
 
 export default function Page() {
   return (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.redwood/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.redwood/route.tsx
index a6d5286fd..2a4ccf354 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.redwood/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.redwood/route.tsx
@@ -1,12 +1,5 @@
 import { RedwoodLogo } from "~/assets/logos/RedwoodLogo";
 import { FrameworkComingSoon } from "~/components/frameworks/FrameworkComingSoon";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
-import { trimTrailingSlash } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Redwood" />,
-};
 
 export default function Page() {
   return (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.remix/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.remix/route.tsx
index 18a8e3c27..f1f20e7fb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.remix/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.remix/route.tsx
@@ -5,7 +5,6 @@ import { Feedback } from "~/components/Feedback";
 import { InitCommand, RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
 import { InlineCode } from "~/components/code/InlineCode";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { Header1 } from "~/components/primitives/Headers";
@@ -16,12 +15,7 @@ import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
-import { Handle } from "~/utils/handle";
-import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Remix" />,
-};
+import { projectSetupPath } from "~/utils/pathBuilder";
 
 export default function SetUpRemix() {
   const organization = useOrganization();
@@ -37,7 +31,7 @@ export default function SetUpRemix() {
         <RemixLogo className="w-64" />
       </div>
       <div className="flex items-center justify-between">
-        <Header1 spacing className="text-bright">
+        <Header1 spacing className="text-text-bright">
           Get setup in 5 minutes
         </Header1>
         <div className="flex items-center gap-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx
index 3cdd1ab2b..88eeafaa5 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup.sveltekit/route.tsx
@@ -4,7 +4,6 @@ import { SvelteKitLogo } from "~/assets/logos/SveltekitLogo";
 import { Feedback } from "~/components/Feedback";
 import { RunDevCommand, TriggerDevStep } from "~/components/SetupCommands";
 import { StepContentContainer } from "~/components/StepContentContainer";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Badge } from "~/components/primitives/Badge";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
@@ -16,13 +15,7 @@ import { useDevEnvironment } from "~/hooks/useEnvironments";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useProjectSetupComplete } from "~/hooks/useProjectSetupComplete";
-import { Handle } from "~/utils/handle";
-import { projectSetupPath, trimTrailingSlash } from "~/utils/pathBuilder";
-export const handle: Handle = {
-  breadcrumb: (match) => (
-    <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="SvelteKit" />
-  ),
-};
+import { projectSetupPath } from "~/utils/pathBuilder";
 
 export default function SetUpSveltekit() {
   const organization = useOrganization();
@@ -36,7 +29,7 @@ export default function SetUpSveltekit() {
         <SvelteKitLogo className="w-72" />
       </div>
       <div className="flex items-center justify-between">
-        <Header1 spacing className="text-bright">
+        <Header1 spacing className="text-text-bright">
           Get setup in 5 minutes
         </Header1>
         <div className="flex items-center gap-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup/route.tsx
index ba8dbc1c3..23c24e589 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.setup/route.tsx
@@ -1,17 +1,8 @@
 import { Outlet } from "@remix-run/react";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
-import { trimTrailingSlash } from "~/utils/pathBuilder";
-
-export const handle: Handle = {
-  breadcrumb: (match) => (
-    <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Framework setup" />
-  ),
-};
 
 export default function Page() {
   return (
-    <div className="h-full overflow-y-auto overflow-x-hidden p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+    <div className="h-full overflow-y-auto overflow-x-hidden p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
       <Outlet />
     </div>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
index 4e636418e..fdb0fb40a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx
@@ -84,7 +84,7 @@ export default function Integrations() {
                         {t.dynamicTrigger.slug}
                       </span>
                     ) : (
-                      <span className="text-dimmed">–</span>
+                      <span className="text-text-dimmed">–</span>
                     )}
                   </TableCell>
                   <TableCell to={path}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx
index e3d51344b..cf8e4d9c0 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.scheduled/route.tsx
@@ -3,7 +3,6 @@ import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { DateTime } from "~/components/primitives/DateTime";
 import { LabelValueStack } from "~/components/primitives/LabelValueStack";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
@@ -22,8 +21,7 @@ import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { ScheduledTriggersPresenter } from "~/presenters/ScheduledTriggersPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
-import { ProjectParamSchema, docsPath, trimTrailingSlash } from "~/utils/pathBuilder";
+import { ProjectParamSchema, docsPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -39,12 +37,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson(data);
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => (
-    <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Scheduled Triggers" />
-  ),
-};
-
 export default function Integrations() {
   const { scheduled } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
@@ -108,7 +100,7 @@ export default function Integrations() {
                       <CheckCircleIcon className="h-6 w-6 text-green-500" />
                     ) : t.environment.type === "DEVELOPMENT" ? (
                       <span className="flex items-center gap-1">
-                        <NoSymbolIcon className="h-6 w-6 text-dimmed" />
+                        <NoSymbolIcon className="h-6 w-6 text-text-dimmed" />
                         <Paragraph variant="extra-small">
                           <TextLink
                             href={docsPath("documentation/concepts/triggers/scheduled")}
@@ -129,7 +121,7 @@ export default function Integrations() {
                         {t.dynamicTrigger.slug}
                       </span>
                     ) : (
-                      <span className="text-dimmed">–</span>
+                      <span className="text-text-dimmed">–</span>
                     )}
                   </TableCell>
                   <TableCell>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.webhooks/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.webhooks/route.tsx
index b25efa51a..3cc390e3f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.webhooks/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers.webhooks/route.tsx
@@ -2,7 +2,6 @@ import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LabelValueStack } from "~/components/primitives/LabelValueStack";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -22,8 +21,7 @@ import { useProject } from "~/hooks/useProject";
 import { WebhookTriggersPresenter } from "~/presenters/WebhookTriggersPresenter.server";
 import { requireUser } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
-import { ProjectParamSchema, trimTrailingSlash, webhookTriggerPath } from "~/utils/pathBuilder";
+import { ProjectParamSchema, webhookTriggerPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
@@ -39,12 +37,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson(data);
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => (
-    <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Webhook Triggers" />
-  ),
-};
-
 export default function Integrations() {
   const { webhooks } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
@@ -53,7 +45,8 @@ export default function Integrations() {
   return (
     <>
       <Paragraph variant="small" spacing>
-        A Webhook Trigger runs a Job when it receives a matching payload at a registered HTTP Endpoint.
+        A Webhook Trigger runs a Job when it receives a matching payload at a registered HTTP
+        Endpoint.
       </Paragraph>
 
       <Table containerClassName="mt-4">
@@ -73,7 +66,7 @@ export default function Integrations() {
               const path = webhookTriggerPath(organization, project, w);
               return (
                 <TableRow key={w.id} className={cn(!w.active && "bg-rose-500/30")}>
-                <TableCell to={path}>{w.key}</TableCell>
+                  <TableCell to={path}>{w.key}</TableCell>
                   <TableCell to={path}>
                     <div className="flex items-center gap-1">
                       <NamedIcon
@@ -115,10 +108,7 @@ export default function Integrations() {
                   <TableCell to={path}>
                     <div className="flex items-center justify-end gap-1">
                       {w.webhookEnvironments.map((env) => (
-                        <EnvironmentLabel
-                          key={env.id}
-                          environment={env.environment}
-                        />
+                        <EnvironmentLabel key={env.id} environment={env.environment} />
                       ))}
                     </div>
                   </TableCell>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx
index 7cb142564..4589720c0 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers/route.tsx
@@ -1,72 +1,58 @@
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { Outlet } from "@remix-run/react";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LinkButton } from "~/components/primitives/Buttons";
-import {
-  PageButtons,
-  PageDescription,
-  PageHeader,
-  PageTabs,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { PageAccessories, NavBar, PageTabs, PageTitle } from "~/components/primitives/PageHeader";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { Handle } from "~/utils/handle";
 import {
   docsPath,
   projectScheduledTriggersPath,
   projectTriggersPath,
   projectWebhookTriggersPath,
-  trimTrailingSlash,
 } from "~/utils/pathBuilder";
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Triggers" />,
-};
-
 export default function Page() {
   const organization = useOrganization();
   const project = useProject();
 
   return (
     <PageContainer>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle title="Triggers" />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("documentation/concepts/triggers")}
-              variant="secondary/small"
-            >
-              Triggers documentation
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-        <PageDescription>A Trigger is what starts a Job Run.</PageDescription>
-        <PageTabs
-          layoutId="triggers"
-          tabs={[
-            {
-              label: "External Triggers",
-              to: projectTriggersPath(organization, project),
-            },
-            {
-              label: "Scheduled Triggers",
-              to: projectScheduledTriggersPath(organization, project),
-            },
-            {
-              label: "Webhook Triggers",
-              to: projectWebhookTriggersPath(organization, project),
-            },
-          ]}
-        />
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Triggers" />
+        <PageAccessories>
+          <LinkButton
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("documentation/concepts/triggers")}
+            variant="minimal/small"
+          >
+            Triggers documentation
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
 
       <PageBody scrollable={false}>
-        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
-          <Outlet />
+        <div className="grid grid-rows-[auto_1fr] gap-y-4 px-4">
+          <PageTabs
+            layoutId="triggers"
+            tabs={[
+              {
+                label: "External Triggers",
+                to: projectTriggersPath(organization, project),
+              },
+              {
+                label: "Scheduled Triggers",
+                to: projectScheduledTriggersPath(organization, project),
+              },
+              {
+                label: "Webhook Triggers",
+                to: projectWebhookTriggersPath(organization, project),
+              },
+            ]}
+          />
+          <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <Outlet />
+          </div>
         </div>
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam/route.tsx
index e9843d084..8da3bae01 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam/route.tsx
@@ -3,44 +3,37 @@ import { parse } from "@conform-to/zod";
 import { json } from "@remix-run/node";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Fragment } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout, variantClasses } from "~/components/primitives/Callout";
 import { Header2 } from "~/components/primitives/Headers";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
 import {
-  PageHeader,
+  NavBar,
   PageInfoGroup,
   PageInfoProperty,
   PageInfoRow,
   PageTitle,
-  PageTitleRow,
 } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { TriggerSourcePresenter } from "~/presenters/TriggerSourcePresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { ActivateSourceService } from "~/services/sources/activateSource.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
 import {
   TriggerSourceParamSchema,
   externalTriggerPath,
   externalTriggerRunsParentPath,
   projectTriggersPath,
-  trimTrailingSlash,
 } from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
 
@@ -101,29 +94,6 @@ export const action: ActionFunction = async ({ request, params }) => {
     return json({ errors: { body: error.message } }, { status: 400 });
   }
 };
-export const handle: Handle = {
-  //this one is complicated because we render outside the parent route (using triggers_ in the path)
-  breadcrumb: (match, matches) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    if (!data) return null;
-
-    const org = useOrganization(matches);
-    const project = useProject(matches);
-
-    return (
-      <Fragment>
-        <BreadcrumbLink to={projectTriggersPath(org, project)} title="Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={projectTriggersPath(org, project)} title="External Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={trimTrailingSlash(match.pathname)}
-          title={`${data.trigger.integration.title}: ${data.trigger.integration.slug}`}
-        />
-      </Fragment>
-    );
-  },
-};
 
 export default function Page() {
   const { trigger } = useTypedLoaderData<typeof loader>();
@@ -146,101 +116,104 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle
-            title={`${trigger.integration.title}: ${trigger.integration.slug}`}
-            backButton={{
-              to: projectTriggersPath(organization, project),
-              text: "External Triggers",
-            }}
-          />
-        </PageTitleRow>
-        <PageInfoRow>
-          <PageInfoGroup>
-            <PageInfoProperty
-              icon={trigger.integration.definition.icon ?? trigger.integration.definitionId}
-              label={trigger.integration.title ?? ""}
-              value={trigger.integration.slug}
-            />
-            <PageInfoProperty
-              label={trigger.active ? "Active" : "Inactive"}
-              value={
-                <NamedIcon name={trigger.active ? "active" : "inactive"} className="h-4 w-4" />
-              }
-            />
-            {trigger.dynamic && (
-              <PageInfoProperty
-                label="Dynamic"
-                value={
-                  <span className="flex items-center gap-0.5">
-                    <NamedIcon name="dynamic" className="h-4 w-4" />
-                    {trigger.dynamic.slug}
-                  </span>
-                }
-              />
-            )}
-            <PageInfoProperty
-              label="Environment"
-              value={<EnvironmentLabel environment={trigger.environment} />}
-            />
-          </PageInfoGroup>
-        </PageInfoRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle
+          title={`${trigger.integration.title}: ${trigger.integration.slug}`}
+          backButton={{
+            to: projectTriggersPath(organization, project),
+            text: "External Triggers",
+          }}
+        />
+      </NavBar>
 
       <PageBody scrollable={false}>
-        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
-          <Header2 spacing>External Trigger registration runs</Header2>
-          <Paragraph variant="small" spacing>
-            External Triggers need to be registered with the external service. You can see the list
-            of attempted registrations below.
-          </Paragraph>
-
-          {!trigger.active &&
-            (trigger.registrationJob ? (
-              <Form method="post" {...form.props}>
-                <Callout variant="error" className="justiy-between mb-4 items-center">
-                  <Paragraph variant="small" className={cn(variantClasses.error.textColor, "grow")}>
-                    Registration hasn't succeeded yet, check the runs below.
-                  </Paragraph>
-                  <input
-                    {...conform.input(jobId, { type: "hidden" })}
-                    defaultValue={trigger.registrationJob?.id}
-                  />
-                  <Button
-                    variant="danger/small"
-                    type="submit"
-                    name={conform.INTENT}
-                    value="retry"
-                    disabled={isLoading}
-                    LeadingIcon={isLoading ? "spinner-white" : undefined}
-                  >
-                    {isLoading ? "Retrying…" : "Retry now"}
-                  </Button>
-                </Callout>
-              </Form>
-            ) : trigger.dynamic ? null : (
-              <Callout variant="error" className="justiy-between mb-4 items-center">
-                This External Trigger hasn't registered successfully. Contact support for help:{" "}
-                {trigger.id}
-              </Callout>
-            ))}
-
-          {trigger.runList ? (
-            <>
-              <ListPagination list={trigger.runList} className="mb-2 justify-end" />
-              <RunsTable
-                runs={trigger.runList.runs}
-                total={trigger.runList.runs.length}
-                hasFilters={false}
-                runsParentPath={externalTriggerRunsParentPath(organization, project, trigger)}
-                currentUser={user}
+        <div className="grid grid-rows-[auto_1fr] gap-y-4 p-4">
+          <PageInfoRow>
+            <PageInfoGroup>
+              <PageInfoProperty
+                icon={trigger.integration.definition.icon ?? trigger.integration.definitionId}
+                label={trigger.integration.title ?? ""}
+                value={trigger.integration.slug}
               />
-              <ListPagination list={trigger.runList} className="mt-2 justify-end" />
-            </>
-          ) : (
-            <Callout variant="warning">No registration runs found</Callout>
-          )}
+              <PageInfoProperty
+                label={trigger.active ? "Active" : "Inactive"}
+                value={
+                  <NamedIcon name={trigger.active ? "active" : "inactive"} className="h-4 w-4" />
+                }
+              />
+              {trigger.dynamic && (
+                <PageInfoProperty
+                  label="Dynamic"
+                  value={
+                    <span className="flex items-center gap-0.5">
+                      <NamedIcon name="dynamic" className="h-4 w-4" />
+                      {trigger.dynamic.slug}
+                    </span>
+                  }
+                />
+              )}
+              <PageInfoProperty
+                label="Environment"
+                value={<EnvironmentLabel environment={trigger.environment} />}
+              />
+            </PageInfoGroup>
+          </PageInfoRow>
+          <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <Header2 spacing>External Trigger registration runs</Header2>
+            <Paragraph variant="small" spacing>
+              External Triggers need to be registered with the external service. You can see the
+              list of attempted registrations below.
+            </Paragraph>
+
+            {!trigger.active &&
+              (trigger.registrationJob ? (
+                <Form method="post" {...form.props}>
+                  <Callout variant="error" className="justiy-between mb-4 items-center">
+                    <Paragraph
+                      variant="small"
+                      className={cn(variantClasses.error.textColor, "grow")}
+                    >
+                      Registration hasn't succeeded yet, check the runs below.
+                    </Paragraph>
+                    <input
+                      {...conform.input(jobId, { type: "hidden" })}
+                      defaultValue={trigger.registrationJob?.id}
+                    />
+                    <Button
+                      variant="danger/small"
+                      type="submit"
+                      name={conform.INTENT}
+                      value="retry"
+                      disabled={isLoading}
+                      LeadingIcon={isLoading ? "spinner-white" : undefined}
+                    >
+                      {isLoading ? "Retrying…" : "Retry now"}
+                    </Button>
+                  </Callout>
+                </Form>
+              ) : trigger.dynamic ? null : (
+                <Callout variant="error" className="justiy-between mb-4 items-center">
+                  This External Trigger hasn't registered successfully. Contact support for help:{" "}
+                  {trigger.id}
+                </Callout>
+              ))}
+
+            {trigger.runList ? (
+              <>
+                <ListPagination list={trigger.runList} className="mb-2 justify-end" />
+                <RunsTable
+                  runs={trigger.runList.runs}
+                  total={trigger.runList.runs.length}
+                  hasFilters={false}
+                  runsParentPath={externalTriggerRunsParentPath(organization, project, trigger)}
+                  currentUser={user}
+                />
+                <ListPagination list={trigger.runList} className="mt-2 justify-end" />
+              </>
+            ) : (
+              <Callout variant="warning">No registration runs found</Callout>
+            )}
+          </div>
         </div>
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam_.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam_.runs.$runParam/route.tsx
index 886dc2474..59f3e4f10 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam_.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.external.$triggerParam_.runs.$runParam/route.tsx
@@ -1,27 +1,21 @@
 import { useRevalidator } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Fragment, useEffect } from "react";
+import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { useEventSource } from "~/hooks/useEventSource";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { RunOverview } from "~/components/run/RunOverview";
 import { prisma } from "~/db.server";
+import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import {
   TriggerSourceRunParamsSchema,
   externalTriggerPath,
   externalTriggerRunPath,
   externalTriggerRunStreamingPath,
   externalTriggerRunsParentPath,
-  projectTriggersPath,
-  trimTrailingSlash,
 } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -64,36 +58,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match, matches) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    if (!data) return null;
-
-    const org = useOrganization(matches);
-    const project = useProject(matches);
-
-    return (
-      <Fragment>
-        <BreadcrumbLink to={projectTriggersPath(org, project)} title="Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={projectTriggersPath(org, project)} title="External Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={externalTriggerPath(org, project, { id: data.trigger.id })}
-          title={`${data.trigger.integration.title}: ${data.trigger.integration.slug}`}
-        />
-        <BreadcrumbIcon />
-        {data && data.run && (
-          <BreadcrumbLink
-            to={trimTrailingSlash(match.pathname)}
-            title={`Run #${data.run.number}`}
-          />
-        )}
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const { run, trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam._index/route.tsx
index de707e5d6..6ae57b05c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam._index/route.tsx
@@ -2,30 +2,19 @@ import { useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Fragment } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { Callout, variantClasses } from "~/components/primitives/Callout";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { RunsTable } from "~/components/runs/RunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
 import { WebhookSourcePresenter } from "~/presenters/WebhookSourcePresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
-import {
-  TriggerSourceParamSchema,
-  projectTriggersPath,
-  projectWebhookTriggersPath,
-  trimTrailingSlash,
-  webhookTriggerRunsParentPath,
-} from "~/utils/pathBuilder";
+import { TriggerSourceParamSchema, webhookTriggerRunsParentPath } from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -60,53 +49,6 @@ const schema = z.object({
   jobId: z.string(),
 });
 
-/* export const action: ActionFunction = async ({ request, params }) => {
-  const userId = await requireUserId(request);
-  const { organizationSlug, projectParam, triggerParam } = TriggerSourceParamSchema.parse(params);
-
-  const formData = await request.formData();
-  const submission = parse(formData, { schema });
-
-  if (!submission.value) {
-    return json(submission);
-  }
-
-  try {
-    const service = new ActivateSourceService();
-
-    const result = await service.call(triggerParam);
-
-    return redirectWithSuccessMessage(
-      externalTriggerPath({ slug: organizationSlug }, { slug: projectParam }, { id: triggerParam }),
-      request,
-      `Retrying registration now`
-    );
-  } catch (error: any) {
-    return json({ errors: { body: error.message } }, { status: 400 });
-  }
-}; */
-
-export const handle: Handle = {
-  //this one is complicated because we render outside the parent route (using triggers_ in the path)
-  breadcrumb: (match, matches) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    if (!data) return null;
-
-    const org = useOrganization(matches);
-    const project = useProject(matches);
-
-    return (
-      <Fragment>
-        <BreadcrumbLink to={projectTriggersPath(org, project)} title="Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={projectWebhookTriggersPath(org, project)} title="Webhook Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title={data.trigger.key} />
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const { trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam.delivery/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam.delivery/route.tsx
index c546c3a4a..20b658c04 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam.delivery/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam.delivery/route.tsx
@@ -1,25 +1,16 @@
 import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Fragment } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { Callout } from "~/components/primitives/Callout";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { WebhookDeliveryRunsTable } from "~/components/runs/WebhookDeliveryRunsTable";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { WebhookDeliveryPresenter } from "~/presenters/WebhookDeliveryPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import {
   TriggerSourceParamSchema,
-  projectTriggersPath,
-  projectWebhookTriggersPath,
-  trimTrailingSlash,
   webhookTriggerDeliveryRunsParentPath,
-  webhookTriggerPath,
 } from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
 
@@ -51,32 +42,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson({ webhook });
 };
 
-export const handle: Handle = {
-  //this one is complicated because we render outside the parent route (using triggers_ in the path)
-  breadcrumb: (match, matches) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    if (!data) return null;
-
-    const org = useOrganization(matches);
-    const project = useProject(matches);
-
-    return (
-      <Fragment>
-        <BreadcrumbLink to={projectTriggersPath(org, project)} title="Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={projectWebhookTriggersPath(org, project)} title="Webhook Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={webhookTriggerPath(org, project, { id: data.webhook.id })}
-          title={data.webhook.key}
-        />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Deliveries" />
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const { webhook } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam/route.tsx
index 741e3960f..19c1ae893 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam/route.tsx
@@ -3,13 +3,12 @@ import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import {
-  PageHeader,
+  NavBar,
   PageInfoGroup,
   PageInfoProperty,
   PageInfoRow,
   PageTabs,
   PageTitle,
-  PageTitleRow,
 } from "~/components/primitives/PageHeader";
 import { RunListSearchSchema } from "~/components/runs/RunStatuses";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -58,16 +57,15 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle
-            title={trigger.key}
-            backButton={{
-              to: projectWebhookTriggersPath(organization, project),
-              text: "Webhook Triggers",
-            }}
-          />
-        </PageTitleRow>
+      <NavBar>
+        <PageTitle
+          title={trigger.key}
+          backButton={{
+            to: projectWebhookTriggersPath(organization, project),
+            text: "Webhook Triggers",
+          }}
+        />
+
         <PageInfoRow>
           <PageInfoGroup>
             <PageInfoProperty
@@ -92,10 +90,10 @@ export default function Page() {
             },
           ]}
         />
-      </PageHeader>
+      </NavBar>
 
       <PageBody scrollable={false}>
-        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+        <div className="h-full overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
           <Outlet />
         </div>
       </PageBody>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.$runParam/route.tsx
index 48d3d27fc..37fff33cb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.$runParam/route.tsx
@@ -1,23 +1,17 @@
 import { useRevalidator } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Fragment, useEffect } from "react";
+import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { useEventSource } from "remix-utils/sse/react";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { RunOverview } from "~/components/run/RunOverview";
 import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import {
   TriggerSourceRunParamsSchema,
-  projectWebhookTriggersPath,
-  trimTrailingSlash,
   webhookTriggerPath,
   webhookTriggerRunPath,
   webhookTriggerRunStreamingPath,
@@ -65,41 +59,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match, matches) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    if (!data) return null;
-
-    const org = useOrganization(matches);
-    const project = useProject(matches);
-
-    return (
-      <Fragment>
-        <BreadcrumbLink to={projectWebhookTriggersPath(org, project)} title="Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={projectWebhookTriggersPath(org, project)} title="Webhook Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={webhookTriggerPath(org, project, { id: data.trigger.id })}
-          title={data.trigger.key}
-        />
-        <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={webhookTriggerPath(org, project, { id: data.trigger.id })}
-          title="Registrations"
-        />
-        <BreadcrumbIcon />
-        {data && data.run && (
-          <BreadcrumbLink
-            to={trimTrailingSlash(match.pathname)}
-            title={`Run #${data.run.number}`}
-          />
-        )}
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const { run, trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.delivery.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.delivery.$runParam/route.tsx
index 16a04e8eb..4c0f7bd2c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.delivery.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers_.webhooks.$triggerParam_.runs.delivery.$runParam/route.tsx
@@ -1,27 +1,20 @@
 import { useRevalidator } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Fragment, useEffect } from "react";
+import { useEffect } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { useEventSource } from "remix-utils/sse/react";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { BreadcrumbIcon } from "~/components/primitives/BreadcrumbIcon";
 import { RunOverview } from "~/components/run/RunOverview";
 import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
 import { RunPresenter } from "~/presenters/RunPresenter.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import {
   TriggerSourceRunParamsSchema,
-  projectWebhookTriggersPath,
-  trimTrailingSlash,
   webhookDeliveryPath,
   webhookTriggerDeliveryRunPath,
   webhookTriggerDeliveryRunsParentPath,
-  webhookTriggerPath,
   webhookTriggerRunStreamingPath,
 } from "~/utils/pathBuilder";
 
@@ -65,41 +58,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match, matches) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    if (!data) return null;
-
-    const org = useOrganization(matches);
-    const project = useProject(matches);
-
-    return (
-      <Fragment>
-        <BreadcrumbLink to={projectWebhookTriggersPath(org, project)} title="Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink to={projectWebhookTriggersPath(org, project)} title="Webhook Triggers" />
-        <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={webhookTriggerPath(org, project, { id: data.trigger.id })}
-          title={`${data.trigger.integration.title}: ${data.trigger.integration.slug}`}
-        />
-        <BreadcrumbIcon />
-        <BreadcrumbLink
-          to={webhookDeliveryPath(org, project, { id: data.trigger.id })}
-          title="Deliveries"
-        />
-        <BreadcrumbIcon />
-        {data && data.run && (
-          <BreadcrumbLink
-            to={trimTrailingSlash(match.pathname)}
-            title={`Run #${data.run.number}`}
-          />
-        )}
-      </Fragment>
-    );
-  },
-};
-
 export default function Page() {
   const { run, trigger } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
index 170c32ce0..1b8e29309 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam/route.tsx
@@ -2,14 +2,11 @@ import { Outlet } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect } from "remix-typedjson";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { prisma } from "~/db.server";
-import { organizationMatchId, useOrganization } from "~/hooks/useOrganizations";
+import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { Handle } from "~/utils/handle";
 import { ProjectParamSchema, projectPath, v3ProjectPath } from "~/utils/pathBuilder";
-import { loader as orgLoader } from "../_app.orgs.$organizationSlug/route";
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const { organizationSlug, projectParam } = ProjectParamSchema.parse(params);
@@ -31,11 +28,6 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 };
 
 export const handle: Handle = {
-  breadcrumb: (match, matches) => {
-    const orgMatch = matches.find((m) => m.id === organizationMatchId);
-    const data = useTypedMatchData<typeof orgLoader>(orgMatch);
-    return <BreadcrumbLink to={match.pathname} title={data?.project.name ?? "Project"} />;
-  },
   scripts: (match) => [
     {
       src: "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js",
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
index 6e5c7cee6..e6cd3c3ec 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -1,25 +1,22 @@
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { TaskRunAttemptStatus } from "@trigger.dev/database";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
-import { VersionLabel } from "~/components/VersionLabel";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { DateTime } from "~/components/primitives/DateTime";
-import { Header2 } from "~/components/primitives/Headers";
-import { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
-import { PopoverMenuItem } from "~/components/primitives/Popover";
 import {
   Table,
   TableBlankRow,
   TableBody,
   TableCell,
   TableCellChevron,
-  TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
+import { TaskPath } from "~/components/runs/v3/TaskPath";
 import { TaskRunStatus } from "~/components/runs/v3/TaskRunStatus";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -61,12 +58,10 @@ export default function Page() {
   const hasTasks = tasks.length > 0;
 
   return (
-    <PageContainer className={hasTasks ? "" : "grid-rows-1"}>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="Tasks" />
-        </PageTitleRow>
-      </PageHeader>
+    <PageContainer>
+      <NavBar>
+        <PageTitle title="Tasks" />
+      </NavBar>
       <PageBody>
         <div className={cn("grid h-full grid-cols-1 gap-4")}>
           <div className="h-full">
@@ -98,7 +93,10 @@ export default function Page() {
                           <TableRow key={task.id} className="group">
                             <TableCell to={path}>{task.slug}</TableCell>
                             <TableCell to={path}>
-                              {task.filePath} {task.exportName}()
+                              <TaskPath
+                                filePath={task.filePath}
+                                functionName={`${task.exportName}()`}
+                              />
                             </TableCell>
                             <TableCell to={path}>
                               <EnvironmentLabel
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
index 5345ed94e..d0da74ad4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx
@@ -1,19 +1,14 @@
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel";
 import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { LinkButton } from "~/components/primitives/Buttons";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Header3 } from "~/components/primitives/Headers";
-import {
-  PageButtons,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { PageAccessories, NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   Table,
@@ -28,7 +23,6 @@ import { useProject } from "~/hooks/useProject";
 import { ApiKeysPresenter } from "~/presenters/v3/ApiKeysPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
 import { ProjectParamSchema, docsPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -54,30 +48,24 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Environments & API Keys" />,
-};
-
 export default function Page() {
   const { environments } = useTypedLoaderData<typeof loader>();
   const project = useProject();
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="API Keys" />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("/documentation/concepts/environments-endpoints#environments")}
-              variant="secondary/small"
-            >
-              API keys docs
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="API Keys" />
+        <PageAccessories>
+          <LinkButton
+            variant={"minimal/small"}
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/documentation/concepts/environments-endpoints#environments")}
+          >
+            API keys docs
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
       <PageBody>
         <div className={cn("h-full")}>
           <Header3 spacing>Server API keys</Header3>
@@ -110,7 +98,7 @@ export default function Page() {
                     <TableCell>
                       <ClipboardField
                         className="w-full max-w-none"
-                        secure
+                        secure={`tr_${environment.apiKey.split("_")[1]}_••••••••`}
                         value={environment.apiKey}
                         variant={"tertiary/small"}
                       />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
index 2aab13cc0..6b45a14e3 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx
@@ -7,6 +7,7 @@ import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -177,19 +178,24 @@ export default function Page() {
                         name={`values[${index}].environmentId`}
                         value={environment.id}
                       />
-                      <label className="flex items-center justify-end" htmlFor={`values[${index}].value`}>
+                      <label
+                        className="flex items-center justify-end"
+                        htmlFor={`values[${index}].value`}
+                      >
                         <EnvironmentLabel environment={environment} className="h-5 px-2" />
                       </label>
-                      <Input
-                        name={`values[${index}].value`}
-                        placeholder="Not set"
-                      />
+                      <Input name={`values[${index}].value`} placeholder="Not set" />
                     </Fragment>
                   );
                 })}
               </div>
             </InputGroup>
 
+            <Callout variant="info">
+              Dev environment variables specified here will be overriden by ones in your .env file
+              when running locally.
+            </Callout>
+
             <FormError id={key.errorId}>{key.error}</FormError>
             <FormError>{form.error}</FormError>
             <FormButtons
@@ -217,7 +223,7 @@ export default function Page() {
               cancelButton={
                 <LinkButton
                   to={v3EnvironmentVariablesPath(organization, project)}
-                  variant="secondary/small"
+                  variant="tertiary/small"
                 >
                   Cancel
                 </LinkButton>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
index aea25e1ee..a0cd865d2 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx
@@ -1,12 +1,12 @@
 import { useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { PencilSquareIcon, TrashIcon } from "@heroicons/react/20/solid";
+import { BookOpenIcon, PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { Form, Outlet, useActionData, useNavigation } from "@remix-run/react";
 import {
   ActionFunctionArgs,
   LoaderFunctionArgs,
   json,
-  redirectDocument
+  redirectDocument,
 } from "@remix-run/server-runtime";
 import { RuntimeEnvironment } from "@trigger.dev/database";
 import { Fragment, useState } from "react";
@@ -15,8 +15,8 @@ import { z } from "zod";
 import { InlineCode } from "~/components/code/InlineCode";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { Fieldset } from "~/components/primitives/Fieldset";
@@ -25,12 +25,7 @@ import { FormError } from "~/components/primitives/FormError";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
-import {
-  PageButtons,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { PageAccessories, NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Switch } from "~/components/primitives/Switch";
 import {
@@ -52,7 +47,6 @@ import {
 } from "~/presenters/v3/EnvironmentVariablesPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { Handle } from "~/utils/handle";
 import {
   ProjectParamSchema,
   docsPath,
@@ -62,7 +56,7 @@ import {
 import { EnvironmentVariablesRepository } from "~/v3/environmentVariables/environmentVariablesRepository.server";
 import {
   DeleteEnvironmentVariable,
-  EditEnvironmentVariable
+  EditEnvironmentVariable,
 } from "~/v3/environmentVariables/repository";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -160,10 +154,6 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Environments & API Keys" />,
-};
-
 export default function Page() {
   const [revealAll, setRevealAll] = useState(false);
   const { environmentVariables, environments } = useTypedLoaderData<typeof loader>();
@@ -172,20 +162,18 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="Environment variables" />
-          <PageButtons>
-            <LinkButton
-              LeadingIcon={"docs"}
-              to={docsPath("/documentation/concepts/environments-endpoints#environments")}
-              variant="secondary/small"
-            >
-              Environment variables docs
-            </LinkButton>
-          </PageButtons>
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Environment variables" />
+        <PageAccessories>
+          <LinkButton
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("/documentation/concepts/environments-endpoints#environments")}
+            variant="minimal/small"
+          >
+            Environment variables docs
+          </LinkButton>
+        </PageAccessories>
+      </NavBar>
       <PageBody>
         <div className={cn("flex h-full flex-col gap-3")}>
           <div className="flex items-center justify-end gap-2">
@@ -198,8 +186,7 @@ export default function Page() {
             <LinkButton
               to={v3NewEnvironmentVariablesPath(organization, project)}
               variant="primary/small"
-              LeadingIcon="plus"
-              leadingIconClassName="text-white"
+              LeadingIcon={PlusIcon}
             >
               New environment variable
             </LinkButton>
@@ -258,6 +245,11 @@ export default function Page() {
               )}
             </TableBody>
           </Table>
+
+          <Callout variant="info" className="mb-4">
+            Dev environment variables specified here will be overriden by ones in your .env file
+            when running locally.
+          </Callout>
         </div>
         <Outlet />
       </PageBody>
@@ -297,7 +289,7 @@ function EditEnvironmentVariablePanel({
         <Button
           variant="small-menu-item"
           LeadingIcon={PencilSquareIcon}
-          leadingIconClassName="text-slate-500"
+          leadingIconClassName="text-charcoal-500"
           className="text-xs"
           fullWidth
           textAlignLeft
@@ -306,16 +298,14 @@ function EditEnvironmentVariablePanel({
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <DialogHeader>
-            Edit {variable.key}
-        </DialogHeader>
+        <DialogHeader>Edit {variable.key}</DialogHeader>
         <Form method="post" {...form.props}>
           <input type="hidden" name="action" value="edit" />
           <input type="hidden" name="id" value={variable.id} />
           <input type="hidden" name="key" value={variable.key} />
           <FormError id={id.errorId}>{id.error}</FormError>
           <Fieldset>
-            <InputGroup fullWidth className="mt-2 mb-4">
+            <InputGroup fullWidth className="mb-4 mt-2">
               <Label>Key</Label>
               <InlineCode>{variable.key}</InlineCode>
             </InputGroup>
@@ -333,7 +323,10 @@ function EditEnvironmentVariablePanel({
                         name={`values[${index}].environmentId`}
                         value={environment.id}
                       />
-                      <label className="flex items-center justify-end" htmlFor={`values[${index}].value`}>
+                      <label
+                        className="flex items-center justify-end"
+                        htmlFor={`values[${index}].value`}
+                      >
                         <EnvironmentLabel environment={environment} className="h-5 px-2" />
                       </label>
                       <Input
@@ -347,25 +340,20 @@ function EditEnvironmentVariablePanel({
               </div>
             </InputGroup>
 
-          <FormError>{form.error}</FormError>
+            <FormError>{form.error}</FormError>
 
-          <FormButtons
-            confirmButton={
-              <Button type="submit" variant="primary/small" disabled={isLoading}>
-                {isLoading ? "Saving" : "Edit"}
-              </Button>
-            }
-            cancelButton={
-              <Button
-              onClick={() => setIsOpen(false)}
-              variant="secondary/small"
-              type="button"
-              >
-                Cancel
-              </Button>
-            }
+            <FormButtons
+              confirmButton={
+                <Button type="submit" variant="primary/small" disabled={isLoading}>
+                  {isLoading ? "Saving" : "Edit"}
+                </Button>
+              }
+              cancelButton={
+                <Button onClick={() => setIsOpen(false)} variant="tertiary/small" type="button">
+                  Cancel
+                </Button>
+              }
             />
-
           </Fieldset>
         </Form>
       </DialogContent>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
index 52931f89c..ba0cc336b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -15,9 +15,15 @@ import { RunIcon } from "~/components/runs/v3/RunIcon";
 import { SpanPresenter } from "~/presenters/v3/SpanPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { v3SpanParamsSchema } from "~/utils/pathBuilder";
+import { v3RunPath, v3SpanParamsSchema } from "~/utils/pathBuilder";
 import { TaskPath } from "~/components/runs/v3/TaskPath";
 import { SpanEvents } from "~/components/runs/v3/SpanEvents";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { AlignRightIcon } from "lucide-react";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useParams } from "@remix-run/react";
+import { ExitIcon } from "~/assets/icons/ExitIcon";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -38,21 +44,29 @@ export default function Page() {
   const {
     span: { event },
   } = useTypedLoaderData<typeof loader>();
+  const organization = useOrganization();
+  const project = useProject();
+  const { runParam } = useParams();
 
   return (
-    <div className="grid max-h-full grid-rows-[2rem_1fr] overflow-hidden">
-      <div className="border-b border-slate-800">
-        <div className="flex h-8 items-center justify-between gap-2 border-b border-ui-border px-2">
-          <div className="flex items-center gap-1 overflow-x-hidden">
-            <RunIcon name={event.style?.icon} className="min-w-4 min-h-4 h-4 w-4" />
-            <Header2 className={cn("whitespace-nowrap")}>
-              <SpanTitle {...event} size="large" />
-            </Header2>
-          </div>
-          <ShortcutKey shortcut={{ key: "esc" }} variant="small" />
+    <div className="grid max-h-full grid-rows-[2.5rem_1fr] overflow-hidden">
+      <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
+        <div className="flex items-center gap-1 overflow-x-hidden">
+          <RunIcon name={event.style?.icon} className="h-4 min-h-4 w-4 min-w-4" />
+          <Header2 className={cn("whitespace-nowrap")}>
+            <SpanTitle {...event} size="large" />
+          </Header2>
         </div>
+        {runParam && (
+          <LinkButton
+            to={v3RunPath(organization, project, { friendlyId: runParam })}
+            variant="minimal/medium"
+            LeadingIcon={ExitIcon}
+            shortcut={{ key: "esc" }}
+          />
+        )}
       </div>
-      <div className="overflow-y-auto px-2 pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700">
+      <div className="overflow-y-auto px-2 pt-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <div className="flex flex-col gap-4">
           <PropertyTable>
             {event.level === "TRACE" ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.stream/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.stream/route.tsx
new file mode 100644
index 000000000..682337cae
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.stream/route.tsx
@@ -0,0 +1,13 @@
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { RunStreamPresenter } from "~/presenters/v3/RunStreamPresenter.server";
+import { requireUserId } from "~/services/session.server";
+
+export async function loader({ request, params }: LoaderFunctionArgs) {
+  await requireUserId(request);
+
+  const { runParam } = z.object({ runParam: z.string() }).parse(params);
+
+  const presenter = new RunStreamPresenter();
+  return presenter.call({ request, runFriendlyId: runParam });
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
index 196b60200..10038839f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
@@ -1,36 +1,35 @@
 import {
   ChevronDownIcon,
   ChevronRightIcon,
-  ExclamationCircleIcon,
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon,
 } from "@heroicons/react/20/solid";
-import { Link, Outlet, useNavigate } from "@remix-run/react";
+import { Link, Outlet, useNavigate, useRevalidator } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { formatDurationNanoseconds } from "@trigger.dev/core/v3";
-import { useRef, useState } from "react";
+import { formatDurationMilliseconds, nanosecondsToMilliseconds } from "@trigger.dev/core/v3";
+import { useEffect, useRef, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ShowParentIcon, ShowParentIconSelected } from "~/assets/icons/ShowParentIcon";
+import tileBgPath from "~/assets/images/error-banner-tile@2x.png";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody } from "~/components/layout/AppLayout";
+import { Badge } from "~/components/primitives/Badge";
 import { Input } from "~/components/primitives/Input";
-import {
-  PageButtons,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "~/components/primitives/Resizable";
-import { Spinner } from "~/components/primitives/Spinner";
+import { Slider } from "~/components/primitives/Slider";
 import { Switch } from "~/components/primitives/Switch";
+import * as Timeline from "~/components/primitives/Timeline";
 import { TreeView, useTree } from "~/components/primitives/TreeView/TreeView";
-import { LiveTimer } from "~/components/runs/v3/LiveTimer";
 import { RunIcon } from "~/components/runs/v3/RunIcon";
-import { SpanTitle } from "~/components/runs/v3/SpanTitle";
+import { SpanTitle, eventBackgroundClassName } from "~/components/runs/v3/SpanTitle";
 import { useDebounce } from "~/hooks/useDebounce";
+import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { usePathName } from "~/hooks/usePathName";
 import { useProject } from "~/hooks/useProject";
@@ -39,14 +38,20 @@ import { RunEvent, RunPresenter } from "~/presenters/v3/RunPresenter.server";
 import { getResizableRunSettings, setResizableRunSettings } from "~/services/resizablePanel";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
-import { v3RunParamsSchema, v3RunPath, v3RunSpanPath } from "~/utils/pathBuilder";
+import {
+  v3RunParamsSchema,
+  v3RunPath,
+  v3RunSpanPath,
+  v3RunStreamingPath,
+  v3RunsPath,
+} from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const { projectParam, organizationSlug, runParam } = v3RunParamsSchema.parse(params);
 
   const presenter = new RunPresenter();
-  const { run, events, parentRunFriendlyId } = await presenter.call({
+  const { run, events, parentRunFriendlyId, duration } = await presenter.call({
     userId,
     organizationSlug,
     projectSlug: projectParam,
@@ -61,6 +66,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     events,
     parentRunFriendlyId,
     resizeSettings,
+    duration,
   });
 };
 
@@ -71,7 +77,8 @@ function getSpanId(path: string): string | undefined {
 }
 
 export default function Page() {
-  const { run, events, parentRunFriendlyId, resizeSettings } = useTypedLoaderData<typeof loader>();
+  const { run, events, parentRunFriendlyId, resizeSettings, duration } =
+    useTypedLoaderData<typeof loader>();
   const navigate = useNavigate();
   const organization = useOrganization();
   const pathName = usePathName();
@@ -86,18 +93,33 @@ export default function Page() {
 
   const usernameForEnv = user.id !== run.environment.userId ? run.environment.userName : undefined;
 
+  const revalidator = useRevalidator();
+  const streamedEvents = useEventSource(v3RunStreamingPath(organization, project, run), {
+    event: "message",
+  });
+  useEffect(() => {
+    if (streamedEvents !== null) {
+      revalidator.revalidate();
+    }
+    // WARNING Don't put the revalidator in the useEffect deps array or bad things will happen
+  }, [streamedEvents]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle title={`Run #${run.number}`} />
-          <PageButtons>
-            <EnvironmentLabel environment={run.environment} userName={usernameForEnv} />
-          </PageButtons>
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle
+          backButton={{
+            to: v3RunsPath(organization, project),
+            text: "Runs",
+          }}
+          title={`Run #${run.number}`}
+        />
+        <PageAccessories>
+          <EnvironmentLabel size="large" environment={run.environment} userName={usernameForEnv} />
+        </PageAccessories>
+      </NavBar>
       <PageBody scrollable={false}>
-        <div className={cn("grid h-full max-h-full grid-cols-1")}>
+        <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
           {selectedSpanId === undefined ? (
             <TasksTreeView
               selectedId={selectedSpanId}
@@ -113,6 +135,7 @@ export default function Page() {
 
                 changeToSpan(selectedSpan);
               }}
+              totalDuration={duration}
             />
           ) : (
             <ResizablePanelGroup
@@ -138,6 +161,7 @@ export default function Page() {
 
                     changeToSpan(selectedSpan);
                   }}
+                  totalDuration={duration}
                 />
               </ResizablePanel>
               <ResizableHandle withHandle />
@@ -152,20 +176,28 @@ export default function Page() {
   );
 }
 
+const tickCount = 5;
+
 function TasksTreeView({
   events,
   selectedId,
   parentRunFriendlyId,
   onSelectedIdChanged,
+  totalDuration,
 }: {
   events: RunEvent[];
   selectedId?: string;
   parentRunFriendlyId?: string;
   onSelectedIdChanged: (selectedId: string | undefined) => void;
+  totalDuration: number;
 }) {
   const [filterText, setFilterText] = useState("");
   const [errorsOnly, setErrorsOnly] = useState(false);
+  const [showDurations, setShowDurations] = useState(false);
+  const [scale, setScale] = useState(0.25);
   const parentRef = useRef<HTMLDivElement>(null);
+  const treeScrollRef = useRef<HTMLDivElement>(null);
+  const timelineScrollRef = useRef<HTMLDivElement>(null);
 
   const {
     nodes,
@@ -196,8 +228,8 @@ function TasksTreeView({
   });
 
   return (
-    <div className="h-full overflow-y-clip px-3">
-      <div className="flex h-8 items-center justify-between gap-2 border-b border-slate-850">
+    <div className="grid h-full grid-rows-[2.5rem_1fr] overflow-hidden">
+      <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
         <Input
           placeholder="Search log"
           variant="tertiary"
@@ -206,95 +238,268 @@ function TasksTreeView({
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
         />
-        <Switch
-          variant="small"
-          label="Errors only"
-          checked={errorsOnly}
-          onCheckedChange={(e) => setErrorsOnly(e.valueOf())}
-        />
+        <div className="flex items-center gap-2">
+          <Switch
+            variant="small"
+            label="Errors only"
+            checked={errorsOnly}
+            onCheckedChange={(e) => setErrorsOnly(e.valueOf())}
+          />
+          <Switch
+            variant="small"
+            label="Show durations"
+            checked={showDurations}
+            onCheckedChange={(e) => setShowDurations(e.valueOf())}
+          />
+          <Slider
+            variant={"tertiary"}
+            className="w-20"
+            LeadingIcon={MagnifyingGlassMinusIcon}
+            TrailingIcon={MagnifyingGlassPlusIcon}
+            value={[scale]}
+            onValueChange={(value) => setScale(value[0])}
+            min={0}
+            max={1}
+            step={0.05}
+          />
+        </div>
       </div>
-      {parentRunFriendlyId && <ShowParentLink runFriendlyId={parentRunFriendlyId} />}
-      <TreeView
-        parentRef={parentRef}
-        virtualizer={virtualizer}
-        autoFocus
-        tree={events}
-        nodes={nodes}
-        getNodeProps={getNodeProps}
-        getTreeProps={getTreeProps}
-        parentClassName="h-full mt-2"
-        renderNode={({ node, state, index, virtualizer, virtualItem }) => (
-          <div
-            className={cn(
-              "flex h-8 cursor-pointer items-center rounded-sm border border-transparent",
-              node.data.isError ? "bg-rose-500/10 hover:bg-rose-500/20" : "hover:bg-slate-900",
-              state.selected && (node.data.isError ? "border-rose-500" : "border-indigo-500")
-            )}
-            onClick={() => {
-              toggleNodeSelection(node.id);
-            }}
-          >
-            <div className="flex h-8 items-center">
-              {Array.from({ length: node.level }).map((_, index) => (
-                <TaskLine key={index} isError={node.data.isError} isSelected={state.selected} />
-              ))}
-              <div
-                className={cn(
-                  "flex h-8 w-4 items-center",
-                  node.hasChildren &&
-                    (node.data.isError ? "hover:bg-rose-500/30" : "hover:bg-slate-800")
-                )}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggleExpandNode(node.id);
-                  selectNode(node.id);
-                  scrollToNode(node.id);
-                }}
-                onKeyDown={(e) => {
-                  console.log(e.key);
-                }}
-              >
-                {node.hasChildren ? (
-                  state.expanded ? (
-                    <ChevronDownIcon className="h-4 w-4 text-slate-400" />
-                  ) : (
-                    <ChevronRightIcon className="h-4 w-4 text-slate-400" />
-                  )
-                ) : (
-                  <div className="h-8 w-4" />
-                )}
-              </div>
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(layout) => {
+          if (layout.length !== 2) return;
+          setResizableRunSettings(document, layout);
+        }}
+      >
+        {/* Tree list */}
+        <ResizablePanel order={1} minSize={20} defaultSize={50} className="pl-3">
+          <div className="grid h-full grid-rows-[2rem_1fr] overflow-hidden">
+            <div>
+              {parentRunFriendlyId && <ShowParentLink runFriendlyId={parentRunFriendlyId} />}
             </div>
-
-            <div className="flex w-full items-center justify-between gap-2 px-1">
-              <div className="flex items-center gap-2 overflow-x-hidden">
-                <RunIcon name={node.data.style?.icon} className="min-w-4 min-h-4 h-4 w-4" />
-                <NodeText node={node} />
-              </div>
-              <div className="flex items-center gap-2">
-                {node.data.isError ? (
-                  <div className="flex items-center gap-1">
-                    <Paragraph variant="extra-small" className="text-rose-500">
-                      Error
-                    </Paragraph>
-                    <ExclamationCircleIcon className="h-3 w-3 text-rose-500" />
+            <TreeView
+              parentRef={parentRef}
+              scrollRef={treeScrollRef}
+              virtualizer={virtualizer}
+              autoFocus
+              tree={events}
+              nodes={nodes}
+              getNodeProps={getNodeProps}
+              getTreeProps={getTreeProps}
+              parentClassName="pt-2"
+              renderNode={({ node, state }) => (
+                <div
+                  className={cn(
+                    "flex h-8 cursor-pointer items-center rounded-l-sm pr-3",
+                    state.selected
+                      ? "bg-grid-dimmed hover:bg-grid-bright"
+                      : "bg-transparent hover:bg-grid-dimmed"
+                  )}
+                  onClick={() => {
+                    toggleNodeSelection(node.id);
+                  }}
+                >
+                  <div className="flex h-8 items-center">
+                    {Array.from({ length: node.level }).map((_, index) => (
+                      <TaskLine
+                        key={index}
+                        isError={node.data.isError}
+                        isSelected={state.selected}
+                      />
+                    ))}
+                    <div
+                      className={cn(
+                        "flex h-8 w-4 items-center",
+                        node.hasChildren &&
+                          (node.data.isError ? "hover:bg-rose-500/30" : "hover:bg-charcoal-800")
+                      )}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleExpandNode(node.id);
+                        selectNode(node.id);
+                        scrollToNode(node.id);
+                      }}
+                    >
+                      {node.hasChildren ? (
+                        state.expanded ? (
+                          <ChevronDownIcon className="h-4 w-4 text-charcoal-400" />
+                        ) : (
+                          <ChevronRightIcon className="h-4 w-4 text-charcoal-400" />
+                        )
+                      ) : (
+                        <div className="h-8 w-4" />
+                      )}
+                    </div>
                   </div>
-                ) : null}
-                {node.data.isPartial ? (
-                  <LiveDuration startTime={node.data.startTime} />
-                ) : node.data.duration > 0 ? (
-                  <Duration duration={node.data.duration} />
-                ) : null}
-                {node.data.isCancelled ? (
-                  <Paragraph variant="extra-small" className="text-amber-500">
-                    Cancelled
-                  </Paragraph>
-                ) : null}
-              </div>
-            </div>
+
+                  <div className="flex w-full items-center justify-between gap-2 px-1">
+                    <div className="flex items-center gap-2 overflow-x-hidden">
+                      <RunIcon name={node.data.style?.icon} className="h-4 min-h-4 w-4 min-w-4" />
+                      <NodeText node={node} />
+                      {node.data.isRoot && <Badge variant="outline-rounded">Root</Badge>}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {node.data.isCancelled ? (
+                        <Paragraph variant="extra-small" className="text-amber-500">
+                          Cancelled
+                        </Paragraph>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+              )}
+              onScroll={(scrollTop) => {
+                //sync the scroll to the tree
+                if (
+                  timelineScrollRef.current &&
+                  timelineScrollRef.current.scrollTop !== scrollTop
+                ) {
+                  timelineScrollRef.current.scrollTop = scrollTop;
+                }
+              }}
+            />
           </div>
-        )}
-      />
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        {/* Timeline */}
+        <ResizablePanel order={2} minSize={20} defaultSize={50}>
+          <div className="h-full overflow-x-auto overflow-y-hidden pr-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+            <Timeline.Root
+              durationMs={nanosecondsToMilliseconds(totalDuration)}
+              scale={scale}
+              className="h-full pt-2"
+              minWidth={300}
+              maxWidth={2000}
+            >
+              {/* Follows the cursor */}
+              <Timeline.FollowCursor>
+                {(ms) => (
+                  <div className="relative z-50 flex h-full flex-col">
+                    <div className="relative flex h-8 items-end">
+                      <div className="absolute left-1/2 w-fit -translate-x-1/2 rounded-sm border border-charcoal-600 bg-charcoal-750 px-1 py-0.5 text-xxs tabular-nums text-text-bright">
+                        {formatDurationMilliseconds(ms, {
+                          style: "short",
+                          maxDecimalPoints: ms < 1000 ? 0 : 1,
+                        })}
+                      </div>
+                    </div>
+                    <div className="w-px grow border-r border-charcoal-600" />
+                  </div>
+                )}
+              </Timeline.FollowCursor>
+
+              <Timeline.Row className="grid h-full grid-rows-[2rem_1fr]">
+                {/* The duration labels */}
+                <Timeline.Row>
+                  <Timeline.Row className="h-5">
+                    <Timeline.EquallyDistribute count={tickCount}>
+                      {(ms: number, index: number) => (
+                        <Timeline.Point
+                          ms={ms}
+                          className={"relative bottom-0 text-xxs text-text-dimmed"}
+                        >
+                          {(ms) => (
+                            <div
+                              className={cn(
+                                "whitespace-nowrap",
+                                index === 0
+                                  ? "ml-0.5"
+                                  : index === tickCount - 1
+                                  ? "-translate-x-full"
+                                  : "-translate-x-1/2"
+                              )}
+                            >
+                              {formatDurationMilliseconds(ms, {
+                                style: "short",
+                                maxDecimalPoints: ms < 1000 ? 0 : 1,
+                              })}
+                            </div>
+                          )}
+                        </Timeline.Point>
+                      )}
+                    </Timeline.EquallyDistribute>
+                  </Timeline.Row>
+                  <Timeline.Row className="h-3">
+                    <Timeline.EquallyDistribute count={tickCount}>
+                      {(ms: number, index: number) => {
+                        if (index === 0) return null;
+                        return (
+                          <Timeline.Point
+                            ms={ms}
+                            className={"h-full border-r border-grid-dimmed"}
+                          />
+                        );
+                      }}
+                    </Timeline.EquallyDistribute>
+                  </Timeline.Row>
+                </Timeline.Row>
+                {/* Main timeline body */}
+                <Timeline.Row className="overflow-hidden">
+                  {/* The vertical tick lines */}
+                  <Timeline.EquallyDistribute count={tickCount}>
+                    {(ms: number, index: number) => {
+                      if (index === 0) return null;
+                      return (
+                        <Timeline.Point ms={ms} className={"h-full border-r border-grid-dimmed"} />
+                      );
+                    }}
+                  </Timeline.EquallyDistribute>
+                  <TreeView
+                    parentRef={parentRef}
+                    scrollRef={timelineScrollRef}
+                    virtualizer={virtualizer}
+                    tree={events}
+                    nodes={nodes}
+                    getNodeProps={getNodeProps}
+                    getTreeProps={getTreeProps}
+                    parentClassName="h-full scrollbar-hide"
+                    renderNode={({ node, state, index, virtualizer, virtualItem }) => {
+                      return (
+                        <Timeline.Row
+                          key={index}
+                          className={cn(
+                            "group flex h-8 items-center",
+                            state.selected
+                              ? "bg-grid-dimmed hover:bg-grid-bright"
+                              : "bg-transparent hover:bg-grid-dimmed"
+                          )}
+                          // onMouseOver={() => console.log(`hover ${index}`)}
+                          onClick={(e) => {
+                            toggleNodeSelection(node.id);
+                          }}
+                        >
+                          {node.data.level === "TRACE" ? (
+                            <SpanWithDuration
+                              showDuration={state.selected ? true : showDurations}
+                              startMs={nanosecondsToMilliseconds(node.data.offset)}
+                              durationMs={nanosecondsToMilliseconds(node.data.duration)}
+                              node={node}
+                            />
+                          ) : (
+                            <Timeline.Point
+                              ms={nanosecondsToMilliseconds(node.data.offset)}
+                              className={cn(
+                                "-ml-1.5 h-3 w-3 rounded-full border-2 border-background-bright",
+                                eventBackgroundClassName(node.data)
+                              )}
+                            />
+                          )}
+                        </Timeline.Row>
+                      );
+                    }}
+                    onScroll={(scrollTop) => {
+                      //sync the scroll to the tree
+                      if (treeScrollRef.current && treeScrollRef.current.scrollTop !== scrollTop) {
+                        treeScrollRef.current.scrollTop = scrollTop;
+                      }
+                    }}
+                  />
+                </Timeline.Row>
+              </Timeline.Row>
+            </Timeline.Root>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </div>
   );
 }
@@ -310,24 +515,9 @@ function NodeText({ node }: { node: RunEvent }) {
 
 function TaskLine({ isError, isSelected }: { isError: boolean; isSelected: boolean }) {
   return (
-    <div className={cn("h-8 w-2 border-r", isError ? "border-rose-500/10" : "border-slate-800")} />
-  );
-}
-
-function Duration({ duration }: { duration: number }) {
-  return (
-    <Paragraph variant="extra-small" className="whitespace-nowrap">
-      {formatDurationNanoseconds(duration, { style: "short" })}
-    </Paragraph>
-  );
-}
-
-function LiveDuration({ startTime }: { startTime: Date }) {
-  return (
-    <div className="flex items-center gap-1">
-      <LiveTimer startTime={startTime} />
-      <Spinner color="blue" className="h-4 w-4" />
-    </div>
+    <div
+      className={cn("h-8 w-2 border-r", isError ? "border-rose-500/10" : "border-charcoal-800")}
+    />
   );
 }
 
@@ -348,11 +538,51 @@ function ShowParentLink({ runFriendlyId }: { runFriendlyId: string }) {
       {mouseOver ? (
         <ShowParentIconSelected className="h-4 w-4 text-indigo-500" />
       ) : (
-        <ShowParentIcon className="h-4 w-4 text-slate-650" />
+        <ShowParentIcon className="text-charcoal-650 h-4 w-4" />
       )}
-      <Paragraph variant="small" className={cn(mouseOver ? "text-indigo-500" : "text-slate-500")}>
+      <Paragraph
+        variant="small"
+        className={cn(mouseOver ? "text-indigo-500" : "text-charcoal-500")}
+      >
         Show parent items
       </Paragraph>
     </Link>
   );
 }
+
+function SpanWithDuration({
+  showDuration,
+  node,
+  ...props
+}: Timeline.SpanProps & { node: RunEvent; showDuration: boolean }) {
+  return (
+    <Timeline.Span {...props}>
+      <div
+        className={cn(
+          "relative flex h-4 w-full min-w-px items-center rounded-sm",
+          eventBackgroundClassName(node.data)
+        )}
+      >
+        {node.data.isPartial && (
+          <div
+            className="absolute left-0 top-0 h-full w-full animate-tile-scroll rounded-sm opacity-50"
+            style={{ backgroundImage: `url(${tileBgPath})`, backgroundSize: "8px 8px" }}
+          />
+        )}
+        <div
+          className={cn(
+            "sticky left-0 z-10 transition group-hover:opacity-100",
+            !showDuration && "opacity-0"
+          )}
+        >
+          <div className="rounded-sm px-1 py-0.5 text-xxs text-text-bright text-shadow-custom">
+            {formatDurationMilliseconds(props.durationMs, {
+              style: "short",
+              maxDecimalPoints: props.durationMs < 1000 ? 0 : 1,
+            })}
+          </div>
+        </div>
+      </div>
+    </Timeline.Span>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx
index 986849210..fda2ad317 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx
@@ -11,7 +11,7 @@ import { cn } from "~/utils/cn";
 import { ProjectParamSchema } from "~/utils/pathBuilder";
 import { ListPagination } from "../../components/ListPagination";
 import { PageBody } from "~/components/layout/AppLayout";
-import { PageHeader, PageTitleRow, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -50,11 +50,9 @@ export default function Page() {
 
   return (
     <>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle title="Runs" />
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Runs" />
+      </NavBar>
       <PageBody>
         <div className={cn("grid h-fit grid-cols-1 gap-4")}>
           <div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx
index 53dffa080..a47f639b5 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx
@@ -1,5 +1,6 @@
 import { useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { BeakerIcon } from "@heroicons/react/20/solid";
 import { Form, useActionData, useNavigation, useSubmit } from "@remix-run/react";
 import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { useCallback, useRef, useState } from "react";
@@ -154,39 +155,43 @@ export default function Page() {
     >
       <ResizablePanelGroup direction="horizontal">
         <ResizablePanel order={1} minSize={30} defaultSize={60}>
-          <JSONEditor
-            defaultValue={defaultJson}
-            readOnly={false}
-            basicSetup
-            onChange={(v) => {
-              currentJson.current = v;
+          <div className="h-full bg-charcoal-900">
+            <JSONEditor
+              defaultValue={defaultJson}
+              readOnly={false}
+              basicSetup
+              onChange={(v) => {
+                currentJson.current = v;
 
-              //deselect the example if it's been edited
-              if (selectedCodeSampleId) {
-                if (v !== selectedCodeSample) {
-                  setDefaultJson(v);
-                  setSelectedCodeSampleId(undefined);
+                //deselect the example if it's been edited
+                if (selectedCodeSampleId) {
+                  if (v !== selectedCodeSample) {
+                    setDefaultJson(v);
+                    setSelectedCodeSampleId(undefined);
+                  }
                 }
-              }
-            }}
-            height="100%"
-            min-height="100%"
-            max-height="100%"
-            autoFocus
-            placeholder="Use your schema to enter valid JSON or add one of the example payloads then click 'Run test'"
-            className="h-full"
-          />
+              }}
+              height="100%"
+              min-height="100%"
+              max-height="100%"
+              autoFocus
+              placeholder="Use your schema to enter valid JSON or add one of the recent payloads then click 'Run test'"
+              className="h-full"
+            />
+          </div>
         </ResizablePanel>
         <ResizableHandle withHandle />
         <ResizablePanel order={2} minSize={20} defaultSize={40}>
           <div className="flex flex-col gap-2 pl-4">
-            <Header2>Recent payloads</Header2>
+            <div className="flex h-10 items-center border-b border-grid-dimmed">
+              <Header2>Recent payloads</Header2>
+            </div>
             {runs.length === 0 ? (
               <Callout variant="info">
                 Recent payloads will show here once you've completed a Run.
               </Callout>
             ) : (
-              <div className="flex flex-col divide-y divide-slate-850">
+              <div className="flex flex-col divide-y divide-charcoal-850">
                 {runs.map((run) => (
                   <button
                     key={run.id}
@@ -202,7 +207,7 @@ export default function Page() {
                       <Paragraph variant="small">
                         <DateTime date={run.createdAt} />
                       </Paragraph>
-                      <div className="flex items-center gap-1 text-xs text-dimmed">
+                      <div className="flex items-center gap-1 text-xs text-text-dimmed">
                         <div>Run #{run.number}</div>
                         <TaskRunStatus status={run.status} />
                       </div>
@@ -214,7 +219,7 @@ export default function Page() {
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
-      <div className="flex items-center justify-end gap-2 border-t border-border bg-midnight-900">
+      <div className="flex items-center justify-end gap-2 border-t border-grid-bright bg-background-dimmed px-2">
         <div className="flex items-center gap-1">
           <TaskPath
             filePath={task.filePath}
@@ -227,9 +232,8 @@ export default function Page() {
         </div>
         <Button
           type="submit"
-          variant="primary/medium"
-          LeadingIcon="beaker"
-          leadingIconClassName="text-bright"
+          variant="primary/small"
+          LeadingIcon={BeakerIcon}
           shortcut={{ key: "enter", modifiers: ["mod"], enabledOnInputElements: true }}
         >
           Run test
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
index e3abc09d1..f15e453d0 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
@@ -4,7 +4,7 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Header2 } from "~/components/primitives/Headers";
-import { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { RadioButtonCircle } from "~/components/primitives/RadioButton";
 import {
   ResizableHandle,
@@ -37,25 +37,21 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
 export default function Page() {
   const { tasks } = useTypedLoaderData<typeof loader>();
-  const navigation = useNavigation();
-  const isLoading = navigation.state !== "idle";
-  const project = useProject();
-  const user = useUser();
   const { taskParam } = useParams();
 
   return (
     <PageContainer>
-      <PageHeader hideBorder>
-        <PageTitleRow>
-          <PageTitle title="Test" />
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Test" />
+      </NavBar>
       <PageBody scrollable={false}>
         <div className={cn("grid h-full max-h-full grid-cols-1")}>
           <ResizablePanelGroup direction="horizontal" className="h-full max-h-full">
             <ResizablePanel order={1} minSize={20} defaultSize={30}>
               <div className="flex flex-col px-3">
-                <Header2>Select a task</Header2>
+                <div className="flex h-10 items-center border-b border-grid-dimmed">
+                  <Header2>Select a task</Header2>
+                </div>
                 <TaskSelector tasks={tasks} />
               </div>
             </ResizablePanel>
@@ -75,7 +71,7 @@ function TaskSelector({ tasks }: { tasks: TaskListItem[] }) {
   const project = useProject();
 
   return (
-    <div className="flex flex-col divide-y divide-slate-800">
+    <div className="flex flex-col divide-y divide-charcoal-800">
       {tasks.map((t) => (
         <NavLink key={t.id} to={v3TestTaskPath(organization, project, t)}>
           {({ isActive, isPending }) => (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam/route.tsx
index 15e7a4906..6f08bd183 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam/route.tsx
@@ -2,14 +2,11 @@ import { Outlet } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect } from "remix-typedjson";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { prisma } from "~/db.server";
-import { organizationMatchId, useOrganization } from "~/hooks/useOrganizations";
+import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useTypedMatchData } from "~/hooks/useTypedMatchData";
 import { Handle } from "~/utils/handle";
 import { ProjectParamSchema, projectPath, v3ProjectPath } from "~/utils/pathBuilder";
-import { loader as orgLoader } from "../_app.orgs.$organizationSlug/route";
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const { organizationSlug, projectParam } = ProjectParamSchema.parse(params);
@@ -31,11 +28,6 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
 };
 
 export const handle: Handle = {
-  breadcrumb: (match, matches) => {
-    const orgMatch = matches.find((m) => m.id === organizationMatchId);
-    const data = useTypedMatchData<typeof orgLoader>(orgMatch);
-    return <BreadcrumbLink to={match.pathname} title={data?.project.name ?? "Project"} />;
-  },
   scripts: (match) => [
     {
       src: "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js",
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx
index 2cb476ba5..8d17a7922 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx
@@ -3,7 +3,6 @@ import { parse } from "@conform-to/zod";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { ActionFunction, json } from "@remix-run/server-runtime";
 import { redirect } from "remix-typedjson";
-import { r } from "tar";
 import { z } from "zod";
 import { InlineCode } from "~/components/code/InlineCode";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -16,7 +15,7 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
-import { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { prisma } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
@@ -183,11 +182,9 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title={`${organization.title} organization settings`} />
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title={`${organization.title} organization settings`} />
+      </NavBar>
 
       <PageBody>
         <div className="flex flex-col gap-4">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx
index 0fd9c10a3..80718a213 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.team/route.tsx
@@ -20,8 +20,10 @@ import {
   AlertTrigger,
 } from "~/components/primitives/Alert";
 import { Button, ButtonContent, LinkButton } from "~/components/primitives/Buttons";
+import { DateTime } from "~/components/primitives/DateTime";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { NamedIcon } from "~/components/primitives/NamedIcon";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -30,10 +32,6 @@ import { getTeamMembersAndInvites, removeTeamMember } from "~/models/member.serv
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { requireUserId } from "~/services/session.server";
 import { inviteTeamMemberPath, organizationTeamPath, resendInvitePath } from "~/utils/pathBuilder";
-import { DateTime } from "~/components/primitives/DateTime";
-import { PageHeader, PageTitleRow, PageTitle } from "~/components/primitives/PageHeader";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { Handle } from "~/utils/handle";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -95,10 +93,6 @@ export const action: ActionFunction = async ({ request, params }) => {
 type Member = UseDataFunctionReturn<typeof loader>["members"][number];
 type Invite = UseDataFunctionReturn<typeof loader>["invites"][number];
 
-export const handle: Handle = {
-  breadcrumb: (match) => <BreadcrumbLink to={match.pathname} title="Team" />,
-};
-
 export default function Page() {
   const user = useUser();
   const { members, invites } = useTypedLoaderData<typeof loader>();
@@ -106,14 +100,12 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="Team" />
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Team" />
+      </NavBar>
       <PageBody>
         <Header2>Members</Header2>
-        <ul className="flex w-full max-w-md flex-col divide-y divide-ui-border border-b border-ui-border">
+        <ul className="divide-ui-border flex w-full max-w-md flex-col divide-y border-b border-grid-bright">
           {members.map((member) => (
             <li key={member.user.id} className="flex items-center gap-x-4 py-4">
               <UserAvatar
@@ -124,7 +116,7 @@ export default function Page() {
               <div className="flex flex-col gap-0.5">
                 <Header3>
                   {member.user.name}{" "}
-                  {member.user.id === user.id && <span className="text-dimmed">(You)</span>}
+                  {member.user.id === user.id && <span className="text-text-dimmed">(You)</span>}
                 </Header3>
                 <Paragraph variant="small">{member.user.email}</Paragraph>
               </div>
@@ -143,10 +135,10 @@ export default function Page() {
         {invites.length > 0 && (
           <>
             <Header2 className="mt-4">Pending invites</Header2>
-            <ul className="flex w-full max-w-md flex-col divide-y divide-slate-800 border-b border-slate-800">
+            <ul className="flex w-full max-w-md flex-col divide-y divide-charcoal-800 border-b border-charcoal-800">
               {invites.map((invite) => (
                 <li key={invite.id} className="flex items-center gap-4 py-4">
-                  <div className="rounded-md border border-slate-750 bg-slate-800 p-1.5">
+                  <div className="rounded-md border border-charcoal-750 bg-charcoal-800 p-1.5">
                     <NamedIcon name="envelope" className="h-7 w-7" />
                   </div>
                   <div className="flex flex-col gap-0.5">
@@ -194,7 +186,7 @@ function LeaveRemoveButton({
       return (
         <SimpleTooltip
           button={
-            <ButtonContent variant="secondary/small" className="cursor-not-allowed">
+            <ButtonContent variant="minimal/small" className="cursor-not-allowed">
               Leave team
             </ButtonContent>
           }
@@ -255,7 +247,7 @@ function LeaveTeamModal({
   return (
     <Alert open={open} onOpenChange={(o) => setOpen(o)}>
       <AlertTrigger asChild>
-        <Button variant="secondary/small">{buttonText}</Button>
+        <Button variant="tertiary/small">{buttonText}</Button>
       </AlertTrigger>
       <AlertContent>
         <AlertHeader>
@@ -282,7 +274,7 @@ function ResendButton({ invite }: { invite: Invite }) {
   return (
     <Form method="post" action={resendInvitePath()}>
       <input type="hidden" value={invite.id} name="inviteId" />
-      <Button type="submit" variant="secondary/small">
+      <Button type="submit" variant="tertiary/small">
         Resend invite
       </Button>
     </Form>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
index 8e20dabe0..360dc5016 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
@@ -3,20 +3,17 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
-import { UpgradePrompt } from "~/components/billing/UpgradePrompt";
-import { Breadcrumb, BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { PageNavigationIndicator } from "~/components/navigation/PageNavigationIndicator";
+import { MainBody } from "~/components/layout/AppLayout";
 import { SideMenu } from "~/components/navigation/SideMenu";
 import { featuresForRequest } from "~/features.server";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
-import { useTypedMatchData, useTypedMatchesData } from "~/hooks/useTypedMatchData";
+import { useTypedMatchesData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";
 import { OrganizationsPresenter } from "~/presenters/OrganizationsPresenter.server";
 import { BillingService } from "~/services/billing.server";
 import { getImpersonationId } from "~/services/impersonation.server";
 import { requireUserId } from "~/services/session.server";
 import { telemetry } from "~/services/telemetry.server";
-import { Handle } from "~/utils/handle";
 import { organizationPath } from "~/utils/pathBuilder";
 
 const ParamsSchema = z.object({
@@ -62,15 +59,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    const data = useTypedMatchData<typeof loader>(match);
-    return (
-      <BreadcrumbLink to={match.pathname} title={data?.organization.title ?? "Organization"} />
-    );
-  },
-};
-
 export default function Organization() {
   const { organization, project, organizations, isImpersonating } =
     useTypedLoaderData<typeof loader>();
@@ -85,16 +73,9 @@ export default function Organization() {
           organization={organization}
           organizations={organizations}
         />
-        <div className="grid grid-rows-[2.25rem_1fr] overflow-hidden">
-          <div className="flex w-full items-center justify-between border-b border-ui-border">
-            <Breadcrumb />
-            <div className="flex h-full items-center gap-4">
-              <PageNavigationIndicator className="mr-2" />
-              <UpgradePrompt organization={organization} />
-            </div>
-          </div>
+        <MainBody>
           <Outlet />
-        </div>
+        </MainBody>
       </div>
     </>
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
index 2a0850d9f..3809f59ce 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
@@ -21,8 +21,6 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
-  SelectLabel,
-  SelectSeparator,
   SelectTrigger,
   SelectValue,
 } from "~/components/primitives/Select";
@@ -164,13 +162,13 @@ export default function NewOrganizationPage() {
             )}
             <FormButtons
               confirmButton={
-                <Button type="submit" variant={"primary/small"} TrailingIcon="arrow-right">
+                <Button type="submit" variant={"primary/small"}>
                   Create
                 </Button>
               }
               cancelButton={
                 organization.projectsCount > 0 ? (
-                  <LinkButton to={organizationPath(organization)} variant={"secondary/small"}>
+                  <LinkButton to={organizationPath(organization)} variant={"tertiary/small"}>
                     Cancel
                   </LinkButton>
                 ) : undefined
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
index 2d34376cd..f05a00c4b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -77,7 +77,7 @@ export default function ChoosePlanPage() {
           </SheetHeader>
           <SheetBody>
             <PricingCalculator plans={plans} />
-            <div className="mt-8 rounded border border-border p-6">
+            <div className="mt-8 rounded border border-grid-bright p-6">
               <RunsVolumeDiscountTable brackets={plans.paid.runs?.pricing?.brackets ?? []} />
             </div>
           </SheetBody>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx
index 315e48373..c88176012 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx
@@ -71,7 +71,7 @@ export default function Subscribed() {
 
       <RunsVolumeDiscountTable
         hideHeader
-        className="mb-4 border-b border-border pb-2 pl-4"
+        className="mb-4 border-b border-grid-bright pb-2 pl-4"
         brackets={plans?.paid.runs?.pricing?.brackets ?? []}
       />
       <FormButtons
@@ -87,7 +87,7 @@ export default function Subscribed() {
 
 function PlanItem({ item, value }: { item: string; value: string }) {
   return (
-    <li className="flex items-center justify-between border-b border-border py-2">
+    <li className="flex items-center justify-between border-b border-grid-bright py-2">
       <Paragraph>{item}</Paragraph>
       <Paragraph variant="base/bright" className="font-medium">
         {value}
diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index c853526ab..91ea92e7c 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -194,18 +194,13 @@ export default function NewOrganizationPage() {
 
           <FormButtons
             confirmButton={
-              <Button
-                type="submit"
-                variant={"primary/small"}
-                TrailingIcon="arrow-right"
-                disabled={isLoading}
-              >
+              <Button type="submit" variant={"primary/small"} disabled={isLoading}>
                 Create
               </Button>
             }
             cancelButton={
               hasOrganizations ? (
-                <LinkButton to={rootPath()} variant={"secondary/small"}>
+                <LinkButton to={rootPath()} variant={"tertiary/small"}>
                   Cancel
                 </LinkButton>
               ) : null
diff --git a/apps/webapp/app/routes/account._index/route.tsx b/apps/webapp/app/routes/account._index/route.tsx
index 1d026d455..8a5c97412 100644
--- a/apps/webapp/app/routes/account._index/route.tsx
+++ b/apps/webapp/app/routes/account._index/route.tsx
@@ -5,7 +5,6 @@ import { ActionFunction, json } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button } from "~/components/primitives/Buttons";
 import { Checkbox } from "~/components/primitives/Checkbox";
 import { Fieldset } from "~/components/primitives/Fieldset";
@@ -15,13 +14,12 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
-import { PageHeader, PageTitle, PageTitleRow } from "~/components/primitives/PageHeader";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { prisma } from "~/db.server";
 import { useUser } from "~/hooks/useUser";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { updateUser } from "~/models/user.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import { accountPath } from "~/utils/pathBuilder";
 
 function createSchema(
@@ -111,12 +109,6 @@ export const action: ActionFunction = async ({ request }) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    return <BreadcrumbLink to={match.pathname} title={"Profile"} />;
-  },
-};
-
 export default function Page() {
   const user = useUser();
   const lastSubmission = useActionData();
@@ -132,11 +124,9 @@ export default function Page() {
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="Your profile" />
-        </PageTitleRow>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Your profile" />
+      </NavBar>
 
       <PageBody>
         <Form method="post" {...form.props} className="max-w-md">
diff --git a/apps/webapp/app/routes/account.tokens/route.tsx b/apps/webapp/app/routes/account.tokens/route.tsx
index ae989d487..4220f1ce6 100644
--- a/apps/webapp/app/routes/account.tokens/route.tsx
+++ b/apps/webapp/app/routes/account.tokens/route.tsx
@@ -4,10 +4,9 @@ import { ShieldCheckIcon } from "@heroicons/react/20/solid";
 import { ShieldExclamationIcon } from "@heroicons/react/24/solid";
 import { Form, useActionData, useFetcher } from "@remix-run/react";
 import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
-import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
@@ -21,20 +20,13 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
-import {
-  PageButtons,
-  PageDescription,
-  PageHeader,
-  PageTitle,
-  PageTitleRow,
-} from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
   Table,
   TableBlankRow,
   TableBody,
   TableCell,
-  TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
@@ -48,7 +40,6 @@ import {
   revokePersonalAccessToken,
 } from "~/services/personalAccessToken.server";
 import { requireUserId } from "~/services/session.server";
-import { Handle } from "~/utils/handle";
 import { personalAccessTokensPath } from "~/utils/pathBuilder";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
@@ -128,34 +119,25 @@ export const action: ActionFunction = async ({ request }) => {
   }
 };
 
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    return <BreadcrumbLink to={match.pathname} title={"Personal Access Tokens"} />;
-  },
-};
-
 export default function Page() {
   const { personalAccessTokens } = useTypedLoaderData<typeof loader>();
 
   return (
     <PageContainer>
-      <PageHeader>
-        <PageTitleRow>
-          <PageTitle title="Personal Access Tokens" />
-          <PageButtons>
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="primary/small">Create new token</Button>
-              </DialogTrigger>
-              <DialogContent className="max-w-md">
-                <DialogHeader>Create a Personal Access Token</DialogHeader>
-                <CreatePersonalAccessToken />
-              </DialogContent>
-            </Dialog>
-          </PageButtons>
-        </PageTitleRow>
-        <PageDescription>Personal Access Tokens can be used with our CLI and API.</PageDescription>
-      </PageHeader>
+      <NavBar>
+        <PageTitle title="Personal Access Tokens" />
+        <PageAccessories>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="primary/small">Create new token</Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-md">
+              <DialogHeader>Create a Personal Access Token</DialogHeader>
+              <CreatePersonalAccessToken />
+            </DialogContent>
+          </Dialog>
+        </PageAccessories>
+      </NavBar>
 
       <PageBody>
         <div className="flex flex-col gap-3">
diff --git a/apps/webapp/app/routes/account/route.tsx b/apps/webapp/app/routes/account/route.tsx
index 337ba566d..e196a8a53 100644
--- a/apps/webapp/app/routes/account/route.tsx
+++ b/apps/webapp/app/routes/account/route.tsx
@@ -1,16 +1,7 @@
 import { Outlet } from "@remix-run/react";
-import { AppContainer } from "~/components/layout/AppLayout";
+import { AppContainer, MainBody } from "~/components/layout/AppLayout";
 import { AccountSideMenu } from "~/components/navigation/AccountSideMenu";
-import { Breadcrumb, BreadcrumbLink } from "~/components/navigation/Breadcrumb";
-import { PageNavigationIndicator } from "~/components/navigation/PageNavigationIndicator";
 import { useUser } from "~/hooks/useUser";
-import { Handle } from "~/utils/handle";
-
-export const handle: Handle = {
-  breadcrumb: (match) => {
-    return <BreadcrumbLink to={match.pathname} title={"Account"} />;
-  },
-};
 
 export default function Page() {
   const user = useUser();
@@ -19,16 +10,9 @@ export default function Page() {
     <AppContainer>
       <div className="grid grid-cols-[14rem_1fr] overflow-hidden">
         <AccountSideMenu user={user} />
-
-        <div className="grid grid-rows-[2.25rem_1fr] overflow-hidden">
-          <div className="flex w-full items-center justify-between border-b border-ui-border">
-            <Breadcrumb />
-            <div className="flex h-full items-center gap-4">
-              <PageNavigationIndicator className="mr-2" />
-            </div>
-          </div>
+        <MainBody>
           <Outlet />
-        </div>
+        </MainBody>
       </div>
     </AppContainer>
   );
diff --git a/apps/webapp/app/routes/admin._index.tsx b/apps/webapp/app/routes/admin._index.tsx
index b63efa2ef..41038c13f 100644
--- a/apps/webapp/app/routes/admin._index.tsx
+++ b/apps/webapp/app/routes/admin._index.tsx
@@ -31,8 +31,9 @@ export async function action({ request }: ActionFunctionArgs) {
   });
 }
 
-const headerClassName = "py-3 px-2 pr-3 text-xs font-semibold leading-tight text-bright text-left";
-const cellClassName = "whitespace-nowrap px-2 py-2 text-xs text-bright";
+const headerClassName =
+  "py-3 px-2 pr-3 text-xs font-semibold leading-tight text-text-bright text-left";
+const cellClassName = "whitespace-nowrap px-2 py-2 text-xs text-text-bright";
 
 export default function AdminDashboardRoute() {
   const user = useUser();
@@ -49,8 +50,8 @@ export default function AdminDashboardRoute() {
         Back to me
       </LinkButton>
 
-      <table className="w-full divide-y divide-border">
-        <thead className="sticky -top-4 bg-midnight-800 text-left">
+      <table className="divide-border w-full divide-y">
+        <thead className="bg-midnight-800 sticky -top-4 text-left">
           <tr>
             <th scope="col" className={headerClassName}>
               Email
@@ -72,10 +73,10 @@ export default function AdminDashboardRoute() {
             </th>
           </tr>
         </thead>
-        <tbody className="divide-y divide-border">
+        <tbody className="divide-border divide-y">
           {users.map((user) => {
             return (
-              <tr key={user.id} className="w-full px-4 py-2 text-left hover:bg-slate-900">
+              <tr key={user.id} className="w-full px-4 py-2 text-left hover:bg-charcoal-900">
                 <td className={cellClassName}>{user.email}</td>
                 <td className={cellClassName}>
                   <a
diff --git a/apps/webapp/app/routes/invites.tsx b/apps/webapp/app/routes/invites.tsx
index 53671bc1f..13cae9190 100644
--- a/apps/webapp/app/routes/invites.tsx
+++ b/apps/webapp/app/routes/invites.tsx
@@ -108,7 +108,7 @@ export default function Page() {
           {invites.map((invite) => (
             <Form key={invite.id} method="post" {...form.props}>
               <Fieldset>
-                <InputGroup className="flex items-center justify-between border-b border-slate-800 py-4">
+                <InputGroup className="flex items-center justify-between border-b border-charcoal-800 py-4">
                   <div className="flex flex-col gap-y-0.5 overflow-hidden">
                     <Header2 className="truncate">{invite.organization.title}</Header2>
                     <Paragraph variant="small" className="truncate">
diff --git a/apps/webapp/app/routes/login._index/route.tsx b/apps/webapp/app/routes/login._index/route.tsx
index 84297410f..ce27b705c 100644
--- a/apps/webapp/app/routes/login._index/route.tsx
+++ b/apps/webapp/app/routes/login._index/route.tsx
@@ -98,7 +98,9 @@ export default function LoginPage() {
               >
                 <NamedIcon
                   name={"envelope"}
-                  className={"mr-1.5 h-4 w-4 text-dimmed transition group-hover:text-bright"}
+                  className={
+                    "mr-1.5 h-4 w-4 text-text-dimmed transition group-hover:text-text-bright"
+                  }
                 />
                 Continue with Email
               </LinkButton>
diff --git a/apps/webapp/app/routes/login.magic/route.tsx b/apps/webapp/app/routes/login.magic/route.tsx
index c19b68465..f74ac7f3b 100644
--- a/apps/webapp/app/routes/login.magic/route.tsx
+++ b/apps/webapp/app/routes/login.magic/route.tsx
@@ -122,7 +122,7 @@ export default function LoginMagicLinkPage() {
                       value="reset"
                       variant="tertiary/small"
                       LeadingIcon="arrow-left"
-                      leadingIconClassName="text-dimmed group-hover:text-bright transition"
+                      leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition"
                       data-action="re-enter email"
                     >
                       Re-enter email
@@ -172,7 +172,7 @@ export default function LoginMagicLinkPage() {
                 >
                   <NamedIcon
                     name={isLoading ? "spinner-white" : "envelope"}
-                    className={"mr-1.5 h-4 w-4 text-white transition group-hover:text-bright"}
+                    className={"mr-1.5 h-4 w-4 text-white transition group-hover:text-text-bright"}
                   />
                   {isLoading ? "Sending…" : "Send a magic link"}
                 </Button>
@@ -194,7 +194,7 @@ export default function LoginMagicLinkPage() {
                 to="/login"
                 variant={"tertiary/small"}
                 LeadingIcon={"arrow-left"}
-                leadingIconClassName="text-dimmed group-hover:text-bright transition"
+                leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition"
                 data-action="all login options"
               >
                 All login options
diff --git a/apps/webapp/app/routes/resources.codeexample.tsx b/apps/webapp/app/routes/resources.codeexample.tsx
index 751140c6d..04fca07e0 100644
--- a/apps/webapp/app/routes/resources.codeexample.tsx
+++ b/apps/webapp/app/routes/resources.codeexample.tsx
@@ -38,7 +38,7 @@ export function CodeExample({ example }: { example: ApiExample }) {
 
   if (customerFetcher.state === "loading")
     return (
-      <div className="flex h-96 w-full items-center justify-center gap-2 rounded-md border border-slate-800 font-mono">
+      <div className="flex h-96 w-full items-center justify-center gap-2 rounded-md border border-charcoal-800 font-mono">
         <Spinner />
         <Paragraph>Loading example code</Paragraph>
       </div>
diff --git a/apps/webapp/app/routes/storybook.badges/route.tsx b/apps/webapp/app/routes/storybook.badges/route.tsx
new file mode 100644
index 000000000..cd8d0a779
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.badges/route.tsx
@@ -0,0 +1,15 @@
+import { Badge } from "~/components/primitives/Badge";
+
+export default function Story() {
+  return (
+    <div className="flex flex-col items-start gap-y-8 p-8">
+      <Badge>Default</Badge>
+      <div className="bg-charcoal-1000 p-4">
+        <Badge variant="small">Small</Badge>
+      </div>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="v3">v3</Badge>
+      <Badge variant="outline-rounded">Outline rounded</Badge>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/stories/Button.stories.tsx b/apps/webapp/app/routes/storybook.buttons/route.tsx
similarity index 73%
rename from apps/webapp/app/components/stories/Button.stories.tsx
rename to apps/webapp/app/routes/storybook.buttons/route.tsx
index 66fa36c69..90a5175c8 100644
--- a/apps/webapp/app/components/stories/Button.stories.tsx
+++ b/apps/webapp/app/routes/storybook.buttons/route.tsx
@@ -1,48 +1,30 @@
-import { ArrowLeftIcon, ArrowRightIcon, ExclamationTriangleIcon } from "@heroicons/react/20/solid";
-import { ArrowUturnLeftIcon, LightBulbIcon, NoSymbolIcon } from "@heroicons/react/24/solid";
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { Button } from "../primitives/Buttons";
-import { Header1, Header3 } from "../primitives/Headers";
-import { NamedIcon } from "../primitives/NamedIcon";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUturnLeftIcon,
+  ExclamationTriangleIcon,
+  LightBulbIcon,
+  NoSymbolIcon,
+} from "@heroicons/react/20/solid";
+import { EnvelopeIcon } from "@heroicons/react/24/solid";
+import { AirtableIcon, GitHubDarkIcon, SlackIcon } from "@trigger.dev/companyicons";
+import { Button } from "~/components/primitives/Buttons";
+import { Header1, Header3 } from "~/components/primitives/Headers";
+import { NamedIcon } from "~/components/primitives/NamedIcon";
 
-const meta: Meta<typeof ButtonList> = {
-  title: "Primitives/Buttons",
-  component: ButtonList,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ButtonList>;
-
-export const Basic: Story = {
-  args: {
-    primary: "Primary button",
-  },
-
-  render: (args) => <ButtonList {...args} />,
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/jBqUJJ2d4lU6aSeKIIOBMY/Trigger.dev?type=design&node-id=1759%3A2827&t=e3AwZEA5bMHRVjFb-1",
-  },
-};
-
-function ButtonList({ primary }: { primary: string }) {
+export default function Story() {
   const isSelected = true;
   const disabled = true;
   return (
-    <div>
+    <div className="bg-background-dimmed p-12">
       <Header1 className="mb-2">Small buttons</Header1>
-      <div className="grid grid-cols-4 gap-8 border-b border-slate-700 pb-8">
+      <div className="grid grid-cols-4 gap-8 border-b border-charcoal-700 pb-8">
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Basic</Header3>
           <Button variant="primary/small">Primary button</Button>
           <Button variant="secondary/small">Secondary button</Button>
           <Button variant="tertiary/small">Tertiary button</Button>
+          <Button variant="minimal/small">Minimal button</Button>
           <Button variant="danger/small">Danger button</Button>
         </div>
         <div className="flex flex-col items-start gap-2">
@@ -56,6 +38,9 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/small" LeadingIcon={ArrowLeftIcon}>
             Tertiary button
           </Button>
+          <Button variant="minimal/small" LeadingIcon={ArrowLeftIcon}>
+            Minimal button
+          </Button>
           <Button variant="danger/small" LeadingIcon={ArrowLeftIcon}>
             Danger button
           </Button>
@@ -71,6 +56,9 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/small" TrailingIcon={ArrowRightIcon}>
             Tertiary button
           </Button>
+          <Button variant="minimal/small" TrailingIcon={ArrowRightIcon}>
+            Minimal button
+          </Button>
           <Button variant="danger/small" TrailingIcon={ArrowRightIcon}>
             Danger button
           </Button>
@@ -86,37 +74,43 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/small" shortcut={{ key: "i" }}>
             Tertiary button
           </Button>
+          <Button variant="minimal/small" shortcut={{ key: "i" }}>
+            Minimal button
+          </Button>
           <Button variant="danger/small" shortcut={{ key: "s", modifiers: ["meta"] }}>
             Danger button
           </Button>
         </div>
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Named icon</Header3>
-          <Button LeadingIcon="airtable" variant="primary/small">
+          <Button LeadingIcon={AirtableIcon} variant="primary/small">
             Connect to Airtable
           </Button>
-          <Button LeadingIcon="github" variant="primary/small">
+          <Button LeadingIcon={GitHubDarkIcon} variant="primary/small">
             Connect to GitHub
           </Button>
-          <Button TrailingIcon="slack" variant="secondary/small">
+          <Button TrailingIcon={SlackIcon} variant="secondary/small">
             Connect to Slack
           </Button>
           <Button TrailingIcon="warning" variant="secondary/small">
-            Connect to Slack
+            Trailing icon
           </Button>
         </div>
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Loading</Header3>
-          <Button variant="primary/small" LeadingIcon="spinner-white" disabled>
+          <Button variant="primary/small" LeadingIcon="spinner">
             Loading Primary…
           </Button>
-          <Button variant="secondary/small" LeadingIcon="spinner" disabled>
+          <Button variant="secondary/small" LeadingIcon="spinner">
             Loading Secondary…
           </Button>
-          <Button variant="tertiary/small" LeadingIcon="spinner" disabled>
+          <Button variant="tertiary/small" LeadingIcon="spinner">
             Loading Tertiary…
           </Button>
-          <Button variant="danger/small" LeadingIcon="spinner-white" disabled>
+          <Button variant="minimal/small" LeadingIcon="spinner">
+            Loading Minimal…
+          </Button>
+          <Button variant="danger/small" LeadingIcon="spinner-white">
             Loading Danger…
           </Button>
         </div>
@@ -131,6 +125,9 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/small" disabled>
             Tertiary button
           </Button>
+          <Button variant="minimal/small" disabled>
+            Minimal button
+          </Button>
           <Button variant="danger/small" disabled>
             Danger button
           </Button>
@@ -140,11 +137,12 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="primary/small" LeadingIcon={ArrowRightIcon} />
           <Button variant="secondary/small" LeadingIcon={LightBulbIcon} />
           <Button variant="tertiary/small" LeadingIcon="warning" />
+          <Button variant="minimal/small" LeadingIcon="warning" />
           <Button variant="danger/small" LeadingIcon={ExclamationTriangleIcon} />
         </div>
       </div>
       <Header1 className="mb-2 mt-8">Medium buttons</Header1>
-      <div className="grid grid-cols-4 gap-8 border-b border-slate-700 pb-8">
+      <div className="grid grid-cols-4 gap-8 border-b border-charcoal-700 pb-8">
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Basic</Header3>
           <Button variant="primary/medium">Primary button</Button>
@@ -163,6 +161,9 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/medium" LeadingIcon={ArrowLeftIcon}>
             Tertiary button
           </Button>
+          <Button variant="minimal/medium" LeadingIcon={ArrowLeftIcon}>
+            Minimal button
+          </Button>
           <Button variant="danger/medium" LeadingIcon={ArrowLeftIcon}>
             Danger button
           </Button>
@@ -178,6 +179,9 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/medium" TrailingIcon={ArrowRightIcon}>
             Tertiary button
           </Button>
+          <Button variant="minimal/medium" TrailingIcon={ArrowRightIcon}>
+            Minimal button
+          </Button>
           <Button variant="danger/medium" TrailingIcon={ArrowRightIcon}>
             Danger button
           </Button>
@@ -193,19 +197,22 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/medium" shortcut={{ key: "s", modifiers: ["meta"] }}>
             Tertiary button
           </Button>
+          <Button variant="minimal/medium" shortcut={{ key: "s", modifiers: ["meta"] }}>
+            Minimal button
+          </Button>
           <Button variant="danger/medium" shortcut={{ key: "s", modifiers: ["meta"] }}>
             Danger button
           </Button>
         </div>
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Named icon</Header3>
-          <Button LeadingIcon="airtable" variant="primary/medium">
+          <Button LeadingIcon={AirtableIcon} variant="primary/medium">
             Connect to Airtable
           </Button>
-          <Button LeadingIcon="github" variant="primary/medium">
+          <Button LeadingIcon={GitHubDarkIcon} variant="primary/medium">
             Connect to GitHub
           </Button>
-          <Button TrailingIcon="slack" variant="secondary/medium">
+          <Button TrailingIcon={SlackIcon} variant="secondary/medium">
             Connect to Slack
           </Button>
           <Button TrailingIcon="warning" variant="secondary/medium">
@@ -214,16 +221,19 @@ function ButtonList({ primary }: { primary: string }) {
         </div>
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Loading</Header3>
-          <Button variant="primary/medium" LeadingIcon="spinner-white" disabled>
+          <Button variant="primary/medium" LeadingIcon="spinner">
             Loading Primary…
           </Button>
-          <Button variant="secondary/medium" LeadingIcon="spinner" disabled>
+          <Button variant="secondary/medium" LeadingIcon="spinner">
             Loading Secondary…
           </Button>
-          <Button variant="tertiary/medium" LeadingIcon="spinner" disabled>
+          <Button variant="tertiary/medium" LeadingIcon="spinner">
             Loading Tertiary…
           </Button>
-          <Button variant="danger/medium" LeadingIcon="spinner-white" disabled>
+          <Button variant="minimal/medium" LeadingIcon="spinner">
+            Loading Minimal…
+          </Button>
+          <Button variant="danger/medium" LeadingIcon="spinner-white">
             Loading Danger…
           </Button>
         </div>
@@ -238,6 +248,9 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="tertiary/medium" disabled>
             Tertiary button
           </Button>
+          <Button variant="tertiary/medium" disabled>
+            Minimal button
+          </Button>
           <Button variant="danger/medium" disabled>
             Danger button
           </Button>
@@ -247,62 +260,65 @@ function ButtonList({ primary }: { primary: string }) {
           <Button variant="primary/medium" LeadingIcon={ArrowRightIcon} />
           <Button variant="secondary/medium" LeadingIcon={LightBulbIcon} />
           <Button variant="tertiary/medium" LeadingIcon="warning" />
+          <Button variant="minimal/medium" LeadingIcon="warning" />
           <Button variant="danger/medium" LeadingIcon={ExclamationTriangleIcon} />
         </div>
       </div>
       <Header1 className="mb-2 mt-8">Large buttons</Header1>
-      <div className="grid grid-cols-1 gap-8 border-b border-slate-700 pb-8">
+      <div className="grid grid-cols-1 gap-8 pb-8">
         <div className="flex flex-col gap-2">
           <div className="flex flex-col items-start gap-2">
             <Button variant="primary/large" fullWidth>
-              <NamedIcon name={"github"} className={"mr-1.5 h-4 w-4"} />
-              Continue with GitHub
+              <GitHubDarkIcon className={"mr-1.5 h-4 w-4"} />
+              <span className="text-charcoal-900">Continue with GitHub</span>
             </Button>
             <Button variant="secondary/large" fullWidth>
-              <NamedIcon
-                name={"envelope"}
-                className={"mr-1.5 h-4 w-4 transition group-hover:text-bright"}
+              <EnvelopeIcon
+                className={"mr-1.5 h-5 w-5 text-primary transition group-hover:text-apple-200"}
               />
-              Continue with Email
+              <span className="text-primary group-hover:text-apple-200">Continue with Email</span>
             </Button>
             <Button variant="danger/large" fullWidth>
               <NamedIcon
                 name={"trash-can"}
-                className={"mr-1.5 h-4 w-4 text-bright transition group-hover:text-bright"}
+                className={
+                  "mr-1.5 h-4 w-4 text-text-bright transition group-hover:text-text-bright"
+                }
               />
-              This is a delete button
+              <span className="text-text-bright">This is a delete button</span>
             </Button>
           </div>
         </div>
       </div>
       <Header1 className="mb-2 mt-8">Extra Large buttons</Header1>
-      <div className="grid grid-cols-1 gap-8 border-b border-slate-700 pb-8">
+      <div className="grid grid-cols-1 gap-8 pb-8">
         <div className="flex flex-col gap-2">
           <div className="flex flex-col items-start gap-2">
             <Button variant="primary/extra-large" fullWidth>
-              <NamedIcon name={"github"} className={"mr-1.5 h-5 w-5"} />
-              Continue with GitHub
+              <GitHubDarkIcon className={"mr-1.5 h-5 w-5"} />
+              <span className="text-charcoal-900">Continue with GitHub</span>
             </Button>
             <Button variant="secondary/extra-large" fullWidth>
-              <NamedIcon
-                name={"envelope"}
-                className={"mr-1.5 h-5 w-5 transition group-hover:text-bright"}
+              <EnvelopeIcon
+                className={"mr-1.5 h-5 w-5 text-primary transition group-hover:text-apple-200"}
               />
-              Continue with Email
+              <span className="text-primary group-hover:text-apple-200">Continue with Email</span>
             </Button>
             <Button variant="danger/extra-large" fullWidth>
               <NamedIcon
                 name={"trash-can"}
-                className={"mr-1.5 h-5 w-5 text-bright transition group-hover:text-bright"}
+                className={
+                  "mr-1.5 h-5 w-5 text-text-bright transition group-hover:text-text-bright"
+                }
               />
-              This is a delete button
+              <span className="text-text-bright">This is a delete button</span>
             </Button>
           </div>
         </div>
       </div>
       <Header1 className="mb-2 mt-8">Menu items</Header1>
       <div className="grid grid-cols-1">
-        <div className="flex flex-col items-start gap-1 rounded border border-slate-800 bg-slate-850 p-1">
+        <div className="flex flex-col items-start gap-1 rounded border border-charcoal-800 bg-charcoal-850 p-1">
           <Button variant="menu-item" fullWidth textAlignLeft LeadingIcon="folder">
             Acme Inc.
           </Button>
@@ -315,7 +331,7 @@ function ButtonList({ primary }: { primary: string }) {
             textAlignLeft
             LeadingIcon="globe"
             TrailingIcon={isSelected ? "check" : undefined}
-            className={isSelected ? "bg-slate-750 group-hover:bg-slate-750" : undefined}
+            className={isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-750" : undefined}
           >
             Item enabled
           </Button>
@@ -330,7 +346,7 @@ function ButtonList({ primary }: { primary: string }) {
             fullWidth
             textAlignLeft
             LeadingIcon={ArrowUturnLeftIcon}
-            leadingIconClassName="text-dimmed"
+            leadingIconClassName="text-text-dimmed"
           >
             Latest run payload
           </Button>
@@ -339,7 +355,7 @@ function ButtonList({ primary }: { primary: string }) {
             fullWidth
             textAlignLeft
             LeadingIcon={NoSymbolIcon}
-            leadingIconClassName="text-dimmed"
+            leadingIconClassName="text-text-dimmed"
             disabled
             className={disabled ? "group-hover:bg-transparent" : undefined}
           >
diff --git a/apps/webapp/app/routes/storybook.callout/route.tsx b/apps/webapp/app/routes/storybook.callout/route.tsx
new file mode 100644
index 000000000..d5e3464da
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.callout/route.tsx
@@ -0,0 +1,62 @@
+import { EnvelopeIcon } from "@heroicons/react/20/solid";
+import { Callout } from "~/components/primitives/Callout";
+import { Header2 } from "~/components/primitives/Headers";
+
+export default function Story() {
+  return (
+    <div className="grid grid-cols-2">
+      <div className="flex flex-col items-start gap-y-4 p-4">
+        <Header2>Callouts</Header2>
+        <Callout variant="info">This is an info callout</Callout>
+        <Callout variant="warning">This is a warning callout</Callout>
+        <Callout variant="error">This is an error callout</Callout>
+        <Callout variant="idea">This is an idea callout</Callout>
+        <Callout variant="success">This is a success callout</Callout>
+        <Callout variant="docs">This is a docs callout</Callout>
+        <Callout variant="success" icon={<EnvelopeIcon className="h-5 w-5 text-green-400" />}>
+          This callout has a custom icon
+        </Callout>
+        <Callout variant="pending">This is a pending callout</Callout>
+        <Callout variant="pricing">This is a pricing callout</Callout>
+        <Callout variant="error">
+          This is an error message which runs over multiple lines. This is an error message which
+          runs over multiple lines. This is an error message which runs over multiple lines.
+        </Callout>
+      </div>
+      <div className="flex flex-col items-start gap-y-4 p-4">
+        <Header2>Callouts with a link</Header2>
+        <Callout to="#" variant="info">
+          This is an info callout
+        </Callout>
+        <Callout to="#" variant="warning">
+          This is a warning callout
+        </Callout>
+        <Callout to="#" variant="error">
+          This is an error callout
+        </Callout>
+        <Callout to="#" variant="idea">
+          This is an idea callout
+        </Callout>
+        <Callout to="#" variant="docs">
+          This is a docs callout
+        </Callout>
+        <Callout to="#" variant="idea" icon={<EnvelopeIcon className="h-5 w-5 text-green-400" />}>
+          This callout has a custom icon
+        </Callout>
+        <Callout to="#" variant="pending">
+          This is a pending callout
+        </Callout>
+        <Callout to="#" variant="pricing">
+          This is a pricing callout
+        </Callout>
+        <Callout variant="info" to="https://google.com">
+          This uses an http link
+        </Callout>
+        <Callout to="#" variant="error">
+          This is an error message which runs over multiple lines. This is an error message which
+          runs over multiple lines. This is an error message which runs over multiple lines.
+        </Callout>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/stories/Checkboxes.stories.tsx b/apps/webapp/app/routes/storybook.checkboxes/route.tsx
similarity index 81%
rename from apps/webapp/app/components/stories/Checkboxes.stories.tsx
rename to apps/webapp/app/routes/storybook.checkboxes/route.tsx
index d974e7c36..56fabad96 100644
--- a/apps/webapp/app/components/stories/Checkboxes.stories.tsx
+++ b/apps/webapp/app/routes/storybook.checkboxes/route.tsx
@@ -1,30 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { Checkbox } from "../primitives/Checkbox";
 import { useState } from "react";
-import { Button } from "../primitives/Buttons";
+import { Button } from "~/components/primitives/Buttons";
+import { Checkbox } from "~/components/primitives/Checkbox";
 
-const meta: Meta = {
-  title: "Primitives/Checkboxes",
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BasicCheckBox>;
-
-export const Basic: Story = {
-  render: () => <BasicCheckBox />,
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/jBqUJJ2d4lU6aSeKIIOBMY/Trigger.dev?type=design&node-id=2577%3A87576&t=ambgtfvgnwXTHmzI-1",
-  },
-};
-
-function BasicCheckBox() {
+export default function Story() {
   const [isDisabled, setIsDisabled] = useState(false);
 
   return (
diff --git a/apps/webapp/app/components/stories/ClipboardField.stories.tsx b/apps/webapp/app/routes/storybook.clipboard-field/route.tsx
similarity index 76%
rename from apps/webapp/app/components/stories/ClipboardField.stories.tsx
rename to apps/webapp/app/routes/storybook.clipboard-field/route.tsx
index bde21f635..e9e666959 100644
--- a/apps/webapp/app/components/stories/ClipboardField.stories.tsx
+++ b/apps/webapp/app/routes/storybook.clipboard-field/route.tsx
@@ -1,25 +1,26 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { ClipboardField } from "../primitives/ClipboardField";
-import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { ClipboardField } from "~/components/primitives/ClipboardField";
+import { Header2 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
 
-const meta: Meta = {
-  title: "Primitives/ClipboardField",
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ClipboardFieldExample>;
-
-export const Basic: Story = {
-  render: () => <ClipboardFieldExample />,
-};
-
-function ClipboardFieldExample() {
+export default function Story() {
   return (
     <div className="flex gap-8">
+      <div className="flex flex-col items-start gap-y-[2.58rem] whitespace-nowrap p-8">
+        <Header2>Clipboards</Header2>
+        <Paragraph variant="small">primary/small</Paragraph>
+        <Paragraph variant="small">secondary/small</Paragraph>
+        <Paragraph variant="small">tertiary/small</Paragraph>
+        <Paragraph variant="small">tertiary/small + LeadingIcon</Paragraph>
+        <Paragraph variant="small">tertiary/small + LeadingIcon</Paragraph>
+        <Paragraph variant="small">primary/medium</Paragraph>
+        <Paragraph variant="small">secondary/medium</Paragraph>
+        <Paragraph variant="small">tertiary/medium</Paragraph>
+        <Paragraph variant="small">tertiary/medium + LeadingIcon</Paragraph>
+        <Paragraph variant="small">tertiary/medium + LeadingIcon</Paragraph>
+      </div>
       <div className="flex flex-col items-start gap-y-8 p-8">
+        <Header2>Default</Header2>
         <ClipboardField value="copy paste me" variant="primary/small" />
         <ClipboardField value="copy paste me" variant="secondary/small" />
         <ClipboardField value="copy paste me" variant="tertiary/small" />
@@ -40,6 +41,7 @@ function ClipboardFieldExample() {
         <ClipboardField value="with leadingIcon" variant="tertiary/medium" icon="search" />
       </div>
       <div className="flex flex-col items-start gap-y-8 p-8">
+        <Header2>Secure value</Header2>
         <ClipboardField value="copy paste me" variant="primary/small" secure={true} />
         <ClipboardField value="copy paste me" variant="secondary/small" secure={true} />
         <ClipboardField value="copy paste me" variant="tertiary/small" secure={true} />
@@ -72,6 +74,7 @@ function ClipboardFieldExample() {
         />
       </div>
       <div className="flex flex-col items-start gap-y-8 p-8">
+        <Header2>Custom secure value</Header2>
         <ClipboardField value="npx abcdefghi" variant="primary/small" secure="npx ••••••••" />
         <ClipboardField value="npx abcdefghi" variant="secondary/small" secure="npx ••••••••" />
         <ClipboardField value="npx abcdefghi" variant="tertiary/small" secure="npx ••••••••" />
diff --git a/apps/webapp/app/routes/storybook.code-block/route.tsx b/apps/webapp/app/routes/storybook.code-block/route.tsx
new file mode 100644
index 000000000..0cbf81bfc
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.code-block/route.tsx
@@ -0,0 +1,39 @@
+import { CodeBlock } from "~/components/code/CodeBlock";
+
+export default function Story() {
+  return (
+    <div className="flex flex-col items-start gap-y-8 p-8">
+      <CodeBlock
+        code={`{ id: "my-first-job" }`}
+        highlightedRanges={[
+          [6, 8],
+          [12, 14],
+        ]}
+      />
+      <CodeBlock
+        code={`export const client = new TriggerClient("smoke-test", {
+          apiUrl: "http://localhost:3000",
+          endpoint: "http://localhost:3007/__trigger/entry",
+          logLevel: "debug",
+          longLine: "This is a long line that will scroll off the edge of the screen and cause a horizontal scrollbar",
+          onLog: (log) => {
+            console.log(log);
+          },
+          onLogError: (log) => {
+            console.error(log);
+          },
+          onLogWarning: (log) => {
+            console.warn(log);
+          },
+          onLogInfo: (log) => {
+            console.info(log);
+          },
+        });`}
+        highlightedRanges={[
+          [6, 8],
+          [12, 14],
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/stories/DetailCell.stories.tsx b/apps/webapp/app/routes/storybook.detail-cell/route.tsx
similarity index 50%
rename from apps/webapp/app/components/stories/DetailCell.stories.tsx
rename to apps/webapp/app/routes/storybook.detail-cell/route.tsx
index 7f70e01a1..b6a09c60f 100644
--- a/apps/webapp/app/components/stories/DetailCell.stories.tsx
+++ b/apps/webapp/app/routes/storybook.detail-cell/route.tsx
@@ -1,30 +1,17 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { DetailCell } from "../primitives/DetailCell";
-import { ClockIcon, CodeBracketIcon } from "@heroicons/react/24/outline";
-import { DateTime, DateTimeAccurate } from "../primitives/DateTime";
+import { ClockIcon, CodeBracketIcon } from "@heroicons/react/20/solid";
+import { DateTime } from "~/components/primitives/DateTime";
+import { DetailCell } from "~/components/primitives/DetailCell";
 
-const meta: Meta = {
-  title: "Primitives/DetailCells",
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Examples>;
-
-export const Basic: Story = {
-  render: () => <Examples />,
-};
-
-function Examples() {
+export default function Story() {
   return (
     <div className="flex max-w-xl flex-col items-start gap-y-8 p-8">
       <DetailCell
         leadingIcon="integration"
-        leadingIconClassName="text-dimmed"
+        leadingIconClassName="text-text-dimmed"
         label="Learn how to create your own API Integrations"
         variant="base"
         trailingIcon="external-link"
-        trailingIconClassName="text-slate-700 group-hover:text-bright"
+        trailingIconClassName="text-charcoal-700 group-hover:text-text-bright"
       />
       <DetailCell
         leadingIcon={CodeBracketIcon}
@@ -35,11 +22,11 @@ function Examples() {
       />
       <DetailCell
         leadingIcon={ClockIcon}
-        leadingIconClassName="text-slate-400"
+        leadingIconClassName="text-charcoal-400"
         label={<DateTime date={new Date()} />}
         description="Run #42 complete"
         trailingIcon="plus"
-        trailingIconClassName="text-slate-500 group-hover:text-bright"
+        trailingIconClassName="text-charcoal-500 group-hover:text-text-bright"
       />
     </div>
   );
diff --git a/apps/webapp/app/routes/storybook.dialog/route.tsx b/apps/webapp/app/routes/storybook.dialog/route.tsx
new file mode 100644
index 000000000..79d8226f9
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.dialog/route.tsx
@@ -0,0 +1,27 @@
+import {
+  DialogHeader,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/primitives/Dialog";
+
+export default function Story() {
+  return (
+    <div className="grid h-full place-items-center p-20">
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. This will permanently delete your account and remove
+              your data from our servers.
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.environment-label/route.tsx b/apps/webapp/app/routes/storybook.environment-label/route.tsx
new file mode 100644
index 000000000..656425291
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.environment-label/route.tsx
@@ -0,0 +1,23 @@
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { Header2 } from "~/components/primitives/Headers";
+
+export default function Story() {
+  return (
+    <div className="space-y-8 divide-y p-8">
+      <div className="flex flex-col items-start gap-y-8">
+        <Header2>Small (default)</Header2>
+        <EnvironmentLabel environment={{ type: "PRODUCTION" }} />
+        <EnvironmentLabel environment={{ type: "STAGING" }} />
+        <EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />
+        <EnvironmentLabel environment={{ type: "PREVIEW" }} />
+      </div>
+      <div className="flex flex-col items-start gap-y-8 pt-8">
+        <Header2>Large</Header2>
+        <EnvironmentLabel environment={{ type: "PRODUCTION" }} size="large" />
+        <EnvironmentLabel environment={{ type: "STAGING" }} size="large" />
+        <EnvironmentLabel environment={{ type: "DEVELOPMENT" }} size="large" />
+        <EnvironmentLabel environment={{ type: "PREVIEW" }} size="large" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/stories/FreePlanUsage.stories.tsx b/apps/webapp/app/routes/storybook.free-plan-usage/route.tsx
similarity index 60%
rename from apps/webapp/app/components/stories/FreePlanUsage.stories.tsx
rename to apps/webapp/app/routes/storybook.free-plan-usage/route.tsx
index 00140dc98..30eb4d65a 100644
--- a/apps/webapp/app/components/stories/FreePlanUsage.stories.tsx
+++ b/apps/webapp/app/routes/storybook.free-plan-usage/route.tsx
@@ -1,16 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { FreePlanUsage } from "../billing/FreePlanUsage";
-import { organizationBillingPath } from "~/utils/pathBuilder";
+import { FreePlanUsage } from "~/components/billing/FreePlanUsage";
 import { MatchedOrganization } from "~/hooks/useOrganizations";
-
-const meta: Meta<typeof FreePlanUsageBar> = {
-  title: "Billing/FreePlanUsage",
-  component: FreePlanUsageBar,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof FreePlanUsageBar>;
+import { organizationBillingPath } from "~/utils/pathBuilder";
 
 const mockOrganization: MatchedOrganization = {
   id: "mockID",
@@ -24,18 +14,11 @@ const mockOrganization: MatchedOrganization = {
   runsEnabled: true,
 };
 
-export const ProgressBar: Story = {
-  args: {
-    organization: mockOrganization,
-  },
-  render: (args) => <FreePlanUsageBar {...args} />,
-};
-
 type FreePlanUsageBarProps = {
   organization: MatchedOrganization;
 };
 
-function FreePlanUsageBar({ organization }: FreePlanUsageBarProps) {
+export default function Story({ organization = mockOrganization }: FreePlanUsageBarProps) {
   return (
     <div className="flex h-screen flex-col items-center justify-center p-12">
       <div className="w-fit">
diff --git a/apps/webapp/app/routes/storybook.inline-code/route.tsx b/apps/webapp/app/routes/storybook.inline-code/route.tsx
new file mode 100644
index 000000000..c444da4c9
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.inline-code/route.tsx
@@ -0,0 +1,12 @@
+import { InlineCode } from "~/components/code/InlineCode";
+import { Paragraph } from "~/components/primitives/Paragraph";
+
+export default function Story() {
+  return (
+    <div className="grid h-full place-content-center">
+      <Paragraph>
+        You should use <InlineCode>id: my-first-job</InlineCode> when you want to achieve this.
+      </Paragraph>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.input-fields/route.tsx b/apps/webapp/app/routes/storybook.input-fields/route.tsx
new file mode 100644
index 000000000..256570d59
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.input-fields/route.tsx
@@ -0,0 +1,108 @@
+import { Form } from "@remix-run/react";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { Button } from "~/components/primitives/Buttons";
+import { Fieldset } from "~/components/primitives/Fieldset";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { FormError } from "~/components/primitives/FormError";
+import { FormTitle } from "~/components/primitives/FormTitle";
+import { Hint } from "~/components/primitives/Hint";
+import { Input } from "~/components/primitives/Input";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Label } from "~/components/primitives/Label";
+
+export default function Story() {
+  return (
+    <div className="flex gap-16">
+      <InputFieldSet />
+      <InputFieldSet disabled />
+    </div>
+  );
+}
+
+function InputFieldSet({ disabled }: { disabled?: boolean }) {
+  return (
+    <div>
+      <div className="m-8 flex w-64 flex-col gap-4">
+        <Input disabled={disabled} variant="large" placeholder="Name" autoFocus type="text" />
+        <Input disabled={disabled} variant="medium" placeholder="Name" type="text" />
+        <Input disabled={disabled} variant="small" placeholder="Name" type="text" />
+        <Input disabled={disabled} variant="tertiary" placeholder="Name" type="text" />
+      </div>
+      <div className="m-8 flex w-64 flex-col gap-4">
+        <Input
+          disabled={disabled}
+          variant="large"
+          placeholder="Search"
+          icon="search"
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="medium"
+          placeholder="Search"
+          icon="search"
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="small"
+          placeholder="Search"
+          icon="search"
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="tertiary"
+          placeholder="Search"
+          icon="search"
+          shortcut="⌘K"
+        />
+      </div>
+      <div className="m-8 flex w-64 flex-col gap-4">
+        <Input
+          disabled={disabled}
+          variant="large"
+          placeholder="Search"
+          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="medium"
+          placeholder="Search"
+          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="small"
+          placeholder="Search"
+          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="tertiary"
+          placeholder="Search"
+          icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="tertiary"
+          placeholder="Search"
+          icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
+          shortcut="⌘K"
+        />
+        <Input
+          disabled={disabled}
+          variant="tertiary"
+          placeholder="Search"
+          icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
+          shortcut="⌘K"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.login-form/route.tsx b/apps/webapp/app/routes/storybook.login-form/route.tsx
new file mode 100644
index 000000000..a5a81afcc
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.login-form/route.tsx
@@ -0,0 +1,39 @@
+import { Form } from "@remix-run/react";
+import { LogoIcon } from "~/components/LogoIcon";
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { Button } from "~/components/primitives/Buttons";
+import { Fieldset } from "~/components/primitives/Fieldset";
+import { FormTitle } from "~/components/primitives/FormTitle";
+import { NamedIcon } from "~/components/primitives/NamedIcon";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { TextLink } from "~/components/primitives/TextLink";
+
+export default function Story() {
+  return (
+    <MainCenteredContainer>
+      <div className="flex flex-col items-center">
+        <LogoIcon className="mb-4 h-16 w-16" />
+        <FormTitle divide={false} title="Create your Trigger.dev account" />
+        <Form>
+          <Fieldset>
+            <Button variant="primary/large" fullWidth>
+              <NamedIcon name={"github"} className={"mr-1.5 h-4 w-4"} />
+              Continue with GitHub
+            </Button>
+            <Button variant="secondary/large" fullWidth>
+              <NamedIcon
+                name={"envelope"}
+                className={"mr-1.5 h-4 w-4 transition group-hover:text-text-bright"}
+              />
+              Continue with Email
+            </Button>
+            <Paragraph variant="small" className="mt-2 text-center">
+              By creating an account you agree to our <TextLink href="#">terms</TextLink> and{" "}
+              <TextLink href="#">privacy</TextLink> policies.
+            </Paragraph>
+          </Fieldset>
+        </Form>
+      </div>
+    </MainCenteredContainer>
+  );
+}
diff --git a/apps/webapp/app/components/stories/NamedIcon.stories.tsx b/apps/webapp/app/routes/storybook.named-icon/route.tsx
similarity index 54%
rename from apps/webapp/app/components/stories/NamedIcon.stories.tsx
rename to apps/webapp/app/routes/storybook.named-icon/route.tsx
index 658b6802e..a0684635d 100644
--- a/apps/webapp/app/components/stories/NamedIcon.stories.tsx
+++ b/apps/webapp/app/routes/storybook.named-icon/route.tsx
@@ -1,33 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { NamedIcon, iconNames } from "../primitives/NamedIcon";
+import { Header1 } from "~/components/primitives/Headers";
+import { NamedIcon, iconNames } from "~/components/primitives/NamedIcon";
 import { tablerIcons } from "~/utils/tablerIcons";
-import { Header1 } from "../primitives/Headers";
 
-const meta: Meta<typeof NamedIcons> = {
-  title: "Icons",
-  // @ts-ignore
-  component: NamedIcons,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof NamedIcons>;
-
-export const Basic: Story = {
-  args: {
-    // @ts-ignore
-    appear: true,
-    show: true,
-    title: "NamedIcons Title",
-  },
-  render: (args) => <NamedIcons />,
-};
-
-function NamedIcons() {
+export default function Story() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 p-12">
       <div>
         <Header1 spacing>Internal</Header1>
         <div className="grid grid-cols-8 gap-4">
@@ -38,7 +15,7 @@ function NamedIcons() {
                 <div>
                   <NamedIcon name={iconName} className={"h-6 w-6"} />
                 </div>
-                <span className="text-xs text-dimmed">{iconName}</span>
+                <span className="text-xs text-text-dimmed">{iconName}</span>
               </div>
             ))}
         </div>
@@ -51,7 +28,7 @@ function NamedIcons() {
               <div>
                 <NamedIcon name={iconName} className={"h-6 w-6 text-indigo-500"} />
               </div>
-              <span className="text-xs text-dimmed">{iconName}</span>
+              <span className="text-xs text-text-dimmed">{iconName}</span>
             </div>
           ))}
         </div>
diff --git a/apps/webapp/app/routes/storybook.page-header/route.tsx b/apps/webapp/app/routes/storybook.page-header/route.tsx
new file mode 100644
index 000000000..c83db919d
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.page-header/route.tsx
@@ -0,0 +1,29 @@
+import { LinkButton } from "~/components/primitives/Buttons";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+
+export default function Story() {
+  return (
+    <div className="flex flex-col gap-4 bg-charcoal-800 p-4">
+      <div className="bg-[#0B1018]">
+        <NavBar>
+          <PageTitle title="Organizations" />
+          <PageAccessories>
+            <LinkButton to={""} variant="primary/small" shortcut={{ key: "n" }}>
+              Create a new Organization
+            </LinkButton>
+          </PageAccessories>
+        </NavBar>
+      </div>
+      <div className="bg-[#0B1018]">
+        <NavBar>
+          <PageTitle title="Your Organizations" backButton={{ to: "#", text: "Orgs" }} />
+          <PageAccessories>
+            <LinkButton to={""} variant="primary/small" shortcut={{ key: "n" }}>
+              Create a new Organization
+            </LinkButton>
+          </PageAccessories>
+        </NavBar>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.popover/route.tsx b/apps/webapp/app/routes/storybook.popover/route.tsx
new file mode 100644
index 000000000..c7c6809ca
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.popover/route.tsx
@@ -0,0 +1,36 @@
+import { Fragment, useState } from "react";
+import {
+  Popover,
+  PopoverArrowTrigger,
+  PopoverContent,
+  PopoverMenuItem,
+  PopoverSectionHeader,
+} from "~/components/primitives/Popover";
+
+export default function Story() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="p-20">
+      <Popover onOpenChange={(open) => setIsOpen(open)}>
+        <PopoverArrowTrigger isOpen={isOpen}>My Blog</PopoverArrowTrigger>
+        <PopoverContent
+          className="min-w-[20rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          align="start"
+        >
+          <Fragment>
+            <PopoverSectionHeader title="Acme Ltd." />
+
+            <div className="flex flex-col gap-1 p-1">
+              <PopoverMenuItem to="#" title="My Blog" icon="folder" />
+              <PopoverMenuItem to="#" title="New Project" isSelected={false} icon="plus" />
+            </div>
+          </Fragment>
+          <div className="border-t border-charcoal-800 p-1">
+            <PopoverMenuItem to="#" title="New Organization" isSelected={false} icon="plus" />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/stories/PricingCallout.stories.tsx b/apps/webapp/app/routes/storybook.pricing-callout/route.tsx
similarity index 56%
rename from apps/webapp/app/components/stories/PricingCallout.stories.tsx
rename to apps/webapp/app/routes/storybook.pricing-callout/route.tsx
index ddcc038f3..1ef4afb0d 100644
--- a/apps/webapp/app/components/stories/PricingCallout.stories.tsx
+++ b/apps/webapp/app/routes/storybook.pricing-callout/route.tsx
@@ -1,22 +1,8 @@
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
-import type { Meta, StoryObj } from "@storybook/react";
-import { LinkButton } from "../primitives/Buttons";
-import { Callout } from "../primitives/Callout";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
 
-const meta: Meta<typeof PricingCallouts> = {
-  title: "Billing/PricingCallouts",
-  component: PricingCallouts,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PricingCallouts>;
-
-export const Callouts: Story = {
-  render: (args) => <PricingCallouts />,
-};
-
-function PricingCallouts() {
+export default function Story() {
   return (
     <div className="mx-4 flex h-screen flex-col items-center justify-center gap-4">
       <Callout
diff --git a/apps/webapp/app/components/stories/RadioGroup.stories.tsx b/apps/webapp/app/routes/storybook.radio-group/route.tsx
similarity index 74%
rename from apps/webapp/app/components/stories/RadioGroup.stories.tsx
rename to apps/webapp/app/routes/storybook.radio-group/route.tsx
index 8d81fcec6..509b71d84 100644
--- a/apps/webapp/app/components/stories/RadioGroup.stories.tsx
+++ b/apps/webapp/app/routes/storybook.radio-group/route.tsx
@@ -1,24 +1,9 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
 import { useState } from "react";
-import { Button } from "../primitives/Buttons";
-import { RadioGroup, RadioGroupItem } from "../primitives/RadioButton";
-import { NamedIcon } from "../primitives/NamedIcon";
+import { Button } from "~/components/primitives/Buttons";
+import { NamedIcon } from "~/components/primitives/NamedIcon";
+import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 
-const meta: Meta = {
-  title: "Primitives/RadioGroup",
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RadioGroupExample>;
-
-export const Basic: Story = {
-  render: () => <RadioGroupExample />,
-};
-
-function RadioGroupExample() {
+export default function Story() {
   const [isDisabled, setIsDisabled] = useState(false);
 
   return (
diff --git a/apps/webapp/app/routes/storybook.search-fields/route.tsx b/apps/webapp/app/routes/storybook.search-fields/route.tsx
new file mode 100644
index 000000000..b93dd2e85
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.search-fields/route.tsx
@@ -0,0 +1,56 @@
+import { Form } from "@remix-run/react";
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { Fieldset } from "~/components/primitives/Fieldset";
+import { Input } from "~/components/primitives/Input";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Label } from "~/components/primitives/Label";
+
+export default function Story() {
+  return (
+    <MainCenteredContainer>
+      <div>
+        <Form>
+          <Fieldset>
+            <InputGroup>
+              <Label>Medium search input</Label>
+              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
+            </InputGroup>
+            <InputGroup>
+              <Label>Small search input</Label>
+              <Input
+                placeholder="Search"
+                required={true}
+                variant="small"
+                icon="search"
+                shortcut="⌘K"
+                fullWidth={false}
+              />
+            </InputGroup>
+            <InputGroup>
+              <Label>Tertiary search input</Label>
+              <Input
+                placeholder="Search"
+                required={true}
+                variant="tertiary"
+                icon="search"
+                fullWidth={false}
+              />
+            </InputGroup>
+            <InputGroup>
+              <Label variant="small">This is a small label</Label>
+              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
+            </InputGroup>
+            <InputGroup>
+              <Label variant="medium">This is a medium label</Label>
+              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
+            </InputGroup>
+            <InputGroup>
+              <Label variant="large">This is a large label</Label>
+              <Input placeholder="Search" required={true} icon="search" shortcut="⌘K" />
+            </InputGroup>
+          </Fieldset>
+        </Form>
+      </div>
+    </MainCenteredContainer>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.segmented-control/route.tsx b/apps/webapp/app/routes/storybook.segmented-control/route.tsx
new file mode 100644
index 000000000..e331a752c
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.segmented-control/route.tsx
@@ -0,0 +1,15 @@
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import SegmentedControl from "~/components/primitives/SegmentedControl";
+
+const options = [
+  { label: "Label 1", value: "developer" },
+  { label: "Label 2", value: "Users" },
+];
+
+export default function Story() {
+  return (
+    <MainCenteredContainer>
+      <SegmentedControl name="name" options={options} />
+    </MainCenteredContainer>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.select/route.tsx b/apps/webapp/app/routes/storybook.select/route.tsx
new file mode 100644
index 000000000..f9fc2806a
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.select/route.tsx
@@ -0,0 +1,91 @@
+import { Header1, Header2 } from "~/components/primitives/Headers";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/primitives/Select";
+
+export default function Story() {
+  return (
+    <div className="p-20">
+      <div className="flex flex-col">
+        <Header1 className="mb-4">Variants</Header1>
+        <Header2 className="my-4">size=small width=content</Header2>
+        <SelectGroup>
+          <Select name="colorScheme" defaultValue="dark">
+            <SelectTrigger>
+              <SelectValue placeholder="Theme" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectLabel>Color Scheme</SelectLabel>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+              <SelectItem value="system">System</SelectItem>
+              <SelectLabel>Other themes</SelectLabel>
+              <SelectItem value="sunset">Sunset</SelectItem>
+              <SelectItem value="midnight">Midnight</SelectItem>
+              <SelectSeparator />
+              <SelectItem value="lunar">Lunar</SelectItem>
+            </SelectContent>
+          </Select>
+        </SelectGroup>
+        <Header2 className="my-4">size=small width=full</Header2>
+        <SelectGroup>
+          <Select name="colorScheme" defaultValue="dark">
+            <SelectTrigger width="full">
+              <SelectValue placeholder="Theme" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+              <SelectItem value="system">System</SelectItem>
+              <SelectItem value="sunset">Sunset</SelectItem>
+              <SelectItem value="midnight">Midnight</SelectItem>
+              <SelectSeparator />
+              <SelectItem value="lunar">Lunar</SelectItem>
+            </SelectContent>
+          </Select>
+        </SelectGroup>
+        <Header2 className="my-4">size=medium width=content</Header2>
+        <SelectGroup>
+          <Select name="colorScheme" defaultValue="dark">
+            <SelectTrigger size="medium">
+              <SelectValue placeholder="Theme" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+              <SelectItem value="system">System</SelectItem>
+              <SelectItem value="sunset">Sunset</SelectItem>
+              <SelectItem value="midnight">Midnight</SelectItem>
+              <SelectSeparator />
+              <SelectItem value="lunar">Lunar</SelectItem>
+            </SelectContent>
+          </Select>
+        </SelectGroup>
+        <Header2 className="my-4">size=medium width=full</Header2>
+        <SelectGroup>
+          <Select name="colorScheme" defaultValue="dark">
+            <SelectTrigger size="medium" width="full">
+              <SelectValue placeholder="Theme" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+              <SelectItem value="system">System</SelectItem>
+              <SelectItem value="sunset">Sunset</SelectItem>
+              <SelectItem value="midnight">Midnight</SelectItem>
+              <SelectSeparator />
+              <SelectItem value="lunar">Lunar</SelectItem>
+            </SelectContent>
+          </Select>
+        </SelectGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/stories/Shortcuts.stories.tsx b/apps/webapp/app/routes/storybook.shortcuts/route.tsx
similarity index 70%
rename from apps/webapp/app/components/stories/Shortcuts.stories.tsx
rename to apps/webapp/app/routes/storybook.shortcuts/route.tsx
index dc2f381a7..54b7ddad5 100644
--- a/apps/webapp/app/components/stories/Shortcuts.stories.tsx
+++ b/apps/webapp/app/routes/storybook.shortcuts/route.tsx
@@ -1,22 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Switch } from "../primitives/Switch";
-import { ShortcutKey } from "../primitives/ShortcutKey";
+import { Button } from "~/components/primitives/Buttons";
+import { Header1 } from "~/components/primitives/Headers";
+import { OperatingSystemContextProvider } from "~/components/primitives/OperatingSystemProvider";
+import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { ShortcutDefinition } from "~/hooks/useShortcutKeys";
-import { Button } from "../primitives/Buttons";
-import { OperatingSystemContextProvider } from "../primitives/OperatingSystemProvider";
-import { Header1 } from "../primitives/Headers";
-
-const meta: Meta = {
-  title: "Primitives/ShortcutKey",
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Collection>;
-
-export const ShortcutKeys: Story = {
-  render: () => <Collection />,
-};
 
 const shortcuts: ShortcutDefinition[] = [
   { key: "esc" },
@@ -28,16 +14,16 @@ const shortcuts: ShortcutDefinition[] = [
   { key: "enter", modifiers: ["mod"] },
 ];
 
-function Collection() {
+export default function Story() {
   return (
-    <div className="flex flex-col items-start gap-y-4">
-      <Set platform="mac" />
-      <Set platform="windows" />
+    <div className="flex flex-col items-start gap-y-4 p-12">
+      <Collection platform="mac" />
+      <Collection platform="windows" />
     </div>
   );
 }
 
-function Set({ platform }: { platform: "mac" | "windows" }) {
+function Collection({ platform }: { platform: "mac" | "windows" }) {
   return (
     <OperatingSystemContextProvider platform={platform}>
       <Header1>{platform}</Header1>
diff --git a/apps/webapp/app/routes/storybook.simple-form/route.tsx b/apps/webapp/app/routes/storybook.simple-form/route.tsx
new file mode 100644
index 000000000..bf2716421
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.simple-form/route.tsx
@@ -0,0 +1,55 @@
+import { Form } from "@remix-run/react";
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { Button } from "~/components/primitives/Buttons";
+import { Fieldset } from "~/components/primitives/Fieldset";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { FormError } from "~/components/primitives/FormError";
+import { FormTitle } from "~/components/primitives/FormTitle";
+import { Hint } from "~/components/primitives/Hint";
+import { Input } from "~/components/primitives/Input";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Label } from "~/components/primitives/Label";
+
+export default function Story() {
+  return (
+    <MainCenteredContainer>
+      <div>
+        <FormTitle
+          LeadingIcon="organization"
+          title="Create a new Organization"
+          description="Organizations are a great way to group your Projects."
+        />
+        <Form>
+          <Fieldset>
+            <InputGroup>
+              <Label>Organization name</Label>
+              <Input
+                placeholder="Your org name"
+                required={true}
+                defaultValue="Acme Inc."
+                icon="organization"
+              />
+              <Hint>E.g. your company name or your workspace name.</Hint>
+            </InputGroup>
+
+            <InputGroup>
+              <Label>Project name</Label>
+              <Input placeholder="Your Project name" required={true} icon="folder" />
+              <FormError>You must enter a project name</FormError>
+              <Hint>Your Jobs will live inside this Project.</Hint>
+            </InputGroup>
+
+            <FormButtons
+              confirmButton={
+                <Button type="submit" variant={"primary/small"} TrailingIcon="arrow-right">
+                  Create
+                </Button>
+              }
+              cancelButton={<Button variant={"secondary/small"}>Cancel</Button>}
+            />
+          </Fieldset>
+        </Form>
+      </div>
+    </MainCenteredContainer>
+  );
+}
diff --git a/apps/webapp/app/components/stories/Switch.stories.tsx b/apps/webapp/app/routes/storybook.switch/route.tsx
similarity index 59%
rename from apps/webapp/app/components/stories/Switch.stories.tsx
rename to apps/webapp/app/routes/storybook.switch/route.tsx
index 7bda1ecfc..d4db97f6f 100644
--- a/apps/webapp/app/components/stories/Switch.stories.tsx
+++ b/apps/webapp/app/routes/storybook.switch/route.tsx
@@ -1,19 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Switch } from "../primitives/Switch";
+import { Switch } from "~/components/primitives/Switch";
 
-const meta: Meta = {
-  title: "Primitives/Switch",
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Collection>;
-
-export const Switches: Story = {
-  render: () => <Collection />,
-};
-
-function Collection() {
+export default function Story() {
   return (
     <div className="flex flex-col items-start gap-y-4 p-4">
       <Switch variant="large" />
diff --git a/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx b/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx
new file mode 100644
index 000000000..549108143
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.tabs.$tabNumber/route.tsx
@@ -0,0 +1,10 @@
+import { useParams } from "@remix-run/react";
+
+export default function Story() {
+  const { tabNumber } = useParams();
+  return (
+    <div className="flex items-center justify-center py-8">
+      <h1 className="text-5xl">{tabNumber}</h1>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.tabs/route.tsx b/apps/webapp/app/routes/storybook.tabs/route.tsx
new file mode 100644
index 000000000..fc0c8003a
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.tabs/route.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from "@remix-run/react";
+import { Tabs } from "~/components/primitives/Tabs";
+
+export default function Story() {
+  return (
+    <div className="w-96 p-8">
+      <Tabs
+        tabs={[
+          { label: "My first tab", to: "1" },
+          { label: "Second tab", to: "2" },
+          { label: "Third tab", to: "3" },
+        ]}
+        layoutId="my-tabs"
+      />
+      <Outlet />
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.timeline/route.tsx b/apps/webapp/app/routes/storybook.timeline/route.tsx
new file mode 100644
index 000000000..24a1382fe
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.timeline/route.tsx
@@ -0,0 +1,276 @@
+import * as Slider from "@radix-ui/react-slider";
+import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
+import { useState } from "react";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { Switch } from "~/components/primitives/Switch";
+import * as Timeline from "~/components/primitives/Timeline";
+import { SpanProps } from "~/components/primitives/Timeline";
+import { cn } from "~/utils/cn";
+
+const maxDuration = 10_000;
+
+type Element = {
+  span?: {
+    startMs: number;
+    durationMs: number;
+  };
+  points?: {
+    ms: number;
+  }[];
+};
+
+const elements: Element[] = [
+  {
+    span: {
+      startMs: 0,
+      durationMs: 1_121,
+    },
+  },
+  {
+    span: {
+      startMs: 19,
+      durationMs: 1_121 - 19,
+    },
+  },
+  {
+    span: {
+      startMs: 19 + 22,
+      durationMs: 412,
+    },
+  },
+  {
+    span: {
+      startMs: 19 + 22 + 3,
+      durationMs: 412 - 3,
+    },
+    points: [
+      {
+        ms: 19 + 22 + 3 + 412 - 3,
+      },
+    ],
+  },
+  {
+    points: [
+      {
+        ms: 19 + 22 + 3 + 94,
+      },
+    ],
+  },
+  {
+    span: {
+      startMs: 19 + 22 + 3 + 94 + 3,
+      durationMs: 3,
+    },
+  },
+  {
+    span: {
+      startMs: 19 + 22 + 3 + 94 + 3 + 3,
+      durationMs: 39,
+    },
+  },
+  {
+    span: {
+      startMs: 19 + 22 + 3 + 94 + 3 + 3 + 40,
+      durationMs: 192,
+    },
+  },
+];
+
+export default function Story() {
+  const [scale, setScale] = useState(0.25);
+  const [durationScale, setDurationScale] = useState(0.12);
+  const [tickCount, setTickCount] = useState(5);
+  const [showDuration, setShowDurations] = useState(true);
+
+  const durationMs = maxDuration * durationScale;
+
+  return (
+    <div className="m-4 grid h-full grid-rows-[auto_1fr] overflow-hidden">
+      <div className="flex flex-col gap-2 pb-4">
+        <div className="flex flex-col gap-0.5">
+          <Paragraph variant="extra-small">Scale</Paragraph>
+          <Slider.Root
+            className="relative flex h-2 w-72 touch-none select-none items-center"
+            value={[scale]}
+            onValueChange={(value) => setScale(value[0])}
+            min={0}
+            max={1}
+            step={0.01}
+          >
+            <Slider.Track className="relative h-[3px] grow rounded-full bg-grid-bright">
+              <Slider.Range className="absolute h-full rounded-full bg-secondary" />
+            </Slider.Track>
+            <Slider.Thumb
+              className="block h-2 w-2 rounded-full border-4 border-secondary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-secondary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              aria-label="Concurrent runs slider"
+            />
+          </Slider.Root>
+        </div>
+        <div className="flex flex-col gap-0.5">
+          <Paragraph variant="extra-small">Ticks {tickCount}</Paragraph>
+          <Slider.Root
+            className="relative flex h-2 w-72 touch-none select-none items-center"
+            value={[tickCount]}
+            onValueChange={(value) => setTickCount(value[0])}
+            min={2}
+            max={10}
+            step={1}
+          >
+            <Slider.Track className="relative h-[3px] grow rounded-full bg-grid-bright">
+              <Slider.Range className="absolute h-full rounded-full bg-secondary" />
+            </Slider.Track>
+            <Slider.Thumb
+              className="block h-2 w-2 rounded-full border-4 border-secondary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-secondary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              aria-label="Concurrent runs slider"
+            />
+          </Slider.Root>
+        </div>
+        <div className="flex flex-col gap-0.5">
+          <Paragraph variant="extra-small">
+            Duration {formatDurationMilliseconds(durationMs, { style: "short" })}
+          </Paragraph>
+          <Slider.Root
+            className="relative flex h-2 w-72 touch-none select-none items-center"
+            value={[durationScale]}
+            onValueChange={(value) => setDurationScale(value[0])}
+            min={0}
+            max={1}
+            step={0.01}
+          >
+            <Slider.Track className="relative h-[3px] grow rounded-full bg-grid-bright">
+              <Slider.Range className="absolute h-full rounded-full bg-secondary" />
+            </Slider.Track>
+            <Slider.Thumb
+              className="block h-2 w-2 rounded-full border-4 border-secondary bg-charcoal-850 shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] transition hover:border-secondary hover:bg-charcoal-800 focus:shadow-[0_1px_3px_4px_rgb(0_0_0_/_0.2),_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] focus:outline-none"
+              aria-label="Concurrent runs slider"
+            />
+          </Slider.Root>
+        </div>
+        <Switch
+          checked={showDuration}
+          onCheckedChange={setShowDurations}
+          variant="small"
+          label={"Show durations"}
+        />
+      </div>
+
+      {/* The main body */}
+      <div className="grid grid-cols-[100px_1fr]">
+        <div></div>
+        <div className="overflow-x-auto border-l border-grid-dimmed bg-background-bright">
+          <div className="pr-6">
+            <Timeline.Root
+              durationMs={durationMs}
+              scale={scale}
+              className="h-full"
+              minWidth={300}
+              maxWidth={2000}
+            >
+              {/* Follows the cursor */}
+              <Timeline.FollowCursor>
+                {(ms) => (
+                  <div className="relative z-50 flex h-full flex-col">
+                    <div className="relative flex h-9 items-end">
+                      <div className="absolute left-1/2 w-fit -translate-x-1/2 rounded-sm border border-charcoal-600 bg-charcoal-750 px-0.5 py-0.5 text-xxs tabular-nums text-text-bright">
+                        {formatDurationMilliseconds(ms, {
+                          style: "short",
+                          maxDecimalPoints: ms < 1000 ? 0 : 1,
+                        })}
+                      </div>
+                    </div>
+                    <div className="w-px grow border-r border-grid-bright" />
+                  </div>
+                )}
+              </Timeline.FollowCursor>
+
+              {/* The duration labels */}
+              <Timeline.Row className="flex h-9 items-end border-b">
+                <Timeline.EquallyDistribute count={tickCount}>
+                  {(ms: number, index: number) => (
+                    <Timeline.Point
+                      ms={ms}
+                      className={"relative bottom-0 text-xxs text-text-dimmed"}
+                    >
+                      {(ms) => (
+                        <div
+                          className={
+                            index === 0
+                              ? "left-0.5"
+                              : index === tickCount - 1
+                              ? "-right-0 -translate-x-full"
+                              : "left-1/2 -translate-x-1/2"
+                          }
+                        >
+                          {formatDurationMilliseconds(ms, {
+                            style: "short",
+                            maxDecimalPoints: ms < 1000 ? 0 : 1,
+                          })}
+                        </div>
+                      )}
+                    </Timeline.Point>
+                  )}
+                </Timeline.EquallyDistribute>
+              </Timeline.Row>
+              {/* Main timeline body */}
+              <Timeline.Row className="h-full">
+                {/* The vertical tick lines */}
+                <Timeline.EquallyDistribute count={tickCount}>
+                  {(ms: number, index: number) => {
+                    if (index === 0) return null;
+                    return (
+                      <Timeline.Point ms={ms} className={"h-full border-r border-grid-dimmed"} />
+                    );
+                  }}
+                </Timeline.EquallyDistribute>
+                <>
+                  {elements.map((element, index) => {
+                    return (
+                      <Timeline.Row
+                        key={index}
+                        className="group flex h-9 items-center border-b border-b-white/10 hover:bg-grid-dimmed"
+                        onMouseOver={() => console.log(`hover ${index}`)}
+                      >
+                        {element.span && (
+                          <SpanWithDuration showDuration={showDuration} {...element.span} />
+                        )}
+                        {element.points?.map((point, pointIndex) => (
+                          <Timeline.Point
+                            key={pointIndex}
+                            ms={point.ms}
+                            className="-ml-1.5 h-3 w-3 rounded-full border-2 border-background-bright bg-text-dimmed"
+                          />
+                        ))}
+                      </Timeline.Row>
+                    );
+                  })}
+                </>
+              </Timeline.Row>
+            </Timeline.Root>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpanWithDuration({ showDuration, ...props }: SpanProps & { showDuration: boolean }) {
+  return (
+    <Timeline.Span {...props}>
+      <div className="relative flex h-5 w-full items-center rounded-sm bg-blue-500">
+        <div
+          className={cn(
+            "sticky left-0 z-10 transition group-hover:opacity-100",
+            !showDuration && "opacity-0"
+          )}
+        >
+          <div className="rounded-sm px-1 py-0.5 text-xxs text-text-bright text-shadow-custom">
+            {formatDurationMilliseconds(props.durationMs, {
+              style: "short",
+              maxDecimalPoints: props.durationMs < 1000 ? 0 : 1,
+            })}
+          </div>
+        </div>
+      </div>
+    </Timeline.Span>
+  );
+}
diff --git a/apps/webapp/app/components/stories/ToastUI.stories.tsx b/apps/webapp/app/routes/storybook.toast/route.tsx
similarity index 69%
rename from apps/webapp/app/components/stories/ToastUI.stories.tsx
rename to apps/webapp/app/routes/storybook.toast/route.tsx
index 7dc5cba24..45146aaeb 100644
--- a/apps/webapp/app/components/stories/ToastUI.stories.tsx
+++ b/apps/webapp/app/routes/storybook.toast/route.tsx
@@ -1,21 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/react";
 import { Toaster, toast } from "sonner";
-import { ToastUI } from "../primitives/Toast";
-import { Button } from "../primitives/Buttons";
+import { Button } from "~/components/primitives/Buttons";
+import { ToastUI } from "~/components/primitives/Toast";
 
-const meta: Meta = {
-  title: "Primitives/Toast",
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Collection>;
-
-export const Toasts: Story = {
-  render: () => <Collection />,
-};
-
-function Collection() {
+export default function Story() {
   return (
     <div className="flex flex-col items-start gap-y-4 p-4">
       <ToastUI variant="success" message="Success UI" t="-" />
@@ -34,17 +21,17 @@ function Collection() {
           })
         }
       >
-        Success
+        Trigger success toast
       </Button>
       <Button
-        variant="primary/large"
+        variant="danger/large"
         onClick={() =>
           toast.custom((t) => <ToastUI variant="error" message="Error" t={t as string} />, {
             duration: Infinity,
           })
         }
       >
-        Error
+        Trigger error toast
       </Button>
 
       <Toaster />
diff --git a/apps/webapp/app/components/stories/Tooltip.stories.tsx b/apps/webapp/app/routes/storybook.tooltip/route.tsx
similarity index 55%
rename from apps/webapp/app/components/stories/Tooltip.stories.tsx
rename to apps/webapp/app/routes/storybook.tooltip/route.tsx
index 2ecc2681e..a91d40f80 100644
--- a/apps/webapp/app/components/stories/Tooltip.stories.tsx
+++ b/apps/webapp/app/routes/storybook.tooltip/route.tsx
@@ -1,44 +1,18 @@
 import { LightBulbIcon } from "@heroicons/react/20/solid";
-import type { Meta, StoryObj } from "@storybook/react";
 import { ClipboardIcon } from "lucide-react";
-import { withDesign } from "storybook-addon-designs";
-import { Header2 } from "../primitives/Headers";
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { Header2 } from "~/components/primitives/Headers";
 import {
   SimpleTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "../primitives/Tooltip";
+} from "~/components/primitives/Tooltip";
 
-const meta: Meta<typeof Tooltips> = {
-  title: "Primitives/Tooltips",
-  component: Tooltips,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Tooltips>;
-
-export const Basic: Story = {
-  args: {
-    text: "Action text",
-  },
-
-  render: (args) => <Tooltips />,
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
-  },
-};
-
-function Tooltips() {
+export default function Story() {
   return (
-    <div className="flex flex-col gap-8 p-8">
+    <MainCenteredContainer className="flex flex-col gap-4">
       <div className="flex gap-4">
         <Header2>Rich Tooltip:</Header2>
         <TooltipProvider>
@@ -57,6 +31,6 @@ function Tooltips() {
         <Header2>Simple Tooltip:</Header2>
         <SimpleTooltip button={<ClipboardIcon className="h-5 w-5" />} content="Copy" />
       </div>
-    </div>
+    </MainCenteredContainer>
   );
 }
diff --git a/apps/webapp/app/components/stories/TreeView.stories.tsx b/apps/webapp/app/routes/storybook.tree-view/route.tsx
similarity index 89%
rename from apps/webapp/app/components/stories/TreeView.stories.tsx
rename to apps/webapp/app/routes/storybook.tree-view/route.tsx
index a7d79989e..33bb3c3d7 100644
--- a/apps/webapp/app/components/stories/TreeView.stories.tsx
+++ b/apps/webapp/app/routes/storybook.tree-view/route.tsx
@@ -1,24 +1,9 @@
 import { DocumentIcon, FolderIcon, FolderOpenIcon } from "@heroicons/react/20/solid";
-import type { Meta, StoryObj } from "@storybook/react";
-import { useCallback, useRef, useState } from "react";
-import { withDesign } from "storybook-addon-designs";
+import { useRef, useState } from "react";
+import { Button } from "~/components/primitives/Buttons";
+import { Input } from "~/components/primitives/Input";
+import { Tree, TreeView, flattenTree, useTree } from "~/components/primitives/TreeView/TreeView";
 import { cn } from "~/utils/cn";
-import { Button } from "../primitives/Buttons";
-import { Input } from "../primitives/Input";
-import { Tree, TreeView, flattenTree, useTree } from "../primitives/TreeView/TreeView";
-
-const meta: Meta = {
-  title: "Primitives/TreeView",
-  decorators: [withDesign],
-};
-export default meta;
-type Story = StoryObj<typeof TreeViewsSet>;
-
-export const TreeViews: Story = {
-  render: () => {
-    return <TreeViewsSet />;
-  },
-};
 
 const words = [
   "lorem",
@@ -113,7 +98,7 @@ function generateTree(): Tree<{ title: string }> {
 const data = generateTree();
 const tree = flattenTree(data);
 
-function TreeViewsSet() {
+export default function Story() {
   const [selectedId, setSelectedId] = useState<string>("");
   const [collapsedIds, setCollapsedIds] = useState<string[]>([]);
 
@@ -214,7 +199,7 @@ function TreeViewParent({
         nodes={nodes}
         getNodeProps={getNodeProps}
         getTreeProps={getTreeProps}
-        parentClassName="h-96 bg-slate-900"
+        parentClassName="h-96 bg-charcoal-900"
         renderNode={({ node, state, index, virtualizer, virtualItem }) => (
           <div
             style={{
diff --git a/apps/webapp/app/components/stories/Typography.stories.tsx b/apps/webapp/app/routes/storybook.typography/route.tsx
similarity index 76%
rename from apps/webapp/app/components/stories/Typography.stories.tsx
rename to apps/webapp/app/routes/storybook.typography/route.tsx
index 6e0a92f8d..b58271466 100644
--- a/apps/webapp/app/components/stories/Typography.stories.tsx
+++ b/apps/webapp/app/routes/storybook.typography/route.tsx
@@ -1,36 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { withDesign } from "storybook-addon-designs";
-import { Header1, Header2, Header3 } from "../primitives/Headers";
-import { Paragraph } from "../primitives/Paragraph";
-import { TextLink } from "../primitives/TextLink";
-
-const meta: Meta<typeof Typography> = {
-  title: "Primitives/Typography",
-  component: Typography,
-  decorators: [withDesign],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Typography>;
-
-export const Basic: Story = {
-  args: {
-    header1: "Header 1 text",
-    header2: "Header 2 text",
-    header3: "Header 3 text",
-    paragraph: "Paragraph text",
-  },
-
-  render: (args) => <Typography {...args} />,
-};
-
-Basic.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/jBqUJJ2d4lU6aSeKIIOBMY/Trigger.dev?type=design&node-id=2182%3A44955&t=ufnsmP3ns5zCviTT-1",
-  },
-};
+import { Header1, Header2, Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { TextLink } from "~/components/primitives/TextLink";
 
 type TypographyProps = {
   header1: string;
@@ -39,10 +9,15 @@ type TypographyProps = {
   paragraph: string;
 };
 
-function Typography({ header1, header2, header3, paragraph }: TypographyProps) {
+export default function Story({
+  header1 = "This is a Header 1",
+  header2 = "This is a Header 2",
+  header3 = "This is a Header 3",
+  paragraph = "This is paragraph text",
+}: TypographyProps) {
   return (
     <div className="flex flex-col gap-8">
-      <div>
+      <div className="flex flex-col gap-2">
         <Header1>{header1}</Header1>
         <Header1 textColor="dimmed">{header1}</Header1>
         <Header2>{header2}</Header2>
diff --git a/apps/webapp/app/components/stories/UsageBar.stories.tsx b/apps/webapp/app/routes/storybook.usage/route.tsx
similarity index 78%
rename from apps/webapp/app/components/stories/UsageBar.stories.tsx
rename to apps/webapp/app/routes/storybook.usage/route.tsx
index c8818ed3d..d0395d69c 100644
--- a/apps/webapp/app/components/stories/UsageBar.stories.tsx
+++ b/apps/webapp/app/routes/storybook.usage/route.tsx
@@ -1,21 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { UsageBar } from "../billing/UsageBar";
-import { Paragraph } from "../primitives/Paragraph";
+import { UsageBar } from "~/components/billing/UsageBar";
+import { Paragraph } from "~/components/primitives/Paragraph";
 
-const meta: Meta<typeof UsageProgressBar> = {
-  title: "Billing/UsageBar",
-  component: UsageProgressBar,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UsageProgressBar>;
-
-export const JobsUsageBar: Story = {
-  render: () => <UsageProgressBar />,
-};
-
-function UsageProgressBar() {
+export default function Story() {
   return (
     <div className="flex flex-col justify-center gap-4 p-12">
       <UsageBarWrapper title="Usage within the free tier limit">
@@ -68,7 +54,7 @@ function UsageProgressBar() {
 
 function UsageBarWrapper({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="rounded-md border border-border p-6">
+    <div className="rounded-md border border-grid-bright p-6">
       <Paragraph>{title}</Paragraph>
       {children}
     </div>
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
new file mode 100644
index 000000000..b750c945a
--- /dev/null
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -0,0 +1,210 @@
+import { NavLink, Outlet } from "@remix-run/react";
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { Fragment } from "react";
+import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { AppContainer } from "~/components/layout/AppLayout";
+import { env } from "~/env.server";
+import { requireUserId } from "~/services/session.server";
+import { cn } from "~/utils/cn";
+
+const stories: Story[] = [
+  {
+    name: "Badges",
+    slug: "badges",
+  },
+  {
+    name: "Buttons",
+    slug: "buttons",
+  },
+  {
+    name: "Callouts",
+    slug: "callout",
+  },
+  {
+    name: "Checkboxes",
+    slug: "checkboxes",
+  },
+  {
+    name: "Clipboard field",
+    slug: "clipboard-field",
+  },
+  {
+    name: "Code block",
+    slug: "code-block",
+  },
+  {
+    name: "Detail cell",
+    slug: "detail-cell",
+  },
+  {
+    name: "Dialog",
+    slug: "dialog",
+  },
+  {
+    name: "Environment label",
+    slug: "environment-label",
+  },
+  {
+    name: "Free plan usage",
+    slug: "free-plan-usage",
+  },
+  {
+    name: "Inline code",
+    slug: "inline-code",
+  },
+  {
+    name: "NamedIcon",
+    slug: "named-icon",
+  },
+  {
+    name: "Page header",
+    slug: "page-header",
+  },
+  {
+    name: "Pricing callout",
+    slug: "pricing-callout",
+  },
+  {
+    name: "Radio group",
+    slug: "radio-group",
+  },
+  {
+    name: "Segemented control",
+    slug: "segmented-control",
+  },
+  {
+    name: "Shortcuts",
+    slug: "shortcuts",
+  },
+  {
+    name: "Switch",
+    slug: "switch",
+  },
+  {
+    name: "Tabs",
+    slug: "tabs",
+  },
+  {
+    name: "Toast",
+    slug: "toast",
+  },
+  {
+    name: "Tooltip",
+    slug: "tooltip",
+  },
+  {
+    name: "Tree view",
+    slug: "tree-view",
+  },
+  {
+    name: "Timeline",
+    slug: "timeline",
+  },
+  {
+    name: "Typography",
+    slug: "typography",
+  },
+  {
+    name: "Usage",
+    slug: "usage",
+  },
+  {
+    sectionTitle: "Forms",
+    name: "Simple form",
+    slug: "simple-form",
+  },
+  {
+    name: "Login form",
+    slug: "login-form",
+  },
+  {
+    name: "Search fields",
+    slug: "search-fields",
+  },
+  {
+    name: "Input fields",
+    slug: "input-fields",
+  },
+  {
+    sectionTitle: "Menus",
+    name: "Select",
+    slug: "select",
+  },
+  {
+    name: "Popover",
+    slug: "popover",
+  },
+];
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  await requireUserId(request);
+
+  console.log("ENV", env.NODE_ENV);
+
+  if (env.NODE_ENV !== "development") {
+    throw redirect("/");
+  }
+
+  return typedjson({
+    stories,
+  });
+};
+
+export default function App() {
+  const { stories } = useTypedLoaderData<typeof loader>();
+
+  return (
+    <AppContainer>
+      <div className="grid grid-cols-[14rem_1fr] overflow-hidden">
+        <SideMenu stories={stories} />
+        <div className="overflow-y-auto">
+          <Outlet />
+        </div>
+      </div>
+    </AppContainer>
+  );
+}
+
+type Story = {
+  name: string;
+  slug: string;
+  sectionTitle?: string;
+};
+
+function SideMenu({ stories }: { stories: Story[] }) {
+  return (
+    <div
+      className={cn(
+        "flex h-full flex-col gap-y-8 overflow-hidden border-r border-grid-bright bg-background-bright px-2 transition"
+      )}
+    >
+      <div className="flex h-full flex-col">
+        <div className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          {stories.map((story) => {
+            return (
+              <Fragment key={story.slug}>
+                {story.sectionTitle && (
+                  <div className="mx-1 mb-1 mt-4 border-b border-text-dimmed/30 px-1 pb-1 text-xs uppercase text-text-dimmed/60">
+                    {story.sectionTitle}
+                  </div>
+                )}
+                <NavLink to={`/storybook/${story.slug}`} className={"text-sm"}>
+                  {({ isActive, isPending }) => (
+                    <div
+                      className={cn(
+                        "relative flex items-center gap-2 overflow-hidden truncate rounded-sm px-2 py-2 text-sm text-text-dimmed",
+                        (isActive || isPending) && "bg-tertiary text-text-bright"
+                      )}
+                    >
+                      {story.name}
+                    </div>
+                  )}
+                </NavLink>
+              </Fragment>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 3f1dfb243..5866b586c 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -1,19 +1,16 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@300;400;500;600;700&display=swap&family=Poppins:wght@600&display=swap");
+@import url("non.geist");
+@import url("non.geist/mono");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-body {
-  color: white;
-}
-
 @layer base {
   * {
-    @apply border-border;
+    @apply border-grid-bright;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background-dimmed text-text-dimmed;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
diff --git a/apps/webapp/app/utils/handle.ts b/apps/webapp/app/utils/handle.ts
index 91b52fafc..c4ac97703 100644
--- a/apps/webapp/app/utils/handle.ts
+++ b/apps/webapp/app/utils/handle.ts
@@ -1,7 +1,5 @@
 import { ExternalScriptsFunction } from "remix-utils/external-scripts";
-import { BreadcrumbItem } from "~/components/navigation/Breadcrumb";
 
 export type Handle = {
-  breadcrumb?: BreadcrumbItem;
   scripts?: ExternalScriptsFunction;
 };
diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts
index a385b2271..95102f314 100644
--- a/apps/webapp/app/utils/pathBuilder.ts
+++ b/apps/webapp/app/utils/pathBuilder.ts
@@ -342,6 +342,14 @@ export function v3RunSpanPath(
   return `${v3RunPath(organization, project, run)}/spans/${span.spanId}`;
 }
 
+export function v3RunStreamingPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  run: v3RunForPath
+) {
+  return `${v3RunPath(organization, project, run)}/stream`;
+}
+
 // Integration
 export function integrationClientPath(organization: OrgForPath, client: IntegrationForPath) {
   return `${organizationIntegrationsPath(organization)}/${clientParam(client)}`;
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index faedc35ed..935950400 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -117,8 +117,8 @@
     "marked": "^4.0.18",
     "morgan": "^1.10.0",
     "nanoid": "^3.3.4",
+    "non.geist": "^1.0.2",
     "ohash": "^1.1.3",
-    "postcss-import": "^14.1.0",
     "posthog-js": "^1.93.3",
     "posthog-node": "^3.1.3",
     "prism-react-renderer": "^1.3.5",
@@ -148,6 +148,7 @@
     "tailwind-merge": "^1.12.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.5",
+    "tailwindcss-textshadow": "^2.1.3",
     "tiny-invariant": "^1.2.0",
     "ulid": "^2.3.0",
     "ulidx": "^2.2.1",
@@ -176,7 +177,6 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
     "@total-typescript/ts-reset": "^0.4.2",
-    "@trigger.dev/tailwind-config": "workspace:*",
     "@types/bcryptjs": "^2.4.2",
     "@types/compression": "^1.7.2",
     "@types/eslint": "^8.4.6",
@@ -201,13 +201,17 @@
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
     "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.3",
+    "babel-preset-react-app": "^10.0.1",
+    "css-loader": "^6.10.0",
     "datepicker": "link:@types/@react-aria/datepicker",
     "engine.io": "^6.5.4",
     "esbuild": "^0.15.10",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
+    "postcss-import": "^16.0.1",
+    "postcss-loader": "^8.1.1",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "prop-types": "^15.8.1",
@@ -215,6 +219,7 @@
     "storybook": "^7.0.7",
     "storybook-addon-designs": "7.0.0-beta.2",
     "storybook-addon-variants": "^0.2.0",
+    "style-loader": "^3.3.4",
     "tailwind-scrollbar": "^3.0.1",
     "tailwindcss": "3.4.1",
     "ts-node": "^10.7.0",
@@ -224,4 +229,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/webapp/postcss.config.js b/apps/webapp/postcss.config.js
index cb8b23063..12a703d90 100644
--- a/apps/webapp/postcss.config.js
+++ b/apps/webapp/postcss.config.js
@@ -1,3 +1,6 @@
 module.exports = {
-  plugins: [require("postcss-import"), require("tailwindcss"), require("autoprefixer")],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index 748f8fbcd..95a407ed2 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 const colors = require("tailwindcss/colors");
 
+// V2
 const slate = {
-  ...colors.slate,
   450: "#7E8FA6",
   500: "#6B7C95",
   550: "#586981",
@@ -11,9 +11,36 @@ const slate = {
   750: "#293649",
   850: "#1A2434",
   900: "#131B2B",
+  950: "#0E1521",
+  1000: "#0B1018",
+};
+
+const toxic = {
+  50: "#E3FFE6",
+  100: "#C8FFCD",
+  200: "#A9FFAB",
+  300: "#8AFF96",
+  400: "#6DFC7B",
+  500: "#41FF54",
+  600: "#28F03C",
+  700: "#2AE03C",
+  800: "#22D834",
+  900: "#16CC28",
+};
+
+const acid = {
+  50: "#F9FFD1",
+  100: "#F6FFB6",
+  200: "#F3FF99",
+  300: "#EEFF82",
+  400: "#E7FF52",
+  500: "#DAF437",
+  600: "#C5E118",
+  700: "#B2CD0A",
+  800: "#A5BE07",
+  900: "#9FB802",
 };
 
-/** Trigger.dev custom palette */
 const midnight = {
   ...colors.slate,
   450: colors.slate[850],
@@ -27,35 +54,103 @@ const midnight = {
   900: "#0B1018",
 };
 
-/** Text colors */
-const bright = colors.slate[200];
-const dimmed = colors.slate[400];
+// V3
+const charcoal = {
+  100: "#E8E9EC",
+  200: "#D7D9DD",
+  300: "#B5B8C0",
+  400: "#878C99",
+  500: "#5F6570",
+  600: "#3B3E45",
+  700: "#272A2E",
+  750: "#212327",
+  800: "#1A1B1F",
+  850: "#15171A",
+  900: "#121317",
+  950: "#0D0E12",
+  1000: "#0B0C0F",
+};
 
-/** Shadcn colors */
-const background = midnight[900];
-const foreground = "hsl(213 31% 91%)";
-const muted = "hsl(223 47% 11%)";
-const mutedForeground = "hsl(215.4 16.3% 56.9%)";
-const popover = slate[850];
-const popoverForeground = colors.slate[800];
-const card = "hsl(0 0% 100%)";
-const cardForeground = "hsl(222.2 47.4% 11.2%)";
-const border = slate[850];
-const input = slate[850];
-const primary = colors.indigo[600];
-const primaryForeground = colors.indigo[500];
-const secondary = "hsl(222.2 47.4% 11.2%)";
-const secondaryForeground = slate[850];
-const tertiary = "hsl(217 37% 7% / 0)";
-const tertiaryForeground = slate[850];
-const accent = slate[750];
-const accentForeground = "hsl(210 40% 98%)";
-const destructive = "hsl(0 63% 31%)";
-const destructiveForeground = "hsl(210 40% 98%)";
-const ring = colors.indigo[600];
+const apple = {
+  100: "#E4FFC9",
+  200: "#CFFFA0",
+  300: "#BFFF81",
+  400: "#AFFF62",
+  500: "#A8FF53",
+  600: "#82D134",
+  700: "#6FB12F",
+  750: "#5E932A",
+  800: "#45711A",
+  850: "#2E4E10",
+  900: "#20370A",
+  950: "#152506",
+};
+
+const mint = {
+  50: "#F0FDF4",
+  100: "#DDFBE6",
+  200: "#BDF5D0",
+  300: "#87EBA9",
+  400: "#4FD97E",
+  500: "#28BF5C",
+  600: "#1B9E48",
+  700: "#197C3C",
+  800: "#196233",
+  900: "#16512C",
+  950: "#062D15",
+};
+
+const sun = {
+  50: "#FDFEE8",
+  100: "#FDFFC2",
+  200: "#FFFF89",
+  300: "#FFF852",
+  400: "#FDEA12",
+  500: "#ECCF06",
+  600: "#CCA302",
+  700: "#A37505",
+  800: "#865B0D",
+  900: "#724B11",
+  950: "#432705",
+};
+
+const lavender = {
+  50: "##f4f2ff",
+  100: "#eae8ff",
+  200: "#d7d4ff",
+  300: "#bab2ff",
+  400: "#826dff",
+  500: "#7655fd",
+  600: "#6532f5",
+  700: "#5620e1",
+  800: "#481abd",
+  900: "#3d189a",
+  950: "#230c69",
+};
+
+/** Trigger.dev custom palette */
+
+/** Text colors */
+const primary = apple[500];
+const secondary = lavender[400];
+const tertiary = charcoal[700];
+const textLink = lavender[400];
+const textDimmed = charcoal[400];
+const textBright = charcoal[200];
+const backgroundBright = charcoal[800];
+const backgroundDimmed = charcoal[850];
+const gridBright = charcoal[700];
+const gridDimmed = charcoal[750];
+const success = mint[500];
+const pending = colors.blue[500];
+const warning = colors.amber[500];
+const error = colors.rose[600];
+const devEnv = colors.pink[500];
+const stagingEnv = sun[400];
+const prodEnv = mint[500];
+
+/** Other variables */
 const radius = "0.5rem";
-const darkBackground = midnight[900];
-const divide = slate[850];
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -74,9 +169,8 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        sans: ["Inter", "sans-serif"],
-        mono: ["Roboto Mono", "monospace"],
-        title: ["Poppins", "sans-serif"],
+        sans: ["Geist Variable", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"],
+        mono: ["Geist Mono Variable", "monaco", "Consolas", "Lucida Console", "monospace"],
       },
       fontSize: {
         xxs: [
@@ -97,63 +191,28 @@ module.exports = {
         ],
       },
       colors: {
-        midnight,
-        darkBackground,
-        divide,
-        bright,
-        dimmed,
-        background,
-        border,
-        input,
-        ring,
-        foreground,
-        primary: {
-          DEFAULT: primary,
-          foreground: primaryForeground,
-        },
-        secondary: {
-          DEFAULT: secondary,
-          foreground: secondaryForeground,
-        },
-        tertiary: {
-          DEFAULT: tertiary,
-          foreground: tertiaryForeground,
-        },
-        destructive: {
-          DEFAULT: destructive,
-          foreground: destructiveForeground,
-        },
-        muted: {
-          DEFAULT: muted,
-          foreground: mutedForeground,
-        },
-        accent: {
-          DEFAULT: accent,
-          foreground: accentForeground,
-        },
-        popover: {
-          DEFAULT: popover,
-          foreground: popoverForeground,
-        },
-        card: {
-          DEFAULT: card,
-          foreground: cardForeground,
-        },
-        slate,
-        acid: {
-          400: "#F1FF98",
-          500: "#E7FF52",
-          600: "#FFF067",
-        },
-        toxic: {
-          400: "#8EFF9A",
-          500: "#41FF54",
-          600: "#00FFA3",
-        },
-        devEnv: colors.pink,
-        liveEnv: colors.green,
-        "ui-border": slate[800],
-        "ui-border-dimmed": slate[900],
+        charcoal,
+        apple,
+        lavender,
+        mint,
+        sun,
+        primary,
+        secondary,
+        tertiary,
+        "text-link": textLink,
+        "text-dimmed": textDimmed,
+        "text-bright": textBright,
+        "background-bright": backgroundBright,
+        "background-dimmed": backgroundDimmed,
+        "grid-bright": gridBright,
+        "grid-dimmed": gridDimmed,
+        success,
+        pending,
+        warning,
+        error,
+        dev: devEnv,
+        staging: stagingEnv,
+        prod: prodEnv,
       },
       borderRadius: {
         lg: radius,
@@ -165,6 +224,12 @@ module.exports = {
         "glow-secondary": "0 0 10px 5px rgba(79, 70, 229, 0.2)",
         "glow-pink": "0 0 10px 5px rgba(236, 72, 153, 0.2)",
       },
+      outlineWidth: {
+        3: "3px",
+      },
+      textShadow: {
+        custom: "1px 1px 1px rgba(0, 0, 0, 0.5)", // Offset-X | Offset-Y | Blur radius | Color
+      },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
@@ -179,10 +244,15 @@ module.exports = {
           "50%": { transform: "translatey(7px)" },
           "100%": { transform: "translatey(0px)" },
         },
+        "tile-move": {
+          "0%": { "background-position": "0px" },
+          "100%": { "background-position": "8px" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "tile-scroll": "tile-move 0.5s infinite linear",
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(closest-side, var(--tw-gradient-stops))",
@@ -213,5 +283,6 @@ module.exports = {
     require("tailwindcss-animate"),
     require("tailwind-scrollbar"),
     require("tailwind-scrollbar-hide"),
+    require("tailwindcss-textshadow"),
   ],
 };
diff --git a/config-packages/tailwind-config/package.json b/config-packages/tailwind-config/package.json
deleted file mode 100644
index 086a1f6a0..000000000
--- a/config-packages/tailwind-config/package.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "name": "@trigger.dev/tailwind-config",
-  "version": "0.0.0",
-  "private": true,
-  "devDependencies": {},
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/config-packages/tailwind-config/postcss.config.js b/config-packages/tailwind-config/postcss.config.js
deleted file mode 100644
index 12a703d90..000000000
--- a/config-packages/tailwind-config/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/config-packages/tailwind-config/tailwind.config.js b/config-packages/tailwind-config/tailwind.config.js
deleted file mode 100644
index 899ffb72f..000000000
--- a/config-packages/tailwind-config/tailwind.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const colors = require("tailwindcss/colors");
-
-module.exports = {
-  content: [
-    // app content
-    // "./src/**/*.{ts,jsx,tsx}",
-    "./app/**/*.{ts,jsx,tsx}",
-    // include packages if not transpiling
-    "../../packages/**/*.{ts,tsx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ["Inter", "sans-serif"],
-        mono: ["Roboto Mono", "monospace"],
-      },
-      colors: {
-        brandblue: colors.blue[500],
-        brandred: colors.red[500],
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
-};
diff --git a/package.json b/package.json
index 23e540dda..0edcea802 100644
--- a/package.json
+++ b/package.json
@@ -47,16 +47,12 @@
   "devDependencies": {
     "@manypkg/cli": "^0.19.2",
     "@playwright/test": "^1.36.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.8",
     "@trigger.dev/cli": "workspace:*",
     "@trigger.dev/database": "workspace:*",
     "@types/node": "18.17.1",
     "autoprefixer": "^10.4.12",
     "eslint-config-custom": "workspace:*",
-    "postcss": "^8.4.17",
     "prettier": "^3.0.0",
-    "tailwindcss": "3.1.8",
     "tsx": "^3.7.1",
     "turbo": "^1.10.3",
     "vite": "^4.1.1",
@@ -75,4 +71,4 @@
       "tsup@8.0.1": "patches/tsup@8.0.1.patch"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/v3/utils/durations.ts b/packages/core/src/v3/utils/durations.ts
index f69253e56..c2baf5269 100644
--- a/packages/core/src/v3/utils/durations.ts
+++ b/packages/core/src/v3/utils/durations.ts
@@ -26,6 +26,10 @@ export function nanosecondsToMilliseconds(nanoseconds: number): number {
   return nanoseconds / 1_000_000;
 }
 
+export function millisecondsToNanoseconds(milliseconds: number): number {
+  return milliseconds * 1_000_000;
+}
+
 export function formatDurationNanoseconds(nanoseconds: number, options?: DurationOptions): string {
   return formatDurationMilliseconds(nanosecondsToMilliseconds(nanoseconds), options);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 990aa9525..a4d1f07fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,17 +16,13 @@ importers:
       '@manypkg/cli': ^0.19.2
       '@playwright/test': ^1.36.2
       '@remix-run/changelog-github': ^0.0.5
-      '@tailwindcss/forms': ^0.5.3
-      '@tailwindcss/typography': ^0.5.8
       '@trigger.dev/cli': workspace:*
       '@trigger.dev/database': workspace:*
       '@types/node': 18.17.1
       autoprefixer: ^10.4.12
       eslint-config-custom: workspace:*
       node-fetch: 2.6.x
-      postcss: ^8.4.17
       prettier: ^3.0.0
-      tailwindcss: 3.1.8
       tsx: ^3.7.1
       turbo: ^1.10.3
       vite: ^4.1.1
@@ -39,16 +35,12 @@ importers:
     devDependencies:
       '@manypkg/cli': 0.19.2
       '@playwright/test': 1.37.0
-      '@tailwindcss/forms': 0.5.3_tailwindcss@3.1.8
-      '@tailwindcss/typography': 0.5.9_tailwindcss@3.1.8
       '@trigger.dev/cli': link:packages/cli
       '@trigger.dev/database': link:packages/database
       '@types/node': 18.17.1
-      autoprefixer: 10.4.13_postcss@8.4.21
+      autoprefixer: 10.4.13
       eslint-config-custom: link:config-packages/eslint-config-custom
-      postcss: 8.4.21
       prettier: 3.0.0
-      tailwindcss: 3.1.8_postcss@8.4.21
       tsx: 3.12.2
       turbo: 1.10.3
       vite: 4.1.4_@types+node@18.17.1
@@ -230,7 +222,6 @@ importers:
       '@trigger.dev/database': workspace:*
       '@trigger.dev/otlp-importer': workspace:*
       '@trigger.dev/sdk': workspace:*
-      '@trigger.dev/tailwind-config': workspace:*
       '@trigger.dev/yalt': workspace:*
       '@types/bcryptjs': ^2.4.2
       '@types/compression': ^1.7.2
@@ -259,11 +250,14 @@ importers:
       '@uiw/react-codemirror': ^4.19.5
       '@whatwg-node/fetch': ^0.9.14
       autoprefixer: ^10.4.13
+      babel-loader: ^9.1.3
+      babel-preset-react-app: ^10.0.1
       class-variance-authority: ^0.5.2
       clsx: ^1.2.1
       compression: ^1.7.4
       cron-parser: ^4.7.1
       cross-env: ^7.0.3
+      css-loader: ^6.10.0
       cuid: ^2.1.8
       datepicker: link:@types/@react-aria/datepicker
       emails: workspace:*
@@ -286,10 +280,11 @@ importers:
       marked: ^4.0.18
       morgan: ^1.10.0
       nanoid: ^3.3.4
+      non.geist: ^1.0.2
       npm-run-all: ^4.1.5
       ohash: ^1.1.3
-      postcss: ^8.4.21
-      postcss-import: ^14.1.0
+      postcss-import: ^16.0.1
+      postcss-loader: ^8.1.1
       posthog-js: ^1.93.3
       posthog-node: ^3.1.3
       prettier: ^2.8.8
@@ -323,11 +318,13 @@ importers:
       storybook: ^7.0.7
       storybook-addon-designs: 7.0.0-beta.2
       storybook-addon-variants: ^0.2.0
+      style-loader: ^3.3.4
       tailwind-merge: ^1.12.0
       tailwind-scrollbar: ^3.0.1
       tailwind-scrollbar-hide: ^1.1.7
       tailwindcss: 3.4.1
       tailwindcss-animate: ^1.0.5
+      tailwindcss-textshadow: ^2.1.3
       tiny-invariant: ^1.2.0
       ts-node: ^10.7.0
       tsconfig-paths: ^3.14.1
@@ -427,8 +424,8 @@ importers:
       marked: 4.2.5
       morgan: 1.10.0
       nanoid: 3.3.4
+      non.geist: 1.0.2
       ohash: 1.1.3
-      postcss-import: 14.1.0_postcss@8.4.21
       posthog-js: 1.93.3
       posthog-node: 3.1.3
       prism-react-renderer: 1.3.5_react@18.2.0
@@ -458,6 +455,7 @@ importers:
       tailwind-merge: 1.12.0
       tailwind-scrollbar-hide: 1.1.7
       tailwindcss-animate: 1.0.5_tailwindcss@3.4.1
+      tailwindcss-textshadow: 2.1.3
       tiny-invariant: 1.3.1
       ulid: 2.3.0
       ulidx: 2.2.1
@@ -474,7 +472,7 @@ importers:
       '@storybook/addon-essentials': 7.0.9_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-interactions': 7.0.9_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-links': 7.0.9_biqbaboplfbrettd7655fr4n2y
-      '@storybook/addon-styling': 1.0.6_gjpyg5imi5mt2gbvkmn3a4dr7m
+      '@storybook/addon-styling': 1.0.6_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-viewport': 7.0.9_biqbaboplfbrettd7655fr4n2y
       '@storybook/blocks': 7.0.9_biqbaboplfbrettd7655fr4n2y
       '@storybook/react': 7.0.9_vegmnuvoswdxuttpuhvewcem44
@@ -485,7 +483,6 @@ importers:
       '@tailwindcss/forms': 0.5.3_tailwindcss@3.4.1
       '@tailwindcss/typography': 0.5.9_tailwindcss@3.4.1
       '@total-typescript/ts-reset': 0.4.2
-      '@trigger.dev/tailwind-config': link:../../config-packages/tailwind-config
       '@types/bcryptjs': 2.4.2
       '@types/compression': 1.7.2
       '@types/eslint': 8.4.10
@@ -509,14 +506,18 @@ importers:
       '@types/ws': 8.5.4
       '@typescript-eslint/eslint-plugin': 5.59.6_7rqy3acf7ittvjpliyki2mhtka
       '@typescript-eslint/parser': 5.59.6_a3vgt4pcadxos4gox5ryckz5rq
-      autoprefixer: 10.4.13_postcss@8.4.21
+      autoprefixer: 10.4.13
+      babel-loader: 9.1.3
+      babel-preset-react-app: 10.0.1
+      css-loader: 6.10.0
       datepicker: link:@types/@react-aria/datepicker
       engine.io: 6.5.4
       esbuild: 0.15.18
       eslint: 8.31.0
       eslint-config-prettier: 8.6.0_eslint@8.31.0
       npm-run-all: 4.1.5
-      postcss: 8.4.21
+      postcss-import: 16.0.1
+      postcss-loader: 8.1.1_typescript@5.2.2
       prettier: 2.8.8
       prettier-plugin-tailwindcss: 0.3.0_prettier@2.8.8
       prop-types: 15.8.1
@@ -524,6 +525,7 @@ importers:
       storybook: 7.0.9
       storybook-addon-designs: 7.0.0-beta.2_gtov7sygms2deenjyn5i42ywqa
       storybook-addon-variants: 0.2.0_biqbaboplfbrettd7655fr4n2y
+      style-loader: 3.3.4
       tailwind-scrollbar: 3.0.1_tailwindcss@3.4.1
       tailwindcss: 3.4.1_ts-node@10.9.1
       ts-node: 10.9.1_v2fyojhutw2zqp3xtxirvaa4jq
@@ -555,9 +557,6 @@ importers:
       eslint-plugin-react: 7.31.8_eslint@8.31.0
       typescript: 4.9.4
 
-  config-packages/tailwind-config:
-    specifiers: {}
-
   config-packages/tsconfig:
     specifiers: {}
 
@@ -2983,7 +2982,7 @@ packages:
     resolution: {integrity: sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       '@jridgewell/gen-mapping': 0.3.2
       '@jridgewell/trace-mapping': 0.3.19
       jsesc: 2.5.2
@@ -3002,7 +3001,7 @@ packages:
     resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     dev: true
 
   /@babel/helper-annotate-as-pure/7.22.5:
@@ -3016,7 +3015,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-explode-assignable-expression': 7.18.6
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     dev: true
 
   /@babel/helper-compilation-targets/7.21.5_@babel+core@7.21.8:
@@ -3028,7 +3027,7 @@ packages:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.21.8
       '@babel/helper-validator-option': 7.22.15
-      browserslist: 4.21.10
+      browserslist: 4.23.0
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
@@ -3083,6 +3082,42 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/helper-create-class-features-plugin/7.24.0_@babel+core@7.21.8:
+    resolution: {integrity: sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.21.8
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-replace-supers': 7.22.20_@babel+core@7.21.8
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-create-class-features-plugin/7.24.0_@babel+core@7.22.17:
+    resolution: {integrity: sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-replace-supers': 7.22.20_@babel+core@7.22.17
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      semver: 6.3.1
+    dev: true
+
   /@babel/helper-create-regexp-features-plugin/7.20.5_@babel+core@7.21.8:
     resolution: {integrity: sha512-m68B1lkg3XDGX5yCvGO0kPx3v9WIYLnzjKfPcQiwntEQa5ZeRkPmo2X/ISJc8qxWGfwUr+kvZAeEzAwLec2r2w==}
     engines: {node: '>=6.9.0'}
@@ -3112,7 +3147,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.4
@@ -3128,7 +3163,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.4
@@ -3137,6 +3172,25 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/helper-define-polyfill-provider/0.5.0_@babel+core@7.22.17:
+    resolution: {integrity: sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.0
+      debug: 4.3.4
+      lodash.debounce: 4.0.8
+      resolve: 1.22.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-environment-visitor/7.22.20:
+    resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
+    engines: {node: '>=6.9.0'}
+
   /@babel/helper-environment-visitor/7.22.5:
     resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==}
     engines: {node: '>=6.9.0'}
@@ -3145,7 +3199,7 @@ packages:
     resolution: {integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     dev: true
 
   /@babel/helper-function-name/7.22.5:
@@ -3153,26 +3207,41 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
+
+  /@babel/helper-function-name/7.23.0:
+    resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.22.15
+      '@babel/types': 7.24.0
+    dev: true
 
   /@babel/helper-hoist-variables/7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
 
   /@babel/helper-member-expression-to-functions/7.21.5:
     resolution: {integrity: sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
+    dev: true
+
+  /@babel/helper-member-expression-to-functions/7.23.0:
+    resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.0
     dev: true
 
   /@babel/helper-module-imports/7.18.6:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     dev: true
 
   /@babel/helper-module-imports/7.22.15:
@@ -3185,14 +3254,14 @@ packages:
     resolution: {integrity: sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.15
+      '@babel/helper-validator-identifier': 7.22.20
       '@babel/template': 7.22.15
       '@babel/traverse': 7.22.17
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3204,7 +3273,7 @@ packages:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
@@ -3218,7 +3287,7 @@ packages:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
@@ -3227,6 +3296,13 @@ packages:
   /@babel/helper-optimise-call-expression/7.18.6:
     resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
     engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.0
+    dev: true
+
+  /@babel/helper-optimise-call-expression/7.22.5:
+    resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
+    engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.22.17
     dev: true
@@ -3240,6 +3316,10 @@ packages:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-plugin-utils/7.24.0:
+    resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==}
+    engines: {node: '>=6.9.0'}
+
   /@babel/helper-remap-async-to-generator/7.18.9_@babel+core@7.21.8:
     resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==}
     engines: {node: '>=6.9.0'}
@@ -3248,9 +3328,9 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.20.5
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3263,9 +3343,9 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-wrap-function': 7.20.5
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3274,21 +3354,45 @@ packages:
     resolution: {integrity: sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-member-expression-to-functions': 7.21.5
-      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/template': 7.22.15
       '@babel/traverse': 7.22.17
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /@babel/helper-replace-supers/7.22.20_@babel+core@7.21.8:
+    resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.21.8
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+    dev: true
+
+  /@babel/helper-replace-supers/7.22.20_@babel+core@7.22.17:
+    resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+    dev: true
+
   /@babel/helper-simple-access/7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
 
   /@babel/helper-skip-transparent-expression-wrappers/7.20.0:
     resolution: {integrity: sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==}
@@ -3297,20 +3401,35 @@ packages:
       '@babel/types': 7.22.17
     dev: true
 
+  /@babel/helper-skip-transparent-expression-wrappers/7.22.5:
+    resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.0
+    dev: true
+
   /@babel/helper-split-export-declaration/7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
 
   /@babel/helper-string-parser/7.22.5:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-string-parser/7.23.4:
+    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
+    engines: {node: '>=6.9.0'}
+
   /@babel/helper-validator-identifier/7.22.15:
     resolution: {integrity: sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==}
     engines: {node: '>=6.9.0'}
 
+  /@babel/helper-validator-identifier/7.22.20:
+    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
+    engines: {node: '>=6.9.0'}
+
   /@babel/helper-validator-option/7.22.15:
     resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
     engines: {node: '>=6.9.0'}
@@ -3319,10 +3438,10 @@ packages:
     resolution: {integrity: sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-function-name': 7.22.5
+      '@babel/helper-function-name': 7.23.0
       '@babel/template': 7.22.15
       '@babel/traverse': 7.22.17
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3333,7 +3452,7 @@ packages:
     dependencies:
       '@babel/template': 7.22.15
       '@babel/traverse': 7.22.17
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3361,7 +3480,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     dev: true
 
   /@babel/parser/7.22.16:
@@ -3378,7 +3497,7 @@ packages:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.22.17:
@@ -3388,7 +3507,7 @@ packages:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.20.7_@babel+core@7.21.8:
@@ -3398,8 +3517,8 @@ packages:
       '@babel/core': ^7.13.0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
       '@babel/plugin-proposal-optional-chaining': 7.21.0_@babel+core@7.21.8
     dev: true
 
@@ -3410,8 +3529,8 @@ packages:
       '@babel/core': ^7.13.0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
       '@babel/plugin-proposal-optional-chaining': 7.21.0_@babel+core@7.22.17
     dev: true
 
@@ -3423,8 +3542,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.21.8
       '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.21.8
     transitivePeerDependencies:
@@ -3439,8 +3558,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.22.17
       '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.22.17
     transitivePeerDependencies:
@@ -3483,11 +3602,9 @@ packages:
       '@babel/core': ^7.12.0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-create-class-features-plugin': 7.21.8_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.24.0_@babel+core@7.21.8
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.21.8
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /@babel/plugin-proposal-class-static-block/7.21.0_@babel+core@7.22.17:
@@ -3498,11 +3615,21 @@ packages:
       '@babel/core': ^7.12.0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-create-class-features-plugin': 7.21.8_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.24.0_@babel+core@7.22.17
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.22.17
-    transitivePeerDependencies:
-      - supports-color
+    dev: true
+
+  /@babel/plugin-proposal-decorators/7.24.0_@babel+core@7.22.17:
+    resolution: {integrity: sha512-LiT1RqZWeij7X+wGxCoYh3/3b8nVOX6/7BZ9wiQgAIyjoeQWdROaodJCgT+dwtbjHaz0r7bEbHJzjSbVfcOyjQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-create-class-features-plugin': 7.24.0_@babel+core@7.22.17
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/plugin-syntax-decorators': 7.24.0_@babel+core@7.22.17
     dev: true
 
   /@babel/plugin-proposal-dynamic-import/7.18.6_@babel+core@7.21.8:
@@ -3513,7 +3640,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.21.8
     dev: true
 
@@ -3525,7 +3652,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.22.17
     dev: true
 
@@ -3537,7 +3664,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.21.8
     dev: true
 
@@ -3549,7 +3676,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.22.17
     dev: true
 
@@ -3561,7 +3688,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.21.8
     dev: true
 
@@ -3573,7 +3700,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.22.17
     dev: true
 
@@ -3585,7 +3712,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.21.8
     dev: true
 
@@ -3597,7 +3724,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.22.17
     dev: true
 
@@ -3659,7 +3786,7 @@ packages:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.21.8
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.21.8
       '@babel/plugin-transform-parameters': 7.21.3_@babel+core@7.21.8
     dev: true
@@ -3674,7 +3801,7 @@ packages:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.22.17
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.22.17
       '@babel/plugin-transform-parameters': 7.21.3_@babel+core@7.22.17
     dev: true
@@ -3687,7 +3814,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.21.8
     dev: true
 
@@ -3699,7 +3826,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.22.17
     dev: true
 
@@ -3798,7 +3925,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-proposal-unicode-property-regex/7.18.6_@babel+core@7.22.17:
@@ -3810,7 +3937,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.21.8:
@@ -3819,7 +3946,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.22.17:
@@ -3828,7 +3955,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-bigint/7.8.3_@babel+core@7.22.17:
@@ -3837,7 +3964,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.21.8:
@@ -3846,7 +3973,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.22.17:
@@ -3855,7 +3982,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.21.8:
@@ -3865,7 +3992,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.22.17:
@@ -3875,7 +4002,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-decorators/7.22.10_@babel+core@7.22.17:
@@ -3888,13 +4015,23 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-syntax-decorators/7.24.0_@babel+core@7.22.17:
+    resolution: {integrity: sha512-MXW3pQCu9gUiVGzqkGqsgiINDVYXoAnrY8FYF/rmb+OfufNF0zHMpHPN4ulRrinxYT8Vk/aZJxYqOKsDECjKAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-plugin-utils': 7.24.0
+    dev: true
+
   /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.21.8:
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.22.17:
@@ -3903,7 +4040,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.21.8:
@@ -3912,7 +4049,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.22.17:
@@ -3921,7 +4058,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-flow/7.18.6:
@@ -3930,7 +4067,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-flow/7.18.6_@babel+core@7.22.17:
@@ -3940,7 +4077,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-import-assertions/7.20.0_@babel+core@7.21.8:
@@ -3950,7 +4087,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-import-assertions/7.20.0_@babel+core@7.22.17:
@@ -3960,7 +4097,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.21.8:
@@ -3969,7 +4106,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.22.17:
@@ -3978,7 +4115,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.21.8:
@@ -3987,7 +4124,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.22.17:
@@ -3996,7 +4133,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.21.8:
@@ -4006,7 +4143,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.22.17:
@@ -4016,7 +4153,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-jsx/7.22.5:
@@ -4043,7 +4180,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.22.17:
@@ -4052,7 +4189,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.21.8:
@@ -4061,7 +4198,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.22.17:
@@ -4070,7 +4207,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.21.8:
@@ -4079,7 +4216,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.22.17:
@@ -4088,7 +4225,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.21.8:
@@ -4097,7 +4234,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.22.17:
@@ -4106,7 +4243,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.21.8:
@@ -4115,7 +4252,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.22.17:
@@ -4124,7 +4261,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.21.8:
@@ -4133,7 +4270,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.22.17:
@@ -4142,7 +4279,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.21.8:
@@ -4152,7 +4289,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.22.17:
@@ -4162,7 +4299,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.21.8:
@@ -4172,7 +4309,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.22.17:
@@ -4182,7 +4319,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-syntax-typescript/7.21.4_@babel+core@7.22.17:
@@ -4192,7 +4329,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-arrow-functions/7.21.5_@babel+core@7.21.8:
@@ -4202,7 +4339,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-arrow-functions/7.21.5_@babel+core@7.22.17:
@@ -4212,7 +4349,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-async-to-generator/7.20.7_@babel+core@7.21.8:
@@ -4223,7 +4360,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.21.8
     transitivePeerDependencies:
       - supports-color
@@ -4237,7 +4374,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.22.17
     transitivePeerDependencies:
       - supports-color
@@ -4250,7 +4387,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-block-scoped-functions/7.18.6_@babel+core@7.22.17:
@@ -4260,7 +4397,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-block-scoping/7.21.0_@babel+core@7.21.8:
@@ -4270,7 +4407,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-block-scoping/7.21.0_@babel+core@7.22.17:
@@ -4280,7 +4417,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-classes/7.21.0_@babel+core@7.21.8:
@@ -4292,15 +4429,13 @@ packages:
       '@babel/core': 7.21.8
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-replace-supers': 7.21.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-replace-supers': 7.22.20_@babel+core@7.21.8
       '@babel/helper-split-export-declaration': 7.22.6
       globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /@babel/plugin-transform-classes/7.21.0_@babel+core@7.22.17:
@@ -4312,15 +4447,13 @@ packages:
       '@babel/core': 7.22.17
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-replace-supers': 7.21.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-replace-supers': 7.22.20_@babel+core@7.22.17
       '@babel/helper-split-export-declaration': 7.22.6
       globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /@babel/plugin-transform-computed-properties/7.21.5_@babel+core@7.21.8:
@@ -4330,7 +4463,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/template': 7.22.15
     dev: true
 
@@ -4341,7 +4474,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/template': 7.22.15
     dev: true
 
@@ -4352,7 +4485,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-destructuring/7.21.3_@babel+core@7.22.17:
@@ -4362,7 +4495,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-dotall-regex/7.18.6_@babel+core@7.21.8:
@@ -4373,7 +4506,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-dotall-regex/7.18.6_@babel+core@7.22.17:
@@ -4384,7 +4517,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-duplicate-keys/7.18.9_@babel+core@7.21.8:
@@ -4394,7 +4527,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-duplicate-keys/7.18.9_@babel+core@7.22.17:
@@ -4404,7 +4537,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-exponentiation-operator/7.18.6_@babel+core@7.21.8:
@@ -4415,7 +4548,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-builder-binary-assignment-operator-visitor': 7.18.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-exponentiation-operator/7.18.6_@babel+core@7.22.17:
@@ -4426,7 +4559,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-builder-binary-assignment-operator-visitor': 7.18.9
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-flow-strip-types/7.19.0:
@@ -4457,7 +4590,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-for-of/7.21.5_@babel+core@7.22.17:
@@ -4467,7 +4600,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-function-name/7.18.9_@babel+core@7.21.8:
@@ -4478,8 +4611,8 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-function-name/7.18.9_@babel+core@7.22.17:
@@ -4490,8 +4623,8 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-literals/7.18.9_@babel+core@7.21.8:
@@ -4501,7 +4634,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-literals/7.18.9_@babel+core@7.22.17:
@@ -4511,7 +4644,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-member-expression-literals/7.18.6_@babel+core@7.21.8:
@@ -4521,7 +4654,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-member-expression-literals/7.18.6_@babel+core@7.22.17:
@@ -4531,7 +4664,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-modules-amd/7.20.11_@babel+core@7.21.8:
@@ -4542,7 +4675,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-modules-amd/7.20.11_@babel+core@7.22.17:
@@ -4553,7 +4686,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-modules-commonjs/7.21.5_@babel+core@7.21.8:
@@ -4564,7 +4697,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-simple-access': 7.22.5
     dev: true
 
@@ -4576,7 +4709,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-simple-access': 7.22.5
     dev: true
 
@@ -4589,8 +4722,8 @@ packages:
       '@babel/core': 7.21.8
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-validator-identifier': 7.22.20
     dev: true
 
   /@babel/plugin-transform-modules-systemjs/7.20.11_@babel+core@7.22.17:
@@ -4602,8 +4735,8 @@ packages:
       '@babel/core': 7.22.17
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-validator-identifier': 7.22.20
     dev: true
 
   /@babel/plugin-transform-modules-umd/7.18.6_@babel+core@7.21.8:
@@ -4614,7 +4747,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-modules-umd/7.18.6_@babel+core@7.22.17:
@@ -4625,7 +4758,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-module-transforms': 7.22.17_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-named-capturing-groups-regex/7.20.5_@babel+core@7.21.8:
@@ -4636,7 +4769,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-named-capturing-groups-regex/7.20.5_@babel+core@7.22.17:
@@ -4647,7 +4780,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-new-target/7.18.6_@babel+core@7.21.8:
@@ -4657,7 +4790,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-new-target/7.18.6_@babel+core@7.22.17:
@@ -4667,7 +4800,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-object-super/7.18.6_@babel+core@7.21.8:
@@ -4677,10 +4810,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-replace-supers': 7.21.5
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-replace-supers': 7.22.20_@babel+core@7.21.8
     dev: true
 
   /@babel/plugin-transform-object-super/7.18.6_@babel+core@7.22.17:
@@ -4690,10 +4821,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-replace-supers': 7.21.5
-    transitivePeerDependencies:
-      - supports-color
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-replace-supers': 7.22.20_@babel+core@7.22.17
     dev: true
 
   /@babel/plugin-transform-parameters/7.21.3_@babel+core@7.21.8:
@@ -4703,7 +4832,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-parameters/7.21.3_@babel+core@7.22.17:
@@ -4713,7 +4842,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-property-literals/7.18.6_@babel+core@7.21.8:
@@ -4723,7 +4852,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-property-literals/7.18.6_@babel+core@7.22.17:
@@ -4733,7 +4862,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-react-display-name/7.18.6:
@@ -4810,7 +4939,7 @@ packages:
     dependencies:
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-jsx': 7.22.5
       '@babel/types': 7.22.17
     dev: true
@@ -4824,7 +4953,7 @@ packages:
       '@babel/core': 7.22.17
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-module-imports': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-jsx': 7.22.5_@babel+core@7.22.17
       '@babel/types': 7.22.17
 
@@ -4835,7 +4964,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-react-pure-annotations/7.18.6_@babel+core@7.22.17:
@@ -4846,7 +4975,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-regenerator/7.21.5_@babel+core@7.21.8:
@@ -4856,7 +4985,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       regenerator-transform: 0.15.1
     dev: true
 
@@ -4867,7 +4996,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       regenerator-transform: 0.15.1
     dev: true
 
@@ -4878,7 +5007,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-reserved-words/7.18.6_@babel+core@7.22.17:
@@ -4888,7 +5017,24 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
+    dev: true
+
+  /@babel/plugin-transform-runtime/7.24.0_@babel+core@7.22.17:
+    resolution: {integrity: sha512-zc0GA5IitLKJrSfXlXmp8KDqLrnGECK7YRfQBmEKg1NmBOQ7e+KuclBEKJgzifQeUYLdNiAw4B4bjyvzWVLiSA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.0
+      babel-plugin-polyfill-corejs2: 0.4.8_@babel+core@7.22.17
+      babel-plugin-polyfill-corejs3: 0.9.0_@babel+core@7.22.17
+      babel-plugin-polyfill-regenerator: 0.5.5_@babel+core@7.22.17
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@babel/plugin-transform-shorthand-properties/7.18.6_@babel+core@7.21.8:
@@ -4898,7 +5044,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-shorthand-properties/7.18.6_@babel+core@7.22.17:
@@ -4908,7 +5054,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-spread/7.20.7_@babel+core@7.21.8:
@@ -4918,8 +5064,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
     dev: true
 
   /@babel/plugin-transform-spread/7.20.7_@babel+core@7.22.17:
@@ -4929,8 +5075,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
+      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
     dev: true
 
   /@babel/plugin-transform-sticky-regex/7.18.6_@babel+core@7.21.8:
@@ -4940,7 +5086,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-sticky-regex/7.18.6_@babel+core@7.22.17:
@@ -4950,7 +5096,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-template-literals/7.18.9_@babel+core@7.21.8:
@@ -4960,7 +5106,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-template-literals/7.18.9_@babel+core@7.22.17:
@@ -4970,7 +5116,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-typeof-symbol/7.18.9_@babel+core@7.21.8:
@@ -4980,7 +5126,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-typeof-symbol/7.18.9_@babel+core@7.22.17:
@@ -4990,7 +5136,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-typescript/7.21.3_@babel+core@7.22.17:
@@ -5001,11 +5147,9 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.21.8_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.24.0_@babel+core@7.22.17
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-syntax-typescript': 7.21.4_@babel+core@7.22.17
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /@babel/plugin-transform-unicode-escapes/7.21.5_@babel+core@7.21.8:
@@ -5015,7 +5159,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-unicode-escapes/7.21.5_@babel+core@7.22.17:
@@ -5025,7 +5169,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-unicode-regex/7.18.6_@babel+core@7.21.8:
@@ -5036,7 +5180,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/plugin-transform-unicode-regex/7.18.6_@babel+core@7.22.17:
@@ -5047,7 +5191,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-create-regexp-features-plugin': 7.20.5_@babel+core@7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
     dev: true
 
   /@babel/preset-env/7.21.5_@babel+core@7.21.8:
@@ -5059,7 +5203,7 @@ packages:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.21.8
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-validator-option': 7.22.15
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6_@babel+core@7.21.8
       '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.20.7_@babel+core@7.21.8
@@ -5146,7 +5290,7 @@ packages:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.22.17
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-validator-option': 7.22.15
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6_@babel+core@7.22.17
       '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.20.7_@babel+core@7.22.17
@@ -5230,7 +5374,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-validator-option': 7.22.15
       '@babel/plugin-transform-flow-strip-types': 7.19.0
     dev: true
@@ -5242,7 +5386,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-validator-option': 7.22.15
       '@babel/plugin-transform-flow-strip-types': 7.19.0_@babel+core@7.22.17
     dev: true
@@ -5253,10 +5397,10 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.21.8
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.21.8
       '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.21.8
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       esutils: 2.0.3
     dev: true
 
@@ -5266,10 +5410,10 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.22.17
       '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.22.17
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       esutils: 2.0.3
     dev: true
 
@@ -5279,7 +5423,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-validator-option': 7.22.15
       '@babel/plugin-transform-react-display-name': 7.18.6
       '@babel/plugin-transform-react-jsx': 7.22.15
@@ -5294,7 +5438,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.17
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@babel/helper-validator-option': 7.22.15
       '@babel/plugin-transform-react-display-name': 7.18.6_@babel+core@7.22.17
       '@babel/plugin-transform-react-jsx': 7.22.15_@babel+core@7.22.17
@@ -5314,8 +5458,6 @@ packages:
       '@babel/plugin-syntax-jsx': 7.22.5_@babel+core@7.22.17
       '@babel/plugin-transform-modules-commonjs': 7.21.5_@babel+core@7.22.17
       '@babel/plugin-transform-typescript': 7.21.3_@babel+core@7.22.17
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /@babel/register/7.18.9_@babel+core@7.22.17:
@@ -5350,7 +5492,7 @@ packages:
     dependencies:
       '@babel/code-frame': 7.22.13
       '@babel/parser': 7.22.16
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
     dev: true
 
   /@babel/template/7.22.15:
@@ -5367,12 +5509,12 @@ packages:
     dependencies:
       '@babel/code-frame': 7.22.13
       '@babel/generator': 7.22.15
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-function-name': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.22.16
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
@@ -5400,8 +5542,8 @@ packages:
     resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.15
+      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
     dev: true
 
@@ -5409,8 +5551,8 @@ packages:
     resolution: {integrity: sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.15
+      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
     dev: true
 
@@ -5422,6 +5564,14 @@ packages:
       '@babel/helper-validator-identifier': 7.22.15
       to-fast-properties: 2.0.0
 
+  /@babel/types/7.24.0:
+    resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-validator-identifier': 7.22.20
+      to-fast-properties: 2.0.0
+
   /@base2/pretty-print-object/1.0.1:
     resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==}
     dev: true
@@ -7275,6 +7425,13 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@fullhuman/postcss-purgecss/2.3.0:
+    resolution: {integrity: sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==}
+    dependencies:
+      postcss: 7.0.32
+      purgecss: 2.3.0
+    dev: false
+
   /@gar/promisify/1.1.3:
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
     dev: true
@@ -15821,7 +15978,7 @@ packages:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-styling/1.0.6_gjpyg5imi5mt2gbvkmn3a4dr7m:
+  /@storybook/addon-styling/1.0.6_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-OHs6Yj04TjyFQ+1NQrMBxf+5tCEMDWGvkztB1XQf0+hNqNDRsoRvDkeXeS462RHCt3ffSYUi5leUvotmDYno6g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -15840,15 +15997,16 @@ packages:
       '@storybook/preview-api': 7.0.9
       '@storybook/theming': 7.0.9_biqbaboplfbrettd7655fr4n2y
       '@storybook/types': 7.0.9
-      css-loader: 6.7.3
+      css-loader: 6.10.0
       less-loader: 11.1.0
-      postcss-loader: 7.3.0_postcss@8.4.21
+      postcss-loader: 7.3.0
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       resolve-url-loader: 5.0.0
       sass-loader: 13.2.2
-      style-loader: 3.3.2
+      style-loader: 3.3.4
     transitivePeerDependencies:
+      - '@rspack/core'
       - fibers
       - less
       - node-sass
@@ -16055,11 +16213,11 @@ packages:
       '@storybook/theming': 7.0.9_biqbaboplfbrettd7655fr4n2y
       '@types/node': 16.18.11
       '@types/semver': 7.3.13
-      babel-loader: 9.1.2_m7zg4tehf4iagxalhjjv66vmni
+      babel-loader: 9.1.3_m7zg4tehf4iagxalhjjv66vmni
       babel-plugin-named-exports-order: 0.0.2
       browser-assert: 1.2.1
       case-sensitive-paths-webpack-plugin: 2.4.0
-      css-loader: 6.7.3_webpack@5.88.2
+      css-loader: 6.10.0_webpack@5.88.2
       express: 4.18.2
       fork-ts-checker-webpack-plugin: 7.3.0_dtthwp2bsqb7yvb7hoeealjg4i
       fs-extra: 11.1.0
@@ -16069,7 +16227,7 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       semver: 7.5.4
-      style-loader: 3.3.2_webpack@5.88.2
+      style-loader: 3.3.4_webpack@5.88.2
       terser-webpack-plugin: 5.3.7_nww33inhqu3uc3cp573wawoccu
       ts-dedent: 2.2.0
       typescript: 5.2.2
@@ -16080,6 +16238,7 @@ packages:
       webpack-hot-middleware: 2.25.3
       webpack-virtual-modules: 0.4.6
     transitivePeerDependencies:
+      - '@rspack/core'
       - '@swc/core'
       - esbuild
       - supports-color
@@ -16720,6 +16879,7 @@ packages:
       react-dom: 18.2.0_react@18.2.0
       typescript: 5.2.2
     transitivePeerDependencies:
+      - '@rspack/core'
       - '@swc/core'
       - '@types/webpack'
       - esbuild
@@ -16816,7 +16976,7 @@ packages:
       fetch-retry: 5.0.5
       fs-extra: 11.1.0
       isomorphic-unfetch: 3.1.0
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       read-pkg-up: 7.0.1
     transitivePeerDependencies:
       - encoding
@@ -17226,15 +17386,6 @@ packages:
       tailwindcss: 3.4.1_ts-node@10.9.1
     dev: false
 
-  /@tailwindcss/forms/0.5.3_tailwindcss@3.1.8:
-    resolution: {integrity: sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
-    dependencies:
-      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.1.8_postcss@8.4.21
-    dev: true
-
   /@tailwindcss/forms/0.5.3_tailwindcss@3.4.1:
     resolution: {integrity: sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==}
     peerDependencies:
@@ -17244,18 +17395,6 @@ packages:
       tailwindcss: 3.4.1_ts-node@10.9.1
     dev: true
 
-  /@tailwindcss/typography/0.5.9_tailwindcss@3.1.8:
-    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-    dependencies:
-      lodash.castarray: 4.4.0
-      lodash.isplainobject: 4.0.6
-      lodash.merge: 4.6.2
-      postcss-selector-parser: 6.0.10
-      tailwindcss: 3.1.8_postcss@8.4.21
-    dev: true
-
   /@tailwindcss/typography/0.5.9_tailwindcss@3.4.1:
     resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
     peerDependencies:
@@ -17509,7 +17648,7 @@ packages:
     resolution: {integrity: sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==}
     dependencies:
       '@babel/parser': 7.22.16
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.18.5
@@ -17519,7 +17658,7 @@ packages:
     resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
     dependencies:
       '@babel/parser': 7.22.16
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.18.5
@@ -17527,18 +17666,18 @@ packages:
   /@types/babel__generator/7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
 
   /@types/babel__template/7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
       '@babel/parser': 7.22.16
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
 
   /@types/babel__traverse/7.18.5:
     resolution: {integrity: sha512-enCvTL8m/EHS/zIvJno9nE+ndYPh1/oNFzRYRmtUqJICG2VnCSBzMLW5VN2KCQU91f23tsNKR8v7VJJQMatl7Q==}
     dependencies:
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
 
   /@types/bcryptjs/2.4.2:
     resolution: {integrity: sha512-LiMQ6EOPob/4yUL66SZzu6Yh77cbzJFYll+ZfaPiPPFswtIlA/Fs1MzdKYA7JApHU49zQTbJGX3PDmCpIdDBRQ==}
@@ -18945,7 +19084,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0_eslint@8.31.0
-      '@types/json-schema': 7.0.11
+      '@types/json-schema': 7.0.13
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.59.6
       '@typescript-eslint/types': 5.59.6
@@ -18965,7 +19104,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0_eslint@8.45.0
-      '@types/json-schema': 7.0.11
+      '@types/json-schema': 7.0.13
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.59.6
       '@typescript-eslint/types': 5.59.6
@@ -18985,7 +19124,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0_eslint@8.45.0
-      '@types/json-schema': 7.0.11
+      '@types/json-schema': 7.0.13
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.59.6
       '@typescript-eslint/types': 5.59.6
@@ -19005,7 +19144,7 @@ packages:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0_eslint@8.45.0
-      '@types/json-schema': 7.0.11
+      '@types/json-schema': 7.0.13
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.59.6
       '@typescript-eslint/types': 5.59.6
@@ -19460,12 +19599,11 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
+    dev: false
 
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn-walk/8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
@@ -19475,7 +19613,6 @@ packages:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn/8.10.0:
     resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
@@ -20095,7 +20232,7 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: false
 
-  /autoprefixer/10.4.13_postcss@8.4.21:
+  /autoprefixer/10.4.13:
     resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -20107,7 +20244,6 @@ packages:
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.21
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -20127,6 +20263,19 @@ packages:
       postcss-value-parser: 4.2.0
     dev: false
 
+  /autoprefixer/9.8.8:
+    resolution: {integrity: sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==}
+    hasBin: true
+    dependencies:
+      browserslist: 4.23.0
+      caniuse-lite: 1.0.30001577
+      normalize-range: 0.1.2
+      num2fraction: 1.2.2
+      picocolors: 0.2.1
+      postcss: 7.0.39
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /available-typed-arrays/1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
@@ -20240,15 +20389,26 @@ packages:
       - supports-color
     dev: true
 
-  /babel-loader/9.1.2_m7zg4tehf4iagxalhjjv66vmni:
-    resolution: {integrity: sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==}
+  /babel-loader/9.1.3:
+    resolution: {integrity: sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+      webpack: '>=5'
+    dependencies:
+      find-cache-dir: 4.0.0
+      schema-utils: 4.0.1
+    dev: true
+
+  /babel-loader/9.1.3_m7zg4tehf4iagxalhjjv66vmni:
+    resolution: {integrity: sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
       webpack: '>=5'
     dependencies:
       '@babel/core': 7.22.17
-      find-cache-dir: 3.3.2
+      find-cache-dir: 4.0.0
       schema-utils: 4.0.1
       webpack: 5.88.2_uhpfu7q6noim4yjdo6qt2aajgu
     dev: true
@@ -20261,7 +20421,7 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.1
@@ -20275,11 +20435,20 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       '@types/babel__core': 7.20.1
       '@types/babel__traverse': 7.18.5
     dev: true
 
+  /babel-plugin-macros/3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.22.5
+      cosmiconfig: 7.1.0
+      resolve: 1.22.4
+    dev: true
+
   /babel-plugin-named-exports-order/0.0.2:
     resolution: {integrity: sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==}
     dev: true
@@ -20310,6 +20479,19 @@ packages:
       - supports-color
     dev: true
 
+  /babel-plugin-polyfill-corejs2/0.4.8_@babel+core@7.22.17:
+    resolution: {integrity: sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+    dependencies:
+      '@babel/compat-data': 7.22.9
+      '@babel/core': 7.22.17
+      '@babel/helper-define-polyfill-provider': 0.5.0_@babel+core@7.22.17
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-plugin-polyfill-corejs3/0.6.0_@babel+core@7.21.8:
     resolution: {integrity: sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==}
     peerDependencies:
@@ -20317,7 +20499,7 @@ packages:
     dependencies:
       '@babel/core': 7.21.8
       '@babel/helper-define-polyfill-provider': 0.3.3_@babel+core@7.21.8
-      core-js-compat: 3.27.1
+      core-js-compat: 3.36.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -20329,7 +20511,19 @@ packages:
     dependencies:
       '@babel/core': 7.22.17
       '@babel/helper-define-polyfill-provider': 0.3.3_@babel+core@7.22.17
-      core-js-compat: 3.27.1
+      core-js-compat: 3.36.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /babel-plugin-polyfill-corejs3/0.9.0_@babel+core@7.22.17:
+    resolution: {integrity: sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-define-polyfill-provider': 0.5.0_@babel+core@7.22.17
+      core-js-compat: 3.36.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -20356,6 +20550,17 @@ packages:
       - supports-color
     dev: true
 
+  /babel-plugin-polyfill-regenerator/0.5.5_@babel+core@7.22.17:
+    resolution: {integrity: sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/helper-define-polyfill-provider': 0.5.0_@babel+core@7.22.17
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /babel-plugin-react-docgen/4.2.1:
     resolution: {integrity: sha512-UQ0NmGHj/HAqi5Bew8WvNfCk8wSsmdgNd8ZdMjBCICtyCJCq9LiqgqvjCYe570/Wg7AQArSq1VQ60Dd/CHN7mQ==}
     dependencies:
@@ -20366,6 +20571,10 @@ packages:
       - supports-color
     dev: true
 
+  /babel-plugin-transform-react-remove-prop-types/0.4.24:
+    resolution: {integrity: sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==}
+    dev: true
+
   /babel-preset-current-node-syntax/1.0.1_@babel+core@7.22.17:
     resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
     peerDependencies:
@@ -20397,6 +20606,30 @@ packages:
       babel-preset-current-node-syntax: 1.0.1_@babel+core@7.22.17
     dev: true
 
+  /babel-preset-react-app/10.0.1:
+    resolution: {integrity: sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==}
+    dependencies:
+      '@babel/core': 7.22.17
+      '@babel/plugin-proposal-class-properties': 7.18.6_@babel+core@7.22.17
+      '@babel/plugin-proposal-decorators': 7.24.0_@babel+core@7.22.17
+      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6_@babel+core@7.22.17
+      '@babel/plugin-proposal-numeric-separator': 7.18.6_@babel+core@7.22.17
+      '@babel/plugin-proposal-optional-chaining': 7.21.0_@babel+core@7.22.17
+      '@babel/plugin-proposal-private-methods': 7.18.6_@babel+core@7.22.17
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0_@babel+core@7.22.17
+      '@babel/plugin-transform-flow-strip-types': 7.19.0_@babel+core@7.22.17
+      '@babel/plugin-transform-react-display-name': 7.18.6_@babel+core@7.22.17
+      '@babel/plugin-transform-runtime': 7.24.0_@babel+core@7.22.17
+      '@babel/preset-env': 7.21.5_@babel+core@7.22.17
+      '@babel/preset-react': 7.18.6_@babel+core@7.22.17
+      '@babel/preset-typescript': 7.21.5_@babel+core@7.22.17
+      '@babel/runtime': 7.22.5
+      babel-plugin-macros: 3.1.0
+      babel-plugin-transform-react-remove-prop-types: 0.4.24
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /bail/2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
 
@@ -20678,7 +20911,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001532
+      caniuse-lite: 1.0.30001577
       electron-to-chromium: 1.4.513
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11_browserslist@4.21.10
@@ -20694,6 +20927,16 @@ packages:
       update-browserslist-db: 1.0.11_browserslist@4.21.4
     dev: true
 
+  /browserslist/4.23.0:
+    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001593
+      electron-to-chromium: 1.4.690
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13_browserslist@4.23.0
+
   /bs-logger/0.2.6:
     resolution: {integrity: sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==}
     engines: {node: '>= 6'}
@@ -21014,7 +21257,9 @@ packages:
 
   /caniuse-lite/1.0.30001577:
     resolution: {integrity: sha512-rs2ZygrG1PNXMfmncM0B5H1hndY5ZCC9b5TkFaVNfZ+AUlyqcMyVIQtc3fsezi0NUCk5XZfDf9WS6WxMxnfdrg==}
-    dev: true
+
+  /caniuse-lite/1.0.30001593:
+    resolution: {integrity: sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==}
 
   /capnp-ts/0.7.0:
     resolution: {integrity: sha512-XKxXAC3HVPv7r674zP0VC3RTXz+/JKhfyw94ljvF80yynK6VkTnqE3jMuN8b3dUVmmc43TjyxjW4KTsmB3c86g==}
@@ -21394,12 +21639,18 @@ packages:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
-    optional: true
 
   /color-support/1.1.3:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
     hasBin: true
 
+  /color/3.2.1:
+    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
+    dependencies:
+      color-convert: 1.9.3
+      color-string: 1.9.1
+    dev: false
+
   /color/4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -21632,7 +21883,13 @@ packages:
   /core-js-compat/3.27.1:
     resolution: {integrity: sha512-Dg91JFeCDA17FKnneN7oCMz4BkQ4TcffkgHP4OWwp9yx3pi7ubqMDXXSacfNak1PQqjc95skyt+YBLHQJnkJwA==}
     dependencies:
-      browserslist: 4.21.10
+      browserslist: 4.23.0
+    dev: true
+
+  /core-js-compat/3.36.0:
+    resolution: {integrity: sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==}
+    dependencies:
+      browserslist: 4.23.0
     dev: true
 
   /core-js-pure/3.30.2:
@@ -21674,6 +21931,22 @@ packages:
       path-type: 4.0.0
     dev: true
 
+  /cosmiconfig/9.0.0_typescript@5.2.2:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+      typescript: 5.2.2
+    dev: true
+
   /cp-file/10.0.0:
     resolution: {integrity: sha512-vy2Vi1r2epK5WqxOLnskeKeZkdZvTKfFZQCplE3XWsP+SUJyd5XAUFC9lFgTjjXJF2GMne/UML14iEmkAaDfFg==}
     engines: {node: '>=14.16'}
@@ -21819,34 +22092,46 @@ packages:
       hyphenate-style-name: 1.0.4
     dev: false
 
-  /css-loader/6.7.3:
-    resolution: {integrity: sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==}
+  /css-loader/6.10.0:
+    resolution: {integrity: sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
+      '@rspack/core': 0.x || 1.x
       webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
     dependencies:
-      icss-utils: 5.1.0_postcss@8.4.29
-      postcss: 8.4.29
-      postcss-modules-extract-imports: 3.0.0_postcss@8.4.29
-      postcss-modules-local-by-default: 4.0.0_postcss@8.4.29
-      postcss-modules-scope: 3.0.0_postcss@8.4.29
-      postcss-modules-values: 4.0.0_postcss@8.4.29
+      icss-utils: 5.1.0_postcss@8.4.35
+      postcss: 8.4.35
+      postcss-modules-extract-imports: 3.0.0_postcss@8.4.35
+      postcss-modules-local-by-default: 4.0.4_postcss@8.4.35
+      postcss-modules-scope: 3.1.1_postcss@8.4.35
+      postcss-modules-values: 4.0.0_postcss@8.4.35
       postcss-value-parser: 4.2.0
       semver: 7.5.4
     dev: true
 
-  /css-loader/6.7.3_webpack@5.88.2:
-    resolution: {integrity: sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==}
+  /css-loader/6.10.0_webpack@5.88.2:
+    resolution: {integrity: sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
+      '@rspack/core': 0.x || 1.x
       webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
     dependencies:
-      icss-utils: 5.1.0_postcss@8.4.29
-      postcss: 8.4.29
-      postcss-modules-extract-imports: 3.0.0_postcss@8.4.29
-      postcss-modules-local-by-default: 4.0.0_postcss@8.4.29
-      postcss-modules-scope: 3.0.0_postcss@8.4.29
-      postcss-modules-values: 4.0.0_postcss@8.4.29
+      icss-utils: 5.1.0_postcss@8.4.35
+      postcss: 8.4.35
+      postcss-modules-extract-imports: 3.0.0_postcss@8.4.35
+      postcss-modules-local-by-default: 4.0.4_postcss@8.4.35
+      postcss-modules-scope: 3.1.1_postcss@8.4.35
+      postcss-modules-values: 4.0.0_postcss@8.4.35
       postcss-value-parser: 4.2.0
       semver: 7.5.4
       webpack: 5.88.2_uhpfu7q6noim4yjdo6qt2aajgu
@@ -22311,7 +22596,7 @@ packages:
 
   /defined/1.0.1:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
-    dev: true
+    dev: false
 
   /defu/6.1.2:
     resolution: {integrity: sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==}
@@ -22425,7 +22710,7 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.1
       minimist: 1.2.7
-    dev: true
+    dev: false
 
   /devalue/4.3.2:
     resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
@@ -22672,6 +22957,9 @@ packages:
   /electron-to-chromium/1.4.513:
     resolution: {integrity: sha512-cOB0xcInjm+E5qIssHeXJ29BaUyWpMyFKT5RB3bsLENDheCja0wMkHJyiPl0NBE/VzDI7JDuNEQWhe6RitEUcw==}
 
+  /electron-to-chromium/1.4.690:
+    resolution: {integrity: sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA==}
+
   /emittery/0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -22799,7 +23087,6 @@ packages:
   /env-paths/2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
-    dev: false
 
   /envinfo/7.8.1:
     resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==}
@@ -24514,7 +24801,7 @@ packages:
     engines: {node: '>=8.3.0'}
     dependencies:
       '@babel/traverse': 7.22.17
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       c8: 7.12.0
     transitivePeerDependencies:
       - supports-color
@@ -24917,17 +25204,6 @@ packages:
       micromatch: 4.0.5
     dev: true
 
-  /fast-glob/3.2.12:
-    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: true
-
   /fast-glob/3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -25152,6 +25428,14 @@ packages:
       pkg-dir: 4.2.0
     dev: true
 
+  /find-cache-dir/4.0.0:
+    resolution: {integrity: sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      common-path-prefix: 3.0.0
+      pkg-dir: 7.0.0
+    dev: true
+
   /find-my-way/7.6.2:
     resolution: {integrity: sha512-0OjHn1b1nCX3eVbm9ByeEHiscPYiHLfhei1wOUU9qffQkk98wE0Lo8VrVYfSGMgnSnDh86DxedduAnBf4nwUEw==}
     engines: {node: '>=14'}
@@ -25182,6 +25466,14 @@ packages:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
+  /find-up/6.3.0:
+    resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+    dev: true
+
   /find-up/7.0.0:
     resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
     engines: {node: '>=18'}
@@ -25322,7 +25614,7 @@ packages:
       memfs: 3.5.3
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
-      schema-utils: 3.1.2
+      schema-utils: 3.3.0
       semver: 7.5.4
       tapable: 2.2.1
       typescript: 5.2.2
@@ -26415,7 +26707,6 @@ packages:
   /html-tags/3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /html-to-text/9.0.3:
     resolution: {integrity: sha512-hxDF1kVCF2uw4VUJ3vr2doc91pXf2D5ngKcNviSitNkhP9OMOaJkDrFIFL6RMvko7NisWTEiqGpQ9LAxcVok1w==}
@@ -26661,6 +26952,15 @@ packages:
       postcss: 8.4.29
     dev: true
 
+  /icss-utils/5.1.0_postcss@8.4.35:
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.35
+    dev: true
+
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -27027,7 +27327,6 @@ packages:
 
   /is-arrayish/0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-    optional: true
 
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
@@ -28031,7 +28330,7 @@ packages:
       '@babel/generator': 7.22.15
       '@babel/plugin-syntax-jsx': 7.22.5_@babel+core@7.22.17
       '@babel/plugin-syntax-typescript': 7.21.4_@babel+core@7.22.17
-      '@babel/types': 7.22.17
+      '@babel/types': 7.24.0
       '@jest/expect-utils': 29.6.2
       '@jest/transform': 29.6.2
       '@jest/types': 29.6.1
@@ -28153,6 +28452,7 @@ packages:
   /jiti/1.18.2:
     resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
     hasBin: true
+    dev: false
 
   /jiti/1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
@@ -28557,11 +28857,6 @@ packages:
       set-cookie-parser: 2.6.0
     dev: true
 
-  /lilconfig/2.0.6:
-    resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
-    engines: {node: '>=10'}
-    dev: true
-
   /lilconfig/2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -28695,7 +28990,6 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       p-locate: 6.0.0
-    dev: false
 
   /lodash.camelcase/4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
@@ -30208,12 +30502,18 @@ packages:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
+    dev: false
 
   /nanoid/3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /nanoid/3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   /nanoid/4.0.2:
     resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -30462,7 +30762,6 @@ packages:
     resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==}
     dependencies:
       lodash: 4.17.21
-    dev: true
 
   /node-fetch-native/1.0.1:
     resolution: {integrity: sha512-VzW+TAk2wE4X9maiKMlT+GsPU4OMmR1U9CrHSmd3DFLn2IcZ9VJ6M6BBugGfYUnPCLSYxXdZy17M0BEJyhUTwg==}
@@ -30573,6 +30872,9 @@ packages:
   /node-releases/2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
 
+  /node-releases/2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+
   /nodemon/2.0.22:
     resolution: {integrity: sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==}
     engines: {node: '>=8.10.0'}
@@ -30607,6 +30909,10 @@ packages:
       undefsafe: 2.0.5
     dev: true
 
+  /non.geist/1.0.2:
+    resolution: {integrity: sha512-oGCfo7Ub5bJmCOAt4CMAsCrVal/JXkQtxgBcpXzdU3lQib9c5hHdr62I8vI6TtdlsLcaYAPD/HRfZNdBUobwFg==}
+    dev: false
+
   /nopt/1.0.10:
     resolution: {integrity: sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==}
     hasBin: true
@@ -30661,6 +30967,10 @@ packages:
     engines: {node: '>=14.16'}
     dev: false
 
+  /normalize.css/8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+    dev: false
+
   /npm-bundled/3.0.0:
     resolution: {integrity: sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -30875,6 +31185,10 @@ packages:
       boolbase: 1.0.0
     dev: true
 
+  /num2fraction/1.2.2:
+    resolution: {integrity: sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==}
+    dev: false
+
   /oauth-sign/0.9.0:
     resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
     dev: false
@@ -30896,7 +31210,6 @@ packages:
     resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
     engines: {node: '>= 6'}
     dev: false
-    optional: true
 
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
@@ -31383,7 +31696,6 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       p-limit: 4.0.0
-    dev: false
 
   /p-map/2.1.0:
     resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
@@ -31704,7 +32016,6 @@ packages:
   /path-exists/5.0.0:
     resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: false
 
   /path-is-absolute/1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
@@ -31848,6 +32159,10 @@ packages:
       split2: 4.2.0
     dev: false
 
+  /picocolors/0.2.1:
+    resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
+    dev: false
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -31930,6 +32245,13 @@ packages:
       find-up: 5.0.0
     dev: true
 
+  /pkg-dir/7.0.0:
+    resolution: {integrity: sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      find-up: 6.3.0
+    dev: true
+
   /pkg-types/1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
@@ -31969,16 +32291,14 @@ packages:
       postcss: 8.4.29
     dev: true
 
-  /postcss-import/14.1.0_postcss@8.4.21:
-    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
+  /postcss-functions/3.0.0:
+    resolution: {integrity: sha512-N5yWXWKA+uhpLQ9ZhBRl2bIAdM6oVJYpDojuI1nF2SzXBimJcdjFwiAouBVbO5VuOF3qA6BSFWFc3wXbbj72XQ==}
     dependencies:
-      postcss: 8.4.21
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.1
+      glob: 7.2.3
+      object-assign: 4.1.1
+      postcss: 6.0.23
+      postcss-value-parser: 3.3.1
+    dev: false
 
   /postcss-import/15.1.0_postcss@8.4.29:
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
@@ -32003,15 +32323,23 @@ packages:
       read-cache: 1.0.0
       resolve: 1.22.4
 
-  /postcss-js/4.0.0_postcss@8.4.21:
-    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
-    engines: {node: ^12 || ^14 || >= 16}
+  /postcss-import/16.0.1:
+    resolution: {integrity: sha512-i2Pci0310NaLHr/5JUFSw1j/8hf1CzwMY13g6ZDxgOavmRHQi2ba3PmUHoihO+sjaum+KmCNzskNsw7JDrg03g==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      postcss: ^8.3.3
+      postcss: ^8.0.0
+    dependencies:
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.4
+    dev: true
+
+  /postcss-js/2.0.3:
+    resolution: {integrity: sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==}
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.21
-    dev: true
+      postcss: 7.0.39
+    dev: false
 
   /postcss-js/4.0.1_postcss@8.4.29:
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -32048,23 +32376,6 @@ packages:
       yaml: 1.10.2
     dev: true
 
-  /postcss-load-config/3.1.4_postcss@8.4.21:
-    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      postcss: 8.4.21
-      yaml: 1.10.2
-    dev: true
-
   /postcss-load-config/3.1.4_postcss@8.4.29:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -32148,7 +32459,7 @@ packages:
       postcss: 8.4.29
       yaml: 2.3.1
 
-  /postcss-loader/7.3.0_postcss@8.4.21:
+  /postcss-loader/7.3.0:
     resolution: {integrity: sha512-qLAFjvR2BFNz1H930P7mj1iuWJFjGey/nVhimfOAAQ1ZyPpcClAxP8+A55Sl8mBvM+K2a9Pjgdj10KpANWrNfw==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
@@ -32156,12 +32467,31 @@ packages:
       webpack: ^5.0.0
     dependencies:
       cosmiconfig: 8.1.3
-      jiti: 1.18.2
+      jiti: 1.21.0
       klona: 2.0.6
-      postcss: 8.4.21
       semver: 7.5.4
     dev: true
 
+  /postcss-loader/8.1.1_typescript@5.2.2:
+    resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      postcss: ^7.0.0 || ^8.0.1
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      cosmiconfig: 9.0.0_typescript@5.2.2
+      jiti: 1.21.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
   /postcss-modules-extract-imports/3.0.0_postcss@8.4.29:
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -32171,8 +32501,17 @@ packages:
       postcss: 8.4.29
     dev: true
 
-  /postcss-modules-local-by-default/4.0.0_postcss@8.4.29:
-    resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
+  /postcss-modules-extract-imports/3.0.0_postcss@8.4.35:
+    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.35
+    dev: true
+
+  /postcss-modules-local-by-default/4.0.4_postcss@8.4.29:
+    resolution: {integrity: sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
@@ -32183,8 +32522,20 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-scope/3.0.0_postcss@8.4.29:
-    resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
+  /postcss-modules-local-by-default/4.0.4_postcss@8.4.35:
+    resolution: {integrity: sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.35
+      postcss: 8.4.35
+      postcss-selector-parser: 6.0.11
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-modules-scope/3.1.1_postcss@8.4.29:
+    resolution: {integrity: sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
@@ -32193,6 +32544,16 @@ packages:
       postcss-selector-parser: 6.0.11
     dev: true
 
+  /postcss-modules-scope/3.1.1_postcss@8.4.35:
+    resolution: {integrity: sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.35
+      postcss-selector-parser: 6.0.11
+    dev: true
+
   /postcss-modules-values/4.0.0_postcss@8.4.29:
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -32203,6 +32564,16 @@ packages:
       postcss: 8.4.29
     dev: true
 
+  /postcss-modules-values/4.0.0_postcss@8.4.35:
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      icss-utils: 5.1.0_postcss@8.4.35
+      postcss: 8.4.35
+    dev: true
+
   /postcss-modules/6.0.0_postcss@8.4.29:
     resolution: {integrity: sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==}
     peerDependencies:
@@ -32213,21 +32584,18 @@ packages:
       lodash.camelcase: 4.3.0
       postcss: 8.4.29
       postcss-modules-extract-imports: 3.0.0_postcss@8.4.29
-      postcss-modules-local-by-default: 4.0.0_postcss@8.4.29
-      postcss-modules-scope: 3.0.0_postcss@8.4.29
+      postcss-modules-local-by-default: 4.0.4_postcss@8.4.29
+      postcss-modules-scope: 3.1.1_postcss@8.4.29
       postcss-modules-values: 4.0.0_postcss@8.4.29
       string-hash: 1.1.3
     dev: true
 
-  /postcss-nested/5.0.6_postcss@8.4.21:
-    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
+  /postcss-nested/4.2.3:
+    resolution: {integrity: sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==}
     dependencies:
-      postcss: 8.4.21
+      postcss: 7.0.39
       postcss-selector-parser: 6.0.11
-    dev: true
+    dev: false
 
   /postcss-nested/6.0.1_postcss@8.4.29:
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
@@ -32257,13 +32625,13 @@ packages:
       postcss: 8.4.29
     dev: true
 
-  /postcss-scss/4.0.9_postcss@8.4.31:
+  /postcss-scss/4.0.9_postcss@8.4.35:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.29
     dependencies:
-      postcss: 8.4.31
+      postcss: 8.4.35
     dev: true
 
   /postcss-selector-parser/6.0.10:
@@ -32288,23 +32656,41 @@ packages:
   /postcss-value-parser/4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
+  /postcss/6.0.23:
+    resolution: {integrity: sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      chalk: 2.4.2
+      source-map: 0.6.1
+      supports-color: 5.5.0
+    dev: false
+
+  /postcss/7.0.32:
+    resolution: {integrity: sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      chalk: 2.4.2
+      source-map: 0.6.1
+      supports-color: 6.1.0
+    dev: false
+
+  /postcss/7.0.39:
+    resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      picocolors: 0.2.1
+      source-map: 0.6.1
+    dev: false
+
   /postcss/8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
     dev: false
 
-  /postcss/8.4.21:
-    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.4
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-
   /postcss/8.4.27:
     resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -32326,10 +32712,19 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss/8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /postgres-array/2.0.0:
     resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
     engines: {node: '>=4'}
@@ -32545,7 +32940,6 @@ packages:
   /pretty-hrtime/1.0.3:
     resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
     engines: {node: '>= 0.8'}
-    dev: true
 
   /pretty-ms/7.0.1:
     resolution: {integrity: sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==}
@@ -32794,6 +33188,16 @@ packages:
     resolution: {integrity: sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==}
     dev: true
 
+  /purgecss/2.3.0:
+    resolution: {integrity: sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==}
+    hasBin: true
+    dependencies:
+      commander: 5.1.0
+      glob: 7.2.3
+      postcss: 7.0.32
+      postcss-selector-parser: 6.0.11
+    dev: false
+
   /pvtsutils/1.3.5:
     resolution: {integrity: sha512-ARvb14YB9Nm2Xi6nBq1ZX6dAM0FsJnuk+31aUp4TrcZEdKUlSqOqsxJHUPJDNE3qiIp+iUPEIeR6Je/tgV7zsA==}
     dependencies:
@@ -34034,7 +34438,7 @@ packages:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.9.0
       loader-utils: 2.0.4
-      postcss: 8.4.29
+      postcss: 8.4.35
       source-map: 0.6.1
     dev: true
 
@@ -34055,6 +34459,7 @@ packages:
       is-core-module: 2.13.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
+    dev: true
 
   /resolve/1.22.2:
     resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
@@ -34401,15 +34806,6 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
-  /schema-utils/3.1.2:
-    resolution: {integrity: sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==}
-    engines: {node: '>= 10.13.0'}
-    dependencies:
-      '@types/json-schema': 7.0.13
-      ajv: 6.12.6
-      ajv-keywords: 3.5.2_ajv@6.12.6
-    dev: true
-
   /schema-utils/3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
@@ -34770,7 +35166,6 @@ packages:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:
       is-arrayish: 0.3.2
-    optional: true
 
   /simple-update-notifier/1.1.0:
     resolution: {integrity: sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==}
@@ -35574,15 +35969,15 @@ packages:
     resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==}
     dev: false
 
-  /style-loader/3.3.2:
-    resolution: {integrity: sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==}
+  /style-loader/3.3.4:
+    resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
       webpack: ^5.0.0
     dev: true
 
-  /style-loader/3.3.2_webpack@5.88.2:
-    resolution: {integrity: sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==}
+  /style-loader/3.3.4_webpack@5.88.2:
+    resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
     engines: {node: '>= 12.13.0'}
     peerDependencies:
       webpack: ^5.0.0
@@ -35674,6 +36069,13 @@ packages:
     dependencies:
       has-flag: 3.0.0
 
+  /supports-color/6.1.0:
+    resolution: {integrity: sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: false
+
   /supports-color/7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -35742,8 +36144,8 @@ packages:
       eslint-scope: 7.2.0
       eslint-visitor-keys: 3.4.2
       espree: 9.6.0
-      postcss: 8.4.31
-      postcss-scss: 4.0.9_postcss@8.4.31
+      postcss: 8.4.35
+      postcss-scss: 4.0.9_postcss@8.4.35
       svelte: 4.2.1
     dev: true
 
@@ -35870,38 +36272,40 @@ packages:
       tailwindcss: 3.4.1_ts-node@10.9.1
     dev: false
 
-  /tailwindcss/3.1.8_postcss@8.4.21:
-    resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.0.9
+  /tailwindcss-textshadow/2.1.3:
+    resolution: {integrity: sha512-FGVHfK+xnV879VSQDeRvY61Aa+b0GDiGaFBPwCOKvqIrK57GyepWJL1GydjtGOLHE9qqphFucRNj9fHramCzNg==}
     dependencies:
-      arg: 5.0.2
-      chokidar: 3.5.3
-      color-name: 1.1.4
+      tailwindcss: 1.9.6
+    dev: false
+
+  /tailwindcss/1.9.6:
+    resolution: {integrity: sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ==}
+    engines: {node: '>=8.9.0'}
+    hasBin: true
+    dependencies:
+      '@fullhuman/postcss-purgecss': 2.3.0
+      autoprefixer: 9.8.8
+      browserslist: 4.21.10
+      bytes: 3.1.2
+      chalk: 4.1.2
+      color: 3.2.1
       detective: 5.2.1
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.2.12
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      lilconfig: 2.0.6
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.21
-      postcss-import: 14.1.0_postcss@8.4.21
-      postcss-js: 4.0.0_postcss@8.4.21
-      postcss-load-config: 3.1.4_postcss@8.4.21
-      postcss-nested: 5.0.6_postcss@8.4.21
+      fs-extra: 8.1.0
+      html-tags: 3.3.1
+      lodash: 4.17.21
+      node-emoji: 1.11.0
+      normalize.css: 8.0.1
+      object-hash: 2.2.0
+      postcss: 7.0.39
+      postcss-functions: 3.0.0
+      postcss-js: 2.0.3
+      postcss-nested: 4.2.3
       postcss-selector-parser: 6.0.11
       postcss-value-parser: 4.2.0
-      quick-lru: 5.1.1
-      resolve: 1.22.1
-    transitivePeerDependencies:
-      - ts-node
-    dev: true
+      pretty-hrtime: 1.0.3
+      reduce-css-calc: 2.1.8
+      resolve: 1.22.4
+    dev: false
 
   /tailwindcss/3.3.3:
     resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
@@ -37607,6 +38011,16 @@ packages:
       picocolors: 1.0.0
     dev: true
 
+  /update-browserslist-db/1.0.13_browserslist@4.23.0:
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.23.0
+      escalade: 3.1.1
+      picocolors: 1.0.0
+
   /update-check/1.5.4:
     resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
     dependencies:
@@ -38522,7 +38936,7 @@ packages:
       '@webassemblyjs/wasm-parser': 1.11.5
       acorn: 8.10.0
       acorn-import-assertions: 1.9.0_acorn@8.10.0
-      browserslist: 4.21.10
+      browserslist: 4.23.0
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.15.0
       es-module-lexer: 1.3.1
@@ -38562,7 +38976,7 @@ packages:
       '@webassemblyjs/wasm-parser': 1.11.5
       acorn: 8.10.0
       acorn-import-assertions: 1.9.0_acorn@8.10.0
-      browserslist: 4.21.10
+      browserslist: 4.23.0
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.15.0
       es-module-lexer: 1.3.1
diff --git a/references/package-tester/app/components/ReactHooks.tsx b/references/package-tester/app/components/ReactHooks.tsx
index 32e1848d7..81e067684 100644
--- a/references/package-tester/app/components/ReactHooks.tsx
+++ b/references/package-tester/app/components/ReactHooks.tsx
@@ -61,11 +61,11 @@ export function ReactHooks({ eventId }: { eventId: string }) {
         {data?.output && data.status === "SUCCESS" && (
           <div className="flex flex-col gap-0.5">
             <h4 className="text-base font-semibold">Output</h4>
-            <p className="text-slate-400 text-sm mb-4">{data.output.summary}</p>
+            <p className="text-charcoal-400 text-sm mb-4">{data.output.summary}</p>
           </div>
         )}
         {(data?.status === "SUCCESS" || data?.status === "FAILURE") && (
-          <Link className="border border-slate-500 p-2 text-center" href={"/"}>
+          <Link className="border border-charcoal-500 p-2 text-center" href={"/"}>
             Back to home
           </Link>
         )}
diff --git a/references/package-tester/app/components/SendReactHookEventForm.tsx b/references/package-tester/app/components/SendReactHookEventForm.tsx
index 1c2b23197..4dcbc7e7e 100644
--- a/references/package-tester/app/components/SendReactHookEventForm.tsx
+++ b/references/package-tester/app/components/SendReactHookEventForm.tsx
@@ -5,7 +5,7 @@ import { sendReactHookEvent } from "../_actions";
 export default function SendReactHookEventForm() {
   return (
     <form action={sendReactHookEvent}>
-      <button className="border border-slate-600 rounded-sm p-2">Send react-hook event</button>
+      <button className="border border-charcoal-600 rounded-sm p-2">Send react-hook event</button>
     </form>
   );
 }
diff --git a/references/package-tester/app/events/[eventId]/page.tsx b/references/package-tester/app/events/[eventId]/page.tsx
index 72134246d..6f4a1b5e0 100644
--- a/references/package-tester/app/events/[eventId]/page.tsx
+++ b/references/package-tester/app/events/[eventId]/page.tsx
@@ -2,9 +2,9 @@ import { ReactHooks } from "@/app/components/ReactHooks";
 
 export default function Page({ params: { eventId } }: { params: { eventId: string } }) {
   return (
-    <main className="h-screen w-full bg-slate-900">
+    <main className="h-screen w-full bg-charcoal-900">
       <div className="flex flex-col gap-y-6 mx-auto items-center pt-40">
-        <div className="bg-slate-800 p-10 max-w-2xl items-center rounded-md border border-slate-700 flex flex-col gap-10 w-full">
+        <div className="bg-charcoal-800 p-10 max-w-2xl items-center rounded-md border border-charcoal-700 flex flex-col gap-10 w-full">
           <ReactHooks eventId={eventId} />
         </div>
       </div>
diff --git a/references/package-tester/package.json b/references/package-tester/package.json
index 1be83dcda..51f1f68c1 100644
--- a/references/package-tester/package.json
+++ b/references/package-tester/package.json
@@ -43,4 +43,4 @@
   "trigger.dev": {
     "endpointId": "package-tester"
   }
-}
\ No newline at end of file
+}