From 888837431c729d1767bca778ad32dcaaed08a585 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 22 Oct 2025 16:56:36 +0100
Subject: [PATCH] feat: UX/UI full overhaul to meet new design system

---
 frontend/src/lib/assets/app.css               |  17 +-
 frontend/src/lib/assets/tokens/README.md      |   1 +
 .../lib/assets/tokens/colorTokensConfig.ts    |   2 +
 frontend/src/lib/assets/tokens/tokens.json    | 403 +++++++++++
 .../lib/components/AIProviderPicker.svelte    |  53 +-
 frontend/src/lib/components/AddUser.svelte    |   5 +-
 .../src/lib/components/ApiConnectForm.svelte  |  13 +-
 .../lib/components/AppConnectDrawer.svelte    |   6 +-
 .../src/lib/components/AppConnectInner.svelte | 329 +++++----
 ...AppConnectLightweightResourcePicker.svelte |   2 +-
 frontend/src/lib/components/ArgInfo.svelte    |  16 +-
 frontend/src/lib/components/ArgInput.svelte   | 104 ++-
 .../lib/components/ArrayTypeNarrowing.svelte  |   6 +-
 .../src/lib/components/AssignableTags.svelte  |   6 +-
 .../lib/components/AssignableTagsInner.svelte |  19 +-
 .../src/lib/components/Auth0Setting.svelte    |   2 +-
 .../src/lib/components/AuthSettings.svelte    |  34 +-
 .../components/AutoscalingConfigEditor.svelte |  43 +-
 .../lib/components/AutoscalingEvents.svelte   |  14 +-
 frontend/src/lib/components/Awareness.svelte  |  27 +-
 .../src/lib/components/CenteredModal.svelte   |   8 +-
 .../ChangeInstanceUsernameInner.svelte        |   9 +-
 frontend/src/lib/components/CliHelpBox.svelte |  30 +-
 .../src/lib/components/CollapseLink.svelte    |   3 +-
 .../lib/components/ConnectionSection.svelte   |  10 +-
 .../lib/components/ContentSearchInner.svelte  |   8 +-
 .../ContextualVariableEditor.svelte           |  23 +-
 .../src/lib/components/CronBuilder.svelte     |  19 +-
 frontend/src/lib/components/CronInput.svelte  | 333 +++++----
 frontend/src/lib/components/CustomSso.svelte  |  14 +-
 frontend/src/lib/components/DBManager.svelte  |   7 +-
 .../src/lib/components/DateTimeInput.svelte   |  30 +-
 .../src/lib/components/DefaultScripts.svelte  |   9 +-
 .../lib/components/DefaultScriptsInner.svelte |   3 +-
 .../src/lib/components/DefaultTags.svelte     |   2 +-
 .../lib/components/DefaultTagsInner.svelte    |   7 +-
 .../src/lib/components/DeployButton.svelte    |   6 +-
 .../src/lib/components/DeployToSetting.svelte |  15 +-
 .../src/lib/components/Description.svelte     |   2 +-
 frontend/src/lib/components/Dev.svelte        |   4 +-
 frontend/src/lib/components/DiffDrawer.svelte |  47 +-
 .../src/lib/components/DisplayResult.svelte   |  81 +--
 .../components/DisplayResultControlBar.svelte |   2 +-
 frontend/src/lib/components/DraftBadge.svelte |   4 +-
 frontend/src/lib/components/DropdownV2.svelte |  20 +-
 .../src/lib/components/DropdownV2Inner.svelte |   8 +-
 .../src/lib/components/DynamicInput.svelte    |   2 +-
 .../lib/components/EditableSchemaForm.svelte  |  21 +-
 frontend/src/lib/components/Editor.svelte     |   5 +-
 frontend/src/lib/components/EditorBar.svelte  | 122 ++--
 .../src/lib/components/EditorSettings.svelte  |   8 +-
 .../components/ErrorOrRecoveryHandler.svelte  |  51 +-
 .../lib/components/ExploreAssetButton.svelte  |  18 +-
 .../components/FakeMonacoPlaceHolder.svelte   |   2 +-
 .../src/lib/components/FieldHeader.svelte     |   8 +-
 .../src/lib/components/FlowBuilder.svelte     |  50 +-
 .../components/FlowBuilderTutorials.svelte    |   5 +-
 .../lib/components/FlowGraphViewerStep.svelte |   2 +-
 .../src/lib/components/FlowJobResult.svelte   |  14 +-
 frontend/src/lib/components/FlowLogRow.svelte |   2 +-
 .../src/lib/components/FlowLogViewer.svelte   |  14 +-
 .../FlowLoopIterationPreview.svelte           |  16 +-
 .../src/lib/components/FlowMetadata.svelte    |  38 +-
 .../src/lib/components/FlowPlugConnect.svelte |   8 +-
 .../lib/components/FlowPreviewContent.svelte  |  27 +-
 .../components/FlowStatusViewerInner.svelte   | 211 +++---
 .../FlowStatusWaitingForEvents.svelte         |  10 +-
 .../src/lib/components/FlowTimelineBar.svelte |   2 +-
 frontend/src/lib/components/FlowViewer.svelte |   6 +-
 .../src/lib/components/FlowViewerInner.svelte |   4 +-
 .../src/lib/components/FolderEditor.svelte    | 417 +++++------
 frontend/src/lib/components/FolderInfo.svelte |   6 +-
 .../src/lib/components/FolderPicker.svelte    |  12 +-
 .../src/lib/components/GitDiffPreview.svelte  |  16 +-
 .../components/GitHubAppIntegration.svelte    |  37 +-
 .../components/GitRepoPopoverPicker.svelte    |  15 +-
 .../components/GitRepoResourcePicker.svelte   |  48 +-
 .../src/lib/components/GroupEditor.svelte     | 338 ++++-----
 frontend/src/lib/components/GroupInfo.svelte  |  33 +-
 .../src/lib/components/HighlightTheme.svelte  |   7 +-
 .../src/lib/components/HistoricInputs.svelte  |   8 +-
 .../src/lib/components/HistoricList.svelte    |   2 +-
 .../components/HttpAgentWorkerDrawer.svelte   |   4 +-
 .../lib/components/IconedResourceType.svelte  |   2 +-
 .../lib/components/InputTransformForm.svelte  |  54 +-
 .../InputTransformSchemaForm.svelte           |   9 +-
 .../components/InputTransformsViewer.svelte   |   2 +-
 .../lib/components/InstanceGroupEditor.svelte |   5 +-
 .../lib/components/InstanceNameEditor.svelte  |  51 +-
 .../src/lib/components/InstanceSetting.svelte | 144 ++--
 .../lib/components/InstanceSettings.svelte    |  15 +-
 .../lib/components/InviteGlobalUser.svelte    |  13 +-
 frontend/src/lib/components/InviteUser.svelte |  10 +-
 frontend/src/lib/components/ItemPicker.svelte |   6 +-
 frontend/src/lib/components/JobArgs.svelte    |   2 +-
 frontend/src/lib/components/JsonEditor.svelte |   8 +-
 frontend/src/lib/components/Label.svelte      |  19 +-
 .../LightweightResourcePicker.svelte          |   2 +-
 frontend/src/lib/components/LogViewer.svelte  |  24 +-
 .../src/lib/components/LogViewerHeader.svelte |   7 +-
 frontend/src/lib/components/Login.svelte      |  50 +-
 .../src/lib/components/ModulePreview.svelte   |   6 +-
 .../lib/components/ModulePreviewForm.svelte   |   2 +-
 .../ModulePreviewResultViewer.svelte          |   2 +-
 .../src/lib/components/ModuleStatus.svelte    |   4 +-
 .../lib/components/NumberTypeNarrowing.svelte |   2 +-
 .../lib/components/OauthExtraParams.svelte    |   9 +-
 .../src/lib/components/OauthScopes.svelte     |  12 +-
 .../ObjectStoreConfigSettings.svelte          |  67 +-
 frontend/src/lib/components/PageHeader.svelte |   6 +-
 frontend/src/lib/components/Password.svelte   |   2 +-
 .../lib/components/PasswordArgInput.svelte    |   5 +-
 frontend/src/lib/components/Path.svelte       |  53 +-
 .../components/PersistentScriptDrawer.svelte  |   8 +-
 frontend/src/lib/components/Popover.svelte    |   4 +-
 .../src/lib/components/QueuePosition.svelte   |   2 +-
 frontend/src/lib/components/Required.svelte   |   2 +-
 .../src/lib/components/ResourceEditor.svelte  | 209 +++---
 .../components/ResourceEditorDrawer.svelte    |   4 +-
 .../src/lib/components/ResourcePicker.svelte  |  16 +-
 .../lib/components/ResourceTypePicker.svelte  |  14 +-
 frontend/src/lib/components/RunButton.svelte  |   6 +-
 frontend/src/lib/components/RunChart.svelte   |   2 +-
 frontend/src/lib/components/RunForm.svelte    |   6 +-
 .../components/RunFormAdvancedPopup.svelte    |   3 +-
 .../lib/components/S3ArrayHelperButton.svelte |   4 +-
 .../lib/components/S3FilePickerInner.svelte   | 129 ++--
 .../src/lib/components/S3ObjectPicker.svelte  |   6 +-
 .../lib/components/SaveInputsButton.svelte    |   5 +-
 .../src/lib/components/SavedInputs.svelte     |  26 +-
 .../lib/components/SavedInputsPicker.svelte   |  32 +-
 .../components/SavedInputsPickerViewer.svelte |  15 +-
 .../src/lib/components/SavedInputsV2.svelte   |   5 +-
 frontend/src/lib/components/SchemaForm.svelte |   9 +-
 .../src/lib/components/SchemaViewer.svelte    |   4 +-
 .../src/lib/components/ScriptBuilder.svelte   | 220 +++---
 .../src/lib/components/ScriptEditor.svelte    |  63 +-
 .../src/lib/components/ScriptPicker.svelte    |  27 +-
 .../components/ScriptVersionHistory.svelte    |  10 +-
 frontend/src/lib/components/Section.svelte    |   4 +-
 .../lib/components/ServiceLogsInner.svelte    |  14 +-
 frontend/src/lib/components/ShareModal.svelte | 126 ++--
 .../src/lib/components/SharedBadge.svelte     |  14 +-
 .../src/lib/components/SimpleEditor.svelte    |   2 +-
 frontend/src/lib/components/SqlRepl.svelte    |   4 +-
 frontend/src/lib/components/Star.svelte       |   6 +-
 frontend/src/lib/components/Summary.svelte    |  49 +-
 .../src/lib/components/SupabaseConnect.svelte |  11 +-
 .../components/SuperadminSettingsInner.svelte |  28 +-
 .../src/lib/components/TableCustom.svelte     |   2 +-
 .../src/lib/components/TemplateEditor.svelte  |  13 +-
 .../src/lib/components/TestConnection.svelte  |   9 +-
 frontend/src/lib/components/Toast.svelte      |  53 +-
 frontend/src/lib/components/Toggle.svelte     | 110 +--
 .../components/ToggleHubWorkspaceQuick.svelte |   6 +-
 frontend/src/lib/components/Tooltip.svelte    |  19 +-
 .../src/lib/components/TooltipInner.svelte    |   4 +-
 .../src/lib/components/UserSettings.svelte    |  40 +-
 .../src/lib/components/VariableEditor.svelte  |  94 +--
 .../src/lib/components/WhitelistIp.svelte     |   2 +-
 .../src/lib/components/WorkerGroup.svelte     |  48 +-
 frontend/src/lib/components/WorkerRepl.svelte |  28 +-
 .../src/lib/components/WorkerTagPicker.svelte |   5 +-
 .../src/lib/components/WorkerTagSelect.svelte |  38 +-
 .../apps/components/buttons/AppButton.svelte  |   2 +-
 .../apps/components/buttons/AppForm.svelte    |   3 +-
 .../components/buttons/AppFormButton.svelte   |   7 +-
 .../display/AppAccordionList.svelte           |   2 +-
 .../components/display/AppCarouselList.svelte |   2 +-
 .../components/display/AppDownload.svelte     |   3 +-
 .../apps/components/display/AppMenu.svelte    |   4 +-
 .../components/display/AppNavbarItem.svelte   |   1 +
 .../apps/components/display/AppText.svelte    |   5 +-
 .../display/InsertRowDrawerButton.svelte      |   6 +-
 .../display/dbtable/InsertRow.svelte          |   3 +-
 .../display/table/AppTableFooter.svelte       |   6 +-
 .../display/table/SyncColumnDefs.svelte       |   7 +-
 .../apps/components/helpers/Loader.svelte     |   2 +-
 .../helpers/MissingConnectionWarning.svelte   |   2 +-
 .../components/inputs/AppSelectTab.svelte     |   6 +-
 .../components/layout/AppDecisionTree.svelte  |   2 +-
 .../apps/components/layout/AppDrawer.svelte   |   3 +-
 .../apps/components/layout/AppList.svelte     |   8 +-
 .../apps/components/layout/AppModal.svelte    |   5 +-
 .../apps/components/layout/AppStepper.svelte  |   8 +-
 .../apps/components/layout/AppTabs.svelte     |  12 +-
 .../components/apps/editor/AppEditor.svelte   |  40 +-
 .../apps/editor/AppEditorHeader.svelte        |  50 +-
 .../apps/editor/AppEditorTutorial.svelte      |   9 +-
 .../apps/editor/AppExportButton.svelte        |   7 +-
 .../apps/editor/AppJobsDrawer.svelte          |  28 +-
 .../apps/editor/AppJsonEditor.svelte          |   4 +-
 .../apps/editor/AppReportsDrawerInner.svelte  |  48 +-
 .../apps/editor/ComponentHeader.svelte        |   3 +-
 .../apps/editor/DeploymentHistory.svelte      |   6 +-
 .../components/apps/editor/GridEditor.svelte  |   4 +-
 .../apps/editor/PreviewToggle.svelte          |   1 -
 .../apps/editor/RecomputeAllButton.svelte     |   5 +-
 .../apps/editor/RecomputeAllWrapper.svelte    |   2 +-
 .../apps/editor/RunnableJobPanelInner.svelte  |   6 +-
 .../editor/component/ComponentInner.svelte    |   2 +-
 .../componentsPanel/ComponentList.svelte      |   6 +-
 .../componentsPanel/CssHelperPanel.svelte     |  13 +-
 .../editor/componentsPanel/CssProperty.svelte |  14 +-
 .../editor/componentsPanel/CssSettings.svelte |   4 +-
 .../CustomComponentsList.svelte               |   2 +-
 .../editor/componentsPanel/GroupList.svelte   |   2 +-
 .../editor/componentsPanel/ListItem.svelte    |  16 +-
 .../editor/componentsPanel/NameEditor.svelte  |   2 +-
 .../componentsPanel/QuickStyleMenu.svelte     |   2 +-
 .../componentsPanel/QuickStyleProperty.svelte |   5 +-
 .../editor/componentsPanel/ThemeList.svelte   |   5 +-
 .../componentsPanel/ThemeNameEditor.svelte    |   2 +-
 .../editor/componentsPanel/ThemeRow.svelte    |   2 +-
 .../contextPanel/ComponentOutputViewer.svelte |   4 +-
 .../editor/contextPanel/LazyModePanel.svelte  |   6 +-
 .../editor/contextPanel/SubGridOutput.svelte  |   2 +-
 .../components/OutputHeader.svelte            |   2 +-
 .../inlineScriptsPanel/CacheTtlPopup.svelte   |   5 +-
 .../EmptyInlineScript.svelte                  |  14 +-
 .../InlineScriptEditor.svelte                 |  45 +-
 .../InlineScriptEditorPanel.svelte            |   2 +-
 .../InlineScriptHiddenRunnable.svelte         |   2 +-
 .../InlineScriptRunnableByPath.svelte         |  20 +-
 .../InlineScriptsPanel.svelte                 |   2 +-
 .../InlineScriptsPanelList.svelte             |   7 +-
 .../inlineScriptsPanel/RunButton.svelte       |   6 +-
 .../settingsPanel/AlignmentEditor.svelte      |   2 +-
 .../ArrayStaticInputEditor.svelte             |  16 +-
 .../settingsPanel/CSSMigrationModal.svelte    |   6 +-
 .../settingsPanel/ComponentPanel.svelte       |  19 +-
 .../DecisionTreeGraphEditor.svelte            |   5 +-
 .../DecisionTreeGraphNode.svelte              |  11 +-
 .../editor/settingsPanel/GridCondition.svelte |   5 +-
 .../editor/settingsPanel/GridGroup.svelte     |   5 +-
 .../editor/settingsPanel/GridNavbar.svelte    |  13 +-
 .../apps/editor/settingsPanel/GridPane.svelte |  11 +-
 .../apps/editor/settingsPanel/GridTab.svelte  |  11 +-
 .../settingsPanel/InputsSpecEditor.svelte     |  41 +-
 .../settingsPanel/InputsSpecsEditor.svelte    |   6 +-
 .../editor/settingsPanel/MenuItems.svelte     |  11 +-
 .../OneOfInputSpecsEditor.svelte              |  30 +-
 .../editor/settingsPanel/StylePanel.svelte    |  50 +-
 .../editor/settingsPanel/TableActions.svelte  |  17 +-
 .../inputEditor/ConnectedInputEditor.svelte   |   4 +-
 .../inputEditor/EvalV2InputEditor.svelte      |  10 +-
 .../inputEditor/StaticInputEditor.svelte      |   3 +-
 .../inputEditor/TabSelectInput.svelte         |   2 +-
 .../mainInput/RunnableSelector.svelte         |  36 +-
 .../mainInput/WorkspaceFlowList.svelte        |   2 +-
 .../mainInput/WorkspaceScriptList.svelte      |   2 +-
 .../shared/ScriptSettingsActions.svelte       |   2 +-
 .../script/shared/ScriptTransformer.svelte    |   2 +-
 .../script/shared/ScriptTriggers.svelte       |   2 +-
 .../lib/components/assets/AssetButtons.svelte |   2 +-
 .../assets/AssetsDropdownButton.svelte        |   6 +-
 .../assets/AssetsUsageDrawer.svelte           |   8 +-
 .../components/assets/JobAssetsViewer.svelte  |   4 +-
 .../auditLogs/AuditLogDetails.svelte          | 116 +--
 .../auditLogs/AuditLogMobileFilters.svelte    |   4 +-
 .../auditLogs/AuditLogsFilters.svelte         |  28 +-
 .../auditLogs/AuditLogsTable.svelte           |  64 +-
 .../lib/components/common/CloseButton.svelte  |   2 +-
 .../common/ResizeTransitionWrapper.svelte     |  23 +-
 frontend/src/lib/components/common/Url.svelte |   2 +-
 .../lib/components/common/alert/Alert.svelte  |  21 +-
 .../src/lib/components/common/alert/model.ts  |   9 +-
 .../lib/components/common/badge/Badge.svelte  | 188 +++--
 .../src/lib/components/common/badge/model.ts  |   2 +-
 .../common/breadcrumb/Breadcrumb.svelte       |   2 +-
 .../components/common/button/Button.svelte    | 184 +++--
 .../common/button/ConnectionButton.svelte     |   3 +-
 .../common/button/RoundIconButton.svelte      |   4 +-
 .../components/common/button/UndoRedo.svelte  |  20 +-
 .../src/lib/components/common/button/model.ts | 183 ++++-
 .../ConfirmationModal.svelte                  |   4 +-
 .../DeployOverrideConfirmationModal.svelte    |  21 +-
 .../DraftTriggersConfirmationModal.svelte     |   6 +-
 .../UnsavedConfirmationModal.svelte           |   3 +-
 .../common/drawer/DrawerContent.svelte        |   2 +-
 .../common/fileDownload/FileDownload.svelte   |   2 +-
 .../common/fileInput/FileInput.svelte         |   6 +-
 .../common/fileUpload/FileUpload.svelte       |  17 +-
 .../common/fileUpload/FileUploadModal.svelte  |   2 +-
 .../common/fileUpload/S3ArgInput.svelte       |   5 +-
 .../common/languageIcons/LanguageIcon.svelte  |  43 +-
 .../common/modal/AlwaysMountedModal.svelte    |   2 +-
 .../lib/components/common/modal/Modal.svelte  |   2 +-
 .../lib/components/common/modal/Modal2.svelte |   2 +-
 .../common/seconds/SecondsInput.svelte        |   4 +-
 .../components/common/stepper/Stepper.svelte  |   6 +-
 .../lib/components/common/table/AppRow.svelte |  25 +-
 .../components/common/table/FlowRow.svelte    |  12 +-
 .../components/common/table/RawAppRow.svelte  |   5 +-
 .../lib/components/common/table/Row.svelte    |   8 +-
 .../components/common/table/RowIcon.svelte    |  23 +-
 .../components/common/table/ScriptRow.svelte  |  14 +-
 .../src/lib/components/common/tabs/Tab.svelte |  43 +-
 .../toggleButton-v2/ToggleButton.svelte       |  36 +-
 .../toggleButton-v2/ToggleButtonGroup.svelte  |   2 +-
 .../toggleButton-v2/ToggleButtonMore.svelte   |   7 +-
 .../components/copilot/AIFormAssistant.svelte |   2 +-
 .../components/copilot/AIFormSettings.svelte  |  36 +-
 .../lib/components/copilot/AskAiButton.svelte |   2 +-
 .../src/lib/components/copilot/CronGen.svelte |   4 +-
 .../copilot/FlowInlineScriptAIButton.svelte   |   7 +-
 .../lib/components/copilot/IteratorGen.svelte |   4 +-
 .../lib/components/copilot/MetadataGen.svelte |  26 +-
 .../components/copilot/PredicateGen.svelte    |   4 +-
 .../lib/components/copilot/RegexGen.svelte    |   4 +-
 .../lib/components/copilot/ScriptFix.svelte   |   2 +-
 .../lib/components/copilot/ScriptGen.svelte   |  65 +-
 .../components/copilot/StepGenQuick.svelte    |  22 +-
 .../components/copilot/StepInputGen.svelte    |  18 +-
 .../components/copilot/StepInputsGen.svelte   |  17 +-
 .../lib/components/copilot/TestAIKey.svelte   |  30 +-
 .../copilot/chat/AIChatDisplay.svelte         |  16 +-
 .../copilot/chat/AIChatInlineWidget.svelte    |   2 +-
 .../copilot/chat/AIChatInput.svelte           |   2 +-
 .../copilot/chat/AIChatMessage.svelte         |  10 +-
 .../copilot/chat/AiChatLayout.svelte          |   2 +-
 .../copilot/chat/AvailableContextList.svelte  |   8 +-
 .../components/copilot/chat/ChatMode.svelte   |   2 +-
 .../copilot/chat/ContextElementBadge.svelte   |   6 +-
 .../copilot/chat/ProviderModelSelector.svelte |   2 +-
 .../copilot/chat/ToolContentDisplay.svelte    |   6 +-
 .../copilot/chat/ToolExecutionDisplay.svelte  |   7 +-
 .../copilot/chat/flow/FlowAIButton.svelte     |  68 +-
 .../lib/components/copilot/chat/flow/utils.ts |  25 +
 .../components/details/ClipboardPanel.svelte  |  10 +-
 .../details/DetailPageDetailPanel.svelte      |  10 +-
 .../details/DetailPageHeader.svelte           |   3 +-
 .../details/DetailPageLayout.svelte           |  10 +-
 .../details/ErrorHandlerToggleButton.svelte   |   4 +-
 .../details/ErrorHandlerToggleButtonV2.svelte |   8 +-
 .../components/flows/CreateActionsApp.svelte  |  10 +-
 .../components/flows/CreateActionsFlow.svelte |   5 +-
 .../components/flows/FlowHistoryInner.svelte  |  10 +-
 .../components/flows/FlowModuleIcon.svelte    |   2 +-
 .../flows/common/FlowCardHeader.svelte        |   9 +-
 .../content/BranchPredicateEditor.svelte      |   3 +-
 .../flows/content/DynamicInputHelpBox.svelte  |   2 +-
 .../content/FlowBranchesAllWrapper.svelte     |  12 +-
 .../content/FlowBranchesOneWrapper.svelte     |  14 +-
 .../flows/content/FlowConstants.svelte        |   4 +-
 .../components/flows/content/FlowInput.svelte |  44 +-
 .../flows/content/FlowInputEditor.svelte      |   4 +-
 .../flows/content/FlowInputsFlow.svelte       |   3 +-
 .../flows/content/FlowInputsQuick.svelte      |  10 +-
 .../components/flows/content/FlowLoop.svelte  |  29 +-
 .../flows/content/FlowModuleCache.svelte      |   8 +-
 .../flows/content/FlowModuleComponent.svelte  | 101 +--
 .../flows/content/FlowModuleEarlyStop.svelte  |  16 +-
 .../flows/content/FlowModuleMock.svelte       |   4 +-
 .../flows/content/FlowModuleScript.svelte     |   4 +-
 .../flows/content/FlowModuleSkip.svelte       |   8 +-
 .../flows/content/FlowModuleSleep.svelte      |   5 +-
 .../flows/content/FlowModuleSuspend.svelte    |  13 +-
 .../flows/content/FlowModuleTimeout.svelte    |   4 +-
 .../flows/content/FlowResult.svelte           |   8 +-
 .../flows/content/FlowRetries.svelte          |  22 +-
 .../flows/content/FlowSettings.svelte         | 197 +++--
 .../flows/content/FlowWhileLoop.svelte        |  14 +-
 .../flows/content/GenAiQuick.svelte           |   2 +-
 .../flows/content/ScriptEditorDrawer.svelte   |   8 +-
 .../flows/content/SuspendDrawer.svelte        |   9 +-
 .../FlowConversationsSidebar.svelte           |   2 +-
 .../flows/header/FlowPreviewButtons.svelte    |   4 +-
 .../flows/header/FlowYamlEditor.svelte        |   6 +-
 .../flows/map/FlowErrorHandlerItem.svelte     |  78 +-
 .../flows/map/FlowGraphPreviewButton.svelte   |   9 +-
 .../flows/map/FlowModuleSchemaItem.svelte     |  48 +-
 .../map/FlowModuleSchemaItemViewer.svelte     |  56 +-
 .../flows/map/FlowStickyNode.svelte           |  66 +-
 .../flows/map/InsertModuleButton.svelte       | 117 +--
 .../flows/map/InsertModulePopover.svelte      |  63 ++
 .../lib/components/flows/map/MapItem.svelte   |  48 +-
 .../components/flows/map/VirtualItem.svelte   |  24 +-
 .../flows/map/VirtualItemWrapper.svelte       |  33 +-
 .../flows/pickers/FlowScriptPicker.svelte     |   3 +-
 .../flows/pickers/PickHubApp.svelte           |  51 +-
 .../flows/pickers/PickHubFlow.svelte          |  50 +-
 .../flows/pickers/PickHubScript.svelte        |  47 +-
 .../flows/pickers/TopLevelNode.svelte         |   2 +-
 .../pickers/WorkspaceScriptPicker.svelte      |  18 +-
 .../pickers/WorkspaceScriptPickerQuick.svelte |   2 +-
 .../flows/propPicker/InputPickerInner.svelte  |   2 +-
 .../flows/propPicker/OutputPicker.svelte      |  71 +-
 .../flows/propPicker/PropPickerWrapper.svelte | 151 ++--
 .../flows/propPicker/StepHistory.svelte       |   2 +-
 .../components/git_sync/DetectionFlow.svelte  |  26 +-
 .../git_sync/GitSyncModeDisplay.svelte        |  14 +-
 .../git_sync/GitSyncRepositoryCard.svelte     | 185 ++---
 .../components/git_sync/GitSyncSection.svelte |  27 +-
 .../git_sync/PullWorkspaceModal.svelte        | 184 +++--
 .../git_sync/PushWorkspaceModal.svelte        | 115 +--
 .../lib/components/graph/FlowGraphV2.svelte   |   5 +-
 .../graph/renderers/edges/BaseEdge.svelte     |  19 +-
 .../graph/renderers/nodes/AIToolNode.svelte   |  24 +-
 .../graph/renderers/nodes/AssetNode.svelte    |  40 +-
 .../nodes/AssetsOverflowedNode.svelte         |   2 +-
 .../renderers/nodes/BranchAllEndNode.svelte   |   4 -
 .../renderers/nodes/BranchAllStart.svelte     |  11 -
 .../renderers/nodes/BranchOneStart.svelte     |   9 -
 .../renderers/nodes/ForLoopEndNode.svelte     |   5 -
 .../renderers/nodes/ForLoopStartNode.svelte   |  17 +-
 .../graph/renderers/nodes/InputNode.svelte    |  23 +-
 .../graph/renderers/nodes/ModuleNode.svelte   |  12 +-
 .../renderers/nodes/NewAIToolNode.svelte      |  27 +-
 .../graph/renderers/nodes/NoBranchNode.svelte |   4 -
 .../graph/renderers/nodes/NodeWrapper.svelte  |   5 +-
 .../graph/renderers/nodes/ResultNode.svelte   |   9 -
 .../graph/renderers/nodes/SubflowBound.svelte |   4 -
 .../graph/renderers/nodes/TriggersNode.svelte |  12 +-
 .../renderers/nodes/branchOneEndNode.svelte   |   4 -
 .../renderers/triggers/TriggersWrapper.svelte |  23 +-
 frontend/src/lib/components/graph/util.ts     | 161 +++--
 .../src/lib/components/home/ItemsList.svelte  |  65 +-
 .../lib/components/home/ListFilters.svelte    |  13 +-
 .../lib/components/home/NoItemFound.svelte    |   6 +-
 .../src/lib/components/home/TreeView.svelte   |  36 +-
 .../lib/components/home/TreeViewRoot.svelte   |   8 +-
 .../lib/components/icons/MSTeamsIcon.svelte   |  81 ++-
 .../lib/components/icons/NextcloudIcon.svelte |  13 +-
 .../lib/components/icons/WindmillIcon.svelte  |  11 +-
 .../src/lib/components/jobs/JobPreview.svelte |   4 +-
 .../components/meltComponents/MenuItem.svelte |   4 +
 .../components/meltComponents/Popover.svelte  |   4 +-
 .../components/meltComponents/Tooltip.svelte  |   4 +-
 .../preview/FlowPreviewStatus.svelte          |   6 +-
 .../propertyPicker/ObjectViewer.svelte        |  26 +-
 .../propertyPicker/PropPicker.svelte          |  68 +-
 .../propertyPicker/WarningMessage.svelte      |   2 +-
 .../raw_apps/RawAppEditorHeader.svelte        |   7 +-
 .../raw_apps/RawAppInlineScriptEditor.svelte  |   3 +-
 .../RawAppInlineScriptPanelList.svelte        |   5 +-
 .../RawAppInlineScriptRunnable.svelte         |   8 +-
 .../raw_apps/RawAppInlineScriptsPanel.svelte  |   2 +-
 .../raw_apps/RawAppInputsSpecEditor.svelte    |   6 +-
 .../lib/components/runs/JobRunsPreview.svelte |  30 +-
 .../components/runs/ManuelDatePicker.svelte   |   8 +-
 .../lib/components/runs/MobileFilters.svelte  |   2 +-
 .../runs/PreprocessedArgsDisplay.svelte       |   2 +-
 .../lib/components/runs/QueuePopover.svelte   |   2 +-
 .../src/lib/components/runs/RunOption.svelte  |   4 +-
 .../src/lib/components/runs/RunRow.svelte     |  52 +-
 .../runs/RunsBatchActionsDropdown.svelte      |  31 +-
 .../src/lib/components/runs/RunsFilter.svelte | 190 ++---
 .../src/lib/components/runs/RunsQueue.svelte  |   4 +-
 .../src/lib/components/runs/RunsTable.svelte  |   2 +-
 .../components/schema/AddPropertyForm.svelte  |   3 +-
 .../schema/AddPropertyFormV2.svelte           |   3 +-
 .../schema/EditableSchemaDrawer.svelte        |   5 +-
 .../schema/FlowPropertyEditor.svelte          |  15 +-
 .../components/schema/SchemaFormDND.svelte    |   2 +-
 .../components/schema/SchemaPickerRow.svelte  |   6 +-
 .../components/scriptEditor/LogPanel.svelte   |   8 +-
 .../scripts/CreateActionsScript.svelte        |   8 +-
 .../search/GlobalSearchModal.svelte           |   6 +-
 .../lib/components/search/RunsSearch.svelte   |  12 +-
 .../components/select/DraggableTags.svelte    |   8 +-
 .../lib/components/select/MultiSelect.svelte  |  20 +-
 .../src/lib/components/select/Select.svelte   |  39 +-
 .../components/select/SelectDropdown.svelte   |  24 +-
 .../components/settings/AIUserSettings.svelte |   7 +-
 .../settings/ChangeWorkspaceColor.svelte      |  10 +-
 .../settings/ChangeWorkspaceId.svelte         |   8 +-
 .../settings/ChangeWorkspaceName.svelte       |   8 +-
 .../components/settings/CreateToken.svelte    |  39 +-
 .../components/settings/PremiumInfo.svelte    |   8 +-
 .../components/settings/ScopeSelector.svelte  |  54 +-
 .../components/settings/TokensTable.svelte    |  67 +-
 .../settings/UserInfoSettings.svelte          |  73 +-
 .../settings/WorkspaceOperatorSettings.svelte |   4 +-
 .../settings/WorkspaceUserSettings.svelte     |  21 +-
 .../sidebar/CriticalAlertModal.svelte         |   9 +-
 .../sidebar/CriticalAlertModalInner.svelte    |   6 +-
 .../lib/components/sidebar/MenuButton.svelte  |  25 +-
 .../lib/components/sidebar/MenuLink.svelte    |  41 +-
 .../components/sidebar/MultiplayerMenu.svelte |   2 +-
 .../components/sidebar/OperatorMenu.svelte    |  27 +-
 .../lib/components/sidebar/UserMenu.svelte    |   2 +-
 .../components/sidebar/WorkspaceMenu.svelte   |  14 +-
 frontend/src/lib/components/table/Cell.svelte |   7 +-
 .../src/lib/components/table/DataTable.svelte |   2 +-
 .../lib/components/table/DownloadCsv.svelte   |   4 +-
 .../components/text_input/TextInput.svelte    |  31 +-
 .../components/triggers/CaptureButton.svelte  |   5 +-
 .../components/triggers/CaptureSection.svelte |   8 +-
 .../components/triggers/CaptureTable.svelte   |   6 +-
 .../triggers/DeleteTriggerButton.svelte       |   5 +-
 .../triggers/TestTriggerConnection.svelte     |   3 +-
 .../triggers/TriggerEditorToolbar.svelte      |   5 +-
 .../components/triggers/TriggerLabel.svelte   |  21 +-
 .../components/triggers/TriggersEditor.svelte |  15 +-
 .../components/triggers/TriggersTable.svelte  |  11 +-
 .../triggers/TriggersWrapper.svelte           |   4 +-
 .../email/DefaultEmailConfigSection.svelte    |  36 +-
 .../triggers/email/DefaultEmailPanel.svelte   |   2 +-
 .../email/EmailTriggerEditorInner.svelte      |   8 +-
 .../gcp/GcpTriggerEditorConfigSection.svelte  |   8 +-
 .../triggers/gcp/GcpTriggerEditorInner.svelte |  16 +-
 .../triggers/http/OpenAPISpecGenerator.svelte |  22 +-
 .../http/RouteBodyTransformerOption.svelte    |   6 +-
 .../http/RouteEditorConfigSection.svelte      |  67 +-
 .../triggers/http/RouteEditorInner.svelte     | 609 ++++++++--------
 .../triggers/http/RoutesGenerator.svelte      |   5 +-
 .../kafka/KafkaTriggerEditorInner.svelte      |   8 +-
 .../mqtt/MqttEditorConfigSection.svelte       |   5 +-
 .../mqtt/MqttTriggerEditorInner.svelte        |  10 +-
 .../nats/NatsTriggerEditorInner.svelte        |   8 +-
 .../postgres/CheckPostgresRequirement.svelte  |   5 +-
 .../PostgresTriggerEditorInner.svelte         |  40 +-
 .../postgres/PublicationPicker.svelte         |   9 +-
 .../triggers/postgres/RelationPicker.svelte   |   9 +-
 .../triggers/postgres/SlotPicker.svelte       |   6 +-
 .../scheduled/ScheduledPollPanel.svelte       |   2 +-
 .../schedules/ScheduleEditorInner.svelte      | 278 +++----
 .../sqs/SqsTriggerEditorConfigSection.svelte  |   7 +-
 .../triggers/sqs/SqsTriggerEditorInner.svelte |   8 +-
 .../components/triggers/testingBadge.svelte   |   2 +-
 .../webhook/WebhooksConfigSection.svelte      |  69 +-
 .../WebsocketTriggerEditorInner.svelte        |  22 +-
 .../components/tutorials/SkipTutorials.svelte |   6 +-
 .../tutorials/TutorialControls.svelte         |   2 +-
 frontend/src/lib/components/vscode.ts         |  11 +-
 .../components/wizards/AgGridWizard.svelte    | 112 +--
 .../wizards/DBExplorerWizard.svelte           |   3 +-
 .../wizards/TableActionsWizard.svelte         |  14 +-
 .../workspaceSettings/AISettings.svelte       |   5 +-
 .../workspaceSettings/CreateWorkspace.svelte  | 336 +++++----
 .../workspaceSettings/DucklakeSettings.svelte |   6 +-
 .../GitSyncFilterSettings.svelte              |  67 +-
 .../workspaceSettings/ModelTokenLimits.svelte |   2 +-
 .../workspaceSettings/StorageSettings.svelte  |  26 +-
 frontend/src/lib/defaults.ts                  |   6 -
 frontend/src/lib/toast.ts                     |   6 +-
 frontend/src/lib/utils.ts                     |  26 +-
 .../src/routes/(root)/(logged)/+layout.svelte |   7 +-
 .../src/routes/(root)/(logged)/+page.svelte   | 191 ++---
 .../(logged)/apps/get/[...path]/+page.svelte  |   2 +-
 .../apps_raw/get/[...path]/+page.svelte       |   2 +-
 .../(root)/(logged)/assets/+page.svelte       |   4 +-
 .../(root)/(logged)/audit_logs/+page.svelte   |   2 +-
 .../(logged)/concurrency_groups/+page.svelte  |  12 +-
 .../(logged)/email_triggers/+page.svelte      |  15 +-
 .../(logged)/flows/get/[...path]/+page.svelte |  30 +-
 .../(root)/(logged)/folders/+page.svelte      |  12 +-
 .../(root)/(logged)/gcp_triggers/+page.svelte |  20 +-
 .../(root)/(logged)/groups/+page.svelte       | 120 ++--
 .../(logged)/instance_groups/+page.svelte     |   4 +-
 .../(logged)/kafka_triggers/+page.svelte      |  22 +-
 .../(logged)/mqtt_triggers/+page.svelte       |  21 +-
 .../(logged)/nats_triggers/+page.svelte       |  23 +-
 .../(logged)/postgres_triggers/+page.svelte   |  29 +-
 .../(root)/(logged)/resources/+page.svelte    |  63 +-
 .../(root)/(logged)/routes/+page.svelte       |  54 +-
 .../(root)/(logged)/run/[...run]/+page.svelte | 155 ++--
 .../(logged)/runs/[...path]/+page.svelte      |  28 +-
 .../(root)/(logged)/schedules/+page.svelte    |  51 +-
 .../scripts/get/[...hash]/+page.svelte        |  39 +-
 .../(root)/(logged)/sqs_triggers/+page.svelte |  21 +-
 .../svix/create-webhook/+page@(root).svelte   |  12 +-
 .../user/(user)/accept_invite/+page.svelte    |   2 +-
 .../user/(user)/first-time/+page.svelte       |   2 +-
 .../(logged)/user/(user)/login/+page.svelte   |   4 +-
 .../user/(user)/workspaces/+page.svelte       | 106 ++-
 .../(root)/(logged)/user/cli/+page.svelte     |   4 +-
 .../(root)/(logged)/variables/+page.svelte    |  31 +-
 .../(logged)/websocket_triggers/+page.svelte  |  19 +-
 .../(root)/(logged)/workers/+page.svelte      |  61 +-
 .../(logged)/workspace_settings/+page.svelte  | 159 ++--
 .../workspace_settings/checkout/+page.svelte  |   4 +-
 frontend/src/routes/a/[...path]/+page.svelte  |   4 +-
 frontend/src/routes/kitchen_sink/+page.svelte |  34 +-
 .../[workspace]/[...secret]/+page.svelte      |   4 +-
 .../routes/test_dev/kitchen_sink/+page.svelte | 679 ++++++++++++++++++
 frontend/tailwind.config.cjs                  | 371 +++++-----
 578 files changed, 8840 insertions(+), 7405 deletions(-)
 create mode 100644 frontend/src/lib/assets/tokens/README.md
 create mode 100644 frontend/src/lib/assets/tokens/colorTokensConfig.ts
 create mode 100644 frontend/src/lib/assets/tokens/tokens.json
 create mode 100644 frontend/src/lib/components/flows/map/InsertModulePopover.svelte
 delete mode 100644 frontend/src/lib/defaults.ts
 create mode 100644 frontend/src/routes/test_dev/kitchen_sink/+page.svelte

diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css
index 6e0623940d..6f5d25b384 100644
--- a/frontend/src/lib/assets/app.css
+++ b/frontend/src/lib/assets/app.css
@@ -3,6 +3,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@media (min-width: 1760px) {
+  :root {
+    font-size: 18px;
+  }
+}
+
 @layer base {
 
 	/* Light mode: default border color */
@@ -10,7 +16,7 @@
 	.border-x, .border-y, 
 	.divide-x > :not([hidden]) ~ :not([hidden]), 
 	.divide-y > :not([hidden]) ~ :not([hidden]) {
-		border-color: #e5e7eb; /* gray-200 */
+		border-color: rgb(var(--color-border-light));
 	}
 
 	/* Dark mode: change border color */
@@ -18,7 +24,7 @@
 	.dark .border-x, .dark .border-y, 
 	.dark .divide-x > :not([hidden]) ~ :not([hidden]), 
 	.dark .divide-y > :not([hidden]) ~ :not([hidden]) {
-		border-color: #4b5563; /* gray-700 */
+		border-color: rgb(var(--color-border-light));
 	}
 
 	/* Chrome, Edge, and Safari */
@@ -193,3 +199,10 @@ svelte-virtual-list-contents > * + * {
 	);
 }
 
+/* Prevent clock icon in input[type="time"] making the input taller */
+
+/* Chrome, Safari, Edge, Opera */
+input[type="time"]::-webkit-calendar-picker-indicator {
+	margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/assets/tokens/README.md b/frontend/src/lib/assets/tokens/README.md
new file mode 100644
index 0000000000..182966b886
--- /dev/null
+++ b/frontend/src/lib/assets/tokens/README.md
@@ -0,0 +1 @@
+The content of tokens.json is auto-generated by the 'Figma Variables to JSON' extension
diff --git a/frontend/src/lib/assets/tokens/colorTokensConfig.ts b/frontend/src/lib/assets/tokens/colorTokensConfig.ts
new file mode 100644
index 0000000000..619272a469
--- /dev/null
+++ b/frontend/src/lib/assets/tokens/colorTokensConfig.ts
@@ -0,0 +1,2 @@
+export const lightModeName = 'light' as const
+export const darkModeName = 'dark-3' as const
diff --git a/frontend/src/lib/assets/tokens/tokens.json b/frontend/src/lib/assets/tokens/tokens.json
new file mode 100644
index 0000000000..3dd358a9a7
--- /dev/null
+++ b/frontend/src/lib/assets/tokens/tokens.json
@@ -0,0 +1,403 @@
+{
+	"tokens": {
+		"light": {
+			"surface-accent-primary": "#758ff8",
+			"surface-accent-hover": "#5074f6",
+			"surface-accent-clicked": "#2c5beb",
+			"text-primary": "#3d4758",
+			"text-secondary": "#718096",
+			"text-primary-inverse": "#f3f6f8",
+			"text-secondary-inverse": "#d3d6d8",
+			"text-tertiary-inverse": "#a8a9ac",
+			"surface-selected": "#ffffff",
+			"surface-disabled": "#d8d8e433",
+			"surface-secondary": "#efeff4",
+			"surface-hover": "#eeeef4",
+			"surface-primary": "#fbfbfd",
+			"border-light": "#e5e7eb",
+			"border-normal": "#9ca3af",
+			"border-accent": "#2c5beb",
+			"surface-accent-selected": "#bfdbfe4c",
+			"surface-accent-secondary": "#293676",
+			"surface-tertiary": "#ffffff",
+			"text-emphasis": "#1d2430",
+			"text-hint": "#8d93a1",
+			"text-disabled": "#a0aec0",
+			"surface-accent-secondary-hover": "#1e255f",
+			"surface-accent-secondary-clicked": "#303f82",
+			"component-button-accent-secondary": "#ffffff",
+			"text-emphasis-inverse": "#f3f4f6",
+			"reserved-ai": "#a02cde",
+			"component-virtual-node": "#dce0f1",
+			"text-accent": "#5074f6",
+			"border-selected": "#a0affa",
+			"surface-sunken": "#e8e8ef",
+			"text-tertiary": "#505c70",
+			"surface-input": "#ffffff"
+		},
+		"dark": {
+			"surface-accent-primary": "#758ff8",
+			"surface-accent-hover": "#5074f6",
+			"surface-accent-clicked": "#2c5beb",
+			"text-primary": "#d4d7dd",
+			"text-secondary": "#aab0bb",
+			"text-primary-inverse": "#2d3748",
+			"text-secondary-inverse": "#666e7b",
+			"text-tertiary-inverse": "#a4a9b2",
+			"surface-selected": "#434c5e",
+			"surface-disabled": "#21273266",
+			"surface-secondary": "#2e3440",
+			"surface-hover": "#454f64",
+			"surface-primary": "#3b4252",
+			"border-light": "#485971",
+			"border-normal": "#718096",
+			"border-accent": "#a0affa",
+			"surface-accent-selected": "#6790c34c",
+			"surface-accent-secondary": "#e8ebfb",
+			"surface-tertiary": "#434c5e",
+			"text-emphasis": "#f3f4f6",
+			"text-hint": "#b3bac8",
+			"text-disabled": "#717b88",
+			"surface-accent-secondary-hover": "#c3c9df",
+			"surface-accent-secondary-clicked": "#9da6ca",
+			"component-button-accent-secondary": "#f3f4f6",
+			"text-emphasis-inverse": "#2d3748",
+			"reserved-ai": "#f0c6fb",
+			"component-virtual-node": "#4c566a",
+			"text-accent": "#c7cefc",
+			"border-selected": "#758ff8",
+			"surface-sunken": "#2e3440",
+			"text-tertiary": "#a8aeb7",
+			"surface-input": "#2e3440"
+		},
+		"dark-3": {
+			"surface-accent-primary": "#7085db",
+			"surface-accent-hover": "#5670d5",
+			"surface-accent-clicked": "#425bbd",
+			"text-primary": "#d4d7dd",
+			"text-secondary": "#a9b0ba",
+			"text-primary-inverse": "#2d3748",
+			"text-secondary-inverse": "#666e7b",
+			"text-tertiary-inverse": "#a4a9b2",
+			"surface-selected": "#434c5e",
+			"surface-disabled": "#212732",
+			"surface-secondary": "#272c35",
+			"surface-hover": "#454f64",
+			"surface-primary": "#2e3441",
+			"border-light": "#374457",
+			"border-normal": "#a9b0ba",
+			"border-accent": "#a0affa",
+			"surface-accent-selected": "#6790c44c",
+			"surface-accent-secondary": "#e8ebfb",
+			"surface-tertiary": "#353c4a",
+			"text-emphasis": "#eeeff2",
+			"text-hint": "#8d93a1",
+			"text-disabled": "#9098a2",
+			"surface-accent-secondary-hover": "#c3c9df",
+			"surface-accent-secondary-clicked": "#9da6ca",
+			"component-button-accent-secondary": "#f3f4f6",
+			"text-emphasis-inverse": "#2d3748",
+			"reserved-ai": "#f0c6fb",
+			"component-virtual-node": "#4c566a",
+			"text-accent": "#c7cefc",
+			"border-selected": "#758ff8",
+			"surface-sunken": "#242832",
+			"text-tertiary": "#a8aeb7",
+			"surface-input": "#292e38"
+		}
+	},
+	"primitives": {
+		"light": {
+			"light-blue": "#bcd4fc",
+			"blue": "#5e81ac",
+			"dark-blue": "#394a6d",
+			"accent-blue": "#2c5beb",
+			"transparent": "#ffffff00",
+			"deep-blue-900": "#1e255f",
+			"deep-blue-800": "#293676",
+			"deep-blue-700": "#303f82",
+			"deep-blue-600": "#39498e",
+			"deep-blue-500": "#3f5097",
+			"deep-blue-400": "#5b6aa5",
+			"deep-blue-300": "#7784b4",
+			"deep-blue-200": "#9da6ca",
+			"deep-blue-100": "#c3c9df",
+			"deep-blue-50": "#e7eaf2",
+			"luminance-blue-900": "#1e3a8a",
+			"luminance-blue-800": "#0d3cc5",
+			"luminance-blue-700": "#1847d2",
+			"luminance-blue-600": "#2652df",
+			"luminance-blue-500": "#2c5beb",
+			"luminance-blue-400": "#5074f6",
+			"luminance-blue-300": "#758ff8",
+			"luminance-blue-200": "#a0affa",
+			"luminance-blue-100": "#c7cefc",
+			"luminance-blue-50": "#e9ecfe",
+			"nord-0": "#2e3440",
+			"nord-1": "#3b4252",
+			"nord-2": "#434c5e",
+			"nord-3": "#4c566a",
+			"nord-5": "#e5e9f0",
+			"nord-6": "#eceff4",
+			"nord-7": "#8fbcbb",
+			"nord-8": "#88c0d0",
+			"nord-9": "#81a1c1",
+			"nord-10": "#5e81ac",
+			"nord-4": "#d8dee9",
+			"nord-11": "#bf616a",
+			"nord-12": "#d08770",
+			"nord-13": "#ebcb8b",
+			"nord-14": "#a3be8c",
+			"nord-15": "#b48ead"
+		}
+	},
+	"guidelines": { "mode-1": { "blue": "#5e81ac", "demo-background": "#ffffff00" } },
+	"tailwind-c-s-s-v-3-3-2": {
+		"mode-1": {
+			"black": "#000000",
+			"white": "#ffffff",
+			"slate-50": "#f8fafc",
+			"slate-100": "#f1f5f9",
+			"slate-200": "#e2e8f0",
+			"slate-300": "#cbd5e1",
+			"slate-400": "#94a3b8",
+			"slate-500": "#64748b",
+			"slate-600": "#475569",
+			"slate-700": "#334155",
+			"slate-800": "#1e293b",
+			"slate-900": "#0f172a",
+			"slate-950": "#020617",
+			"gray-50": "#f9fafb",
+			"gray-100": "#f3f4f6",
+			"gray-200": "#e5e7eb",
+			"gray-300": "#d1d5db",
+			"gray-400": "#9ca3af",
+			"gray-500": "#6b7280",
+			"gray-600": "#4b5563",
+			"gray-700": "#374151",
+			"gray-800": "#1f2937",
+			"gray-900": "#111827",
+			"gray-950": "#030712",
+			"zinc-50": "#fafafa",
+			"zinc-100": "#f4f4f5",
+			"zinc-200": "#e4e4e7",
+			"zinc-300": "#d4d4d8",
+			"zinc-400": "#a1a1aa",
+			"zinc-500": "#71717a",
+			"zinc-600": "#52525b",
+			"zinc-700": "#3f3f46",
+			"zinc-800": "#27272a",
+			"zinc-900": "#18181b",
+			"zinc-950": "#09090b",
+			"neutral-50": "#fafafa",
+			"neutral-100": "#f5f5f5",
+			"neutral-200": "#e5e5e5",
+			"neutral-300": "#d4d4d4",
+			"neutral-400": "#a3a3a3",
+			"neutral-500": "#737373",
+			"neutral-600": "#525252",
+			"neutral-700": "#404040",
+			"neutral-800": "#262626",
+			"neutral-900": "#171717",
+			"neutral-950": "#0a0a0a",
+			"stone-50": "#fafaf9",
+			"stone-100": "#f5f5f4",
+			"stone-200": "#e7e5e4",
+			"stone-300": "#d6d3d1",
+			"stone-400": "#a8a29e",
+			"stone-500": "#78716c",
+			"stone-600": "#57534e",
+			"stone-700": "#44403c",
+			"stone-800": "#292524",
+			"stone-900": "#1c1917",
+			"stone-950": "#0c0a09",
+			"red-50": "#fef2f2",
+			"red-100": "#fee2e2",
+			"red-200": "#fecaca",
+			"red-300": "#fca5a5",
+			"red-400": "#f87171",
+			"red-500": "#ef4444",
+			"red-600": "#dc2626",
+			"red-700": "#b91c1c",
+			"red-800": "#991b1b",
+			"red-900": "#7f1d1d",
+			"red-950": "#450a0a",
+			"orange-50": "#fff7ed",
+			"orange-100": "#ffedd5",
+			"orange-200": "#fed7aa",
+			"orange-300": "#fdba74",
+			"orange-400": "#fb923c",
+			"orange-500": "#f97316",
+			"orange-600": "#ea580c",
+			"orange-700": "#c2410c",
+			"orange-800": "#9a3412",
+			"orange-900": "#7c2d12",
+			"orange-950": "#431407",
+			"amber-50": "#fffbeb",
+			"amber-100": "#fef3c7",
+			"amber-200": "#fde68a",
+			"amber-300": "#fcd34d",
+			"amber-400": "#fbbf24",
+			"amber-500": "#f59e0b",
+			"amber-600": "#d97706",
+			"amber-700": "#b45309",
+			"amber-800": "#92400e",
+			"amber-900": "#78350f",
+			"amber-950": "#451a03",
+			"yellow-50": "#fefce8",
+			"yellow-100": "#fef9c3",
+			"yellow-200": "#fef08a",
+			"yellow-300": "#fde047",
+			"yellow-400": "#facc15",
+			"yellow-500": "#eab308",
+			"yellow-600": "#ca8a04",
+			"yellow-700": "#a16207",
+			"yellow-800": "#854d0e",
+			"yellow-900": "#713f12",
+			"yellow-950": "#422006",
+			"lime-50": "#f7fee7",
+			"lime-100": "#ecfccb",
+			"lime-200": "#d9f99d",
+			"lime-300": "#bef264",
+			"lime-400": "#a3e635",
+			"lime-500": "#84cc16",
+			"lime-600": "#65a30d",
+			"lime-700": "#4d7c0f",
+			"lime-800": "#3f6212",
+			"lime-900": "#365314",
+			"lime-950": "#1a2e05",
+			"green-50": "#f0fdf4",
+			"green-100": "#dcfce7",
+			"green-200": "#bbf7d0",
+			"green-300": "#86efac",
+			"green-400": "#4ade80",
+			"green-500": "#22c55e",
+			"green-600": "#16a34a",
+			"green-700": "#15803d",
+			"green-800": "#166534",
+			"green-900": "#14532d",
+			"green-950": "#052e16",
+			"emerald-50": "#ecfdf5",
+			"emerald-100": "#d1fae5",
+			"emerald-200": "#a7f3d0",
+			"emerald-300": "#6ee7b7",
+			"emerald-400": "#34d399",
+			"emerald-500": "#10b981",
+			"emerald-600": "#059669",
+			"emerald-700": "#047857",
+			"emerald-800": "#065f46",
+			"emerald-900": "#064e3b",
+			"emerald-950": "#022c22",
+			"teal-50": "#f0fdfa",
+			"teal-100": "#ccfbf1",
+			"teal-200": "#99f6e4",
+			"teal-300": "#5eead4",
+			"teal-400": "#2dd4bf",
+			"teal-500": "#14b8a6",
+			"teal-600": "#0d9488",
+			"teal-700": "#0f766e",
+			"teal-800": "#115e59",
+			"teal-900": "#134e4a",
+			"teal-950": "#042f2e",
+			"cyan-50": "#ecfeff",
+			"cyan-100": "#cffafe",
+			"cyan-200": "#a5f3fc",
+			"cyan-300": "#67e8f9",
+			"cyan-400": "#22d3ee",
+			"cyan-500": "#06b6d4",
+			"cyan-600": "#0891b2",
+			"cyan-700": "#0e7490",
+			"cyan-800": "#155e75",
+			"cyan-900": "#164e63",
+			"cyan-950": "#083344",
+			"sky-50": "#f0f9ff",
+			"sky-100": "#e0f2fe",
+			"sky-200": "#bae6fd",
+			"sky-300": "#7dd3fc",
+			"sky-400": "#38bdf8",
+			"sky-500": "#0ea5e9",
+			"sky-600": "#0284c7",
+			"sky-700": "#0369a1",
+			"sky-800": "#075985",
+			"sky-900": "#0c4a6e",
+			"sky-950": "#082f49",
+			"blue-50": "#eff6ff",
+			"blue-100": "#dbeafe",
+			"blue-200": "#bfdbfe",
+			"blue-300": "#93c5fd",
+			"blue-400": "#60a5fa",
+			"blue-500": "#3b82f6",
+			"blue-600": "#2563eb",
+			"blue-700": "#1d4ed8",
+			"blue-800": "#1e40af",
+			"blue-900": "#1e3a8a",
+			"blue-950": "#172554",
+			"indigo-50": "#eef2ff",
+			"indigo-100": "#e0e7ff",
+			"indigo-200": "#c7d2fe",
+			"indigo-300": "#a5b4fc",
+			"indigo-400": "#818cf8",
+			"indigo-500": "#6366f1",
+			"indigo-600": "#4f46e5",
+			"indigo-700": "#4338ca",
+			"indigo-800": "#3730a3",
+			"indigo-900": "#312e81",
+			"indigo-950": "#1e1b4b",
+			"violet-50": "#f5f3ff",
+			"violet-100": "#ede9fe",
+			"violet-200": "#ddd6fe",
+			"violet-300": "#c4b5fd",
+			"violet-400": "#a78bfa",
+			"violet-500": "#8b5cf6",
+			"violet-600": "#7c3aed",
+			"violet-700": "#6d28d9",
+			"violet-800": "#5b21b6",
+			"violet-900": "#4c1d95",
+			"violet-950": "#2e1065",
+			"purple-50": "#faf5ff",
+			"purple-100": "#f3e8ff",
+			"purple-200": "#e9d5ff",
+			"purple-300": "#d8b4fe",
+			"purple-400": "#c084fc",
+			"purple-500": "#a855f7",
+			"purple-600": "#9333ea",
+			"purple-700": "#7e22ce",
+			"purple-800": "#6b21a8",
+			"purple-900": "#581c87",
+			"purple-950": "#3b0764",
+			"fuchsia-50": "#fdf4ff",
+			"fuchsia-100": "#fae8ff",
+			"fuchsia-200": "#f5d0fe",
+			"fuchsia-300": "#f0abfc",
+			"fuchsia-400": "#e879f9",
+			"fuchsia-500": "#d946ef",
+			"fuchsia-600": "#c026d3",
+			"fuchsia-700": "#a21caf",
+			"fuchsia-800": "#86198f",
+			"fuchsia-900": "#701a75",
+			"fuchsia-950": "#4a044e",
+			"pink-50": "#fdf2f8",
+			"pink-100": "#fce7f3",
+			"pink-200": "#fbcfe8",
+			"pink-300": "#f9a8d4",
+			"pink-400": "#f472b6",
+			"pink-500": "#ec4899",
+			"pink-600": "#db2777",
+			"pink-700": "#be185d",
+			"pink-800": "#9d174d",
+			"pink-900": "#831843",
+			"pink-950": "#500724",
+			"rose-50": "#fff1f2",
+			"rose-100": "#ffe4e6",
+			"rose-200": "#fecdd3",
+			"rose-300": "#fda4af",
+			"rose-400": "#fb7185",
+			"rose-500": "#f43f5e",
+			"rose-600": "#e11d48",
+			"rose-700": "#be123c",
+			"rose-800": "#9f1239",
+			"rose-900": "#881337",
+			"rose-950": "#4c0519"
+		}
+	}
+}
diff --git a/frontend/src/lib/components/AIProviderPicker.svelte b/frontend/src/lib/components/AIProviderPicker.svelte
index 26b78f21f3..821302887d 100644
--- a/frontend/src/lib/components/AIProviderPicker.svelte
+++ b/frontend/src/lib/components/AIProviderPicker.svelte
@@ -229,36 +229,33 @@
 	})
 </script>
 
-<div
-	class="w-full flex flex-col gap-1 bg-surface-secondary border-[1px] border-nord-400 dark:border-nord-300 rounded-md"
->
+<div class="w-full flex flex-col gap-1 border rounded-md p-4">
 	<!-- Provider Selection -->
-	<div class="flex flex-col gap-2 m-[-1px] mt-[-1px]">
-		<ToggleButtonGroup
-			selected={value?.kind}
-			onSelected={onProviderChange}
-			{disabled}
-			wrap
-			tabListClass="w-full bg-transparent"
-		>
-			{#snippet children({ item })}
-				{#each providerOptions.slice(0, 3) as option}
-					<ToggleButton value={option.value} label={option.label} {item} class="bg-transparent" />
-				{/each}
-				<ToggleButtonMore
-					class="ml-auto"
-					togglableItems={providerOptions.slice(3)}
-					{item}
-					bind:selected={() => value?.kind, (v) => v && onProviderChange(v)}
-				/>
-			{/snippet}
-		</ToggleButtonGroup>
-	</div>
+	<ToggleButtonGroup
+		selected={value?.kind}
+		onSelected={onProviderChange}
+		{disabled}
+		wrap
+		tabListClass="w-full"
+	>
+		{#snippet children({ item })}
+			{#each providerOptions.slice(0, 3) as option}
+				<ToggleButton value={option.value} label={option.label} {item} />
+			{/each}
+			<ToggleButtonMore
+				class="ml-auto"
+				btnText={providerOptions.findIndex((p) => p.value === value.kind) >= 3 ? '' : 'More'}
+				togglableItems={providerOptions.slice(3)}
+				{item}
+				bind:selected={() => value?.kind, (v) => v && onProviderChange(v)}
+			/>
+		{/snippet}
+	</ToggleButtonGroup>
 
 	<!-- Resource Selection -->
-	<div class="flex flex-col rounded-md p-2 gap-2">
+	<div class="flex flex-col rounded-md pt-2 gap-2">
 		<div class="flex flex-col gap-1">
-			<p class="text-sm font-normal text-tertiary">resource</p>
+			<p class="text-xs font-normal text-primary">resource</p>
 			<ResourcePicker
 				bind:value={
 					() => resourceValueToPath(value?.resource),
@@ -272,13 +269,12 @@
 				disabled={disabled || !value?.kind}
 				placeholder="Select resource"
 				selectFirst={true}
-				selectInputClass="!bg-surface"
 			/>
 		</div>
 
 		<!-- Model Selection -->
 		<div class="flex flex-col gap-1">
-			<p class="text-sm font-normal text-tertiary">model</p>
+			<p class="text-xs font-normal text-primary">model</p>
 			<Select
 				{items}
 				bind:value={value.model}
@@ -293,7 +289,6 @@
 				clearable={false}
 				noItemsMsg={'No models available'}
 				bind:filterText
-				inputClass="min-h-10 !bg-surface disabled:!bg-surface-disabled"
 			/>
 		</div>
 
diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte
index 3c1161471a..a800fb70d6 100644
--- a/frontend/src/lib/components/AddUser.svelte
+++ b/frontend/src/lib/components/AddUser.svelte
@@ -75,7 +75,7 @@
 
 <Popover placement="bottom-end">
 	{#snippet trigger()}
-		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
+		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
 			Add new user
 		</Button>
 	{/snippet}
@@ -115,8 +115,7 @@
 				{/snippet}
 			</ToggleButtonGroup>
 			<Button
-				variant="contained"
-				color="blue"
+				variant="accent"
 				size="sm"
 				on:click={() => {
 					addUser().then(() => {
diff --git a/frontend/src/lib/components/ApiConnectForm.svelte b/frontend/src/lib/components/ApiConnectForm.svelte
index 3d3f3cda25..9bc2fc222c 100644
--- a/frontend/src/lib/components/ApiConnectForm.svelte
+++ b/frontend/src/lib/components/ApiConnectForm.svelte
@@ -139,7 +139,7 @@
 </script>
 
 {#if !notFound}
-	<div class="w-full flex gap-4 flex-row-reverse items-center">
+	<div class="w-full flex gap-2 flex-row-reverse items-center">
 		<Toggle
 			on:change={(e) => switchTab(e.detail)}
 			options={{
@@ -154,14 +154,7 @@
 				}}
 			>
 				{#snippet trigger()}
-					<Button
-						spacingSize="sm"
-						size="xs"
-						btnClasses="h-8"
-						color="light"
-						variant="border"
-						nonCaptureEvent
-					>
+					<Button spacingSize="sm" size="xs" variant="default" nonCaptureEvent>
 						From connection string
 					</Button>
 				{/snippet}
@@ -217,7 +210,7 @@
 		/>
 	</div>
 {:else}
-	<p class="italic text-tertiary text-xs mb-4"
+	<p class="text-primary font-normal text-xs mb-4"
 		>No corresponding resource type found in your workspace for {resourceType}. Define the value in
 		JSON directly</p
 	>
diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte
index 82d739129c..fa7393bcfc 100644
--- a/frontend/src/lib/components/AppConnectDrawer.svelte
+++ b/frontend/src/lib/components/AppConnectDrawer.svelte
@@ -45,7 +45,7 @@
 	size="800px"
 >
 	<DrawerContent
-		title="Add a Resource"
+		title="Add a resource"
 		on:close={drawer.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
@@ -64,7 +64,7 @@
 		{#snippet actions()}
 			<div class="flex gap-1">
 				{#if step > 1}
-					<Button variant="border" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
+					<Button variant="default" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
 				{/if}
 				{#if isGoogleSignin}
 					<button {disabled} on:click={appConnectInner?.next}>
@@ -75,7 +75,7 @@
 						/>
 					</button>
 				{:else}
-					<Button {disabled} on:click={appConnectInner?.next ?? (() => {})}>
+					<Button variant="accent" {disabled} on:click={appConnectInner?.next ?? (() => {})}>
 						{#if step == 2 && !manual}
 							Connect
 						{:else if step == 1}
diff --git a/frontend/src/lib/components/AppConnectInner.svelte b/frontend/src/lib/components/AppConnectInner.svelte
index 53bb63a09d..5d94f87a57 100644
--- a/frontend/src/lib/components/AppConnectInner.svelte
+++ b/frontend/src/lib/components/AppConnectInner.svelte
@@ -29,6 +29,7 @@
 	import { apiTokenApps, forceSecretValue, linkedSecretValue } from './app_connect'
 	import type { SchemaProperty } from '$lib/common'
 	import Tooltip from './Tooltip.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	interface Props {
 		step?: number
@@ -540,15 +541,14 @@
 			/>
 		</div>
 
-		<h2 class="mb-4">OAuth APIs</h2>
-		<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+		<h2 class="mb-4 text-sm font-semibold text-emphasis">OAuth APIs</h2>
+		<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center">
 			{#if filteredConnects}
 				{#each filteredConnects as { key }}
 					<Button
-						size="sm"
-						variant="border"
-						color={key === resourceType ? 'blue' : 'light'}
-						btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
+						unifiedSize="md"
+						variant="default"
+						selected={key === resourceType}
 						on:click={() => {
 							manual = false
 							resourceType = key
@@ -565,7 +565,7 @@
 			{/if}
 		</div>
 		{#if connects && connects.length == 0}
-			<div class="text-secondary text-sm w-full"
+			<div class="text-secondary text-xs w-full"
 				>No OAuth APIs has been setup on the instance. To add oauth APIs, first sync the resource
 				types with the hub, then add oauth configuration. See <a
 					href="https://www.windmill.dev/docs/misc/setup_oauth">documentation</a
@@ -573,10 +573,10 @@
 			</div>
 		{/if}
 
-		<h2 class="mt-8 mb-4">Others</h2>
+		<h2 class="mt-8 mb-2 text-sm font-semibold text-emphasis">Others</h2>
 
 		{#if connectsManual && connectsManual?.length < 10}
-			<div class="text-secondary p-2">
+			<div class="text-secondary text-xs p-2">
 				Resource Types have not been synced with the hub. Go to the admins workspace to sync them
 				(and add a schedule to do daily):
 				<p class="mt-4"
@@ -590,15 +590,14 @@
 			</div>
 		{/if}
 
-		<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+		<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center">
 			{#if filteredConnectsManual}
 				{#each filteredConnectsManual as { key }}
 					{#if nativeLanguagesCategory.includes(key)}
 						<Button
-							size="sm"
-							variant="border"
-							color={key === resourceType ? 'blue' : 'light'}
-							btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
+							unifiedSize="md"
+							variant="default"
+							selected={key === resourceType}
 							on:click={() => {
 								manual = true
 								resourceType = key
@@ -612,7 +611,6 @@
 			{/if}
 		</div>
 
-		<div class="mt-8 mb-4"></div>
 		<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 			{#if filteredConnectsManual}
 				{#each filteredConnectsManual as { key }}
@@ -622,7 +620,7 @@
 							aiId={`app-connect-inner-${key}`}
 							aiDescription={`Connect to ${key}`}
 							size="sm"
-							variant="border"
+							variant="default"
 							color={key === resourceType ? 'blue' : 'light'}
 							btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
 							on:click={() => {
@@ -642,60 +640,75 @@
 			{/if}
 		</div>
 	{:else if step == 2 && manual}
-		<Path
-			bind:error={pathError}
-			bind:path
-			initialPath=""
-			namePlaceholder={resourceType}
-			kind="resource"
-		/>
+		<div class="flex flex-col gap-8">
+			<Path
+				bind:error={pathError}
+				bind:path
+				initialPath=""
+				namePlaceholder={resourceType}
+				kind="resource"
+			/>
 
-		{#if apiTokenApps[resourceType]}
-			<h2 class="mt-4 mb-2">Instructions</h2>
-			<div class="pl-10">
-				<ol class="list-decimal">
-					{#each apiTokenApps[resourceType].instructions as step}
-						<li>
-							{@html step}
-						</li>
-					{/each}
-				</ol>
-			</div>
-			{#if apiTokenApps[resourceType].img}
-				<div class="mt-4 w-full overflow-hidden">
-					<img class="m-auto max-h-60" alt="connect" src={base + apiTokenApps[resourceType].img} />
+			{#if apiTokenApps[resourceType]}
+				<h2 class="mt-4 mb-2">Instructions</h2>
+				<div class="pl-10">
+					<ol class="list-decimal">
+						{#each apiTokenApps[resourceType].instructions as step}
+							<li>
+								{@html step}
+							</li>
+						{/each}
+					</ol>
 				</div>
+				{#if apiTokenApps[resourceType].img}
+					<div class="mt-4 w-full overflow-hidden">
+						<img
+							class="m-auto max-h-60"
+							alt="connect"
+							src={base + apiTokenApps[resourceType].img}
+						/>
+					</div>
+				{/if}
+			{:else if !emptyString(resourceTypeInfo?.description)}
+				<label class="flex flex-col gap-1">
+					<span class="text-sm font-semibold text-emphasis">
+						{resourceTypeInfo?.name} description
+					</span>
+					<div class="text-xs text-primary font-normal">
+						<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+					</div>
+				</label>
+			{/if}
+			{#if resourceType == 'postgresql' || resourceType == 'mysql' || resourceType == 'mongodb'}
+				<WhitelistIp />
 			{/if}
-		{:else if !emptyString(resourceTypeInfo?.description)}
-			<h4 class="mt-8 mb-2">{resourceTypeInfo?.name} description</h4>
-			<div class="text-sm">
-				<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
-			</div>
-		{/if}
-		{#if resourceType == 'postgresql' || resourceType == 'mysql' || resourceType == 'mongodb'}
-			<WhitelistIp />
-		{/if}
 
-		<h4 class="mt-8 inline-flex items-center gap-4"
-			>Resource description <Required required={false} />
-			<div class="flex gap-1 items-center">
-				<Toggle size="xs" bind:checked={renderDescription} />
-				<Pen size={14} />
+			<div class="flex flex-col gap-1">
+				<label class="inline-flex items-center gap-2" for="resource-description">
+					<span class="text-xs font-semibold text-emphasis">Resource description</span>
+					<Required required={false} />
+					<div class="flex gap-1 items-center">
+						<Toggle size="xs" bind:checked={renderDescription} />
+						<Pen size={14} />
+					</div>
+				</label>
+				{#if renderDescription}
+					<div>
+						<div class="flex flex-row-reverse text-2xs text-primary -mt-4">GH Markdown</div>
+						<textarea
+							id="resource-description"
+							use:autosize
+							bind:value={description}
+							placeholder={'Resource description'}
+						></textarea>
+					</div>
+				{:else if description == undefined || description == ''}
+					<div class="text-xs text-primary font-normal">No description provided</div>
+				{:else}
+					<GfmMarkdown md={description} />
+				{/if}
 			</div>
-		</h4>
-		{#if renderDescription}
-			<div>
-				<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
-				<textarea use:autosize bind:value={description} placeholder={'Resource description'}
-				></textarea>
-			</div>
-		{:else if description == undefined || description == ''}
-			<div class="text-sm text-tertiary">No description provided</div>
-		{:else}
-			<div class="mt-2"></div>
-			<GfmMarkdown md={description} />
-		{/if}
-		<div class="mt-12">
+
 			{#key resourceTypeInfo}
 				<ApiConnectForm
 					bind:linkedSecret
@@ -710,95 +723,111 @@
 		</div>
 	{:else if step == 2 && !manual}
 		{#if manual == false && resourceType != ''}
-			<h1 class="mb-4">{resourceType}</h1>
-			<div class="my-4 text-secondary"
-				>Create a resource backed by an OAuth connection, whose token is fetched from the external
-				services and refreshed automatically if needed before expiration.</div
-			>
-			<h4 class="mb-2">Description</h4>
-			<div class="text-sm mb-8">
-				<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
-			</div>
+			<div class="flex flex-col gap-8">
+				<div class="flex flex-col gap-1">
+					<h2 class="text-lg font-semibold text-emphasis">{resourceType}</h2>
+					<div class="text-primary font-normal text-xs"
+						>Create a resource backed by an OAuth connection, whose token is fetched from the
+						external services and refreshed automatically if needed before expiration.</div
+					>
+				</div>
 
-			{#if supportsClientCredentials}
-				<div style="margin-bottom: 16px;">
-					<h3 class="mb-4">Authentication Method</h3>
-					<div style="display: flex; align-items: center; gap: 8px;">
-						<input
-							type="checkbox"
-							style="width: 16px; height: 16px; margin: 0;"
-							bind:checked={useClientCredentials}
-						/>
-						<span style="font-size: 14px; font-weight: 600;">Use Client Credentials Flow</span>
-						<Tooltip>
-							Server-to-server authentication without user interaction.
-							<br /><br />
-							Provide your own OAuth client credentials for this resource.
-						</Tooltip>
+				{#if resourceTypeInfo?.description}
+					<div class="flex flex-col gap-1">
+						<h3 class="text-sm font-semibold text-emphasis">Description</h3>
+						<div class="text-xs text-primary font-normal">
+							<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+						</div>
 					</div>
+				{/if}
 
-					{#if useClientCredentials}
-						<div style="margin-top: 16px;">
-							<label style="display: block; margin-bottom: 8px;">
-								<span style="font-weight: 600;">Client ID</span>
-								<input
-									type="text"
-									bind:value={clientId}
-									placeholder="Enter OAuth client ID"
-									class="w-full p-2 border border-gray-300 rounded mt-1"
-									required
-								/>
-							</label>
-							<label style="display: block;">
-								<span style="font-weight: 600;">Client Secret</span>
-								<input
-									type="password"
-									bind:value={clientSecret}
-									placeholder="Enter OAuth client secret"
-									class="w-full p-2 border border-gray-300 rounded mt-1"
-									required
-								/>
-							</label>
-							<label style="display: block; margin-top: 8px;">
-								<span style="font-weight: 600;">Token URL Override (Optional)</span>
-								<input
-									type="url"
-									bind:value={tokenUrl}
-									placeholder="Custom token endpoint URL"
-									class="w-full p-2 border border-gray-300 rounded mt-1"
-								/>
-								<div style="font-size: 12px; color: #666; margin-top: 4px;">
-									Override the instance-level token URL for this resource
-								</div>
-							</label>
+				{#if supportsClientCredentials}
+					<div>
+						<h3 class="text-sm font-semibold text-emphasis mb-1">Authentication Method</h3>
+						<div class="flex items-center gap-2 mb-2">
+							<input
+								type="checkbox"
+								style="width: 16px; height: 16px; margin: 0;"
+								bind:checked={useClientCredentials}
+								id="useClienCrediential"
+							/>
+							<label for="useClienCrediential" class="text-xs font-semibold text-emphasis"
+								>Use Client Credentials Flow</label
+							>
+							<Tooltip>
+								Server-to-server authentication without user interaction.
+								<br /><br />
+								Provide your own OAuth client credentials for this resource.
+							</Tooltip>
+						</div>
+
+						{#if useClientCredentials}
+							<form class="flex flex-col gap-6">
+								<label class="flex flex-col gap-1">
+									<span class="text-xs font-semibold text-emphasis">Client ID</span>
+									<TextInput
+										bind:value={clientId}
+										inputProps={{ placeholder: 'Enter OAuth client ID', required: true }}
+									/>
+								</label>
+								<label class="flex flex-col gap-1">
+									<span class="text-xs font-semibold text-emphasis">Client Secret</span>
+									<TextInput
+										inputProps={{
+											type: 'password',
+											placeholder: 'Enter OAuth client secret',
+											required: true
+										}}
+										bind:value={clientSecret}
+									/>
+								</label>
+								<label class="flex flex-col gap-1">
+									<span class="text-xs font-semibold text-emphasis"
+										>Token URL Override (Optional)</span
+									>
+									<div class="text-xs text-primary font-normal">
+										Override the instance-level token URL for this resource
+									</div>
+									<TextInput
+										inputProps={{
+											type: 'url',
+											placeholder: 'Custom token endpoint URL',
+											required: false
+										}}
+										bind:value={tokenUrl}
+									/>
+								</label>
+							</form>
+						{/if}
+					</div>
+				{/if}
+
+				<div class="flex flex-col gap-1">
+					<h3 class="text-xs font-semibold text-emphasis flex gap-4"
+						>Scopes <button
+							onclick={() => {
+								editScopes = !editScopes
+							}}><Pen size={14} /></button
+						></h3
+					>
+
+					{#if editScopes}
+						<OauthScopes bind:scopes />
+					{:else}
+						<div class="flex flex-col gap-1">
+							{#each scopes as scope}
+								<div class="py-0.5 pl-2 text-xs">- {scope}</div>
+							{/each}
 						</div>
 					{/if}
 				</div>
-			{/if}
-
-			<h3 class="mb-4 flex gap-4"
-				>Scopes <button
-					onclick={() => {
-						editScopes = !editScopes
-					}}><Pen size={14} /></button
-				></h3
-			>
-
-			{#if editScopes}
-				<OauthScopes bind:scopes />
-			{:else}
-				<div class="flex flex-col gap-1">
-					{#each scopes as scope}
-						<div class="py-0.5 pl-2 text-xs">- {scope}</div>
-					{/each}
-				</div>
-			{/if}
+			</div>
 		{/if}
 	{:else if step == 3 && !manual && !express}
 		{#if useClientCredentials}
-			Connecting with client credentials...
+			<span class="text-xs text-primary font-normal"> Connecting with client credentials... </span>
 		{:else}
-			Finish connection in popup window
+			<span class="text-xs text-primary font-normal"> Finish connection in popup window </span>
 		{/if}
 	{:else}
 		<Path
@@ -809,16 +838,16 @@
 			kind="resource"
 		/>
 		{#if apiTokenApps[resourceType] || !manual}
-			<ul class="mt-10">
-				<li>
+			<ul class="mt-6">
+				<li class="text-xs text-primary font-normal">
 					1. A secret variable containing the {apiTokenApps[resourceType]?.linkedSecret ?? 'token'}
-					<span class="font-bold">{truncateRev(value, 5, '*****')}</span>
+					<span class="font-semibold text-emphasis">{truncateRev(value, 5, '*****')}</span>
 					will be stored a
-					<span class="font-mono whitespace-nowrap">{path}</span>.
+					<span class="font-mono whitespace-nowrap text-emphasis">{path}</span>.
 				</li>
-				<li class="mt-4">
+				<li class="mt-2 text-xs text-primary font-normal">
 					2. The resource containing that token will be stored at the same path <span
-						class="font-mono whitespace-nowrap">{path}</span
+						class="font-mono whitespace-nowrap text-emphasis">{path}</span
 					>. The Variable and Resource will be "linked together", they will be deleted and renamed
 					together.
 				</li></ul
diff --git a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
index 8e151ee83d..9e3fe4b55a 100644
--- a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
+++ b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
@@ -39,7 +39,7 @@
 		<div class="flex flex-row-reverse w-full pb-2">
 			<div class="flex gap-2">
 				{#if step > 2}
-					<Button variant="border" on:click={appConnect?.back ?? (() => {})}>Back</Button>
+					<Button variant="default" on:click={appConnect?.back ?? (() => {})}>Back</Button>
 				{/if}
 
 				<Button {disabled} on:click={appConnect?.next ?? (() => {})}>
diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index be042b95e5..c99f994728 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/frontend/src/lib/components/ArgInfo.svelte
@@ -40,15 +40,15 @@
 		{#snippet actions()}
 			<Button
 				on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
-				color="light"
-				size="xs"
+				variant="subtle"
+				unifiedSize="md"
 				startIcon={{ icon: ClipboardCopy }}
 			>
 				Copy
 			</Button>
 		{/snippet}
 		{#if isString(jsonViewerContent)}
-			<pre>{jsonViewerContent}</pre>
+			<pre class="text-xs whitespace-pre-wrap">{jsonViewerContent}</pre>
 		{:else}
 			<ObjectViewer pureViewer json={jsonViewerContent} />
 		{/if}
@@ -56,7 +56,7 @@
 </Drawer>
 
 {#if value == undefined || value == null}
-	<span class="text-tertiary">null</span>
+	<span class="text-primary">null</span>
 {:else if value === '<function call>'}
 	{'<function call>'}<Tooltip
 		>The arg was none and the default argument of the script is a function call, hence the actual
@@ -64,7 +64,7 @@
 	>
 {:else if isString(value) && value.startsWith('$res:')}
 	<button
-		class="text-xs text-blue-500"
+		class="text-xs text-accent"
 		onclick={async () => {
 			await getResource(value.substring('$res:'.length))
 			jsonViewer?.toggleDrawer()
@@ -72,7 +72,7 @@
 	>
 {:else if isString(value) && value.startsWith('$var:')}
 	<button
-		class="text-xs text-blue-500"
+		class="text-xs text-accent"
 		onclick={async () => {
 			await getVariable(value.substring('$res:'.length))
 			jsonViewer?.toggleDrawer()
@@ -83,7 +83,7 @@
 		{truncate(JSON.stringify(value), 80)}
 		{#if JSON.stringify(value).length > 80}
 			<button
-				class="text-xs text-blue-500"
+				class="text-xs text-accent"
 				onclick={() => {
 					jsonViewerContent = value
 					jsonViewer?.toggleDrawer()
@@ -95,7 +95,7 @@
 	<div class="relative">
 		{#if JSON.stringify(value).length > 120}
 			<button
-				class="text-xs absolute top-0 right-8 text-tertiary"
+				class="text-xs absolute top-0 right-8 text-primary"
 				onclick={() => {
 					jsonViewerContent = value
 					jsonViewer?.toggleDrawer()
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 027ad7495e..501c347ffe 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -47,6 +47,7 @@
 	import { getJsonSchemaFromResource } from './schema/jsonSchemaResource.svelte'
 	import AIProviderPicker from './AIProviderPicker.svelte'
 	import TextInput, { inputBaseClass, inputBorderClass } from './text_input/TextInput.svelte'
+	import FileInput from './common/fileInput/FileInput.svelte'
 
 	interface Props {
 		label?: string
@@ -368,17 +369,16 @@
 		evalValueToRaw()
 	})
 
-	function fileChanged(e: any, cb: (v: string | undefined) => void) {
-		let t = e.target
-		if (t && 'files' in t && t.files.length > 0) {
-			let reader = new FileReader()
-			reader.onload = (e: any) => {
-				cb(e.target.result.split('base64,')[1])
-			}
-			reader.readAsDataURL(t.files[0])
-		} else {
+	function fileChangedInner(file: File | undefined, cb: (v: string | undefined) => void) {
+		if (!file) {
 			cb(undefined)
+			return
 		}
+		let reader = new FileReader()
+		reader.onload = (e: any) => {
+			cb(e.target.result.split('base64,')[1])
+		}
+		reader.readAsDataURL(file)
 	}
 
 	export function focus() {
@@ -531,10 +531,10 @@
 
 {#snippet variableInput()}
 	{#if variableEditor}
-		<div class="text-sm text-hint">
+		<div class="text-2xs text-hint">
 			{#if value && typeof value == 'string' && value?.startsWith('$var:')}
 				Linked to variable <button
-					class="text-nord-950 underline font-normal"
+					class="text-accent underline font-normal"
 					onclick={() => variableEditor?.editVariable?.(value.slice(5))}>{value.slice(5)}</button
 				>
 			{/if}
@@ -543,7 +543,7 @@
 {/snippet}
 {#snippet resourceInput()}
 	{#if variableEditor}
-		<div class="text-sm text-tertiary">
+		<div class="text-sm text-primary">
 			{#if value && typeof value == 'string' && value?.startsWith('$res:')}
 				Linked to resource <a
 					target="_blank"
@@ -558,7 +558,7 @@
 <!-- svelte-ignore a11y_autofocus -->
 <div
 	class={twMerge(
-		'flex flex-col w-full rounded-md relative group',
+		'flex flex-col gap-1 w-full rounded-md relative group',
 		minW ? 'min-w-[250px]' : '',
 		diffStatus?.diff ? 'px-2' : '',
 		diffStatus?.diff == 'added'
@@ -600,7 +600,7 @@
 		</div>
 	{/if}
 	{#if displayHeader}
-		<div class="flex min-h-7 items-end pb-1">
+		<div class="flex items-end">
 			<FieldHeader
 				prettify={prettifyHeader}
 				label={title && !emptyString(title) ? title : label}
@@ -612,10 +612,7 @@
 				{simpleTooltip}
 				{lightHeader}
 				{displayType}
-				labelClass={twMerge(
-					lightHeaderFont ? '!font-normal !text-sm text-tertiary' : '',
-					css?.label?.class
-				)}
+				labelClass={twMerge(lightHeaderFont ? '!font-normal text-primary' : '', css?.label?.class)}
 			/>
 			<div class="ml-auto flex gap-2">
 				{#if displayJsonToggleHeader}
@@ -640,6 +637,12 @@
 		</div>
 	{/if}
 
+	{#if description}
+		<div class={twMerge('text-xs text-secondary', css?.description?.class)}>
+			<pre class="font-main whitespace-normal">{description}</pre>
+		</div>
+	{/if}
+
 	<div class="flex space-x-1">
 		{#if inputCat == 'number'}
 			{#if extra['min'] != undefined && extra['max'] != undefined}
@@ -770,7 +773,7 @@
 						<Module.default code={JSON.stringify(value, null, 2)} bind:value />
 					{/await}
 				{:else}
-					<div class="px-3 pt-6 border rounded-md w-full">
+					<div class="px-4 pt-4 border rounded-md w-full">
 						<SchemaForm
 							lightHeaderFont
 							{onlyMaskPassword}
@@ -846,10 +849,10 @@
 														{@render deleteItemBtn()}
 													</div>
 												{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-													<input
-														type="file"
-														class="my-6"
-														onchange={(x) => fileChanged(x, (val) => (value[i] = val))}
+													<FileInput
+														class="w-full"
+														on:change={(x) =>
+															fileChangedInner(x.detail?.[0], (val) => (value[i] = val))}
 														multiple={false}
 													/>
 													{@render deleteItemBtn()}
@@ -955,10 +958,9 @@
 							{/key}
 						</div>
 						<Button
-							variant="border"
+							variant="default"
 							color="light"
 							size="xs"
-							btnClasses="text-tertiary py-2.5"
 							wrapperClasses="w-full {Array.isArray(value) && value.length > 0 ? 'mt-1.5' : ''}"
 							on:click={() => {
 								if (value == undefined || !Array.isArray(value)) {
@@ -988,7 +990,7 @@
 					{/if}
 				</div>
 				{#if !displayHeader}
-					<div class="block mt-2.5 pl-2">
+					<div class="block mt-2 pl-2">
 						<Toggle
 							on:change={(e) => {
 								// Once the user has changed the input type, we should not change it back automatically
@@ -1010,7 +1012,7 @@
 		{:else if inputCat == 'dynamic'}
 			<DynamicInput name={label} {otherArgs} {helperScript} bind:value format={format ?? ''} />
 		{:else if inputCat == 'resource-object' && resourceTypes == undefined}
-			<span class="text-2xs text-tertiary">Loading resource types...</span>
+			<span class="text-2xs text-primary">Loading resource types...</span>
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
 			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
@@ -1028,7 +1030,7 @@
 			/>
 		{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson}
 			{#if oneOf && oneOf.length >= 2}
-				<div class="flex flex-col gap-2 w-full border rounded-md p-2">
+				<div class="flex flex-col gap-2 w-full border rounded-md p-4">
 					{#if oneOf && oneOf.length >= 2}
 						<ToggleButtonGroup
 							selected={oneOfSelected}
@@ -1178,7 +1180,7 @@
 					{/if}
 				</div>
 			{:else if properties && Object.keys(properties).length > 0 && inputCat !== 'list'}
-				<div class={hideNested ? 'hidden' : 'px-3 pt-6 border rounded-md w-full'}>
+				<div class={hideNested ? 'hidden' : 'px-4 pt-4 border rounded-md w-full'}>
 					{#if orderEditable}
 						<SchemaFormDnd
 							lightHeaderFont
@@ -1293,7 +1295,6 @@
 						dispatch('blur')
 					}}
 					enumLabels={extra['enumLabels']}
-					selectClass="min-h-10"
 				/>
 			</div>
 		{:else if inputCat == 'date'}
@@ -1331,19 +1332,15 @@
 				</div>
 			{/if}
 		{:else if inputCat == 'base64'}
-			<div class="flex flex-col my-6 w-full">
-				<input
-					{autofocus}
-					type="file"
-					onchange={(x) => fileChanged(x, (val) => (value = val))}
+			<div class="flex flex-col w-full">
+				<FileInput
+					on:change={(x) => fileChangedInner(x.detail?.[0], (val) => (value = val))}
 					multiple={false}
 				/>
 				{#if value?.length}
-					<div class="text-2xs text-tertiary mt-1"
-						>File length: {value.length} base64 chars ({(value.length / 1024 / 1024).toFixed(
-							2
-						)}MB)</div
-					>
+					<div class="text-2xs text-primary mt-1">
+						File length: {value.length} base64 chars ({(value.length / 1024 / 1024).toFixed(2)}MB)
+					</div>
 				{/if}
 			</div>
 		{:else if inputCat == 'resource-string'}
@@ -1413,16 +1410,17 @@
 					{#if !disabled && itemPicker && extra?.['disableVariablePicker'] != true}
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
 						<button
-							class="absolute {password || extra?.['password'] == true
-								? 'right-16 top-1.5'
-								: 'right-1 top-[7px]'} opacity-0 group-hover:opacity-100 duration-200 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer"
+							class={twMerge(
+								'absolute opacity-0 group-hover:opacity-100 duration-200 py-1 min-w-min !px-2 items-center text-gray-800 bg-surface-secondary border rounded center-center hover:bg-gray-300 transition-all cursor-pointer',
+								password || extra?.['password'] == true ? 'right-16' : 'right-1'
+							)}
 							onclick={() => {
 								pickForField = label
 								itemPicker?.openDrawer?.()
 							}}
 							title="Insert a Variable"
 						>
-							<DollarSign class="!text-tertiary" size={14} />
+							<DollarSign class="!text-primary" size={14} />
 						</button>
 					{/if}
 				</div>
@@ -1433,20 +1431,14 @@
 		{@render actions?.()}
 	</div>
 
-	{#if description}
-		<div class={twMerge('text-2xs italic py-1 text-hint', css?.description?.class)}>
-			<pre class="font-main whitespace-normal">{description}</pre>
-		</div>
-	{/if}
-
 	{#if !compact || (error && error != '')}
-		{#if disabled || error === ''}
-			&nbsp;
-		{:else}
-			<div class="text-right text-xs text-red-600 dark:text-red-400 mb-2">
+		<div class="text-right text-xs leading-3 text-red-600 dark:text-red-400 mb-2">
+			{#if disabled || error === ''}
+				&nbsp;
+			{:else}
 				{error}
-			</div>
-		{/if}
+			{/if}
+		</div>
 	{:else if !noMargin}
 		<div class="mb-2"></div>
 	{/if}
diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
index 8f9f4f537c..064faa6950 100644
--- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte
+++ b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
@@ -146,8 +146,7 @@
 		{#if canEditResourceType || originalType == 'string[]' || originalType == 'object[]'}
 			<div class="flex flex-row mb-1 mt-2">
 				<Button
-					color="light"
-					variant="border"
+					variant="default"
 					size="sm"
 					on:click={() => {
 						if (itemsType?.enum) {
@@ -160,8 +159,7 @@
 					<Plus size={14} />
 				</Button>
 				<Button
-					color="light"
-					variant="border"
+					variant="default"
 					size="sm"
 					btnClasses="ml-2"
 					on:click={() => itemsType?.enum && (itemsType.enum = undefined)}
diff --git a/frontend/src/lib/components/AssignableTags.svelte b/frontend/src/lib/components/AssignableTags.svelte
index 4786a08953..9e39ca0bcc 100644
--- a/frontend/src/lib/components/AssignableTags.svelte
+++ b/frontend/src/lib/components/AssignableTags.svelte
@@ -8,14 +8,14 @@
 
 	interface Props {
 		placement?: 'bottom-end' | 'top-end'
-		color?: 'nord' | 'dark'
+		variant?: 'default' | 'accent'
 		disabled?: boolean
 		showWorkspaceRestriction?: boolean
 	}
 
 	let {
 		placement = 'bottom-end',
-		color = 'dark',
+		variant = 'default',
 		disabled = false,
 		showWorkspaceRestriction = false
 	}: Props = $props()
@@ -28,7 +28,7 @@
 	usePointerDownOutside
 >
 	{#snippet trigger()}
-		<Button {color} size="xs" nonCaptureEvent={true} {disabled}>
+		<Button {variant} unifiedSize="md" nonCaptureEvent={true} {disabled}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
 					>Tags are assigned to scripts and flows. Workers only accept jobs that correspond to their
diff --git a/frontend/src/lib/components/AssignableTagsInner.svelte b/frontend/src/lib/components/AssignableTagsInner.svelte
index eacd384d5c..28d193b2db 100644
--- a/frontend/src/lib/components/AssignableTagsInner.svelte
+++ b/frontend/src/lib/components/AssignableTagsInner.svelte
@@ -93,7 +93,7 @@
 		</div>
 		<input type="text" bind:value={newTag} />
 		{#if extractedCustomTag}
-			<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+			<div class="text-2xs text-primary p-2 bg-gray-50 rounded border">
 				<div class="font-medium mb-1">Workspace specific tag</div>
 				<div>
 					<b>Tag:</b>
@@ -110,7 +110,7 @@
 			</div>
 		{:else if newTag.trim()}
 			{#if newTag.includes('(') || newTag.includes(')') || newTag.includes('+') || newTag.includes('^') || ((newTag.includes('.') || newTag.includes('$args[')) && !dynamicTag)}
-				<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+				<div class="text-2xs text-primary p-2 bg-gray-50 rounded border">
 					<div class="font-medium mb-1 text-red-500">Invalid tag</div>
 					<div>
 						<b>Tag:</b>
@@ -118,7 +118,7 @@
 					</div>
 				</div>
 			{:else}
-				<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+				<div class="text-2xs text-primary p-2 bg-gray-50 rounded border">
 					<div class="font-medium mb-1">
 						{#if newTag.includes('$workspace') || newTag.includes('$args')}
 							Dynamic tag
@@ -141,8 +141,7 @@
 		{/if}
 
 		<Button
-			variant="contained"
-			color="blue"
+			variant="accent"
 			size="sm"
 			on:click={async () => {
 				await SettingService.setGlobal({
@@ -158,7 +157,7 @@
 			disabled={newTag.trim() == '' || !($superadmin || $devopsRole)}
 		>
 			Add {#if !($superadmin || $devopsRole)}
-				<span class="text-2xs text-tertiary">superadmin or devops only</span>
+				<span class="text-2xs text-primary">superadmin or devops only</span>
 			{/if}
 		</Button>
 		<span class="text-sm text-primary"
@@ -166,16 +165,16 @@
 				>worker groups <ExternalLink size={12} /></a
 			> to listen to tags</span
 		>
-		<span class="text-2xs text-tertiary"
+		<span class="text-2xs text-primary"
 			>For tags specific to some workspaces, use <pre class="inline">tag(workspace1+workspace2)</pre
 			></span
 		>
-		<span class="text-2xs text-tertiary"
+		<span class="text-2xs text-primary"
 			>To exclude 'workspace1' and 'workspace2' from a tag, use <pre class="inline"
 				>tag(^workspace1^workspace2)</pre
 			></span
 		>
-		<span class="text-2xs text-tertiary"
+		<span class="text-2xs text-primary"
 			>For <a
 				href="https://www.windmill.dev/docs/core_concepts/worker_groups#dynamic-tag"
 				target="_blank">dynamic tags</a
@@ -183,7 +182,7 @@
 			based on the workspace, use <pre class="inline">$workspace</pre>, e.g:
 			<pre class="inline">tag-$workspace</pre></span
 		>
-		<span class="text-2xs text-tertiary"
+		<span class="text-2xs text-primary"
 			>For <a
 				href="https://www.windmill.dev/docs/core_concepts/worker_groups#dynamic-tag"
 				target="_blank">dynamic tags</a
diff --git a/frontend/src/lib/components/Auth0Setting.svelte b/frontend/src/lib/components/Auth0Setting.svelte
index 1116ea0d27..00e683dcf4 100644
--- a/frontend/src/lib/components/Auth0Setting.svelte
+++ b/frontend/src/lib/components/Auth0Setting.svelte
@@ -44,7 +44,7 @@
 
 <div class="flex flex-col gap-1">
 	<!-- svelte-ignore a11y_label_has_associated_control -->
-	<label class="text-sm font-medium text-primary flex gap-4 items-center"
+	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name="auth0" after={true} /></div><Toggle
 			checked={enabled}
 			on:change={(e) => {
diff --git a/frontend/src/lib/components/AuthSettings.svelte b/frontend/src/lib/components/AuthSettings.svelte
index e86adb1b4d..4e0ca6bba4 100644
--- a/frontend/src/lib/components/AuthSettings.svelte
+++ b/frontend/src/lib/components/AuthSettings.svelte
@@ -82,9 +82,9 @@
 
 <div>
 	<Tabs bind:selected={tab} class="mt-2 mb-4">
-		<Tab value="sso">SSO</Tab>
-		<Tab value="oauth">OAuth</Tab>
-		<Tab value="scim">SCIM/SAML</Tab>
+		<Tab value="sso" label="SSO" />
+		<Tab value="oauth" label="OAuth" />
+		<Tab value="scim" label="SCIM/SAML" />
 	</Tabs>
 </div>
 
@@ -99,7 +99,7 @@
 
 			<div class="py-1"></div>
 			<div class="mb-2">
-				<span class="text-primary text-sm"
+				<span class="text-primary text-xs"
 					>When at least one of the below options is set, users will be able to login to Windmill
 					via their third-party account.
 					<br /> To test SSO, the recommended workflow is to to save the settings and try to login
@@ -108,7 +108,7 @@
 					></span
 				>
 			</div>
-			<div class="flex flex-col gap-3 py-4">
+			<div class="flex flex-col gap-4 py-4">
 				<OAuthSetting name="google" bind:value={oauths['google']} />
 				<OAuthSetting name="microsoft" bind:value={oauths['microsoft']} />
 				<OktaSetting bind:value={oauths['okta']} />
@@ -128,7 +128,7 @@
 							<div class="flex flex-col gap-2 pb-4">
 								<div class="flex flex-row items-center gap-2">
 									<!-- svelte-ignore a11y_label_has_associated_control -->
-									<label class="text-md font-medium text-primary">{k}</label>
+									<label class="text-md font-semibold text-primary">{k}</label>
 									<CloseButton
 										on:close={() => {
 											if (oauths) {
@@ -140,7 +140,7 @@
 								</div>
 								<div class="p-2 border rounded">
 									<label class="block pb-2">
-										<span class="text-primary font-semibold text-sm">Custom Name</span>
+										<span class="text-primary font-semibold text-xs">Custom Name</span>
 										<input
 											type="text"
 											placeholder="Custom Name"
@@ -148,11 +148,11 @@
 										/>
 									</label>
 									<label class="block pb-2">
-										<span class="text-primary font-semibold text-sm">Client Id</span>
+										<span class="text-primary font-semibold text-xs">Client Id</span>
 										<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
 									</label>
 									<label class="block pb-2">
-										<span class="text-primary font-semibold text-sm">Client Secret</span>
+										<span class="text-primary font-semibold text-xs">Client Secret</span>
 										<input
 											type="text"
 											placeholder="Client Secret"
@@ -171,8 +171,7 @@
 			<div class="flex gap-2 py-4">
 				<input type="text" placeholder="client_id" bind:value={clientName} />
 				<Button
-					variant="border"
-					color="blue"
+					variant="accent"
 					hover="yo"
 					size="sm"
 					endIcon={{ icon: Plus }}
@@ -197,7 +196,7 @@
 			</div>
 		{:else if tab === 'oauth'}
 			<div class="mb-2">
-				<span class="text-primary text-sm"
+				<span class="text-primary text-xs"
 					>When one of the below options is set, you will be able to create a specific resource
 					containing a token automatically generated by the third-party provider.
 					<br />
@@ -220,7 +219,7 @@
 						<div class="flex flex-col gap-2 pb-4">
 							<div class="flex flex-row items-center gap-2">
 								<!-- svelte-ignore a11y_label_has_associated_control -->
-								<label class="text-md font-medium text-primary">{k}</label>
+								<label class="text-md font-semibold text-primary">{k}</label>
 								<CloseButton
 									on:close={() => {
 										if (oauths) {
@@ -232,11 +231,11 @@
 							</div>
 							<div class="p-2 border rounded">
 								<label class="block pb-2">
-									<span class="text-primary font-semibold text-sm">Client Id</span>
+									<span class="text-primary font-semibold text-xs">Client Id</span>
 									<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
 								</label>
 								<label class="block pb-2">
-									<span class="text-primary font-semibold text-sm">Client Secret</span>
+									<span class="text-primary font-semibold text-xs">Client Secret</span>
 									<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
 								</label>
 								{#if k === 'visma' || !windmillBuiltins.includes(k)}
@@ -289,7 +288,7 @@
 								{/if}
 								{#if k == 'snowflake_oauth'}
 									<label class="block pb-2">
-										<span class="text-primary font-semibold text-sm flex gap-2 items-center"
+										<span class="text-primary font-semibold text-xs flex gap-2 items-center"
 											><a
 												href="https://docs.snowflake.com/en/user-guide/admin-account-identifier#using-an-account-name-as-an-identifier"
 												target="_blank">Snowflake Account Identifier</a
@@ -323,8 +322,7 @@
 					<input type="text" value={oauth_name ?? ''} disabled />
 				{/if}
 				<Button
-					variant="border"
-					color="blue"
+					variant="accent"
 					hover="yo"
 					size="sm"
 					endIcon={{ icon: Plus }}
diff --git a/frontend/src/lib/components/AutoscalingConfigEditor.svelte b/frontend/src/lib/components/AutoscalingConfigEditor.svelte
index 74215e9aaa..37e8dcf4c4 100644
--- a/frontend/src/lib/components/AutoscalingConfigEditor.svelte
+++ b/frontend/src/lib/components/AutoscalingConfigEditor.svelte
@@ -27,17 +27,17 @@
 
 	async function checkKubernetesHealth() {
 		if (!config?.integration || config.integration.type !== 'kubernetes') return
-		
+
 		healthCheckLoading = true
 		healthCheckResult = null
-		
+
 		try {
 			await ConfigService.nativeKubernetesAutoscalingHealthcheck()
 			healthCheckResult = { success: true }
 		} catch (error: any) {
-			healthCheckResult = { 
-				success: false, 
-				error: error.body || error.message || 'Unknown error' 
+			healthCheckResult = {
+				success: false,
+				error: error.body || error.message || 'Unknown error'
 			}
 		} finally {
 			healthCheckLoading = false
@@ -323,14 +323,14 @@
 
 				<div class="flex mt-6 gap-2">
 					<Button
-						color="dark"
+						variant="accent"
 						target="_blank"
 						endIcon={{ icon: ExternalLink }}
 						href="/scripts/add?hub=hub%2F9204%2Fhelper%2FScale%20a%20worker%20group%20deployed%20as%20a%20kubernetes%20service&workspace=admins"
 						>Create from template</Button
 					>
 					<Button
-						color="dark"
+						variant="accent"
 						target="_blank"
 						href={`/runs/${config.integration.path}?workspace=admins`}
 						endIcon={{ icon: ExternalLink }}
@@ -349,25 +349,24 @@
 
 			{#if config.integration.type === 'kubernetes'}
 				<div class="text-sm text-secondary mb-3">
-					Kubernetes configuration is automatically inferred from the cluster environment. 
-					The worker group name and namespace will be detected automatically.
+					Kubernetes configuration is automatically inferred from the cluster environment. The
+					worker group name and namespace will be detected automatically.
 				</div>
 
 				<div class="flex flex-col gap-3 mt-4">
 					<div class="flex items-center gap-2">
-						<Button 
-							color="blue" 
-							size="xs" 
-							variant="contained"
+						<Button
+							size="xs"
+							variant="accent"
 							startIcon={{ icon: ExternalLink }}
 							href="https://windmill.dev/docs/core_concepts/autoscaling#kubernetes"
 							target="_blank"
 						>
 							Setup Guide (Roles & Bindings)
 						</Button>
-						<Button 
-							color="light" 
-							size="xs" 
+						<Button
+							color="light"
+							size="xs"
 							variant="contained"
 							onclick={checkKubernetesHealth}
 							disabled={healthCheckLoading}
@@ -375,15 +374,21 @@
 							{healthCheckLoading ? 'Checking...' : 'Check Health'}
 						</Button>
 					</div>
-					
+
 					{#if healthCheckResult !== null}
-						<div class="p-2 rounded-md text-sm {healthCheckResult.success ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400'}">
+						<div
+							class="p-2 rounded-md text-sm {healthCheckResult.success
+								? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
+								: 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400'}"
+						>
 							{#if healthCheckResult.success}
 								Kubernetes autoscaling is healthy
 							{:else}
 								{healthCheckResult.error}
 								{#if healthCheckResult.error?.includes('permissions') || healthCheckResult.error?.includes('role')}
-									<br><small>Please follow the setup guide above to configure proper RBAC permissions.</small>
+									<br /><small
+										>Please follow the setup guide above to configure proper RBAC permissions.</small
+									>
 								{/if}
 							{/if}
 						</div>
diff --git a/frontend/src/lib/components/AutoscalingEvents.svelte b/frontend/src/lib/components/AutoscalingEvents.svelte
index 07b5fee02d..7a9a6e313f 100644
--- a/frontend/src/lib/components/AutoscalingEvents.svelte
+++ b/frontend/src/lib/components/AutoscalingEvents.svelte
@@ -40,9 +40,9 @@
 <div>
 	<h6
 		class={!$enterpriseLicense || (events != undefined && events.length == 0)
-			? 'text-tertiary'
+			? 'text-xs text-emphasis font-semibold'
 			: ''}
-		>Autoscaling events {#if $enterpriseLicense}<span class="text-xs text-tertiary">(5 last)</span>
+		>Autoscaling events {#if $enterpriseLicense}<span class="text-xs text-primary">(5 last)</span>
 			<span class="inline-flex ml-6">
 				<Button
 					startIcon={{
@@ -61,21 +61,21 @@
 			</span>{/if}
 	</h6>
 	{#if !$enterpriseLicense}
-		<div class="text-xs pt-2 text-tertiary">Autoscaling is an EE feature</div>
+		<div class="text-xs pt-1 text-secondary">Autoscaling is an EE feature</div>
 	{:else if loading}
 		<Skeleton layout={[[12], 1]} />
 	{:else if events}
 		{#if events.length == 0}
-			<div class="text-xs pt-2 text-tertiary"
+			<div class="text-xs pt-2 text-primary"
 				>No events, is autoscaling set in the worker group config?</div
 			>
 		{:else}
-			<div class="flex flex-col gap-2 text-xs text-tertiary pt-4">
+			<div class="flex flex-col gap-2 text-xs text-primary pt-4">
 				{#each events as event}
 					<div class="flex flex-row gap-4">
 						<div class="text-primary">{event.event_type} to {event.desired_workers}</div>
 						<div class="text-secondary">{event.reason}</div>
-						<div class="text-tertiary"><TimeAgo date={event.applied_at ?? ''} /></div>
+						<div class="text-primary"><TimeAgo date={event.applied_at ?? ''} /></div>
 					</div>
 				{/each}
 			</div>
@@ -84,7 +84,7 @@
 			<Button color="light" size="xs2" on:click={() => (limit = limit + 25)}>Show more</Button>
 		</div>
 		{#if limit > 50}
-			<div class="mt-4 flex text-xs text-tertiary">
+			<div class="mt-4 flex text-xs text-primary">
 				Note that autoscaling events are only stored for the last 30 days.
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/Awareness.svelte b/frontend/src/lib/components/Awareness.svelte
index 8923983c5f..48e46564cb 100644
--- a/frontend/src/lib/components/Awareness.svelte
+++ b/frontend/src/lib/components/Awareness.svelte
@@ -3,17 +3,22 @@
 	import { BROWSER } from 'esm-env'
 
 	let url = BROWSER ? window.location.pathname : ''
+	let entries = $derived(
+		Object.entries($awarenessStore ?? {}).filter(([a, b]) => b == url && a != $userStore?.username)
+	)
 </script>
 
-<div class="isolate flex -space-x-1 overflow-hidden w-20">
-	{#each Object.entries($awarenessStore ?? {}).filter(([a, b]) => b == url && a != $userStore?.username) as [user, _]}
-		<span
-			class="inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
-			title={user}
-		>
-			<span class="text-sm font-medium leading-none text-white"
-				>{user.substring(0, 2).toLocaleUpperCase()}</span
+{#if entries.length > 0}
+	<div class="isolate flex -space-x-1 overflow-hidden w-20">
+		{#each entries as [user, _]}
+			<span
+				class="inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
+				title={user}
 			>
-		</span>
-	{/each}
-</div>
+				<span class="text-sm font-medium leading-none text-white"
+					>{user.substring(0, 2).toLocaleUpperCase()}</span
+				>
+			</span>
+		{/each}
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/CenteredModal.svelte b/frontend/src/lib/components/CenteredModal.svelte
index e3206b6c92..94dc9dd550 100644
--- a/frontend/src/lib/components/CenteredModal.svelte
+++ b/frontend/src/lib/components/CenteredModal.svelte
@@ -19,21 +19,21 @@
 				<div>
 					<WindmillIcon height="100px" width="100px" spin="slow" />
 				</div>
-				<h2 class="text-center pt-2 text-primary">Windmill</h2>
+				<h2 class="text-center py-2 text-primary">Windmill</h2>
 			</div>
 		{/if}
 
 		<div
-			class="border rounded-md shadow-md bg-surface w-full {large
+			class="rounded-md bg-surface w-full {large
 				? 'max-w-5xl'
 				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
 		>
 			<div class="mb-10">
-				<h1 class="text-center text-primary">
+				<h1 class="text-center text-lg text-emphasis font-semibold">
 					{title}
 				</h1>
 				{#if subtitle}
-					<p class="text-sm text-center text-secondary mt-2">
+					<p class="text-sm font-semibold text-emphasis text-center mt-2">
 						{subtitle}
 					</p>
 				{/if}
diff --git a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
index 3eb38a487a..8b4d41eea1 100644
--- a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
+++ b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
@@ -74,10 +74,10 @@
 
 <div class="flex flex-col max-w-2xl {noPadding ? '' : 'p-4'}">
 	{#if isConflict}
-		<span class="text-sm mb-2 leading-6 font-semibold">Fix username conflict</span>
+		<span class="text-sm mb-2 leading-6 font-semibold text-emphasis">Fix username conflict</span>
 	{/if}
 
-	<span class="text-sm font-semibold mb-1 leading-6"
+	<span class="text-xs font-semibold text-emphasis mb-1 leading-6"
 		>{isConflict ? 'Auto-generated instance username' : 'New username'}</span
 	>
 	<input
@@ -120,9 +120,8 @@
 	</Alert>
 
 	<Button
-		variant="contained"
-		color="blue"
-		size="xs"
+		variant="default"
+		unifiedSize="md"
 		on:click={() => {
 			renameUser().then(() => {
 				dispatch('close')
diff --git a/frontend/src/lib/components/CliHelpBox.svelte b/frontend/src/lib/components/CliHelpBox.svelte
index 7c992d9154..951a7e3d5a 100644
--- a/frontend/src/lib/components/CliHelpBox.svelte
+++ b/frontend/src/lib/components/CliHelpBox.svelte
@@ -1,27 +1,31 @@
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
 	import ClipboardPanel from './details/ClipboardPanel.svelte'
+	import Section from './Section.svelte'
 
 	let url = $derived(`${window.location.protocol}//${window.location.hostname}/`)
 </script>
 
-<div>
-	<div class="text-sm font-semibold">CLI quick setup </div>
-	<div class="text-sm" role="alert" id="dynamic-input-help-box">
-		<ul class="pl-0 pt-2 list-decimal list-inside flex flex-col gap-2">
+<Section label="CLI quick setup">
+	<div class="text-xs" role="alert" id="dynamic-input-help-box">
+		<ul class="pl-0 list-decimal list-inside flex flex-col gap-4">
 			<li>
-				Install the latest wmill CLI from npm:
-				<ClipboardPanel content={'npm install -g windmill-cli'} />
+				<span class="font-medium">Install the latest wmill CLI from npm: </span>
+				<div class="mt-1">
+					<ClipboardPanel content={'npm install -g windmill-cli'} />
+				</div>
 			</li>
 
 			<li>
-				Setup the wmill cli for this workspace & remote:
-				<ClipboardPanel
-					content={`wmill workspace add ${$workspaceStore} ${$workspaceStore} ${url}`}
-				/>
+				<span class="font-medium">Setup the wmill cli for this workspace & remote:</span>
+				<div class="mt-1">
+					<ClipboardPanel
+						content={`wmill workspace add ${$workspaceStore} ${$workspaceStore} ${url}`}
+					/>
+				</div>
 			</li>
-			<li>Follow the prompts in your terminal</li>
-			<li>Use the run command above!</li>
+			<li><span class="font-medium">Follow the prompts in your terminal</span></li>
+			<li><span class="font-medium">Use the run command above!</span></li>
 		</ul>
 	</div>
-</div>
+</Section>
diff --git a/frontend/src/lib/components/CollapseLink.svelte b/frontend/src/lib/components/CollapseLink.svelte
index f53349e4ec..a723eea703 100644
--- a/frontend/src/lib/components/CollapseLink.svelte
+++ b/frontend/src/lib/components/CollapseLink.svelte
@@ -11,8 +11,7 @@
 
 <div class={twMerge('flex', $$props.class)}>
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		btnClasses="text-primary {small ? 'text-xs' : ''} "
 		on:click={() => (open = !open)}
 		endIcon={{ icon: ChevronDown, classes: open ? 'transform rotate-180' : '' }}
diff --git a/frontend/src/lib/components/ConnectionSection.svelte b/frontend/src/lib/components/ConnectionSection.svelte
index 8d472f1bef..bdc43f354e 100644
--- a/frontend/src/lib/components/ConnectionSection.svelte
+++ b/frontend/src/lib/components/ConnectionSection.svelte
@@ -79,7 +79,6 @@
 				size="sm"
 				endIcon={{ icon: platform === 'slack' ? Slack : MsTeamsIcon }}
 				btnClasses="mt-2"
-				variant="border"
 				disabled={!$enterpriseLicense && platform === 'teams'}
 				on:click={onDisconnect}
 			>
@@ -104,8 +103,7 @@
 		<div class="flex flex-row gap-2 items-center">
 			{#if platform === 'teams'}
 				<Button
-					size="xs"
-					color="dark"
+					unifiedSize="md"
 					on:click={connectTeams}
 					startIcon={{ icon: MsTeamsIcon }}
 					disabled={!selectedTeam || !$enterpriseLicense}
@@ -123,7 +121,7 @@
 					/>
 				{/if}
 			{:else}
-				<Button size="xs" color="dark" href={connectHref} startIcon={{ icon: Slack }}>
+				<Button size="xs" variant="accent" href={connectHref} startIcon={{ icon: Slack }}>
 					Connect to {platform.charAt(0).toUpperCase() + platform.slice(1)}
 				</Button>
 			{/if}
@@ -136,7 +134,7 @@
 	<div class="text-primary font-md font-semibold"> Script or flow to run on /windmill command </div>
 	<div class="relative">
 		{#if !teamName || (!$enterpriseLicense && platform === 'teams')}
-			<div class="absolute top-0 right-0 bottom-0 left-0 bg-surface-disabled/50 z-40"></div>
+			<div class="absolute top-0 right-0 bottom-0 left-0 bg-surface-disabled/20 z-40"></div>
 		{/if}
 		<ScriptPicker
 			kinds={['script']}
@@ -148,7 +146,7 @@
 		/>
 	</div>
 
-	<div class="prose text-2xs text-tertiary">
+	<div class="prose text-2xs text-primary">
 		Pick a script or flow meant to be triggered when the `/windmill` command is invoked. Upon
 		connection, templates for a <a href="{$hubBaseUrlStore}/scripts/{platform}/1405/">script</a>
 		and <a href="{$hubBaseUrlStore}/flows/28/">flow</a> are available.
diff --git a/frontend/src/lib/components/ContentSearchInner.svelte b/frontend/src/lib/components/ContentSearchInner.svelte
index d33a4031e1..fbe489069f 100644
--- a/frontend/src/lib/components/ContentSearchInner.svelte
+++ b/frontend/src/lib/components/ContentSearchInner.svelte
@@ -164,10 +164,9 @@
 		<div class="p-2">
 			<ToggleButtonGroup bind:selected={searchKind} class="h-10 ">
 				{#snippet children({ item })}
-					<ToggleButton small light value="all" label={'All' + counts.all} {item} />
+					<ToggleButton small value="all" label={'All' + counts.all} {item} />
 					<ToggleButton
 						small
-						light
 						value="scripts"
 						icon={Code2}
 						label={'Scripts' + counts.scripts}
@@ -175,7 +174,6 @@
 					/>
 					<ToggleButton
 						small
-						light
 						value="resources"
 						icon={Boxes}
 						label={'Resources' + counts.resources}
@@ -183,7 +181,6 @@
 					/>
 					<ToggleButton
 						small
-						light
 						value="flows"
 						label={'Flows' + counts.flows}
 						icon={FlowIcon}
@@ -192,7 +189,6 @@
 					/>
 					<ToggleButton
 						small
-						light
 						value="apps"
 						label={'Apps' + counts.apps}
 						icon={LayoutDashboard}
@@ -436,7 +432,7 @@
 			</div>
 		{:else}
 			<div class="flex justify-center items-center h-48">
-				<div class="text-tertiary text-center">
+				<div class="text-primary text-center">
 					<div class="text-2xl font-bold">Empty Search Filter</div>
 					<div class="text-sm"
 						>Start writing, search everywhere a path is referenced for instance</div
diff --git a/frontend/src/lib/components/ContextualVariableEditor.svelte b/frontend/src/lib/components/ContextualVariableEditor.svelte
index a511c3c6b2..b859e08691 100644
--- a/frontend/src/lib/components/ContextualVariableEditor.svelte
+++ b/frontend/src/lib/components/ContextualVariableEditor.svelte
@@ -6,9 +6,10 @@
 	import Drawer from './common/drawer/Drawer.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import { sendUserToast } from '$lib/toast'
-	import Section from './Section.svelte'
 	import { Save } from 'lucide-svelte'
 	import autosize from '$lib/autosize'
+	import Label from './Label.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -61,21 +62,25 @@
 	>
 		<div class="flex flex-col gap-8">
 			{#if !edit}
-				<Section label="Name">
-					<input type="text" bind:value={name} placeholder="Variable name" />
-				</Section>
+				<Label for="name" label="Name">
+					<TextInput
+						inputProps={{ type: 'text', placeholder: 'Variable name', id: 'name' }}
+						bind:value={name}
+					/>
+				</Label>
 			{/if}
-			<Section label="Value">
-				<textarea rows="4" use:autosize bind:value placeholder="Variable value"></textarea>
-			</Section>
+			<Label for="value" label="Value">
+				<textarea rows="4" use:autosize bind:value placeholder="Variable value" id="value"
+				></textarea>
+			</Label>
 		</div>
 		{#snippet actions()}
 			<Button
 				on:click={() => updateVariable()}
 				disabled={value === '' || name === ''}
 				startIcon={{ icon: Save }}
-				color="dark"
-				size="sm"
+				variant="accent"
+				unifiedSize="md"
 			>
 				{edit ? 'Update' : 'Save'}
 			</Button>
diff --git a/frontend/src/lib/components/CronBuilder.svelte b/frontend/src/lib/components/CronBuilder.svelte
index 69b53463ff..bcf8508c12 100644
--- a/frontend/src/lib/components/CronBuilder.svelte
+++ b/frontend/src/lib/components/CronBuilder.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Section from './Section.svelte'
 	import { Button } from './common'
 	import { Clock } from 'lucide-svelte'
 	import Popover from './meltComponents/Popover.svelte'
@@ -10,17 +9,19 @@
 	let { children }: Props = $props()
 </script>
 
-<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }} closeButton>
+<Popover
+	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+	closeButton
+	contentClasses="p-4"
+>
 	{#snippet trigger()}
-		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Clock }}>
-			Use simplified builder
+		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Clock }}>
+			Cron builder
 		</Button>
 	{/snippet}
 	{#snippet content({ close })}
-		<Section label="CRON Builder" wrapperClass="p-4">
-			<div class="flex flex-col w-72">
-				{@render children?.({ close })}
-			</div>
-		</Section>
+		<div class="flex flex-col w-72">
+			{@render children?.({ close })}
+		</div>
 	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index a8bf9c7023..33ef38d08d 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -11,6 +11,7 @@
 	import MultiSelect from './select/MultiSelect.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
 	import { untrack } from 'svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	interface Props {
 		schedule: string
@@ -200,30 +201,40 @@
 
 <div class="w-full flex space-x-8">
 	<div class="w-full flex flex-col gap-4">
-		<Label label="Cron" class="font-semibold" primary={true}>
-			{#snippet error()}
-				{#if !validCRON}
-					<div class="text-red-600 text-xs"> Invalid cron syntax </div>
+		<div class="flex flex-col gap-1">
+			<label for="cron-schedule" class="text-xs font-semibold text-emphasis">Cron</label>
+
+			<div class="flex flex-row gap-2 items-center">
+				<TextInput
+					inputProps={{
+						type: 'text',
+						id: 'cron-schedule',
+						name: 'cron-schedule',
+						placeholder: '0 0 */1 * * *',
+						disabled: disabled
+					}}
+					bind:value={schedule}
+					error={!validCRON}
+				/>
+				{#if !disabled}
+					<div class="flex flex-row gap-2">
+						{@render cronBuilder()}
+						<CronGen bind:schedule bind:cronVersion />
+					</div>
 				{/if}
-			{/snippet}
-			<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1 hover:underline">
+			</div>
+			{#if !validCRON}
+				<div class="text-red-600 text-2xs"> Invalid cron syntax </div>
+			{/if}
+			<div class="flex flex-row-reverse text-2xs text-secondary hover:underline">
 				<a
-					class="text-tertiary"
+					class="text-primary"
 					href="https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax"
 					target="_blank">Croner</a
 				>
 			</div>
-			<input
-				class="inline-block"
-				type="text"
-				id="cron-schedule"
-				name="cron-schedule"
-				placeholder="0 0 */1 * * *"
-				bind:value={schedule}
-				{disabled}
-			/>
-		</Label>
-		<Label label="Timezone" class="font-semibold" primary>
+		</div>
+		<Label label="Timezone">
 			{#if disabled}
 				<div>
 					<Badge><span class="text-primary dark:text-primary-inverse">{timezone}</span></Badge>
@@ -242,162 +253,150 @@
 				/>
 			{/if}
 		</Label>
-
-		{#if !disabled}
-			<div class="flex flex-row gap-2 mb-2">
-				<CronBuilder>
-					{#snippet children({ close })}
-						<div class="w-full flex flex-col">
-							<div class="w-full flex flex-col gap-1">
-								<div class="text-secondary text-sm leading-none">Execute schedule every</div>
-
-								<div class="w-full flex gap-4">
-									<div class="w-full flex flex-col gap-1 mb-2">
-										<select
-											{disabled}
-											name="execute_every"
-											id="execute_every"
-											bind:value={executeEvery}
-										>
-											<option value="second">Second(s)</option>
-											<option value="minute">Minute(s)</option>
-											<option value="hour">Hour(s)</option>
-											<option value="day-month">Day of the month</option>
-											<option value="month">Month(s)</option>
-											<option value="day-week">Day of the week</option>
-										</select>
-									</div>
-
-									<div class="w-full flex flex-col gap-1 justify-center">
-										{#if executeEvery == 'second'}
-											<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
-											<small>Valid range 0-59</small>
-										{:else if executeEvery == 'minute'}
-											<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
-											<small>Valid range 0-59</small>
-										{:else if executeEvery == 'hour'}
-											<input {disabled} type="number" min="0" max="23" bind:value={hours} />
-											<small>Valid range 0-23</small>
-										{:else if executeEvery == 'day-month'}
-											<!-- <div class="w-full flex">
-										<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
-											<div class="flex">
-												<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
-											</div>
-											<small> Last day of the month </small>
-										</label>
-									</div> -->
-										{/if}
-									</div>
-								</div>
-							</div>
-
-							<div class="w-full flex flex-col gap-4">
-								{#if executeEvery == 'month'}
-									<div class="w-full flex flex-col">
-										<MultiSelect
-											disablePortal
-											{disabled}
-											bind:value={monthsOfYear}
-											items={safeSelectItems(monthsOfYearOptions)}
-											placeholder="Every month"
-										/>
-									</div>
-								{/if}
-
-								{#if executeEvery == 'day-week'}
-									<div class="w-full flex flex-col">
-										<MultiSelect
-											disablePortal
-											{disabled}
-											bind:value={daysOfWeek}
-											items={safeSelectItems(daysOfWeekOptions)}
-											placeholder="Every day"
-										/>
-									</div>
-								{/if}
-
-								{#if executeEvery == 'day-month' || executeEvery == 'month'}
-									<div class="w-full flex flex-col gap-1">
-										{#if executeEvery == 'month'}
-											<small class="font-bold">On day of the month</small>
-										{/if}
-										<div class="w-full flex gap-4">
-											<div class="w-full flex">
-												<MultiSelect
-													disablePortal
-													{disabled}
-													bind:value={daysOfMonth}
-													items={safeSelectItems(daysOfMonthOptions)}
-													placeholder="Every day"
-												/>
-											</div>
-
-											<!-- {#if executeEvery == 'month'}
-										<div class="w-full flex">
-											<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
-												<div class="flex">
-													<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
-												</div>
-												<small> Last day of the month </small>
-											</label>
-										</div>
-									{/if} -->
-										</div>
-										<small>Schedule will only execute on valid calendar days</small>
-									</div>
-								{/if}
-
-								{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
-									<div class="w-full flex flex-col gap-1">
-										<small class="font-bold">At Time</small>
-										<input
-											{disabled}
-											type="time"
-											name="atUTCTime"
-											id="atUTCTime"
-											bind:value={UTCTime}
-										/>
-									</div>
-								{/if}
-							</div>
-
-							<div class="w-full flex flex-col gap-1">
-								<div class="text-secondary text-sm leading-none">Preview New Cron</div>
-
-								<div class="flex p-2 px-4 rounded-md bg-surface-secondary">
-									<span>{nschedule}</span>
-								</div>
-							</div>
-						</div>
-
-						<div class="mt-4">
-							<Button
-								color="dark"
-								size="xs"
-								on:click={() => {
-									schedule = nschedule
-									close()
-								}}
-							>
-								Set cron schedule
-							</Button>
-						</div>
-					{/snippet}
-				</CronBuilder>
-				<CronGen bind:schedule bind:cronVersion />
-			</div>
-		{/if}
 	</div>
 
 	<div class="w-full flex flex-col space-y-2">
-		<div class="text-sm font-semibold leading-none">Estimated upcoming events ({timezone})</div>
+		<div class="text-xs font-semibold text-emphasis leading-none"
+			>Estimated upcoming events ({timezone})</div
+		>
 		<div class="flex flex-col space-y-2">
-			<div class="flex flex-col rounded-md p-4 border text-tertiary bg-surface-secondary gap-0.5">
+			<div class="flex flex-col rounded-md p-4 border text-primary gap-0.5">
 				{#each preview as date}
-					<span class="text-sm">{dateFormatter(new Date(date))}</span>
+					<span class="text-xs">{dateFormatter(new Date(date))}</span>
 				{/each}
 			</div>
 		</div>
 	</div>
 </div>
+
+{#snippet cronBuilder()}
+	<CronBuilder>
+		{#snippet children({ close })}
+			<div class="w-full flex flex-col gap-6">
+				<div class="w-full flex flex-col gap-1">
+					<div class="text-emphasis font-semibold text-xs leading-none">Execute schedule every</div>
+
+					<div class="w-full flex gap-4">
+						<div class="w-full flex flex-col gap-1 mb-2">
+							<select {disabled} name="execute_every" id="execute_every" bind:value={executeEvery}>
+								<option value="second">Second(s)</option>
+								<option value="minute">Minute(s)</option>
+								<option value="hour">Hour(s)</option>
+								<option value="day-month">Day of the month</option>
+								<option value="month">Month(s)</option>
+								<option value="day-week">Day of the week</option>
+							</select>
+						</div>
+
+						<div class="w-full flex flex-col gap-1 justify-center">
+							{#if executeEvery == 'second'}
+								<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
+								<small class="text-secondary text-2xs">Valid range 0-59</small>
+							{:else if executeEvery == 'minute'}
+								<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
+								<small class="text-secondary text-2xs">Valid range 0-59</small>
+							{:else if executeEvery == 'hour'}
+								<input {disabled} type="number" min="0" max="23" bind:value={hours} />
+								<small class="text-secondary text-2xs">Valid range 0-23</small>
+							{:else if executeEvery == 'day-month'}
+								<!-- <div class="w-full flex">
+						<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
+							<div class="flex">
+								<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+							</div>
+							<small> Last day of the month </small>
+						</label>
+					</div> -->
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				{#if executeEvery == 'month'}
+					<div class="w-full flex flex-col">
+						<MultiSelect
+							disablePortal
+							{disabled}
+							bind:value={monthsOfYear}
+							items={safeSelectItems(monthsOfYearOptions)}
+							placeholder="Every month"
+						/>
+					</div>
+				{/if}
+
+				{#if executeEvery == 'day-week'}
+					<div class="w-full flex flex-col">
+						<MultiSelect
+							disablePortal
+							{disabled}
+							bind:value={daysOfWeek}
+							items={safeSelectItems(daysOfWeekOptions)}
+							placeholder="Every day"
+						/>
+					</div>
+				{/if}
+
+				{#if executeEvery == 'day-month' || executeEvery == 'month'}
+					<div class="w-full flex flex-col gap-1">
+						{#if executeEvery == 'month'}
+							<small class="text-secondary text-2xs font-normal">On day of the month</small>
+						{/if}
+						<div class="w-full flex gap-4">
+							<div class="w-full flex">
+								<MultiSelect
+									disablePortal
+									{disabled}
+									bind:value={daysOfMonth}
+									items={safeSelectItems(daysOfMonthOptions)}
+									placeholder="Every day"
+								/>
+							</div>
+
+							<!-- {#if executeEvery == 'month'}
+						<div class="w-full flex">
+							<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
+								<div class="flex">
+									<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+								</div>
+								<small> Last day of the month </small>
+							</label>
+						</div>
+					{/if} -->
+						</div>
+						<small class="text-secondary text-2xs font-normal"
+							>Schedule will only execute on valid calendar days</small
+						>
+					</div>
+				{/if}
+
+				{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
+					<div class="w-full flex flex-col gap-1">
+						<small class="font-semibold text-emphasis text-xs">At time</small>
+						<input {disabled} type="time" name="atUTCTime" id="atUTCTime" bind:value={UTCTime} />
+					</div>
+				{/if}
+
+				<div class="w-full flex flex-col gap-1">
+					<div class="text-emphasis font-semibold text-xs">Preview New Cron</div>
+
+					<div class="flex p-2 px-4 rounded-md bg-surface-secondary text-xs text-primary">
+						<span>{nschedule}</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="mt-8">
+				<Button
+					variant="accent"
+					size="xs"
+					on:click={() => {
+						schedule = nschedule
+						close()
+					}}
+				>
+					Set cron schedule
+				</Button>
+			</div>
+		{/snippet}
+	</CronBuilder>
+{/snippet}
diff --git a/frontend/src/lib/components/CustomSso.svelte b/frontend/src/lib/components/CustomSso.svelte
index fda6d54e15..8e19a7e7e4 100644
--- a/frontend/src/lib/components/CustomSso.svelte
+++ b/frontend/src/lib/components/CustomSso.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <label class="block pb-2">
-	<span class="text-primary font-semibold text-sm">Auth URL</span>
+	<span class="text-primary font-semibold text-xs">Auth URL</span>
 	<input
 		type="text"
 		placeholder="https://github.com/login/oauth/authorize"
@@ -36,7 +36,7 @@
 	/>
 </label>
 <label class="block pb-2">
-	<span class="text-primary font-semibold text-sm">Token URL</span>
+	<span class="text-primary font-semibold text-xs">Token URL</span>
 	<input
 		type="text"
 		placeholder="https://github.com/login/oauth/access_token"
@@ -44,7 +44,7 @@
 	/>
 </label>
 <label class="block pb-2">
-	<span class="text-primary font-semibold text-sm">Userinfo URL</span>
+	<span class="text-primary font-semibold text-xs">Userinfo URL</span>
 	<input
 		type="text"
 		placeholder="https://github.com/login/oauth/userinfo"
@@ -53,12 +53,12 @@
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
-	<span class="text-primary font-semibold text-sm">Scopes</span>
+	<span class="text-primary font-semibold text-xs">Scopes</span>
 	<OauthScopes bind:scopes={login_config.scopes} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
-	<span class="text-primary font-semibold text-sm"
+	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
 			>Not needed in most cases. Examples of uses: google apis require the 2 extra args
 			"access_type=offline&prompt=consent"</Tooltip
@@ -68,14 +68,14 @@
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
-	<span class="text-primary font-semibold text-sm"
+	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
 </label>
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="block pb-2">
-	<span class="text-primary font-semibold text-sm"
+	<span class="text-primary font-semibold text-xs"
 		>Payload <Tooltip
 			>Auth is passed in query most commonly. LinkedIn is an example of OAuth using
 			x-www-form-urlencoded
diff --git a/frontend/src/lib/components/DBManager.svelte b/frontend/src/lib/components/DBManager.svelte
index 96381dafc2..3247575e3e 100644
--- a/frontend/src/lib/components/DBManager.svelte
+++ b/frontend/src/lib/components/DBManager.svelte
@@ -109,8 +109,8 @@
 						(selected.tableKey === tableKey ? 'bg-gray-500/25' : 'hover:bg-gray-500/10')}
 					onclick={() => (selected.tableKey = tableKey)}
 				>
-					<Table2 class="text-gray-500/40 shrink-0" size={16} />
-					<p class="truncate text-ellipsis grow text-left">{tableKey}</p>
+					<Table2 class="text-primary shrink-0" size={16} />
+					<p class="truncate text-ellipsis grow text-left text-emphasis text-xs">{tableKey}</p>
 					{#if dbTableActionsFactory}
 						{@const dbTableActions = dbTableActionsFactory.map((f) =>
 							f({
@@ -156,7 +156,6 @@
 			{/each}
 		</div>
 		<Button
-			variant="border"
 			on:click={() => (dbTableEditorState = { open: true })}
 			wrapperClasses="mx-2 my-2 text-sm"
 			startIcon={{ icon: Plus }}
@@ -203,4 +202,4 @@
 			/>
 		</DrawerContent>
 	</Drawer>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
index 910e5822a8..ec082d35c8 100644
--- a/frontend/src/lib/components/DateTimeInput.svelte
+++ b/frontend/src/lib/components/DateTimeInput.svelte
@@ -7,7 +7,7 @@
 	import { Clock, X } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
-	import { inputBaseClass, inputBorderClass } from './text_input/TextInput.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 	// import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 
 	interface Props {
@@ -113,32 +113,24 @@
 </script>
 
 <div
-	class="flex flex-row gap-1 items-center w-full"
+	class="flex flex-row gap-1 items-center w-full relative"
 	id={randomId}
 	onpointerdown={bubble('pointerdown')}
 	onfocus={bubble('focus')}
 >
 	<!-- svelte-ignore a11y_autofocus -->
-	<input
-		type="date"
+	<TextInput
+		inputProps={{ type: 'date', autofocus, disabled, min: minDate, max: maxDate }}
 		bind:value={date}
-		{autofocus}
-		{disabled}
-		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-3/4 ', inputClass)}
-		min={minDate}
-		max={maxDate}
+		class={twMerge('!w-3/4 ', inputClass)}
 	/>
-	<input
-		type="time"
+	<TextInput
+		inputProps={{ type: 'time', disabled }}
 		bind:value={time}
-		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-1/4 min-w-[100px] ', inputClass)}
-		{disabled}
+		class={twMerge('!w-1/4 min-w-[100px] !max-h-full', inputClass)}
 	/>
 	<Button
-		variant="contained"
-		color="light"
-		wrapperClasses="h-full"
-		btnClasses="bg-surface-secondary"
+		variant="default"
 		startIcon={{
 			icon: Clock
 		}}
@@ -181,8 +173,8 @@
 	</Button>
 	{#if clearable}
 		<Button
-			variant="border"
-			color="light"
+			variant="default"
+			unifiedSize="md"
 			wrapperClasses="h-full"
 			{disabled}
 			on:click={() => {
diff --git a/frontend/src/lib/components/DefaultScripts.svelte b/frontend/src/lib/components/DefaultScripts.svelte
index c53c590954..40a8420278 100644
--- a/frontend/src/lib/components/DefaultScripts.svelte
+++ b/frontend/src/lib/components/DefaultScripts.svelte
@@ -19,14 +19,7 @@
 			<DefaultScriptsInner />
 		</DrawerContent>
 	</Drawer>
-	<Button
-		on:click={drawer?.openDrawer}
-		startIcon={{ icon: SettingsIcon }}
-		color="light"
-		{size}
-		btnClasses="!text-tertiary"
-		variant="contained"
-	>
+	<Button on:click={drawer?.openDrawer} startIcon={{ icon: SettingsIcon }} variant="subtle" {size}>
 		{noText ? '' : 'defaults'}
 	</Button>
 {/if}
diff --git a/frontend/src/lib/components/DefaultScriptsInner.svelte b/frontend/src/lib/components/DefaultScriptsInner.svelte
index 62809c18e3..6d4979aae1 100644
--- a/frontend/src/lib/components/DefaultScriptsInner.svelte
+++ b/frontend/src/lib/components/DefaultScriptsInner.svelte
@@ -42,7 +42,8 @@
 			class="w-full p-2 rounded {small
 				? ''
 				: 'border border-secondary'} grid grid-cols-3 items-center"
-			><h3 class={small ? 'text-xs font-medium justify-center' : ''}>{lang}</h3>
+		>
+			<p class={small ? 'text-2xs font-medium justify-center' : 'text-sm'}>{lang}</p>
 			<div>
 				{#if i > 0}
 					<button
diff --git a/frontend/src/lib/components/DefaultTags.svelte b/frontend/src/lib/components/DefaultTags.svelte
index e2537ccaff..4884df5db4 100644
--- a/frontend/src/lib/components/DefaultTags.svelte
+++ b/frontend/src/lib/components/DefaultTags.svelte
@@ -21,7 +21,7 @@
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: placement }} contentClasses="p-4">
 	{#snippet trigger()}
-		<Button color="dark" size="xs" nonCaptureEvent={true}>
+		<Button variant="default" unifiedSize="md" nonCaptureEvent={true}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Default tags&nbsp;<Tooltip light
 					>Scripts and steps that have not been specifically assigned tags will use a default tag
diff --git a/frontend/src/lib/components/DefaultTagsInner.svelte b/frontend/src/lib/components/DefaultTagsInner.svelte
index ab715770de..610da15112 100644
--- a/frontend/src/lib/components/DefaultTagsInner.svelte
+++ b/frontend/src/lib/components/DefaultTagsInner.svelte
@@ -80,8 +80,7 @@
 			{/if}
 		</div>
 		<Button
-			variant="contained"
-			color="blue"
+			variant="accent"
 			size="sm"
 			on:click={async () => {
 				await SettingService.setGlobal({
@@ -105,11 +104,11 @@
 			disabled={!$enterpriseLicense || !$superadmin}
 		>
 			Save {#if !$superadmin}
-				<span class="text-2xs text-tertiary">superadmin only</span>
+				<span class="text-2xs text-primary">superadmin only</span>
 			{/if}
 		</Button>
 
-		<span class="text-2xs text-tertiary"
+		<span class="text-2xs text-primary"
 			>When tags use <pre class="inline">$workspace</pre>, the final tag has
 			<pre class="inline">$workspace</pre> replaced with the workspace id, allowing multi-vpc setup with
 			more ease, without having to assign a specific tag each time.</span
diff --git a/frontend/src/lib/components/DeployButton.svelte b/frontend/src/lib/components/DeployButton.svelte
index d7f2aeeacf..b42e55ccd7 100644
--- a/frontend/src/lib/components/DeployButton.svelte
+++ b/frontend/src/lib/components/DeployButton.svelte
@@ -29,7 +29,8 @@
 <Button
 	disabled={loading}
 	loading={loadingSave}
-	size="xs"
+	variant="accent"
+	unifiedSize="md"
 	startIcon={{ icon: Save }}
 	on:click={() => dispatch('save')}
 	dropdownItems={!newFlow ? dropdownItems : undefined}
@@ -70,7 +71,8 @@
 				bind:this={msgInput}
 			/>
 			<Button
-				size="sm"
+				unifiedSize="md"
+				variant="accent"
 				on:click={async () => dispatch('save', deploymentMsg)}
 				endIcon={{ icon: CornerDownLeft }}
 				loading={loadingSave}
diff --git a/frontend/src/lib/components/DeployToSetting.svelte b/frontend/src/lib/components/DeployToSetting.svelte
index 94e7027d91..7add91c982 100644
--- a/frontend/src/lib/components/DeployToSetting.svelte
+++ b/frontend/src/lib/components/DeployToSetting.svelte
@@ -87,8 +87,8 @@
 	}
 </script>
 
-<h3 class="mt-8">Workspace to link to</h3>
-<div class="flex min-w-0 mt-2">
+<h3 class="mt-6 text-xs font-semibold text-emphasis">Workspace to link to</h3>
+<div class="flex min-w-0 mt-1">
 	<select
 		bind:value={workspaceToDeployTo}
 		on:change={async (e) => {
@@ -113,11 +113,11 @@
 		{/each}
 	</select>
 </div>
-<h3 class="mt-6 mb-3">Deployable items</h3>
+<h3 class="mt-6 mb-3 text-sm font-semibold text-emphasis">Deployable items</h3>
 <div class="flex flex-wrap gap-20">
 	<div class="max-w-md w-full">
 		{#if Array.isArray(deployUiSettings?.include_path)}
-			<h4 class="flex gap-2 mb-4"
+			<h4 class="flex gap-2 mb-2 text-xs font-semibold text-emphasis"
 				>Filter on path<Tooltip>
 					Only scripts, flows and apps with their path matching one of those filters will be allowed
 					to be deployed in the deploy UI. The filters allow '*'' and '**' characters, with '*''
@@ -144,8 +144,7 @@
 		{/if}
 		<div class="flex mt-2">
 			<Button
-				variant="border"
-				color="light"
+				variant="default"
 				size="xs"
 				btnClasses="mt-1"
 				on:click={() => {
@@ -160,7 +159,7 @@
 	</div>
 
 	<div class="max-w-md w-full">
-		<h4 class="flex gap-2 mb-4"
+		<h4 class="flex gap-2 mb-2 text-xs font-semibold text-emphasis"
 			>Filter on type<Tooltip>
 				You can filter which types of item can be deployed to the production workspace. By default
 				everything is deployable.
@@ -201,7 +200,7 @@
 {#if $enterpriseLicense}
 	<div class="flex mt-5 mb-5 gap-1">
 		<Button
-			color="blue"
+			variant="accent"
 			disabled={workspaceToDeployTo == undefined}
 			on:click={() => {
 				editWindmillDeploymentUISettings()
diff --git a/frontend/src/lib/components/Description.svelte b/frontend/src/lib/components/Description.svelte
index 0074928f53..fb0e361eb9 100644
--- a/frontend/src/lib/components/Description.svelte
+++ b/frontend/src/lib/components/Description.svelte
@@ -4,7 +4,7 @@
 	export let link: string | undefined = undefined
 </script>
 
-<div class={twMerge('text-xs text-tertiary font-normal opacity-80', $$props.class)}>
+<div class={twMerge('text-xs text-primary font-normal', $$props.class)}>
 	<slot />
 	{#if link}
 		<a href={link} target="_blank">Learn more</a>
diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index b4570469ad..86ded3bc0d 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -684,7 +684,7 @@
 				>
 			</div>
 
-			<div class="absolute top-2 right-2 !text-tertiary text-xs">
+			<div class="absolute top-2 right-2 !text-primary text-xs">
 				{#if $userStore != undefined}
 					As {$userStore?.username} in {$workspaceStore}
 				{:else}
@@ -743,7 +743,7 @@
 				{:else}
 					<Button
 						disabled={currentScript === undefined}
-						color="dark"
+						variant="accent"
 						on:click={(e) => {
 							runTest()
 						}}
diff --git a/frontend/src/lib/components/DiffDrawer.svelte b/frontend/src/lib/components/DiffDrawer.svelte
index bbb2b99401..c41d7ab9ae 100644
--- a/frontend/src/lib/components/DiffDrawer.svelte
+++ b/frontend/src/lib/components/DiffDrawer.svelte
@@ -136,23 +136,27 @@
 			{#if diffType && data}
 				<Tabs bind:selected={diffType} wrapperClass="shrink-0">
 					{#if data.mode === 'simple'}
-						<Tab value="custom">{data.title}</Tab>
+						<Tab value="custom" label={data.title} />
 					{:else}
-						<Tab value="deployed" disabled={!data.deployed}
-							>{'Deployed <> Current'}{!data.deployed ? ' (no deployed version)' : ''}</Tab
-						>
-						<Tab value="draft" disabled={!data.draft}
-							>{'Latest saved draft <> Current'}{!data.draft ? ' (no draft)' : ''}</Tab
-						>
+						<Tab
+							value="deployed"
+							disabled={!data.deployed}
+							label="{'Deployed <> Current'}{!data.deployed ? ' (no deployed version)' : ''}"
+						/>
+
+						<Tab
+							value="draft"
+							disabled={!data.draft}
+							label="{'Latest saved draft <> Current'}{!data.draft ? ' (no draft)' : ''}"
+						/>
 					{/if}
 				</Tabs>
 			{/if}
 			{#if data?.mode === 'normal'}
 				{#if diffType === 'draft'}
 					<Button
-						size="xs"
-						color="light"
-						variant="border"
+						unifiedSize="md"
+						variant="default"
 						wrapperClasses="self-start"
 						on:click={restoreDraft}
 						disabled={orderedJsonStringify(data.draft) === orderedJsonStringify(data.current)}
@@ -160,9 +164,8 @@
 					>
 				{:else if diffType === 'deployed'}
 					<Button
-						size="xs"
-						color="light"
-						variant="border"
+						unifiedSize="md"
+						variant="default"
 						wrapperClasses="self-start"
 						on:click={restoreDeployed}
 						disabled={!data.draft &&
@@ -195,12 +198,16 @@
 					<div class="flex flex-col h-full gap-4">
 						{#if data.current.content !== undefined}
 							<Tabs bind:selected={contentType}>
-								<Tab value="content" disabled={content === data.current.content}
-									>Content{content === data.current.content ? ' (no changes)' : ''}</Tab
-								>
-								<Tab value="metadata" disabled={metadata === data.current.metadata}
-									>Metadata{metadata === data.current.metadata ? ' (no changes)' : ''}</Tab
-								>
+								<Tab
+									value="content"
+									disabled={content === data.current.content}
+									label={`Content${content === data.current.content ? ' (no changes)' : ''}`}
+								/>
+								<Tab
+									value="metadata"
+									disabled={metadata === data.current.metadata}
+									label={`Metadata${metadata === data.current.metadata ? ' (no changes)' : ''}`}
+								/>
 							</Tabs>
 						{/if}
 						<div class="flex-1">
@@ -256,7 +263,7 @@
 		{#snippet actions()}
 			{#if data?.button}
 				<Button
-					color="light"
+					variant="subtle"
 					on:click={() => {
 						if (data?.button) {
 							data.button.onClick()
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 3b962a4eee..c2e0dae14d 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -505,7 +505,7 @@
 
 {#if result_stream && result == undefined}
 	<div class="flex flex-col w-full gap-2">
-		<div class="flex items-center gap-2 text-tertiary">
+		<div class="flex items-center gap-2 text-primary">
 			<Loader2 class="animate-spin" size={16} /> Streaming result
 		</div>
 		<ResultStreamDisplay {result_stream} />
@@ -513,18 +513,16 @@
 {:else if is_render_all}
 	<div class="flex flex-col w-full gap-2">
 		{#if !noControls}
-			<div class="text-tertiary text-sm">
+			<div class="text-primary text-sm">
 				<ToggleButtonGroup
-					class="h-6"
 					selected={globalForceJson ? 'json' : 'pretty'}
 					on:selected={(ev) => {
 						globalForceJson = ev.detail === 'json'
 					}}
 				>
 					{#snippet children({ item })}
-						<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} {item} />
-
-						<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+						<ToggleButton value="pretty" label="Pretty" icon={Highlighter} {item} />
+						<ToggleButton value="json" label="JSON" icon={Braces} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
 			</div>
@@ -559,11 +557,10 @@
 		{#if result != undefined && length != undefined && largeObject != undefined}
 			<div class="flex justify-between items-center w-full">
 				<div
-					class="text-tertiary text-sm flex flex-row gap-2 items-center"
+					class="text-primary text-sm flex flex-row gap-2 items-center"
 					bind:clientHeight={resultHeaderHeight}
 				>
 					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}<ToggleButtonGroup
-							class="h-6"
 							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
 							on:selected={(ev) => {
 								forceJson = ev.detail === 'json'
@@ -571,17 +568,11 @@
 						>
 							{#snippet children({ item })}
 								{#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')}
-									<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} {item} />
+									<ToggleButton size="sm" value="table" label="Table" icon={Table2} {item} />
 								{:else}
-									<ToggleButton
-										class="px-1.5"
-										value="pretty"
-										label="Pretty"
-										icon={Highlighter}
-										{item}
-									/>
+									<ToggleButton size="sm" value="pretty" label="Pretty" icon={Highlighter} {item} />
 								{/if}
-								<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} {item} />
+								<ToggleButton size="sm" value="json" label="JSON" icon={Braces} {item} />
 							{/snippet}
 						</ToggleButtonGroup>
 					{/if}
@@ -648,7 +639,7 @@
 										Warning
 									</div>
 									<p
-										class="text-tertiary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
+										class="text-primary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
 										>Rendering HTML can expose you to <a
 											href="https://owasp.org/www-community/attacks/xss/"
 											target="_blank"
@@ -658,7 +649,7 @@
 									</p>
 								</div>
 								<div class="center-center">
-									<Button size="sm" color="dark" on:click={() => (enableHtml = true)}>
+									<Button unifiedSize="md" variant="default" on:click={() => (enableHtml = true)}>
 										Enable HTML rendering
 									</Button>
 								</div>
@@ -723,10 +714,11 @@
 								<Button
 									on:click={() =>
 										copyToClipboard(typeof result === 'string' ? result : result?.['result'])}
-									color="light"
-									size="xs"
+									variant="subtle"
+									unifiedSize="sm"
+									endIcon={{ icon: ClipboardCopy }}
 								>
-									<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
+									Copy
 								</Button>
 							</div>
 						{/if}
@@ -788,8 +780,7 @@
 						class="flex flex-col gap-3 mt-2 mx-4"
 					>
 						<Button
-							color="green"
-							variant="border"
+							variant="accent"
 							on:click={() =>
 								fetch(result['resume'], {
 									method: 'POST',
@@ -799,7 +790,7 @@
 						>
 							Resume</Button
 						>
-						<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}
+						<Button variant="default" destructive on:click={() => fetch(result['cancel'])}
 							>Cancel</Button
 						>
 						<div class="center-center"
@@ -926,7 +917,7 @@
 										code={toJsonStr(s3object).replace(/\\n/g, '\n')}
 									/>
 									<button
-										class="text-secondary text-2xs whitespace-nowrap"
+										class="text-primary text-2xs whitespace-nowrap"
 										onclick={() => {
 											s3FileViewer?.open?.(s3object)
 										}}
@@ -937,7 +928,7 @@
 								{:else if !s3object?.disable_download}
 									<FileDownload {workspaceId} {s3object} {appPath} />
 								{:else}
-									<div class="flex text-secondary pt-2">{s3object?.s3} (download disabled)</div>
+									<div class="flex text-primary pt-2">{s3object?.s3} (download disabled)</div>
 								{/if}
 								{#if s3object?.s3?.endsWith('.parquet') || s3object?.s3?.endsWith('.csv')}
 									{#if seeS3PreviewFileFromList == s3object?.s3}
@@ -948,7 +939,7 @@
 											storage={s3object?.storage}
 										/>{:else}
 										<button
-											class="text-secondary whitespace-nowrap flex gap-2 items-center"
+											class="text-primary whitespace-nowrap flex gap-2 items-center"
 											onclick={() => {
 												seeS3PreviewFileFromList = s3object?.s3
 											}}
@@ -968,7 +959,7 @@
 										</div>
 									{:else}
 										<button
-											class="text-secondary whitespace-nowrap flex gap-2 items-center"
+											class="text-primary whitespace-nowrap flex gap-2 items-center"
 											onclick={() => {
 												seeS3PreviewFileFromList = s3object?.s3
 											}}
@@ -1007,7 +998,7 @@
 						</div>
 					{:else}
 						{#if largeObject}
-							<div class="text-sm text-tertiary"
+							<div class="text-xs text-emphasis"
 								><a
 									download="{filename ?? 'result'}.json"
 									href={workspaceId && jobId
@@ -1042,14 +1033,17 @@
 					{/if}
 				{:else if typeof result === 'string' && result.length > 0}
 					<pre class="text-sm">{result}</pre>{#if !noControls}<div class="flex">
-							<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-								<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-							</Button>
+							<Button
+								on:click={() => copyToClipboard(result)}
+								variant="subtle"
+								unifiedSize="sm"
+								endIcon={{ icon: ClipboardCopy }}
+							></Button>
 						</div>
 					{/if}
 				{:else}
 					<Highlight
-						class={forceJson ? 'pt-1' : 'h-full w-full'}
+						class={twMerge(forceJson ? 'pt-1' : 'h-full w-full', '!bg-surface-primary')}
 						language={json}
 						code={toJsonStr(result).replace(/\\n/g, '\n')}
 					/>
@@ -1060,14 +1054,17 @@
 				<pre>{result}</pre>
 				{#if !noControls}
 					<div class="flex">
-						<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-							<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-						</Button>
+						<Button
+							on:click={() => copyToClipboard(result)}
+							variant="subtle"
+							unifiedSize="md"
+							endIcon={{ icon: ClipboardCopy }}
+						></Button>
 					</div>
 				{/if}
 			</div>
 		{:else}
-			<div class="text-tertiary text-sm">No result: {toJsonStr(result)}</div>
+			<div class="text-primary text-xs">No result: {toJsonStr(result)}</div>
 		{/if}
 	</div>
 
@@ -1084,16 +1081,16 @@
 									: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
 								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
 							startIcon={{ icon: Download }}
-							color="light"
-							size="xs"
+							variant="subtle"
+							unifiedSize="md"
 						>
 							Download
 						</Button>
 					{/if}
 					<Button
 						on:click={() => copyToClipboard(toJsonStr(result))}
-						color="light"
-						size="xs"
+						variant="subtle"
+						unifiedSize="md"
 						startIcon={{
 							icon: ClipboardCopy
 						}}
diff --git a/frontend/src/lib/components/DisplayResultControlBar.svelte b/frontend/src/lib/components/DisplayResultControlBar.svelte
index f4e88cf398..95d0a3414e 100644
--- a/frontend/src/lib/components/DisplayResultControlBar.svelte
+++ b/frontend/src/lib/components/DisplayResultControlBar.svelte
@@ -39,7 +39,7 @@
 	}
 </script>
 
-<div class={twMerge('flex flex-row gap-2.5 z-10 text-tertiary -mt-1 items-center')}>
+<div class={twMerge('flex flex-row gap-2.5 z-10 text-primary -mt-1 items-center')}>
 	{#if customUi?.disableDownload !== true}
 		<a
 			download="{filename ?? 'result'}.json"
diff --git a/frontend/src/lib/components/DraftBadge.svelte b/frontend/src/lib/components/DraftBadge.svelte
index e14cebb545..a5bcf73df5 100644
--- a/frontend/src/lib/components/DraftBadge.svelte
+++ b/frontend/src/lib/components/DraftBadge.svelte
@@ -16,14 +16,14 @@
 			{#snippet text()}
 				Never deployed and is only a draft
 			{/snippet}
-			<Badge small color="indigo" baseClass="border border-indigo-200">Draft only</Badge>
+			<Badge small color="indigo">Draft only</Badge>
 		</Popover>
 	{:else}
 		<Popover notClickable>
 			{#snippet text()}
 				Is deployed and has a draft
 			{/snippet}
-			<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
+			<Badge small color="indigo">+Draft</Badge>
 		</Popover>
 	{/if}
 {/if}
diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index 34404779ad..c2b8d0fabc 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { MoreVertical } from 'lucide-svelte'
+	import { EllipsisVertical } from 'lucide-svelte'
 	import type { Placement } from '@floating-ui/core'
 	import type { Item } from '$lib/utils'
 	import DropdownV2Inner from './DropdownV2Inner.svelte'
@@ -19,6 +19,7 @@
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
 	import { untrack } from 'svelte'
 	import { fly } from 'svelte/transition'
+	import { ButtonType } from './common/button/model'
 
 	interface Props {
 		aiId?: string | undefined
@@ -35,6 +36,8 @@
 		customMenu?: boolean
 		class?: string | undefined
 		enableFlyTransition?: boolean
+		size?: ButtonType.UnifiedSize
+		btnText?: string
 		buttonReplacement?: import('svelte').Snippet
 		menu?: import('svelte').Snippet
 	}
@@ -54,6 +57,8 @@
 		customMenu = false,
 		class: classNames = undefined,
 		enableFlyTransition = false,
+		size = 'md',
+		btnText = '',
 		buttonReplacement,
 		menu
 	}: Props = $props()
@@ -142,11 +147,14 @@
 	{:else}
 		<Button
 			nonCaptureEvent
-			size="xs"
-			color="light"
-			startIcon={{ icon: MoreVertical }}
+			unifiedSize={size}
+			variant="subtle"
+			startIcon={{ icon: EllipsisVertical }}
 			btnClasses="bg-transparent"
-		/>
+			iconOnly
+		>
+			{btnText}
+		</Button>
 	{/if}
 </button>
 
@@ -161,7 +169,7 @@
 			{@render menu?.()}
 		{:else}
 			<div
-				class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
+				class="bg-surface-tertiary dark:border-gray-700 w-56 origin-top-right rounded-lg shadow-lg focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
 				style={customWidth ? `width: ${customWidth}px` : ''}
 			>
 				<DropdownV2Inner {aiId} items={computeItems} meltItem={item} />
diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte
index 15ec3b5ada..bbf97a35ec 100644
--- a/frontend/src/lib/components/DropdownV2Inner.svelte
+++ b/frontend/src/lib/components/DropdownV2Inner.svelte
@@ -34,13 +34,13 @@
 				target={item?.hrefTarget}
 				disabled={item?.disabled}
 				class={twMerge(
-					'px-4 py-2 text-primary font-semibold hover:bg-surface-hover cursor-pointer text-xs transition-all w-full',
+					'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
 					'data-[highlighted]:bg-surface-hover',
-					'flex flex-row gap-2 items-center',
-					item?.disabled && 'text-gray-400 cursor-not-allowed',
+					'flex flex-row gap-2 items-center rounded-sm',
+					item?.disabled && 'text-disabled cursor-not-allowed',
 					item?.type === 'delete' &&
 						!item?.disabled &&
-						'text-red-500 hover:bg-red-100 hover:text-red-500 data-[highlighted]:text-red-500 data-[highlighted]:bg-red-100'
+						'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300 '
 				)}
 				item={meltItem}
 				aiId={`${aiId ? `${aiId}-${item.displayName}` : undefined}`}
diff --git a/frontend/src/lib/components/DynamicInput.svelte b/frontend/src/lib/components/DynamicInput.svelte
index 0a11e4663c..bd6cceaf99 100644
--- a/frontend/src/lib/components/DynamicInput.svelte
+++ b/frontend/src/lib/components/DynamicInput.svelte
@@ -171,7 +171,7 @@
 	</div>
 {:else}
 	<div class="flex flex-col gap-1 w-full">
-		<div class="text-xs text-tertiary"
+		<div class="text-xs text-primary"
 			>Dynamic input ({inputType}) is not available in this mode, write value directly</div
 		>
 		{#await import('$lib/components/JsonEditor.svelte')}
diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index ec044d1434..2df6fe5279 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -476,7 +476,7 @@
 								<div class="flex flex-col gap-2 h-full">
 									{#if dynamicFunctions.length > 0}
 										<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
-											<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
+											<div class="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-2">
 												Expected Functions for Dynamic Input Fields:
 											</div>
 											<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
@@ -530,7 +530,7 @@
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
-						<div class="w-full px-3 flex gap-4 justify-end items-center">
+						<div class="w-full px-4 py-2 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
 								<AddPropertyV2
 									bind:schema
@@ -539,14 +539,13 @@
 									}}
 								>
 									{#snippet trigger()}
-										<Button color="light" size="xs" iconOnly startIcon={{ icon: Plus }} />
+										<Button variant="subtle" size="xs" iconOnly startIcon={{ icon: Plus }} />
 									{/snippet}
 								</AddPropertyV2>
 							{/if}
 							<div class="shrink-0">
 								<Toggle
 									bind:checked={jsonView}
-									label="JSON View"
 									size="xs"
 									options={{
 										left: 'JSON editor',
@@ -589,15 +588,15 @@
 												}
 											}}
 										>
-											<div class="flex flex-row gap-2">
+											<div class="flex flex-row gap-2 text-sm">
 												{argName}
 												{#if !uiOnly}
 													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
 														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
 															{#snippet trigger()}
 																<Button
-																	color="light"
-																	size="xs2"
+																	variant="subtle"
+																	size="xs3"
 																	nonCaptureEvent
 																	startIcon={{ icon: Pen }}
 																	iconOnly
@@ -619,8 +618,7 @@
 																			}}
 																		/>
 																		<Button
-																			variant="border"
-																			color="light"
+																			variant="default"
 																			size="xs"
 																			on:click={() => {
 																				renameProperty(argName, argName + i)
@@ -849,7 +847,7 @@
 									</div>
 								{/each}
 							{:else if !shouldHideNoInputs}
-								<div class="text-secondary text-sm p-2">No inputs</div>
+								<div class="text-secondary text-xs p-2">No inputs</div>
 							{/if}
 						</div>
 					{:else}
@@ -909,8 +907,7 @@
 		{#snippet submission()}
 			<div>
 				<Button
-					variant="border"
-					color="blue"
+					variant="default"
 					size="sm"
 					startIcon={{ icon: Plus }}
 					on:click={() => variableEditor?.initNew?.()}
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index f20d1e6437..4f78e491b3 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -256,7 +256,7 @@
 
 	export function insertAtCurrentLine(code: string): void {
 		if (editor) {
-			insertAtLine(code, editor.getPosition()?.lineNumber ?? 0);
+			insertAtLine(code, editor.getPosition()?.lineNumber ?? 0)
 		}
 	}
 
@@ -1255,7 +1255,8 @@
 				lineNumbersMinChars,
 				// overflowWidgetsDomNode: widgets,
 				tabSize: lang == 'python' ? 4 : 2,
-				folding
+				folding,
+				padding: { bottom: 7, top: 7 }
 			})
 			if (key && editorPositionMap?.[key]) {
 				editor.setPosition(editorPositionMap[key])
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index b66834a49a..d094460dfb 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	export const EDITOR_BAR_WIDTH_THRESHOLD = 1044
+	export const EDITOR_BAR_WIDTH_THRESHOLD = 1300
 </script>
 
 <script lang="ts">
@@ -202,9 +202,9 @@
 
 	let showResourceTypePicker = $derived(
 		['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
-		lang === 'python3' ||
-		lang === 'php' ||
-		lang === 'rust'
+			lang === 'python3' ||
+			lang === 'php' ||
+			lang === 'rust'
 	)
 
 	let codeViewer: Drawer | undefined = $state()
@@ -329,9 +329,9 @@
 				name,
 				JSON.stringify(resourceType.schema),
 				{
-					"leading-comments": false,
-					"density": "dense",
-					"derive-debug": true
+					'leading-comments': false,
+					density: 'dense',
+					'derive-debug': true
 				}
 			)
 			editor.insertAtCurrentLine(lines.join('\n'))
@@ -587,9 +587,7 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 	{#snippet submission()}
 		<div class="flex flex-row">
 			<Button
-				variant="border"
-				color="blue"
-				size="sm"
+				variant="accent"
 				startIcon={{ icon: Plus }}
 				on:click={() => {
 					variableEditor?.initNew()
@@ -695,9 +693,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			<Button
 				startIcon={{ icon: Plus }}
 				target="_blank"
-				variant="border"
-				color="blue"
-				size="sm"
+				variant="accent"
 				href="{base}/resources?connect_app=undefined"
 			>
 				Add resource
@@ -787,22 +783,20 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 />
 
 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">
-	<div class="flex items-center">
+	<div class="flex gap-3 items-center">
 		<div
 			title={validCode ? 'Main function parsable' : 'Main function not parsable'}
 			class="rounded-full w-2 h-2 mx-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
 		></div>
-		<div class="flex items-center gap-0.5">
+		<div class="flex items-center gap-2">
 			{#if showContextVarPicker && customUi?.contextVar != false}
 				<Button
 					aiId="editor-bar-add-context-variable"
 					aiDescription="Add context variable"
 					title="Add context variable"
-					color="light"
+					variant="subtle"
 					on:click={contextualVariablePicker.openDrawer}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DollarSign }}
 					{iconOnly}
 					>+Context var
@@ -813,11 +807,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-variable"
 					aiDescription="Add variable"
 					title="Add variable"
-					color="light"
-					btnClasses="!font-medium text-tertiary"
+					variant="subtle"
 					on:click={variablePicker.openDrawer}
-					size="xs"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DollarSign }}
 					{iconOnly}
 				>
@@ -830,11 +822,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-s3-object"
 					aiDescription="Add S3 Object"
 					title="Add S3 object"
-					color="light"
+					variant="subtle"
 					on:click={() => s3FilePicker?.open()}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: File }}
 					{iconOnly}
 					>+S3 Object
@@ -846,10 +836,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-resource"
 					aiDescription="Add resource"
 					title="Add resource"
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
+					unifiedSize="sm"
+					variant="subtle"
 					on:click={resourcePicker.openDrawer}
 					{iconOnly}
 					startIcon={{ icon: Package }}
@@ -867,10 +855,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						aiId="editor-bar-add-git-repo"
 						aiDescription="Delegate to Git repository"
 						title="Delegate to Git repository"
-						btnClasses="!font-medium text-tertiary"
-						size="xs"
-						spacingSize="md"
-						color="light"
+						unifiedSize="sm"
+						variant="subtle"
 						on:click={() => (gitRepoPickerOpen = true)}
 						{iconOnly}
 						startIcon={{ icon: GitBranch }}
@@ -885,10 +871,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-resource-type"
 					aiDescription="Add resource type"
 					title="Add resource type"
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
+					variant="subtle"
+					unifiedSize="sm"
 					on:click={() => resourceTypePicker?.openDrawer()}
 					{iconOnly}
 					startIcon={{ icon: Package }}
@@ -902,11 +886,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-add-database"
 					aiDescription="Add database"
 					title="Add database"
-					color="light"
+					variant="subtle"
 					on:click={() => databasePicker?.openDrawer()}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DatabaseIcon }}
 					{iconOnly}
 					>+Database
@@ -918,11 +900,9 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-use-ducklake"
 					aiDescription="Use Ducklake"
 					title="Use Ducklake"
-					color="light"
+					variant="subtle"
 					on:click={() => ducklakePicker?.openDrawer()}
-					size="xs"
-					btnClasses="!font-medium text-tertiary"
-					spacingSize="md"
+					unifiedSize="sm"
 					startIcon={{ icon: DucklakeIcon }}
 					{iconOnly}
 					>+Ducklake
@@ -934,10 +914,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiId="editor-bar-reset-content"
 					aiDescription="Reset content"
 					title="Reset Content"
-					btnClasses="!font-medium text-tertiary"
-					size="xs"
-					spacingSize="md"
-					color="light"
+					unifiedSize="sm"
+					variant="subtle"
 					on:click={clearContent}
 					{iconOnly}
 					startIcon={{ icon: RotateCw }}
@@ -951,10 +929,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					<Button
 						aiId="editor-bar-reload-assistants"
 						aiDescription="Reload assistants"
-						btnClasses="!font-medium text-tertiary"
-						size="xs"
-						spacingSize="md"
-						color="light"
+						unifiedSize="sm"
+						variant="subtle"
 						on:click={() => editor?.reloadWebsocket()}
 						startIcon={{
 							icon: RotateCw,
@@ -986,7 +962,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				<div class="flex items-center px-3">
 					<Toggle
 						options={{ right: '' }}
-						size="xs"
+						size="sm"
 						checked={diffMode}
 						disabled={!lastDeployedCode}
 						on:change={(e) => {
@@ -998,7 +974,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						{#snippet text()}
 							Toggle diff mode
 						{/snippet}
-						<DiffIcon class="ml-1 text-tertiary" size={14} />
+						<DiffIcon class="ml-1 text-primary" size={14} />
 					</Popover>
 				</div>
 			{/if}
@@ -1015,7 +991,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						{#snippet text()}
 							Multiplayer
 						{/snippet}
-						<Users class="ml-1 text-tertiary" size={14} />
+						<Users class="ml-1 text-primary" size={14} />
 					</Popover>
 					{#if collabLive}
 						<button
@@ -1029,7 +1005,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 									class="inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 ring-white bg-gray-600"
 									title={user.name}
 								>
-									<span class="text-sm font-medium leading-none text-white"
+									<span class="text-sm font-semibold leading-none text-white"
 										>{user.name.substring(0, 2).toLocaleUpperCase()}</span
 									>
 								</span>
@@ -1041,13 +1017,19 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 			{#if customUi?.aiGen != false}
 				{#if openAiChat}
-					<FlowInlineScriptAiButton {moduleId} />
+					<FlowInlineScriptAiButton {moduleId} btnProps={{ variant: 'subtle' }} />
 				{:else}
-					<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
+					<ScriptGen
+						{editor}
+						{diffEditor}
+						{lang}
+						btnProps={{ variant: 'subtle', iconOnly: true }}
+						{args}
+					/>
 				{/if}
 			{/if}
 
-			<EditorSettings {customUi} />
+			<EditorSettings {customUi} btnProps={{ variant: 'subtle', unifiedSize: 'md' }} />
 		</div>
 	</div>
 
@@ -1055,10 +1037,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		{@render right?.()}
 		{#if scriptPath && !noHistory}
 			<Button
-				btnClasses="!font-medium text-tertiary"
-				size="xs"
-				spacingSize="md"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				on:click={() => (showHistoryDrawer = true)}
 				{iconOnly}
 				startIcon={{ icon: History }}
@@ -1069,10 +1049,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		{/if}
 		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS && customUi?.library != false}
 			<Button
-				btnClasses="!font-medium text-tertiary"
-				size="xs"
-				spacingSize="md"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				on:click={scriptPicker.openDrawer}
 				{iconOnly}
 				startIcon={{ icon: Library }}
@@ -1083,8 +1061,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		{/if}
 		{#if saveToWorkspace}
 			<Button
-				size="xs"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				startIcon={{ icon: Save }}
 				on:click={() => dispatch('createScriptFromInlineScript')}
 				iconOnly={false}
diff --git a/frontend/src/lib/components/EditorSettings.svelte b/frontend/src/lib/components/EditorSettings.svelte
index 6f7341b1ea..c1fdf0c464 100644
--- a/frontend/src/lib/components/EditorSettings.svelte
+++ b/frontend/src/lib/components/EditorSettings.svelte
@@ -7,12 +7,14 @@
 	import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
 	import type { EditorBarUi } from './custom_ui'
 	import Popover from './meltComponents/Popover.svelte'
+	import type { ComponentProps } from 'svelte'
 
 	interface Props {
 		customUi?: EditorBarUi
+		btnProps?: ComponentProps<typeof Button>
 	}
 
-	let { customUi = {} }: Props = $props()
+	let { customUi = {}, btnProps }: Props = $props()
 </script>
 
 {#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
@@ -24,13 +26,11 @@
 		{#snippet trigger()}
 			{#if customUi.editorSettings != false}
 				<Button
-					btnClasses="text-tertiary"
-					color="light"
-					size="xs"
 					nonCaptureEvent={true}
 					startIcon={{ icon: Settings }}
 					iconOnly
 					title="Editor settings"
+					{...btnProps}
 				/>
 			{/if}
 		{/snippet}
diff --git a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte b/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
index 08a3fc82b1..770e5407a6 100644
--- a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
+++ b/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
@@ -58,7 +58,7 @@
 		handlerExtraArgs = $bindable(),
 		customScriptTemplate,
 		customHandlerKind = $bindable('script'),
-		customTabTooltip,
+		customTabTooltip
 	}: Props = $props()
 
 	let customHandlerSchema: Schema | undefined = $state()
@@ -324,18 +324,15 @@
 
 <div>
 	<Tabs bind:selected={handlerSelected} class="mt-2 mb-4">
-		<Tab value="slack" disabled={!isEditable}>Slack</Tab>
-		<Tab value="teams" disabled={!isEditable}>Teams</Tab>
-		<Tab value="email" disabled={!isEditable}>Email</Tab>
-		<Tab value="custom" disabled={!isEditable}>
-			Custom
-			{@render customTabTooltip?.()}
-		</Tab>
+		<Tab value="slack" disabled={!isEditable} label="Slack" />
+		<Tab value="teams" disabled={!isEditable} label="Teams" />
+		<Tab value="email" disabled={!isEditable} label="Email" />
+		<Tab value="custom" disabled={!isEditable} label="Custom" extra={customTabTooltip} />
 	</Tabs>
 </div>
 
 {#if handlerSelected === 'custom'}
-	<div class="flex flex-row mb-2">
+	<div class="flex flex-row mb-6">
 		<ScriptPicker
 			disabled={!isEditable || !$enterpriseLicense}
 			kinds={['script', 'failure']}
@@ -348,8 +345,8 @@
 
 		{#if !handlerPath}
 			<Button
-				btnClasses="ml-4 mt-2"
-				color="dark"
+				btnClasses="ml-4"
+				variant="default"
 				size="xs"
 				href={customScriptTemplate}
 				disabled={!isEditable}
@@ -360,7 +357,7 @@
 		{/if}
 	</div>
 	{#if showScriptHelpText}
-		<div class="text-xs">
+		<div class="text-2xs text-secondary">
 			Example of error handler scripts can be found on <a
 				target="_blank"
 				href="{$hubBaseUrlStore}/failures"
@@ -370,7 +367,7 @@
 		</div>
 	{/if}
 	{#if handlerPath}
-		<p class="font-semibold text-sm mt-4 mb-2">Extra arguments</p>
+		<p class="font-semibold text-xs mt-6 mb-1">Extra arguments</p>
 		{#await import('$lib/components/SchemaForm.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
@@ -434,21 +431,16 @@
 							href="{base}/workspace_settings?tab=slack">configure it here</a
 						>.
 					</p>
-					<Button
-						variant="border"
-						color="light"
-						on:click={loadSlackResources}
-						startIcon={{ icon: RotateCw }}
-					/>
+					<Button variant="default" on:click={loadSlackResources} startIcon={{ icon: RotateCw }} />
 				</div>
 			</Alert>
 		{:else}
 			<Button
 				disabled={emptyString(handlerExtraArgs['channel'])}
 				btnClasses="w-32 text-center"
-				color="dark"
+				variant="default"
 				on:click={() => sendSlackMessage(handlerExtraArgs['channel'])}
-				size="xs">Send test message</Button
+				unifiedSize="md">Send test message</Button
 			>
 			{#if connectionTestJob !== undefined}
 				<p class="text-normal text-2xs mt-1 gap-2">
@@ -493,7 +485,7 @@
 		<div class="w-2/3 flex flex-col gap-2">
 			<div class="flex flex-row items-center gap-2">
 				<div class="pt-1 flex-shrink-0">
-					<MsTeamsIcon height="24px" width="24px" />
+					<MsTeamsIcon size={24} />
 				</div>
 				<p class="text-sm">Teams Channel</p>
 			</div>
@@ -513,8 +505,8 @@
 									}
 								: undefined,
 						(channel) => {
-							handlerExtraArgs['channel'] = channel?.channel_id;
-							handlerExtraArgs['channel_name'] = channel?.channel_name;
+							handlerExtraArgs['channel'] = channel?.channel_id
+							handlerExtraArgs['channel_name'] = channel?.channel_name
 						}
 					}
 					onError={(e) => sendUserToast('Failed to load channels: ' + e.message, true)}
@@ -547,19 +539,14 @@
 							>workspace settings</a
 						>.
 					</p>
-					<Button
-						variant="border"
-						color="light"
-						on:click={loadTeamsResources}
-						startIcon={{ icon: RotateCw }}
-					/>
+					<Button variant="default" on:click={loadTeamsResources} startIcon={{ icon: RotateCw }} />
 				</div>
 			</Alert>
 		{:else}
 			<Button
 				disabled={emptyString(handlerExtraArgs['channel'])}
 				btnClasses="w-32 text-center mt-2"
-				color="dark"
+				variant="default"
 				on:click={() => sendTeamsMessage(handlerExtraArgs['channel'] ?? '')}
 				size="xs">Send test message</Button
 			>
@@ -615,7 +602,7 @@
 				class="w-full"
 			/>
 			{#if handlerExtraArgs[EMAIL_RECIPIENTS_KEY]?.length > 0}
-				<span class="text-sm text-tertiary">
+				<span class="text-sm text-primary">
 					{handlerExtraArgs[EMAIL_RECIPIENTS_KEY]?.length} email{handlerExtraArgs[
 						EMAIL_RECIPIENTS_KEY
 					]?.length === 1
diff --git a/frontend/src/lib/components/ExploreAssetButton.svelte b/frontend/src/lib/components/ExploreAssetButton.svelte
index 283dae370c..18cdf58e3b 100644
--- a/frontend/src/lib/components/ExploreAssetButton.svelte
+++ b/frontend/src/lib/components/ExploreAssetButton.svelte
@@ -30,7 +30,7 @@
 		onClick,
 		class: className = '',
 		noText = false,
-		buttonVariant = 'border',
+		buttonVariant = 'default',
 		btnClasses = '',
 		disabled = false
 	}: {
@@ -50,9 +50,8 @@
 
 <Button
 	disabled={$userStore?.operator || disabled}
-	size="xs"
+	unifiedSize={'md'}
 	variant={buttonVariant}
-	spacingSize="xs2"
 	wrapperClasses={className}
 	{btnClasses}
 	on:click={async () => {
@@ -69,12 +68,19 @@
 		}
 		onClick?.()
 	}}
+	endIcon={asset.kind === 's3object'
+		? { icon: File }
+		: asset.kind === 'resource'
+			? { icon: Database }
+			: asset.kind === 'ducklake'
+				? { icon: DucklakeIcon }
+				: undefined}
 >
 	{#if asset.kind === 's3object'}
-		<span class:hidden={noText}>Explore</span> <File size={18} />
+		<span class:hidden={noText}>Explore</span>
 	{:else if asset.kind === 'resource'}
-		<span class:hidden={noText}>Manage</span> <Database size={18} />
+		<span class:hidden={noText}>Manage</span>
 	{:else if asset.kind === 'ducklake'}
-		<span class:hidden={noText}>Manage</span> <DucklakeIcon size={18} />
+		<span class:hidden={noText}>Manage</span>
 	{/if}
 </Button>
diff --git a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
index 4b4954bd89..ec7b1dda47 100644
--- a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
+++ b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
@@ -98,7 +98,7 @@
 					style="position: absolute; overflow: hidden; width: 1.67772e+07px; height: 1.67772e+07px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
 				>
 					<div
-						class="view-lines monaco-mouse-cursor-text text-tertiary/60"
+						class="view-lines monaco-mouse-cursor-text text-primary/60"
 						style="line-height: {lineHeight}px; position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: 1143px; height: 789px;"
 					>
 						{#each lines as line, i}
diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
index 29f34ca291..87119c8e75 100644
--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -23,9 +23,9 @@
 <div class="inline-flex flex-row items-baseline truncated">
 	<span
 		class={twMerge(
-			disabled ? 'text-tertiary' : '',
-			'font-semibold',
-			lightHeader ? 'text-secondary text-sm font-normal' : '',
+			disabled ? 'text-primary' : '',
+			'font-semibold text-xs',
+			lightHeader ? 'text-secondary font-normal' : 'text-emphasis',
 			labelClass
 		)}
 	>
@@ -40,7 +40,7 @@
 	{/if}
 
 	{#if displayType}
-		<span class="text-xs italic ml-2 text-hint">
+		<span class="text-2xs italic ml-2 text-hint">
 			{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
 				{format}
 			{:else}
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 22e22f2b7a..0ec5c4bc41 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -88,6 +88,7 @@
 	import type { FlowBuilderProps } from './flow_builder'
 	import { ModulesTestStates } from './modulesTest.svelte'
 	import FlowAssetsHandler, { initFlowGraphAssetsCtx } from './flows/FlowAssetsHandler.svelte'
+	import { inputSizeClasses } from './text_input/TextInput.svelte'
 
 	let {
 		initialPath = $bindable(''),
@@ -1017,8 +1018,7 @@
 						<Button
 							btnClasses="hidden lg:inline-flex"
 							startIcon={{ icon: Calendar }}
-							variant="contained"
-							color="light"
+							variant="subtle"
 							size="xs"
 							on:click={async () => {
 								select('triggers')
@@ -1036,26 +1036,24 @@
 
 					{#if customUi?.topBar?.path != false}
 						<div class="flex justify-start w-full">
-							<div>
-								<button
-									onclick={async () => {
-										select('settings-metadata')
-										document.getElementById('path')?.focus()
-									}}
+							<button
+								onclick={async () => {
+									select('settings-metadata')
+									document.getElementById('path')?.focus()
+								}}
+							>
+								<Badge
+									color="gray"
+									class="text-primary rounded-r-none border border-r-0 {inputSizeClasses.md}"
 								>
-									<Badge
-										color="gray"
-										class="center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[28px]  !w-[70px] rounded-r-none"
-									>
-										<Pen size={12} class="mr-2" /> Path
-									</Badge>
-								</button>
-							</div>
+									<Pen size={12} class="mr-2" /> Path
+								</Badge>
+							</button>
 							<input
 								type="text"
 								readonly
 								value={$pathStore && $pathStore != '' ? $pathStore : 'Choose a path'}
-								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
+								class="font-mono !text-2xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 cursor-default !rounded-l-none {inputSizeClasses.md}"
 								onfocus={({ currentTarget }) => {
 									currentTarget.select()
 								}}
@@ -1081,9 +1079,8 @@
 					{/if}
 					{#if customUi?.topBar?.diff != false}
 						<Button
-							color="light"
-							variant="border"
-							size="xs"
+							variant="default"
+							unifiedSize="md"
 							on:click={async () => {
 								if (!savedFlow) {
 									return
@@ -1110,11 +1107,9 @@
 								})
 							}}
 							disabled={!savedFlow}
+							startIcon={{ icon: DiffIcon }}
 						>
-							<div class="flex flex-row gap-2 items-center">
-								<DiffIcon size={14} />
-								Diff
-							</div>
+							Diff
 						</Button>
 					{/if}
 					<FlowPreviewButtons
@@ -1138,13 +1133,12 @@
 					/>
 					<Button
 						loading={loadingDraft}
-						size="xs"
+						unifiedSize="md"
+						variant="accent"
 						startIcon={{ icon: Save }}
 						on:click={() => saveDraft()}
 						disabled={(!newFlow && !savedFlow) || loading}
-						shortCut={{
-							key: 'S'
-						}}
+						shortCut={{ key: 'S' }}
 					>
 						Draft
 					</Button>
diff --git a/frontend/src/lib/components/FlowBuilderTutorials.svelte b/frontend/src/lib/components/FlowBuilderTutorials.svelte
index ba5b8fa9e7..1442a89514 100644
--- a/frontend/src/lib/components/FlowBuilderTutorials.svelte
+++ b/frontend/src/lib/components/FlowBuilderTutorials.svelte
@@ -45,9 +45,8 @@
 		{#snippet buttonReplacement()}
 			<Button
 				nonCaptureEvent
-				size="xs"
-				color="light"
-				variant="border"
+				unifiedSize="md"
+				variant="default"
 				id="tutorials-button"
 				startIcon={{ icon: BookOpen }}
 			/>
diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte
index f756132721..6fcb5c902c 100644
--- a/frontend/src/lib/components/FlowGraphViewerStep.svelte
+++ b/frontend/src/lib/components/FlowGraphViewerStep.svelte
@@ -266,7 +266,7 @@
 			<div class="flex-col flex gap-2">
 				<div class="flex flex-row gap-4 text-sm p-2">
 					<Badge large={true} color="blue">Default branch</Badge>
-					<p class="italic text-tertiary"
+					<p class="italic text-primary"
 						>If none of the predicates' expressions evaluated in-order match, this branch is chosen</p
 					>
 				</div>
diff --git a/frontend/src/lib/components/FlowJobResult.svelte b/frontend/src/lib/components/FlowJobResult.svelte
index ed35246c19..7cf08a11d9 100644
--- a/frontend/src/lib/components/FlowJobResult.svelte
+++ b/frontend/src/lib/components/FlowJobResult.svelte
@@ -4,6 +4,7 @@
 	import LogViewer from './LogViewer.svelte'
 	import type { CompletedJob, Job } from '$lib/gen'
 	import AiAgentLogViewer from './AIAgentLogViewer.svelte'
+	import { twMerge } from 'tailwind-merge'
 	import type { AgentTool } from './flows/agentToolUtils'
 
 	interface Props {
@@ -49,18 +50,19 @@
 
 <div
 	class:border={!noBorder}
-	class="{!col
-		? 'grid grid-cols-2'
-		: 'flex flex-col max-h-screen gap-4'} shadow border border-tertiary-inverse grow overflow-hidden"
+	class={twMerge(
+		'rounded-md grow bg-surface-tertiary overflow-hidden text-xs',
+		!col ? 'grid grid-cols-2' : 'flex flex-col max-h-screen gap-2 overflow-hidden'
+	)}
 >
-	<div class="bg-surface {col ? 'max-h-1/2 grow' : 'max-h-80'} p-1 overflow-auto relative">
-		<span class="text-tertiary">Result</span>
+	<div class="{col ? 'max-h-1/2 grow' : 'max-h-80'} p-2 overflow-auto relative">
+		<span class="text-primary text-xs font-normal">Result</span>
 		{#if result !== undefined || result_stream !== undefined}
 			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}
-			<div class="text-gray-400">No result (result is undefined)</div>
+			<div class="text-secondary">No result (result is undefined)</div>
 		{/if}
 	</div>
 	<div class="overflow-auto {col ? 'grow' : 'max-h-80'} relative">
diff --git a/frontend/src/lib/components/FlowLogRow.svelte b/frontend/src/lib/components/FlowLogRow.svelte
index 15eb19f38c..4153fb424c 100644
--- a/frontend/src/lib/components/FlowLogRow.svelte
+++ b/frontend/src/lib/components/FlowLogRow.svelte
@@ -44,7 +44,7 @@
 >
 	<button
 		class={twMerge(
-			'py-1 leading-tight w-full flex items-center justify-left text-xs text-tertiary hover:text-primary hover:bg-surface-hover ',
+			'py-1 leading-tight w-full flex items-center justify-left text-xs text-primary hover:text-primary hover:bg-surface-hover ',
 			isCurrent(id) ? 'bg-surface-hover text-primary' : '',
 			className
 		)}
diff --git a/frontend/src/lib/components/FlowLogViewer.svelte b/frontend/src/lib/components/FlowLogViewer.svelte
index 53082b1387..0a0e353e21 100644
--- a/frontend/src/lib/components/FlowLogViewer.svelte
+++ b/frontend/src/lib/components/FlowLogViewer.svelte
@@ -486,10 +486,10 @@
 				{#snippet text()}
 					Keyboard navigation available - ↑/↓/Enter
 				{/snippet}
-				<Keyboard size={16} class="text-tertiary" />
+				<Keyboard size={16} class="text-primary" />
 			</Tooltip>
 			<div class="flex items-center gap-2 whitespace-nowrap">
-				<label for="showTimeline" class="text-xs text-tertiary hover:text-primary transition-colors"
+				<label for="showTimeline" class="text-xs text-primary hover:text-primary transition-colors"
 					>Show timeline</label
 				>
 				<div class="flex-shrink-0">
@@ -505,7 +505,7 @@
 			<div class="flex items-center gap-2 whitespace-nowrap">
 				<label
 					for="showResultsInputs"
-					class="text-xs text-tertiary hover:text-primary transition-colors"
+					class="text-xs text-primary hover:text-primary transition-colors"
 					>Show inputs/results</label
 				>
 				<div class="flex-shrink-0">
@@ -520,7 +520,7 @@
 			</div>
 			<button
 				onclick={toggleExpandAll}
-				class="text-xs text-tertiary hover:text-primary transition-colors flex items-center gap-2 min-w-24 justify-end"
+				class="text-xs text-primary hover:text-primary transition-colors flex items-center gap-2 min-w-24 justify-end"
 			>
 				{allExpanded ? 'Collapse All' : 'Expand All'}
 				{#if allExpanded}
@@ -553,7 +553,7 @@
 						{#if flowInfo?.label}
 							: {flowInfo.label}
 						{/if}
-						<span class="text-tertiary">{getStepProgress(rootJob, modules.length)}</span>
+						<span class="text-primary">{getStepProgress(rootJob, modules.length)}</span>
 					</div>
 
 					<div
@@ -723,7 +723,7 @@
 															: {module.summary}
 														{/if}
 														{#if hasEmptySubflowValue}
-															<span class="text-tertiary">
+															<span class="text-primary">
 																{#if module.value.type === 'forloopflow' || module.value.type === 'whileloopflow'}
 																	(empty loop)
 																{:else if module.value.type === 'branchall' || module.value.type === 'branchone'}
@@ -917,7 +917,7 @@
 																: ''
 														)}
 													>
-														<div class="text-xs text-tertiary font-mono"> No logs available </div>
+														<div class="text-xs text-primary font-mono"> No logs available </div>
 													</div>
 												{/if}
 
diff --git a/frontend/src/lib/components/FlowLoopIterationPreview.svelte b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
index 7c9bc78fa0..33f7796a93 100644
--- a/frontend/src/lib/components/FlowLoopIterationPreview.svelte
+++ b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
@@ -115,15 +115,16 @@
 				on:click={() => dispatch('close')}
 				startIcon={{ icon: X }}
 				iconOnly
-				size="sm"
-				color="light"
+				unifiedSize="md"
+				variant="default"
 				btnClasses="hover:bg-surface-hover  bg-surface-secondaryw-8 h-8 rounded-full p-0"
 			/>
 		</div>
 
 		{#if isRunning}
 			<Button
-				color="red"
+				variant="accent"
+				destructive
 				on:click={async () => {
 					isRunning = false
 					try {
@@ -135,7 +136,7 @@
 							}))
 					} catch {}
 				}}
-				size="sm"
+				unifiedSize="md"
 				btnClasses="w-full max-w-lg"
 				loading={true}
 				clickableWhileLoading
@@ -144,10 +145,9 @@
 			</Button>
 		{:else}
 			<Button
-				variant="contained"
+				variant="accent"
 				startIcon={{ icon: isRunning ? RefreshCw : Play }}
-				color="dark"
-				size="sm"
+				unifiedSize="md"
 				btnClasses="w-full max-w-lg"
 				on:click={() => runPreview(previewArgs, undefined)}
 				id="flow-editor-test-flow-drawer"
@@ -184,7 +184,7 @@
 					bind:selectedJobStep
 				/>
 			{:else}
-				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
+				<div class="italic text-primary h-full grow"> Flow status will be displayed here </div>
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/FlowMetadata.svelte b/frontend/src/lib/components/FlowMetadata.svelte
index bcb880dd0e..3d4be84545 100644
--- a/frontend/src/lib/components/FlowMetadata.svelte
+++ b/frontend/src/lib/components/FlowMetadata.svelte
@@ -20,13 +20,13 @@
 </script>
 
 <div
-	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base overflow-x-auto"
+	class="rounded-md p-4 bg-surface-secondary overflow-x-auto text-xs text-primary font-normal flex flex-col gap-1"
 	style="min-height: 150px;"
 >
 	<JobStatus {job} />
 	<div class="flex flex-row gap-2 items-center">
-		<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
-		<span class="text-2xs text-secondary whitespace-nowrap">
+		<Clock size={SMALL_ICON_SIZE} class="min-w-3.5" />
+		<span class="whitespace-nowrap">
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
@@ -36,8 +36,8 @@
 		</span>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
-		<div class="flex flex-row gap-2 items-center text-sm">
-			<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+		<div class="flex flex-row gap-2 items-center">
+			<Clock size={SMALL_ICON_SIZE} class="min-w-3.5" />
 			<span class="whitespace-nowrap">
 				Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 				<Tooltip small>{job?.started_at}</Tooltip>
@@ -45,17 +45,17 @@
 		</div>
 	{/if}
 	{#if job && job['mem_peak']}
-		<div class="flex flex-row gap-2 items-center text-sm">
+		<div class="flex flex-row gap-2 items-center">
 			<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 			<span> Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span>
 		</div>
 	{/if}
-	<div>
+	<div class="text-xs text-primary font-normal flex flex-col gap-1">
 		{#if job && job.parent_job}
 			{#if job.is_flow_step}
-				<div class="flex flex-row gap-2 items-center text-sm">
-					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
-					<span class="whitespace-nowrap text-sm">
+				<div class="flex flex-row gap-2 items-center">
+					<BarsStaggered size={SMALL_ICON_SIZE} class="min-w-3.5" />
+					<span class="whitespace-nowrap">
 						Step of flow
 						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
 							{truncateRev(job.parent_job, 18)}
@@ -63,8 +63,8 @@
 					</span>
 				</div>
 			{:else}
-				<div class="flex flex-row gap-2 items-center text-sm">
-					<Bot size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+				<div class="flex flex-row gap-2 items-center">
+					<Bot size={SMALL_ICON_SIZE} class="min-w-3.5" />
 					<span class="whitespace-nowrap">
 						Triggered by parent
 						<a href={`${base}/run/${job.parent_job}?workspace=${$workspaceStore}`}>
@@ -74,8 +74,8 @@
 				</div>
 			{/if}
 		{:else if job && job.schedule_path}
-			<div class="flex flex-row gap-2 w-full items-center text-sm">
-				<Calendar size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+			<div class="flex flex-row gap-2 w-full items-center">
+				<Calendar size={SMALL_ICON_SIZE} class="min-w-3.5" />
 				<span class="whitespace-nowrap">
 					Schedule:
 					<!-- svelte-ignore a11y_invalid_attribute -->
@@ -97,18 +97,18 @@
 			{@const viewHref = `${base}/${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
 			<div class="flex flex-row gap-2 items-center">
 				{#if isScript}
-					<Code2 size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+					<Code2 size={SMALL_ICON_SIZE} class="min-w-3.5" />
 				{:else}
-					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
+					<BarsStaggered size={SMALL_ICON_SIZE} />
 				{/if}
-				<span class="truncate text-sm">
+				<span class="truncate">
 					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
 				</span>
 			</div>
 		{/if}
 
-		<div class="flex items-center gap-2 text-sm">
-			<User size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+		<div class="flex items-center gap-2">
+			<User size={SMALL_ICON_SIZE} class="min-w-3.5" />
 
 			<span>
 				By {truncateRev(
diff --git a/frontend/src/lib/components/FlowPlugConnect.svelte b/frontend/src/lib/components/FlowPlugConnect.svelte
index 6db1a7daa0..10b00e7301 100644
--- a/frontend/src/lib/components/FlowPlugConnect.svelte
+++ b/frontend/src/lib/components/FlowPlugConnect.svelte
@@ -11,12 +11,10 @@
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
 	<Button
-		variant="border"
-		color="light"
-		size="xs2"
+		variant="default"
 		btnClasses={twMerge(
-			connecting ? 'text-blue-500' : 'text-tertiary',
-			'group/plug-btn overflow-clip flex p-0'
+			connecting ? 'text-accent' : '',
+			'bg-surface group/plug-btn overflow-clip flex p-0'
 		)}
 		on:click
 		{...id ? { id } : {}}
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 69541052db..616e7fcac5 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -299,8 +299,8 @@
 					on:click={() => dispatch('close')}
 					startIcon={{ icon: X }}
 					iconOnly
-					size="sm"
-					color="light"
+					unifiedSize="md"
+					variant="default"
 					btnClasses="hover:bg-surface-hover  bg-surface-secondaryw-8 h-8 rounded-full p-0"
 				/>
 			</div>
@@ -308,11 +308,12 @@
 			{#if isRunning}
 				<div class="mx-auto">
 					<Button
-						color="red"
+						variant="accent"
+						destructive
 						on:click={async () => {
 							cancelTest()
 						}}
-						size="sm"
+						unifiedSize="md"
 						btnClasses="w-full max-w-lg"
 						loading={true}
 						clickableWhileLoading
@@ -321,13 +322,12 @@
 					</Button>
 				</div>
 			{:else}
-				<div class="grow justify-center flex flex-row gap-4">
+				<div class="grow justify-center flex flex-row gap-2">
 					{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel && aiChatManager.flowAiChatHelpers?.getModuleAction(selectedJobStep) !== 'removed'}
 						{#if selectedJobStepType == 'single'}
 							<Button
-								size="xs"
-								color="light"
-								variant="border"
+								unifiedSize="md"
+								variant="default"
 								title={`Re-start this flow from step ${selectedJobStep} (included).`}
 								on:click={() => {
 									runPreview(previewArgs.val, {
@@ -351,8 +351,7 @@
 								{#snippet button()}
 									<Button
 										title={`Re-start this flow from step ${selectedJobStep} (included).`}
-										variant="border"
-										color="blue"
+										variant="default"
 										startIcon={{ icon: RefreshCw }}
 										on:click={() => {
 											runPreview(previewArgs.val, {
@@ -420,9 +419,8 @@
 					{/if}
 					{#if !flowStore.val.value?.chat_input_enabled}
 						<Button
-							variant="contained"
+							variant="accent"
 							startIcon={{ icon: isRunning ? RefreshCw : Play }}
-							color="dark"
 							size="sm"
 							btnClasses="w-full max-w-lg"
 							on:click={() => runPreview(previewArgs.val, undefined)}
@@ -499,7 +497,6 @@
 							<div class="flex flex-row gap-2">
 								<Toggle
 									bind:checked={jsonView}
-									label="JSON View"
 									size="xs"
 									options={{
 										right: 'JSON',
@@ -618,11 +615,11 @@
 					{customUi}
 				/>
 			{:else if loadingHistory}
-				<div class="italic text-tertiary h-full grow mx-auto flex flex-row items-center gap-2">
+				<div class="italic text-primary h-full grow mx-auto flex flex-row items-center gap-2">
 					<Loader2 class="animate-spin" /> <span> Loading history... </span>
 				</div>
 			{:else}
-				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
+				<div class="italic text-primary h-full grow"> Flow status will be displayed here </div>
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index c6f9a45efe..4a573bfcc5 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -1314,15 +1314,17 @@
 		{#if render}
 			{#if innerModules && innerModules.length > 0 && !isListJob}
 				<Tabs class="mx-auto {wideResults ? '' : 'max-w-7xl'}" bind:selected>
-					<Tab value="graph"><span class="font-semibold text-md">Graph</span></Tab>
+					<Tab value="graph" label="Graph" />
 					<Tab
 						value="logs"
 						class={animateLogsTab
 							? 'animate-pulse animate-duration-1000 bg-surface-inverse text-primary-inverse'
-							: ''}><span class="font-semibold">Logs</span></Tab
-					>
-					<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
-					<Tab value="assets"><span class="font-semibold">Assets</span></Tab>
+							: ''}
+						label="Logs"
+					/>
+
+					<Tab value="sequence" label="Details" />
+					<Tab value="assets" label="Assets" />
 				</Tabs>
 			{:else}
 				<div class="h-[30px]"></div>
@@ -1334,13 +1336,13 @@
 			style="min-height: {minTabHeight}px"
 		>
 			{#if isListJob}
-				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
+				<h3 class="text-md leading-6 font-bold text-primary border-b mb-4">
 					Subflows ({flowJobIds?.flowJobs.length})
 				</h3>
 				<div class="overflow-auto max-h-1/2">
 					{#each flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
 						{#if render && j + subflowsSize + 1 == (flowJobIds?.flowJobs.length ?? 0)}
-							<Button variant="border" color="light" on:click={() => (subflowsSize += 500)}
+							<Button variant="default" on:click={() => (subflowsSize += 500)}
 								>Load 500 more...</Button
 							>
 						{/if}
@@ -1447,7 +1449,7 @@
 					{#each modules as mod, i}
 						{#if render}
 							<div class="line w-8 h-10"></div>
-							<h3 class="text-tertiary mb-2 w-full">
+							<h3 class="text-primary mb-2 w-full">
 								{#if mod.id === 'preprocessor'}
 									Preprocessor module
 								{:else if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length + hasPreprocessor}
@@ -1674,7 +1676,7 @@
 					{/each}
 				</ul>
 			{:else}
-				<div class="p-2 text-tertiary text-sm italic">Empty flow</div>
+				<div class="p-2 text-primary text-sm italic">Empty flow</div>
 			{/if}
 		</div>
 		{#if selected == 'logs' && render}
@@ -1782,15 +1784,14 @@
 					>
 						<Tabs bind:selected={rightColumnSelect}>
 							{#if !hideTimeline}
-								<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+								<Tab value="timeline" label="Timeline" />
 							{/if}
-							<Tab value="node_status"><span class="font-semibold">Node status</span></Tab>
+							<Tab value="node_status" label="Node status" />
 							{#if !hideNodeDefinition}
-								<Tab value="node_definition"><span class="font-semibold">Node definition</span></Tab
-								>
+								<Tab value="node_definition" label="Node definition" />
 							{/if}
 							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
-								<Tab value="user_states"><span class="font-semibold">User States</span></Tab>
+								<Tab value="user_states" label="User States" />
 							{/if}
 						</Tabs>
 						{#if rightColumnSelect == 'timeline'}
@@ -1809,7 +1810,7 @@
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'node_status'}
-							<div class="pt-2 grow flex flex-col">
+							<div class="p-2 grow flex flex-col gap-6">
 								{#if selectedNode?.startsWith(AI_TOOL_MESSAGE_PREFIX)}
 									<div class="pt-2 px-4 pb-4">
 										<Alert type="info" title="Message output is available on the AI agent node" />
@@ -1870,100 +1871,110 @@
 											module && module.value.type === 'aiagent' ? module.value.tools : undefined}
 										{@const parentLoopsPrefix = getParentLoopsPrefix(module?.id ?? '')}
 										{#if node.flow_jobs_results}
-											<span class="pl-1 text-tertiary"
-												>Result of step as collection of all subflows</span
-											>
-											<div class="overflow-auto max-h-[200px] p-2">
-												<DisplayResult
-													workspaceId={job?.workspace_id}
-													result={node.flow_jobs_results}
-													nodeId={selectedNode}
-													jobId={job?.id}
-													language={job?.language}
-												/>
-											</div>
-											<span class="pl-1 text-tertiary text-lg pt-4">Selected subflow</span>
-										{/if}
-										<div class="px-2 flex gap-2 min-w-0 w-full">
-											<ModuleStatus
-												type={node.type}
-												scheduled_for={node.scheduled_for}
-												skipped={node.skipped}
-											/>
-											{#if node.duration_ms}
-												<Badge>
-													<Hourglass class="mr-2" size={10} />
-													{msToSec(node.duration_ms)} s
-												</Badge>
-											{/if}
-											{#if node.job_id}
-												<div class="grow w-full flex flex-row-reverse">
-													<a
-														class="text-right text-xs"
-														rel="noreferrer"
-														target="_blank"
-														href="{base}/run/{node.job_id ?? ''}?workspace={job?.workspace_id}"
-													>
-														{truncateRev(node.job_id ?? '', 10)}
-													</a>
+											<div>
+												<span class="pl-1 text-emphasis text-xs font-medium"
+													>Result of step as collection of all subflows</span
+												>
+												<div class="overflow-auto max-h-[200px] p-2">
+													<DisplayResult
+														workspaceId={job?.workspace_id}
+														result={node.flow_jobs_results}
+														nodeId={selectedNode}
+														jobId={job?.id}
+														language={job?.language}
+													/>
 												</div>
-											{/if}
-										</div>
-										{#if !node.isListJob}
-											<div class="px-1 py-1">
-												<JobArgs
-													id={node.job_id}
-													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-													args={node.args}
-												/>
 											</div>
 										{/if}
-										<FlowJobResult
-											tagLabel={customUi?.tagLabel}
-											workspaceId={job?.workspace_id}
-											jobId={node.job_id}
-											noBorder
-											loading={node.type != 'Success' && node.type != 'Failure'}
-											waitingForExecutor={node.type == 'WaitingForExecutor'}
-											refreshLog={node.type == 'InProgress'}
-											col
-											result_stream={resultStreams[node.job_id ?? '']}
-											result={node.result}
-											tag={node.tag}
-											logs={node.logs}
-											downloadLogs={!hideDownloadLogs}
-											aiAgentStatus={agentTools &&
-											node?.job_id &&
-											(node.type === 'Success' || node.type === 'Failure')
-												? {
-														tools: agentTools,
-														agentJob: {
-															id: node.job_id,
-															result: node.result,
-															logs: node.logs,
-															args: node.args,
-															success: node.type === 'Success',
-															type: 'CompletedJob'
-														},
-														storedToolCallJobs: module
-															? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
-															: undefined,
-														onToolJobLoaded: (job, idx) => {
-															if (module) {
-																const storeKey = parentLoopsPrefix + module.id + '-' + idx
-																toolCallStore?.setStoredToolCallJob(storeKey, job)
+										<div class="flex flex-col gap-2">
+											{#if node.flow_jobs_results}
+												<span class="pl-1 text-xs font-medium text-emphasis pt-4"
+													>Selected subflow</span
+												>
+											{/if}
+											<div class="flex flex-col gap-6">
+												<div class="flex flex-col gap-1">
+													<div class="flex gap-2 min-w-0 w-full items-center">
+														<ModuleStatus
+															type={node.type}
+															scheduled_for={node.scheduled_for}
+															skipped={node.skipped}
+														/>
+														{#if node.duration_ms}
+															<Badge>
+																<Hourglass class="mr-2" size={10} />
+																{msToSec(node.duration_ms)} s
+															</Badge>
+														{/if}
+														{#if node.job_id}
+															<div class="grow w-full flex flex-row-reverse">
+																<a
+																	class="text-right text-xs"
+																	rel="noreferrer"
+																	target="_blank"
+																	href="{base}/run/{node.job_id ??
+																		''}?workspace={job?.workspace_id}"
+																>
+																	{truncateRev(node.job_id ?? '', 10)}
+																</a>
+															</div>
+														{/if}
+													</div>
+													{#if !node.isListJob}
+														<JobArgs
+															id={node.job_id}
+															workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+															args={node.args}
+														/>
+													{/if}
+												</div>
+												<FlowJobResult
+													tagLabel={customUi?.tagLabel}
+													workspaceId={job?.workspace_id}
+													jobId={node.job_id}
+													loading={node.type != 'Success' && node.type != 'Failure'}
+													waitingForExecutor={node.type == 'WaitingForExecutor'}
+													refreshLog={node.type == 'InProgress'}
+													col
+													result_stream={resultStreams[node.job_id ?? '']}
+													result={node.result}
+													tag={node.tag}
+													logs={node.logs}
+													downloadLogs={!hideDownloadLogs}
+													aiAgentStatus={agentTools &&
+													node?.job_id &&
+													(node.type === 'Success' || node.type === 'Failure')
+														? {
+																tools: agentTools,
+																agentJob: {
+																	id: node.job_id,
+																	result: node.result,
+																	logs: node.logs,
+																	args: node.args,
+																	success: node.type === 'Success',
+																	type: 'CompletedJob'
+																},
+																storedToolCallJobs: module
+																	? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
+																	: undefined,
+																onToolJobLoaded: (job, idx) => {
+																	if (module) {
+																		const storeKey = parentLoopsPrefix + module.id + '-' + idx
+																		toolCallStore?.setStoredToolCallJob(storeKey, job)
+																	}
+																}
 															}
-														}
-													}
-												: undefined}
-										/>
+														: undefined}
+												/>
+											</div>
+										</div>
 									{:else}
-										<p class="p-2 text-tertiary italic"
+										<p class="p-2 text-primary italic"
 											>The execution of this node has no information attached to it. The job likely
 											did not run yet</p
 										>
 									{/if}
-								{:else}<p class="p-2 text-tertiary italic">Select a node to see its details here</p
+								{:else}<p class="p-2 text-primary italic">Select a node to see its details here</p
 									>{/if}
 							</div>
 						{:else if rightColumnSelect == 'node_definition'}
diff --git a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
index 1ac347b786..0ea5ad4d6b 100644
--- a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
+++ b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
@@ -115,7 +115,7 @@
 	}
 </script>
 
-<div class="w-full h-full mt-2 text-sm text-tertiary">
+<div class="w-full h-full mt-2 text-xs text-primary">
 	{#if !light}
 		<p>Waiting to be resumed</p>
 	{/if}
@@ -128,18 +128,18 @@
 				{#if cancelUrl && !hide_cancel}
 					<div>
 						<Button
-							color="red"
 							title="Cancel the flow"
 							iconOnly
 							startIcon={{ icon: X }}
-							variant="border"
+							variant="default"
+							destructive
 							on:click={() => continu(false)}
 						/>
 					</div>
 				{/if}
 				<div>
-					<Button color="green" variant="border" on:click={() => continu(true)}
-						>Resume <Tooltip
+					<Button variant="accent" on:click={() => continu(true)}
+						>Resume <Tooltip class="text-primary-inverse"
 							>Since you are an owner of this flow, you can send resume events without necessarily
 							knowing the resume id sent by the approval step</Tooltip
 						></Button
diff --git a/frontend/src/lib/components/FlowTimelineBar.svelte b/frontend/src/lib/components/FlowTimelineBar.svelte
index 12ad614049..5e95b7a6d7 100644
--- a/frontend/src/lib/components/FlowTimelineBar.svelte
+++ b/frontend/src/lib/components/FlowTimelineBar.svelte
@@ -290,7 +290,7 @@
 		</div>
 		{#if selectedLen > 0}
 			<span
-				class="text-2xs text-tertiary font-mono font-normal w-10 truncate"
+				class="text-2xs text-primary font-mono font-normal w-10 truncate"
 				title={msToReadableTime(selectedLen, 1)}>{msToReadableTimeShort(selectedLen, 1)}</span
 			>
 		{/if}
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 4f2ab8a456..01e394d3c7 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -43,10 +43,10 @@
 
 <Tabs bind:selected={tab}>
 	{#if !noGraph}
-		<Tab value="ui">Graph</Tab>
+		<Tab value="ui" label="Graph" />
 	{/if}
-	<Tab value="raw">Raw</Tab>
-	<Tab value="schema">Input Schema</Tab>
+	<Tab value="raw" label="Raw" />
+	<Tab value="schema" label="Input Schema" />
 
 	{#snippet content()}
 		<TabContent value="ui">
diff --git a/frontend/src/lib/components/FlowViewerInner.svelte b/frontend/src/lib/components/FlowViewerInner.svelte
index 0e300c8410..e0d024e60e 100644
--- a/frontend/src/lib/components/FlowViewerInner.svelte
+++ b/frontend/src/lib/components/FlowViewerInner.svelte
@@ -66,8 +66,8 @@
 			maxLines = 100
 		}}
 	>
-		<Tab value="yaml">YAML</Tab>
-		<Tab value="json">JSON</Tab>
+		<Tab value="yaml" label="YAML" />
+		<Tab value="json" label="JSON" />
 		{#snippet content()}
 			<div class="relative pt-2">
 				<Button
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index 44c4ed9fc0..a2023240cf 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/frontend/src/lib/components/FolderEditor.svelte
@@ -13,13 +13,13 @@
 	import GroupEditor from './GroupEditor.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
-	import Section from './Section.svelte'
-	import { Eye, Plus } from 'lucide-svelte'
+	import { Eye, Plus, Trash } from 'lucide-svelte'
 	import Label from './Label.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { createEventDispatcher, untrack } from 'svelte'
 	import Select from './select/Select.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	interface Props {
 		name: string
@@ -173,212 +173,220 @@
 	</DrawerContent>
 </Drawer>
 
-<Section label="Metadata" class="mb-4">
+<div class="flex flex-col gap-6">
 	<Label label="Summary">
 		<div class="flex flex-row gap-2">
-			<input placeholder="Short summary to be displayed when listed" bind:value={summary} />
-			<Button size="sm" on:click={updateFolder} disabled={!can_write}>Save</Button>
+			<TextInput
+				inputProps={{ placeholder: 'Short summary to be displayed when listed' }}
+				bind:value={summary}
+				size="md"
+			/>
+			<Button variant="accent" unifiedSize="md" on:click={updateFolder} disabled={!can_write}
+				>Save</Button
+			>
 		</div>
 	</Label>
-</Section>
 
-<Section label={`Permissions (${perms?.length ?? 0})`}>
-	<div class="flex flex-col gap-6">
-		{#if can_write}
-			<Alert type="info" title="New permissions may take up to 60s to apply">
-				<span class="text-xs text-tertiary">Due to permissions cache invalidation </span>
-			</Alert>
-			<div class="flex items-center gap-1">
-				<div>
-					<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (ownerItem = '')}>
-						{#snippet children({ item })}
-							<ToggleButton value="user" label="User" {item} />
-							<ToggleButton value="group" label="Group" {item} />
-						{/snippet}
-					</ToggleButtonGroup>
+	<Label label={`Permissions (${perms?.length ?? 0})`}>
+		<div class="flex flex-col gap-2">
+			{#if can_write}
+				<Alert type="info" title="New permissions may take up to 60s to apply">
+					Due to permissions cache invalidation
+				</Alert>
+				<div class="flex items-center gap-1">
+					<div>
+						<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (ownerItem = '')}>
+							{#snippet children({ item })}
+								<ToggleButton value="user" label="User" {item} />
+								<ToggleButton value="group" label="Group" {item} />
+							{/snippet}
+						</ToggleButtonGroup>
+					</div>
+
+					{#key ownerKind}
+						{@const items =
+							ownerKind === 'user'
+								? usernames.filter((x) => !perms?.map((y) => y.owner_name).includes('u/' + x))
+								: groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/' + x))}
+						<Select items={safeSelectItems(items)} bind:value={ownerItem} class="grow min-w-24" />
+						{#if ownerKind == 'group'}
+							<Button
+								title="View Group"
+								variant="default"
+								unifiedSize="md"
+								disabled={!ownerItem || ownerItem == ''}
+								on:click={viewGroup.openDrawer}
+								startIcon={{ icon: Eye }}
+								iconOnly
+							/>
+							<Button
+								title="New Group"
+								variant="default"
+								on:click={newGroup.openDrawer}
+								unifiedSize="md"
+								startIcon={{ icon: Plus }}
+								iconOnly
+							/>
+						{/if}
+					{/key}
+					<Button
+						disabled={ownerItem == ''}
+						variant="accent"
+						unifiedSize="md"
+						on:click={addToFolder}
+					>
+						Grant
+					</Button>
 				</div>
+			{/if}
 
-				{#key ownerKind}
-					{@const items =
-						ownerKind === 'user'
-							? usernames.filter((x) => !perms?.map((y) => y.owner_name).includes('u/' + x))
-							: groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/' + x))}
-					<Select items={safeSelectItems(items)} bind:value={ownerItem} />
-					{#if ownerKind == 'group'}
-						<Button
-							title="View Group"
-							btnClasses="!p-1.5"
-							variant="border"
-							size="xs"
-							disabled={!ownerItem || ownerItem == ''}
-							on:click={viewGroup.openDrawer}
-							startIcon={{ icon: Eye }}
-							iconOnly
-						/>
-						<Button
-							title="New Group"
-							btnClasses="!p-1.5"
-							variant="border"
-							on:click={newGroup.openDrawer}
-							size="xs"
-							startIcon={{ icon: Plus }}
-							iconOnly
-						/>
-					{/if}
-				{/key}
+			{#if folderNotFound}
+				<Alert type="warning" title="Folder not found" size="xs">
+					The folder "{name}" does not exist in the workspace. You can create it by clicking the
+					button below. An item can seemingly be in a folder given its path without the folder
+					existing. A windmill folder has settable permissions that its children inherit. If an item
+					is within a non-existing folders, only admins will see it.
+				</Alert>
 				<Button
-					disabled={ownerItem == ''}
-					variant="contained"
-					color="blue"
-					size="sm"
-					on:click={addToFolder}
+					variant="default"
+					wrapperClasses="w-min"
+					startIcon={{ icon: Plus }}
+					size="xs"
+					on:click={() => {
+						FolderService.createFolder({
+							workspace: $workspaceStore ?? '',
+							requestBody: { name }
+						}).then(() => {
+							loadFolder()
+						})
+					}}
 				>
-					Grant
+					Create folder "{name}"
 				</Button>
-			</div>
-		{/if}
+			{/if}
+			{#if perms}
+				<TableCustom>
+					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+					<tr slot="header-row">
+						<th>user/group</th>
+						<th></th>
+						<th></th>
+					</tr>
+					{#snippet body()}
+						<tbody>
+							{#each perms ?? [] as { owner_name, role }}<tr>
+									<td>{owner_name}</td>
+									<td>
+										{#if can_write}
+											<div>
+												<ToggleButtonGroup
+													disabled={owner_name == 'u/' + $userStore?.username &&
+														!($userStore?.is_admin || $userStore?.is_super_admin)}
+													selected={role}
+													on:selected={async (e) => {
+														const role = e.detail
+														// const wasInFolder = (folder?.owners ?? []).includes(folder)
+														// const inAcl = (
+														// 	folder?.extra_perms ? Object.keys(folder?.extra_perms) : []
+														// ).includes(folder)
+														if (role == 'admin') {
+															await FolderService.addOwnerToFolder({
+																workspace: $workspaceStore ?? '',
+																name,
+																requestBody: {
+																	owner: owner_name
+																}
+															})
+														} else if (role == 'writer') {
+															await FolderService.removeOwnerToFolder({
+																workspace: $workspaceStore ?? '',
+																name,
+																requestBody: {
+																	owner: owner_name,
+																	write: true
+																}
+															})
+														} else if (role == 'viewer') {
+															await FolderService.removeOwnerToFolder({
+																workspace: $workspaceStore ?? '',
+																name,
+																requestBody: {
+																	owner: owner_name,
+																	write: false
+																}
+															})
+														}
+														loadFolder()
+													}}
+												>
+													{#snippet children({ item })}
+														<ToggleButton
+															value="viewer"
+															label="Viewer"
+															tooltip="A viewer of a folder has read-only access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+															{item}
+															size="sm"
+														/>
 
-		{#if folderNotFound}
-			<Alert type="warning" title="Folder not found" size="xs">
-				The folder "{name}" does not exist in the workspace. You can create it by clicking the
-				button below. An item can seemingly be in a folder given its path without the folder
-				existing. A windmill folder has settable permissions that its children inherit. If an item
-				is within a non-existing folders, only admins will see it.
-			</Alert>
-			<Button
-				color="light"
-				variant="border"
-				wrapperClasses="w-min"
-				startIcon={{ icon: Plus }}
-				size="xs"
-				on:click={() => {
-					FolderService.createFolder({
-						workspace: $workspaceStore ?? '',
-						requestBody: { name }
-					}).then(() => {
-						loadFolder()
-					})
-				}}
-			>
-				Create folder "{name}"
-			</Button>
-		{/if}
-		{#if perms}
-			<TableCustom>
-				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-				<tr slot="header-row">
-					<th>user/group</th>
-					<th></th>
-					<th></th>
-				</tr>
-				{#snippet body()}
-					<tbody>
-						{#each perms ?? [] as { owner_name, role }}<tr>
-								<td>{owner_name}</td>
-								<td>
-									{#if can_write}
-										<div>
-											<ToggleButtonGroup
-												disabled={owner_name == 'u/' + $userStore?.username &&
-													!($userStore?.is_admin || $userStore?.is_super_admin)}
-												selected={role}
-												on:selected={async (e) => {
-													const role = e.detail
-													// const wasInFolder = (folder?.owners ?? []).includes(folder)
-													// const inAcl = (
-													// 	folder?.extra_perms ? Object.keys(folder?.extra_perms) : []
-													// ).includes(folder)
-													if (role == 'admin') {
-														await FolderService.addOwnerToFolder({
+														<ToggleButton
+															value="writer"
+															label="Writer"
+															tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+															{item}
+															size="sm"
+														/>
+
+														<ToggleButton
+															value="admin"
+															label="Admin"
+															tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"
+															{item}
+															size="sm"
+														/>
+													{/snippet}
+												</ToggleButtonGroup>
+											</div>
+										{:else}
+											{role}
+										{/if}</td
+									>
+									<td class="flex items-center justify-end">
+										{#if can_write && (owner_name != 'u/' + $userStore?.username || $userStore?.is_admin)}
+											<Button
+												variant="subtle"
+												destructive
+												unifiedSize="md"
+												startIcon={{ icon: Trash }}
+												iconOnly
+												onclick={async () => {
+													await Promise.all([
+														FolderService.removeOwnerToFolder({
 															workspace: $workspaceStore ?? '',
 															name,
+															requestBody: { owner: owner_name }
+														}),
+														GranularAclService.removeGranularAcls({
+															workspace: $workspaceStore ?? '',
+															path: name,
+															kind: 'folder',
 															requestBody: {
 																owner: owner_name
 															}
 														})
-													} else if (role == 'writer') {
-														await FolderService.removeOwnerToFolder({
-															workspace: $workspaceStore ?? '',
-															name,
-															requestBody: {
-																owner: owner_name,
-																write: true
-															}
-														})
-													} else if (role == 'viewer') {
-														await FolderService.removeOwnerToFolder({
-															workspace: $workspaceStore ?? '',
-															name,
-															requestBody: {
-																owner: owner_name,
-																write: false
-															}
-														})
-													}
+													])
+
 													loadFolder()
 												}}
-											>
-												{#snippet children({ item })}
-													<ToggleButton
-														value="viewer"
-														label="Viewer"
-														tooltip="A viewer of a folder has read-only access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
-														{item}
-													/>
-
-													<ToggleButton
-														value="writer"
-														label="Writer"
-														tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
-														{item}
-													/>
-
-													<ToggleButton
-														value="admin"
-														label="Admin"
-														tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"
-														{item}
-													/>
-												{/snippet}
-											</ToggleButtonGroup>
-										</div>
-									{:else}
-										{role}
-									{/if}</td
-								>
-								<td>
-									{#if can_write && (owner_name != 'u/' + $userStore?.username || $userStore?.is_admin)}
-										<button
-											class="ml-2 text-red-500"
-											onclick={async () => {
-												await Promise.all([
-													FolderService.removeOwnerToFolder({
-														workspace: $workspaceStore ?? '',
-														name,
-														requestBody: { owner: owner_name }
-													}),
-													GranularAclService.removeGranularAcls({
-														workspace: $workspaceStore ?? '',
-														path: name,
-														kind: 'folder',
-														requestBody: {
-															owner: owner_name
-														}
-													})
-												])
-
-												loadFolder()
-											}}>remove</button
-										>
-									{:else}
-										<span class="text-tertiary text-xs">cannot remove yourself</span>
-									{/if}</td
-								>
-							</tr>{/each}
-					</tbody>
-				{/snippet}
-			</TableCustom>
-			<!-- <h2 class="mt-10"
+											/>
+										{:else}
+											<span class="text-primary text-xs">cannot remove yourself</span>
+										{/if}</td
+									>
+								</tr>{/each}
+						</tbody>
+					{/snippet}
+				</TableCustom>
+				<!-- <h2 class="mt-10"
 				>Folders managing this folder <Tooltip
 					>Any owner of those folders can manage this folder</Tooltip
 				></h2
@@ -386,19 +394,13 @@
 			{#if can_write}
 				<div class="flex items-start">
 					<AutoComplete items={folders} bind:selectedItem={new_managing_folder} />
-					<Button
-						variant="contained"
-						color="blue"
-						size="sm"
-						btnClasses="!ml-4"
-						on:click={addToManagingFolder}
-					>
+					<Button variant="accent" size="sm" btnClasses="!ml-4" on:click={addToManagingFolder}>
 						Add folder managing this folder
 					</Button>
 				</div>
 			{/if} -->
-			<!-- {#if managing_folders.length == 0}
-				<p class="text-tertiary text-sm">No folder is managing this folder</p>
+				<!-- {#if managing_folders.length == 0}
+				<p class="text-primary text-sm">No folder is managing this folder</p>
 			{:else}
 				<TableCustom>
 					<tr slot="header-row">
@@ -430,12 +432,13 @@
 					</tbody>
 				</TableCustom>
 			{/if} -->
-		{:else if folderNotFound === undefined}
-			<div class="flex flex-col">
-				{#each new Array(6) as _}
-					<Skeleton layout={[[2], 0.7]} />
-				{/each}
-			</div>
-		{/if}
-	</div>
-</Section>
+			{:else if folderNotFound === undefined}
+				<div class="flex flex-col">
+					{#each new Array(6) as _}
+						<Skeleton layout={[[2], 0.7]} />
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</Label>
+</div>
diff --git a/frontend/src/lib/components/FolderInfo.svelte b/frontend/src/lib/components/FolderInfo.svelte
index 02b0cf3a10..1c6515aa1d 100644
--- a/frontend/src/lib/components/FolderInfo.svelte
+++ b/frontend/src/lib/components/FolderInfo.svelte
@@ -9,10 +9,10 @@
 </script>
 
 <Popover>
-	<div class="inline-flex gap-1 items-center">
-		<span class="text-tertiary text-xs">({members.length}) </span>
+	<div class="inline-flex gap-1 items-center text-primary text-xs font-normal">
+		<span>({members.length}) </span>
 		<div class="max-w-xs truncate">
-			<span class="text-tertiary text-xs">{members?.join(', ')} </span>
+			<span>{members?.join(', ')} </span>
 		</div>
 	</div>
 	{#snippet text()}
diff --git a/frontend/src/lib/components/FolderPicker.svelte b/frontend/src/lib/components/FolderPicker.svelte
index d761da297b..09861b9624 100644
--- a/frontend/src/lib/components/FolderPicker.svelte
+++ b/frontend/src/lib/components/FolderPicker.svelte
@@ -103,10 +103,8 @@
 	</select>
 	<Button
 		title="View folder"
-		btnClasses="!p-1.5"
-		variant="border"
-		color="light"
-		size="xs"
+		variant="default"
+		unifiedSize="md"
 		disabled={!folderName || folderName == ''}
 		on:click={viewFolder.openDrawer}
 		iconOnly
@@ -114,10 +112,8 @@
 	/>
 	<Button
 		title="New folder"
-		btnClasses="!p-1.5"
-		variant="border"
-		color="light"
-		size="xs"
+		variant="default"
+		unifiedSize="md"
 		{disabled}
 		on:click={newFolder.openDrawer}
 		iconOnly
diff --git a/frontend/src/lib/components/GitDiffPreview.svelte b/frontend/src/lib/components/GitDiffPreview.svelte
index 6d821e7d6c..948ae4d4e8 100644
--- a/frontend/src/lib/components/GitDiffPreview.svelte
+++ b/frontend/src/lib/components/GitDiffPreview.svelte
@@ -5,16 +5,22 @@
 		previewResult: SyncResponse | undefined
 	}>()
 
-	let added = $derived(previewResult?.changes?.filter(c => c.type === 'added').map(c => c.path) || [])
-	let deleted = $derived(previewResult?.changes?.filter(c => c.type === 'deleted').map(c => c.path) || [])
-	let edited = $derived(previewResult?.changes?.filter(c => c.type === 'edited').map(c => c.path) || [])
+	let added = $derived(
+		previewResult?.changes?.filter((c) => c.type === 'added').map((c) => c.path) || []
+	)
+	let deleted = $derived(
+		previewResult?.changes?.filter((c) => c.type === 'deleted').map((c) => c.path) || []
+	)
+	let edited = $derived(
+		previewResult?.changes?.filter((c) => c.type === 'edited').map((c) => c.path) || []
+	)
 </script>
 
 <div class="border rounded p-2 text-xs max-h-40 overflow-y-auto bg-surface-secondary">
-	<div class="font-semibold text-[11px] mb-1 text-tertiary">Preview of changes:</div>
+	<div class="font-semibold text-[11px] mb-1 text-primary">Preview of changes:</div>
 
 	{#if !added.length && !deleted.length && !edited.length}
-		<div class="mt-2 text-tertiary">No changes found! The workspace is up to date.</div>
+		<div class="mt-2 text-primary">No changes found! The workspace is up to date.</div>
 	{:else}
 		{#if added.length}
 			<div class="mt-2">
diff --git a/frontend/src/lib/components/GitHubAppIntegration.svelte b/frontend/src/lib/components/GitHubAppIntegration.svelte
index a223a319be..5c6ed53f65 100644
--- a/frontend/src/lib/components/GitHubAppIntegration.svelte
+++ b/frontend/src/lib/components/GitHubAppIntegration.svelte
@@ -166,8 +166,7 @@
 {#if showGitHubApp}
 	{#if !githubState.loadingGithubInstallations}
 		<Button
-			color="light"
-			variant="contained"
+			variant="default"
 			size="xs"
 			on:click={handleRefreshInstallations}
 			disabled={!$enterpriseLicense}
@@ -187,8 +186,7 @@
 		>
 			{#snippet trigger()}
 				<Button
-					color="none"
-					variant="border"
+					variant="default"
 					size="xs"
 					disabled={!$enterpriseLicense || githubState.loadingGithubInstallations}
 					startIcon={{
@@ -232,7 +230,7 @@
 									<div class="pt-[26px]">
 										<Button
 											size="xs"
-											color="blue"
+											variant="accent"
 											buttonType="button"
 											disabled={!githubState.selectedGHAppRepository}
 											on:click={() => handleApplyRepositoryURL(close)}
@@ -254,8 +252,7 @@
 							<div class="flex flex-col gap-4">
 								<div class="flex">
 									<Button
-										color="none"
-										variant="border"
+										variant="default"
 										size="xs"
 										href={githubState.githubInstallationUrl}
 										startIcon={{
@@ -283,7 +280,7 @@
 										<div class="flex flex-col gap-1">
 											<table class="w-full text-sm">
 												<thead>
-													<tr class="text-left text-xs text-tertiary">
+													<tr class="text-left text-xs text-primary">
 														<th class="pb-2 w-1/3">Org</th>
 														<th class="pb-2 w-1/6">Workspace</th>
 														<th class="pb-2 w-1/6">Repos</th>
@@ -295,18 +292,17 @@
 														<tr class="border-t border-gray-200 dark:border-gray-700">
 															<td class="py-2">{installation.account_id}</td>
 															<td class="py-2">
-																<span class="text-xs text-tertiary"
-																	>{installation.workspace_id}</span
+																<span class="text-xs text-primary">{installation.workspace_id}</span
 																>
 															</td>
-															<td class="py-2 text-tertiary">
+															<td class="py-2 text-primary">
 																{installation.repositories.length} repos
 															</td>
 															<td class="py-2 text-right">
 																<div class="flex justify-end gap-1">
 																	<Button
 																		size="xs2"
-																		color="blue"
+																		variant="accent"
 																		title="Export installation to other instance"
 																		startIcon={{ icon: Download }}
 																		on:click={() =>
@@ -316,7 +312,8 @@
 																	</Button>
 																	<Button
 																		size="xs2"
-																		color="red"
+																		variant="default"
+																		destructive
 																		title="Remove installation from workspace"
 																		startIcon={{ icon: Minus }}
 																		on:click={() =>
@@ -341,7 +338,7 @@
 										<div class="flex flex-col gap-1">
 											<table class="w-full text-sm">
 												<thead>
-													<tr class="text-left text-xs text-tertiary">
+													<tr class="text-left text-xs text-primary">
 														<th class="pb-2 w-1/3">Org</th>
 														<th class="pb-2 w-1/6">Workspace</th>
 														<th class="pb-2 w-1/6">Repos</th>
@@ -353,17 +350,16 @@
 														<tr class="border-t border-gray-200 dark:border-gray-700">
 															<td class="py-2">{installation.account_id}</td>
 															<td class="py-2">
-																<span class="text-xs text-tertiary"
-																	>{installation.workspace_id}</span
+																<span class="text-xs text-primary">{installation.workspace_id}</span
 																>
 															</td>
-															<td class="py-2 text-tertiary">
+															<td class="py-2 text-primary">
 																{installation.repositories.length} repos
 															</td>
 															<td class="pl-8 py-2 text-right">
 																<Button
 																	size="xs2"
-																	color="blue"
+																	variant="accent"
 																	title="Add installation to workspace"
 																	startIcon={{ icon: Plus }}
 																	on:click={() => {
@@ -400,7 +396,7 @@
 									class="flex-1"
 								/>
 								<Button
-									color="blue"
+									variant="accent"
 									on:click={handleImportInstallation}
 									disabled={!githubState.importJwt}
 								>
@@ -414,8 +410,7 @@
 		</Popover>
 	{:else}
 		<Button
-			color="none"
-			variant="border"
+			variant="default"
 			size="xs"
 			disabled={!$enterpriseLicense || githubState.loadingGithubInstallations}
 			startIcon={{
diff --git a/frontend/src/lib/components/GitRepoPopoverPicker.svelte b/frontend/src/lib/components/GitRepoPopoverPicker.svelte
index 00892d93cc..f8050a90a2 100644
--- a/frontend/src/lib/components/GitRepoPopoverPicker.svelte
+++ b/frontend/src/lib/components/GitRepoPopoverPicker.svelte
@@ -10,10 +10,7 @@
 		children?: import('svelte').Snippet
 	}
 
-	let {
-		isOpen = $bindable(false),
-		children
-	}: Props = $props()
+	let { isOpen = $bindable(false), children }: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		selected: { resourcePath: string }
@@ -72,9 +69,9 @@
 				</div>
 			{:else if gitRepoResources.length === 0}
 				<div class="p-4 text-center">
-					<GitBranch size={20} class="mx-auto mb-2 text-tertiary" />
+					<GitBranch size={20} class="mx-auto mb-2 text-primary" />
 					<p class="text-sm text-secondary mb-1">No git repositories found</p>
-					<p class="text-xs text-tertiary">Create a git repository resource first</p>
+					<p class="text-xs text-primary">Create a git repository resource first</p>
 				</div>
 			{:else}
 				<div class="py-1">
@@ -83,11 +80,11 @@
 							class="w-full text-left px-3 py-2 hover:bg-surface-hover text-sm flex items-center gap-2 transition-colors"
 							onclick={() => handleSelect(resource.path)}
 						>
-							<GitBranch size={14} class="text-tertiary flex-shrink-0" />
+							<GitBranch size={14} class="text-primary flex-shrink-0" />
 							<div class="flex-1 min-w-0">
 								<div class="font-medium text-primary truncate">{resource.path}</div>
 								{#if resource.description}
-									<div class="text-xs text-tertiary truncate">{resource.description}</div>
+									<div class="text-xs text-primary truncate">{resource.description}</div>
 								{/if}
 							</div>
 						</button>
@@ -96,4 +93,4 @@
 			{/if}
 		</div>
 	{/snippet}
-</Popover>
\ No newline at end of file
+</Popover>
diff --git a/frontend/src/lib/components/GitRepoResourcePicker.svelte b/frontend/src/lib/components/GitRepoResourcePicker.svelte
index 225f4507bc..c1db328acc 100644
--- a/frontend/src/lib/components/GitRepoResourcePicker.svelte
+++ b/frontend/src/lib/components/GitRepoResourcePicker.svelte
@@ -123,7 +123,7 @@
 					const result = await ResourceService.getGitCommitHash({
 						workspace: $workspaceStore!,
 						path: selectedResource,
-						gitSshIdentity: gitSshIdentity?.join(",")
+						gitSshIdentity: gitSshIdentity?.join(',')
 					})
 					commitHash = result.commit_hash
 				} catch (err) {
@@ -164,8 +164,8 @@
 		tooltip="Select a git repository resource to delegate ansible execution to"
 	>
 		<div class="flex flex-col gap-4 p-4">
-			<div class="flex flex-col gap-2">
-				<div class="text-sm font-medium text-primary"> Git Repository Resource </div>
+			<div class="flex flex-col gap-1">
+				<div class="text-xs font-semibold text-emphasis"> Git Repository Resource </div>
 
 				{#if currentResource}
 					<div
@@ -174,10 +174,10 @@
 						<div class="flex items-center gap-2">
 							<GitBranch size={16} class="text-blue-600 dark:text-blue-400 flex-shrink-0" />
 							<div class="flex-1 min-w-0">
-								<div class="text-sm font-medium text-blue-800 dark:text-blue-200">
+								<div class="text-xs font-semibold text-blue-800 dark:text-blue-200">
 									Currently delegating to:
 								</div>
-								<div class="text-sm text-blue-600 dark:text-blue-300 truncate">
+								<div class="text-xs text-blue-600 dark:text-blue-300 truncate">
 									{currentResource}
 								</div>
 							</div>
@@ -188,13 +188,13 @@
 				{#if loading}
 					<div class="flex items-center gap-2 p-2">
 						<Loader2 size={16} class="animate-spin" />
-						<span class="text-sm text-secondary">Loading git repository resources...</span>
+						<span class="text-xs text-primary">Loading git repository resources...</span>
 					</div>
 				{:else if gitRepoResources.length === 0}
-					<div class="p-4 text-center border border-gray-200 dark:border-gray-700 rounded-md">
-						<GitBranch size={24} class="mx-auto mb-2 text-tertiary" />
-						<p class="text-sm text-secondary mb-2">No git repository resources found</p>
-						<p class="text-xs text-tertiary">
+					<div class="p-4 text-center border border-border-light rounded-md">
+						<GitBranch size={24} class="mx-auto mb-2 text-primary" />
+						<p class="text-xs text-primary mb-2">No git repository resources found</p>
+						<p class="text-2xs text-secondary">
 							Create a git repository resource first to use this feature
 						</p>
 					</div>
@@ -209,28 +209,27 @@
 			</div>
 
 			<!-- Playbook Configuration -->
-			<div class="flex flex-col gap-2">
-				<div class="text-sm font-medium text-primary">
+			<div class="flex flex-col gap-1">
+				<div class="text-xs font-semibold text-emphasis">
 					Playbook Path
-					<span class="text-xs text-tertiary font-normal ml-1">(optional)</span>
+					<span class="text-xs text-primary font-normal ml-1">(optional)</span>
 				</div>
+				<p class="text-xs text-primary">
+					Specify the path to your main playbook file relative to the git repository root
+				</p>
 				<input
 					type="text"
 					bind:value={playbook}
 					placeholder="e.g., ./playbooks/site.yml"
 					class="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-surface text-primary placeholder-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
 				/>
-				<p class="text-xs text-tertiary">
-					Specify the path to your main playbook file relative to the git repository root
-				</p>
 			</div>
 
 			<!-- Inventories Location Configuration -->
-
 			<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
-				<Button color="light" variant="border" on:click={handleClose}>Cancel</Button>
+				<Button variant="default" on:click={handleClose}>Cancel</Button>
 				<Button
-					color="dark"
+					variant="accent"
 					disabled={!selectedResource || loading}
 					on:click={handleSelect}
 					startIcon={{ icon: GitBranch }}
@@ -240,25 +239,22 @@
 			</div>
 			{#if selectedResource}
 				<div class="flex flex-col gap-2">
-					<div class="text-sm font-medium text-primary">
-						Inventories Location
-					</div>
+					<div class="text-xs font-semibold text-emphasis"> Inventories Location </div>
 					<input
 						type="text"
 						bind:value={inventoriesLocation}
 						placeholder="e.g., hosts"
 						class="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-surface text-primary placeholder-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
 					/>
-					<p class="text-xs text-tertiary">
+					<p class="text-xs text-primary">
 						Specify the directory containing your inventory files relative to the git repository
 						root
 					</p>
 
 					<div class="mt-2">
 						<Button
-							color="light"
-							variant="border"
-							size="xs"
+							variant="default"
+							unifiedSize="md"
 							disabled={loadingInventories || !inventoriesLocation.trim()}
 							startIcon={{ icon: loadingInventories ? Loader2 : FolderOpen }}
 							onclick={handleAddInventories}
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index dc9ccb5111..bdea0c4533 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/frontend/src/lib/components/GroupEditor.svelte
@@ -15,10 +15,11 @@
 	import { canWrite } from '$lib/utils'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
-	import Section from './Section.svelte'
 	import Label from './Label.svelte'
 	import Select from './select/Select.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
+	import TextInput from './text_input/TextInput.svelte'
+	import { Trash } from 'lucide-svelte'
 
 	interface Props {
 		name: string
@@ -111,12 +112,17 @@
 	})
 </script>
 
-<Section label="Metadata" class="mb-4">
-	<Label label="Summary">
+<div class="flex flex-col gap-6">
+	<Label label="Summary" for="summary">
 		<div class="flex flex-row gap-2">
-			<input placeholder="Short summary to be displayed when listed" bind:value={summary} />
+			<TextInput
+				inputProps={{ placeholder: 'Short summary to be displayed when listed', id: 'summary' }}
+				bind:value={summary}
+				size="md"
+			/>
 			<Button
-				size="sm"
+				unifiedSize="md"
+				variant="accent"
 				on:click={async () => {
 					await GroupService.updateGroup({
 						workspace: $workspaceStore ?? '',
@@ -130,175 +136,179 @@
 			>
 		</div>
 	</Label>
-</Section>
 
-<Section label={`Members (${members?.length ?? 0})`}>
-	{#if can_write}
-		<div class="flex items-start">
-			<Select items={safeSelectItems(usernames)} bind:value={username} />
-			<Button variant="contained" color="blue" size="sm" btnClasses="!ml-4" on:click={addToGroup}>
-				Add member
-			</Button>
-		</div>
-	{/if}
-	{#if members}
-		<TableCustom>
-			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-			<tr slot="header-row">
-				<th>user</th>
-				<th></th>
-				<th></th>
-			</tr>
-			{#snippet body()}
-				<tbody>
-					{#each members ?? [] as { member_name, role }}<tr>
-							<td>{member_name}</td>
-							<td>
-								{#if can_write}
-									<div>
-										<ToggleButtonGroup
-											selected={role}
-											on:selected={async (e) => {
-												const role = e.detail
-												// const wasInGroup = (group?.members ?? []).includes(group)
-												// const inAcl = (
-												// 	group?.extra_perms ? Object.keys(group?.extra_perms) : []
-												// ).includes(group)
-												if (role == 'member') {
-													await GroupService.addUserToGroup({
-														workspace: $workspaceStore ?? '',
-														name,
-														requestBody: {
-															username: member_name
-														}
-													})
-													await GranularAclService.removeGranularAcls({
-														workspace: $workspaceStore ?? '',
-														path: name,
-														kind: 'group_',
-														requestBody: {
-															owner: 'u/' + member_name
-														}
-													})
-												} else if (role == 'manager') {
-													await GroupService.removeUserToGroup({
-														workspace: $workspaceStore ?? '',
-														name,
-														requestBody: {
-															username: member_name
-														}
-													})
-													await GranularAclService.addGranularAcls({
-														workspace: $workspaceStore ?? '',
-														path: name,
-														kind: 'group_',
-														requestBody: {
-															owner: 'u/' + member_name,
-															write: true
-														}
-													})
-												} else if (role == 'admin') {
-													await GroupService.addUserToGroup({
-														workspace: $workspaceStore ?? '',
-														name,
-														requestBody: {
-															username: member_name
-														}
-													})
-													await GranularAclService.addGranularAcls({
-														workspace: $workspaceStore ?? '',
-														path: name,
-														kind: 'group_',
-														requestBody: {
-															owner: 'u/' + member_name,
-															write: true
-														}
-													})
-												}
-												loadGroup()
-											}}
-										>
-											{#snippet children({ item })}
-												<ToggleButton
-													value="member"
-													small
-													label="Member"
-													tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
-													{item}
-												/>
-												<ToggleButton
-													value="admin"
-													small
-													label="Admin"
-													tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
-													{item}
-												/>
-												{#if role === 'manager'}
-													<ToggleButton
-														value="manager"
-														small
-														label="Manager"
-														tooltip="A manager of a group can manage the group, adding and removing users and
-													change their roles. Being a manager does not make you a member"
-														{item}
-													/>
-												{/if}
-											{/snippet}
-										</ToggleButtonGroup>
-									</div>
-								{:else}
-									{role}
-								{/if}</td
-							>
-							<td>
-								{#if can_write}
-									<button
-										class="ml-2 text-red-500"
-										onclick={async () => {
-											await GroupService.removeUserToGroup({
-												workspace: $workspaceStore ?? '',
-												name,
-												requestBody: { username: member_name }
-											})
-											await GranularAclService.removeGranularAcls({
-												workspace: $workspaceStore ?? '',
-												path: name,
-												kind: 'group_',
-												requestBody: {
-													owner: 'u/' + member_name
-												}
-											})
-											loadGroup()
-										}}>remove</button
-									>
-								{/if}</td
-							>
-						</tr>{/each}
-				</tbody>
-			{/snippet}
-		</TableCustom>
-
-		{#if instance_group?.emails}
-			<h2 class="mt-10">Members from the instance group</h2>
+	<Label label={`Members (${members?.length ?? 0})`}>
+		{#if can_write}
+			<div class="flex items-start gap-1">
+				<Select items={safeSelectItems(usernames)} bind:value={username} size="md" class="grow" />
+				<Button variant="accent" color="blue" unifiedSize="md" on:click={addToGroup}>
+					Add member
+				</Button>
+			</div>
+		{/if}
+		{#if members}
 			<TableCustom>
 				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 				<tr slot="header-row">
 					<th>user</th>
+					<th></th>
+					<th></th>
 				</tr>
 				{#snippet body()}
 					<tbody>
-						{#each instance_group?.emails ?? [] as email}<tr>
-								<td>{email}</td>
+						{#each members ?? [] as { member_name, role }}<tr>
+								<td>{member_name}</td>
+								<td>
+									{#if can_write}
+										<div>
+											<ToggleButtonGroup
+												selected={role}
+												on:selected={async (e) => {
+													const role = e.detail
+													// const wasInGroup = (group?.members ?? []).includes(group)
+													// const inAcl = (
+													// 	group?.extra_perms ? Object.keys(group?.extra_perms) : []
+													// ).includes(group)
+													if (role == 'member') {
+														await GroupService.addUserToGroup({
+															workspace: $workspaceStore ?? '',
+															name,
+															requestBody: {
+																username: member_name
+															}
+														})
+														await GranularAclService.removeGranularAcls({
+															workspace: $workspaceStore ?? '',
+															path: name,
+															kind: 'group_',
+															requestBody: {
+																owner: 'u/' + member_name
+															}
+														})
+													} else if (role == 'manager') {
+														await GroupService.removeUserToGroup({
+															workspace: $workspaceStore ?? '',
+															name,
+															requestBody: {
+																username: member_name
+															}
+														})
+														await GranularAclService.addGranularAcls({
+															workspace: $workspaceStore ?? '',
+															path: name,
+															kind: 'group_',
+															requestBody: {
+																owner: 'u/' + member_name,
+																write: true
+															}
+														})
+													} else if (role == 'admin') {
+														await GroupService.addUserToGroup({
+															workspace: $workspaceStore ?? '',
+															name,
+															requestBody: {
+																username: member_name
+															}
+														})
+														await GranularAclService.addGranularAcls({
+															workspace: $workspaceStore ?? '',
+															path: name,
+															kind: 'group_',
+															requestBody: {
+																owner: 'u/' + member_name,
+																write: true
+															}
+														})
+													}
+													loadGroup()
+												}}
+											>
+												{#snippet children({ item })}
+													<ToggleButton
+														value="member"
+														small
+														label="Member"
+														tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
+														{item}
+													/>
+													<ToggleButton
+														value="admin"
+														small
+														label="Admin"
+														tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
+														{item}
+													/>
+													{#if role === 'manager'}
+														<ToggleButton
+															value="manager"
+															small
+															label="Manager"
+															tooltip="A manager of a group can manage the group, adding and removing users and
+													change their roles. Being a manager does not make you a member"
+															{item}
+														/>
+													{/if}
+												{/snippet}
+											</ToggleButtonGroup>
+										</div>
+									{:else}
+										{role}
+									{/if}</td
+								>
+								<td class="flex justify-end">
+									{#if can_write}
+										<Button
+											variant="subtle"
+											destructive
+											unifiedSize="md"
+											startIcon={{ icon: Trash }}
+											iconOnly
+											onclick={async () => {
+												await GroupService.removeUserToGroup({
+													workspace: $workspaceStore ?? '',
+													name,
+													requestBody: { username: member_name }
+												})
+												await GranularAclService.removeGranularAcls({
+													workspace: $workspaceStore ?? '',
+													path: name,
+													kind: 'group_',
+													requestBody: {
+														owner: 'u/' + member_name
+													}
+												})
+												loadGroup()
+											}}
+										/>
+									{/if}</td
+								>
 							</tr>{/each}
 					</tbody>
 				{/snippet}
 			</TableCustom>
+
+			{#if instance_group?.emails}
+				<h2 class="mt-6 text-emphasis text-xs font-semibold">Members from the instance group</h2>
+				<TableCustom>
+					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+					<tr slot="header-row">
+						<th>user</th>
+					</tr>
+					{#snippet body()}
+						<tbody>
+							{#each instance_group?.emails ?? [] as email}<tr>
+									<td>{email}</td>
+								</tr>{/each}
+						</tbody>
+					{/snippet}
+				</TableCustom>
+			{/if}
+		{:else}
+			<div class="flex flex-col">
+				{#each new Array(6) as _}
+					<Skeleton layout={[[2], 0.7]} />
+				{/each}
+			</div>
 		{/if}
-	{:else}
-		<div class="flex flex-col">
-			{#each new Array(6) as _}
-				<Skeleton layout={[[2], 0.7]} />
-			{/each}
-		</div>
-	{/if}
-</Section>
+	</Label>
+</div>
diff --git a/frontend/src/lib/components/GroupInfo.svelte b/frontend/src/lib/components/GroupInfo.svelte
index 6822d6d68a..f1fc758247 100644
--- a/frontend/src/lib/components/GroupInfo.svelte
+++ b/frontend/src/lib/components/GroupInfo.svelte
@@ -13,7 +13,30 @@
 	let members: string[] | undefined = $state([])
 
 	async function loadMembers() {
-		members = (await GroupService.getGroup({ workspace: $workspaceStore!, name })).members
+		// FAKE DATA FOR TESTING - Set to false to remove all fake data
+		const ENABLE_FAKE_DATA = false
+
+		if (ENABLE_FAKE_DATA) {
+			// Fake member data for different groups
+			const fakeMembers: Record<string, string[]> = {
+				developers: ['john.doe', 'jane.smith', 'bob.wilson', 'alice.johnson', 'charlie.brown'],
+				'readonly-users': ['viewer1', 'viewer2'],
+				admins: ['admin1', 'admin2', 'admin3'],
+				testers: ['tester1', 'tester2', 'tester3', 'tester4'],
+				'external-contractors': ['contractor1', 'contractor2']
+			}
+
+			if (fakeMembers[name]) {
+				members = fakeMembers[name]
+				return
+			}
+		}
+
+		try {
+			members = (await GroupService.getGroup({ workspace: $workspaceStore!, name })).members
+		} catch (e) {
+			members = []
+		}
 	}
 	$effect(() => {
 		$workspaceStore && untrack(() => loadMembers())
@@ -22,11 +45,9 @@
 
 {#if members}
 	<Popover
-		><div class="inline-flex gap-1 items-end"
-			><span class="text-tertiary text-xs">({members.length})</span>
-			<div class="max-w-xs truncate"
-				><span class="text-tertiary text-xs">{members?.join(', ')}</span></div
-			></div
+		><div class="inline-flex gap-1 items-end text-primary text-xs font-normal"
+			><span>({members.length})</span>
+			<div class="max-w-xs truncate"><span>{members?.join(', ')}</span></div></div
 		>
 		{#snippet text()}
 			<span>{members?.join(', ')}</span>
diff --git a/frontend/src/lib/components/HighlightTheme.svelte b/frontend/src/lib/components/HighlightTheme.svelte
index 44cfe7decf..010fea089e 100644
--- a/frontend/src/lib/components/HighlightTheme.svelte
+++ b/frontend/src/lib/components/HighlightTheme.svelte
@@ -12,9 +12,7 @@
 	code.hljs {
 		padding: 3px 5px;
 	}
-	.dark .hljs {
-		background: #2e3440 !important;
-	}
+
 	.dark .hljs,
 	.dark .hljs-subst {
 		color: #d8dee9 !important;
@@ -238,8 +236,7 @@
 		color: #d08770 !important;
 	}
 	.hljs {
-		color: #24292e;
-		background: #ffffff;
+		color: #4a5568;
 	}
 	.hljs-doctag,
 	.hljs-keyword,
diff --git a/frontend/src/lib/components/HistoricInputs.svelte b/frontend/src/lib/components/HistoricInputs.svelte
index e202952de7..be49a0dce9 100644
--- a/frontend/src/lib/components/HistoricInputs.svelte
+++ b/frontend/src/lib/components/HistoricInputs.svelte
@@ -120,11 +120,11 @@
 	/>
 {/if}
 
-<div class="h-full max-h-full min-h-0 w-full flex flex-col gap-4 relative">
+<div class="h-full max-h-full min-h-0 w-full flex flex-col gap-2 relative">
 	<div class="grow-0" data-schema-picker>
 		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
 			{#if loading}
-				<div class="text-tertiary absolute top-2 right-2">
+				<div class="text-primary absolute top-2 right-2">
 					<Loader2 class="animate-spin" size={14} />
 				</div>
 			{/if}
@@ -145,13 +145,13 @@
 						/>
 					{/each}
 					{#if jobs?.length == 5}
-						<tr class="text-left text-tertiary text-xs w-full">
+						<tr class="text-left text-primary text-xs w-full">
 							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
 						</tr>
 					{/if}
 				</tbody>
 			{:else}
-				<div class="text-center text-tertiary text-xs py-2">No job currently running</div>
+				<div class="text-center text-primary text-xs py-2">No job currently running</div>
 			{/if}
 		</DataTable>
 	</div>
diff --git a/frontend/src/lib/components/HistoricList.svelte b/frontend/src/lib/components/HistoricList.svelte
index 19c7090461..4f120f3dfb 100644
--- a/frontend/src/lib/components/HistoricList.svelte
+++ b/frontend/src/lib/components/HistoricList.svelte
@@ -141,7 +141,7 @@
 		/>
 	{/snippet}
 	{#snippet empty()}
-		<div class="text-center text-tertiary text-xs py-2">
+		<div class="text-center text-primary text-xs py-2">
 			{runnableId ? 'No previous inputs' : 'Save draft to see previous runs'}
 		</div>
 	{/snippet}
diff --git a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte b/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
index 3e1644d3ab..fd0a14dab7 100644
--- a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
+++ b/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
@@ -109,8 +109,8 @@
 </script>
 
 <Tabs bind:selected={selectedTab}>
-	<Tab value="create">Create</Tab>
-	<Tab value="blacklist">Blacklist</Tab>
+	<Tab value="create" label="Create" />
+	<Tab value="blacklist" label="Blacklist" />
 	{#snippet content()}
 		<div class="flex flex-col gap-y-4 pt-2">
 			{#if selectedTab === 'create'}
diff --git a/frontend/src/lib/components/IconedResourceType.svelte b/frontend/src/lib/components/IconedResourceType.svelte
index 9f7863a4d2..212d0fdd73 100644
--- a/frontend/src/lib/components/IconedResourceType.svelte
+++ b/frontend/src/lib/components/IconedResourceType.svelte
@@ -42,7 +42,7 @@
 	{/if}
 	{#if iconComponent}
 		{@const SvelteComponent = iconComponent}
-		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+		<span class={isSelected ? 'text-secondary' : 'text-secondary'}>
 			<SvelteComponent {height} {width} size={widthInPixels} />
 		</span>
 	{:else if formatExtension}
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index c5d2f65209..4c7a56825e 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -450,9 +450,9 @@
 </script>
 
 {#if arg != undefined && !hidden}
-	<div class={twMerge('pt-2 pb-2 relative group', className)}>
-		<div class="flex flex-row justify-between gap-1 pb-1">
-			<div class="flex flex-wrap grow min-h-7 items-end">
+	<div class={twMerge('relative group flex flex-col gap-1', className)}>
+		<div class="flex flex-row flex-wrap justify-between gap-1">
+			<div class="flex grow min-h-7 items-end">
 				<FieldHeader
 					label={argName}
 					simpleTooltip={headerTooltip}
@@ -598,20 +598,25 @@
 									propertyType = 'static'
 								}
 							}}
-							class="h-6"
 						>
 							{#snippet children({ item })}
 								{#if isStaticTemplate(inputCat)}
 									<ToggleButton
-										light
-										small
+										size="sm"
 										tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 										value="static"
 										label={'${}'}
 										{item}
+										class="h-full text-xs"
 									/>
 								{:else}
-									<ToggleButton light small label="static" value="static" {item} />
+									<ToggleButton
+										size="sm"
+										label="static"
+										value="static"
+										{item}
+										class="h-full text-xs"
+									/>
 								{/if}
 
 								{#if codeInjectionDetected && propertyType == 'static'}
@@ -630,11 +635,11 @@
 									<ToggleButton
 										disabled={inputCat === 'dynamic'}
 										small
-										light
 										tooltip="JavaScript expression ('flow_input' or 'results')."
 										value="javascript"
 										icon={FunctionSquare}
 										{item}
+										class="h-full"
 									/>
 								{/if}
 							{/snippet}
@@ -644,7 +649,6 @@
 			{/if}
 		</div>
 
-		<div class="max-w-xs"></div>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="relative" onkeyup={handleKeyUp}>
 			<!-- {#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
@@ -656,12 +660,20 @@
 			{/if} -->
 			<!-- {inputCat}
 			{propertyType} -->
-			<div class="relative flex flex-row items-top gap-2 justify-between">
+			<div class="relative flex flex-row items-top gap-1 justify-between">
 				<div class="min-w-0 grow">
 					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
-						<div>
+						<div class="flex flex-col gap-1">
+							{#if argName && schema?.properties?.[argName]?.description}
+								<div class="text-xs text-secondary">
+									<pre class="font-main whitespace-normal">
+										{schema.properties[argName].description}
+										</pre>
+								</div>
+							{/if}
 							{#if arg}
 								<TemplateEditor
+									yPadding={7}
 									bind:this={monacoTemplate}
 									{extraLib}
 									on:focus={onFocus}
@@ -669,21 +681,14 @@
 										focused = false
 									}}
 									bind:code={arg.value}
-									fontSize={14}
+									fontSize={12}
 									on:change={() => {
 										dispatch('change', { argName, arg })
 									}}
 									loadAsync
-									class="bg-surface-secondary"
+									class="bg-surface-input"
 								/>
 							{/if}
-							{#if argName && schema?.properties?.[argName]?.description}
-								<div class="text-xs italic py-1 text-hint">
-									<pre class="font-main whitespace-normal"
-										>{schema.properties[argName].description}</pre
-									>
-								</div>
-							{/if}
 						</div>
 					{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
 						<ArgInput
@@ -743,12 +748,13 @@
 						</ArgInput>
 					{:else if arg.expr != undefined}
 						<div
-							class={`bg-surface-secondary rounded-md flex flex-col pl-4 ${inputBorderClass({ forceFocus: focused })}`}
+							class={`bg-surface-input rounded-md flex flex-col pl-3 ${inputBorderClass({ forceFocus: focused })}`}
 						>
 							<SimpleEditor
+								small
 								bind:this={monaco}
 								bind:code={arg.expr}
-								yPadding={8}
+								yPadding={7}
 								{extraLib}
 								lang="javascript"
 								shouldBindKey={false}
@@ -779,7 +785,7 @@
 						{/if}
 
 						{#if argName && schema?.properties?.[argName]?.description}
-							<div class="text-xs italic py-1 text-hint">
+							<div class="text-xs italic py-1 text-secondary">
 								<pre class="font-main whitespace-normal"
 									>{schema.properties[argName].description}</pre
 								>
@@ -797,7 +803,7 @@
 						</span>
 						<div class="flex mt-2">
 							<Button
-								variant="border"
+								variant="default"
 								size="xs"
 								on:click={() => {
 									arg.expr = ''
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index c0f8b67872..6caa74b2b6 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -83,7 +83,7 @@
 
 <div class="w-full mb-6 {clazz}">
 	{#if enableAi}
-		<div class="mt-2">
+		<div class="pt-2">
 			<StepInputsGen
 				{pickableProperties}
 				argNames={keys
@@ -102,7 +102,7 @@
 	{#if keys.length > 0}
 		{#each keys as argName, index (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<ResizeTransitionWrapper class="mt-2 relative" innerClass="w-full" vertical>
+				<ResizeTransitionWrapper class="mt-6 relative" innerClass="w-full" vertical>
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
@@ -127,7 +127,7 @@
 			{/if}
 		{/each}
 	{:else}
-		<div class="text-tertiary text-sm">No inputs</div>
+		<div class="text-primary text-xs mt-2">No inputs</div>
 	{/if}
 </div>
 
@@ -149,8 +149,7 @@
 	{#snippet submission()}
 		<div class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg">
 			<Button
-				variant="border"
-				color="blue"
+				variant="accent"
 				size="sm"
 				startIcon={{ icon: Plus }}
 				on:click={() => {
diff --git a/frontend/src/lib/components/InputTransformsViewer.svelte b/frontend/src/lib/components/InputTransformsViewer.svelte
index 5e600d0a47..d5867ba8dc 100644
--- a/frontend/src/lib/components/InputTransformsViewer.svelte
+++ b/frontend/src/lib/components/InputTransformsViewer.svelte
@@ -29,5 +29,5 @@
 		{/each}
 	</ul>
 {:else}
-	<div class="text-tertiary text-sm"> No inputs </div>
+	<div class="text-primary text-xs"> No inputs </div>
 {/if}
diff --git a/frontend/src/lib/components/InstanceGroupEditor.svelte b/frontend/src/lib/components/InstanceGroupEditor.svelte
index d9a84cf32e..cf2a3ded0a 100644
--- a/frontend/src/lib/components/InstanceGroupEditor.svelte
+++ b/frontend/src/lib/components/InstanceGroupEditor.svelte
@@ -29,7 +29,7 @@
 		members = instance_group?.emails
 			? instance_group.emails.map((x) => {
 					return { member_email: x }
-			  })
+				})
 			: []
 	}
 </script>
@@ -67,8 +67,7 @@
 		<div class="flex items-start">
 			<input type="text" placeholder="john@acme.com" bind:value={email} />
 			<Button
-				variant="contained"
-				color="blue"
+				variant="accent"
 				size="sm"
 				btnClasses="!ml-4"
 				on:click={async () => {
diff --git a/frontend/src/lib/components/InstanceNameEditor.svelte b/frontend/src/lib/components/InstanceNameEditor.svelte
index b79a4bce7c..502396022f 100644
--- a/frontend/src/lib/components/InstanceNameEditor.svelte
+++ b/frontend/src/lib/components/InstanceNameEditor.svelte
@@ -7,6 +7,7 @@
 	import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte'
 	import { UserService } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
+	import TextInput from './text_input/TextInput.svelte'
 
 	export let value: string | undefined
 	export let email: string
@@ -54,28 +55,32 @@
 				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
 			{/if}
 			<label class="block text-primary">
-				<div class="pb-2 text-sm font-semibold text-primary">Name</div>
+				<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
 				<div class="flex w-full">
-					<input
-						type="text"
-						bind:value
-						class="!w-auto grow"
-						on:click|stopPropagation={() => {}}
-						on:keydown|stopPropagation
-						on:keypress|stopPropagation={({ key }) => {
-							if (key === 'Enter') {
-								saveName()
+					<TextInput
+						inputProps={{
+							onclick: (e) => {
+								e.stopPropagation()
+							},
+							onkeydown: (e) => {
+								e.stopPropagation()
+							},
+							onkeypress: ({ key }) => {
+								if (key === 'Enter') {
+									saveName()
+								}
 							}
 						}}
+						bind:value
 					/>
 				</div>
 				<Button
-					size="xs"
-					color="blue"
+					unifiedSize="md"
+					variant="default"
 					buttonType="button"
 					btnClasses="mt-2 "
 					aria-label="Save ID"
-					on:click={() => {
+					onclick={() => {
 						saveName()
 					}}
 				>
@@ -83,7 +88,7 @@
 				</Button>
 			</label>
 			<label class="block text-primary">
-				<div class="pb-2 text-sm font-semibold text-primary">Password</div>
+				<div class="pb-1 text-xs font-semibold text-emphasis">Password</div>
 				<div class="flex w-full">
 					<input
 						type="password"
@@ -99,8 +104,8 @@
 					/>
 				</div>
 				<Button
-					size="xs"
-					color="blue"
+					unifiedSize="md"
+					variant="default"
 					buttonType="button"
 					btnClasses="mt-2 "
 					aria-label="Save ID"
@@ -112,11 +117,7 @@
 				</Button>
 			</label>
 			<label class="block text-primary">
-				<div class="pb-2 text-sm font-semibold text-primary">Login type</div>
-				<div class="text-xs text-secondary mb-2">
-					Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
-					microsoft
-				</div>
+				<div class="mb-1 text-xs font-semibold text-emphasis">Login type</div>
 
 				<div class="flex w-full">
 					<input
@@ -132,9 +133,13 @@
 						}}
 					/>
 				</div>
+				<div class="text-2xs text-secondary mb-1">
+					Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
+					microsoft
+				</div>
 				<Button
-					size="xs"
-					color="blue"
+					unifiedSize="md"
+					variant="default"
 					buttonType="button"
 					btnClasses="mt-2 "
 					aria-label="Save login type"
diff --git a/frontend/src/lib/components/InstanceSetting.svelte b/frontend/src/lib/components/InstanceSetting.svelte
index e990b7a0b9..d1c85d4cd6 100644
--- a/frontend/src/lib/components/InstanceSetting.svelte
+++ b/frontend/src/lib/components/InstanceSetting.svelte
@@ -204,10 +204,10 @@
 	{#if setting.fieldType == 'select'}
 		<div>
 			<!-- svelte-ignore a11y_label_has_associated_control -->
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">{setting.label}</span>
+			<label class="block pb-1">
+				<span class="text-emphasis font-semibold text-xs pb-1">{setting.label}</span>
 				{#if setting.description}
-					<span class="text-secondary text-xs">
+					<span class="text-secondary text-xs font-normal">
 						{@html setting.description}
 					</span>
 				{/if}
@@ -228,10 +228,10 @@
 	{:else if setting.fieldType == 'select_python'}
 		<div>
 			<!-- svelte-ignore a11y_label_has_associated_control -->
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">{setting.label}</span>
+			<label class="mb-1 flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">{setting.label}</span>
 				{#if setting.description}
-					<span class="text-secondary text-xs">
+					<span class="text-secondary text-xs font-normal">
 						{@html setting.description}
 					</span>
 				{/if}
@@ -247,19 +247,17 @@
 							item={toggleButtonn}
 						/>
 					{/each}
-					<PopoverMelt closeButton={!isPyFetching}>
+					<PopoverMelt closeButton={!isPyFetching} contentClasses="max-w-md">
 						{#snippet trigger()}
 							{#if setting.select_items?.some((e) => e.label == $values[setting.key] || e.value == $values[setting.key])}
 								<Button
-									variant="border"
-									color="dark"
+									variant="default"
 									btnClasses="px-1.5 py-1.5 text-2xs bg-surface-secondary border-0"
 									nonCaptureEvent={true}>Select Custom</Button
 								>
 							{:else}
 								<Button
-									variant="border"
-									color="dark"
+									variant="default"
 									btnClasses="px-1.5 py-1.5 text-2xs border-0 shadow-md"
 									nonCaptureEvent={true}>Custom | {$values[setting.key]}</Button
 								>
@@ -290,12 +288,14 @@
 		</div>
 	{:else}
 		{#snippet settingContent()}
-			<span class="text-primary font-semibold text-sm">{setting.label}</span>
-			{#if setting.description}
-				<span class="text-secondary text-xs">
-					{@html setting.description}
-				</span>
-			{/if}
+			<div class="text-emphasis font-semibold text-xs flex flex-col gap-1 mb-1"
+				>{setting.label}
+				{#if setting.description}
+					<span class="text-secondary font-normal text-xs">
+						{@html setting.description}
+					</span>
+				{/if}
+			</div>
 			{#if setting.tooltip}
 				<Tooltip>{setting.tooltip}</Tooltip>
 			{/if}
@@ -371,8 +371,9 @@
 							bind:password={$values[setting.key]}
 						/>
 						<Button
-							variant={$values[setting.key] ? 'contained' : 'border'}
-							size="xs"
+							variant="accent"
+							unifiedSize="md"
+							disabled={!$values[setting.key]}
 							on:click={async () => {
 								await SettingService.testLicenseKey({
 									requestBody: { license_key: $values[setting.key] }
@@ -387,9 +388,8 @@
 						{#if $values[setting.key]?.length > 0}
 							{#if valid}
 								<div class="flex flex-row gap-1 items-center">
-									<Info size={12} class="text-tertiary" />
-									<span class="text-tertiary text-xs"
-										>License key expires on {expiration ?? ''}</span
+									<Info size={12} class="text-primary" />
+									<span class="text-primary text-xs">License key expires on {expiration ?? ''}</span
 									>
 								</div>
 							{:else if expiration}
@@ -486,10 +486,10 @@
 
 						{#if valid || expiration}
 							<div class="flex flex-row gap-2 mt-1">
-								<Button on:click={renewLicenseKey} loading={renewing} size="xs" color="dark"
+								<Button on:click={renewLicenseKey} loading={renewing} size="xs" variant="accent"
 									>Renew key
 								</Button>
-								<Button color="dark" size="xs" loading={opening} on:click={openCustomerPortal}>
+								<Button variant="accent" size="xs" loading={opening} on:click={openCustomerPortal}>
 									Open customer portal
 								</Button>
 							</div>
@@ -506,8 +506,7 @@
 						/>
 						<div class="flex flex-row">
 							<Button
-								variant="border"
-								color="light"
+								variant="default"
 								disabled={!$enterpriseLicense}
 								size="xs"
 								on:click={() => {
@@ -636,8 +635,7 @@
 					</div>
 					<div class="flex mt-2 gap-20 items-center">
 						<Button
-							variant="border"
-							color="light"
+							variant="default"
 							size="xs"
 							btnClasses="mt-1"
 							on:click={() => {
@@ -656,8 +654,7 @@
 						<div class="flex mt-1">
 							<Button
 								disabled={!$enterpriseLicense}
-								variant="border"
-								color="light"
+								variant="default"
 								size="xs"
 								on:click={async () => {
 									try {
@@ -684,7 +681,7 @@
 								size="sm"
 								endIcon={{ icon: Slack }}
 								btnClasses="mt-2"
-								variant="border"
+								variant="default"
 								on:click={async () => {
 									$values[setting.key] = undefined
 								}}
@@ -694,7 +691,7 @@
 						{:else}
 							<Button
 								size="xs"
-								color="dark"
+								variant="accent"
 								href="{base}/api/oauth/connect_slack?instance=true"
 								startIcon={{ icon: Slack }}
 								disabled={!$enterpriseLicense}
@@ -707,7 +704,7 @@
 					<div class="flex flex-col gap-4 mt-4">
 						{#if $values[setting.key]}
 							<div>
-								<label for="writer_memory_budget" class="block text-sm font-medium">
+								<label for="writer_memory_budget" class="block text-xs font-semibold text-emphasis">
 									Index writer memory budget (MB)
 									<Tooltip>
 										The allocated memory arena for the indexer. A bigger value means less writing to
@@ -730,9 +727,12 @@
 									value={$values[setting.key].writer_memory_budget / (1024 * 1024)}
 								/>
 							</div>
-							<h3>Completed Job Index</h3>
+							<h3 class="text-sm font-semibold text-emphasis mt-8">Completed Job Index</h3>
 							<div>
-								<label for="commit_job_max_batch_size" class="block text-sm font-medium">
+								<label
+									for="commit_job_max_batch_size"
+									class="block text-xs font-semibold text-emphasis"
+								>
 									Commit max batch size <Tooltip>
 										The max amount of documents (here jobs) per commit. To optimize indexing
 										throughput, it is best to keep this as high as possible. However, especially
@@ -751,7 +751,7 @@
 								/>
 							</div>
 							<div>
-								<label for="refresh_index_period" class="block text-sm font-medium">
+								<label for="refresh_index_period" class="block text-xs font-semibold text-emphasis">
 									Refresh index period (s) <Tooltip>
 										The index will query new jobs periodically and write them on the index. This
 										setting sets that period.
@@ -766,7 +766,10 @@
 								/>
 							</div>
 							<div>
-								<label for="max_indexed_job_log_size" class="block text-sm font-medium">
+								<label
+									for="max_indexed_job_log_size"
+									class="block text-xs font-semibold text-emphasis"
+								>
 									Max indexed job log size (KB) <Tooltip>
 										Job logs are included when indexing, but to avoid the index size growing
 										artificially, the logs will be truncated after a size has been reached.
@@ -788,9 +791,11 @@
 									value={$values[setting.key].max_indexed_job_log_size / 1024}
 								/>
 							</div>
-							<h3>Service Logs Index</h3>
+							<h3 class="text-sm font-semibold text-emphasis mt-8">Service logs index</h3>
 							<div>
-								<label for="commit_log_max_batch_size" class="block text-sm font-medium"
+								<label
+									for="commit_log_max_batch_size"
+									class="block text-xs font-semibold text-emphasis"
 									>Commit max batch size <Tooltip>
 										The max amount of documents per commit. In this case 1 document is one log file
 										representing all logs during 1 minute for a specific host. To optimize indexing
@@ -810,7 +815,10 @@
 								/>
 							</div>
 							<div>
-								<label for="refresh_log_index_period" class="block text-sm font-medium">
+								<label
+									for="refresh_log_index_period"
+									class="block text-xs font-semibold text-emphasis"
+								>
 									Refresh index period (s) <Tooltip>
 										The index will query new service logs peridically and write them on the index.
 										This setting sets that period.
@@ -824,9 +832,11 @@
 									bind:value={$values[setting.key].refresh_log_index_period}
 								/>
 							</div>
-							<h3>Reset Index</h3>
-							This buttons will clear the whole index, and the service will start reindexing from scratch.
-							Full text search might be down during this time.
+							<h3 class="text-sm font-semibold text-emphasis mt-8">Reset Index</h3>
+							<p class="text-xs text-primary font-normal">
+								This buttons will clear the whole index, and the service will start reindexing from
+								scratch. Full text search might be down during this time.
+							</p>
 							<div>
 								<ConfirmButton
 									on:click={async () => {
@@ -844,7 +854,7 @@
 										})
 										console.log('asasd')
 										sendUserToast(r)
-									}}>Clear <b>Service Logs</b> Index</ConfirmButton
+									}}>Clear <b>Service logs</b> index</ConfirmButton
 								>
 							</div>
 						{/if}
@@ -877,7 +887,8 @@
 								></div
 							>
 							<div>
-								<label for="smtp_host" class="block text-sm font-medium">Host</label>
+								<label for="smtp_host" class="block text-xs font-semibold text-emphasis">Host</label
+								>
 								<input
 									type="text"
 									id="smtp_host"
@@ -886,7 +897,8 @@
 								/>
 							</div>
 							<div>
-								<label for="smtp_port" class="block text-sm font-medium">Port</label>
+								<label for="smtp_port" class="block text-xs font-semibold text-emphasis">Port</label
+								>
 								<input
 									type="number"
 									id="smtp_port"
@@ -895,7 +907,9 @@
 								/>
 							</div>
 							<div>
-								<label for="smtp_username" class="block text-sm font-medium">Username</label>
+								<label for="smtp_username" class="block text-xs font-semibold text-emphasis"
+									>Username</label
+								>
 								<input
 									type="text"
 									id="smtp_username"
@@ -904,11 +918,15 @@
 								/>
 							</div>
 							<div>
-								<label for="smtp_password" class="block text-sm font-medium">Password</label>
+								<label for="smtp_password" class="block text-xs font-semibold text-emphasis"
+									>Password</label
+								>
 								<Password bind:password={$values[setting.key].smtp_password} />
 							</div>
 							<div>
-								<label for="smtp_from" class="block text-sm font-medium">From Address</label>
+								<label for="smtp_from" class="block text-xs font-semibold text-emphasis"
+									>From Address</label
+								>
 								<input
 									type="email"
 									id="smtp_from"
@@ -922,7 +940,6 @@
 									id="smtp_tls_implicit"
 									bind:checked={$values[setting.key].smtp_tls_implicit}
 									options={{ right: 'Implicit TLS' }}
-									label="Implicit TLS"
 								/>
 							</div>
 							<div>
@@ -936,7 +953,6 @@
 										}
 									}}
 									options={{ right: 'Disable TLS' }}
-									label="Disable TLS"
 								/>
 							</div>
 						{/if}
@@ -950,27 +966,25 @@
 									id="tracing_enabled"
 									bind:checked={$values[setting.key].tracing_enabled}
 									options={{ right: 'Tracing' }}
-									label="Tracing"
 								/>
 								<Toggle
 									disabled={!$enterpriseLicense}
 									id="logs_enabled"
 									bind:checked={$values[setting.key].logs_enabled}
 									options={{ right: 'Logs' }}
-									label="logs"
 								/>
 								<Toggle
 									disabled
 									id="metrics_enabled"
 									bind:checked={$values[setting.key].logs_enabled}
 									options={{ right: 'Metrics (coming soon)' }}
-									label="metrics"
 								/>
 							</div>
 
 							<div>
-								<label for="OTEL_EXPORTER_OTLP_ENDPOINT" class="block text-sm font-medium"
-									>Endpoint</label
+								<label
+									for="OTEL_EXPORTER_OTLP_ENDPOINT"
+									class="block text-xs font-semibold text-emphasis">Endpoint</label
 								>
 								<input
 									disabled={!$enterpriseLicense}
@@ -981,8 +995,9 @@
 								/>
 							</div>
 							<div>
-								<label for="OTEL_EXPORTER_OTLP_HEADERS" class="block text-sm font-medium"
-									>Headers</label
+								<label
+									for="OTEL_EXPORTER_OTLP_HEADERS"
+									class="block text-xs font-semibold text-emphasis">Headers</label
 								>
 								<input
 									disabled={!$enterpriseLicense}
@@ -993,14 +1008,15 @@
 								/>
 							</div>
 							<div>
-								<label for="OTEL_EXPORTER_OTLP_PROTOCOL" class="block text-sm font-medium"
-									>Protocol</label
+								<label
+									for="OTEL_EXPORTER_OTLP_PROTOCOL"
+									class="block text-xs font-semibold text-emphasis">Protocol</label
 								>
 								gRPC
 							</div>
 							<!-- <div>
-							<label for="OTEL_EXPORTER_OTLP_PROTOCOL" class="block text-sm font-medium"
-								>Protocol<span class="text-2xs text-tertiary ml-4"
+							<label for="OTEL_EXPORTER_OTLP_PROTOCOL" class="block text-sm font-semibold"
+								>Protocol<span class="text-2xs text-primary ml-4"
 									>grpc, http/protobuf, http/json</span
 								></label
 							>
@@ -1012,8 +1028,8 @@
 							/>
 						</div>
 						<div>
-							<label for="OTEL_EXPORTER_OTLP_COMPRESSION" class="block text-sm font-medium"
-								>Compression <span class="text-2xs text-tertiary ml-4">none, gzip</span></label
+							<label for="OTEL_EXPORTER_OTLP_COMPRESSION" class="block text-sm font-semibold"
+								>Compression <span class="text-2xs text-primary ml-4">none, gzip</span></label
 							>
 							<input
 								type="text"
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index bbce534ebb..c35d9b7ff8 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -125,9 +125,7 @@
 				return isValidTeamsChannel(entry.teams_channel)
 			}
 			if ('slack_channel' in entry) {
-				return (
-					typeof entry.slack_channel === 'string' && entry.slack_channel.trim() !== ''
-				)
+				return typeof entry.slack_channel === 'string' && entry.slack_channel.trim() !== ''
 			}
 			if ('email' in entry) {
 				return typeof entry.email === 'string' && entry.email.trim() !== ''
@@ -247,7 +245,7 @@
 	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<Tabs {hideTabs} bind:selected={tab}>
 		{#each settingsKeys as category}
-			<Tab value={category}>{category}</Tab>
+			<Tab value={category} label={category}></Tab>
 		{/each}
 
 		{#snippet content()}
@@ -299,7 +297,7 @@
 							Enable debug mode to get more detailed logs.
 						</div>
 					{:else if category == 'Telemetry'}
-						<div class="text-secondary pb-4 text-xs">
+						<div class="text-primary pb-4 text-xs">
 							Anonymous usage data is collected to help improve Windmill.
 							<br />The following information is collected:
 							<ul class="list-disc list-inside pl-2">
@@ -316,15 +314,14 @@
 							</ul>
 						</div>
 						{#if $enterpriseLicense}
-							<div class="text-secondary pb-4 text-xs">
+							<div class="text-primary pb-4 text-xs">
 								On Enterprise Edition, you must send data to check that usage is in line with the
 								terms of the subscription. You can either enable telemetry or regularly send usage
 								data by clicking the button below.
 							</div>
 							<Button
 								on:click={sendStats}
-								variant="border"
-								color="light"
+								variant="default"
 								btnClasses="w-auto"
 								wrapperClasses="mb-4"
 								loading={sendingStats}
@@ -375,6 +372,6 @@
 </div>
 
 {#if !hideSave}
-	<Button on:click={saveSettings}>Save settings</Button>
+	<Button on:click={saveSettings} variant="accent">Save settings</Button>
 	<div class="pb-8"></div>
 {/if}
diff --git a/frontend/src/lib/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
index 83c07f7570..a8f7edd13e 100644
--- a/frontend/src/lib/components/InviteGlobalUser.svelte
+++ b/frontend/src/lib/components/InviteGlobalUser.svelte
@@ -31,26 +31,25 @@
 	}
 </script>
 
-<h3 class="mb-4">Add new user to instance</h3>
+<h3 class="text-sm font-semibold text-emphasis">Add new user to instance</h3>
 <div class="flex flex-row flex-wrap gap-2 mb-2 items-end">
 	<label class="block shrink min-w-0">
-		<span class="text-secondary text-sm">Email</span>
+		<span class="text-xs font-semibold text-emphasis">Email</span>
 		<input type="email" placeholder="email" bind:value={$globalEmailInvite} />
 	</label>
 	<label class="block shrink min-w-0">
-		<span class="text-secondary text-sm">Password</span>
+		<span class="text-xs font-semibold text-emphasis">Password</span>
 		<input bind:value={password} />
 	</label>
 	<div>
-		<span class="text-secondary text-sm">Name (optional)</span>
+		<span class="text-xs font-semibold text-emphasis">Name (optional)</span>
 		<input type="text" placeholder="name (optional)" bind:value={name} />
 	</div>
 	<Toggle class="mx-2 mb-1" bind:checked={is_super_admin} options={{ right: 'Superadmin' }} />
 	<div class="flex flex-row-reverse grow">
 		<div class="flex">
 			<Button
-				variant="contained"
-				color="dark"
+				variant="accent"
 				size="sm"
 				on:click={addUser}
 				disabled={$globalEmailInvite == '' || password == undefined}
@@ -61,5 +60,5 @@
 	</div>
 </div>
 <div class="flex gap-2 items-end">
-	<div class="text-xs text-tertiary grow text-right"> Email will be sent if SMTP configured </div>
+	<div class="text-2xs text-secondary grow text-right"> Email will be sent if SMTP configured </div>
 </div>
diff --git a/frontend/src/lib/components/InviteUser.svelte b/frontend/src/lib/components/InviteUser.svelte
index 1d634fefd1..0eb381cc53 100644
--- a/frontend/src/lib/components/InviteUser.svelte
+++ b/frontend/src/lib/components/InviteUser.svelte
@@ -67,7 +67,7 @@
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
 	{#snippet trigger()}
-		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: MailPlus }}>
+		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: MailPlus }}>
 			Invite
 		</Button>
 	{/snippet}
@@ -104,13 +104,7 @@
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-			<Button
-				variant="contained"
-				color="blue"
-				size="sm"
-				on:click={inviteUser}
-				disabled={email === undefined}
-			>
+			<Button variant="accent" size="sm" on:click={inviteUser} disabled={email === undefined}>
 				Invite
 			</Button>
 		</div>
diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
index f4ac25a86d..3c647539ab 100644
--- a/frontend/src/lib/components/ItemPicker.svelte
+++ b/frontend/src/lib/components/ItemPicker.svelte
@@ -92,8 +92,6 @@
 					autofocus
 				/>
 				<Button
-					color="light"
-					variant="border"
 					on:click={() => {
 						refreshing = true
 						loadItems()
@@ -114,7 +112,7 @@
 					<Skeleton layout={[[5], 0.2]} />
 				{/each}
 			{:else if !items?.length}
-				<div class="text-center text-sm text-tertiary mt-2">
+				<div class="text-center text-sm text-primary mt-2">
 					{@html noItemMessage}
 				</div>
 			{:else if filteredItems?.length}
@@ -174,7 +172,7 @@
 										<div>
 											<Button
 												size="sm"
-												variant="border"
+												variant="default"
 												on:click={() => {
 													button(obj['path'] ?? '')
 												}}
diff --git a/frontend/src/lib/components/JobArgs.svelte b/frontend/src/lib/components/JobArgs.svelte
index 00211790bc..c7afc40238 100644
--- a/frontend/src/lib/components/JobArgs.svelte
+++ b/frontend/src/lib/components/JobArgs.svelte
@@ -145,7 +145,7 @@ ${Object.entries(args)
 			</Button>
 		{/snippet}
 		{#if jsonStr.length > 100000 || (id && workspace && args && isWindmillTooBigObject(args))}
-			<div class="text-sm mb-2 text-tertiary">
+			<div class="text-sm mb-2 text-primary">
 				<a
 					download="windmill-args.json"
 					href={id && workspace
diff --git a/frontend/src/lib/components/JsonEditor.svelte b/frontend/src/lib/components/JsonEditor.svelte
index 507f238569..63e23eed71 100644
--- a/frontend/src/lib/components/JsonEditor.svelte
+++ b/frontend/src/lib/components/JsonEditor.svelte
@@ -25,7 +25,7 @@
 		value = $bindable(undefined),
 		error = $bindable(),
 		editor = $bindable(undefined),
-		small = false,
+		small = true,
 		loadAsync = false,
 		class: clazz = undefined,
 		disabled = false,
@@ -61,7 +61,7 @@
 {#if tooBig && !loadTooBigAnyway}
 	<div class="flex-1 text-sm">
 		JSON is too big
-		<Button size="xs2" variant="border" on:click={() => (loadTooBigAnyway = true)}>
+		<Button size="xs2" variant="default" on:click={() => (loadTooBigAnyway = true)}>
 			Load anyway
 		</Button>
 	</div>
@@ -69,7 +69,7 @@
 	<div class="flex flex-col w-full">
 		<div
 			class={twMerge(
-				'w-full rounded-md bg-surface-secondary',
+				'w-full rounded-md overflow-auto',
 				inputBorderClass({ error: !!error, forceFocus: focused })
 			)}
 		>
@@ -87,7 +87,7 @@
 				{disabled}
 				{fixedOverflowWidgets}
 				renderLineHighlight="none"
-				yPadding={8}
+				yPadding={7}
 			/>
 		</div>
 		{#if error != ''}
diff --git a/frontend/src/lib/components/Label.svelte b/frontend/src/lib/components/Label.svelte
index 2a79953d62..42474e5b77 100644
--- a/frontend/src/lib/components/Label.svelte
+++ b/frontend/src/lib/components/Label.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 	import Required from './Required.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	interface Props {
 		label?: string | undefined
-		primary?: boolean
 		disabled?: boolean
 		headless?: boolean
 		required?: boolean
 		headerClass?: string
 		class?: string | undefined
+		for?: string | undefined
+		tooltip?: string | undefined
 		header?: import('svelte').Snippet
 		error?: import('svelte').Snippet
 		action?: import('svelte').Snippet
@@ -18,12 +20,13 @@
 
 	let {
 		label = undefined,
-		primary = false,
 		disabled = false,
 		headless = false,
 		required = false,
 		headerClass = '',
 		class: clazz = undefined,
+		for: forAttr = undefined,
+		tooltip = undefined,
 		header,
 		error,
 		action,
@@ -31,16 +34,20 @@
 	}: Props = $props()
 </script>
 
-<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', clazz)}>
+<div
+	class={twMerge('flex flex-col gap-1', disabled ? 'opacity-60 pointer-events-none' : '', clazz)}
+>
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
 			<div class={twMerge('flex flex-row items-center gap-2', headerClass)}>
-				<span
-					class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6 whitespace-nowrap"
-					>{label}
+				<span class="text-emphasis text-xs font-semibold whitespace-nowrap"
+					><label for={forAttr}>{label}</label>
 					{#if required}
 						<Required required={true} />
 					{/if}
+					{#if tooltip}
+						<Tooltip>{tooltip}</Tooltip>
+					{/if}
 				</span>
 				{@render header?.()}
 			</div>
diff --git a/frontend/src/lib/components/LightweightResourcePicker.svelte b/frontend/src/lib/components/LightweightResourcePicker.svelte
index 94eb7ce15a..09fbaa1de4 100644
--- a/frontend/src/lib/components/LightweightResourcePicker.svelte
+++ b/frontend/src/lib/components/LightweightResourcePicker.svelte
@@ -98,7 +98,7 @@
 {:else}
 	<Drawer bind:this={drawer} size="800px">
 		<DrawerContent
-			title="Add a Resource"
+			title="Add a resource"
 			on:close={drawer.closeDrawer}
 			tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 			documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 871fd50ec1..8f8c7546c8 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -206,7 +206,7 @@
 		{/snippet}
 		<div>
 			<pre
-				class="bg-surface-secondary text-secondary text-xs w-full p-2 whitespace-pre-wrap border rounded-md"
+				class="bg-surface-secondary text-primary text-xs w-full p-2 whitespace-pre-wrap border rounded-md"
 				>{#if content}{@const len =
 						(content?.length ?? 0) +
 						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
@@ -227,7 +227,7 @@
 			class="w-full h-full overflow-auto bg-surface-secondary pt-4 {noMaxH ? '' : 'max-h-screen'}"
 			data-nav-id={navigationId}
 		>
-			<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-sm">
+			<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-xs">
 				<div class="flex gap-2">
 					{#if jobId && download}
 						<div class="flex items-center">
@@ -242,14 +242,14 @@
 					{/if}
 					<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
 					{#if !noAutoScroll}
-						<div
-							class="{small ? '' : 'py-2'} pr-2 {small
-								? '!text-2xs'
-								: '!text-xs'} flex gap-2 text-tertiary items-center"
+						<label
+							class="{small
+								? ''
+								: 'py-2'} pr-2 text-2xs flex gap-2 font-normal text-primary items-center"
 						>
 							Auto scroll
 							<input class="windmillapp" type="checkbox" bind:checked={scroll} />
-						</div>
+						</label>
 					{/if}
 				</div>
 			</div>
@@ -258,9 +258,7 @@
 					<Loader2 class="animate-spin" />
 					{#if tag}
 						<div class="flex flex-row items-center gap-1">
-							<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}"
-								>{tagLabel ?? 'tag'}: {tag}</div
-							>
+							<div class="text-primary text-2xs">{tagLabel ?? 'tag'}: {tag}</div>
 							<NoWorkerWithTagWarning {tagLabel} {tag} />
 						</div>
 					{/if}
@@ -271,7 +269,7 @@
 			{:else if duration}
 				<span
 					class={twMerge(
-						'absolute  text-tertiary dark:text-gray-400',
+						'absolute  text-primary dark:text-gray-400',
 						small ? '!text-2xs' : '!text-xs',
 						small ? 'top-0' : 'top-2',
 						noPadding ? '' : 'left-2'
@@ -280,14 +278,14 @@
 			{/if}
 			{#if mem}
 				<span
-					class="absolute {small ? '!text-2xs' : '!text-xs'} text-tertiary dark:text-gray-400 {small
+					class="absolute {small ? '!text-2xs' : '!text-xs'} text-primary dark:text-gray-400 {small
 						? 'top-0'
 						: 'top-2'}  left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
 				>
 			{/if}
 			<pre
 				class={twMerge(
-					'whitespace-pre break-words w-full',
+					'whitespace-pre break-words w-full ',
 					small ? '!text-2xs' : '!text-xs',
 					noPadding ? '' : 'p-2'
 				)}
diff --git a/frontend/src/lib/components/LogViewerHeader.svelte b/frontend/src/lib/components/LogViewerHeader.svelte
index 93f641485b..ed355a1e50 100644
--- a/frontend/src/lib/components/LogViewerHeader.svelte
+++ b/frontend/src/lib/components/LogViewerHeader.svelte
@@ -12,9 +12,8 @@
 
 <div class="flex justify-end gap-4 items-center p-2 bg-surface-secondary border-b">
 	<div class="flex items-center gap-2 whitespace-nowrap">
-		<label
-			for="showResultsInputs"
-			class="text-xs text-tertiary hover:text-primary transition-colors">Show inputs/results</label
+		<label for="showResultsInputs" class="text-xs text-primary hover:text-primary transition-colors"
+			>Show inputs/results</label
 		>
 		<div class="flex-shrink-0">
 			<input
@@ -28,7 +27,7 @@
 	</div>
 	<button
 		onclick={toggleExpandAll}
-		class="text-xs text-tertiary hover:text-primary transition-colors flex items-center gap-2 min-w-24 justify-end"
+		class="text-xs text-primary hover:text-primary transition-colors flex items-center gap-2 min-w-24 justify-end"
 	>
 		{allExpanded ? 'Collapse All' : 'Expand All'}
 		{#if allExpanded}
diff --git a/frontend/src/lib/components/Login.svelte b/frontend/src/lib/components/Login.svelte
index aea6b685a6..b525f73ee5 100644
--- a/frontend/src/lib/components/Login.svelte
+++ b/frontend/src/lib/components/Login.svelte
@@ -274,7 +274,7 @@
 	})
 </script>
 
-<div class="bg-surface px-4 py-8 shadow md:border sm:rounded-lg sm:px-10">
+<div class="bg-surface px-4 py-8 border sm:rounded-lg sm:px-10">
 	<div class="grid {logins && logins.length > 2 ? 'grid-cols-2' : ''} gap-4">
 		{#if !logins}
 			{#each Array(4) as _}
@@ -284,8 +284,7 @@
 			{#each providers as { type, icon }}
 				{#if logins?.some((login) => login.type === type)}
 					<Button
-						color="light"
-						variant="border"
+						variant="default"
 						startIcon={{ icon, classes: 'h-4' }}
 						on:click={() => storeRedirect(type)}
 					>
@@ -295,8 +294,7 @@
 			{/each}
 			{#each logins.filter((login) => !providersType?.includes(login.type)) as login}
 				<Button
-					color="dark"
-					variant="border"
+					variant="default"
 					btnClasses="mt-2 w-full"
 					on:click={() => storeRedirect(login.type)}
 				>
@@ -306,8 +304,7 @@
 		{/if}
 		{#if saml}
 			<Button
-				color="dark"
-				variant="border"
+				variant="default"
 				btnClasses="mt-2 w-full"
 				on:click={() => {
 					if (saml) {
@@ -325,9 +322,7 @@
 		<div class={classNames('center-center', logins && logins.length > 0 ? 'mt-6' : '')}>
 			<Button
 				size="xs"
-				color="blue"
-				variant="border"
-				btnClasses="!border-none"
+				variant="subtle"
 				on:click={() => {
 					showPassword = !showPassword
 				}}
@@ -340,36 +335,26 @@
 	{#if showPassword}
 		<div>
 			{#if firstTime}
-				<div class="text-lg text-center w-full pb-6"
+				<div class="text-lg text-center w-full pb-6 text-emphasis"
 					>First time login: admin@windmill.dev / changeme</div
 				>
 			{/if}
 			<div class="space-y-6">
 				{#if isCloudHosted()}
-					<p class="text-xs text-tertiary italic pb-6">
+					<p class="text-xs text-secondary pb-6">
 						To get credentials without the OAuth providers above, send an email at
 						contact@windmill.dev
 					</p>
 				{/if}
-				<div>
-					<label for="email" class="block text-sm font-medium leading-6 text-primary">
-						Email
-					</label>
+				<div class="space-y-1">
+					<label for="email" class="block text-xs font-semibold text-emphasis"> Email </label>
 					<div>
-						<input
-							type="email"
-							bind:value={email}
-							id="email"
-							autocomplete="email"
-							class="block w-full rounded-md border-0 py-1.5 text-primary shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
-						/>
+						<input type="email" bind:value={email} id="email" autocomplete="email" />
 					</div>
 				</div>
 
-				<div>
-					<label for="password" class="block text-sm font-medium leading-6 text-primary">
-						Password
-					</label>
+				<div class="space-y-1">
+					<label for="password" class="block text-xs font-semibold text-emphasis"> Password </label>
 					<div>
 						<input
 							onkeyup={handleKeyUp}
@@ -377,24 +362,17 @@
 							id="password"
 							type="password"
 							autocomplete="current-password"
-							class="block w-full rounded-md border-0 py-1.5 text-shadow shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
 						/>
 					</div>
 				</div>
 
 				<div class="pt-2">
-					<button
-						onclick={login}
-						disabled={!email || !password}
-						class="flex w-full justify-center rounded-md bg-frost-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-frost-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-frost-600"
-					>
-						Sign in
-					</button>
+					<Button onClick={login} variant="accent" disabled={!email || !password}>Sign in</Button>
 				</div>
 			</div>
 
 			{#if isCloudHosted()}
-				<p class="text-2xs text-tertiary italic mt-10 text-center">
+				<p class="text-2xs text-secondary mt-10 text-center">
 					By logging in, you agree to our
 					<a href="https://windmill.dev/terms_of_service" target="_blank" rel="noreferrer">
 						Terms of service
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index ebee88985f..975d715318 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -18,6 +18,7 @@
 		noEditor?: boolean
 		scriptProgress?: any
 		focusArg?: string
+		class?: string
 		onJobDone?: () => void
 	}
 
@@ -30,6 +31,7 @@
 		noEditor = false,
 		scriptProgress = $bindable(undefined),
 		focusArg = undefined,
+		class: className = '',
 		onJobDone
 	}: Props = $props()
 
@@ -51,7 +53,7 @@
 	{onJobDone}
 />
 
-<div class="p-4">
+<div class="p-4 {className}">
 	{#if flowStore.val.value.same_worker}
 		<div class="mb-1 bg-yellow-100 text-yellow-700 p-1 text-xs"
 			>The `./shared` folder is not passed across individual "Test this step"</div
@@ -66,7 +68,7 @@
 			</Button>
 		{:else}
 			<Button
-				color="dark"
+				variant="accent"
 				btnClasses="truncate"
 				size="sm"
 				on:click={runTestWithStepArgs}
diff --git a/frontend/src/lib/components/ModulePreviewForm.svelte b/frontend/src/lib/components/ModulePreviewForm.svelte
index d83faaf143..77a6c95cc4 100644
--- a/frontend/src/lib/components/ModulePreviewForm.svelte
+++ b/frontend/src/lib/components/ModulePreviewForm.svelte
@@ -173,6 +173,6 @@
 			{/each}
 		{/if}
 	{:else}
-		<div class="text-center text-sm text-tertiary"> Loading test step arguments... </div>
+		<div class="text-center text-sm text-primary"> Loading test step arguments... </div>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/ModulePreviewResultViewer.svelte b/frontend/src/lib/components/ModulePreviewResultViewer.svelte
index a2f18d96ad..a42cdf4553 100644
--- a/frontend/src/lib/components/ModulePreviewResultViewer.svelte
+++ b/frontend/src/lib/components/ModulePreviewResultViewer.svelte
@@ -59,7 +59,7 @@
 </script>
 
 <Splitpanes horizontal>
-	<Pane size={65} minSize={10} class="text-sm text-tertiary">
+	<Pane size={65} minSize={10} class="text-sm text-primary">
 		{#if scriptProgress}
 			<JobProgressBar job={testJob} {scriptProgress} compact={true} />
 		{/if}
diff --git a/frontend/src/lib/components/ModuleStatus.svelte b/frontend/src/lib/components/ModuleStatus.svelte
index b70138d3b9..645097b3d0 100644
--- a/frontend/src/lib/components/ModuleStatus.svelte
+++ b/frontend/src/lib/components/ModuleStatus.svelte
@@ -16,12 +16,12 @@
 		Waiting to be resumed by resume events such as approvals
 	</span>
 {:else if type == 'WaitingForPriorSteps'}
-	<span class="italic text-tertiary">
+	<span class="italic text-primary">
 		<Hourglass class="inline" />
 		Waiting for prior steps to complete
 	</span>
 {:else if type == 'WaitingForExecutor'}
-	<span class="italic text-tertiary">
+	<span class="italic text-primary">
 		<Hourglass class="inline" />
 		{#if scheduled_for && forLater(scheduled_for.toString())}
 			Job is scheduled to be executed at {displayDate(scheduled_for, true)}
diff --git a/frontend/src/lib/components/NumberTypeNarrowing.svelte b/frontend/src/lib/components/NumberTypeNarrowing.svelte
index e3796889ae..f277488957 100644
--- a/frontend/src/lib/components/NumberTypeNarrowing.svelte
+++ b/frontend/src/lib/components/NumberTypeNarrowing.svelte
@@ -81,7 +81,7 @@
 		</Label>
 	</div>
 	<div class="flex gap-2">
-		<Label label="Currency" class=" col-span-2">
+		<Label label="Currency">
 			{#snippet header()}
 				<Tooltip light small>
 					Select a currency to display the number in. If a currency is selected, you can also select
diff --git a/frontend/src/lib/components/OauthExtraParams.svelte b/frontend/src/lib/components/OauthExtraParams.svelte
index 89d963e4b2..71aa4e1e79 100644
--- a/frontend/src/lib/components/OauthExtraParams.svelte
+++ b/frontend/src/lib/components/OauthExtraParams.svelte
@@ -16,8 +16,8 @@
 		<input type="text" on:keyup={sync} bind:value={o[0]} />
 		<input type="text" on:keyup={sync} bind:value={o[1]} />
 		<Button
-			variant="border"
-			color="red"
+			variant="default"
+			destructive
 			size="xs"
 			btnClasses="mx-6"
 			on:click={() => {
@@ -31,8 +31,7 @@
 {/each}
 <div class="flex items-center mt-1">
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		hover="yo"
 		size="sm"
 		endIcon={{ icon: Plus }}
@@ -43,7 +42,7 @@
 	>
 		Add item
 	</Button>
-	<span class="ml-2 text-sm text-tertiary">
+	<span class="ml-2 text-sm text-primary">
 		({(extra_params_vec ?? []).length} item{(extra_params_vec ?? []).length > 1 ? 's' : ''})
 	</span>
 </div>
diff --git a/frontend/src/lib/components/OauthScopes.svelte b/frontend/src/lib/components/OauthScopes.svelte
index 7406a0095d..96579ed651 100644
--- a/frontend/src/lib/components/OauthScopes.svelte
+++ b/frontend/src/lib/components/OauthScopes.svelte
@@ -10,8 +10,7 @@
 		<div class="flex flex-row max-w-md mb-2">
 			<input type="text" bind:value={v} />
 			<Button
-				variant="border"
-				color="light"
+				variant="default"
 				size="xs"
 				btnClasses="mx-6"
 				on:click={() => {
@@ -26,18 +25,17 @@
 
 <div class="flex items-center mt-1">
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		hover="yo"
-		size="sm"
-		endIcon={{ icon: Plus }}
+		size="xs"
+		startIcon={{ icon: Plus }}
 		on:click={() => {
 			scopes = (scopes ?? []).concat('')
 		}}
 	>
 		Add item
 	</Button>
-	<span class="ml-2 text-sm text-tertiary">
+	<span class="ml-2 text-xs text-primary font-normal">
 		({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
 	</span>
 </div>
diff --git a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte b/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
index 7934363673..6526637934 100644
--- a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
+++ b/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
@@ -95,8 +95,7 @@
 				spacingSize="sm"
 				size="xs"
 				btnClasses="h-8"
-				color="light"
-				variant="border"
+				variant="default"
 				on:click={testConnection}
 			>
 				{#if loading}
@@ -152,36 +151,36 @@
 				}
 			}}
 		>
-			<Tab size="sm" value="S3">S3</Tab>
-			<Tab size="sm" value="Azure">Azure Blob</Tab>
-			<Tab size="sm" value="AwsOidc">AWS OIDC</Tab>
-			<Tab size="sm" value="Gcs">Google Cloud Storage</Tab>
+			<Tab value="S3" label="S3" />
+			<Tab value="Azure" label="Azure Blob" />
+			<Tab value="AwsOidc" label="AWS OIDC" />
+			<Tab value="Gcs" label="Google Cloud Storage" />
 		</Tabs>
 		<div class="flex flex-col gap-2 mt-2 p-2 border rounded-md">
 			{#if bucket_config.type === 'S3'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<span class="text-xs font-semibold text-emphasis">Bucket</span>
 					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
 				</label>
 
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Region</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Region</span>
+					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_REGION</span
 					>
 					<input type="text" bind:value={bucket_config.region} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Access key ID</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Access key ID</span>
+					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2
 						profile</span
 					>
 					<input type="text" bind:value={bucket_config.access_key} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Secret key</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Secret key</span>
+					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
 					>
 					<input
@@ -191,25 +190,25 @@
 					/>
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Endpoint</span>
-					<span class="text-tertiary text-2xs"
+					<span class="text-xs font-semibold text-emphasis">Endpoint</span>
+					<span class="text-primary text-2xs"
 						>Only needed for non AWS S3 providers like R2 or MinIo</span
 					>
 					<input type="text" bind:value={bucket_config.endpoint} />
 				</label>
 				<div class="block pb-2">
-					<span class="text-tertiary text-2xs">Disable if using https only policy</span>
+					<span class="text-primary text-2xs">Disable if using https only policy</span>
 					<div>
 						<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
 					</div>
 				</div>
 			{:else if bucket_config.type === 'Azure'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Account name</span>
+					<span class="text-xs font-semibold text-emphasis">Account name</span>
 					<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Container name</span>
+					<span class="text-xs font-semibold text-emphasis">Container name</span>
 					<input
 						type="text"
 						placeholder="container-name"
@@ -217,41 +216,41 @@
 					/>
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Access key</span>
+					<span class="text-xs font-semibold text-emphasis">Access key</span>
 					<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm"
-						>Tenant ID <span class="text-2xs text-tertiary">(optional)</span></span
+					<span class="text-xs font-semibold text-emphasis"
+						>Tenant ID <span class="text-2xs text-primary">(optional)</span></span
 					>
 					<input type="text" bind:value={bucket_config.tenantId} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm"
-						>Client ID <span class="text-2xs text-tertiary">(optional)</span></span
+					<span class="text-xs font-semibold text-emphasis"
+						>Client ID <span class="text-2xs text-primary">(optional)</span></span
 					>
 					<input type="text" bind:value={bucket_config.clientId} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm"
-						>Endpoint <span class="text-2xs text-tertiary">(optional)</span></span
+					<span class="text-xs font-semibold text-emphasis"
+						>Endpoint <span class="text-2xs text-primary">(optional)</span></span
 					>
-					<span class="text-tertiary text-2xs"
+					<span class="text-primary text-2xs"
 						>Only needed for non Azure Blob providers like Azurite</span
 					>
 					<input type="text" bind:value={bucket_config.endpoint} />
 				</label>
 			{:else if bucket_config.type === 'AwsOidc'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<span class="text-xs font-semibold text-emphasis">Bucket</span>
 					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Region</span>
+					<span class="text-xs font-semibold text-emphasis">Region</span>
 					<input type="text" placeholder="region" bind:value={bucket_config.region} />
 				</label>
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Role ARN</span>
+					<span class="text-xs font-semibold text-emphasis">Role ARN</span>
 					<input
 						type="text"
 						placeholder="arn:aws:iam::123456789012:role/test"
@@ -260,12 +259,12 @@
 				</label>
 			{:else if bucket_config.type === 'Gcs'}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<span class="text-xs font-semibold text-emphasis">Bucket</span>
 					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
 				</label>
-				<div class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Service Account Key</span>
-					<span class="text-tertiary text-2xs">JSON content of the service account key file</span>
+				<label class="block pb-2">
+					<span class="text-xs font-semibold text-emphasis">Service Account Key</span>
+					<span class="text-primary text-2xs">JSON content of the service account key file</span>
 					<SimpleEditor
 						lang="json"
 						bind:code={
@@ -288,7 +287,7 @@
 						}
 						class="h-80"
 					/>
-				</div>
+				</label>
 			{:else}
 				<div>Unknown bucket type {bucket_config['type']}</div>
 			{/if}
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
index b3c9e10004..336428a976 100644
--- a/frontend/src/lib/components/PageHeader.svelte
+++ b/frontend/src/lib/components/PageHeader.svelte
@@ -10,7 +10,9 @@
 <div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
 	{#if primary}
 		<span class="flex items-center gap-2">
-			<h1 class="!text-2xl font-semibold whitespace-nowrap leading-6 tracking-tight">{title}</h1>
+			<h1 class="text-2xl font-semibold text-emphasis whitespace-nowrap leading-6 tracking-tight"
+				>{title}</h1
+			>
 			{#if tooltip != '' || documentationLink}
 				<Tooltip {documentationLink}>
 					{tooltip}
@@ -19,7 +21,7 @@
 		</span>
 	{:else}
 		<span class="flex items-center gap-2">
-			<h2 class="!text-sm font-semibold">{title}</h2>
+			<h2 class="text-sm font-semibold text-emphasis">{title}</h2>
 			{#if tooltip != '' || documentationLink}
 				<Tooltip {documentationLink} wrapperClass="mb-0.5">
 					{tooltip}
diff --git a/frontend/src/lib/components/Password.svelte b/frontend/src/lib/components/Password.svelte
index 29df4fa4cb..eebee8eaa2 100644
--- a/frontend/src/lib/components/Password.svelte
+++ b/frontend/src/lib/components/Password.svelte
@@ -31,7 +31,7 @@
 	<div class="absolute inset-y-0 right-0 flex items-center px-2">
 		<input bind:checked={hideValue} class="!hidden" id={randomId} type="checkbox" />
 		<label
-			class="bg-surface-secondary hover:bg-gray-400 rounded px-2 py-1 text-sm text-tertiary font-mono cursor-pointer"
+			class="bg-surface-secondary hover:bg-gray-400 rounded px-2 py-1 text-sm text-primary font-mono cursor-pointer"
 			for={randomId}>{hideValue ? 'show' : 'hide'}</label
 		>
 	</div>
diff --git a/frontend/src/lib/components/PasswordArgInput.svelte b/frontend/src/lib/components/PasswordArgInput.svelte
index 200d15d49a..8e7d548c1b 100644
--- a/frontend/src/lib/components/PasswordArgInput.svelte
+++ b/frontend/src/lib/components/PasswordArgInput.svelte
@@ -82,12 +82,11 @@
 </script>
 
 {#if value?.startsWith('$var:') && !value.startsWith('$var:' + userPrefix)}
-	<div class="flex items-center gap-2 text-sm text-tertiary">
+	<div class="flex items-center gap-2 text-sm text-primary">
 		Linked to static variable
 		<Button
-			color="light"
 			size="xs"
-			variant="border"
+			variant="default"
 			onclick={() => {
 				value = ''
 			}}
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 72fb262c73..85f9df1ec5 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -36,6 +36,7 @@
 	import Tooltip from './Tooltip.svelte'
 	import { tick } from 'svelte'
 	import FolderPicker from './FolderPicker.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	type PathKind =
 		| 'resource'
@@ -94,7 +95,7 @@
 		}
 	})
 
-	let inputP: HTMLInputElement | undefined = $state(undefined)
+	let inputP: TextInput | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
 
@@ -393,7 +394,7 @@
 </script>
 
 <div>
-	<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 pb-0 mb-1">
+	<div class="flex flex-col sm:flex-row sm:items-center gap-2 pb-0 mb-1">
 		{#if meta != undefined}
 			<!-- svelte-ignore a11y_label_has_associated_control -->
 			{#if !hideUser}
@@ -437,20 +438,21 @@
 				</div>
 			{/if}
 			{#if !hideUser}
-				<div class="text-xl text-tertiary">/</div>
+				<div class="text-sm text-secondary">/</div>
 			{/if}
 			<div>
 				{#if meta.ownerKind === 'user'}
 					<label class="block shrink min-w-0">
-						<input
+						<TextInput
 							class="!w-36"
-							type="text"
 							bind:value={meta.owner}
-							placeholder={$userStore?.username ?? ''}
-							disabled={disabled ||
-								!($superadmin || ($userStore?.is_admin ?? false)) ||
-								disableEditing}
-							onkeydown={setDirty}
+							inputProps={{
+								type: 'text',
+								placeholder: $userStore?.username ?? '',
+								onkeydown: setDirty,
+								disabled:
+									disabled || !($superadmin || ($userStore?.is_admin ?? false)) || disableEditing
+							}}
 						/>
 					</label>
 				{:else if meta.ownerKind === 'folder'}
@@ -459,32 +461,32 @@
 					</label>
 				{/if}
 			</div>
-			<span class="text-xl text-tertiary">/</span>
+			<div class="text-sm text-secondary">/</div>
 			<label class="block grow w-full max-w-md">
 				<!-- svelte-ignore a11y_autofocus -->
-				<input
-					disabled={disabled || disableEditing}
-					type="text"
-					id="path"
-					{autofocus}
+				<TextInput
 					bind:this={inputP}
-					autocomplete="off"
-					onkeyup={handleKeyUp}
 					bind:value={meta.name}
-					placeholder={namePlaceholder}
-					class={error === ''
-						? ''
-						: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+					{error}
+					inputProps={{
+						disabled: disabled || disableEditing,
+						type: 'text',
+						id: 'path',
+						autofocus,
+						autocomplete: 'off',
+						onkeyup: handleKeyUp,
+						placeholder: namePlaceholder
+					}}
 				/>
 			</label>
 		{/if}
 	</div>
 
-	<div class="flex flex-col w-full mt-4">
+	<div class="flex flex-col w-full mt-2">
 		<div class="flex justify-start w-full">
 			<Badge
 				color="gray"
-				class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
+				class="center-center !bg-surface-secondary !text-primary !w-[70px] !h-[24px] rounded-r-none border"
 			>
 				Full path
 			</Badge>
@@ -568,8 +570,7 @@
 			and resources (having the same path) are automatically moved together.
 			<div class="flex pt-2">
 				<Button
-					variant="border"
-					color="dark"
+					variant="default"
 					on:click={() => {
 						openSearchWithPrefilledText('#')
 					}}
diff --git a/frontend/src/lib/components/PersistentScriptDrawer.svelte b/frontend/src/lib/components/PersistentScriptDrawer.svelte
index 3f24ef7377..aa5c869f31 100644
--- a/frontend/src/lib/components/PersistentScriptDrawer.svelte
+++ b/frontend/src/lib/components/PersistentScriptDrawer.svelte
@@ -119,13 +119,7 @@
 			<h2>
 				Queued jobs for {script.path}
 			</h2>
-			<Button
-				color="light"
-				size="md"
-				btnClasses="w-full h-8"
-				variant="border"
-				on:click={loadQueuedJobsOnce}
-			>
+			<Button size="md" btnClasses="w-full h-8" variant="default" on:click={loadQueuedJobsOnce}>
 				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size={14} />
 			</Button>
 		</div>
diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index 5f103a0d68..4f2b847c22 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -104,14 +104,14 @@
 			onmouseenter={open}
 			onmouseleave={close}
 			class={twMerge(
-				'z-[5001] py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left',
+				'z-[5001] p-4 rounded-md text-xs font-normal bg-surface-secondary whitespace-normal text-left shadow-lg',
 				popupClass
 			)}
 		>
 			<div class="max-w-sm break-words">
 				{@render text?.()}
 				{#if documentationLink}
-					<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
+					<a href={documentationLink} target="_blank">
 						<div class="flex flex-row gap-2 mt-4">
 							See documentation
 							<ExternalLink size="16" />
diff --git a/frontend/src/lib/components/QueuePosition.svelte b/frontend/src/lib/components/QueuePosition.svelte
index 0948b9cd6d..d9180aa7e8 100644
--- a/frontend/src/lib/components/QueuePosition.svelte
+++ b/frontend/src/lib/components/QueuePosition.svelte
@@ -90,7 +90,7 @@
 	<div class="text-small ml-4">
 		<span class="text-orange-600">Queue position: <b>{queueState.position}</b></span>
 		{#if !minimal}
-			<span class="ml-2 text-tertiary">(Waiting for an available worker)</span>
+			<span class="ml-2 text-primary">(Waiting for an available worker)</span>
 		{/if}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/Required.svelte b/frontend/src/lib/components/Required.svelte
index c6e5a1427a..2163efa976 100644
--- a/frontend/src/lib/components/Required.svelte
+++ b/frontend/src/lib/components/Required.svelte
@@ -6,7 +6,7 @@
 {#if required}
 	<span class="text-red-500 dark:text-red-400 text-sm font-normal {$$props.class}">*</span>
 {:else if detail || detail != ''}
-	<span class="text-sm text-tertiary ml-2 font-normal {$$props.class}"
+	<span class="text-sm text-primary ml-2 font-normal {$$props.class}"
 		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 5bd3e6e381..80061d922b 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -199,7 +199,7 @@
 </script>
 
 <div>
-	<div class="flex flex-col gap-3 py-3">
+	<div class="flex flex-col gap-6 py-2">
 		{#if !hidePath}
 			<div>
 				{#if !can_write}
@@ -220,113 +220,122 @@
 		{/if}
 
 		{#if !emptyString(resourceTypeInfo?.description)}
-			<h4 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h4>
-			<div class="text-sm">
-				<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+			<div class="flex flex-col gap-1">
+				<h4 class="text-xs text-emphasis font-semibold">{resourceTypeInfo?.name} description</h4>
+				<div class="text-xs text-primary font-normal">
+					<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+				</div>
 			</div>
 		{/if}
-		<h4 class="mt-4 inline-flex items-center gap-4"
-			>Resource description <Required required={false} />
-			{#if can_write}
-				<Button
-					size="xs2"
-					variant="contained"
-					color="light"
-					btnClasses={editDescription ? 'bg-surface-hover' : ''}
-					startIcon={{ icon: Pen }}
-					on:click={() => (editDescription = !editDescription)}
-				/>
-			{/if}</h4
-		>
-		{#if can_write && editDescription}
-			<div>
-				<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
-				<textarea
-					disabled={!can_write}
-					use:autosize
-					bind:value={description}
-					placeholder={DESCRIPTION_PLACEHOLDER}
-				></textarea>
-			</div>
-		{:else if description == undefined || description == ''}
-			<div class="text-sm text-tertiary">No description provided</div>
-		{:else}
-			<div class="mt-2"></div>
 
-			<GfmMarkdown md={description} />
-		{/if}
-		<div class="w-full flex gap-4 flex-row-reverse items-center mt-4">
-			<Toggle
-				on:change={(e) => switchTab(e.detail)}
-				options={{
-					right: 'As JSON'
-				}}
-			/>
-			{#if resourceToEdit?.resource_type === 'nats' || resourceToEdit?.resource_type === 'kafka'}
-				<TestTriggerConnection kind={resourceToEdit?.resource_type} args={{ connection: args }} />
-			{:else}
-				<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
-			{/if}
-			{#if resource_type === 'git_repository' && $workspaceStore && ($userStore?.is_admin || $userStore?.is_super_admin)}
-				<GitHubAppIntegration
-					resourceType={resource_type}
-					{args}
-					{description}
-					onArgsUpdate={(newArgs) => {
-						args = newArgs
-						// Update rawCode if in JSON view mode
-						if (viewJsonSchema) {
-							rawCode = JSON.stringify(args, null, 2)
-						}
-					}}
-					onDescriptionUpdate={(newDescription) => (description = newDescription)}
-				/>
-			{/if}
-		</div>
-		<div>
-			{#if loadingSchema}
-				<Skeleton layout={[[4]]} />
-			{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
-				{#if resourceTypeInfo?.format_extension}
-					<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
-						File content ({resourceTypeInfo.format_extension})
-					</h5>
-					<div class="">
-						<SimpleEditor
-							autoHeight
-							lang={resourceTypeInfo.format_extension}
-							bind:code={textFileContent}
-							fixedOverflowWidgets={false}
-						/>
-					</div>
-				{:else}
-					<SchemaForm
-						onlyMaskPassword
-						noDelete
-						disabled={!can_write}
-						compact
-						schema={resourceSchema}
-						bind:args
-						bind:isValid
+		<div class="flex flex-col gap-1">
+			<h4 class="inline-flex items-center gap-2 text-xs text-emphasis font-semibold"
+				>Resource description <Required required={false} />
+				{#if can_write}
+					<Button
+						variant="subtle"
+						unifiedSize="sm"
+						btnClasses={editDescription ? 'bg-surface-hover' : ''}
+						startIcon={{ icon: Pen }}
+						on:click={() => (editDescription = !editDescription)}
 					/>
 				{/if}
-			{:else if !can_write}
-				<input type="text" disabled value={rawCode} />
+			</h4>
+			{#if can_write && editDescription}
+				<div>
+					<div class="flex flex-row-reverse text-2xs text-primary -mt-1">GH Markdown</div>
+					<textarea
+						class="text-xs text-primary font-normal"
+						disabled={!can_write}
+						use:autosize
+						bind:value={description}
+						placeholder={DESCRIPTION_PLACEHOLDER}
+					></textarea>
+				</div>
+			{:else if description == undefined || description == ''}
+				<div class="text-xs text-secondary font-normal">No description provided</div>
 			{:else}
-				{#if !viewJsonSchema}
-					<p class="italic text-secondary text-xs mb-4">
-						No corresponding resource type found in your workspace for {resource_type}. Define the
-						value in JSON directly
-					</p>
-				{/if}
-
-				{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
-						>{jsonError}</span
-					>{:else}<div class="py-2"></div>{/if}
-				<div class="bg-surface-secondary rounded-md border py-2.5">
-					<SimpleEditor autoHeight lang="json" bind:code={rawCode} />
+				<div class="text-xs text-primary font-normal">
+					<GfmMarkdown md={description} />
 				</div>
 			{/if}
 		</div>
+
+		<div class="flex flex-col gap-1">
+			<div class="w-full flex gap-4 flex-row-reverse items-center">
+				<Toggle
+					on:change={(e) => switchTab(e.detail)}
+					options={{
+						right: 'As JSON'
+					}}
+				/>
+				{#if resourceToEdit?.resource_type === 'nats' || resourceToEdit?.resource_type === 'kafka'}
+					<TestTriggerConnection kind={resourceToEdit?.resource_type} args={{ connection: args }} />
+				{:else}
+					<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
+				{/if}
+				{#if resource_type === 'git_repository' && $workspaceStore && ($userStore?.is_admin || $userStore?.is_super_admin)}
+					<GitHubAppIntegration
+						resourceType={resource_type}
+						{args}
+						{description}
+						onArgsUpdate={(newArgs) => {
+							args = newArgs
+							// Update rawCode if in JSON view mode
+							if (viewJsonSchema) {
+								rawCode = JSON.stringify(args, null, 2)
+							}
+						}}
+						onDescriptionUpdate={(newDescription) => (description = newDescription)}
+					/>
+				{/if}
+			</div>
+
+			<div>
+				{#if loadingSchema}
+					<Skeleton layout={[[4]]} />
+				{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
+					{#if resourceTypeInfo?.format_extension}
+						<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
+							File content ({resourceTypeInfo.format_extension})
+						</h5>
+						<div class="">
+							<SimpleEditor
+								autoHeight
+								lang={resourceTypeInfo.format_extension}
+								bind:code={textFileContent}
+								fixedOverflowWidgets={false}
+							/>
+						</div>
+					{:else}
+						<SchemaForm
+							onlyMaskPassword
+							noDelete
+							disabled={!can_write}
+							compact
+							schema={resourceSchema}
+							bind:args
+							bind:isValid
+						/>
+					{/if}
+				{:else if !can_write}
+					<input type="text" disabled value={rawCode} />
+				{:else}
+					{#if !viewJsonSchema}
+						<p class="italic text-secondary text-xs mb-4">
+							No corresponding resource type found in your workspace for {resource_type}. Define the
+							value in JSON directly
+						</p>
+					{/if}
+
+					{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
+							>{jsonError}</span
+						>{:else}<div class="py-2"></div>{/if}
+					<div class="bg-surface-tertiary rounded-md border py-2.5">
+						<SimpleEditor autoHeight lang="json" bind:code={rawCode} />
+					</div>
+				{/if}
+			</div>
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte
index caf3168272..50db916f13 100644
--- a/frontend/src/lib/components/ResourceEditorDrawer.svelte
+++ b/frontend/src/lib/components/ResourceEditorDrawer.svelte
@@ -41,7 +41,7 @@
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
-		title={mode == 'edit' ? 'Edit ' + path : 'Add a resourcee'}
+		title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
 		on:close={drawer.closeDrawer}
 	>
 		{#await import('./ResourceEditor.svelte')}
@@ -59,6 +59,8 @@
 		{/await}
 		{#snippet actions()}
 			<Button
+				variant="accent"
+				unifiedSize="md"
 				startIcon={{ icon: Save }}
 				on:click={() => {
 					if (mode == 'edit') {
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index a747c3bf72..57a22b4c0e 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -11,7 +11,6 @@
 	import Select from './select/Select.svelte'
 	import DbManagerDrawer from './DBManagerDrawer.svelte'
 	import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte'
-	import { twMerge } from 'tailwind-merge'
 	import DropdownV2 from './DropdownV2.svelte'
 
 	interface Props {
@@ -177,7 +176,7 @@
 	}}
 />
 <!-- {JSON.stringify({ value, collection })} -->
-<div class="flex flex-col w-full items-start min-h-10 {className}">
+<div class="flex flex-col w-full items-start {className}">
 	<div class="flex flex-row w-full items-center">
 		<Select
 			{disabled}
@@ -198,19 +197,18 @@
 			items={collection}
 			clearable
 			class="text-clip grow min-w-0"
-			inputClass={twMerge('min-h-10', selectInputClass)}
+			inputClass={selectInputClass}
 			placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
 			itemLabelWrapperClasses="flex-1"
-			itemButtonWrapperClasses="flex"
+			itemButtonWrapperClasses="flex items-center"
 		>
 			{#snippet endSnippet({ item, close })}
 				<Button
 					{disabled}
-					color="light"
-					variant="contained"
-					size="xs3"
-					btnClasses="w-8 px-0.5 py-1.5 bg-transparent hover:bg-surface-secondary"
-					wrapperClasses="-mr-2 pl-1"
+					variant="subtle"
+					size="xs2"
+					wrapperClasses="-mr-2 pl-1 -my-2"
+					btnClasses="hover:bg-surface-tertiary"
 					on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
 					startIcon={{ icon: Pen }}
 					iconOnly
diff --git a/frontend/src/lib/components/ResourceTypePicker.svelte b/frontend/src/lib/components/ResourceTypePicker.svelte
index ee8f3f464f..c8a7422eb9 100644
--- a/frontend/src/lib/components/ResourceTypePicker.svelte
+++ b/frontend/src/lib/components/ResourceTypePicker.svelte
@@ -49,7 +49,7 @@
 		<Tooltip light small>Select a resource type to narrow down the object type.</Tooltip>
 
 		<div class="flex flex-row items-center w-full justify-between">
-			<Badge color={!value ? 'gray' : 'blue'}>
+			<Badge selected={!!value}>
 				{value ?? 'None'}
 			</Badge>
 		</div>
@@ -66,9 +66,8 @@
 					{@const isPicked = value === undefined}
 					<Button
 						size="sm"
-						variant="border"
-						color={isPicked ? 'blue' : 'light'}
-						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						variant="default"
+						selected={isPicked}
 						disabled={notPickable}
 						on:click={() => {
 							onClick(undefined)
@@ -82,9 +81,8 @@
 					{@const isPicked = value === r}
 					<Button
 						size="sm"
-						variant="border"
-						color={isPicked ? 'blue' : 'light'}
-						btnClasses={isPicked ? '!border-2' : 'm-[1px]'}
+						variant="default"
+						selected={isPicked}
 						disabled={notPickable}
 						on:click={() => {
 							onClick(r)
@@ -96,7 +94,7 @@
 				{/each}
 
 				{#if filteredResources.length === 0 && search !== ''}
-					<div class="text-tertiary text-sm">No resources found</div>
+					<div class="text-primary text-sm">No resources found</div>
 				{/if}
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/RunButton.svelte b/frontend/src/lib/components/RunButton.svelte
index 5fddded979..58d1dfb314 100644
--- a/frontend/src/lib/components/RunButton.svelte
+++ b/frontend/src/lib/components/RunButton.svelte
@@ -12,7 +12,7 @@
 	<Button
 		loading={isLoading}
 		size="sm"
-		color="dark"
+		variant="accent"
 		btnClasses="!px-2 !py-1"
 		on:click={() => onRun()}
 		shortCut={{ Icon: CornerDownLeft, hide: hideShortcut }}
@@ -22,8 +22,8 @@
 {:else}
 	<Button
 		size="sm"
-		color="red"
-		variant="border"
+		variant="accent"
+		destructive
 		btnClasses="!px-2 !py-1"
 		on:click={() => onCancel()}
 	>
diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index 84193f416e..e5643f5eb4 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -301,7 +301,7 @@
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-28px] left-[180px]"
+		<div class="absolute top-[-28px] left-[220px]"
 			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
 				>Load more <Tooltip2
 					>There are more jobs to load but only the first 1000 were fetched</Tooltip2
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index f9ff176c34..66eaa74552 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -192,7 +192,7 @@
 						{/if}
 
 						<div class="flex items-center gap-2">
-							<span class="text-sm text-tertiary">
+							<span class="text-sm text-primary">
 								{#if runnable}
 									Edited <TimeAgo agoOnlyIfRecent date={runnable.created_at || ''} /> by {runnable.created_by ||
 										'unknown'}
@@ -276,7 +276,7 @@
 			{/key}
 		{/if}
 	{:else}
-		<div class="text-xs text-tertiary">No arguments</div>
+		<div class="text-xs text-primary">No arguments</div>
 	{/if}
 	{#if schedulable}
 		<div class="mt-10"></div>
@@ -284,7 +284,7 @@
 			<div class="flex-row-reverse flex-wrap flex w-full gap-4">
 				<Button
 					{loading}
-					color="dark"
+					variant="accent"
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
 					disabled={!isValid && !jsonView}
 					on:click={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}
diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
index 97138d090c..b96cd2b652 100644
--- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte
+++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
@@ -53,8 +53,7 @@
 						/>
 					</div>
 					<Button
-						variant="border"
-						color="light"
+						variant="default"
 						size="xs"
 						btnClasses="mx-2 "
 						on:click={() => {
diff --git a/frontend/src/lib/components/S3ArrayHelperButton.svelte b/frontend/src/lib/components/S3ArrayHelperButton.svelte
index 9d5fe21690..626b4a310d 100644
--- a/frontend/src/lib/components/S3ArrayHelperButton.svelte
+++ b/frontend/src/lib/components/S3ArrayHelperButton.svelte
@@ -19,10 +19,8 @@
 
 {#if !connecting}
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		size="xs"
-		btnClasses="font-normal text-tertiary"
 		startIcon={{ icon: Plug }}
 		onclick={onClick}
 		wrapperClasses={className}
diff --git a/frontend/src/lib/components/S3FilePickerInner.svelte b/frontend/src/lib/components/S3FilePickerInner.svelte
index 99c107308e..ba72a7580a 100644
--- a/frontend/src/lib/components/S3FilePickerInner.svelte
+++ b/frontend/src/lib/components/S3FilePickerInner.svelte
@@ -13,7 +13,23 @@
 		MoveRight
 	} from 'lucide-svelte'
 	import { workspaceStore } from '$lib/stores'
-	import { CancelablePromise, HelpersService, SettingService, type DatasetStorageTestConnectionData, type DatasetStorageTestConnectionResponse, type DeleteS3FileData, type DeleteS3FileResponse, type ListStoredFilesData, type ListStoredFilesResponse, type LoadFileMetadataData, type LoadFileMetadataResponse, type LoadFilePreviewData, type LoadFilePreviewResponse, type MoveS3FileData, type MoveS3FileResponse } from '$lib/gen'
+	import {
+		CancelablePromise,
+		HelpersService,
+		SettingService,
+		type DatasetStorageTestConnectionData,
+		type DatasetStorageTestConnectionResponse,
+		type DeleteS3FileData,
+		type DeleteS3FileResponse,
+		type ListStoredFilesData,
+		type ListStoredFilesResponse,
+		type LoadFileMetadataData,
+		type LoadFileMetadataResponse,
+		type LoadFilePreviewData,
+		type LoadFilePreviewResponse,
+		type MoveS3FileData,
+		type MoveS3FileResponse
+	} from '$lib/gen'
 	import { base } from '$lib/base'
 	import {
 		displayDate,
@@ -59,10 +75,14 @@
 		replaceUnauthorizedWarning?: Snippet
 		listStoredFilesRequest?: (d: ListStoredFilesData) => CancelablePromise<ListStoredFilesResponse>
 		loadFilePreviewRequest?: (d: LoadFilePreviewData) => CancelablePromise<LoadFilePreviewResponse>
-		loadFileMetadataRequest?: (d: LoadFileMetadataData) => CancelablePromise<LoadFileMetadataResponse>
+		loadFileMetadataRequest?: (
+			d: LoadFileMetadataData
+		) => CancelablePromise<LoadFileMetadataResponse>
 		deleteS3FileRequest?: (d: DeleteS3FileData) => CancelablePromise<DeleteS3FileResponse>
 		moveS3FileRequest?: (d: MoveS3FileData) => CancelablePromise<MoveS3FileResponse>
-		testConnectionRequest?: (d: DatasetStorageTestConnectionData) => CancelablePromise<DatasetStorageTestConnectionResponse>
+		testConnectionRequest?: (
+			d: DatasetStorageTestConnectionData
+		) => CancelablePromise<DatasetStorageTestConnectionResponse>
 	}
 
 	let {
@@ -73,14 +93,14 @@
 		folderOnly = false,
 		regexFilter = undefined,
 		hideS3SpecificDetails = false,
-		rootPath = "",
+		rootPath = '',
 		replaceUnauthorizedWarning,
 		listStoredFilesRequest = HelpersService.listStoredFiles,
 		loadFilePreviewRequest = HelpersService.loadFilePreview,
 		loadFileMetadataRequest = HelpersService.loadFileMetadata,
 		deleteS3FileRequest = HelpersService.deleteS3File,
 		moveS3FileRequest = HelpersService.moveS3File,
-		testConnectionRequest = HelpersService.datasetStorageTestConnection,
+		testConnectionRequest = HelpersService.datasetStorageTestConnection
 	}: Props = $props()
 
 	let rootPathNestingLevel = $derived(1 * (rootPath.split('/').length - 1))
@@ -540,12 +560,7 @@
 						href="{base}/workspace_settings?tab=windmill_lfs">configure it here</a
 					>.
 				</p>
-				<Button
-					variant="border"
-					color="light"
-					on:click={reloadContent}
-					startIcon={{ icon: RotateCw }}
-				/>
+				<Button variant="default" on:click={reloadContent} startIcon={{ icon: RotateCw }} />
 			</div>
 		</Alert>
 	{/if}
@@ -557,9 +572,9 @@
 			<div class="mb-2">
 				<Alert type="info" title="Access to S3 bucket restricted">
 					<p>
-						You don't have access to the S3 bucket resource and your administrator has restricted the
-						access to it. You are not authorized to browse the bucket content. If you think this is
-						incorrect, please contact your workspace administrator.
+						You don't have access to the S3 bucket resource and your administrator has restricted
+						the access to it. You are not authorized to browse the bucket content. If you think this
+						is incorrect, please contact your workspace administrator.
 					</p>
 					<p>
 						More info in <a
@@ -580,7 +595,7 @@
 					</div>
 				{/if}
 				{#if fileListLoading === false && displayedFileKeys.length === 0}
-					<div class="p-4 text-tertiary text-xs text-center italic">
+					<div class="p-4 text-primary text-xs text-center italic">
 						No files in the workspace S3 bucket at that prefix
 					</div>
 				{:else}
@@ -607,37 +622,37 @@
 										{@const nestingLevel = file_info.nestingLevel - 2 * rootPathNestingLevel}
 										<!-- svelte-ignore a11y_click_events_have_key_events -->
 										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										<div
+											onclick={() => selectItem(index)}
+											class={twMerge(
+												'flex flex-row h-full font-semibold text-xs items-center justify-start',
+												selectedFileKey !== undefined && selectedFileKey.s3 === file_info.full_key
+													? 'bg-surface-hover'
+													: ''
+											)}
+										>
 											<div
-												onclick={() => selectItem(index)}
-												class={twMerge(
-													'flex flex-row h-full font-semibold text-xs items-center justify-start',
-													selectedFileKey !== undefined && selectedFileKey.s3 === file_info.full_key
-														? 'bg-surface-hover'
-														: ''
-												)}
+												class={`flex flex-row w-full gap-2 h-full items-center`}
+												style={`margin-left: ${(2 + nestingLevel) * 0.25}rem;`}
 											>
-												<div
-													class={`flex flex-row w-full gap-2 h-full items-center`}
-													style={`margin-left: ${(2 + nestingLevel) * 0.25}rem;`}
-												>
-													{#if file_info.type === 'folder'}
-														{#if file_info.collapsed}<FolderClosed size={16} />{:else}<FolderOpen
-																size={16}
-															/>{/if}
-														<div class="truncate text-ellipsis w-56">
-															{file_info.display_name} ({file_info.count}{count % 1000 === 0 &&
-															lastKeyFolders[file_info.nestingLevel / 2] === file_info.display_name
-																? '+'
-																: ''} item{file_info.count === 1 ? '' : 's'})
-														</div>
-													{:else}
-														<FileIcon size={16} />
-														<div class="truncate text-ellipsis w-56">
-															{file_info.display_name}
-														</div>
-													{/if}
-												</div>
+												{#if file_info.type === 'folder'}
+													{#if file_info.collapsed}<FolderClosed size={16} />{:else}<FolderOpen
+															size={16}
+														/>{/if}
+													<div class="truncate text-ellipsis w-56">
+														{file_info.display_name} ({file_info.count}{count % 1000 === 0 &&
+														lastKeyFolders[file_info.nestingLevel / 2] === file_info.display_name
+															? '+'
+															: ''} item{file_info.count === 1 ? '' : 's'})
+													</div>
+												{:else}
+													<FileIcon size={16} />
+													<div class="truncate text-ellipsis w-56">
+														{file_info.display_name}
+													</div>
+												{/if}
 											</div>
+										</div>
 									{/if}
 								</div>
 							{/snippet}
@@ -658,8 +673,7 @@
 
 							{#if count % maxKeys === 0}
 								<Button
-									variant="border"
-									color="light"
+									variant="default"
 									size="xs2"
 									on:click={() => {
 										page += 1
@@ -687,18 +701,20 @@
 				</div>
 			{:else}
 				<div class="p-4 gap-2">
-					<Section label={((p) => p.startsWith(rootPath) ? p.slice(rootPath.length) : p)(fileMetadata.fileKey)} breakAll>
+					<Section
+						label={((p) => (p.startsWith(rootPath) ? p.slice(rootPath.length) : p))(
+							fileMetadata.fileKey
+						)}
+						breakAll
+					>
 						{#snippet action()}
 							<div class="flex gap-2">
 								{#if filePreview !== undefined}
 									{#if !hideS3SpecificDetails}
 										<Button
 											title="Download file from S3"
-											variant="border"
-											color="light"
-											href={`${base}/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${encodeURIComponent(
-												fileMetadata?.fileKey ?? ''
-											)}${storage ? `&storage=${storage}` : ''}`}
+											variant="default"
+											href={`${base}/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${encodeURIComponent(fileMetadata?.fileKey ?? '')}${storage ? `&storage=${storage}` : ''}`}
 											download={fileMetadata?.fileKey.split('/').pop() ?? 'unnamed_download.file'}
 											startIcon={{ icon: Download }}
 											iconOnly={true}
@@ -707,8 +723,7 @@
 									{#if !readOnlyMode}
 										<Button
 											title="Move file"
-											variant="border"
-											color="light"
+											variant="default"
 											on:click={() => {
 												moveDestKey = fileMetadata?.fileKey ?? ''
 												moveModalOpen = true
@@ -718,8 +733,7 @@
 										/>
 										<Button
 											title="Delete file from S3"
-											variant="border"
-											color="red"
+											variant="default"
 											on:click={() => {
 												deletionModalOpen = true
 											}}
@@ -765,11 +779,11 @@
 							{/await}
 						</div>
 					{:else if filePreviewLoading}
-						<div class="flex h-6 items-center text-tertiary mb-4">
+						<div class="flex h-6 items-center text-primary mb-4">
 							<Loader2 size={12} class="animate-spin mr-1" /> File preview loading
 						</div>
 					{:else if fileMetadata !== undefined && filePreview !== undefined}
-						<div class="flex items-center text-tertiary mb-4">
+						<div class="flex items-center text-primary mb-4">
 							{#if filePreview.contentType === 'Unknown'}
 								Type of file not supported for preview.
 							{:else if filePreview.contentType === 'Csv'}
@@ -824,7 +838,6 @@
 	</div>
 {/if}
 
-
 <ConfirmationModal
 	open={deletionModalOpen}
 	title="Permanently delete file"
diff --git a/frontend/src/lib/components/S3ObjectPicker.svelte b/frontend/src/lib/components/S3ObjectPicker.svelte
index f877681615..6a9d1c9a86 100644
--- a/frontend/src/lib/components/S3ObjectPicker.svelte
+++ b/frontend/src/lib/components/S3ObjectPicker.svelte
@@ -84,10 +84,8 @@
 		/>
 	{/if}
 	<Button
-		variant="border"
-		color="light"
-		size="xs"
-		btnClasses="mt-1"
+		variant="default"
+		unifiedSize="sm"
 		on:click={() => {
 			s3FilePicker?.open?.(value)
 		}}
diff --git a/frontend/src/lib/components/SaveInputsButton.svelte b/frontend/src/lib/components/SaveInputsButton.svelte
index 068f4b30d7..a8e179e586 100644
--- a/frontend/src/lib/components/SaveInputsButton.svelte
+++ b/frontend/src/lib/components/SaveInputsButton.svelte
@@ -49,9 +49,8 @@
 	{disabled}
 	loading={savingInputs}
 	startIcon={{ icon: Save }}
-	variant={small ? 'border' : 'contained'}
-	color="light"
-	size="xs"
+	variant={small ? 'subtle' : 'default'}
+	unifiedSize="md"
 >
 	<span>{small ? 'Save inputs' : 'Save current input'}</span>
 	{#if showTooltip}
diff --git a/frontend/src/lib/components/SavedInputs.svelte b/frontend/src/lib/components/SavedInputs.svelte
index 4946b42984..fd6c565d18 100644
--- a/frontend/src/lib/components/SavedInputs.svelte
+++ b/frontend/src/lib/components/SavedInputs.svelte
@@ -244,9 +244,8 @@
 
 											<Button
 												loading={i.isSaving}
-												color="light"
 												size="xs"
-												variant="border"
+												variant="default"
 												spacingSize="xs2"
 												btnClasses={'group-hover:block hidden -my-2'}
 												on:click={(e) => {
@@ -261,10 +260,9 @@
 												<Edit class="w-4 h-4" />
 											</Button>
 											<Button
-												color="red"
 												size="xs"
 												spacingSize="xs2"
-												variant="border"
+												variant="default"
 												btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden -my-2'}
 												on:click={() => deleteInput(i)}
 											>
@@ -272,13 +270,13 @@
 											</Button>
 										</div>
 									{:else}
-										<span class="text-xs text-tertiary">By {i.created_by}</span>
+										<span class="text-xs text-primary">By {i.created_by}</span>
 									{/if}
 								</div>
 							</button>
 						{/each}
 					{:else}
-						<div class="text-center text-tertiary">No saved Inputs</div>
+						<div class="text-center text-primary">No saved Inputs</div>
 					{/if}
 				</div>
 			</div>
@@ -290,7 +288,7 @@
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
 					{#if loading && (jobs == undefined || jobs?.length == 0)}
-						<div class="text-left text-tertiary text-xs">Loading current runs...</div>
+						<div class="text-left text-primary text-xs">Loading current runs...</div>
 					{:else if jobs?.length > 0}
 						{#each jobs as i (i.id)}
 							<button
@@ -329,7 +327,7 @@
 										{i.created_by}
 									</div>
 									<div
-										class="whitespace-nowrap col-span-3 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+										class="whitespace-nowrap col-span-3 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
 										<TimeAgo noDate date={i.started_at ?? ''} />
 									</div>
@@ -347,12 +345,12 @@
 							</button>
 						{/each}
 						{#if jobs?.length == 5}
-							<div class="text-left text-tertiary text-xs"
+							<div class="text-left text-primary text-xs"
 								>... there may be more runs not displayed here as the limit is 5</div
 							>
 						{/if}
 					{:else}
-						<div class="text-left text-tertiary text-xs">No job currently running</div>
+						<div class="text-left text-primary text-xs">No job currently running</div>
 					{/if}
 				</div>
 
@@ -386,12 +384,12 @@
 										{i.created_by}
 									</div>
 									<div
-										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+										class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
 										{displayDateOnly(new Date(i.created_at))}
 									</div>
 									<div
-										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+										class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
 										<TimeAgo noDate date={i.created_at ?? ''} />
 									</div>
@@ -409,7 +407,7 @@
 							</button>
 						{/each}
 					{:else}
-						<div class="text-center text-tertiary">No previous Runs</div>
+						<div class="text-center text-primary">No previous Runs</div>
 					{/if}
 				</div>
 			</div>
@@ -443,7 +441,7 @@
 								<ObjectViewer json={previewArgs} />
 							</div>
 						{:else}
-							<div class="text-center text-tertiary">
+							<div class="text-center text-primary">
 								Select an Input to preview scripts arguments
 							</div>
 						{/if}
diff --git a/frontend/src/lib/components/SavedInputsPicker.svelte b/frontend/src/lib/components/SavedInputsPicker.svelte
index be887c3ff5..1fbda8f60e 100644
--- a/frontend/src/lib/components/SavedInputsPicker.svelte
+++ b/frontend/src/lib/components/SavedInputsPicker.svelte
@@ -4,7 +4,7 @@
 	import { userStore, workspaceStore } from '$lib/stores.js'
 	import { sendUserToast } from '$lib/utils.js'
 	import { createEventDispatcher, onDestroy, untrack } from 'svelte'
-	import { Edit, Trash2, Save } from 'lucide-svelte'
+	import { Trash2, Save, Pencil } from 'lucide-svelte'
 	import Toggle from './Toggle.svelte'
 	import { Cell } from './table/index'
 	import SaveInputsButton from '$lib/components/SaveInputsButton.svelte'
@@ -307,9 +307,8 @@
 
 										<Button
 											loading={isEditing?.id === item.id && isEditing?.isSaving}
-											color="light"
-											size="xs"
-											variant="border"
+											unifiedSize="sm"
+											variant="subtle"
 											spacingSize="xs2"
 											btnClasses={hover || openStates[item.id] ? 'block -my-2 ' : 'hidden'}
 											on:click={(e) => {
@@ -321,28 +320,25 @@
 													setEditing(item)
 												}
 											}}
-										>
-											<Edit class="w-4 h-4" />
-										</Button>
+											startIcon={{ icon: Pencil }}
+										></Button>
 										<Button
-											color="light"
-											size="xs"
-											spacingSize="xs2"
-											variant="contained"
+											unifiedSize="sm"
+											variant="subtle"
 											btnClasses={twMerge(
 												isEditing?.id === item.id || hover || openStates[item.id]
 													? 'block -my-2'
-													: 'hidden',
-												'bg-transparent hover:text-white hover:bg-red-500 text-red-500'
+													: 'hidden'
 											)}
+											destructive
 											on:click={() => {
 												infiniteList?.deleteItem(item.id)
 											}}
-										>
-											<Trash2 class="w-4 h-4" />
-										</Button>
+											startIcon={{ icon: Trash2 }}
+											iconOnly
+										></Button>
 									{:else}
-										<span class="text-xs text-tertiary px-2 w-28 truncate" title={item.created_by}
+										<span class="text-xs text-primary px-2 w-28 truncate" title={item.created_by}
 											>{item.created_by}</span
 										>
 									{/if}
@@ -352,7 +348,7 @@
 					</Cell>
 				{/snippet}
 				{#snippet empty()}
-					<div class="text-center text-xs text-tertiary">No saved Inputs</div>
+					<div class="text-center text-xs text-primary mt-2">No saved Inputs</div>
 				{/snippet}
 			</InfiniteList>
 		{/if}
diff --git a/frontend/src/lib/components/SavedInputsPickerViewer.svelte b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
index f00314b01e..150e2b9b97 100644
--- a/frontend/src/lib/components/SavedInputsPickerViewer.svelte
+++ b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
@@ -90,11 +90,10 @@
 >
 	<svelte:fragment slot="trigger" let:isOpen>
 		<Button
-			variant="contained"
-			color="light"
-			btnClasses={hover || isOpen ? 'block -my-2 hover:bg-surface bg-transparent' : 'hidden'}
+			variant="subtle"
+			unifiedSize="sm"
+			btnClasses={hover || isOpen ? 'block -my-2 bg-transparent' : 'hidden'}
 			wrapperClasses="p-0"
-			size="xs2"
 			iconOnly
 			nonCaptureEvent
 			startIcon={{ icon: Eye }}
@@ -106,7 +105,7 @@
 			style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
 		>
 			{#if payloadData === 'WINDMILL_TOO_BIG'}
-				<div class="text-center text-tertiary text-xs">
+				<div class="text-center text-primary text-xs">
 					{#if limitPayloadSize}
 						Payload too big to be used
 					{:else}
@@ -127,7 +126,7 @@
 					{#if !objectViewerLoaded && payloadTooBigForPreview}
 						<div class="flex justify-center items-center py-4">
 							<Loader2 size={20} class="animate-spin text-primary" />
-							<span class="ml-2 text-xs text-tertiary">Loading data...</span>
+							<span class="ml-2 text-xs text-primary">Loading data...</span>
 						</div>
 					{/if}
 
@@ -148,8 +147,8 @@
 
 					<div class="absolute top-2 right-2 w-full h-full">
 						<Button
-							variant="contained"
-							size="xs2"
+							variant="subtle"
+							unifiedSize="sm"
 							class="absolute top-0 right-0"
 							iconOnly
 							startIcon={{ icon: CopyIcon }}
diff --git a/frontend/src/lib/components/SavedInputsV2.svelte b/frontend/src/lib/components/SavedInputsV2.svelte
index 0fb4f89e58..6d9e54dba7 100644
--- a/frontend/src/lib/components/SavedInputsV2.svelte
+++ b/frontend/src/lib/components/SavedInputsV2.svelte
@@ -167,9 +167,8 @@
 													historicInputs?.refresh(true)
 												}}
 												endIcon={{ icon: Search }}
-												variant="contained"
 												size="xs2"
-												color="dark">Search</Button
+												variant="accent">Search</Button
 											>
 										</div>
 									</div>
@@ -193,7 +192,7 @@
 						<Button
 							size="xs2"
 							color="light"
-							btnClasses="!text-tertiary"
+							btnClasses="!text-primary"
 							endIcon={{ icon: ExternalLink }}
 							on:click={() => {
 								window.open(`/runs/${runnableId}`, '_blank')
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index 95e436bd27..939b61a5ee 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -341,7 +341,7 @@
 					{/if}
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="flex flex-row items-center {largeGap ? 'pb-4' : ''} "
+						class="flex flex-row items-center {largeGap ? 'pb-4' : 'pb-2'} "
 						onclick={() => {
 							dispatch('click', argName)
 						}}
@@ -456,7 +456,7 @@
 			</ResizeTransitionWrapper>
 		{/each}
 	{:else if !shouldHideNoInputs}
-		<div class="text-secondary text-sm">No inputs</div>
+		<div class="text-secondary text-xs">No inputs</div>
 	{/if}
 </div>
 {#if !noVariablePicker}
@@ -480,9 +480,8 @@
 		{#snippet submission()}
 			<div>
 				<Button
-					variant="border"
-					color="blue"
-					size="sm"
+					variant="default"
+					unifiedSize="md"
 					startIcon={{ icon: Plus }}
 					on:click={() => variableEditor?.initNew?.()}
 				>
diff --git a/frontend/src/lib/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
index 9492cf2cd8..19d1be52b0 100644
--- a/frontend/src/lib/components/SchemaViewer.svelte
+++ b/frontend/src/lib/components/SchemaViewer.svelte
@@ -31,8 +31,8 @@
 
 <div class="w-full">
 	<Tabs selected="arguments">
-		<Tab value="arguments">Arguments</Tab>
-		<Tab value="advanced">Advanced</Tab>
+		<Tab value="arguments" label="Arguments" />
+		<Tab value="advanced" label="Advanced" />
 		{#snippet content()}
 			<div class="overflow-auto pt-2">
 				<TabContent value="arguments">
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index c0957d606e..8e1a1db19d 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -101,6 +101,8 @@
 	import type { ScriptBuilderProps } from './script_builder'
 	import type { DiffDrawerI } from './diff_drawer'
 	import WorkerTagSelect from './WorkerTagSelect.svelte'
+	import { inputSizeClasses } from './text_input/TextInput.svelte'
+	import type { ButtonType } from './common/button/model'
 
 	let {
 		script = $bindable(),
@@ -988,32 +990,50 @@
 			<div class="flex flex-col h-full">
 				<Tabs bind:selected={selectedTab} wrapperClass="flex-none w-full">
 					{#if customUi?.settingsPanel?.disableMetadata !== true}
-						<Tab value="metadata" aiId="script-builder-metadata" aiDescription="Metadata settings">
-							Metadata
-						</Tab>
+						<Tab
+							value="metadata"
+							aiId="script-builder-metadata"
+							aiDescription="Metadata settings"
+							label="Metadata"
+						/>
 					{/if}
 					{#if customUi?.settingsPanel?.disableRuntime !== true}
-						<Tab value="runtime" aiId="script-builder-runtime" aiDescription="Runtime settings">
-							Runtime
-						</Tab>
+						<Tab
+							value="runtime"
+							aiId="script-builder-runtime"
+							aiDescription="Runtime settings"
+							label="Runtime"
+						/>
 					{/if}
 					{#if customUi?.settingsPanel?.disableGeneratedUi !== true}
-						<Tab value="ui" aiId="script-builder-ui" aiDescription="Generated UI settings">
-							Generated UI
-							<Tooltip
-								documentationLink="https://www.windmill.dev/docs/core_concepts/json_schema_and_parsing"
-							>
-								The arguments are synced with the main signature but you may refine the parts that
-								cannot be inferred from the type directly.
-							</Tooltip>
+						<Tab
+							value="ui"
+							aiId="script-builder-ui"
+							aiDescription="Generated UI settings"
+							label="Generated UI"
+						>
+							{#snippet extra()}
+								<Tooltip
+									documentationLink="https://www.windmill.dev/docs/core_concepts/json_schema_and_parsing"
+								>
+									The arguments are synced with the main signature but you may refine the parts that
+									cannot be inferred from the type directly.
+								</Tooltip>
+							{/snippet}
 						</Tab>
 					{/if}
 					{#if customUi?.settingsPanel?.disableTriggers !== true}
-						<Tab value="triggers" aiId="script-builder-triggers" aiDescription="Triggers settings">
-							Triggers
-							<Tooltip documentationLink="https://www.windmill.dev/docs/getting_started/triggers">
-								Configure how this script will be triggered.
-							</Tooltip>
+						<Tab
+							value="triggers"
+							aiId="script-builder-triggers"
+							aiDescription="Triggers settings"
+							label="Triggers"
+						>
+							{#snippet extra()}
+								<Tooltip documentationLink="https://www.windmill.dev/docs/getting_started/triggers">
+									Configure how this script will be triggered.
+								</Tooltip>
+							{/snippet}
 						</Tab>
 					{/if}
 
@@ -1034,7 +1054,7 @@
 												</div>
 											{/if}
 										{/snippet}
-										<div class="flex flex-col gap-4">
+										<div class="flex flex-col gap-6">
 											<Label label="Summary">
 												<MetadataGen
 													aiId="create-script-summary-input"
@@ -1100,7 +1120,7 @@
 												<DefaultScripts />
 											{/snippet}
 											{#if lockedLanguage}
-												<div class="text-sm text-tertiary italic mb-2">
+												<div class="text-sm text-primary italic mb-2">
 													As a forked script, the language '{script.language}' cannot be modified.
 												</div>
 											{/if}
@@ -1116,20 +1136,21 @@
 														<Button
 															aiId={`create-script-language-button-${lang}`}
 															aiDescription={`Choose ${lang} as the language of the script`}
-															size="sm"
-															variant="border"
-															color={isPicked ? 'blue' : 'light'}
-															btnClasses={isPicked
-																? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
-																: 'm-[1px]'}
+															unifiedSize="lg"
+															variant="default"
+															selected={isPicked}
+															btnClasses={isPicked ? '' : 'm-[1px]'}
 															on:click={() => onScriptLanguageTrigger(lang)}
 															disabled={lockedLanguage ||
 																(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
+															startIcon={{
+																icon: LanguageIcon,
+																props: { lang }
+															} as ButtonType.Icon}
 														>
-															<LanguageIcon {lang} />
-															<span class="ml-2 py-2 truncate">{label}</span>
+															<span class="truncate">{label}</span>
 															{#if lang === 'ruby'}
-																<span class="text-tertiary !text-xs"> BETA </span>
+																<span class="text-primary !text-xs"> BETA </span>
 															{/if}
 														</Button>
 														{#snippet text()}
@@ -1151,7 +1172,6 @@
 												</Tooltip>
 											{/snippet}
 											<ToggleButtonGroup
-												class="h-10"
 												selected={script.kind}
 												on:selected={({ detail }) => {
 													template = 'script'
@@ -1278,7 +1298,7 @@
 													right: 'Cache the results for each possible inputs'
 												}}
 											/>
-											<span class="text-secondary text-sm leading-none">
+											<span class="text-xs font-semibold text-emphasis leading-none">
 												How long to the keep cache valid
 											</span>
 											{#if script.cache_ttl}
@@ -1311,7 +1331,9 @@
 													right: 'Add a custom timeout for this script'
 												}}
 											/>
-											<span class="text-secondary text-sm leading-none"> Timeout duration </span>
+											<span class="text-xs font-semibold text-emphasis leading-none">
+												Timeout duration
+											</span>
 											{#if script.timeout}
 												<SecondsInput bind:seconds={script.timeout} />
 											{:else}
@@ -1539,8 +1561,7 @@
 												</Alert>
 											{/if}
 											<div class="w-full mt-2">
-												<span class="text-tertiary text-xs pb-2"
-													>Format is: `{'<KEY>=<VALUE>'}`</span
+												<span class="text-primary text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span
 												>
 												{#if Array.isArray(script.envs ?? [])}
 													{#each script.envs ?? [] as _v, i}
@@ -1569,8 +1590,7 @@
 											</div>
 											<div class="flex mt-2">
 												<Button
-													variant="border"
-													color="light"
+													variant="default"
 													size="xs"
 													on:click={() => {
 														if (script.envs == undefined || !Array.isArray(script.envs)) {
@@ -1630,7 +1650,7 @@
 
 	<div class="flex flex-col h-screen">
 		<div class="flex h-12 items-center px-4">
-			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center">
+			<div class="flex gap-2 lg:gap-2 w-full items-center">
 				<div class="flex flex-row gap-2 grow max-w-md">
 					<div class="center-center">
 						<button
@@ -1639,7 +1659,7 @@
 								metadataOpen = true
 							}}
 						>
-							<LanguageIcon lang={script.language} height={20} />
+							<LanguageIcon lang={script.language} size={24} />
 						</button>
 					</div>
 					<Summary
@@ -1648,6 +1668,9 @@
 					/>
 				</div>
 
+				<!-- Separator -->
+				<div class="flex-1"></div>
+
 				<div class="gap-4 flex">
 					{#if triggersState.triggers?.some((t) => t.type === 'schedule')}
 						{@const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary)}
@@ -1671,29 +1694,27 @@
 						</Button>
 					{/if}
 					{#if customUi?.topBar?.path != false}
-						<div class="flex justify-start w-full border rounded-md overflow-hidden">
-							<div>
-								{#if customUi?.topBar?.editablePath != false}
-									<button
-										onclick={async () => {
-											metadataOpen = true
-										}}
+						<div class="flex justify-start w-full">
+							{#if customUi?.topBar?.editablePath != false}
+								<button
+									onclick={async () => {
+										metadataOpen = true
+									}}
+								>
+									<Badge
+										color="gray"
+										class="center-center !bg-surface-secondary !text-primary {inputSizeClasses.md}  !w-[70px] rounded-r-none hover:!bg-surface-hover transition-all border border-r-0"
 									>
-										<Badge
-											color="gray"
-											class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
-										>
-											<Pen size={12} class="mr-2" /> Path
-										</Badge>
-									</button>
-								{/if}
-							</div>
+										<Pen size={12} class="mr-2 shrink-0" /> Path
+									</Badge>
+								</button>
+							{/if}
 							<input
 								type="text"
 								readonly
 								value={script.path}
 								size={script.path?.length || 50}
-								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
+								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full {inputSizeClasses.md} !my-0 !py-0 !rounded-l-none border border-l-0 !shadow-none"
 								onfocus={({ currentTarget }) => {
 									currentTarget.select()
 								}}
@@ -1706,57 +1727,54 @@
 					<Awareness />
 				{/if}
 
-				<div class="flex flex-row gap-x-1 lg:gap-x-2">
-					{#if customUi?.topBar?.tagEdit != false}
-						{#if $workerTags}
-							{#if $workerTags?.length ?? 0 > 0}
-								<div class="max-w-[200px] pr-8">
-									<WorkerTagSelect
-										inputClass="text-sm text-secondary !h-8 !placeholder-secondary"
-										nullTag={script.language}
-										placeholder={customUi?.tagSelectPlaceholder}
-										bind:tag={script.tag}
-									/>
-								</div>
-							{/if}
+				<!-- Separator -->
+				<div class="flex-1"></div>
+
+				{#if customUi?.topBar?.tagEdit != false}
+					{#if $workerTags}
+						{#if $workerTags?.length ?? 0 > 0}
+							<div class="max-w-[200px]">
+								<WorkerTagSelect
+									nullTag={script.language}
+									placeholder={customUi?.tagSelectPlaceholder}
+									bind:tag={script.tag}
+									alwaysDisplayRefresh
+								/>
+							</div>
 						{/if}
 					{/if}
-					{#if customUi?.topBar?.settings != false}
-						<Button
-							aiId="script-builder-settings"
-							aiDescription="Script builder settings to configure metadata, runtime, triggers, and generated UI."
-							color="light"
-							variant="border"
-							size="xs"
-							on:click={() => {
-								metadataOpen = true
-							}}
-							startIcon={{ icon: Settings }}
-						>
-							<span class="hidden lg:flex"> Settings </span>
-						</Button>
-					{/if}
+				{/if}
+				{#if customUi?.topBar?.settings != false}
 					<Button
-						loading={loadingDraft}
-						size="xs"
-						startIcon={{ icon: Save }}
-						on:click={() => saveDraft()}
-						disabled={initialPath != '' && !savedScript}
-						shortCut={{
-							key: 'S'
-						}}
+						aiId="script-builder-settings"
+						aiDescription="Script builder settings to configure metadata, runtime, triggers, and generated UI."
+						variant="default"
+						unifiedSize="md"
+						on:click={() => (metadataOpen = true)}
+						startIcon={{ icon: Settings }}
 					>
-						<span class="hidden lg:flex"> Draft </span>
+						<span class="hidden lg:flex"> Settings </span>
 					</Button>
+				{/if}
+				<Button
+					loading={loadingDraft}
+					unifiedSize="md"
+					variant="accent"
+					startIcon={{ icon: Save }}
+					on:click={() => saveDraft()}
+					disabled={initialPath != '' && !savedScript}
+					shortCut={{ key: 'S' }}
+				>
+					<span class="hidden lg:flex"> Draft </span>
+				</Button>
 
-					<DeployButton
-						loading={!fullyLoaded}
-						{loadingSave}
-						newFlow={false}
-						dropdownItems={computeDropdownItems(initialPath, savedScript, diffDrawer)}
-						on:save={({ detail }) => handleEditScript(false, detail)}
-					/>
-				</div>
+				<DeployButton
+					loading={!fullyLoaded}
+					{loadingSave}
+					newFlow={false}
+					dropdownItems={computeDropdownItems(initialPath, savedScript, diffDrawer)}
+					on:save={({ detail }) => handleEditScript(false, detail)}
+				/>
 			</div>
 		</div>
 
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index d82b859fef..fdfbec6daa 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -164,9 +164,12 @@
 					if (
 						v !== undefined &&
 						(v.delegate_to_git_repo_details === null ||
-							v.delegate_to_git_repo_details.resource !== ansibleAlternativeExecutionMode?.resource ||
-							v.delegate_to_git_repo_details.playbook !== ansibleAlternativeExecutionMode?.playbook ||
-							v.delegate_to_git_repo_details.inventories_location !== ansibleAlternativeExecutionMode?.inventories_location ||
+							v.delegate_to_git_repo_details.resource !==
+								ansibleAlternativeExecutionMode?.resource ||
+							v.delegate_to_git_repo_details.playbook !==
+								ansibleAlternativeExecutionMode?.playbook ||
+							v.delegate_to_git_repo_details.inventories_location !==
+								ansibleAlternativeExecutionMode?.inventories_location ||
 							v.delegate_to_git_repo_details.commit !== ansibleAlternativeExecutionMode?.commit ||
 							v.git_ssh_identity !== ansibleGitSshIdentity)
 					) {
@@ -584,8 +587,8 @@
 				<Button
 					target="_blank"
 					href="https://www.windmill.dev/docs/cli_local_dev/vscode-extension"
-					color="light"
-					size="xs"
+					variant="subtle"
+					unifiedSize="md"
 					btnClasses="hidden lg:flex"
 					startIcon={{
 						icon: Github
@@ -617,7 +620,6 @@
 								gitRepoResourcePath={ansibleAlternativeExecutionMode?.resource || ''}
 								gitSshIdentity={ansibleGitSshIdentity}
 								bind:commitHashInput={commitHashForGitRepo}
-
 							/>
 						</div>
 					</Pane>
@@ -632,10 +634,10 @@
 				{#if showTabs}
 					<div transition:slide={{ duration: 200 }}>
 						<Tabs bind:selected={selectedTab}>
-							<Tab value="main">Main</Tab>
+							<Tab value="main" label="Main" />
 							{#if hasPreprocessor}
 								<div transition:slide={{ duration: 200, axis: 'x' }}>
-									<Tab value="preprocessor">Preprocessor</Tab>
+									<Tab value="preprocessor" label="Preprocessor" />
 								</div>
 							{/if}
 						</Tabs>
@@ -666,42 +668,15 @@
 							/>
 							Cancel
 						</Button>
-					{:else if customUi?.previewPanel?.disableTriggerButton !== true}
-						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
-							<Button
-								color="dark"
-								on:click={() => {
-									runTest()
-								}}
-								btnClasses="w-full rounded-r-none"
-								size="xs"
-								startIcon={{
-									icon: Play,
-									classes: 'animate-none'
-								}}
-								shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
-							>
-								{#if testIsLoading}
-									Running
-								{:else}
-									Test
-								{/if}
-							</Button>
-							<CaptureButton on:openTriggers />
-						</div>
 					{:else}
+						{@const disableTriggerButton = customUi?.previewPanel?.disableTriggerButton === true}
 						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
 							<Button
-								color="dark"
-								on:click={() => {
-									runTest()
-								}}
-								btnClasses="w-full"
+								on:click={() => runTest()}
+								btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
 								size="xs"
-								startIcon={{
-									icon: Play,
-									classes: 'animate-none'
-								}}
+								variant="accent-secondary"
+								startIcon={{ icon: Play, classes: 'animate-none' }}
 								shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
 							>
 								{#if testIsLoading}
@@ -710,6 +685,9 @@
 									Test
 								{/if}
 							</Button>
+							{#if !disableTriggerButton}
+								<CaptureButton on:openTriggers />
+							{/if}
 						</div>
 					{/if}
 				</div>
@@ -789,8 +767,7 @@
 			{/if}
 			{#if lang === 'ansible' && hasDelegateToGitRepo}
 				<Button
-					color="light"
-					variant="border"
+					variant="default"
 					size="xs"
 					on:click={() => (gitRepoResourcePickerOpen = true)}
 					startIcon={{ icon: GitBranch }}
@@ -828,7 +805,7 @@
 						customHiddenIcon={{
 							icon: WandSparkles
 						}}
-						btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 bg-surface"
+						btnClasses="!text-ai border border-gray-200 dark:border-gray-600 bg-surface"
 						on:click={() => {
 							if (!aiChatManager.open) {
 								aiChatManager.changeMode(AIMode.SCRIPT)
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 7cb640ac9e..a10f1c30fe 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -99,7 +99,7 @@
 	</DrawerContent>
 </Drawer>
 
-<div class="flex flex-row items-center gap-4 w-full mt-2">
+<div class="flex flex-row items-center gap-1 w-full">
 	{#if options.length > 1}
 		<div>
 			<ToggleButtonGroup
@@ -137,9 +137,8 @@
 
 	{#if allowRefresh}
 		<Button
-			variant="border"
-			color="light"
-			wrapperClasses="self-stretch"
+			variant="subtle"
+			unifiedSize="md"
 			on:click={loadItems}
 			startIcon={{ icon: RefreshCw }}
 			iconOnly
@@ -148,22 +147,20 @@
 
 	{#if scriptPath !== undefined && scriptPath !== ''}
 		{#if itemKind == 'flow'}
-			<div class="flex gap-2">
+			<div class="flex gap-1">
 				{#if allowEdit}
 					<Button
 						endIcon={{ icon: ExternalLink }}
 						target="_blank"
-						color="light"
+						variant="default"
 						size="xs"
-						variant="border"
 						href="{base}/flows/edit/{scriptPath}">Edit</Button
 					>
 				{/if}
 				{#if allowView}
 					<Button
-						color="light"
+						variant="default"
 						size="xs"
-						variant="border"
 						on:click={async () => {
 							drawerFlowViewer?.openDrawer()
 						}}
@@ -178,19 +175,17 @@
 					<Button
 						startIcon={{ icon: Pen }}
 						target="_blank"
-						color="light"
+						variant="default"
 						size="xs"
 						href="{base}/apps/edit/{scriptPath}"
-						variant="border"
 					>
 						Edit
 					</Button>
 				{/if}
 				{#if allowView}
 					<Button
-						color="light"
+						variant="default"
 						size="xs"
-						variant="border"
 						target="_blank"
 						startIcon={{ icon: Code }}
 						href="{base}/apps/get/{scriptPath}"
@@ -205,19 +200,17 @@
 					<Button
 						startIcon={{ icon: Pen }}
 						target="_blank"
-						color="light"
+						variant="default"
 						size="xs"
 						href="{base}/scripts/edit/{scriptPath}"
-						variant="border"
 					>
 						Edit
 					</Button>
 				{/if}
 				{#if allowView}
 					<Button
-						color="light"
+						variant="default"
 						size="xs"
-						variant="border"
 						startIcon={{ icon: Code }}
 						on:click={async () => {
 							const { language, content } = await getScriptByPath(scriptPath ?? '')
diff --git a/frontend/src/lib/components/ScriptVersionHistory.svelte b/frontend/src/lib/components/ScriptVersionHistory.svelte
index 13887e4eeb..4d053fc433 100644
--- a/frontend/src/lib/components/ScriptVersionHistory.svelte
+++ b/frontend/src/lib/components/ScriptVersionHistory.svelte
@@ -115,7 +115,7 @@
 						{/each}
 					</div>
 				{:else}
-					<div class="text-sm text-tertiary">No items</div>
+					<div class="text-sm text-primary">No items</div>
 				{/if}
 			{:else}
 				<Skeleton layout={[[40], [40], [40], [40], [40]]} />
@@ -127,7 +127,7 @@
 			{#if selectedVersion}
 				{#key selectedVersion}
 					<div class="flex flex-col min-h-full">
-						<span class="flex flex-row text-sm p-2 text-tertiary">
+						<span class="flex flex-row text-sm p-2 text-primary">
 							{#if deploymentMsgUpdateMode}
 								<div class="flex w-full">
 									<input
@@ -201,8 +201,8 @@
 										}}
 									>
 										{#snippet children({ item })}
-											<ToggleButton light small value="code" label="Code" icon={Code} {item} />
-											<ToggleButton light small value="diff" label="Diff" icon={Diff} {item} />
+											<ToggleButton small value="code" label="Code" icon={Code} {item} />
+											<ToggleButton small value="diff" label="Diff" icon={Diff} {item} />
 										{/snippet}
 									</ToggleButtonGroup>
 								</div>
@@ -235,7 +235,7 @@
 					</div>
 				{/key}
 			{:else}
-				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
+				<div class="text-sm p-2 text-primary">Select a deployment version to see its details</div>
 			{/if}
 		</div>
 	</Pane>
diff --git a/frontend/src/lib/components/Section.svelte b/frontend/src/lib/components/Section.svelte
index a8c78b9aec..2735a77f04 100644
--- a/frontend/src/lib/components/Section.svelte
+++ b/frontend/src/lib/components/Section.svelte
@@ -51,9 +51,9 @@
 		<div class="flex flex-row justify-between items-center mb-2">
 			<h2
 				class={twMerge(
-					'font-semibold flex flex-row items-center gap-1',
+					'text-emphasis flex flex-row items-center gap-1',
 					breakAll ? 'break-all' : '',
-					small ? 'text-sm' : 'text-base',
+					small ? 'text-xs font-semibold' : 'text-sm font-semibold',
 					headerClass
 				)}
 			>
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index 279ae22061..1de3754b72 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -576,7 +576,7 @@
 				{@const maxTsN = new Date(maxTs).getTime()}
 				{@const diff = maxTsN - minTsN}
 				{#if searchTerm === ''}
-					<div class="flex w-full text-2xs text-tertiary pb-6">
+					<div class="flex w-full text-2xs text-primary pb-6">
 						<div style="width: 60px;"></div>
 
 						<div class="flex justify-between w-full"
@@ -653,7 +653,7 @@
 											{#if loadingLogCounts}
 												<Loader2 size={15} class="animate-spin" />
 											{:else if countsPerHost}
-												<div class="text-tertiary text-xs">
+												<div class="text-primary text-xs">
 													{countsPerHost[hostKey]?.doc_count ?? 0} matches
 												</div>
 											{:else}
@@ -682,7 +682,7 @@
 					</div>
 				{/each}
 				{#if !loadingLogCounts && sumOtherDocCount != 0}
-					<div class="text-tertiary italic text-sm">
+					<div class="text-primary italic text-sm">
 						Note: {sumOtherDocCount} additional matches weren't grouped into any of the above hosts.
 					</div>
 				{/if}
@@ -693,14 +693,14 @@
 		<div class="relative h-full flex flex-col gap-1 pb-2">
 			{#if selected}
 				{#if !loadingLogs && logs == undefined}
-					<div class="w-full bg-surface-primary-inverse text-tertiary text-xs text-center">
+					<div class="w-full bg-surface-primary-inverse text-primary text-xs text-center">
 						1 min delay: logs are compacted before being available
 					</div>
 				{/if}
 				<div class="grow overflow-auto" id="logviewer">
 					{#if loadingLogs}
 						<div class="flex w-full justify-center items-center h-48">
-							<div class="text-tertiary text-center">
+							<div class="text-primary text-center">
 								<Loader2 size={34} class="animate-spin" />
 							</div>
 						</div>
@@ -720,7 +720,7 @@
 								/>
 							{/each}
 							{#if logs.hits.length === 0}
-								<div class="text-center py-20 text-bold text-xl text-tertiary"> No logs </div>
+								<div class="text-center py-20 text-bold text-xl text-primary"> No logs </div>
 							{/if}
 							{#if logs.hits.length === 1000}
 								<div class="pl-6 py-6 text-sm text-secondary">
@@ -789,7 +789,7 @@
 				</div>
 				{#if searchTerm == ''}
 					<div class="flex w-full items-center gap-4">
-						<div class="text-tertiary px-1 text-2xs">Last 5 log files up to:</div>
+						<div class="text-primary px-1 text-2xs">Last 5 log files up to:</div>
 						<div class="flex grow text-xs justify-center px-2 items-center gap-2">
 							{#if upTo}
 								<button
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index 6cc6cdb502..e5ad54f88b 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -13,6 +13,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import Select from './select/Select.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
+	import { Trash } from 'lucide-svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -109,14 +110,14 @@
 
 <Drawer bind:this={drawer}>
 	<DrawerContent title="Share {path}" on:close={drawer?.closeDrawer}>
-		<div class="flex flex-col gap-6">
-			<h1>{path}</h1>
-			<h2
+		<div class="flex flex-col gap-2">
+			<h1 class="text-sm font-semibold text-emphasis">{path}</h1>
+			<span class="text-xs font-semibold text-emphasis"
 				>Extra Permissions ({acls?.length ?? 0}) &nbsp; <Tooltip
 					>Items already have default permissions. If belonging to an user or group, that group or
 					user owns it and can write to it as well as modify its permisions and move it. Folders
 					have read/write that apply to the whole folder and are additive to the items permissions.</Tooltip
-				></h2
+				></span
 			>
 			{#if !own}
 				<Alert type="warning" title="Not owner"
@@ -129,8 +130,8 @@
 						<div>
 							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
 								{#snippet children({ item })}
-									<ToggleButton value="user" small label="User" {item} />
-									<ToggleButton value="group" small label="Group" {item} />
+									<ToggleButton value="user" label="User" {item} />
+									<ToggleButton value="group" label="Group" {item} />
 								{/snippet}
 							</ToggleButtonGroup>
 						</div>
@@ -140,65 +141,70 @@
 									(ownerKind === 'user' ? usernames : groups).map((x) => x.toString())
 								)}
 								bind:value={owner}
+								class="grow min-w-48"
 							/>
 						{/key}
-						<Button size="sm" disabled={!newOwner} on:click={() => addAcl(newOwner, write)}
-							>Add permission</Button
+						<Button
+							size="lg"
+							variant="accent"
+							disabled={!newOwner}
+							on:click={() => addAcl(newOwner, write)}>Add permission</Button
 						>
 					</div>
 				{/if}
-				<TableCustom>
-					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
-						<th>owner</th>
-						<th></th>
-						<th></th>
-					</tr>
-					{#snippet body()}
-						<tbody>
-							{#each acls as [owner, write]}
-								<tr>
-									<td>{owner}</td>
-									<td
-										>{#if own}
-											<div>
-												<ToggleButtonGroup
-													selected={write ? 'writer' : 'viewer'}
-													on:selected={async (e) => {
-														const role = e.detail
-														if (role == 'writer') {
-															await addAcl(owner, true)
-														} else {
-															await addAcl(owner, false)
-														}
-														loadAcls()
-													}}
-												>
-													{#snippet children({ item })}
-														<ToggleButton value="viewer" small label="Viewer" {item} />
-														<ToggleButton value="writer" small label="Writer" {item} />
-													{/snippet}
-												</ToggleButtonGroup>
-											</div>
-										{:else}{write}{/if}</td
-									>
-									<td>
-										{#if own}
-											<Button
-												variant="border"
-												color="red"
-												size="xs"
-												on:click={() => deleteAcl(owner)}
-											>
-												Delete
-											</Button>
-										{/if}
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					{/snippet}
-				</TableCustom>
+				{#if acls?.length > 0}
+					<TableCustom>
+						<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+						<tr slot="header-row">
+							<th>owner</th>
+							<th></th>
+							<th></th>
+						</tr>
+						{#snippet body()}
+							<tbody>
+								{#each acls as [owner, write]}
+									<tr>
+										<td>{owner}</td>
+										<td
+											>{#if own}
+												<div>
+													<ToggleButtonGroup
+														selected={write ? 'writer' : 'viewer'}
+														on:selected={async (e) => {
+															const role = e.detail
+															if (role == 'writer') {
+																await addAcl(owner, true)
+															} else {
+																await addAcl(owner, false)
+															}
+															loadAcls()
+														}}
+													>
+														{#snippet children({ item })}
+															<ToggleButton value="viewer" small label="Viewer" {item} />
+															<ToggleButton value="writer" small label="Writer" {item} />
+														{/snippet}
+													</ToggleButtonGroup>
+												</div>
+											{:else}{write}{/if}</td
+										>
+										<td>
+											{#if own}
+												<Button
+													variant="default"
+													destructive
+													size="xs"
+													on:click={() => deleteAcl(owner)}
+													startIcon={{ icon: Trash }}
+												/>
+											{/if}
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						{/snippet}
+					</TableCustom>
+				{/if}
 			</div>
 		</div>
 	</DrawerContent>
diff --git a/frontend/src/lib/components/SharedBadge.svelte b/frontend/src/lib/components/SharedBadge.svelte
index b3e70d494f..61cf489c48 100644
--- a/frontend/src/lib/components/SharedBadge.svelte
+++ b/frontend/src/lib/components/SharedBadge.svelte
@@ -63,12 +63,10 @@
 </script>
 
 {#if kind === 'read' || kind === 'write'}
-	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
-		<Popover notClickable>
-			<Users size={12} />
-			{#snippet text()}
-				<span>{kind == 'read' ? 'Read & Run only' : 'Read & Write'} {reason}</span>
-			{/snippet}
-		</Popover>
-	</Badge>
+	<Popover notClickable>
+		<Badge capitalize color="blue" icon={{ icon: Users, position: 'right' }}></Badge>
+		{#snippet text()}
+			<span>{kind == 'read' ? 'Read & Run only' : 'Read & Write'} {reason}</span>
+		{/snippet}
+	</Popover>
 {/if}
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 00c60b6dcf..cb888eaca6 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -642,7 +642,7 @@
 
 <style lang="postcss">
 	.editor {
-		@apply rounded-lg p-0;
+		@apply rounded-md p-0;
 	}
 
 	.small-editor {
diff --git a/frontend/src/lib/components/SqlRepl.svelte b/frontend/src/lib/components/SqlRepl.svelte
index 683b35cb1c..a5b50c2b0b 100644
--- a/frontend/src/lib/components/SqlRepl.svelte
+++ b/frontend/src/lib/components/SqlRepl.svelte
@@ -174,8 +174,8 @@
 		{/await}
 		<Button
 			wrapperClasses="absolute z-10 bottom-2 right-6"
-			color={isRunning ? 'red' : undefined}
-			variant="border"
+			variant="accent"
+			destructive={isRunning}
 			shortCut={{ Icon: CornerDownLeft }}
 			on:click={() => run()}
 		>
diff --git a/frontend/src/lib/components/Star.svelte b/frontend/src/lib/components/Star.svelte
index 23dac66a9b..b4ac4c61ab 100644
--- a/frontend/src/lib/components/Star.svelte
+++ b/frontend/src/lib/components/Star.svelte
@@ -42,14 +42,14 @@
 >
 	{#if starred}
 		{#if buttonHover}
-			<StarOff size={18} fill="currentcolor" />
+			<StarOff size={16} fill="currentcolor" />
 		{:else}
-			<Star size={18} fill="currentcolor" />
+			<Star size={16} fill="currentcolor" />
 		{/if}
 	{:else}
 		<Star
 			class={!buttonHover ? 'opacity-60' : ''}
-			size={18}
+			size={16}
 			fill={buttonHover ? 'currentcolor' : 'none'}
 		/>
 	{/if}
diff --git a/frontend/src/lib/components/Summary.svelte b/frontend/src/lib/components/Summary.svelte
index 208ed0be4f..42d0b48ba5 100644
--- a/frontend/src/lib/components/Summary.svelte
+++ b/frontend/src/lib/components/Summary.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Pen } from 'lucide-svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	export let value: string
 	export let disabled = false
@@ -10,48 +11,20 @@
 </script>
 
 <div class="flex flex-row center-center gap-1 min-w-32 lg:min-w-64 w-full max-w-md">
-	<div class="relative w-full">
-		<input
-			title="Rename"
-			type="text"
-			placeholder="Untitled"
-			class="windmillapp app-title text-sm w-full font-semibold"
+	<div class="relative w-full flex">
+		<TextInput
+			inputProps={{
+				title: 'Rename',
+				type: 'text',
+				placeholder: 'Untitled',
+				disabled,
+				onkeydown: blur
+			}}
+			class="w-full font-semibold"
 			bind:value
-			{disabled}
-			on:keydown={blur}
 		/>
 		{#if !disabled}
 			<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
 		{/if}
 	</div>
 </div>
-
-<style lang="postcss" global>
-	.app-title {
-		@apply !block !text-sm !w-full !p-1 !px-2 !rounded !border-0 !font-semibold;
-	}
-
-	.app-title:hover {
-		@apply !ring-frost-100 !ring-offset-0 !ring-1;
-	}
-
-	.app-title:focus {
-		@apply !ring-gray-300 !ring-offset-0 !ring-1;
-		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-	}
-
-	.dark .app-title {
-		@apply !text-secondary !border-gray-600;
-	}
-
-	.dark .app-title:focus {
-		@apply !ring-frost-500;
-	}
-
-	.dark .app-title:hover {
-		@apply !ring-frost-700;
-	}
-	.app-title:focus + .pen-icon {
-		@apply !hidden;
-	}
-</style>
diff --git a/frontend/src/lib/components/SupabaseConnect.svelte b/frontend/src/lib/components/SupabaseConnect.svelte
index 2d9aa03824..d16960ffbc 100644
--- a/frontend/src/lib/components/SupabaseConnect.svelte
+++ b/frontend/src/lib/components/SupabaseConnect.svelte
@@ -106,11 +106,8 @@
 		{#if step === 'init' || selectedDatabase == undefined}
 			<h2
 				>Connect an existing database <div class="inline-block ml-2"
-					><Button
-						variant="border"
-						color="light"
-						wrapperClasses="self-stretch"
-						on:click={listDatabases}><RotateCwIcon size={12} /></Button
+					><Button variant="default" wrapperClasses="self-stretch" on:click={listDatabases}
+						><RotateCwIcon size={12} /></Button
 					></div
 				>
 			</h2>
@@ -178,9 +175,9 @@
 		{#snippet actions()}
 			<div class="flex gap-1">
 				{#if step == 'resource' && selectedDatabase != undefined}
-					<Button variant="border" on:click={() => (step = 'init')}>Back</Button>
+					<Button variant="default" on:click={() => (step = 'init')}>Back</Button>
 
-					<Button {disabled} on:click={save}>Save</Button>
+					<Button {disabled} on:click={save} variant="accent">Save</Button>
 				{/if}
 			</div>
 		{/snippet}
diff --git a/frontend/src/lib/components/SuperadminSettingsInner.svelte b/frontend/src/lib/components/SuperadminSettingsInner.svelte
index e032a21a7a..ab4707c9ec 100644
--- a/frontend/src/lib/components/SuperadminSettingsInner.svelte
+++ b/frontend/src/lib/components/SuperadminSettingsInner.svelte
@@ -110,7 +110,7 @@
 <div class="flex flex-col h-full w-full">
 	<div>
 		<div class="flex justify-between">
-			<div class="text-xs pt-1 text-tertiary flex flex-col">
+			<div class="text-xs pt-1 text-primary flex flex-col">
 				<div>Windmill <Version /></div>
 			</div>
 			<div><Uptodate /></div></div
@@ -118,8 +118,7 @@
 	</div>
 	<div class="flex flex-row-reverse">
 		<Button
-			variant="border"
-			color="dark"
+			variant="default"
 			target="_blank"
 			href="{base}/?workspace=admins"
 			endIcon={{ icon: ExternalLink }}
@@ -129,17 +128,20 @@
 	</div>
 	<div class="pt-4 h-full">
 		<Tabs bind:selected={tab}>
-			<Tab value="users" aiId="instance-settings-users" aiDescription="Instance users settings"
-				>Users</Tab
-			>
+			<Tab
+				value="users"
+				aiId="instance-settings-users"
+				aiDescription="Instance users settings"
+				label="Users"
+			/>
+
 			{#each settingsKeys as category}
 				<Tab
 					value={category}
 					aiId={`instance-settings-${category}`}
 					aiDescription={`Instance ${category} settings`}
-				>
-					{category}
-				</Tab>
+					label={category}
+				/>
 			{/each}
 			{#snippet content()}
 				<div class="pt-4"></div>
@@ -161,7 +163,7 @@
 								<Button
 									btnClasses="w-auto"
 									size="sm"
-									color="dark"
+									variant="accent"
 									on:click={() => {
 										automateUsernameModalOpen = true
 									}}
@@ -185,12 +187,12 @@
 							</div>
 						{/if}
 
-						<div class="py-2 mb-4">
+						<div class="py-2 mb-6">
 							<InviteGlobalUser on:new={() => listUsers(activeOnly)} />
 						</div>
 
 						<div class="flex flex-row justify-between">
-							<h3>All instance users</h3>
+							<h3 class="text-sm font-semibold text-emphasis">All instance users</h3>
 							<Toggle
 								bind:checked={activeOnly}
 								options={{
@@ -378,7 +380,7 @@
 {#if tab != 'users'}
 	<div class="absolute bottom-2 w-[95%]">
 		<Button
-			color="dark"
+			variant="accent"
 			on:click={() => {
 				instanceSettings?.saveSettings()
 			}}
diff --git a/frontend/src/lib/components/TableCustom.svelte b/frontend/src/lib/components/TableCustom.svelte
index 7b0416b474..e40a2c9706 100644
--- a/frontend/src/lib/components/TableCustom.svelte
+++ b/frontend/src/lib/components/TableCustom.svelte
@@ -22,7 +22,7 @@
 		</table>
 	</div>
 	{#if paginated}
-		<div class="sticky flex flex-row-reverse text-tertiary mb-6">
+		<div class="sticky flex flex-row-reverse text-primary mb-6">
 			<button
 				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
 				on:click={() => dispatch('next')}
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 31ec02b658..432f206274 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -380,7 +380,8 @@
 	export let extraLib: string = ''
 	export let autoHeight = true
 	export let fixedOverflowWidgets = true
-	export let fontSize = 16
+	export let fontSize = 12
+	export let yPadding: number | undefined = undefined
 	export let loadAsync = false
 
 	if (typeof code != 'string') {
@@ -454,10 +455,7 @@
 				renderLineHighlight: 'none',
 				lineNumbers: 'off',
 
-				padding: {
-					bottom: 8,
-					top: 8
-				}
+				...(yPadding !== undefined ? { padding: { bottom: yPadding, top: yPadding } } : {})
 			})
 		} catch (e) {
 			console.error('Error loading monaco:', e)
@@ -665,14 +663,15 @@
 		{code}
 		lineNumbersWidth={14}
 		lineNumbersOffset={-20}
-		class="template nonmain-editor rounded-md min-h-4 bg-surface-secondary !py-[9px] overflow-clip"
+		{fontSize}
+		class="template nonmain-editor bg-surface-input rounded-md !py-[8px] overflow-clip"
 	/>
 {/if}
 <div
 	bind:this={divEl}
 	style="height: 18px; padding-left: 6px;"
 	class="{inputBorderClass({ forceFocus: isFocus })} {$$props.class ??
-		''} template nonmain-editor rounded-md min-h-4 overflow-clip {!editor ? 'hidden' : ''}"
+		''} template nonmain-editor rounded-md overflow-clip {!editor ? 'hidden' : ''}"
 	bind:clientWidth={width}
 ></div>
 
diff --git a/frontend/src/lib/components/TestConnection.svelte b/frontend/src/lib/components/TestConnection.svelte
index 68d66dc531..3f49c92c21 100644
--- a/frontend/src/lib/components/TestConnection.svelte
+++ b/frontend/src/lib/components/TestConnection.svelte
@@ -228,14 +228,7 @@ export async function main(bucket: any) {
 </script>
 
 {#if Object.keys(scripts).includes(resourceType || '')}
-	<Button
-		spacingSize="sm"
-		size="xs"
-		btnClasses="h-8"
-		color="light"
-		variant="border"
-		on:click={testConnection}
-	>
+	<Button spacingSize="sm" size="xs" unifiedSize="md" variant="default" on:click={testConnection}>
 		{#if loading}
 			<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
 		{:else}
diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte
index bb4fa7f0ad..eb0b679655 100644
--- a/frontend/src/lib/components/Toast.svelte
+++ b/frontend/src/lib/components/Toast.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { toast } from '@zerodevx/svelte-toast'
 	import { CheckCircle2, XCircleIcon } from 'lucide-svelte'
-	import { onMount } from 'svelte'
 	import Button from './common/button/Button.svelte'
-	import type { ToastAction } from '$lib/toast'
+	import { type ToastAction } from '$lib/toast'
 	import { processMessage } from './toast'
 
 	interface Props {
@@ -28,32 +27,45 @@
 		toast.pop(toastId)
 	}
 
-	// On mount, close after 5 seconds
-	onMount(() => {
-		setTimeout(() => {
+	let elapsed = $state(0)
+	$effect(() => {
+		if (elapsed >= duration * 1000) {
 			toast.pop(toastId)
-		}, duration)
+			return
+		}
+		if (hover) return
+		let animationFrame = requestAnimationFrame((x) => {
+			elapsed += x
+		})
+		return () => cancelAnimationFrame(animationFrame)
 	})
+
+	let hover = $state(false)
+
+	let color = error
+		? { text: 'text-red-400', bg: 'bg-red-400' }
+		: { text: 'text-green-400', bg: 'bg-green-300' }
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface shadow-lg ring-1 ring-black ring-opacity-5 border"
+	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface-tertiary drop-shadow-base shadow-lg ring-1 ring-black ring-opacity-5 border rounded-md"
+	onmouseenter={() => (hover = true)}
+	onmouseleave={() => (hover = false)}
 >
 	<div class="p-2 min-h-[60px] flex flex-col">
 		<div class="flex items-start w-full">
 			<div class="flex-shrink-0 mt-0.5">
 				{#if error}
-					<XCircleIcon class="h-4 w-4 text-red-400" />
+					<XCircleIcon class="h-4 w-4 {color.text}" />
 				{:else}
-					<CheckCircle2 class="h-4 w-4 text-green-400" />
+					<CheckCircle2 class="h-4 w-4 {color.text}" />
 				{/if}
 			</div>
 			<div class="ml-3 flex-1 w-0">
-				<p class="text-sm text-secondary break-words">{@html processMessage(message)}</p>
+				<p class="text-sm text-primary break-words">{@html processMessage(message)}</p>
 				{#if errorMessage}
-					<p
-						class="text-sm text-secondary border bg-surface-secondary p-2 w-full overflow-auto mt-2"
-					>
+					<p class="text-xs {color.text} w-full overflow-auto mt-2">
 						{errorMessage}
 					</p>
 				{/if}
@@ -63,7 +75,7 @@
 				<button
 					type="button"
 					onclick={handleClose}
-					class="inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
+					class="inline-flex rounded-md text-gray-400 hover:text-primary focus:outline-none"
 				>
 					<span class="sr-only">Close</span>
 					<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -74,18 +86,25 @@
 				</button>
 			</div>
 		</div>
-		<div class="mt-2 flex flex-col gap-2 h-15 items-center">
+		<div class="mt-2 flex flex-col gap-2 w-full items-center">
 			{#each actions as action, index (index)}
 				<Button
-					on:click={() => {
+					variant={action.buttonType ?? 'default'}
+					onClick={() => {
 						action.callback()
 						toast.pop(toastId)
 					}}
-					class="text-sm !text-primary"
+					wrapperClasses="w-full"
 				>
 					{action.label}
 				</Button>
 			{/each}
 		</div>
 	</div>
+	<!-- Duration indicator -->
+	<div
+		class="h-0.5 {color.bg}"
+		style="width: {Math.max(0, 1 - elapsed / (duration * 1000)) * 100}%"
+	>
+	</div>
 </div>
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index c1946eb5b7..b33b3785ed 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -1,4 +1,8 @@
+<!-- @migration-task Error while migrating Svelte code: props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -7,36 +11,56 @@
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
 	import { inputBorderClass } from './text_input/TextInput.svelte'
 
-	export let options: {
-		left?: string
-		leftTooltip?: string
-		right?: string
-		rightTooltip?: string
-		rightDocumentationLink?: string
-		title?: string
-	} = {}
-	export let checked: boolean = false
-	export let disabled = false
-	export let textClass = ''
-	export let textStyle = ''
-	export let color: 'blue' | 'red' | 'nord' = 'nord'
-	export let id = (Math.random() + 1).toString(36).substring(10)
-	export let lightMode: boolean = false
-	export let eeOnly: boolean = false
-	export let aiId: string | undefined = undefined
-	export let aiDescription: string | undefined = undefined
+	interface Props {
+		options?: {
+			left?: string
+			leftTooltip?: string
+			right?: string
+			rightTooltip?: string
+			rightDocumentationLink?: string
+			title?: string
+		}
+		checked?: boolean
+		disabled?: boolean
+		textClass?: string
+		textStyle?: string
+		color?: 'blue' | 'red' | 'nord'
+		id?: any
+		lightMode?: boolean
+		eeOnly?: boolean
+		aiId?: string | undefined
+		aiDescription?: string | undefined
+		class?: string | undefined
+		size?: '2xs' | 'xs' | 'sm' | 'md'
+		textDisabled?: boolean
+		right?: import('svelte').Snippet
+	}
 
-	export let size: 'sm' | 'xs' | '2xs' | '2sm' = 'sm'
+	let {
+		options = {},
+		checked = $bindable(),
+		disabled = false,
+		textClass = '',
+		textStyle = '',
+		color = 'blue',
+		id = (Math.random() + 1).toString(36).substring(10),
+		lightMode = false,
+		eeOnly = false,
+		aiId = undefined,
+		aiDescription = undefined,
+		class: className = undefined,
+		size = 'sm',
+		textDisabled = false,
+		right
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{ change: boolean }>()
 	const bothOptions = Boolean(options.left) && Boolean(options.right)
-
-	export let textDisabled = false
 </script>
 
 <label
 	for={id}
-	class="{$$props.class || ''} z-auto flex flex-row items-center duration-50 {disabled
+	class="{className || ''} z-auto flex flex-row items-center duration-50 {disabled
 		? 'grayscale opacity-50'
 		: 'cursor-pointer'}"
 	title={options?.title}
@@ -45,12 +69,8 @@
 		<span
 			class={twMerge(
 				'mr-2 font-normal duration-50 select-none',
-				bothOptions || textDisabled
-					? checked
-						? 'text-disabled'
-						: 'text-tertiary'
-					: 'text-tertiary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
+				bothOptions || textDisabled ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
+				size === '2xs' ? 'text-2xs' : 'text-xs',
 				textClass
 			)}
 			style={textStyle}
@@ -62,11 +82,11 @@
 		</span>
 	{/if}
 
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="relative"
-		on:click|stopPropagation
+		onclick={stopPropagation(bubble('click'))}
 		use:triggerableByAI={{
 			id: aiId,
 			description: aiDescription,
@@ -76,28 +96,28 @@
 		}}
 	>
 		<input
-			on:focus
-			on:click
+			onfocus={bubble('focus')}
+			onclick={bubble('click')}
 			{disabled}
 			type="checkbox"
 			{id}
 			class="sr-only peer"
 			bind:checked
-			on:change|stopPropagation={(e) => {
-				dispatch('change', checked)
-			}}
+			onchange={stopPropagation((e) => {
+				dispatch('change', !!checked)
+			})}
 		/>
 		<div
 			class={classNames(
-				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all items-center",
+				"transition-all bg-surface-sunken rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all items-center",
 				color == 'red'
 					? 'peer-checked:bg-red-600'
 					: color == 'blue'
-						? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
+						? 'peer-checked:bg-luminance-blue-400 '
 						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
-				size === 'sm'
+				size === 'md'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
-					: size === '2sm'
+					: size === 'sm'
 						? 'w-9 h-5 after:top-0.5 after:left-[2px] after:h-4 after:w-4'
 						: size === '2xs'
 							? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
@@ -110,12 +130,8 @@
 		<span
 			class={twMerge(
 				'ml-2 font-normal duration-50 select-none',
-				bothOptions || textDisabled
-					? checked
-						? 'text-secondary'
-						: 'text-disabled'
-					: 'text-secondary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-xs' : 'text-sm',
+				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
+				size === '2xs' ? 'text-2xs' : 'text-xs',
 				textClass
 			)}
 			style={textStyle}
@@ -128,7 +144,7 @@
 			{/if}
 		</span>
 	{/if}
-	<slot name="right" />
+	{@render right?.()}
 </label>
 {#if eeOnly && disabled}
 	<span class="inline-flex text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8">
diff --git a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte b/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
index 6e1dc0d25f..8f183524a1 100644
--- a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
+++ b/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
@@ -13,9 +13,9 @@
 <div class="max-w-min">
 	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
 		{#snippet children({ item })}
-			<ToggleButton value="all" label="All" light {item} />
-			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light {item} />
-			<ToggleButton value="workspace" icon={Building} label="Workspace" light {item} />
+			<ToggleButton value="all" label="All" {item} />
+			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" {item} />
+			<ToggleButton value="workspace" icon={Building} label="Workspace" {item} />
 		{/snippet}
 	</ToggleButtonGroup>
 </div>
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index 7f4e2472c9..7ce2dd0594 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -2,9 +2,10 @@
 	import Markdown from 'svelte-exmarkdown'
 	import type { PopoverPlacement } from './Popover.model'
 	import Popover from './Popover.svelte'
-	import { ExternalLink, InfoIcon } from 'lucide-svelte'
+	import { InfoIcon } from 'lucide-svelte'
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	import { getContext, hasContext } from 'svelte'
+	import { twMerge } from 'tailwind-merge'
 	interface Props {
 		light?: boolean
 		wrapperClass?: string
@@ -39,13 +40,14 @@
 	<Popover
 		notClickable
 		{placement}
-		class={wrapperClass}
+		class={twMerge(wrapperClass)}
 		style="transform: scale({parseFloat(customSize) / 100});"
+		{documentationLink}
 	>
 		<div
 			class="inline-flex w-3 mx-0.5 h-3 {light
-				? 'text-tertiary-inverse'
-				: 'text-tertiary'} {classNames} relative"
+				? 'text-primary-inverse'
+				: 'text-primary'} {classNames} relative"
 		>
 			<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
 		</div>
@@ -57,15 +59,6 @@
 			{:else}
 				{@render children?.()}
 			{/if}
-
-			{#if documentationLink}
-				<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
-					<div class="flex flex-row gap-2 mt-4">
-						See documentation
-						<ExternalLink size="16" />
-					</div>
-				</a>
-			{/if}
 		{/snippet}
 	</Popover>
 {/if}
diff --git a/frontend/src/lib/components/TooltipInner.svelte b/frontend/src/lib/components/TooltipInner.svelte
index af4c56ac70..beb7813ad2 100644
--- a/frontend/src/lib/components/TooltipInner.svelte
+++ b/frontend/src/lib/components/TooltipInner.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div
-	class="shadow max-w-sm break-words py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left"
+	class="shadow-lg max-w-sm break-words py-2 px-3 rounded-md text-xs font-normal text-primary bg-surface-secondary whitespace-normal text-left"
 >
 	{#if markdownTooltip}
 		<div class="prose-sm">
@@ -19,7 +19,7 @@
 	{/if}
 
 	{#if documentationLink}
-		<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
+		<a href={documentationLink} target="_blank">
 			<div class="flex flex-row gap-2 mt-4">
 				See documentation
 				<ExternalLink size="16" />
diff --git a/frontend/src/lib/components/UserSettings.svelte b/frontend/src/lib/components/UserSettings.svelte
index a94974e185..489ee865a3 100644
--- a/frontend/src/lib/components/UserSettings.svelte
+++ b/frontend/src/lib/components/UserSettings.svelte
@@ -51,32 +51,38 @@
 
 <Drawer bind:this={drawer} size="900px" on:close={removeHash}>
 	<DrawerContent title="User Settings" on:close={closeDrawer}>
-		<div class="flex flex-col h-full">
+		<div class="flex flex-col gap-6 pb-8">
 			{#if scopes == undefined}
-				<div class="text-xs pt-1 pb-2 text-tertiary flex-col flex">
-					Windmill <Version />
+				<div
+					class="flex flex-row justify-between items-start gap-2 border border-border-light p-4 rounded-md"
+				>
+					<div class="font-semibold text-emphasis text-xs flex items-center">
+						Theme <DarkModeToggle forcedDarkMode={false} />
+					</div>
+					<div class="text-xs text-emphasis flex-col flex">
+						Windmill <Version />
+					</div>
 				</div>
-				<div class="font-semibold flex items-baseline">
-					Theme: <DarkModeToggle forcedDarkMode={false} />
-				</div>
-				<div class="flex flex-wrap md:flex-nowrap w-full md:gap-20 gap-10 mt-2">
-					<div class="md:w-[45%]">
+				<div class="grid grid-cols-1 lg:grid-cols-2 w-full gap-4">
+					<div class="min-w-0">
 						<UserInfoSettings />
 					</div>
-					<div class="md:w-[45%]">
+					<div class="min-w-0">
 						<AIUserSettings />
 					</div>
 				</div>
 			{/if}
 
-			<TokensTable
-				{showMcpMode}
-				{openWithMcpMode}
-				defaultNewTokenLabel={newTokenLabel}
-				defaultNewTokenWorkspace={newTokenWorkspace}
-				{scopes}
-				onTokenCreated={handleTokenCreated}
-			/>
+			<div class="grow min-h-0">
+				<TokensTable
+					{showMcpMode}
+					{openWithMcpMode}
+					defaultNewTokenLabel={newTokenLabel}
+					defaultNewTokenWorkspace={newTokenWorkspace}
+					{scopes}
+					onTokenCreated={handleTokenCreated}
+				/>
+			</div>
 		</div>
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
index 7a1248e0a8..a53e0e6ea7 100644
--- a/frontend/src/lib/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -14,7 +14,6 @@
 	import { canWrite, isOwner } from '$lib/utils'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
-	import Section from './Section.svelte'
 	import { Loader2, Save } from 'lucide-svelte'
 	import autosize from '$lib/autosize'
 
@@ -144,46 +143,53 @@
 					You only have read access to this resource and cannot edit it
 				</Alert>
 			{/if}
-			<Section label="Path">
-				<div class="flex flex-col gap-4">
-					<Path
-						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						namePlaceholder="variable"
-						kind="variable"
-					/>
-					<Toggle
-						on:change={() => edit && loadVariable(initialPath)}
-						bind:checked={variable.is_secret}
-						disabled={edit && $userStore?.operator}
-						options={{ right: 'Secret' }}
-					/>
-					{#if variable.is_secret}
-						<Alert type="warning" title="Audit log for each access">
-							Every secret is encrypted at rest and in transit with a key specific to this
-							workspace. In addition, any read of a secret variable generates an audit log whose
-							operation name is: variables.decrypt_secret
-						</Alert>
-					{/if}
-				</div>
-			</Section>
-			<Section label="Variable value">
-				{#snippet header()}
-					<span class="text-sm text-tertiary mr-4 font-normal">
+
+			<div class="flex flex-col gap-1">
+				<label for="path" class="text-xs font-semibold text-emphasis">Path</label>
+				<Path
+					disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+					bind:error={pathError}
+					bind:path
+					{initialPath}
+					namePlaceholder="variable"
+					kind="variable"
+				/>
+			</div>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs font-semibold text-emphasis">Secret</span>
+				<Toggle
+					on:change={() => edit && loadVariable(initialPath)}
+					bind:checked={variable.is_secret}
+					disabled={edit && $userStore?.operator}
+				/>
+				{#if variable.is_secret}
+					<Alert type="warning" title="Audit log for each access">
+						Every secret is encrypted at rest and in transit with a key specific to this workspace.
+						In addition, any read of a secret variable generates an audit log whose operation name
+						is: variables.decrypt_secret
+					</Alert>
+				{/if}
+			</label>
+
+			<div class="flex flex-col gap-1">
+				<label for="variable-value" class="flex flex-row justify-left items-center">
+					<span class="text-xs font-semibold text-emphasis">Variable value&nbsp;</span>
+
+					<span class="text-xs text-secondary font-normal">
 						({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)
 					</span>
-				{/snippet}
+					{#if edit && variable.is_secret}
+						<div class="ml-2"></div>
+						{#if $userStore?.operator}
+							<div class="p-2 border">Operators cannot load secret value</div>
+						{:else}
+							<Button size="xs" variant="subtle" on:click={() => loadVariable(initialPath)}
+								>Load secret value<Tooltip>Will generate an audit log</Tooltip></Button
+							>
+						{/if}
+					{/if}
+				</label>
 				<div>
-					<div class="mb-1">
-						{#if edit && variable.is_secret}{#if $userStore?.operator}
-								<div class="p-2 border">Operators cannot load secret value</div>
-							{:else}
-								<Button variant="border" size="xs" on:click={() => loadVariable(initialPath)}
-									>Load secret value<Tooltip>Will generate an audit log</Tooltip></Button
-								>{/if}{/if}
-					</div>
 					<div class="flex flex-col gap-2">
 						<ToggleButtonGroup bind:selected={editorKind}>
 							{#snippet children({ item })}
@@ -199,6 +205,7 @@
 								use:autosize
 								bind:value={variable.value}
 								placeholder="Update variable value"
+								id="variable-value"
 							></textarea>
 						{:else if editorKind == 'json'}
 							<div class="border rounded mb-4 w-full">
@@ -211,6 +218,7 @@
 										lang="json"
 										bind:code={variable.value}
 										fixedOverflowWidgets={false}
+										class="bg-surface-tertiary"
 									/>
 								{/await}
 							</div>
@@ -225,24 +233,26 @@
 										lang="yaml"
 										bind:code={variable.value}
 										fixedOverflowWidgets={false}
+										class="bg-surface-tertiary"
 									/>
 								{/await}
 							</div>
 						{/if}
 					</div>
 				</div>
-			</Section>
-			<Section label="Description">
+			</div>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs font-semibold text-emphasis">Description</span>
 				<textarea rows="4" use:autosize bind:value={variable.description} placeholder="Used for X"
 				></textarea>
-			</Section>
+			</label>
 		</div>
 		{#snippet actions()}
 			<Button
 				on:click={() => (edit ? updateVariable() : createVariable())}
 				disabled={!can_write || !valid || pathError != ''}
 				startIcon={{ icon: Save }}
-				color="dark"
+				variant="accent"
 				size="sm"
 			>
 				{edit ? 'Update' : 'Save'}
diff --git a/frontend/src/lib/components/WhitelistIp.svelte b/frontend/src/lib/components/WhitelistIp.svelte
index 902030b6e1..600c879c79 100644
--- a/frontend/src/lib/components/WhitelistIp.svelte
+++ b/frontend/src/lib/components/WhitelistIp.svelte
@@ -20,7 +20,7 @@
 {#if ips}
 	<div class="mt-4"></div>
 	<Alert size="xs" type="info" title="IPs to whitelist">
-		<span class="text-tertiary">If necessary, the workers IPs to whitelist are:</span>
+		<span class="text-primary">If necessary, the workers IPs to whitelist are:</span>
 		{ips.join(', ')}
 	</Alert>
 {/if}
diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte
index cdd831e43c..0c0328c994 100644
--- a/frontend/src/lib/components/WorkerGroup.svelte
+++ b/frontend/src/lib/components/WorkerGroup.svelte
@@ -244,8 +244,8 @@
 			class="mb-4"
 		>
 			{#snippet children({ item })}
-				<ToggleButton value="normal" small label="Any jobs within worker tags" {item} />
-				<ToggleButton value="dedicated" small label="Dedicated to a script/flow" {item} />
+				<ToggleButton value="normal" label="Any jobs within worker tags" {item} />
+				<ToggleButton value="dedicated" label="Dedicated to a script/flow" {item} />
 			{/snippet}
 		</ToggleButtonGroup>
 		{#if selected == 'normal'}
@@ -383,7 +383,7 @@
 								dirty = true
 							}
 						}}
-						disabled{!$enterpriseLicense}
+						disabled={!$enterpriseLicense}
 					/>
 					{#if nconfig.min_alive_workers_alert_threshold !== undefined}
 						<div class="flex flex-row items-center justify-between">
@@ -504,9 +504,8 @@
 				{#if $superadmin || $devopsRole}
 					<div class="flex">
 						<Button
-							variant="contained"
-							color="blue"
-							size="xs"
+							variant="default"
+							unifiedSize="md"
 							startIcon={{ icon: Plus }}
 							on:click={() => {
 								customEnvVars.push({ key: '', type: 'dynamic', value: undefined })
@@ -522,8 +521,7 @@
 			{#if !($superadmin || $devopsRole)}
 				<div class="flex flex-wrap items-center gap-1 pt-2">
 					<Button
-						variant="contained"
-						color="light"
+						variant="subtle"
 						size="xs"
 						on:click={() => {
 							let updated = false
@@ -550,8 +548,7 @@
 						>
 					</Button>
 					<Button
-						variant="contained"
-						color="light"
+						variant="subtle"
 						size="xs"
 						on:click={() => {
 							let updated = false
@@ -635,8 +632,7 @@
 					{#if $superadmin || $devopsRole}
 						<div class="flex">
 							<Button
-								variant="contained"
-								color="blue"
+								variant="accent"
 								size="xs"
 								startIcon={{ icon: Plus }}
 								on:click={() => {
@@ -691,8 +687,7 @@
 					{#if $superadmin || $devopsRole}
 						<div class="flex">
 							<Button
-								variant="contained"
-								color="blue"
+								variant="accent"
 								size="xs"
 								startIcon={{ icon: Plus }}
 								on:click={() => {
@@ -836,8 +831,7 @@
 						<div class="text-red-600 text-xs whitespace-nowrap">Non applied changes</div>
 					{/if}
 					<Button
-						variant="contained"
-						color="dark"
+						variant="accent"
 						on:click={async () => {
 							if (
 								nconfig?.min_alive_workers_alert_threshold &&
@@ -913,8 +907,8 @@
 	<div class="flex gap-2 items-center justify-end flex-row my-2">
 		{#if $superadmin}
 			<Button
-				color="light"
-				size="xs"
+				variant="subtle"
+				unifiedSize="md"
 				on:click={() => {
 					dirty = false
 					loadNConfig()
@@ -928,8 +922,8 @@
 			</Button>
 
 			<Button
-				color="light"
-				size="xs"
+				unifiedSize="md"
+				variant="subtle"
 				on:click={() => {
 					navigator.clipboard.writeText(
 						YAML.stringify({
@@ -946,8 +940,8 @@
 
 			{#if config}
 				<Button
-					color="light"
-					size="xs"
+					unifiedSize="md"
+					variant="subtle"
 					on:click={() => {
 						if (!$enterpriseLicense) {
 							sendUserToast('Worker Management UI is an EE feature', true)
@@ -963,8 +957,8 @@
 			{/if}
 
 			<Button
-				color="light"
-				size="xs"
+				unifiedSize="md"
+				variant="subtle"
 				on:click={() => {
 					loadNConfig()
 
@@ -977,14 +971,14 @@
 			</Button>
 		{:else if config}
 			<Button
-				color="light"
-				size="xs"
+				unifiedSize="md"
+				variant="accent"
 				on:click={() => {
 					loadNConfig()
 					drawer?.openDrawer()
 				}}
 			>
-				<div class="flex flex-row gap-1 items-center"> config </div>
+				Config
 			</Button>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/WorkerRepl.svelte b/frontend/src/lib/components/WorkerRepl.svelte
index 32cbcbe32f..e7daf54292 100644
--- a/frontend/src/lib/components/WorkerRepl.svelte
+++ b/frontend/src/lib/components/WorkerRepl.svelte
@@ -278,8 +278,7 @@
 			{#if pendingsJobs.length === 0}
 				<Button
 					loading={loadingPendingJobs}
-					variant="border"
-					color="light"
+					variant="default"
 					wrapperClasses="self-stretch"
 					on:click={async () => {
 						await listPendingJobs()
@@ -303,8 +302,7 @@
 						disablePortal
 					/>
 					<Button
-						variant="border"
-						color="light"
+						variant="default"
 						disabled={emptyString(selectedJobId)}
 						wrapperClasses="self-stretch"
 						on:click={listPendingJobsAndUpdateSelectedJobid}
@@ -312,9 +310,8 @@
 						iconOnly
 					/>
 					<Button
-						color="light"
 						size="xs"
-						variant="border"
+						variant="default"
 						disabled={emptyString(selectedJobId)}
 						startIcon={{ icon: Eye }}
 						on:click={async () => {
@@ -336,9 +333,8 @@
 					<Button
 						loading={isCancelingJob}
 						disabled={emptyString(selectedJobId)}
-						color="red"
 						size="xs"
-						variant="border"
+						variant="default"
 						startIcon={{ icon: Square }}
 						on:click={async () => {
 							try {
@@ -365,7 +361,7 @@
 				<div class="flex flex-row">
 					<Badge
 						color="gray"
-						class="relative center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[40px] rounded-r-none rounded-l-none"
+						class="relative center-center !bg-gray-300 !text-primary dark:!bg-gray-700 dark:!text-gray-300 !h-[40px] rounded-r-none rounded-l-none"
 					>
 						Full path
 
@@ -383,12 +379,10 @@
 	</div>
 	<div class="flex flex-col h-full gap-1 mt-2">
 		<div class="flex flex-row w-full justify-between">
-			<div class="flex flex-row">
+			<div class="flex flex-row gap-2">
 				<Button
-					btnClasses="!font-medium text-tertiary "
-					size="xs"
-					spacingSize="md"
-					color="light"
+					unifiedSize="md"
+					variant="default"
 					startIcon={{ icon: Play }}
 					title="Run bash script"
 					on:click={async () => {
@@ -398,10 +392,8 @@
 					Run
 				</Button>
 				<Button
-					btnClasses="!font-medium text-tertiary "
-					size="xs"
-					spacingSize="md"
-					color="light"
+					unifiedSize="md"
+					variant="subtle"
 					on:click={scriptPicker.openDrawer}
 					startIcon={{ icon: Library }}
 					title="Explore other scripts"
diff --git a/frontend/src/lib/components/WorkerTagPicker.svelte b/frontend/src/lib/components/WorkerTagPicker.svelte
index 6dbe299f8d..eaa949aeaf 100644
--- a/frontend/src/lib/components/WorkerTagPicker.svelte
+++ b/frontend/src/lib/components/WorkerTagPicker.svelte
@@ -54,8 +54,7 @@
 	</div>
 
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		on:click={() => {
 			$workerTags = undefined
 			loadWorkerTags(true)
@@ -63,5 +62,5 @@
 		startIcon={{ icon: RotateCw }}
 		{disabled}
 	/>
-	<AssignableTags placement={popupPlacement} color="nord" {disabled} />
+	<AssignableTags placement={popupPlacement} {disabled} />
 </div>
diff --git a/frontend/src/lib/components/WorkerTagSelect.svelte b/frontend/src/lib/components/WorkerTagSelect.svelte
index c0bc79c83b..aafd271293 100644
--- a/frontend/src/lib/components/WorkerTagSelect.svelte
+++ b/frontend/src/lib/components/WorkerTagSelect.svelte
@@ -16,7 +16,8 @@
 		nullTag = undefined,
 		disabled = false,
 		placeholder,
-		inputClass
+		inputClass,
+		alwaysDisplayRefresh = false
 	}: {
 		tag: string | undefined
 		noLabel?: boolean
@@ -26,6 +27,7 @@
 		language?: string
 		class?: string
 		inputClass?: string
+		alwaysDisplayRefresh?: boolean
 	} = $props()
 
 	let loading = $state(false)
@@ -129,7 +131,7 @@
 {/snippet}
 <div class="flex gap-1 items-center relative">
 	{#if !noLabel}
-		<div class="text-tertiary text-2xs">{placeholder ?? 'tag'}</div>
+		<div class="text-primary text-xs">{placeholder ?? 'tag'}</div>
 	{/if}
 	<Select
 		clearable
@@ -142,19 +144,25 @@
 		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
 		{startSnippet}
 	/>
-	{#if open}
-		<div class="absolute top-0 -right-12">
-			<Button
-				iconOnly
-				variant="border"
-				color="dark"
-				size="xs"
-				startIcon={{ icon: RotateCw, classes: loading ? 'animate-spin' : '' }}
-				on:click={async () => {
-					loadWorkerGroups(true)
-					open = true
-				}}
-			></Button>
+	{#if alwaysDisplayRefresh}
+		{@render refreshAll()}
+	{:else if open}
+		<div class="absolute top-0 -right-10">
+			{@render refreshAll()}
 		</div>
 	{/if}
 </div>
+
+{#snippet refreshAll()}
+	<Button
+		iconOnly
+		variant="subtle"
+		unifiedSize="md"
+		startIcon={{ icon: RotateCw, classes: loading ? 'animate-spin' : '' }}
+		on:click={async () => {
+			loadWorkerGroups(true)
+			open = true
+		}}
+		title="Refresh worker groups"
+	></Button>
+{/snippet}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 346dff11c3..06a71bb839 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -295,7 +295,7 @@
 					wrapperStyle={css?.container?.style}
 					disabled={resolvedConfig.disabled}
 					on:click={handleClick}
-					size={resolvedConfig.size}
+					extendedSize={resolvedConfig.size}
 					color={resolvedConfig.color}
 					loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
 				>
diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index 70346d042e..b7ae3b4709 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -149,8 +149,9 @@
 						on:click={() => {
 							runnableComponent?.runComponent()
 						}}
-						size={resolvedConfig.size}
+						extendedSize={resolvedConfig.size}
 						color={resolvedConfig.color}
+						variant="contained"
 					>
 						{resolvedConfig.label}
 					</Button>
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index 4aa606da82..0717a8e3a6 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -151,8 +151,8 @@
 							}
 							modal?.close()
 						}}
-						size="xs"
-						color="dark"
+						unifiedSize="sm"
+						variant="accent"
 					>
 						Submit
 					</Button>
@@ -167,13 +167,14 @@
 		{/if}
 		<Button
 			disabled={resolvedConfig.disabled ?? false}
-			size={resolvedConfig.size ?? 'md'}
+			extendedSize={resolvedConfig.size ?? 'md'}
 			color={resolvedConfig.color}
 			btnClasses={twMerge(css?.button?.class, 'wm-button', 'wm-modal-form-button')}
 			style={css?.button?.style ?? ''}
 			on:click={(e) => {
 				modal?.open()
 			}}
+			variant="contained"
 		>
 			{resolvedConfig.label}
 		</Button>
diff --git a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
index 0a81c8fd37..4640c35699 100644
--- a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
@@ -176,7 +176,7 @@
 						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
 					</ListWrapper>
 					{#if !Array.isArray(result)}
-						<div class="text-center text-tertiary">Input data is not an array</div>
+						<div class="text-center text-primary">Input data is not an array</div>
 					{/if}
 				{/if}
 			{/if}
diff --git a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
index 99a8726aaa..4b96de346e 100644
--- a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
@@ -261,7 +261,7 @@
 				{:else}
 					{@render nonRenderedPlaceholder?.()}
 					{#if !Array.isArray(result)}
-						<div class="text-center text-tertiary">Input data is not an array</div>
+						<div class="text-center text-primary">Input data is not an array</div>
 					{/if}
 				{/if}
 			{/if}
diff --git a/frontend/src/lib/components/apps/components/display/AppDownload.svelte b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
index 38e2a555f5..dbc732bd06 100644
--- a/frontend/src/lib/components/apps/components/display/AppDownload.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
@@ -119,13 +119,14 @@
 				)}
 				style={css?.button?.style}
 				disabled={resolvedConfig.source == undefined}
-				size={resolvedConfig.size}
+				extendedSize={resolvedConfig.size}
 				color={resolvedConfig.color}
 				download={resolvedConfig.filename}
 				href={transformBareBase64IfNecessary(resolvedConfig.source)}
 				target="_blank"
 				ref="external"
 				nonCaptureEvent
+				variant="contained"
 			>
 				<span class="truncate inline-flex gap-2 items-center">
 					{#if resolvedConfig.beforeIcon}
diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
index 8db2b4df52..7e269298fe 100644
--- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
@@ -139,9 +139,11 @@
 									resolvedConfig.fillContainer ? 'w-full h-full' : ''
 								)}
 								style={css?.button?.style}
-								size={resolvedConfig.size}
+								extendedSize={resolvedConfig.size}
 								color={resolvedConfig.color}
 								nonCaptureEvent
+								variant="contained"
+								unifiedSize="sm"
 							>
 								<span class="truncate inline-flex gap-2 items-center">
 									{#if resolvedConfig.beforeIcon}
diff --git a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte b/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
index 473804ee0d..85f0e3193e 100644
--- a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
@@ -170,6 +170,7 @@
 			size="xs"
 			disabled={resolvedDisabled}
 			btnClasses={orientation === 'vertical' ? '!justify-start !whitespace-normal !text-left' : ''}
+			variant="contained"
 		>
 			{#if navbarItem.icon}
 				{#key navbarItem.icon}
diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
index c178ce20cb..7d1e09bd06 100644
--- a/frontend/src/lib/components/apps/components/display/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -97,7 +97,7 @@
 	function getClasses() {
 		switch (resolvedConfig.style) {
 			case 'Caption':
-				return 'text-sm italic text-tertiary'
+				return 'text-sm italic text-primary'
 			case 'Label':
 				return 'font-semibold text-sm'
 			default:
@@ -268,9 +268,8 @@
 							<div class="flex items-center">
 								<Button
 									title="Copy to clipboard"
-									variant="border"
+									variant="default"
 									size="xs"
-									color="light"
 									btnClasses="!p-1"
 									on:click={() => copyToClipboard(result)}
 								>
diff --git a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
index ed3330c518..d2f0f98a8c 100644
--- a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
+++ b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
@@ -33,7 +33,7 @@
 
 <Button
 	startIcon={{ icon: Plus }}
-	variant="border"
+	variant="default"
 	size="xs2"
 	on:click={() => {
 		args = {}
@@ -47,8 +47,8 @@
 	<DrawerContent title="Insert row" on:close={insertDrawer.closeDrawer}>
 		{#snippet actions()}
 			<Button
-				color="dark"
-				size="xs"
+				variant="accent"
+				unifiedSize="md"
 				on:click={onConfirm}
 				disabled={!isInsertable}
 				shortCut={{ Icon: CornerDownLeft }}
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte b/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte
index 41b2e75978..149544dac0 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/InsertRow.svelte
@@ -188,8 +188,7 @@
 				<Toggle
 					options={{ right: 'NULL' }}
 					class="pl-2"
-					textClass="text-tertiary"
-					size="2sm"
+					textClass="text-primary"
 					bind:checked={
 						() => args[item.id] === null,
 						(v) => {
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte b/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
index 581f1bd5a3..3a73a49d47 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
@@ -117,8 +117,7 @@
 			<div class="flex items-center gap-2 flex-row">
 				<Button
 					size="xs2"
-					variant="border"
-					color="light"
+					variant="default"
 					on:click={() => {
 						isPreviousLoading = true
 						$table.previousPage()
@@ -133,8 +132,7 @@
 
 				<Button
 					size="xs2"
-					variant="border"
-					color="light"
+					variant="default"
 					on:click={() => {
 						isNextLoading = true
 						$table.nextPage()
diff --git a/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte b/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
index d5443de03d..0b6aa5c9bc 100644
--- a/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
@@ -163,7 +163,12 @@
 							{/each}
 						</div>
 						<div class="w-full flex fles-row justify-end">
-							<Button startIcon={{ icon: RefreshCw }} size="xs" color="dark" on:click={syncColumns}>
+							<Button
+								startIcon={{ icon: RefreshCw }}
+								size="xs"
+								variant="accent"
+								on:click={syncColumns}
+							>
 								Sync columns definition
 							</Button>
 						</div>
diff --git a/frontend/src/lib/components/apps/components/helpers/Loader.svelte b/frontend/src/lib/components/apps/components/helpers/Loader.svelte
index e925a7943b..cfba6658df 100644
--- a/frontend/src/lib/components/apps/components/helpers/Loader.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/Loader.svelte
@@ -13,7 +13,7 @@
 	{@render children?.()}
 {:else}
 	<div class="w-full h-full">
-		<div class="absolute inset-0 center-center flex-col bg-surface text-tertiary border">
+		<div class="absolute inset-0 center-center flex-col bg-surface text-primary border">
 			<Loader2 class="animate-spin" size={16} />
 			<span class="text-xs mt-1">Loading</span>
 		</div>
diff --git a/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte b/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte
index 01a4154d1d..5e4c80174f 100644
--- a/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte
@@ -12,7 +12,7 @@
 	<div class="flex gap-2 flex-col">
 		<div>This component is expecting a connected input: </div>
 		<div>
-			<code class="bg-gray-50 border text-tertiary">{input.connection?.path} </code>
+			<code class="bg-gray-50 border text-primary">{input.connection?.path} </code>
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
index 39069b2fb5..b037160322 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
@@ -127,10 +127,8 @@
 					style={css?.allTabs?.style}
 					selectedClass={twMerge(css?.selectedTab?.class, 'wm-select-tab-selected')}
 					selectedStyle={css?.selectedTab?.style}
-					size={resolvedConfig?.tabSize}
-				>
-					<span class="font-semibold text-md">{item.label}</span>
-				</Tab>
+					label={item.label}
+				/>
 			{/each}
 		</Tabs>
 	</div>
diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index 26b3b1a54f..d42fdc3ba5 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -269,7 +269,7 @@
 			<Button
 				on:click={next}
 				size="xs2"
-				color="dark"
+				variant="accent"
 				endIcon={{ icon: ArrowRight }}
 				disabled={isNextDisabled ||
 					currentNodeId === lastNodeId ||
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index e59a5ce8d2..c01d08b237 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -122,9 +122,10 @@
 					}
 					appDrawer?.toggleDrawer()
 				}}
-				size={resolvedConfig.size}
+				extendedSize={resolvedConfig.size}
 				color={resolvedConfig.color}
 				style={css?.button?.style}
+				variant="contained"
 			>
 				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
 					<div>{resolvedConfig.label}</div>
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index 3f324094ce..af266bba6e 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -238,7 +238,7 @@
 				{:else}
 					{@render nonRenderedPlaceholder?.()}
 					{#if !Array.isArray(result)}
-						<div class="text-center text-tertiary">Input data is not an array</div>
+						<div class="text-center text-primary">Input data is not an array</div>
 					{/if}
 				{/if}
 			</div>
@@ -248,8 +248,7 @@
 				>
 					<Button
 						size="xs2"
-						variant="border"
-						color="light"
+						variant="default"
 						btnClasses="flex flex-row gap-1 items-center wm-list-pagination-buttons"
 						on:click={() => {
 							isPreviousLoading = true
@@ -267,8 +266,7 @@
 					</Button>
 					<Button
 						size="xs2"
-						variant="border"
-						color="light"
+						variant="default"
 						btnClasses="flex flex-row gap-1 items-center wm-list-pagination-buttons"
 						on:click={() => {
 							isNextLoading = true
diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index 1b8faee0d7..a5f3113105 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -162,8 +162,9 @@
 					}
 					disposable?.openDrawer()
 				}}
-				size={resolvedConfig.buttonSize}
+				extendedSize={resolvedConfig.buttonSize}
 				color={resolvedConfig.buttonColor}
+				variant="contained"
 			>
 				<div>{resolvedConfig.buttonLabel}</div>
 			</Button>
@@ -219,7 +220,7 @@
 									})}
 									class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
 								>
-									<X class="text-tertiary" />
+									<X class="text-primary" />
 								</button>
 							</div>
 						</div>
diff --git a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
index 2b4eb183f7..3a3374de84 100644
--- a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
@@ -235,15 +235,14 @@
 				<div bind:clientHeight={footerHeight}>
 					<div class="flex justify-between h-10 p-2">
 						<div class="flex items-center gap-2">
-							<span class="text-sm font-medium text-tertiary">
+							<span class="text-sm font-medium text-primary">
 								Step {selectedIndex + 1} of {tabs.length}
 							</span>
 						</div>
 						<div class="flex items-center gap-2">
 							<Button
 								size="xs"
-								color="light"
-								variant="contained"
+								variant="subtle"
 								disabled={selectedIndex === 0}
 								on:click={(e) => {
 									e.preventDefault()
@@ -266,8 +265,7 @@
 
 							<Button
 								size="xs"
-								color="dark"
-								variant="contained"
+								variant="accent"
 								disabled={lastStep}
 								on:click={(e) => {
 									e.preventDefault()
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 87396cac20..3b89db04dc 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -207,12 +207,7 @@
 {/each}
 
 {#each hiddenTabs ?? [] as hideTab, index}
-	<InputValue
-		key="tabHidden {index}"
-		{id}
-		input={hideTab}
-		bind:value={resolvedHiddenTabs[index]}
-	/>
+	<InputValue key="tabHidden {index}" {id} input={hideTab} bind:value={resolvedHiddenTabs[index]} />
 {/each}
 
 {#if everRender}
@@ -233,9 +228,8 @@
 								selectedClass={twMerge(css?.selectedTab?.class, 'wm-tabs-selectedTab')}
 								selectedStyle={css?.selectedTab?.style}
 								disabled={resolvedDisabledTabs[index]}
-							>
-								<span class="font-semibold">{res}</span>
-							</Tab>
+								label={res}
+							/>
 						{/if}
 					{/each}
 				</Tabs>
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index eebea131b9..04bd09fac0 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -1028,15 +1028,15 @@
 															<span class="ml-2">Exit</span>
 														</div>
 														<div>
-															<span class="float-left text-tertiary-inverse"
+															<span class="float-left text-primary-inverse"
 																>hold {getModifierKey()}</span
 															>
 															<br />
-															<span class="float-left text-tertiary-inverse">click & drag</span>
+															<span class="float-left text-primary-inverse">click & drag</span>
 															<br />
-															<span class="float-left text-tertiary-inverse">scroll</span>
+															<span class="float-left text-primary-inverse">scroll</span>
 															<br />
-															<span class="float-left text-tertiary-inverse">esc</span>
+															<span class="float-left text-primary-inverse">esc</span>
 														</div>
 													</div>
 												{/snippet}
@@ -1059,7 +1059,7 @@
 
 									<div id="app-editor-top-level-drawer"></div>
 									<div
-										class="absolute pointer-events-none inset-0 h-full w-full surface-secondary bg-[radial-gradient(#dbdbdb_1px,transparent_1px)] dark:bg-[radial-gradient(#666666_1px,transparent_1px)] [background-size:16px_16px]"
+										class="absolute pointer-events-none inset-0 h-full w-full surface-secondary bg-[radial-gradient(#dbdbdb_1px,transparent_1px)] dark:bg-[radial-gradient(#374457_1px,transparent_1px)] [background-size:16px_16px]"
 									></div>
 
 									<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -1108,8 +1108,7 @@
 														smaller screens.
 													</div>
 													<Button
-														color="light"
-														variant="border"
+														variant="default"
 														size="xs"
 														on:click={() => {
 															$appStore.mobileViewOnSmallerScreens = true
@@ -1171,7 +1170,6 @@
 										{/snippet}
 										<Tab
 											value="insert"
-											size="xs"
 											class="h-full"
 											on:pointerdown={() => {
 												if ($cssEditorOpen) {
@@ -1180,11 +1178,8 @@
 												}
 											}}
 											id="app-editor-component-library-tab"
-										>
-											<div class="m-1 center-center">
-												<Plus size={18} />
-											</div>
-										</Tab>
+											icon={Plus}
+										></Tab>
 									</Popover>
 									<Popover disappearTimeout={0} notClickable placement="bottom">
 										{#snippet text()}
@@ -1192,7 +1187,6 @@
 										{/snippet}
 										<Tab
 											value="settings"
-											size="xs"
 											class="h-full"
 											on:pointerdown={() => {
 												if ($cssEditorOpen) {
@@ -1200,11 +1194,8 @@
 													selectedTab = 'settings'
 												}
 											}}
-										>
-											<div class="m-1 center-center">
-												<Component size={18} />
-											</div>
-										</Tab>
+											icon={Component}
+										/>
 									</Popover>
 									<Popover disappearTimeout={0} notClickable placement="bottom">
 										{#snippet text()}
@@ -1212,7 +1203,6 @@
 										{/snippet}
 										<Tab
 											value="css"
-											size="xs"
 											class="h-full"
 											on:pointerdown={() => {
 												if (!$cssEditorOpen) {
@@ -1220,11 +1210,8 @@
 													selectedTab = 'css'
 												}
 											}}
-										>
-											<div class="m-1 center-center">
-												<Paintbrush size={18} />
-											</div>
-										</Tab>
+											icon={Paintbrush}
+										/>
 									</Popover>
 									<div class="h-full w-full flex justify-end px-1">
 										<HideButton on:click={() => hideRightPanel()} direction="right" />
@@ -1286,8 +1273,7 @@
 			class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 		>
 			<Button
-				variant="border"
-				color="blue"
+				variant="default"
 				size="sm"
 				startIcon={{ icon: Plus }}
 				on:click={() => {
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 58ff64f3d7..59fb4b73e1 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -1005,8 +1005,7 @@
 		{#snippet actions()}
 			<div class="flex flex-row gap-4">
 				<Button
-					variant="border"
-					color="light"
+					variant="accent"
 					disabled={!savedApp || savedApp.draft_only}
 					on:click={async () => {
 						if (!savedApp) {
@@ -1047,6 +1046,7 @@
 					</div>
 				</Button>
 				<Button
+					variant="accent"
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' || customPathError != ''}
 					on:click={() => {
@@ -1130,7 +1130,6 @@
 
 			{#if $app}
 				<ToggleButtonGroup
-					class="h-[30px]"
 					selected={$app.fullscreen ? 'true' : 'false'}
 					on:selected={({ detail }) => {
 						$app.fullscreen = detail === 'true'
@@ -1139,24 +1138,25 @@
 					{#snippet children({ item })}
 						<ToggleButton
 							icon={AlignHorizontalSpaceAround}
+							iconOnly
 							value={'false'}
 							tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							tooltip="The width is of the app if the full width of its container"
 							icon={Expand}
+							iconOnly
 							value={'true'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			{#if $app}
 				<ToggleButtonGroup
-					class="h-[30px]"
 					on:selected={({ detail }) => {
 						const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined
 						setTheme(theme)
@@ -1166,44 +1166,49 @@
 					{#snippet children({ item })}
 						<ToggleButton
 							icon={SunMoon}
+							iconOnly
 							value={'auto'}
 							tooltip="The app mode between dark/light is automatic"
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							icon={Sun}
+							iconOnly
 							value={'sun'}
 							tooltip="Force light mode"
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							tooltip="Force dark mode"
 							icon={Moon}
+							iconOnly
 							value={'dark'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			<div class="flex flex-row gap-2">
-				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
+				<ToggleButtonGroup bind:selected={$breakpoint}>
 					{#snippet children({ item })}
 						<ToggleButton
 							tooltip="Computer View"
 							icon={Laptop2}
+							iconOnly
 							value={'lg'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							tooltip="Mobile View"
 							icon={Smartphone}
+							iconOnly
 							value={'sm'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						{#if $breakpoint === 'sm'}
 							<Toggle
@@ -1283,23 +1288,22 @@
 					}
 					$jobsDrawerOpen = true
 				}}
-				color={hasErrors ? 'red' : 'light'}
-				size="xs"
-				variant="border"
-				btnClasses="relative"
+				unifiedSize="md"
+				variant={hasErrors ? 'accent' : 'default'}
+				btnClasses={'relative'}
+				destructive={hasErrors}
+				startIcon={{ icon: Bug }}
 			>
 				<div class="flex flex-row gap-1 items-center">
-					<Bug size={14} />
 					<div>Debug runs</div>
-					<div class="text-2xs text-tertiary"
+					<div class="text-2xs text-primary"
 						>({$jobs?.length > 99 ? '99+' : ($jobs?.length ?? 0)})</div
 					>
 					{#if hasErrors}
 						<Button
 							size="xs"
 							btnClasses="-my-2 !px-1 !py-0"
-							color="light"
-							variant="border"
+							variant="default"
 							on:click={() => errorByComponent.set({})}
 							><BellOff size={12} />
 						</Button>
@@ -1310,20 +1314,22 @@
 		<AppExportButton bind:this={appExport} />
 		<PreviewToggle loading={loading.save} />
 		<Button
+			variant="accent"
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={() => saveDraft()}
-			size="xs"
+			unifiedSize="md"
 			disabled={!newApp && !savedApp}
 			shortCut={{ key: 'S' }}
 		>
 			Draft
 		</Button>
 		<Button
+			variant="accent"
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={save}
-			size="xs"
+			unifiedSize="md"
 			dropdownItems={$appPath != ''
 				? () => [
 						{
diff --git a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
index 4cefe86ec1..9b6c74bdc1 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
@@ -84,13 +84,10 @@
 		{#snippet buttonReplacement()}
 			<Button
 				nonCaptureEvent
-				size="xs"
-				color="light"
-				variant="border"
+				unifiedSize="md"
+				variant="subtle"
 				iconOnly
-				startIcon={{
-					icon: BookOpen
-				}}
+				startIcon={{ icon: BookOpen }}
 			/>
 		{/snippet}
 	</Dropdown>
diff --git a/frontend/src/lib/components/apps/editor/AppExportButton.svelte b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
index 9094980535..0bc4cf4b10 100644
--- a/frontend/src/lib/components/apps/editor/AppExportButton.svelte
+++ b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
@@ -32,8 +32,8 @@
 	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		<div>
 			<Tabs bind:selected={rawType}>
-				<Tab value="yaml">YAML</Tab>
-				<Tab value="json">JSON</Tab>
+				<Tab value="yaml" label="YAML" />
+				<Tab value="json" label="JSON" />
 				{#snippet content()}
 					<div class="relative pt-2">
 						<Button
@@ -43,8 +43,7 @@
 										? YAML.stringify(app ?? {})
 										: JSON.stringify(app ?? {}, null, 4)
 								)}
-							color="dark"
-							variant="border"
+							variant="accent"
 							size="sm"
 							startIcon={{ icon: Clipboard }}
 							btnClasses="absolute top-2 right-2 w-min z-20"
diff --git a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
index 05c8598f1d..779edf2028 100644
--- a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
@@ -110,7 +110,7 @@
 								{/each}
 							</div>
 						{:else}
-							<div class="text-sm text-tertiary">No items</div>
+							<div class="text-sm text-primary">No items</div>
 						{/if}
 					</div>
 				</PanelSection>
@@ -119,8 +119,8 @@
 				<div class="w-full h-full flex flex-col">
 					<div>
 						<Tabs bind:selected={rightColumnSelect}>
-							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
-							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
+							<Tab value="timeline" label="Timeline" />
+							<Tab value="detail" label="Details" />
 						</Tabs>
 					</div>
 					{#if rightColumnSelect == 'timeline'}
@@ -178,8 +178,8 @@
 										{#if job?.['running']}
 											<div class="flex flex-row-reverse w-full">
 												<Button
-													color="red"
-													variant="border"
+													variant="accent"
+													destructive
 													on:click={() => jobLoader?.cancelJob()}
 												>
 													<Loader2 size={14} class="animate-spin mr-2" />
@@ -227,9 +227,9 @@
 													{:else if testIsLoading}
 														<div class="p-2"><Loader2 class="animate-spin" /> </div>
 													{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
-														<div class="p-2 text-tertiary">Result is undefined</div>
+														<div class="p-2 text-primary">Result is undefined</div>
 													{:else}
-														<div class="p-2 text-tertiary">
+														<div class="p-2 text-primary">
 															<Loader2 size={14} class="animate-spin mr-2" />
 														</div>
 													{/if}
@@ -248,9 +248,9 @@
 														{:else if testIsLoading}
 															<div class="p-2"><Loader2 class="animate-spin" /> </div>
 														{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
-															<div class="p-2 text-tertiary">Result is undefined</div>
+															<div class="p-2 text-primary">Result is undefined</div>
 														{:else}
-															<div class="p-2 text-tertiary">
+															<div class="p-2 text-primary">
 																<Loader2 size={14} class="animate-spin mr-2" />
 															</div>
 														{/if}
@@ -276,7 +276,7 @@
 									</div>
 								{/if}
 							{:else}
-								<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
+								<div class="text-sm p-2 text-primary">Select a job to see its details</div>
 							{/if}
 						</div>
 					{/if}
@@ -287,8 +287,7 @@
 			{#if refreshComponents}
 				<Button
 					size="md"
-					color="light"
-					variant="border"
+					variant="default"
 					on:click={() => {
 						refreshComponents?.()
 					}}
@@ -299,15 +298,14 @@
 			{/if}
 			<Button
 				size="md"
-				color="light"
-				variant="border"
+				variant="default"
 				on:click={() => {
 					dispatch('clear')
 				}}
 				>Clear jobs
 			</Button>
 			{#if hasErrors}
-				<Button size="md" color="light" variant="border" on:click={() => dispatch('clearErrors')}>
+				<Button size="md" variant="default" on:click={() => dispatch('clearErrors')}>
 					Clear Errors &nbsp;<BellOff size={14} />
 				</Button>
 			{/if}
diff --git a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
index e52eb6cff8..7572c8c0fe 100644
--- a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
@@ -87,10 +87,10 @@
 
 		{#snippet actions()}
 			{#if !$userStore?.operator}
-				<Button on:click={saveDraft} startIcon={{ icon: Save }} color="dark" size="xs">
+				<Button on:click={saveDraft} startIcon={{ icon: Save }} variant="accent" size="xs">
 					Save as draft
 				</Button>
-				<Button on:click={saveApp} startIcon={{ icon: Globe }} color="dark" size="xs">
+				<Button on:click={saveApp} startIcon={{ icon: Globe }} variant="accent" size="xs">
 					Deploy
 				</Button>
 			{/if}
diff --git a/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
index 576fac8643..40c72b061d 100644
--- a/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
+++ b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
@@ -587,9 +587,9 @@ export async function main(
 			/>
 		</div>
 		<Button
-			color="dark"
+			variant="accent"
 			startIcon={{ icon: Save }}
-			size="sm"
+			unifiedSize="md"
 			on:click={async () => {
 				await enableAppReporting()
 				sendUserToast('App reporting updated')
@@ -649,28 +649,35 @@ export async function main(
 					min="768"
 				/>
 				x
-				<input type="number" class="text-sm" bind:value={customHeight} placeholder="auto" min="0" />
+				<input type="number" bind:value={customHeight} placeholder="auto" min="0" />
 			</div>
 		</Section>
 
 		<Section label="Notification">
 			<Tabs bind:selected={selectedTab}>
 				{#if !$enterpriseLicense}
-					<Tab value="custom">Custom</Tab>
+					<Tab value="custom" label="Custom" />
 				{/if}
-				<Tab value="slack" disabled={!$enterpriseLicense}
-					>Slack{!$enterpriseLicense ? ' (EE only)' : ''}</Tab
-				>
-				<Tab value="discord" disabled={!$enterpriseLicense}
-					>Discord{!$enterpriseLicense ? ' (EE only)' : ''}</Tab
-				>
-				<Tab value="email" disabled={!$enterpriseLicense}>
-					<div class="flex flex-row gap-1 items-center"
-						>Email{!$enterpriseLicense ? ' (EE only)' : ''}
-					</div>
-				</Tab>
+				<Tab
+					value="slack"
+					disabled={!$enterpriseLicense}
+					label="Slack{!$enterpriseLicense ? ' (EE only)' : ''}"
+				/>
+
+				<Tab
+					value="discord"
+					disabled={!$enterpriseLicense}
+					label="Discord{!$enterpriseLicense ? ' (EE only)' : ''}"
+				/>
+
+				<Tab
+					value="email"
+					disabled={!$enterpriseLicense}
+					label="Email{!$enterpriseLicense ? ' (EE only)' : ''}"
+				/>
+
 				{#if $enterpriseLicense}
-					<Tab value="custom">Custom</Tab>
+					<Tab value="custom" label="Custom" />
 				{/if}
 			</Tabs>
 			{#if selectedTab === 'custom'}
@@ -683,7 +690,7 @@ export async function main(
 						allowRefresh
 					/>
 				</div>
-				<div class="prose text-2xs text-tertiary mt-2">
+				<div class="prose text-2xs text-primary mt-2">
 					Pick a script that does whatever with the PDF/PNG report.
 
 					<br />
@@ -707,8 +714,7 @@ export async function main(
 									>.
 								</p>
 								<Button
-									variant="border"
-									color="light"
+									variant="default"
 									on:click={getWorspaceSlackSetting}
 									startIcon={{ icon: RotateCw }}
 								/>
@@ -735,8 +741,8 @@ export async function main(
 				loading={testLoading}
 				{disabled}
 				on:click={testReport}
-				size="xs"
-				color="dark"
+				unifiedSize="md"
+				variant="accent"
 				btnClasses="w-auto"
 			>
 				Send test report
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 8ef16cb097..e717205670 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -308,8 +308,7 @@
 							</pre>
 				</div>
 				<Button
-					color="red"
-					variant="border"
+					variant="default"
 					on:click={() => $openDebugRun?.($errorByComponent[component.id]?.id ?? '')}
 					>Open Debug Runs</Button
 				>
diff --git a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
index 73113984fa..95bf74acf8 100644
--- a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
+++ b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
@@ -106,7 +106,7 @@
 							{/each}
 						</div>
 					{:else}
-						<div class="text-sm text-tertiary">No items</div>
+						<div class="text-sm text-primary">No items</div>
 					{/if}
 				{:else}
 					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
@@ -119,7 +119,7 @@
 			{#if selectedVersion}
 				{#if selected}
 					<div class="flex flex-col justify-between">
-						<span class="flex flex-row text-sm p-1 text-tertiary">
+						<span class="flex flex-row text-sm p-1 text-primary">
 							{#if deploymentMsgUpdateMode}
 								<div class="flex w-full">
 									<input
@@ -201,7 +201,7 @@
 					<Skeleton layout={[[40]]} />
 				{/if}
 			{:else}
-				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
+				<div class="text-sm p-2 text-primary">Select a deployment version to see its details</div>
 			{/if}
 		</div>
 	</Pane>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 015990c2e4..f744922c98 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -144,7 +144,7 @@
 				</div>
 				{#if $bgRuns.length > 0}
 					<Popover notClickable>
-						<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
+						<span class="!text-2xs text-primary inline-flex gap-1 items-center"
 							><Loader2 size={10} class="animate-spin" /> {$bgRuns.length}
 						</span>
 						{#snippet text()}
@@ -152,7 +152,7 @@
 								><div class="flex flex-col">
 									{#each $bgRuns as bgRun}
 										<div class="flex gap-2 items-center">
-											<div class="text-2xs text-tertiary">{bgRun}</div>
+											<div class="text-2xs text-primary">{bgRun}</div>
 										</div>
 									{/each}
 								</div></span
diff --git a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
index cdc22abc92..7a72ac62b3 100644
--- a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
+++ b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
@@ -16,7 +16,6 @@
 </script>
 
 <ToggleButtonGroup
-	class="h-[30px]"
 	bind:selected={$mode}
 	on:selected={(e) => {
 		jobsById.set({})
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
index 2698e418b0..bed52c94e9 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
@@ -41,11 +41,10 @@
 		<Button
 			disabled={componentNumber == 0}
 			on:click
-			color="light"
 			size="xs"
-			variant="border"
+			variant="default"
 			btnClasses={twMerge(
-				'!rounded-none text-tertiary !text-2xs !border-r border-y-0 border-l-0 group'
+				'!rounded-none text-primary !text-2xs !border-r border-y-0 border-l-0 group'
 			)}
 			title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
 				? `every ${interval / 1000} seconds`
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte
index fff115cc86..e4628835fc 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte
@@ -24,7 +24,7 @@
 	<div class="w-9">
 		{#if $bgRuns.length > 0}
 			<Popover notClickable>
-				<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
+				<span class="!text-2xs text-primary inline-flex gap-1 items-center"
 					><Loader2 size={10} class="animate-spin" /> {$bgRuns.length}
 				</span>
 				{#snippet text()}
diff --git a/frontend/src/lib/components/apps/editor/RunnableJobPanelInner.svelte b/frontend/src/lib/components/apps/editor/RunnableJobPanelInner.svelte
index 9d9f36b0a7..a97d15273b 100644
--- a/frontend/src/lib/components/apps/editor/RunnableJobPanelInner.svelte
+++ b/frontend/src/lib/components/apps/editor/RunnableJobPanelInner.svelte
@@ -21,8 +21,8 @@
 	<Pane size={frontendJob ? 30 : 50} minSize={10}>
 		{#if frontendJob}
 			<div class="p-2 bg-surface-secondary h-full w-full">
-				<div class="text-sm text-tertiary pb-4">Frontend Job</div>
-				<div class="text-2xs text-tertiary">Check your browser console to see the logs</div>
+				<div class="text-sm text-primary pb-4">Frontend Job</div>
+				<div class="text-2xs text-primary">Check your browser console to see the logs</div>
 			</div>
 		{:else}
 			<LogViewer
@@ -37,7 +37,7 @@
 			/>
 		{/if}
 	</Pane>
-	<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
+	<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-primary">
 		{#if frontendJob}
 			<div class="break-words relative h-full px-1">
 				<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
index cfb53b300f..14b19bf719 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
@@ -963,7 +963,7 @@
 				>{error}</pre
 			>
 			<div class="flex mt-4">
-				<Button wrapperClasses="border rounded !border-gray-400" color="dark" on:click={reset}
+				<Button wrapperClasses="border rounded !border-gray-400" variant="accent" on:click={reset}
 					>reset</Button
 				>
 			</div>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 9decae77b1..4766e4056a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -210,7 +210,7 @@
 
 <div class="relative" id="app-editor-component-list">
 	{#if componentsFiltered.reduce((acc, { components, presets }) => acc + components.length + (Array.isArray(presets) ? presets.length : 0), 0) === 0}
-		<div class="absolute left-0 top-0 w-full text-sm text-tertiary text-center py-6 px-2">
+		<div class="absolute left-0 top-0 w-full text-sm text-primary text-center py-6 px-2">
 			No components found
 		</div>
 	{:else}
@@ -256,7 +256,7 @@
 											class="cursor-move transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 											justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 										>
-											<SvelteComponent class="text-primary" />
+											<SvelteComponent class="text-secondary" />
 										</button>
 										<div class="text-xs text-center flex-wrap text-secondary mt-1">
 											{componentsRecord[item].name}
@@ -271,7 +271,7 @@
 												onclick={() => addPresetComponent(presetItem)}
 												title={presetsRecord[presetItem].name}
 												class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
+										justify-center bg-surface hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 											>
 												<SvelteComponent_1 class="text-secondary" />
 											</button>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
index c3597adb90..c50b0ad656 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
@@ -125,16 +125,13 @@
 
 							<Tabs selected="selectors">
 								{#if customisation.selectors.length > 0}
-									<Tab value="selectors" size="xs">
-										Selectors ({customisation.selectors.length})
-									</Tab>
+									<Tab value="selectors" label="Selectors ({customisation.selectors.length})" />
 								{/if}
 								{#if customisation.variables.length > 0}
-									<Tab value="variables" size="xs">
-										<div class="flex flex-row gap-2 justify-center-center items-center">
-											Variables ({customisation.variables.length})
-										</div>
-									</Tab>
+									<Tab
+										value="variables"
+										label={`Variables (${customisation.variables.length})`}
+									></Tab>
 								{/if}
 								{#snippet content()}
 									<div class="h-full">
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index 8fa7f5d9ab..e483789c5e 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -131,7 +131,7 @@
 	{#if value}
 		<div class="p-2 flex flex-col gap-2">
 			{#if tooltip}
-				<div class="text-tertiary text-2xs py-2">{tooltip}</div>
+				<div class="text-primary text-2xs py-2">{tooltip}</div>
 			{/if}
 
 			{#if value.style !== undefined || forceStyle}
@@ -139,7 +139,7 @@
 					<!-- svelte-ignore a11y_label_has_associated_control -->
 					<div class="block w-full">
 						<div class="flex flex-row justify-between items-center w-full h-8 mb-1">
-							<div class="text-xs font-medium text-tertiary"> Plain CSS </div>
+							<div class="text-xs font-medium text-primary"> Plain CSS </div>
 
 							<div class="flex flex-row gap-1">
 								{#if overriden}
@@ -161,7 +161,6 @@
 										{#snippet children({ item })}
 											<ToggleButton
 												small
-												light
 												value={'false'}
 												icon={Code}
 												tooltip="Edit the CSS directly"
@@ -169,7 +168,6 @@
 											/>
 											<ToggleButton
 												small
-												light
 												value={'true'}
 												icon={Paintbrush2}
 												tooltip="Open the rich editor to style the component with a visual interface"
@@ -206,7 +204,8 @@
 								<Badge
 									small
 									baseClass="cursor-pointer"
-									on:click={() => {
+									clickable
+									onclick={() => {
 										value.style = value.style === '' ? `${v};` : `${value.style} ${v};`
 									}}
 								>
@@ -220,7 +219,7 @@
 
 			{#if value.class !== undefined || forceClass}
 				<!-- svelte-ignore a11y_label_has_associated_control -->
-				<div class="text-xs font-medium text-tertiary mb-1">
+				<div class="text-xs font-medium text-primary mb-1">
 					Tailwind classes
 					<Tooltip light documentationLink="https://tailwindcss.com/">
 						Use any tailwind classes to style your component
@@ -243,7 +242,8 @@
 							<Badge
 								baseClass="cursor-pointer"
 								small
-								on:click={() => {
+								clickable
+								onclick={() => {
 									value.class = value.class === '' ? cls : `${value.class} ${cls}`
 									render++
 								}}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
index 629352a87f..f0e736fb3a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
@@ -40,8 +40,8 @@
 </Drawer>
 
 <Tabs bind:selected={selectedTab}>
-	<Tab size="xs" value="css">Code</Tab>
-	<Tab size="xs" value="theme">Theme</Tab>
+	<Tab value="css" label="Code" />
+	<Tab value="theme" label="Theme" />
 	{#snippet content()}
 		{#if selectedTab === 'css'}
 			<SplitPanesWrapper>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
index 705d230ddf..7460c30de9 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
@@ -88,7 +88,7 @@
 				/></div
 			></div
 		>
-		<Button on:click={() => addCustomComponent(nameField)} color="dark" size="xs"
+		<Button on:click={() => addCustomComponent(nameField)} variant="accent" size="xs"
 			>Add Custom Component</Button
 		>
 	</div>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte
index 16302644d8..00d6262c68 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte
@@ -93,7 +93,7 @@
 <div class="p-2 flex flex-col items-start w-auto gap-2 relative">
 	<div class="w-full flex flex-row gap-2 items-center">
 		<input bind:value={nameField} placeholder={'Group name'} />
-		<Button on:click={() => addGroup(nameField)} color="dark" size="xs">Create group</Button>
+		<Button on:click={() => addGroup(nameField)} variant="accent" size="xs">Create group</Button>
 	</div>
 
 	{#if loading}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
index 129a96b6c6..24ea32fa18 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
@@ -59,14 +59,14 @@
 	{#if prefix !== undefined}
 		<button
 			onclick={preventDefault(() => isOpenStore.toggle(storeTitle))}
-			class="w-full flex justify-between items-center text-secondary px-2 py-1
+			class="w-full flex justify-between items-center px-2 py-1
 			rounded-sm duration-200 hover:bg-surface-hover {toggleClasses}"
 		>
-			<h1 class="text-sm font-semibold text-left">
+			<h1 class="text-left text-xs font-semibold text-emphasis">
 				{#if titleSlot}{@render titleSlot()}{:else}
 					{title}
 					{#if subtitle}
-						<span class="text-2xs text-tertiary ml-1">
+						<span class="text-2xs text-secondary font-normal ml-1">
 							{subtitle}
 						</span>
 					{/if}
@@ -83,17 +83,19 @@
 			</div>
 		{/if}
 	{:else}
-		<h1 class="text-base font-semibold text-left px-2 py-1 text-secondary">
+		<h1 class="text-left px-2 py-1">
 			{#if titleSlot}{@render titleSlot()}{:else}
-				{title}
+				<span class="text-emphasis text-xs font-semibold">
+					{title}
+				</span>
 				{#if subtitle}
-					<span class="text-2xs text-tertiary ml-1">
+					<span class="text-2xs text-secondary font-normal ml-1">
 						{subtitle}
 					</span>
 				{/if}
 			{/if}
 			{#if tooltip}
-				<Tooltip class="ml-1" {documentationLink}>{tooltip}</Tooltip>
+				<Tooltip class="ml-1 text-secondary" {documentationLink}>{tooltip}</Tooltip>
 			{/if}
 		</h1>
 		<div class="px-2">
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
index 90430e7079..6263bc8026 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
@@ -38,7 +38,7 @@
 			<div class="flex flex-row gap-2">
 				<input {onkeydown} bind:value={editedName} />
 				<Button
-					color="dark"
+					variant="accent"
 					size="xs"
 					on:click={() => {
 						dispatch('update', { path: row.path, name: editedName })
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
index ea9bb21f97..cf5bda33c7 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -224,7 +224,7 @@
 						} = styleStore.getProp(p)}
 						{#if prop !== undefined && index !== undefined}
 							<div class="pb-2 pt-1">
-								<div class="text-xs font-semibold text-tertiary pb-0.5">
+								<div class="text-xs font-semibold text-primary pb-0.5">
 									{formatKebabCase(prop.key)}
 								</div>
 								<div class="flex items-center gap-1">
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
index 754b68577f..b4efdb87d4 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
@@ -55,7 +55,7 @@
 
 <div class={inline && type !== StylePropertyType.color ? '' : 'w-full'}>
 	{#if prop.value['title']}
-		<div class="font-medium text-xs text-tertiary">
+		<div class="font-medium text-xs text-primary">
 			{prop.value['title']}
 		</div>
 	{/if}
@@ -65,9 +65,8 @@
 			{#each $styleStore.topColors as color}
 				<Popover placement="bottom" notClickable disappearTimeout={0} class="flex">
 					<Button
-						color="light"
 						size="xs"
-						variant="border"
+						variant="default"
 						btnClasses="!p-0 !w-[34px] !h-[34px]"
 						aria-label="Set {key} to {color}"
 						style={`background-color: ${color};`}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
index e0735da9d8..abeb1bed53 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
@@ -98,7 +98,7 @@
 		<Button
 			disabled={type != 'inlined' || nameField == ''}
 			on:click={() => addTheme(nameField)}
-			color="dark"
+			variant="accent"
 			size="xs">Create theme</Button
 		>
 	</div>
@@ -113,8 +113,7 @@
 		<div class="flex flex-row justify-end items-center w-full h-10">
 			{#if $previewTheme != undefined}
 				<Button
-					color="dark"
-					variant="border"
+					variant="default"
 					size="xs"
 					on:click={() => {
 						previewTheme.set(undefined)
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
index 4f3f601533..cb1793b252 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
@@ -38,7 +38,7 @@
 		<div class="flex flex-row gap-2">
 			<input bind:value={editedName} />
 			<Button
-				color="dark"
+				variant="accent"
 				size="xs"
 				on:click={async () => {
 					if (!$workspaceStore) return
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
index 8955c7a13e..f5e26488b6 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
@@ -200,7 +200,7 @@
 				<Button color="light" size="xs" on:click={preview} startIcon={{ icon: Eye }}>
 					Preview
 				</Button>
-				<Button color="dark" size="xs2" on:click={apply}>Apply</Button>
+				<Button variant="accent" size="xs2" on:click={apply}>Apply</Button>
 			{/if}
 
 			<Dropdown items={getDropdownItems} class="w-fit" />
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
index 9baad1f998..d6092ce6e5 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
@@ -63,8 +63,8 @@
 			/>
 		</div>
 	{:else if $search.length > 0}
-		<div class="text-xs pl-2 text-tertiary">No results</div>
+		<div class="text-xs pl-2 text-primary">No results</div>
 	{:else}
-		<div class="text-xs pl-2 text-tertiary">No outputs</div>
+		<div class="text-xs pl-2 text-primary">No outputs</div>
 	{/if}
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
index 534be983ac..64403e9975 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
@@ -52,13 +52,13 @@
 	</ToggleButtonGroup>
 	{#if selectedRendering == 'eager'}
 		<Section label="Eager mode">
-			<span class="text-tertiary"
+			<span class="text-primary"
 				>In eager mode, all components will be fully initialized, even when they are not visible.</span
 			>
 		</Section>
 	{:else if selectedRendering == 'semi-lazy'}
 		<Section label="Semi-Lazy mode">
-			<span class="text-tertiary"
+			<span class="text-primary"
 				>In semi-lazy mode, components will be semi-initialized when hidden. That is the default
 				mode.</span
 			>
@@ -66,7 +66,7 @@
 	{:else if selectedRendering == 'lazy'}
 		<Section label="Component ids to wait the initialization of before the initial refresh">
 			<JsonEditor bind:value={$app.lazyInitRequire} {code} />
-			<span class="text-tertiary text-xs">
+			<span class="text-primary text-xs">
 				{'e.g: ["a", "b"]'}, no need to put background runnables ids
 			</span>
 		</Section>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
index ee9ccc88fc..dafa296a41 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
@@ -94,7 +94,7 @@
 						/>
 					{/each}
 				{:else}
-					<div class="text-xs text-tertiary border-y border-l p-1">No components</div>
+					<div class="text-xs text-primary border-y border-l p-1">No components</div>
 				{/if}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
index 4aa539d9a1..2641b14f30 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
@@ -214,7 +214,7 @@
 					disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
 					title="Select component"
 					onclick={stopPropagation(() => ($selectedComponent = [id]))}
-					class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
+					class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-primary"
 				>
 					<div
 						class={classNames(
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
index 68fbcc35a4..d83a62ac22 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
@@ -4,12 +4,14 @@
 	import { Database } from 'lucide-svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import { autoPlacement } from '@floating-ui/core'
+	import type { ComponentProps } from 'svelte'
 
 	interface Props {
 		cache_ttl: number | undefined
+		btnProps?: ComponentProps<typeof Button>
 	}
 
-	let { cache_ttl = $bindable() }: Props = $props()
+	let { cache_ttl = $bindable(), btnProps }: Props = $props()
 </script>
 
 <Popover
@@ -35,6 +37,7 @@
 			iconOnly
 			startIcon={{ icon: Database }}
 			title="Cache settings"
+			{...btnProps}
 		/>
 	{/snippet}
 	{#snippet content()}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index e51d4adb97..61dc0f3c21 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -103,19 +103,9 @@
 		<div>
 			<div class="max-w-6xl">
 				<Tabs bind:selected={tab}>
-					<Tab size="sm" value="workspacescripts">
-						<div class="flex gap-2 items-center my-1">
-							<Building size={18} />
-							Workspace Scripts
-						</div>
-					</Tab>
+					<Tab value="workspacescripts" label="Workspace Scripts" icon={Building} />
 
-					<Tab size="sm" value="hubscripts">
-						<div class="flex gap-2 items-center my-1">
-							<Globe2 size={18} />
-							Hub Scripts
-						</div>
-					</Tab>
+					<Tab value="hubscripts" label="Hub Scripts" icon={Globe2} />
 				</Tabs>
 				<div class="my-2"></div>
 				<div class="flex flex-col gap-y-16">
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index d95fb7e04d..01adbc539e 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -24,6 +24,7 @@
 	import CacheTtlPopup from './CacheTtlPopup.svelte'
 	import EditorSettings from '$lib/components/EditorSettings.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	const {
 		runnableComponents,
@@ -265,17 +266,19 @@
 			{#if name !== undefined}
 				{#if !transformer}
 					<div class="flex flex-row gap-2 w-full items-center">
-						<input
-							onkeydown={stopPropagation(bubble('keydown'))}
+						<TextInput
 							bind:value={name}
-							placeholder="Inline script name"
-							class="!text-xs !rounded-sm !shadow-none"
-							onkeyup={() => {
-								$app = $app
-								if (stateId) {
-									$stateId++
-								}
+							inputProps={{
+								onkeyup: () => {
+									$app = $app
+									if (stateId) {
+										$stateId++
+									}
+								},
+								placeholder: 'Inline script name',
+								onkeydown: () => stopPropagation(bubble('keydown'))
 							}}
+							size="sm"
 						/>
 						<div
 							title={validCode ? 'Main function parsable' : 'Main function not parsable'}
@@ -288,7 +291,10 @@
 			{/if}
 			<div class="flex w-full flex-row gap-1 items-center justify-end">
 				{#if inlineScript}
-					<CacheTtlPopup bind:cache_ttl={inlineScript.cache_ttl} />
+					<CacheTtlPopup
+						bind:cache_ttl={inlineScript.cache_ttl}
+						btnProps={{ unifiedSize: 'sm', variant: 'subtle' }}
+					/>
 				{/if}
 				<ScriptGen
 					lang={inlineScript?.language}
@@ -300,14 +306,15 @@
 						return acc
 					}, {})}
 					{transformer}
+					btnProps={{ unifiedSize: 'sm', variant: 'subtle' }}
 				/>
-				<EditorSettings />
+				<EditorSettings btnProps={{ unifiedSize: 'sm', variant: 'subtle' }} />
 
 				<Button
 					title="Delete"
-					size="xs2"
-					color="light"
-					variant="contained"
+					unifiedSize="sm"
+					variant="subtle"
+					destructive
 					aria-label="Delete"
 					on:click={() => dispatch('delete')}
 					endIcon={{ icon: Trash2 }}
@@ -315,10 +322,9 @@
 				/>
 				{#if inlineScript.language != 'frontend'}
 					<Button
-						size="xs2"
-						color="light"
+						unifiedSize="sm"
+						variant="subtle"
 						title="Full Editor"
-						variant="contained"
 						on:click={() => {
 							inlineScriptEditorDrawer?.openDrawer()
 						}}
@@ -328,9 +334,8 @@
 				{/if}
 
 				<Button
-					variant="border"
-					size="xs2"
-					color="light"
+					variant="default"
+					unifiedSize="sm"
 					on:click={async () => {
 						editor?.format()
 						simpleEditor?.format()
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index cd8fa66438..977a734ffc 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -59,7 +59,7 @@
 			}}
 		/>
 	{:else}
-		<div class="px-2 pt-4 text-tertiary">
+		<div class="px-2 pt-4 text-primary">
 			Selected editor component is a transformer but component has no transformer
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
index cc94f040f7..0fa54194f3 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
@@ -49,7 +49,7 @@
 			}}
 		/>
 	{:else}
-		<div class="px-2 pt-4 text-tertiary">
+		<div class="px-2 pt-4 text-primary">
 			Selected editor component is a transformer but component has no transformer
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
index b5d99942e6..84ff62f502 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
@@ -147,9 +147,8 @@
 		{/if}
 
 		<Button
-			variant="border"
+			variant="default"
 			size="xs"
-			color="light"
 			startIcon={{ icon: RefreshCw }}
 			on:click={async () => {
 				sendUserToast('Refreshing inputs')
@@ -162,8 +161,7 @@
 		/>
 		<Button
 			size="xs"
-			variant="border"
-			color="red"
+			variant="default"
 			startIcon={{ icon: Trash }}
 			on:click={() => {
 				dispatch('delete')
@@ -173,9 +171,8 @@
 		</Button>
 		{#if runnable.runType == 'flow'}
 			<Button
-				variant="border"
+				variant="default"
 				size="xs"
-				color="light"
 				startIcon={{ icon: Eye }}
 				on:click={() => {
 					flowPath = runnable.path
@@ -185,18 +182,16 @@
 				Expand
 			</Button>
 			<Button
-				variant="border"
+				variant="default"
 				size="xs"
-				color="light"
 				startIcon={{ icon: Pen }}
 				endIcon={{ icon: ExternalLink }}
 				target="_blank"
 				href="{base}/flows/edit/{runnable.path}?nodraft=true">Edit</Button
 			>
 			<Button
-				variant="border"
+				variant="default"
 				size="xs"
-				color="light"
 				startIcon={{ icon: Eye }}
 				endIcon={{ icon: ExternalLink }}
 				target="_blank"
@@ -207,7 +202,7 @@
 		{:else}
 			<Button
 				size="xs"
-				variant="border"
+				variant="default"
 				startIcon={{ icon: GitFork }}
 				on:click={() => {
 					fork(runnable.path)
@@ -238,8 +233,7 @@
 				<Button
 					nonCaptureEvent={true}
 					btnClasses={'bg-surface text-primay hover:bg-hover'}
-					color="light"
-					variant="border"
+					variant="default"
 					size="xs">Cache</Button
 				>
 			{/snippet}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 82e8b5804c..de29f3bd24 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -142,7 +142,7 @@
 				{/if}
 			{/each}
 		{:else}
-			<div class="text-sm text-tertiary text-center py-8 px-2">
+			<div class="text-sm text-primary text-center py-8 px-2">
 				No runnable found at id {$selectedComponentInEditor}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 3be50f2aa5..bfbca89a20 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -180,7 +180,7 @@
 					</div>
 				{/if}
 				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
-					<div class="text-xs text-tertiary">No scripts/flows</div>
+					<div class="text-xs text-primary">No scripts/flows</div>
 				{/if}
 			</div>
 		</div>
@@ -198,8 +198,7 @@
 				</div>
 				<Button
 					size="xs"
-					color="light"
-					variant="border"
+					variant="default"
 					btnClasses="!rounded-full !p-1"
 					title="Create a new background runnable"
 					aria-label="Create a new background runnable"
@@ -242,7 +241,7 @@
 						{/if}
 					{/each}
 				{:else}
-					<div class="text-xs text-tertiary">No background runnable</div>
+					<div class="text-xs text-primary">No background runnable</div>
 				{/if}
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
index b5144d7543..fef8456bd1 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
@@ -33,7 +33,7 @@
 		<Button
 			loading={runLoading}
 			size="xs"
-			color="dark"
+			variant="accent"
 			btnClasses="!px-2 !py-1"
 			on:click={async () => {
 				runLoading = true
@@ -51,8 +51,8 @@
 	{:else}
 		<Button
 			size="xs"
-			color="red"
-			variant="border"
+			variant="accent"
+			destructive
 			btnClasses="!px-2 !py-1 !ml-[3px]"
 			on:click={async () => {
 				cancelable?.forEach((f) => f.cancel())
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
index eb28ce77b4..0745e35165 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
@@ -24,7 +24,7 @@
 
 {#if component.horizontalAlignment || component.verticalAlignment}
 	<div class="flex flex-wrap gap-x-4 gap-y-1 w-full justify-end items-center">
-		<div class="text-tertiary text-xs">Alignment</div>
+		<div class="text-primary text-xs">Alignment</div>
 		{#if component.horizontalAlignment}
 			<ToggleButtonGroup
 				noWFull
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
index 36e8b2d84a..b6d1c617da 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
@@ -204,12 +204,14 @@
 			// If deleting actions column, clear all table actions
 			if (subFieldType === 'ag-grid' && item && item._isActionsColumn === true) {
 				const gridItem = id ? findGridItem($app, id) : null
-				if (gridItem && (
-					gridItem.data.type === 'aggridcomponent' ||
-					gridItem.data.type === 'aggridcomponentee' ||
-					gridItem.data.type === 'aggridinfinitecomponent' ||
-					gridItem.data.type === 'aggridinfinitecomponentee'
-				) && Array.isArray(gridItem.data.actions)) {
+				if (
+					gridItem &&
+					(gridItem.data.type === 'aggridcomponent' ||
+						gridItem.data.type === 'aggridcomponentee' ||
+						gridItem.data.type === 'aggridinfinitecomponent' ||
+						gridItem.data.type === 'aggridinfinitecomponentee') &&
+					Array.isArray(gridItem.data.actions)
+				) {
 					gridItem.data.actions.length = 0
 				}
 				await updateConfiguration()
@@ -273,7 +275,7 @@
 <div class="flex gap-2 flex-col mt-2 w-full">
 	{#if Array.isArray(items) && componentInput.value}
 		<div class="flex flex-row items-center justify-between mr-1">
-			<div class="text-xs text-tertiary font-semibold">{pluralize(items.length, 'item')}</div>
+			<div class="text-xs text-primary font-semibold">{pluralize(items.length, 'item')}</div>
 			{#if subFieldType == 'labeledselect'}
 				<Toggle
 					options={{
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
index 7657a2f3c1..f4250d44ae 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
@@ -182,7 +182,7 @@
 															</Badge>
 														</div>
 														<Button
-															color="dark"
+															variant="accent"
 															size="xs"
 															on:click={() => {
 																if (component?.customCss?.[cssKey]?.style != undefined) {
@@ -236,7 +236,7 @@
 															</Badge>
 														</div>
 														<Button
-															color="dark"
+															variant="accent"
 															size="xs"
 															on:click={() => {
 																if (type && $app.css?.[type]) {
@@ -285,7 +285,7 @@
 							</div>
 							<Button
 								size="xs"
-								color="dark"
+								variant="accent"
 								on:click={() => {
 									appendMigrationsToCss(migrations)
 									migrationModalOpen = false
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 39b9bc23f7..3d9c7d9a4c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -298,6 +298,7 @@
 							{:else if item.data?.componentInput?.type === 'template' || item.data?.componentInput?.type === 'templatev2'}
 								<div class="py-1 min-h-[28px] rounded border border-1 border-gray-500">
 									<TemplateEditor
+										yPadding={7}
 										fontSize={12}
 										bind:code={item.data.componentInput.eval}
 										{extraLib}
@@ -307,7 +308,7 @@
 								{#if item.data?.componentInput?.type === 'templatev2'}
 									{#if item.data?.componentInput.connections?.length > 0}
 										<div class="flex flex-wrap gap-2 items-center">
-											<div class="text-2xs text-tertiary">Re-evaluated on changes to:</div>
+											<div class="text-2xs text-primary">Re-evaluated on changes to:</div>
 											<div class="flex flex-wrap gap-1">
 												{#each item.data?.componentInput.connections ?? [] as connection (connection.componentId + '-' + connection.id)}
 													<span
@@ -457,7 +458,7 @@
 				/>
 			</PanelSection>
 		{:else if item.data.type != 'containercomponent'}
-			<div class="h-full w-full text-sm text-tertiary text-center py-8 px-2">
+			<div class="h-full w-full text-sm text-primary text-center py-8 px-2">
 				{ccomponents[component.type].name} has no configuration
 			</div>
 		{/if}
@@ -471,9 +472,8 @@
 				{#snippet action()}
 					<div class="flex justify-end flex-wrap gap-1">
 						<Button
-							color="light"
 							size="xs"
-							variant="border"
+							variant="default"
 							startIcon={{ icon: ChevronLeft }}
 							on:click={() => secondaryMenuLeft.toggle(StylePanel, { type: 'style' })}
 						>
@@ -529,20 +529,17 @@
 					<div>
 						<Button
 							size="xs"
-							color="red"
-							variant="border"
+							variant="default"
 							on:click={removeGridElement}
-							shortCut={{
-								key: isMac() ? getModifierKey() + 'Del' : 'Del',
-								withoutModifier: true
-							}}
+							shortCut={{ key: isMac() ? getModifierKey() + 'Del' : 'Del', withoutModifier: true }}
+							destructive
 						>
 							Delete
 						</Button>
 					</div>
 				{/snippet}
 
-				<div class="overflow-auto grid grid-cols-2 gap-1 text-tertiary">
+				<div class="overflow-auto grid grid-cols-2 gap-1 text-primary">
 					<div>
 						<span class="text-secondary text-xs">Copy:</span>
 					</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
index 9961a0910d..3c95156a71 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
@@ -78,9 +78,8 @@
 							{#snippet action()}
 								<Button
 									size="xs"
-									color="light"
 									startIcon={{ icon: Trash }}
-									variant="border"
+									variant="default"
 									on:click={() => {
 										nodes = removeNode(nodes, selectedNode)
 
@@ -197,7 +196,7 @@
 			drawer?.openDrawer()
 		}}
 		size="xs"
-		color="dark"
+		variant="accent"
 		startIcon={{ icon: Network }}
 	>
 		Graph editor
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
index b2333dd085..c88793e6cc 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
@@ -9,7 +9,6 @@
 	import type { Writable } from 'svelte/store'
 	import { Badge } from '$lib/components/common'
 	import { X } from 'lucide-svelte'
-	import { getStateColor } from '$lib/components/graph'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import NodeWrapper from '$lib/components/graph/renderers/nodes/NodeWrapper.svelte'
 
@@ -47,15 +46,11 @@
 		<div class="rounded-sm group">
 			<Button
 				class={twMerge(
-					'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
+					'p-2 w-full h-8 relative rounded-sm border border-gray-400',
 					selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
-					'flex flex-row gap-2 items-center justify-between'
+					'flex flex-row gap-2 items-center justify-between bg-surface-tertiary'
 				)}
-				style="width: 275px; height: 34px; background-color: {getStateColor(
-					undefined,
-					darkMode,
-					true
-				)};"
+				style="width: 275px; height: 34px;"
 				on:click={() => {
 					selected = true
 					data.nodeCallbackHandler('select', data.node.id, data.node, data.parentIds, false)
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
index abe23fffe4..ea0738e9f9 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
@@ -136,7 +136,7 @@
 		subgrid.
 	</Alert>
 	{#if items.length == 0}
-		<span class="text-xs text-tertiary">No Tabs</span>
+		<span class="text-xs text-primary">No Tabs</span>
 	{/if}
 	<div class="w-full flex flex-col mt-2">
 		<section
@@ -198,8 +198,7 @@
 		</div>
 		<Button
 			size="xs"
-			color="light"
-			variant="border"
+			variant="default"
 			startIcon={{ icon: Plus }}
 			on:click={addCondition}
 			iconOnly
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte
index 61e8f90bec..2ea65801a8 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte
@@ -76,7 +76,7 @@
 		}`}
 	>
 		{#if Object.keys(groupFields ?? {}).length == 0}
-			<span class="text-xs text-tertiary">No group fields</span>
+			<span class="text-xs text-primary">No group fields</span>
 		{/if}
 		<div class="w-full flex gap-2 flex-col mt-2">
 			<InputsSpecsEditor
@@ -112,8 +112,7 @@
 				<Button
 					disabled={fieldName == ''}
 					size="sm"
-					color="light"
-					variant="border"
+					variant="default"
 					startIcon={{ icon: Plus }}
 					on:click={() => addField(fieldName)}
 					iconOnly
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte
index 65c8a346e1..80e78020b3 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte
@@ -129,7 +129,7 @@
 	title={`Items ${navbarItems && navbarItems.length > 0 ? `(${navbarItems.length})` : ''}`}
 >
 	{#if !navbarItems || navbarItems.length == 0}
-		<span class="text-xs text-tertiary">No items</span>
+		<span class="text-xs text-primary">No items</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		<section
@@ -196,7 +196,7 @@
 						/>
 
 						{#if resolvedPaths[item.originalIndex]}
-							<div class="text-xs text-tertiary flex gap-2 flex-row flex-wrap">
+							<div class="text-xs text-primary flex gap-2 flex-row flex-wrap">
 								Path: <Badge small>{resolvedPaths[item.originalIndex]}</Badge>
 								{#if $appPath && resolvedPaths[item.originalIndex]?.includes($appPath)}
 									<Badge small color="blue"
@@ -216,13 +216,6 @@
 				{/key}
 			{/each}
 		</section>
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			startIcon={{ icon: Plus }}
-			on:click={addPath}
-			iconOnly
-		/>
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addPath} iconOnly />
 	</div>
 </PanelSection>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
index 6c5aeb82aa..0ec4de4d13 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
@@ -55,7 +55,7 @@
 
 <PanelSection title={`panes ${panes.length > 0 ? `(${panes.length})` : ''}`}>
 	{#if panes.length == 0}
-		<span class="text-xs text-tertiary">No panes</span>
+		<span class="text-xs text-primary">No panes</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col">
 		{#each panes as _, index (index)}
@@ -77,13 +77,6 @@
 				/>
 			</div>
 		{/each}
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			startIcon={{ icon: Plus }}
-			on:click={addTab}
-			iconOnly
-		/>
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addTab} iconOnly />
 	</div>
 </PanelSection>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 955f1f8c6f..b1111244db 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -182,7 +182,7 @@
 
 <PanelSection title={`${word}s ${tabs && tabs.length > 0 ? `(${tabs.length})` : ''}`}>
 	{#if !tabs || tabs.length == 0}
-		<span class="text-xs text-tertiary">No Tabs</span>
+		<span class="text-xs text-primary">No Tabs</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		<section
@@ -229,13 +229,6 @@
 				</div>
 			{/each}
 		</section>
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			startIcon={{ icon: Plus }}
-			on:click={addTab}
-			iconOnly
-		/>
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addTab} iconOnly />
 	</div>
 </PanelSection>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index b43dd5aab9..1329c2e97f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -178,7 +178,7 @@
 					{/if}
 				</div>
 				{#if displayType}
-					<div class="text-xs text-tertiary mr-1">
+					<div class="text-xs text-primary mr-1">
 						{fieldType === 'array' && subFieldType
 							? `${fieldTypeToTsType(subFieldType)}[]`
 							: fieldTypeToTsType(fieldType)}
@@ -219,43 +219,18 @@
 						}}
 					>
 						{#snippet children({ item })}
-							<ToggleButton
-								small
-								light
-								value="static"
-								icon={Pen}
-								iconOnly
-								tooltip="Static"
-								{item}
-							/>
+							<ToggleButton small value="static" icon={Pen} iconOnly tooltip="Static" {item} />
 							{#if userInputEnabled}
-								<ToggleButton
-									small
-									light
-									value="user"
-									icon={User}
-									iconOnly
-									tooltip="User Input"
-									{item}
-								/>
+								<ToggleButton small value="user" icon={User} iconOnly tooltip="User Input" {item} />
 							{/if}
 							{#if fileUpload}
-								<ToggleButton
-									small
-									light
-									value="upload"
-									icon={Upload}
-									iconOnly
-									tooltip="Upload"
-									{item}
-								/>
+								<ToggleButton small value="upload" icon={Upload} iconOnly tooltip="Upload" {item} />
 							{/if}
 							{#if fileUploadS3}
 								<ToggleButton
 									value="uploadS3"
 									icon={UploadCloud}
 									iconOnly
-									light
 									small
 									tooltip="Upload S3"
 									{item}
@@ -263,7 +238,6 @@
 							{/if}
 							{#if componentInput?.type === 'connected'}
 								<ToggleButton
-									light
 									value="connected"
 									icon={Plug2}
 									iconOnly
@@ -277,7 +251,6 @@
 									value="eval"
 									icon={FunctionSquare}
 									iconOnly
-									light
 									small
 									tooltip="Eval Legacy"
 									{item}
@@ -285,7 +258,6 @@
 							{/if}
 							<ToggleButton
 								value="evalv2"
-								light
 								icon={FunctionSquare}
 								iconOnly
 								small
@@ -365,8 +337,7 @@
 					/>
 				{/if}
 				<Button
-					variant="border"
-					color="light"
+					variant="default"
 					size="xs"
 					btnClasses="mt-1"
 					on:click={() => {
@@ -389,7 +360,7 @@
 				regexFilter={/\.(png|jpg|jpeg|svg|webp)$/i}
 			/>
 		{:else if componentInput?.type === 'user'}
-			<span class="text-2xs italic text-tertiary">Field's value is set by the user</span>
+			<span class="text-2xs italic text-primary">Field's value is set by the user</span>
 		{/if}
 		{#if (componentInput?.type === 'evalv2' || componentInput?.type === 'connected' || componentInput?.type === 'user') && ((fieldType == 'object' && format?.startsWith('resource-') && format !== 'resource-s3_object') || fieldType == 'resource')}
 			<div class="flex flex-row items-center">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index 3000f6c671..19dd309bec 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -58,7 +58,7 @@
 					<span class="text-xs font-semibold truncate text-primary">
 						{k}
 					</span>
-					<div class="text-tertiary text-xs">Managed by the component</div>
+					<div class="text-primary text-xs">Managed by the component</div>
 				</div>
 			{:else if finalInputSpecsConfiguration[k]?.type == 'oneOf'}
 				<OneOfInputSpecsEditor
@@ -115,7 +115,7 @@
 					<span class="text-xs font-semibold truncate text-primary">
 						{k}
 					</span>
-					<div class="text-tertiary text-xs">
+					<div class="text-primary text-xs">
 						Managed by the component
 						<Tooltip light>
 							The input is managed by the component and cannot be edited here: It will be injected
@@ -127,5 +127,5 @@
 		{/if}
 	</div>
 {:else}
-	<div class="text-tertiary text-sm">No inputs</div>
+	<div class="text-primary text-xs">No inputs</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte
index bf216d166a..515e5a2c7b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte
@@ -46,7 +46,7 @@
 
 <PanelSection title={`Menu items`}>
 	{#if components.length == 0}
-		<span class="text-xs text-tertiary">No action buttons</span>
+		<span class="text-xs text-primary">No action buttons</span>
 	{/if}
 	{#each components as component}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -72,21 +72,20 @@
 			</div>
 			<div>
 				<Button
-					variant="border"
-					color="red"
+					variant="default"
 					on:click={() => deleteComponent(component.id)}
 					startIcon={{ icon: Trash }}
 					iconOnly
+					destructive
 				/>
 			</div>
 		</div>
 	{/each}
 	<div class="w-full flex gap-2">
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
+			btnClasses="gap-1 flex items-center text-sm text-primary"
 			wrapperClasses="w-full"
-			color="light"
-			variant="border"
+			variant="default"
 			size="xs"
 			on:click={() => addComponent()}
 			title="Add Button"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte
index a20f536855..91c7c8e030 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Select from '$lib/components/select/Select.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { addWhitespaceBeforeCapitals, capitalize } from '$lib/utils'
 	import type { RichConfiguration } from '../../types'
@@ -69,27 +70,26 @@
 	}
 </script>
 
-<div class="p-2 border">
+<div class="p-2 border rounded-md">
 	{#if oneOf}
-		<div class="mb-2 text-sm font-semibold">
+		<div class="mb-2 text-xs font-semibold">
 			{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
 			{#if tooltip}
 				<Tooltip light>{tooltip}</Tooltip>
 			{/if}
 		</div>
-		<select
-			class="w-full border border-gray-300 rounded-md p-2"
-			value={oneOf.selected}
-			onchange={(e) => {
-				oneOf = { ...oneOf, selected: e?.target?.['value'] }
-			}}
-		>
-			{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
-				{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
-					<option value={choice}>{labels?.[choice] ?? choice}</option>
-				{/if}
-			{/each}
-		</select>
+		<Select
+			bind:value={() => oneOf.selected, (selected) => (oneOf = { ...oneOf, selected })}
+			items={Object.keys(inputSpecsConfiguration ?? {})
+				.filter(
+					(choice) =>
+						(!disabledOptions.includes(choice) &&
+							!getValueOfDeprecated(inputSpecsConfiguration[choice])) ||
+						oneOf.selected === choice
+				)
+				.map((choice) => ({ label: labels?.[choice] ?? choice, value: choice }))}
+		/>
+
 		{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
 			<div class="mb-4"></div>
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
index 1e89ab908a..2bcb0c4114 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
@@ -124,9 +124,8 @@
 		<div class="px-2 flex gap-1 flex-col w-full pb-4">
 			{#if !$cssEditorOpen}
 				<Button
-					color="light"
 					size="xs2"
-					variant="border"
+					variant="default"
 					on:click={() => {
 						$cssEditorOpen = true
 					}}
@@ -144,9 +143,8 @@
 
 			{#if $enterpriseLicense !== undefined}
 				<Button
-					color="light"
 					size="xs2"
-					variant="border"
+					variant="default"
 					on:click={() => {
 						migrationModal?.open()
 					}}
@@ -157,29 +155,33 @@
 		</div>
 
 		<Tabs bind:selected={tab}>
-			<Tab value="local" size="xs">
-				<div class="flex flex-row gap-2 items-center">
-					ID
-					<Badge color="indigo" size="xs">
-						{component?.id}
-					</Badge>
+			<Tab value="local">
+				{#snippet extra()}
+					<div class="flex flex-row gap-2 items-center">
+						ID
+						<Badge color="indigo" size="xs">
+							{component?.id}
+						</Badge>
 
-					<Tooltip light>
-						You can customise the CSS and the classes of this component instance. These
-						customisations will only be applied to this component. You can also apply custom classes
-						set on the Global styling panel.
-					</Tooltip>
-				</div>
+						<Tooltip light>
+							You can customise the CSS and the classes of this component instance. These
+							customisations will only be applied to this component. You can also apply custom
+							classes set on the Global styling panel.
+						</Tooltip>
+					</div>
+				{/snippet}
 			</Tab>
-			<Tab value="global" size="xs">
-				<div class="flex flex-row gap-2 items-center">
-					Global: {type ? ccomponents[type].name : ''}
+			<Tab value="global">
+				{#snippet extra()}
+					<div class="flex flex-row gap-2 items-center">
+						Global: {type ? ccomponents[type].name : ''}
 
-					<Tooltip light>
-						You can customise the CSS and the classes of all components of this type. These
-						customisations will be applied to all components of this type.
-					</Tooltip>
-				</div>
+						<Tooltip light>
+							You can customise the CSS and the classes of all components of this type. These
+							customisations will be applied to all components of this type.
+						</Tooltip>
+					</div>
+				{/snippet}
 			</Tab>
 			{#snippet content()}
 				<TabContent value="local">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index 3ac0440f9c..73a381acd7 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
@@ -127,7 +127,7 @@
 			</TableActionsWizard>
 		{/snippet}
 		{#if components.length == 0}
-			<span class="text-xs text-tertiary">No action buttons</span>
+			<span class="text-xs text-primary">No action buttons</span>
 		{/if}
 		<div class="w-full flex gap-2 flex-col mt-2">
 			<section
@@ -192,30 +192,27 @@
 		</div>
 		<div class="w-full flex gap-2">
 			<Button
-				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				btnClasses="gap-1 flex items-center text-sm text-primary"
 				wrapperClasses="w-full"
-				color="light"
-				variant="border"
+				variant="default"
 				on:click={() => addComponent('buttoncomponent')}
 				title="Add Button"
 			>
 				+ <Inspect size={14} />
 			</Button>
 			<Button
-				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				btnClasses="gap-1 flex items-center text-sm text-primary"
 				wrapperClasses="w-full"
-				color="light"
-				variant="border"
+				variant="default"
 				on:click={() => addComponent('checkboxcomponent')}
 				title="Add Toggle"
 			>
 				+ <ToggleRightIcon size={14} />
 			</Button>
 			<Button
-				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				btnClasses="gap-1 flex items-center text-sm text-primary"
 				wrapperClasses="w-full"
-				color="light"
-				variant="border"
+				variant="default"
 				on:click={() => addComponent('selectcomponent')}
 				title="Add Select"
 			>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
index eed06b28ce..f94f588677 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
@@ -31,14 +31,14 @@
 	<Button
 		size="xs"
 		startIcon={{ icon: Unplug }}
-		color="red"
-		variant="border"
+		variant="default"
 		on:click={() => {
 			if (componentInput.type === 'connected') {
 				componentInput.connection = undefined
 			}
 			$app = $app
 		}}
+		destructive
 	>
 		Disconnect
 	</Button>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
index 82517a3b19..76ec4413c9 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
@@ -111,7 +111,7 @@
 						<div
 							class="p-1 !text-2xs absolute border border-l bg-surface w-full z-[5000] overflow-auto"
 						>
-							<pre class="text-tertiary"
+							<pre class="text-primary"
 								>{JSON.stringify($evalPreview[`${id}.${field}`] ?? null, null, 4) ?? 'null'}</pre
 							>
 						</div>
@@ -174,9 +174,9 @@
 					<div
 						class="p-1 !text-2xs absolute rounded-b border-b border-r border-l bg-surface w-full z-[5000] overflow-auto"
 					>
-						<!-- <div class="text-tertiary absolute top-0 right-0 !text-2xs">{id}.{field}</div> -->
-						<div class="float-right text-tertiary cursor-pointer"><X size={14} /></div>
-						<pre class="text-tertiary"
+						<!-- <div class="text-primary absolute top-0 right-0 !text-2xs">{id}.{field}</div> -->
+						<div class="float-right text-primary cursor-pointer"><X size={14} /></div>
+						<pre class="text-primary"
 							>{JSON.stringify($evalPreview[`${id}.${field}`] ?? null, null, 4) ?? 'null'}</pre
 						>
 					</div>
@@ -217,7 +217,7 @@
 					}}
 				/>
 			{/if}
-			<div class="text-2xs text-tertiary"
+			<div class="text-2xs text-primary"
 				>{componentInput.onDemandOnly ? 'NOT' : ''} Re-evaluated on changes to:</div
 			>
 			<div class="flex flex-wrap gap-1">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index 0020ea3334..6ac785c395 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -241,8 +241,7 @@
 						/>
 					{/if}
 					<Button
-						variant="border"
-						color="light"
+						variant="default"
 						size="xs"
 						btnClasses="mt-1"
 						on:click={() => {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte
index a0cff5c6b8..74862655a5 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte
@@ -53,5 +53,5 @@
 		</div>
 	</div>
 {:else}
-	<div class="text-xs text-tertiary"> No tab component found in the app </div>
+	<div class="text-xs text-primary"> No tab component found in the app </div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index 1350615f6b..d55ed3ce8e 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -148,33 +148,13 @@
 				<Tabs bind:selected={tab}>
 					{#if !onlyFlow}
 						{#if !rawApps}
-							<Tab size="sm" value="inlinescripts">
-								<div class="flex gap-2 items-center my-1">
-									<Building size={18} strokeWidth={1.5} />
-									Detached Inline Scripts
-								</div>
-							</Tab>
+							<Tab value="inlinescripts" label="Detached Inline Scripts" icon={Building} />
 						{/if}
-						<Tab size="sm" value="workspacescripts">
-							<div class="flex gap-2 items-center my-1">
-								<Building size={18} strokeWidth={1.5} />
-								Workspace Scripts
-							</div>
-						</Tab>
+						<Tab value="workspacescripts" label="Workspace Scripts" icon={Building} />
 					{/if}
-					<Tab size="sm" value="workspaceflows">
-						<div class="flex gap-2 items-center my-1">
-							<Building size={18} strokeWidth={1.5} />
-							Workspace Flows
-						</div>
-					</Tab>
+					<Tab value="workspaceflows" label="Workspace Flows" icon={Building} />
 					{#if !onlyFlow}
-						<Tab size="sm" value="hubscripts">
-							<div class="flex gap-2 items-center my-1">
-								<Globe2 size={18} strokeWidth={1.5} />
-								Hub Scripts
-							</div>
-						</Tab>
+						<Tab value="hubscripts" label="Hub Scripts" icon={Globe2} />
 					{/if}
 				</Tabs>
 				<div class="my-2"></div>
@@ -205,9 +185,8 @@
 	{#if !hideCreateScript}
 		<Button
 			on:click={createScript}
-			size="xs"
-			color="light"
-			variant="border"
+			unifiedSize="md"
+			variant="default"
 			startIcon={{ icon: Plus }}
 			btnClasses="truncate w-full"
 			id="app-editor-create-inline-script"
@@ -217,8 +196,7 @@
 	{/if}
 	<Button
 		on:click={() => picker?.openDrawer()}
-		size="xs"
-		color="blue"
+		unifiedSize="md"
 		variant={rawApps ? 'contained' : 'border'}
 		startIcon={{ icon: MousePointer }}
 		btnClasses="truncate w-full"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
index 9e139905f3..1f6fdcf8b0 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
@@ -77,7 +77,7 @@
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-tertiary text-xs">
+								<div class="text-primary text-xs">
 									{item.path}
 								</div>
 							</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
index 1a43f5df2a..c477c7ef1f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
@@ -77,7 +77,7 @@
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-tertiary text-xs">
+								<div class="text-primary text-xs">
 									{item.path}
 								</div>
 							</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte
index d3794a6dfa..c00c7e30dd 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte
@@ -23,7 +23,7 @@
 			{#snippet text()}
 				{action.label}
 			{/snippet}
-			<Button color={action.color} on:click={action.callback} size="xs2" variant="border">
+			<Button color={action.color} on:click={action.callback} size="xs2" variant="default">
 				<div class="flex flex-row gap-1 items-center">
 					{#if action.icon}
 						<action.icon size={12} />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
index bbb5d2ba2b..b368351b00 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
@@ -27,7 +27,7 @@
 			<Button
 				size="xs"
 				color={checked ? 'red' : 'light'}
-				variant="border"
+				variant="default"
 				on:click={() => {
 					if (appInput.transformer) {
 						appInput.transformer = undefined
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
index aa9b2d896c..532191ac91 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
@@ -166,7 +166,7 @@
 	<div class="flex my-4">
 		<Button
 			size="xs2"
-			color="dark"
+			variant="accent"
 			on:click={() => {
 				$connectingInput = {
 					opened: true,
diff --git a/frontend/src/lib/components/assets/AssetButtons.svelte b/frontend/src/lib/components/assets/AssetButtons.svelte
index 917ee5551b..e429b1664f 100644
--- a/frontend/src/lib/components/assets/AssetButtons.svelte
+++ b/frontend/src/lib/components/assets/AssetButtons.svelte
@@ -31,7 +31,7 @@
 		<Button
 			startIcon={{ icon: Edit2 }}
 			size="xs"
-			variant="border"
+			variant="default"
 			spacingSize="xs2"
 			iconOnly
 			on:click={() => (resourceEditorDrawer?.initEdit(asset.path), onClick?.())}
diff --git a/frontend/src/lib/components/assets/AssetsDropdownButton.svelte b/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
index 9418fa13c2..0948c02a96 100644
--- a/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
+++ b/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
@@ -129,7 +129,7 @@
 						<svelte:fragment slot="trigger">
 							<div
 								class={twMerge(
-									'text-xs font-normal border text-tertiary w-10 p-1 text-center rounded-md',
+									'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
 									!asset.access_type && !asset.alt_access_type
 										? 'text-orange-500 !border-orange-500'
 										: '',
@@ -141,7 +141,7 @@
 						</svelte:fragment>
 						<svelte:fragment slot="content">
 							{#if !asset.access_type}
-								<span class="text-sm text-tertiary leading-4">
+								<span class="text-sm text-primary leading-4">
 									Could not infer automatically <br />
 									<span class="text-xs">Please select manually </span>
 								</span>
@@ -169,7 +169,7 @@
 								{asset.path}
 							</svelte:fragment>
 						</Tooltip>
-						<span class="text-xs text-tertiary select-none">
+						<span class="text-xs text-primary select-none">
 							{liSubtitle?.(asset) ??
 								formatAssetKind({
 									...asset,
diff --git a/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte b/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
index c07ecf804c..cb5cc6273b 100644
--- a/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
+++ b/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
@@ -32,16 +32,16 @@
 					<a
 						href={getAssetUsagePageUri(u)}
 						aria-label={`${u.kind}/${u.path}`}
-						class="text-sm text-primary flex items-center py-3 px-4 gap-3 hover:bg-surface-hover cursor-pointer"
+						class="text-xs text-primary font-normal flex items-center py-3 px-4 gap-3 hover:bg-surface-hover cursor-pointer"
 					>
 						<RowIcon kind={u.kind} />
 						<div class="flex flex-col justify-center flex-1">
-							<span class="font-semibold">{u.path}</span>
-							<span class="text-xs text-tertiary">{u.kind}</span>
+							<span class="font-semibold text-emphasis">{u.path}</span>
+							<span class="text-2xs text-secondary">{u.kind}</span>
 						</div>
 						<div
 							class={twMerge(
-								'text-xs font-normal border text-tertiary w-10 p-1 text-center rounded-md',
+								'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
 								!u.access_type ? 'hover:bg-surface active:opacity-80' : ''
 							)}
 						>
diff --git a/frontend/src/lib/components/assets/JobAssetsViewer.svelte b/frontend/src/lib/components/assets/JobAssetsViewer.svelte
index 9a7187731f..6375783595 100644
--- a/frontend/src/lib/components/assets/JobAssetsViewer.svelte
+++ b/frontend/src/lib/components/assets/JobAssetsViewer.svelte
@@ -71,7 +71,7 @@
 			<li class="flex justify-between py-3 leading-4 text-sm pl-4">
 				<div class="flex flex-col flex-1 truncate">
 					{asset.path}
-					<span class="text-2xs text-tertiary">
+					<span class="text-2xs text-primary">
 						{formatAssetKind({
 							...asset,
 							...(asset.kind === 'resource'
@@ -91,7 +91,7 @@
 		{/each}
 	</ul>
 {:else}
-	<div class="text-sm text-tertiary">No assets found</div>
+	<div class="text-sm text-primary">No assets found</div>
 {/if}
 
 <S3FilePicker bind:this={s3FilePicker} readOnlyMode />
diff --git a/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte b/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte
index 3fdf9a31ad..ed02de2dda 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogDetails.svelte
@@ -19,63 +19,69 @@
 	{#if selectedId}
 		{@const log = logs.find((e) => e.id === selectedId)}
 		{#if log}
-			<span class="font-semibold text-xs leading-6">ID</span>
-			<span class="text-xs">{log.id}</span>
-			<span class="font-semibold text-xs leading-6">Parameters</span>
-			<div class="text-xs p-2 bg-surface-secondary rounded-sm">
-				{JSON.stringify(log.parameters, null, 2)}
+			<div class="flex flex-col gap-6 w-full">
+				<div class="flex flex-col gap-1">
+					<span class="font-semibold text-xs text-emphasis">ID</span>
+					<span class="text-xs">{log.id}</span>
+				</div>
+				<div class="flex flex-col gap-1">
+					<span class="font-semibold text-xs text-emphasis">Parameters</span>
+					<div class="text-xs p-2 bg-surface-secondary rounded-md">
+						{JSON.stringify(log.parameters, null, 2)}
+					</div>
+				</div>
+
+				{#if log?.parameters?.uuid}
+					<Button
+						href={`run/${log.parameters.uuid}`}
+						variant="accent"
+						unifiedSize="md"
+						target="_blank"
+						wrapperClasses="w-fit"
+					>
+						View run
+					</Button>
+				{/if}
+
+				{#if log.operation === 'jobs.run.script'}
+					<Button
+						href={`scripts/get/${log.resource}`}
+						variant="default"
+						unifiedSize="md"
+						target="_blank"
+						wrapperClasses="w-fit"
+					>
+						View script
+					</Button>
+				{/if}
+
+				{#if ViewFlowOp.includes(log.operation)}
+					<Button
+						href={`flows/get/${log.resource}`}
+						variant="default"
+						unifiedSize="md"
+						target="_blank"
+						endIcon={{ icon: ArrowRight }}
+						wrapperClasses="w-fit"
+					>
+						View flow
+					</Button>
+				{/if}
+				{#if ViewAppOp.includes(log.operation)}
+					<Button
+						href={`apps/get/${log.resource}`}
+						variant="default"
+						unifiedSize="md"
+						target="_blank"
+						endIcon={{ icon: ArrowRight }}
+						wrapperClasses="w-fit"
+					>
+						View app
+					</Button>
+				{/if}
 			</div>
-
-			{#if log?.parameters?.uuid}
-				<Button
-					href={`run/${log.parameters.uuid}`}
-					color="light"
-					variant="border"
-					size="xs"
-					target="_blank"
-				>
-					View run
-				</Button>
-			{/if}
-
-			{#if log.operation === 'jobs.run.script'}
-				<Button
-					href={`scripts/get/${log.resource}`}
-					color="dark"
-					variant="contained"
-					size="xs"
-					target="_blank"
-				>
-					View script
-				</Button>
-			{/if}
-
-			{#if ViewFlowOp.includes(log.operation)}
-				<Button
-					href={`flows/get/${log.resource}`}
-					color="dark"
-					variant="contained"
-					size="xs"
-					target="_blank"
-					endIcon={{ icon: ArrowRight }}
-				>
-					View flow
-				</Button>
-			{/if}
-			{#if ViewAppOp.includes(log.operation)}
-				<Button
-					href={`apps/get/${log.resource}`}
-					color="dark"
-					variant="contained"
-					size="xs"
-					target="_blank"
-					endIcon={{ icon: ArrowRight }}
-				>
-					View app
-				</Button>
-			{/if}
 		{/if}
 	{:else}
-		<span class="text-xs">No log selected</span>
+		<span class="text-xs text-primary font-normal">No log selected</span>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
index 686bc4f328..f1c123bb11 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
@@ -11,10 +11,10 @@
 
 <Popover
 	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	contentClasses="border rounded-lg shadow-lg p-4 flex flex-col w-80 pt-8 bg-surface"
+	contentClasses="p-4 flex flex-col w-80 pt-8 bg-surface"
 >
 	{#snippet trigger()}
-		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
+		<Button variant="accent" unifiedSize="md" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
 			Filters
 		</Button>
 	{/snippet}
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index f8a5b6dc46..b6dee8b226 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -322,10 +322,10 @@
 	})
 </script>
 
-<div class="flex flex-col items-center gap-6 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
+<div class="flex flex-col items-center gap-10 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
 	{#if $workspaceStore == 'admins'}
 		<div class="flex gap-1 relative w-full">
-			<span class="text-xs absolute -top-4">Scope</span>
+			<span class="text-xs absolute font-semibold text-emphasis -top-4">Scope</span>
 			<ToggleButtonGroup
 				selected={scope ?? 'admins'}
 				on:selected={({ detail }) => {
@@ -356,7 +356,7 @@
 		</div>
 	{/if}
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">From</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">From</span>
 		<input type="text" value={after ?? 'From'} disabled />
 		<CalendarPicker
 			clearable
@@ -372,7 +372,7 @@
 		/>
 	</div>
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">To</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">To</span>
 		<input type="text" value={before ?? 'To'} disabled />
 		<CalendarPicker
 			clearable
@@ -389,7 +389,7 @@
 	</div>
 
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Username</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Username</span>
 		<select bind:value={username}>
 			{#if usernames}
 				{#if $userStore?.is_admin || $userStore?.is_super_admin}
@@ -406,7 +406,7 @@
 		</select>
 	</div>
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Resource</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Resource</span>
 
 		<Select
 			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
@@ -415,22 +415,24 @@
 			items={safeSelectItems(['all', ...(resources.value ?? [])])}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
+			class="w-full"
 		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Operation</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Operation</span>
 
 		<Select
 			bind:value={operation}
 			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
+			class="w-full"
 		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Action</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Action</span>
 
 		<select class="!truncate" bind:value={actionKind}>
 			<option selected value="all">all</option>
@@ -442,8 +444,7 @@
 
 	<div class="flex flex-row gap-1">
 		<Button
-			variant="contained"
-			color="light"
+			variant="subtle"
 			on:click={() => {
 				after = undefined
 				before = undefined
@@ -455,17 +456,16 @@
 				resource = 'all'
 				scope = undefined
 			}}
-			size="xs"
+			unifiedSize="md"
 		>
 			Clear filters
 		</Button>
 		<Button
-			variant="contained"
-			color="dark"
+			variant="accent"
 			on:click={() => {
 				refresh++
 			}}
-			size="xs"
+			unifiedSize="md"
 		>
 			<div class="flex flex-row gap-1 items-center">
 				{#if loading}
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
index f94164073b..7170b9bb5a 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
@@ -4,7 +4,7 @@
 	import { displayDate } from '$lib/utils'
 	import { onMount, tick } from 'svelte'
 	import Button from '../common/button/Button.svelte'
-	import { ListFilter, ChevronLeft, ChevronRight } from 'lucide-svelte'
+	import { ChevronLeft, ChevronRight, ListFilterPlus } from 'lucide-svelte'
 	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
 	import { twMerge } from 'tailwind-merge'
 
@@ -127,15 +127,15 @@
 <div class="divide-y min-w-[640px] h-full" id="audit-logs-table-wrapper">
 	<div bind:clientHeight={headerHeight}>
 		<div
-			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-xs font-semibold"
+			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-2xs font-normal text-primary"
 		>
 			<div class="w-1/12">ID</div>
-			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Timestamp</div>
-			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Username</div>
+			<div class={showWorkspace ? 'w-2/12' : 'w-3/12'}>Timestamp</div>
+			<div class={showWorkspace ? 'w-2/12' : 'w-3/12'}>Username</div>
 			{#if showWorkspace}
 				<div class="w-2/12">Workspace</div>
 			{/if}
-			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Operation</div>
+			<div class={showWorkspace ? 'w-2/12' : 'w-3/12'}>Operation</div>
 			<div class="w-2/12">Resource</div>
 		</div>
 	</div>
@@ -146,7 +146,12 @@
 			width="100%"
 			height={tableHeight - headerHeight - footerHeight}
 			itemCount={flatLogs?.length ?? 0}
-			itemSize={42}
+			itemSize={(index) => {
+				if (flatLogs?.[index]?.type === 'date') {
+					return 33
+				}
+				return 42
+			}}
 			overscanCount={20}
 			{stickyIndices}
 			scrollToAlignment="center"
@@ -159,7 +164,9 @@
 
 						{#if logOrDate}
 							{#if logOrDate?.type === 'date'}
-								<div class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-5">
+								<div
+									class="bg-surface-secondary py-2 border-b font-normal text-primary text-xs pl-5"
+								>
 									{logOrDate.date}
 								</div>
 							{:else}
@@ -168,6 +175,7 @@
 								<div
 									class={twMerge(
 										'flex flex-row items-center h-full w-full px-2 py-1 hover:bg-surface-hover cursor-pointer',
+										'text-primary text-xs',
 										logOrDate.log.id === selectedId ? 'bg-blue-50 dark:bg-blue-900/50' : ''
 									)}
 									role="button"
@@ -179,10 +187,10 @@
 									<div class="w-1/12 text-xs truncate">
 										{logOrDate.log.id}
 									</div>
-									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
+									<div class={showWorkspace ? 'w-2/12 text-xs' : 'w-3/12 text-xs'}>
 										{displayDate(logOrDate.log.timestamp)}
 									</div>
-									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
+									<div class={showWorkspace ? 'w-2/12 text-xs' : 'w-3/12 text-xs'}>
 										<div class="flex flex-row gap-2 items-center">
 											<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-60">
 												{logOrDate.log.username}
@@ -191,10 +199,10 @@
 												{/if}
 											</div>
 											<Button
-												color="light"
-												size="xs2"
+												variant="subtle"
+												unifiedSize="sm"
 												iconOnly
-												startIcon={{ icon: ListFilter }}
+												startIcon={{ icon: ListFilterPlus }}
 												on:click={() => {
 													usernameFilter = logOrDate.log.username
 												}}
@@ -208,10 +216,11 @@
 											</div>
 										</div>
 									{/if}
-									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
+									<div class={showWorkspace ? 'w-2/12 text-xs' : 'w-3/12 text-xs'}>
 										<div class="flex flex-row gap-1">
 											<Badge
-												on:click={() => {
+												clickable
+												onclick={() => {
 													actionKind = logOrDate.log.action_kind.toLocaleLowerCase()
 												}}
 												color={kindToBadgeColor(logOrDate.log.action_kind)}
@@ -219,7 +228,8 @@
 												{logOrDate.log.action_kind}
 											</Badge>
 											<Badge
-												on:click={() => {
+												clickable
+												onclick={() => {
 													operation = logOrDate.log.operation
 												}}
 											>
@@ -233,10 +243,10 @@
 												{logOrDate.log.resource}
 											</div>
 											<Button
-												color="light"
-												size="xs2"
+												variant="subtle"
+												unifiedSize="sm"
 												iconOnly
-												startIcon={{ icon: ListFilter }}
+												startIcon={{ icon: ListFilterPlus }}
 												on:click={() => {
 													resourceFilter = logOrDate.log.resource
 												}}
@@ -261,11 +271,14 @@
 		</VirtualList>
 	{/if}
 	<!-- Pagination footer - always visible -->
-	<div class="flex flex-row justify-between items-center p-2 bg-surface-primary border-t">
+	<div
+		class="flex flex-row justify-between items-center p-2 bg-surface-primary border-t"
+		style:height={`${footerHeight}px`}
+	>
 		<div class="flex flex-row gap-2 items-center">
 			<Button
-				color="light"
-				size="xs2"
+				variant="subtle"
+				unifiedSize="sm"
 				startIcon={{ icon: ChevronLeft }}
 				on:click={() => {
 					pageIndex = (pageIndex ?? 1) - 1
@@ -276,8 +289,8 @@
 			</Button>
 			<span class="text-xs text-secondary px-2">Page {pageIndex}</span>
 			<Button
-				color="light"
-				size="xs2"
+				variant="subtle"
+				unifiedSize="sm"
 				endIcon={{ icon: ChevronRight }}
 				on:click={() => {
 					pageIndex = (pageIndex ?? 1) + 1
@@ -289,10 +302,7 @@
 		</div>
 		<div class="flex flex-row gap-2 items-center">
 			<span class="text-xs text-secondary">Per page:</span>
-			<select
-				bind:value={perPage}
-				class="text-xs bg-transparent border border-gray-300 dark:border-gray-600 rounded px-2 py-1"
-			>
+			<select bind:value={perPage} class="text-xs border rounded-md px-2 py-1">
 				<option value={25}>25</option>
 				<option value={100}>100</option>
 				<option value={1000}>1000</option>
diff --git a/frontend/src/lib/components/common/CloseButton.svelte b/frontend/src/lib/components/common/CloseButton.svelte
index f9f6500c55..aa50de33df 100644
--- a/frontend/src/lib/components/common/CloseButton.svelte
+++ b/frontend/src/lib/components/common/CloseButton.svelte
@@ -22,7 +22,7 @@
 	on:pointerdown={(e) => e.stopPropagation()}
 	startIcon={{ icon: Icon ?? X }}
 	iconOnly
-	size="sm"
+	unifiedSize="sm"
 	color="light"
 	btnClasses={twMerge(
 		'hover:bg-surface-hover rounded-full p-0',
diff --git a/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte b/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte
index b2689a603a..3b53bb8980 100644
--- a/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte
+++ b/frontend/src/lib/components/common/ResizeTransitionWrapper.svelte
@@ -1,4 +1,10 @@
+<script lang="ts" module>
+	let CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT = 'CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT'
+</script>
+
 <script lang="ts">
+	import { getContext, setContext } from 'svelte'
+
 	import type { HTMLAttributes } from 'svelte/elements'
 	import { twMerge } from 'tailwind-merge'
 
@@ -19,6 +25,10 @@
 		outerDivProps
 	}: Props = $props()
 
+	let currentResizeTransitionWrapper =
+		getContext<boolean>(CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT) ?? false
+	setContext(CURRENT_RESIZE_TRANSITION_WRAPPER_CONTEXT, true)
+
 	let innerContainer: HTMLElement | null = $state(null)
 	let outerContainer: HTMLElement | null = $state(null)
 
@@ -48,8 +58,13 @@
 	})
 </script>
 
-<div bind:this={outerContainer} {...outerDivProps} class={className} {style}>
-	<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
-		{@render children()}
+<!-- Prevent nesting this component to avoid weird behavior -->
+{#if currentResizeTransitionWrapper}
+	{@render children()}
+{:else}
+	<div bind:this={outerContainer} {...outerDivProps} class={className} {style}>
+		<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
+			{@render children()}
+		</div>
 	</div>
-</div>
+{/if}
diff --git a/frontend/src/lib/components/common/Url.svelte b/frontend/src/lib/components/common/Url.svelte
index 2adb226eb4..07ad027aef 100644
--- a/frontend/src/lib/components/common/Url.svelte
+++ b/frontend/src/lib/components/common/Url.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <div class="flex justify-start w-full">
-	<Badge color="gray" class="rounded-r-none h-[27px]">{label}</Badge>
+	<Badge color="gray" class="rounded-r-none h-[36px]">{label}</Badge>
 
 	<ClipboardPanel
 		content={url}
diff --git a/frontend/src/lib/components/common/alert/Alert.svelte b/frontend/src/lib/components/common/alert/Alert.svelte
index f2efb1304a..3bea9efb7d 100644
--- a/frontend/src/lib/components/common/alert/Alert.svelte
+++ b/frontend/src/lib/components/common/alert/Alert.svelte
@@ -73,7 +73,7 @@
 <div
 	class={twMerge(
 		notRounded ? '' : 'rounded-md',
-		size === 'sm' ? 'p-4' : 'p-2',
+		size === 'sm' ? 'p-4' : 'p-3',
 		classes[type].bgClass,
 		bgClass,
 		classNames
@@ -91,12 +91,7 @@
 		<div class={twMerge('ml-1 w-full')}>
 			<div class={twMerge('w-full flex flex-row items-center justify-between h-8')}>
 				<span
-					class={twMerge(
-						size === 'sm' ? 'text-sm' : 'text-xs',
-						'font-medium',
-						classes[type].titleClass,
-						titleClass
-					)}
+					class={twMerge('text-xs font-semibold', classes[type].titleClass, titleClass)}
 					style={titleStyle}
 				>
 					{title}
@@ -118,11 +113,7 @@
 			{#if children && !isCollapsed}
 				<div transition:slide|local={{ duration: 200 }} class="mt-2">
 					<div
-						class={twMerge(
-							size === 'sm' ? 'text-sm' : 'text-xs',
-							classes[type].descriptionClass,
-							descriptionClass
-						)}
+						class={twMerge('text-xs', classes[type].descriptionClass, descriptionClass)}
 						style={descriptionStyle}
 					>
 						{@render children?.()}
@@ -131,11 +122,7 @@
 			{:else if children && !collapsible}
 				<div class="mb-2">
 					<div
-						class={twMerge(
-							size === 'sm' ? 'text-sm' : 'text-xs',
-							classes[type].descriptionClass,
-							descriptionClass
-						)}
+						class={twMerge('text-xs', classes[type].descriptionClass, descriptionClass)}
 						style={descriptionStyle}
 					>
 						{@render children?.()}
diff --git a/frontend/src/lib/components/common/alert/model.ts b/frontend/src/lib/components/common/alert/model.ts
index 69d3161363..d7d8883554 100644
--- a/frontend/src/lib/components/common/alert/model.ts
+++ b/frontend/src/lib/components/common/alert/model.ts
@@ -2,10 +2,11 @@ export type AlertType = 'success' | 'error' | 'warning' | 'info'
 
 export const classes: Record<AlertType, Record<string, string>> = {
 	info: {
-		bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/40 dark:border-blue-700/40',
-		iconClass: 'text-blue-500 dark:text-blue-300',
-		titleClass: 'text-blue-800 dark:text-blue-100',
-		descriptionClass: 'text-blue-700 dark:text-blue-100'
+		bgClass:
+			'bg-luminance-blue-50 border-luminance-blue-100 border dark:bg-luminance-blue-900/60 dark:border-luminance-blue-700/40',
+		iconClass: 'text-luminance-blue-600 dark:text-luminance-blue-50',
+		titleClass: 'text-luminance-blue-700 dark:text-luminance-blue-50',
+		descriptionClass: 'text-luminance-blue-600 dark:text-luminance-blue-50/80'
 	},
 	warning: {
 		bgClass:
diff --git a/frontend/src/lib/components/common/badge/Badge.svelte b/frontend/src/lib/components/common/badge/Badge.svelte
index 57591212d6..fa3f06d7e3 100644
--- a/frontend/src/lib/components/common/badge/Badge.svelte
+++ b/frontend/src/lib/components/common/badge/Badge.svelte
@@ -1,93 +1,155 @@
 <script lang="ts">
-	import { classNames } from '$lib/utils'
+	import { twMerge } from 'tailwind-merge'
 	import { type BadgeColor, type BadgeIconProps, ColorModifier } from './model'
 	import { X } from 'lucide-svelte'
 
-	export let color: BadgeColor = 'gray'
-	export let large = false
-	export let small = false
-	export let href = ''
-	export let rounded = false
-	export let dismissable = false
-	export let wrapperClass = ''
-	export let baseClass = 'text-center'
-	export let capitalize = false
-	export let icon: BadgeIconProps | undefined = undefined
-	export let verySmall = false
+	interface Props {
+		color?: BadgeColor
+		large?: boolean
+		small?: boolean
+		href?: string
+		rounded?: boolean
+		dismissable?: boolean
+		wrapperClass?: string
+		baseClass?: string
+		capitalize?: boolean
+		icon?: BadgeIconProps | undefined
+		verySmall?: boolean
+		class?: string | undefined
+		children?: import('svelte').Snippet
+		[key: string]: any
+		clickable?: boolean
+		selected?: boolean
+		onkeydown?: (event: KeyboardEvent) => void
+		onclick?: (event: MouseEvent) => void
+	}
 
-	let hidden = false
+	let {
+		color = 'gray',
+		large = false,
+		small = false,
+		href = '',
+		rounded = false,
+		dismissable = false,
+		wrapperClass = '',
+		baseClass = 'text-center text-primary font-normal min-h-5',
+		capitalize = false,
+		icon = undefined,
+		verySmall = false,
+		class: classNames = undefined,
+		clickable = false,
+		selected = false,
+		children,
+		onkeydown,
+		onclick,
+		...rest
+	}: Props = $props()
+
+	let hidden = $state(false)
 	const colors: Record<BadgeColor, string> = {
-		gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-		blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
-		red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
-		green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
-		yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-100 dark:text-yellow-900',
-		orange: 'bg-orange-100 text-orange-800 dark:bg-orange-100 dark:text-orange-900',
-		indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
-		violet: 'bg-violet-100 text-violet-800 dark:bg-violet-200 dark:text-violet-900',
-		['dark-gray']: 'bg-gray-500 text-gray-100',
-		['dark-blue']: 'bg-blue-500 text-blue-100',
-		['dark-red']: 'bg-red-500 text-white',
-		['dark-green']: 'bg-green-500 text-green-100',
-		['dark-yellow']: 'bg-yellow-300 text-yellow-800',
-		['dark-indigo']: 'bg-indigo-500 text-indigo-100',
-		['dark-orange']: 'bg-orange-500 text-orange-100',
-		['dark-violet']: 'bg-violet-500 text-violet-100'
-	}
-	const hovers: Partial<Record<BadgeColor, string>> = {
-		gray: 'hover:bg-gray-200 dark:hover:bg-gray-300',
-		blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
-		red: 'hover:bg-red-200 dark:hover:bg-red-300',
-		green: 'hover:bg-green-200 dark:hover:bg-green-300',
-		yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
-		indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
-		orange: 'hover:bg-orange-200 dark:hover:bg-orange-300',
-		violet: 'hover:bg-violet-200 dark:hover:bg-violet-300'
+		gray: 'bg-surface-sunken text-primary',
+		blue: 'bg-luminance-blue-50 text-luminance-blue-800 dark:text-luminance-blue-100 dark:bg-luminance-blue-700/40',
+		red: 'bg-red-100 text-red-800 dark:bg-red-700/40 dark:text-red-100',
+		green: 'bg-green-100 text-green-700 dark:bg-green-700/40 dark:text-green-100',
+		yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-700/40 dark:text-yellow-100',
+		orange: 'bg-orange-100 text-orange-800 dark:bg-orange-700/40 dark:text-orange-100',
+		indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700/40 dark:text-indigo-100',
+		violet: 'bg-violet-100 text-violet-800 dark:bg-violet-800/30 dark:text-violet-100',
+		['dark-gray']: 'bg-gray-500 text-gray-100 dark:bg-gray-600 dark:text-gray-200',
+		['dark-blue']: 'bg-blue-500 text-blue-100 dark:bg-blue-600 dark:text-blue-200',
+		['dark-red']: 'bg-red-500 text-white dark:bg-red-600 dark:text-red-100',
+		['dark-green']: 'bg-green-500 text-green-100 dark:bg-green-600 dark:text-green-200',
+		['dark-yellow']: 'bg-yellow-500 text-white dark:bg-yellow-600 dark:text-yellow-100',
+		['dark-indigo']: 'bg-indigo-500 text-indigo-100 dark:bg-indigo-600 dark:text-indigo-200',
+		['dark-orange']: 'bg-orange-500 text-orange-100 dark:bg-orange-600 dark:text-orange-200',
+		['dark-violet']: 'bg-violet-500 text-violet-100 dark:bg-violet-600 dark:text-violet-200',
+		transparent: 'bg-transparent border'
 	}
 
-	$: badgeClass = classNames(
-		baseClass,
-		small
-			? 'text-xs'
-			: verySmall
-				? 'text-2xs'
-				: large
-					? 'text-sm font-medium'
-					: 'text-xs font-semibold',
-		colors[color],
-		href &&
-			(color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]),
-		rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5',
-		verySmall ? 'px-0.5 py-0.5' : '',
-		'flex flex-row gap-1 items-center',
-		$$props.class
+	const selectedColors: Record<BadgeColor, string> = {
+		gray: 'bg-surface-input text-primary',
+		blue: 'bg-luminance-blue-500 text-white dark:bg-luminance-blue-600',
+		red: 'bg-red-500 text-white dark:bg-red-600',
+		green: 'bg-green-500 text-white dark:bg-green-600',
+		yellow: 'bg-yellow-500 text-white dark:bg-yellow-600',
+		orange: 'bg-orange-500 text-white dark:bg-orange-600',
+		indigo: 'bg-indigo-500 text-white dark:bg-indigo-600',
+		violet: 'bg-violet-500 text-white dark:bg-violet-600',
+		['dark-gray']: 'bg-gray-700 text-gray-100 dark:bg-gray-800 dark:text-gray-200',
+		['dark-blue']:
+			'bg-luminance-blue-700 text-luminance-blue-100 dark:bg-luminance-blue-800 dark:text-luminance-blue-200',
+		['dark-red']: 'bg-red-700 text-white dark:bg-red-800 dark:text-red-100',
+		['dark-green']: 'bg-green-700 text-green-100 dark:bg-green-800 dark:text-green-200',
+		['dark-yellow']: 'bg-yellow-600 text-white dark:bg-yellow-700 dark:text-yellow-100',
+		['dark-indigo']: 'bg-indigo-700 text-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
+		['dark-orange']: 'bg-orange-700 text-orange-100 dark:bg-orange-800 dark:text-orange-200',
+		['dark-violet']: 'bg-violet-700 text-violet-100 dark:bg-violet-800 dark:text-violet-200',
+		transparent: 'bg-surface-accent-selected/30 text-accent border-gray-400 dark:border-gray-500'
+	}
+
+	const hovers: Partial<Record<BadgeColor, string>> = {
+		gray: 'hover:bg-surface-hover',
+		blue: 'hover:bg-luminance-blue-200 dark:hover:bg-luminance-blue-700/40',
+		red: 'hover:bg-red-200 dark:hover:bg-red-500/25',
+		green: 'hover:bg-green-200 dark:hover:bg-green-500/25',
+		yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-500/25',
+		indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-500/25',
+		orange: 'hover:bg-orange-200 dark:hover:bg-orange-500/25',
+		violet: 'hover:bg-violet-200 dark:hover:bg-violet-500/25',
+		['dark-gray']: 'hover:bg-gray-600 dark:hover:bg-gray-700',
+		['dark-blue']: 'hover:bg-luminance-blue-600 dark:hover:bg-luminance-blue-700',
+		['dark-red']: 'hover:bg-red-600 dark:hover:bg-red-700',
+		['dark-green']: 'hover:bg-green-600 dark:hover:bg-green-700',
+		['dark-yellow']: 'hover:bg-yellow-600 dark:hover:bg-yellow-700',
+		['dark-indigo']: 'hover:bg-indigo-600 dark:hover:bg-indigo-700',
+		['dark-orange']: 'hover:bg-orange-600 dark:hover:bg-orange-700',
+		['dark-violet']: 'hover:bg-violet-600 dark:hover:bg-violet-700',
+		transparent: 'hover:bg-surface-hover/50 dark:hover:border-gray-500'
+	}
+
+	let badgeClass = $derived(
+		twMerge(
+			baseClass,
+			small ? 'text-2xs' : verySmall ? 'text-2xs' : large ? 'text-xs' : 'text-2xs',
+			selected ? selectedColors[color] : colors[color],
+			clickable &&
+				!selected &&
+				(color.startsWith(ColorModifier)
+					? hovers[color.replace(ColorModifier, '')]
+					: hovers[color]),
+			rounded ? 'rounded-full px-2 py-1' : 'rounded-md px-2 py-0.5',
+			verySmall ? 'px-0.5 py-0.5' : '',
+			'flex flex-row gap-1 items-center',
+			classNames
+		)
 	)
 	const handleHide = () => (hidden = !hidden)
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
-	on:click
-	on:keydown
+	{onclick}
+	{onkeydown}
 	class="inline-flex justify-center items-center whitespace-nowrap {wrapperClass}"
 >
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}
-		{...$$restProps}
+		{...rest}
 		class={badgeClass}
 		class:hidden
 		class:capitalize
+		role={clickable ? 'button' : undefined}
 	>
 		{#if icon?.icon && icon.position === 'left'}
-			<svelte:component this={icon.icon} size={14} />
+			<icon.icon size={12} />
 		{/if}
-		<slot />
+		{@render children?.()}
 		{#if icon?.icon && icon.position === 'right'}
-			<svelte:component this={icon.icon} size={14} />
+			<icon.icon size={12} />
 		{/if}
 		{#if dismissable}
-			<button on:click={handleHide}>
+			<button onclick={handleHide}>
 				<X size={10} />
 			</button>
 		{/if}
diff --git a/frontend/src/lib/components/common/badge/model.ts b/frontend/src/lib/components/common/badge/model.ts
index f1ec6e0540..03adf9f195 100644
--- a/frontend/src/lib/components/common/badge/model.ts
+++ b/frontend/src/lib/components/common/badge/model.ts
@@ -1,6 +1,6 @@
 type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo' | 'orange' | 'violet'
 export const ColorModifier = 'dark-'
-export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`
+export type BadgeColor = BaseColor | 'transparent' | `${typeof ColorModifier}${BaseColor}`
 
 export interface BadgeIconProps {
 	position?: 'left' | 'right'
diff --git a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
index f228e4d160..17e7a60132 100644
--- a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
+++ b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
@@ -17,7 +17,7 @@
 		<Button
 			size="sm"
 			color="light"
-			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-tertiary'}
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-primary'}
 			on:click={() => dispatch('select', { index })}
 			disabled={selectedIndex - 1 === index ? disabled : false}
 		>
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 0ed3e7e9b4..9ed11fb094 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -27,12 +27,21 @@
 		aiDescription?: string | undefined
 		size?: ButtonType.Size
 		spacingSize?: ButtonType.Size
+		unifiedSize?: ButtonType.UnifiedSize
+		/**
+		 * @description Extended size for App only, do not use
+		 */
+		extendedSize?: ButtonType.ExtendedSize
+		/**
+		 * @deprecated Use `variant` instead
+		 */
 		color?: ButtonType.Color | string
 		variant?: ButtonType.Variant
 		btnClasses?: string
 		wrapperClasses?: string
 		wrapperStyle?: string
 		disabled?: boolean
+		selected?: boolean
 		href?: string | undefined
 		target?: '_self' | '_blank' | undefined
 		iconOnly?: boolean
@@ -47,6 +56,7 @@
 		download?: string | undefined
 		startIcon?: ButtonType.Icon | undefined
 		endIcon?: ButtonType.Icon | undefined
+		destructive?: boolean
 		shortCut?: { key?: string; hide?: boolean; Icon?: any; withoutModifier?: boolean } | undefined
 		tooltipPopover?:
 			| {
@@ -72,12 +82,15 @@
 		aiDescription = undefined,
 		size = 'md',
 		spacingSize = size,
+		unifiedSize = undefined,
+		extendedSize = undefined,
 		color = 'blue',
-		variant = 'contained',
+		variant = 'default',
 		btnClasses = '',
 		wrapperClasses = '',
 		wrapperStyle = '',
 		disabled = false,
+		selected = false,
 		href = undefined,
 		target = undefined,
 		iconOnly = false,
@@ -92,6 +105,7 @@
 		download = undefined,
 		startIcon = undefined,
 		endIcon = undefined,
+		destructive = false,
 		shortCut = undefined,
 		tooltipPopover = undefined,
 		dropdownBtnClasses = '',
@@ -139,7 +153,25 @@
 		}
 	}
 
-	function getColorClass(color, variant) {
+	function getStyleClass(color, variant) {
+		// Check if using new design system variants
+		if (['accent-secondary', 'accent', 'default', 'subtle'].includes(variant)) {
+			let style = destructive
+				? ButtonType.DestructiveVariantStyles[variant]
+				: ButtonType.VariantStyles[variant]
+			// For default variant with dropdowns, remove border from button since it's on wrapper
+			if (
+				variant === 'default' &&
+				dropdownItems &&
+				((typeof dropdownItems === 'function' && dropdownItems().length > 0) ||
+					dropdownItems.length > 0)
+			) {
+				style = style.replace('border border-border-light', '')
+			}
+			return style
+		}
+
+		// Legacy color-based styling
 		if (color in ButtonType.ColorVariants) {
 			return ButtonType.ColorVariants[color][variant]
 		} else {
@@ -147,20 +179,81 @@
 		}
 	}
 
+	function getSpacingClass(variant, size, spacingSize, iconOnly, unifiedSize, extendedSize) {
+		// Check if using new extended sizing system (for App editor only)
+		if (extendedSize) {
+			const horizontalPadding = iconOnly
+				? ButtonType.ExtendedIconOnlySizingClasses[extendedSize]
+				: ButtonType.ExtendedSizingClasses[extendedSize]
+			const height = ButtonType.ExtendedHeightClasses[extendedSize]
+			return `${horizontalPadding} ${height}`
+		}
+
+		// Check if using new unified sizing system
+		if (unifiedSize) {
+			const horizontalPadding = iconOnly
+				? ButtonType.UnifiedIconOnlySizingClasses[unifiedSize]
+				: ButtonType.UnifiedSizingClasses[unifiedSize]
+			const height = ButtonType.UnifiedHeightClasses[unifiedSize]
+			return `${horizontalPadding} ${height}`
+		}
+
+		// Check if using new design system variants
+		if (iconOnly) {
+			return ButtonType.IconOnlyVariantSpacingClasses[spacingSize]
+		}
+		if (['accent-secondary', 'accent', 'default', 'subtle'].includes(variant)) {
+			return ButtonType.VariantSpacingClasses[spacingSize]
+		}
+
+		// Legacy spacing
+		return ButtonType.SpacingClasses[spacingSize][variant]
+	}
+
+	function getDividerClass(color, variant) {
+		// Check if using new design system variants
+		if (variant === 'default') {
+			return 'border border-border-light divide-x divide-border-light'
+		} else if (variant === 'accent') {
+			return 'divide-x divide-luminance-blue-100 dark:divide-luminance-blue-200'
+		} else if (variant === 'accent-secondary') {
+			return 'divide-x divide-deep-blue-400 dark:divide-deep-blue-100'
+		} else if (variant === 'subtle') {
+			return 'divide-x divide-transparent'
+		}
+
+		// Legacy color-based dividers
+		if (color in ButtonType.ColorVariants) {
+			return ButtonType.ColorVariants[color].divider
+		}
+
+		return ''
+	}
+
 	let buttonClass = $derived(
 		twMerge(
 			'w-full',
-			getColorClass(color, variant),
+			getStyleClass(color, variant),
 			variant === 'border' ? 'border' : '',
-			ButtonType.FontSizeClasses[size],
-			ButtonType.SpacingClasses[spacingSize][variant],
-			'focus-visible:ring-2 font-semibold',
-			dropdownItems && dropdownItems.length > 0 ? 'rounded-l-md h-full' : 'rounded-md',
+			extendedSize
+				? ButtonType.ExtendedFontSizeClasses[extendedSize]
+				: ButtonType.FontSizeClasses[size],
+			getSpacingClass(variant, size, spacingSize, iconOnly, unifiedSize, extendedSize),
+			unifiedSize ? ButtonType.UnifiedFontSizes[unifiedSize] : '',
+			'focus-visible:ring-2',
+			dropdownItems && dropdownItems.length > 0 ? 'rounded-l-md' : 'rounded-md',
 			'justify-center items-center text-center whitespace-nowrap inline-flex gap-2',
-			btnClasses,
-			'active:opacity-80 transition-all',
-			disabled ? '!bg-surface-disabled !text-tertiary cursor-not-allowed' : '',
-			loading ? 'cursor-wait' : ''
+			'active:opacity-80 transition-[background-color,opacity] duration-150',
+			disabled
+				? ['default', 'subtle'].includes(variant)
+					? '!text-disabled'
+					: '!bg-surface-disabled/20 !text-disabled'
+				: '',
+			loading ? 'cursor-wait' : '',
+			selected && ['default', 'subtle'].includes(variant)
+				? '!bg-surface-accent-selected/30 !text-accent !border-border-selected'
+				: '',
+			btnClasses
 		)
 	)
 
@@ -174,17 +267,13 @@
 		xl: 18
 	}
 
-	const iconOnlyPadding = {
-		xs3: 'm-[0.5px] qhd:m-[1px]',
-		xs2: 'm-[1px] qhd:m-[1.125px]',
-		xs: 'm-[1px] qhd:m-[1.125px]',
-		sm: 'm-[2px] qhd:m-[2.25px]',
-		md: 'm-[2px] qhd:m-[2.25px]',
-		lg: 'm-[5px] qhd:m-[5.625px]',
-		xl: 'm-[5px] qhd:m-[5.625px]'
-	}
-
-	let lucideIconSize = $derived((iconMap[size] ?? 12) * 1)
+	let lucideIconSize = $derived(
+		extendedSize
+			? ButtonType.ExtendedIconSizes[extendedSize]
+			: unifiedSize
+				? ButtonType.UnifiedIconSizes[unifiedSize]
+				: (iconMap[size] ?? 12)
+	)
 
 	const {
 		elements: { trigger, content },
@@ -211,16 +300,16 @@
 	$effect(() => {
 		$open !== undefined && dispatchIfMounted('tooltipOpen', $open)
 	})
+
+	const dividerClass = $derived(getDividerClass(color, variant))
 </script>
 
 <div
 	class={twMerge(
-		dropdownItems && dropdownItems.length > 0 && variant === 'contained'
-			? ButtonType.ColorVariants[color].divider
-			: '',
+		dropdownItems && dropdownItems.length > 0 ? dividerClass : '',
 		wrapperClasses,
-		'flex flex-row',
-		disabled ? 'divide-text-disabled' : ''
+		'flex flex-row rounded-md',
+		disabled ? 'divide-text-disabled cursor-not-allowed' : ''
 	)}
 	style={wrapperStyle}
 	data-interactive
@@ -257,10 +346,10 @@
 			{style}
 		>
 			{#if loading}
-				<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
+				<Loader2 class={twMerge('animate-spin shrink-0')} size={lucideIconSize} />
 			{:else if startIcon?.icon}
 				<startIcon.icon
-					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
+					class={twMerge('shrink-0', startIcon?.classes)}
 					size={lucideIconSize}
 					{...startIcon.props}
 				/>
@@ -270,15 +359,17 @@
 				{@render children?.()}
 			{/if}
 			{#if endIcon?.icon}
-				<endIcon.icon
-					class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-				/>
+				<endIcon.icon class={twMerge('shrink-0', endIcon?.classes)} size={lucideIconSize} />
 			{/if}
 			{#if shortCut && !shortCut.hide}
-				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+				<div
+					class={twMerge(
+						'flex flex-row items-center !text-md opacity-60 gap-0',
+						ButtonType.UnifiedFontSizes[size]
+					)}
+				>
 					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<shortCut.Icon
-							class="w-4 h-4"
+							class="w-4 h-4 shrink-0"
 							size={lucideIconSize}
 						/>{:else}{shortCut.key}{/if}
 				</div>
@@ -304,10 +395,10 @@
 			{...$trigger}
 		>
 			{#if loading}
-				<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
+				<Loader2 class={twMerge('animate-spin shrink-0')} size={lucideIconSize} />
 			{:else if startIcon?.icon}
 				<startIcon.icon
-					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
+					class={twMerge('shrink-0', startIcon?.classes)}
 					size={lucideIconSize}
 					{...startIcon.props}
 				/>
@@ -317,15 +408,18 @@
 				{@render children?.()}
 			{/if}
 			{#if endIcon?.icon}
-				<endIcon.icon
-					class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-				/>
+				<endIcon.icon class={twMerge('shrink-0', endIcon?.classes)} size={lucideIconSize} />
 			{/if}
 			{#if shortCut && !shortCut.hide}
 				{@const Icon = shortCut.Icon}
-				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+				<div
+					class={twMerge(
+						'flex flex-row items-center !text-md opacity-60 gap-0',
+						ButtonType.UnifiedFontSizes[size]
+					)}
+				>
 					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<Icon
+							class="shrink-0"
 							size={lucideIconSize}
 						/>{:else}{shortCut.key}{/if}
 				</div>
@@ -358,11 +452,13 @@
 						'rounded-md m-0 p-0 center-center h-full',
 						variant === 'border' ? 'border-0 border-r border-y ' : 'border-0',
 						'rounded-r-md !rounded-l-none',
-						size === 'xs2' || size === 'xs' ? '!w-8' : '!w-10',
+						size === 'xs2' || size === 'xs' || unifiedSize === 'md' || unifiedSize === 'sm'
+							? '!w-8'
+							: '!w-10',
 						dropdownBtnClasses
 					)}
 				>
-					<ChevronDown size={lucideIconSize} />
+					<ChevronDown class="shrink-0" size={lucideIconSize} />
 				</div>
 			{/snippet}
 		</Dropdown>
diff --git a/frontend/src/lib/components/common/button/ConnectionButton.svelte b/frontend/src/lib/components/common/button/ConnectionButton.svelte
index 2557ef4ca1..75d28f265e 100644
--- a/frontend/src/lib/components/common/button/ConnectionButton.svelte
+++ b/frontend/src/lib/components/common/button/ConnectionButton.svelte
@@ -94,8 +94,7 @@
 	>
 		<Button
 			size={small ? 'xs' : 'md'}
-			variant="border"
-			color="light"
+			variant="default"
 			title="Connect"
 			on:click={() => handleConnect(true)}
 			{id}
diff --git a/frontend/src/lib/components/common/button/RoundIconButton.svelte b/frontend/src/lib/components/common/button/RoundIconButton.svelte
index 35eea5b1ee..3d05d10f13 100644
--- a/frontend/src/lib/components/common/button/RoundIconButton.svelte
+++ b/frontend/src/lib/components/common/button/RoundIconButton.svelte
@@ -3,8 +3,8 @@
 	export let border: boolean = false
 
 	$: colorClasses = {
-		light: 'text-tertiary bg-surface hover:bg-surface-hover text-tertiary',
-		dark: 'text-tertiary hover:bg-surface-hover-dark text-tertiary'
+		light: 'text-primary bg-surface hover:bg-surface-hover text-primary',
+		dark: 'text-primary hover:bg-surface-hover-dark text-primary'
 	}[color ?? 'light']
 </script>
 
diff --git a/frontend/src/lib/components/common/button/UndoRedo.svelte b/frontend/src/lib/components/common/button/UndoRedo.svelte
index 583e6246e1..7a12eb1fc9 100644
--- a/frontend/src/lib/components/common/button/UndoRedo.svelte
+++ b/frontend/src/lib/components/common/button/UndoRedo.svelte
@@ -11,24 +11,20 @@
 <div class="flex">
 	<Button
 		title="Undo"
-		variant="border"
-		color="light"
-		size="xs"
+		variant="default"
 		btnClasses="!min-h-[30px] !rounded-r-none"
 		on:click={() => dispatch('undo')}
+		startIcon={{ icon: Undo }}
+		iconOnly
 		{...undoProps}
-	>
-		<Undo size={14} />
-	</Button>
+	></Button>
 	<Button
 		title="Redo"
-		variant="border"
-		color="light"
-		size="xs"
+		variant="default"
 		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
 		on:click={() => dispatch('redo')}
+		startIcon={{ icon: Redo }}
+		iconOnly
 		{...redoProps}
-	>
-		<Redo size={14} />
-	</Button>
+	></Button>
 </div>
diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts
index ad1046e872..1a0922e5f8 100644
--- a/frontend/src/lib/components/common/button/model.ts
+++ b/frontend/src/lib/components/common/button/model.ts
@@ -1,7 +1,24 @@
-export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'] as const
+import type { IconType } from '$lib/utils'
+
+export const BUTTON_COLORS = [
+	'blue',
+	'red',
+	'dark',
+	'light',
+	'green',
+	'gray',
+	'none',
+	'marine',
+	'nord'
+] as const
 
 export namespace ButtonType {
 	export type Size = 'xs3' | 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	export type UnifiedSize = 'sm' | 'md' | 'lg'
+	export type ExtendedSize = 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	/**
+	 * @deprecated Use `Variant` instead
+	 */
 	export type Color =
 		| 'blue'
 		| 'red'
@@ -12,11 +29,18 @@ export namespace ButtonType {
 		| 'none'
 		| 'marine'
 		| 'nord'
-	export type Variant = 'contained' | 'border' | 'divider'
+	export type Variant =
+		| 'contained' // Deprecated
+		| 'border' // Deprecated
+		| 'divider' // Deprecated
+		| 'accent-secondary'
+		| 'accent'
+		| 'default'
+		| 'subtle'
 	export type Target = '_self' | '_blank'
 	export type Element = HTMLButtonElement | HTMLAnchorElement
 	export interface Icon {
-		icon?: any | undefined
+		icon?: IconType | undefined
 		classes?: string
 		faIcon?: any | undefined
 		props?: any
@@ -26,13 +50,16 @@ export namespace ButtonType {
 		xs3: 'text-2xs',
 		xs2: 'text-xs',
 		xs: 'text-xs',
-		sm: 'text-sm',
-		md: 'text-md',
-		lg: 'text-lg',
-		xl: 'text-xl'
+		sm: 'text-xs',
+		md: 'text-xs',
+		lg: 'text-xs',
+		xl: 'text-xs'
 	} as const
 
-	export const SpacingClasses: Record<ButtonType.Size, Record<ButtonType.Variant, string>> = {
+	export const SpacingClasses: Record<
+		ButtonType.Size,
+		Record<'contained' | 'border' | 'divider', string>
+	> = {
 		xs3: {
 			border: 'px-0.5 py-[1px] !rounded-xs',
 			contained: 'px-0.5 py-[1px]',
@@ -75,7 +102,10 @@ export namespace ButtonType {
 		color: Color
 	}
 
-	export const ColorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>> = {
+	export const ColorVariants: Record<
+		ButtonType.Color,
+		Record<'contained' | 'border' | 'divider', string>
+	> = {
 		none: {
 			border: '',
 			contained: '',
@@ -84,10 +114,10 @@ export namespace ButtonType {
 
 		blue: {
 			border:
-				'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
+				'border-luminance-blue-500 dark:border-luminance-blue-300 hover:border-luminance-blue-700 focus-visible:border-luminance-blue-700 bg-surface hover:bg-luminance-blue-100 dark:hover:bg-luminance-blue-900/40 focus-visible:bg-luminance-blue-100 focus-visible:dark:text-luminance-blue-100 dark:focus-visible:bg-luminance-blue-900 text-luminance-blue-500 dark:text-luminance-blue-300 dark:hover:text-luminance-blue-200 hover:text-luminance-blue-700 focus-visible:text-luminance-blue-700 focus-visible:ring-luminance-blue-300',
 			contained:
-				'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
-			divider: 'divide-x divide-frost-600'
+				'bg-luminance-blue-300 hover:bg-luminance-blue-400 focus-visible:bg-luminance-blue-500 text-white focus-visible:ring-luminance-blue-300',
+			divider: 'divide-x divide-luminance-blue-600'
 		},
 		marine: {
 			border:
@@ -139,4 +169,133 @@ export namespace ButtonType {
 			divider: 'divide-x divide-gray-800 dark:divide-gray-200'
 		}
 	}
+
+	export const VariantStyles: Record<'accent-secondary' | 'accent' | 'default' | 'subtle', string> =
+		{
+			'accent-secondary':
+				'bg-surface-accent-secondary hover:bg-surface-accent-secondary-hover focus-visible:bg-surface-accent-secondary-clicked text-white dark:text-deep-blue-900 focus-visible:ring-luminance-blue-300',
+			accent:
+				'bg-surface-accent-primary hover:bg-surface-accent-hover focus-visible:bg-surface-accent-clicked text-white focus-visible:ring-luminance-blue-300',
+			default:
+				'border border-border-light bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-luminance-blue-300',
+			subtle:
+				'bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-luminance-blue-300'
+		}
+
+	export const DestructiveVariantStyles: Record<
+		'accent-secondary' | 'accent' | 'default' | 'subtle',
+		string
+	> = {
+		'accent-secondary':
+			'bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
+		accent:
+			'bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
+		default:
+			'border border-border-light bg-transparent hover:bg-red-600 hover:text-white dark:hover:bg-red-900/20 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
+		subtle:
+			'bg-transparent hover:bg-red-600 hover:text-white dark:hover:bg-red-900/20 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
+	}
+
+	export const VariantSpacingClasses: Record<ButtonType.Size, string> = {
+		xs3: 'px-0.5 py-[1px]',
+		xs2: 'px-2 py-[4px]',
+		xs: 'px-3 py-[7px]',
+		sm: 'px-3 py-[7px]',
+		md: 'px-3 py-[7px]',
+		lg: 'px-4 py-[9px]',
+		xl: 'px-4 py-[9px]'
+	}
+
+	export const IconOnlyVariantSpacingClasses: Record<ButtonType.Size, string> = {
+		xs3: 'px-0.5 py-[1px]',
+		xs2: 'px-1 py-[4px]',
+		xs: 'px-2 py-[7px]',
+		sm: 'px-2 py-[7px]',
+		md: 'px-2 py-[7px]',
+		lg: 'px-2.5 py-[9px]',
+		xl: 'px-2.5 py-[9px]'
+	}
+
+	// New unified sizing system
+	export const UnifiedSizingClasses: Record<ButtonType.UnifiedSize, string> = {
+		sm: 'px-2', // Regular horizontal padding
+		md: 'px-4',
+		lg: 'px-6'
+	}
+
+	export const UnifiedIconOnlySizingClasses: Record<ButtonType.UnifiedSize, string> = {
+		sm: 'px-2', // Square padding for icon-only (same as width padding)
+		md: 'px-2',
+		lg: 'px-4'
+	}
+
+	export const UnifiedMinHeightClasses: Record<ButtonType.UnifiedSize, string> = {
+		sm: 'min-h-6',
+		md: 'min-h-8',
+		lg: 'min-h-10'
+	}
+
+	export const UnifiedHeightClasses: Record<ButtonType.UnifiedSize, string> = {
+		sm: 'h-6',
+		md: 'h-8',
+		lg: 'h-10'
+	}
+
+	export const UnifiedIconSizes: Record<ButtonType.UnifiedSize, number> = {
+		sm: 14,
+		md: 14,
+		lg: 18
+	}
+
+	export const UnifiedFontSizes: Record<ButtonType.UnifiedSize, string> = {
+		sm: 'font-normal',
+		md: 'font-medium',
+		lg: 'font-medium'
+	}
+
+	// Extended sizing system for App editor with increased padding and icon sizes
+	export const ExtendedSizingClasses: Record<ButtonType.ExtendedSize, string> = {
+		xs2: 'px-1', // Smallest
+		xs: 'px-2', // Very small
+		sm: 'px-3', // Small (increased from unified)
+		md: 'px-5', // Medium (increased from unified)
+		lg: 'px-7', // Large (increased from unified)
+		xl: 'px-9' // Extra large (new)
+	}
+
+	export const ExtendedIconOnlySizingClasses: Record<ButtonType.ExtendedSize, string> = {
+		xs2: 'px-1', // Square padding for icon-only
+		xs: 'px-2',
+		sm: 'px-3',
+		md: 'px-5',
+		lg: 'px-7',
+		xl: 'px-9'
+	}
+
+	export const ExtendedHeightClasses: Record<ButtonType.ExtendedSize, string> = {
+		xs2: 'min-h-5', // 20px
+		xs: 'min-h-6', // 24px
+		sm: 'min-h-7', // 28px
+		md: 'min-h-9', // 36px (increased from unified)
+		lg: 'min-h-12', // 48px (increased from unified)
+		xl: 'min-h-14' // 56px (new)
+	}
+
+	export const ExtendedIconSizes: Record<ButtonType.ExtendedSize, number> = {
+		xs2: 10, // Smallest icons
+		xs: 12,
+		sm: 14,
+		md: 16, // Increased from unified
+		lg: 20, // Increased from unified
+		xl: 24 // Largest icons
+	}
+
+	export const ExtendedFontSizeClasses: Record<ButtonType.ExtendedSize, string> = {
+		xs2: 'text-2xs',
+		xs: 'text-xs',
+		sm: 'text-xs',
+		md: 'text-xs',
+		lg: 'text-sm',
+		xl: 'text-sm'
+	}
 }
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index fa8bc635cf..bdc900f3f8 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -126,6 +126,8 @@
 							color={theme[type].color}
 							size="sm"
 							shortCut={{ Icon: CornerDownLeft, hide: !keyListen, withoutModifier: true }}
+							variant="accent"
+							destructive={type === 'danger'}
 						>
 							{#if loading}
 								<Loader2 class="animate-spin" />
@@ -135,7 +137,7 @@
 						<Button
 							disabled={loading}
 							on:click={() => (dispatch('canceled'), onCanceled?.())}
-							color="light"
+							variant="default"
 							size="sm"
 							shortCut={{ key: 'Esc', hide: !keyListen, withoutModifier: true }}
 						>
diff --git a/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
index ac4f9e7877..8d41fff902 100644
--- a/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
 	import ConfirmationModal from './ConfirmationModal.svelte'
 	import Button from '../button/Button.svelte'
-	import {  type Value } from '$lib/utils'
+	import { type Value } from '$lib/utils'
 	import type { DiffDrawerI } from '$lib/components/diff_drawer'
 
 	interface Props {
-		deployedValue?: Value | undefined;
-		currentValue?: Value | undefined;
-		diffDrawer?: DiffDrawerI | undefined;
-		confirmCallback: () => void;
-		deployedBy?: string | undefined;
-		open?: boolean;
+		deployedValue?: Value | undefined
+		currentValue?: Value | undefined
+		diffDrawer?: DiffDrawerI | undefined
+		confirmCallback: () => void
+		deployedBy?: string | undefined
+		open?: boolean
 	}
 
 	let {
@@ -20,12 +20,12 @@
 		confirmCallback,
 		deployedBy = undefined,
 		open = $bindable(false)
-	}: Props = $props();
+	}: Props = $props()
 </script>
 
 <ConfirmationModal
 	{open}
-	title={"New version deployed by " + deployedBy}
+	title={'New version deployed by ' + deployedBy}
 	confirmationText="Override"
 	on:canceled={() => {
 		open = false
@@ -37,8 +37,7 @@
 		{#if diffDrawer}
 			<Button
 				wrapperClasses="self-start"
-				color="light"
-				variant="border"
+				variant="default"
 				size="xs"
 				on:click={() => {
 					if (!deployedValue || !currentValue) {
diff --git a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
index 5c1a257b39..cf43ab8672 100644
--- a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
@@ -106,12 +106,10 @@
 									<div class="relative flex justify-center items-center">
 										<SvelteComponent
 											size={14}
-											class={isSelectedTrigger
-												? 'text-blue-500'
-												: 'text-gray-500 dark:text-gray-400'}
+											class={isSelectedTrigger ? 'text-accent' : 'text-hint'}
 										/>
 										{#if trigger.isPrimary}
-											<Star size={8} class="absolute -mt-3 ml-3 text-blue-400" />
+											<Star size={8} class="absolute -mt-3 ml-3 text-accent" />
 										{/if}
 									</div>
 									<div class="flex grow min-w-0 items-center text-left">
diff --git a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
index 2544e89fe7..16f49f7d03 100644
--- a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
@@ -113,8 +113,7 @@
 		{#if savedValue && modifiedValue && diffDrawer}
 			<Button
 				wrapperClasses="self-start"
-				color="light"
-				variant="border"
+				variant="default"
 				size="xs"
 				on:click={() => {
 					if (!savedValue || !modifiedValue) {
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index f3c05b08c9..a0a67800ec 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -52,7 +52,7 @@
 			>
 				<CloseButton on:close Icon={CloseIcon} />
 			</div>
-			<span class="font-semibold truncate text-primary !text-lg max-w-sm"
+			<span class="font-semibold text-emphasis truncate text-lg max-w-sm"
 				>{title ?? ''}
 				{#if tooltip != '' || documentationLink}
 					<Tooltip {documentationLink}>{tooltip}</Tooltip>
diff --git a/frontend/src/lib/components/common/fileDownload/FileDownload.svelte b/frontend/src/lib/components/common/fileDownload/FileDownload.svelte
index 824847eb4f..8887e6b4e0 100644
--- a/frontend/src/lib/components/common/fileDownload/FileDownload.svelte
+++ b/frontend/src/lib/components/common/fileDownload/FileDownload.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <a
-	class="relative center-center flex w-full text-center font-normal text-tertiary text-sm
+	class="relative center-center flex w-full text-center font-normal text-primary text-sm
 border border-dashed border-gray-400 hover:border-blue-500
 focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50
 duration-200 rounded-lg p-1 gap-2"
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index 1f401d5d41..37a8b3801e 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -228,12 +228,12 @@
 						<span class="pr-2 ellipsize">{name}</span>
 						<Button
 							size="xs"
-							color="red"
-							variant="border"
+							variant="default"
 							iconOnly
 							btnClasses="bg-transparent"
 							startIcon={{ icon: Trash }}
 							on:click={() => removeFile(i)}
+							destructive
 						/>
 					</li>
 				{/each}
@@ -258,7 +258,7 @@
 		{...$$restProps}
 	/>
 	{#if defaultFile && (!Array.isArray(defaultFile) || defaultFile.length > 0)}
-		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-tertiary mt-2">
+		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-primary mt-2">
 			Default file: <span class="text-nord-900">{defaultFile}</span>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
index c54ab21838..f0ce068ea7 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
@@ -454,8 +454,7 @@
 								{#if fileUpload.cancelled || fileUpload.errorMessage !== undefined}
 									<Button
 										size="xs2"
-										color="light"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											const file = fileUpload.file
 
@@ -479,8 +478,7 @@
 									</Button>
 									<Button
 										size="xs2"
-										color="light"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											const file = fileUpload.file
 
@@ -504,8 +502,7 @@
 								{#if fileUpload.progress !== undefined && fileUpload.progress < 100 && !fileUpload.cancelled && !fileUpload.errorMessage}
 									<Button
 										size="xs2"
-										color="light"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											fileUpload.cancelled = true
 											fileUpload.progress = 0
@@ -521,8 +518,7 @@
 								{#if fileUpload.progress === 100 && !fileUpload.cancelled && allowDelete && (!appPath || fileUpload.deleteToken != undefined)}
 									<Button
 										size="xs2"
-										color="red"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -536,14 +532,14 @@
 										startIcon={{
 											icon: Trash
 										}}
+										destructive
 									>
 										Delete
 									</Button>
 								{:else if fileUpload.fromBucket}
 									<Button
 										size="xs2"
-										color="red"
-										variant="border"
+										variant="default"
 										on:click={() => {
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -556,6 +552,7 @@
 										startIcon={{
 											icon: XIcon
 										}}
+										destructive
 									>
 										Remove
 									</Button>
diff --git a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
index 6a0d1dac73..916c3b671b 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
@@ -54,7 +54,7 @@
 				>
 					<div class="flex flex-col gap-2">
 						<div class="flex justify-between">
-							<h3 class="text-lg font-medium text-primary">
+							<h3 class="text-lg font-semibold text-primary">
 								{title}
 							</h3>
 							<Button
diff --git a/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte b/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte
index 9009c8ed0f..1284ac08aa 100644
--- a/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte
+++ b/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte
@@ -128,10 +128,9 @@
 	{/if}
 	{#if $userStore}
 		<Button
-			variant="border"
-			color="light"
+			variant="default"
 			size="xs"
-			btnClasses="mt-1 font-normal text-tertiary"
+			btnClasses="mt-1 font-normal text-primary"
 			on:click={() => {
 				s3FilePicker?.open?.(value)
 			}}
diff --git a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
index 19c8a5e991..a380a5d753 100644
--- a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
+++ b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
@@ -26,29 +26,24 @@
 	import RubyIcon from '$lib/components/icons/RubyIcon.svelte'
 
 	interface Props {
-		lang: 
-		| SupportedLanguage
-		| 'mysql'
-		| 'bun'
-		| 'pgsql'
-		| 'javascript'
-		| 'fetch'
-		| 'docker'
-		| 'powershell'
-		| 'bunnative';
-		width?: number;
-		height?: number;
-		scale?: number;
+		lang:
+			| SupportedLanguage
+			| 'mysql'
+			| 'bun'
+			| 'pgsql'
+			| 'javascript'
+			| 'fetch'
+			| 'docker'
+			| 'powershell'
+			| 'bunnative'
+		width?: number
+		height?: number
+		scale?: number
 		[key: string]: any
+		size?: number
 	}
 
-	let {
-		lang,
-		width = 30,
-		height = 30,
-		scale = 1,
-		...rest
-	}: Props = $props();
+	let { lang, width = 30, height = 30, scale = 1, size = undefined, ...rest }: Props = $props()
 
 	const languageLabel: Record<Script['language'] | 'bunnative', String> = {
 		python3: 'Python',
@@ -74,7 +69,7 @@
 		nu: 'Nu',
 		java: 'Java',
 		ruby: 'Ruby'
-		// for related places search: ADD_NEW_LANG 
+		// for related places search: ADD_NEW_LANG
 	}
 
 	const langToComponent: Record<
@@ -114,14 +109,14 @@
 
 	let subIconScale = width === 30 ? 0.6 : 0.8
 
-	const SvelteComponent = $derived(langToComponent[lang]);
+	const SvelteComponent = $derived(langToComponent[lang])
 </script>
 
 <div class="relative">
 	<SvelteComponent
 		title={languageLabel[lang]}
-		width={width * scale}
-		height={height * scale}
+		width={size ? size : width * scale}
+		height={size ? size : height * scale}
 		{...rest}
 	/>
 	{#if lang === 'deno'}
diff --git a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
index 8c14d3b997..c4049802fc 100644
--- a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
+++ b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
@@ -55,7 +55,7 @@
 							}}
 							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
 						>
-							<X class="text-tertiary" />
+							<X class="text-primary" />
 						</button>
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index 795885b44c..8c7294d35a 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -81,7 +81,7 @@
 								<slot name="settings" />
 							</div>
 
-							<div class="mt-4 text-sm text-tertiary">
+							<div class="mt-4 text-sm text-primary">
 								<slot />
 							</div>
 						</div>
diff --git a/frontend/src/lib/components/common/modal/Modal2.svelte b/frontend/src/lib/components/common/modal/Modal2.svelte
index 7d34172237..cecadb18b3 100644
--- a/frontend/src/lib/components/common/modal/Modal2.svelte
+++ b/frontend/src/lib/components/common/modal/Modal2.svelte
@@ -87,7 +87,7 @@
 														}}
 														class="hover:bg-surface-hover rounded-full w-8 h-8 flex items-center justify-center transition-all"
 													>
-														<X class="text-tertiary " />
+														<X class="text-primary " />
 													</button>
 												</div>
 											</List>
diff --git a/frontend/src/lib/components/common/seconds/SecondsInput.svelte b/frontend/src/lib/components/common/seconds/SecondsInput.svelte
index c38b118eb5..4f2cfdd11c 100644
--- a/frontend/src/lib/components/common/seconds/SecondsInput.svelte
+++ b/frontend/src/lib/components/common/seconds/SecondsInput.svelte
@@ -52,8 +52,8 @@
 			value={seconds == null || seconds == undefined
 				? 'Not set'
 				: disabled
-				? ''
-				: seconds + ' second' + (seconds === 1 ? '' : 's')}
+					? ''
+					: seconds + ' second' + (seconds === 1 ? '' : 's')}
 			{disabled}
 			readonly
 			type="text"
diff --git a/frontend/src/lib/components/common/stepper/Stepper.svelte b/frontend/src/lib/components/common/stepper/Stepper.svelte
index 99a9490b63..2bdb1079db 100644
--- a/frontend/src/lib/components/common/stepper/Stepper.svelte
+++ b/frontend/src/lib/components/common/stepper/Stepper.svelte
@@ -44,7 +44,7 @@
 					: 'border-blue-500 border'
 			} else {
 				return current
-					? 'border-gray-500 border bg-gray-200 text-tertiary'
+					? 'border-gray-500 border bg-gray-200 text-primary'
 					: 'border-gray-500 border'
 			}
 		}
@@ -52,7 +52,7 @@
 </script>
 
 <div class="flex justify-between">
-	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-tertiary">
+	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-primary">
 		{#each tabs ?? [] as step, index}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -82,7 +82,7 @@
 				<span
 					class={classNames(
 						'hidden sm:block',
-						selectedIndex === index ? 'font-semibold text-primary' : 'font-normal text-tertiary'
+						selectedIndex === index ? 'font-semibold text-primary' : 'font-normal text-primary'
 					)}
 				>
 					{step}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 77ed26d1f5..6c184563df 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -88,20 +88,10 @@
 >
 	{#snippet badges()}
 		{#if app.execution_mode == 'anonymous'}
-			<Badge small>
-				<div class="flex gap-1 items-center">
-					<Eye size={14} />
-					Public
-				</div></Badge
-			>
+			<Badge small icon={{ icon: Eye }}>Public</Badge>
 		{/if}
 		{#if app.raw_app}
-			<Badge small>
-				<div class="flex gap-1 items-center">
-					<FileJson size={14} />
-					Raw
-				</div></Badge
-			>
+			<Badge small icon={{ icon: FileJson }}>Raw</Badge>
 		{/if}
 		<SharedBadge canWrite={app.canWrite} extraPerms={app.extra_perms} />
 		<DraftBadge has_draft={app.has_draft} draft_only={app.draft_only} />
@@ -115,9 +105,8 @@
 						<Button
 							aiId={`edit-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
 							aiDescription={`Edits the app ${app.summary?.length > 0 ? app.summary : app.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
 							startIcon={{ icon: Pen }}
 							href="{base}/apps{app.raw_app ? '_raw' : ''}/edit/{app.path}?nodraft=true"
 						>
@@ -129,9 +118,9 @@
 						<Button
 							aiId={`fork-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
 							aiDescription={`Fork the app ${app.summary?.length > 0 ? app.summary : app.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
 							href="{base}/apps{app.raw_app ? '_raw' : ''}/add?template={app.path}"
 						>
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index 734b997e24..755d311996 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -126,9 +126,9 @@
 				{#if flow.canWrite && !flow.archived}
 					<div>
 						<Button
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: Pen }}
 							href="{base}/flows/edit/{flow.path}?nodraft=true"
 							aiId={`edit-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
@@ -140,9 +140,9 @@
 				{:else}
 					<div>
 						<Button
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
 							href="{base}/flows/add?template={flow.path}"
 							aiId={`fork-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
diff --git a/frontend/src/lib/components/common/table/RawAppRow.svelte b/frontend/src/lib/components/common/table/RawAppRow.svelte
index 143b1beb8e..10bd600080 100644
--- a/frontend/src/lib/components/common/table/RawAppRow.svelte
+++ b/frontend/src/lib/components/common/table/RawAppRow.svelte
@@ -89,9 +89,8 @@
 				{#if app.canWrite}
 					<div>
 						<Button
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							unifiedSize="md"
 							startIcon={{ icon: Pen }}
 							on:click={() => updateAppDrawer?.toggleDrawer?.()}
 						>
diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index 43b51917a3..e8875af449 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -58,7 +58,7 @@
 ></div>
 <div
 	class={twMerge(
-		'hover:bg-surface-hover w-full inline-flex items-center gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-2.5 border-b last:border-b-0',
+		'hover:bg-surface-hover w-full inline-flex items-center gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-3 border-b last:border-b-0',
 		depth > 0 ? '!rounded-none' : ''
 	)}
 	style={depth > 0 ? `padding-left: ${depth * 32}px;` : ''}
@@ -68,14 +68,14 @@
 			<RowIcon {href} {kind} />
 		</div>
 		<div class="grow">
-			<div class="text-primary flex-wrap text-left text-sm font-semibold">
+			<div class="text-emphasis flex-wrap text-left text-xs font-semibold">
 				{#if marked}
 					{@html marked}
 				{:else}
 					{!summary || summary.length == 0 ? displayPath : summary}
 				{/if}
 			</div>
-			<div class="text-secondary text-2xs truncate text-left font-light">
+			<div class="text-hint text-3xs truncate text-left font-normal">
 				{path}
 			</div>
 		</div>
@@ -92,7 +92,7 @@
 	{/if}
 
 	{#if canFavorite}
-		<div class="center-center h-full text-sm font-semibold text-secondary">
+		<div class="center-center h-full text-xs font-semibold text-secondary">
 			<Star
 				{kind}
 				{path}
diff --git a/frontend/src/lib/components/common/table/RowIcon.svelte b/frontend/src/lib/components/common/table/RowIcon.svelte
index a4d672ab0d..8803268166 100644
--- a/frontend/src/lib/components/common/table/RowIcon.svelte
+++ b/frontend/src/lib/components/common/table/RowIcon.svelte
@@ -1,32 +1,17 @@
 <script lang="ts">
-	import { classNames } from '$lib/utils'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import { Code2, LayoutDashboard } from 'lucide-svelte'
 
 	export let kind: 'script' | 'flow' | 'app' | 'raw_app'
 	export let href: string = '#'
-
-	const color = {
-		script: 'bg-blue-50 border-blue-200 dark:bg-blue-800/20 dark:border-blue-500/70',
-		flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-teal-800/20 dark:border-teal-600/70',
-		app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70',
-		raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70'
-	}[kind]
-
-	const iconColor = {
-		script: '#60A5FA',
-		flow: '#14b8a6',
-		app: '#fb923c',
-		raw_app: '#fb923c'
-	}[kind]
 </script>
 
-<a {href} class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
+<a {href} class="flex justify-center items-center">
 	{#if kind === 'flow'}
-		<BarsStaggered size={20} class=" text-[#14b8a6] p-0.5" />
+		<BarsStaggered size={16} class="text-teal-500" />
 	{:else if kind === 'app' || kind === 'raw_app'}
-		<LayoutDashboard size={20} color={iconColor} />
+		<LayoutDashboard size={16} class="text-orange-500" />
 	{:else if kind === 'script'}
-		<Code2 size={20} color={iconColor} />
+		<Code2 size={16} class="text-blue-500" />
 	{/if}
 </a>
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index 15ecddb34a..086757b185 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -146,7 +146,7 @@
 		<SharedBadge canWrite={script.canWrite} extraPerms={script.extra_perms} />
 		<DraftBadge has_draft={script.has_draft} draft_only={script.draft_only} />
 		<div class="w-8 center-center">
-			<LanguageIcon lang={script.language} width={12} height={12} />
+			<LanguageIcon lang={script.language} width={16} height={16} />
 		</div>
 	{/snippet}
 
@@ -164,9 +164,9 @@
 						<Button
 							aiId={`edit-script-button-${script.summary?.length > 0 ? script.summary : script.path}`}
 							aiDescription={`Edits the script ${script.summary?.length > 0 ? script.summary : script.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: Pen }}
 							href="{base}/scripts/edit/{script.path}"
 						>
@@ -178,9 +178,9 @@
 						<Button
 							aiId={`fork-script-button-${script.summary ?? script.path}`}
 							aiDescription={`Fork the script ${script.summary ?? script.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
 							href="{base}/scripts/add?template={script.path}"
 						>
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index 30b22abeb9..53993a8bcd 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -10,7 +10,8 @@
 		aiId?: string | undefined
 		aiDescription?: string | undefined
 		value: string
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		label?: string
+		icon?: any | undefined
 		class?: string
 		style?: string
 		selectedClass?: string
@@ -20,14 +21,15 @@
 		exact?: boolean
 		otherValues?: string[]
 		disabled?: boolean
-		children?: import('svelte').Snippet
+		extra?: import('svelte').Snippet
 	}
 
 	let {
 		aiId = undefined,
 		aiDescription = undefined,
 		value,
-		size = 'sm',
+		label,
+		icon = undefined,
 		class: c = '',
 		style = '',
 		selectedClass = '',
@@ -37,7 +39,7 @@
 		exact = false,
 		otherValues = [],
 		disabled = false,
-		children
+		extra = undefined
 	}: Props = $props()
 	const { selected, update, hashNavigation } = getContext<TabsContext>('Tabs')
 
@@ -54,14 +56,6 @@
 	let isSelectedFn = $derived(getIsSelectedFn(exact, otherValues))
 
 	let isSelected = $derived(isSelectedFn($selected))
-
-	const fontSizeClasses = {
-		xs: 'text-xs',
-		sm: 'text-sm',
-		md: 'text-md',
-		lg: 'text-lg',
-		xl: 'text-xl'
-	}
 </script>
 
 <button
@@ -77,14 +71,13 @@
 		}
 	}}
 	class={twMerge(
-		'border-b-2 py-1 px-2 cursor-pointer transition-all z-10 ease-linear font-normal text-tertiary',
+		'border-b-2 border-border-light py-1 px-2 cursor-pointer transition-all z-10 ease-linear text-primary font-normal text-xs',
 		isSelected
-			? 'wm-tab-active font-main'
-			: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
-		fontSizeClasses[size],
+			? 'text-emphasis font-semibold border-border-normal'
+			: 'border-opacity-0 hover:border-opacity-100',
 		c,
 		isSelected ? selectedClass : '',
-		disabled ? 'cursor-not-allowed text-tertiary' : ''
+		disabled ? 'cursor-not-allowed text-disabled' : ''
 	)}
 	style={`${style} ${isSelected ? selectedStyle : ''}`}
 	onclick={() => {
@@ -101,7 +94,19 @@
 	{disabled}
 	{id}
 >
-	<div class={twMerge(active ? 'bg-blue-50 text-blue-800 rounded-md ' : '', 'px-2 ')}>
-		{@render children?.()}
+	<div
+		class={twMerge(
+			active ? 'bg-surface-accent-selected text-accent rounded-md' : '',
+			'flex gap-2 items-center my-1 px-2'
+		)}
+	>
+		{#if icon}
+			{@const IconComponent = icon}
+			<IconComponent size={14} />
+		{/if}
+		{#if label}
+			{label}
+		{/if}
+		{@render extra?.()}
 	</div>
 </button>
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index cc09b8fca9..2b1a24e58a 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -3,6 +3,7 @@
 	import Tooltip from '$lib/components/meltComponents/Tooltip.svelte'
 	import { type ToggleGroupElements, type ToggleGroupItemProps, melt } from '@melt-ui/svelte'
 	import { Info } from 'lucide-svelte'
+	import { ButtonType } from '$lib/components/common/button/model'
 
 	interface Props {
 		label?: string | undefined
@@ -12,7 +13,7 @@
 		disabled?: boolean
 		selectedColor?: string | undefined
 		small?: boolean
-		light?: boolean
+		size?: 'sm' | 'md' | 'lg'
 		iconProps?: Record<string, any>
 		showTooltipIcon?: boolean
 		documentationLink?: string | undefined
@@ -30,7 +31,7 @@
 		disabled = false,
 		selectedColor = undefined,
 		small = false,
-		light = false,
+		size = undefined,
 		iconProps = {},
 		showTooltipIcon = false,
 		documentationLink = undefined,
@@ -39,6 +40,18 @@
 		value,
 		class: className = ''
 	}: Props = $props()
+
+	// Handle backward compatibility: small prop maps to size="sm"
+	const actualSize = $derived(size ?? (small ? 'sm' : 'md'))
+
+	// Direct access to unified sizing
+	const horizontalPadding = $derived(
+		iconOnly
+			? ButtonType.UnifiedIconOnlySizingClasses[actualSize]
+			: ButtonType.UnifiedSizingClasses[actualSize]
+	)
+	const height = $derived(ButtonType.UnifiedHeightClasses[actualSize])
+	const iconSize = $derived(ButtonType.UnifiedIconSizes[actualSize])
 </script>
 
 <Tooltip
@@ -51,13 +64,12 @@
 		{id}
 		{disabled}
 		class={twMerge(
-			'group rounded-md transition-all font-normal flex gap-1 flex-row items-center border',
-			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1 text-sm',
-			light
-				? 'hover:text-secondary data-[state=on]:text-secondary text-tertiary'
-				: 'hover:text-primary data-[state=on]:text-primary text-secondary',
-			'data-[state=on]:bg-surface data-[state=off]:border-transparent data-[state=on]:border-gray-300 dark:data-[state=on]:border-gray-500',
-			'bg-surface-secondary hover:bg-surface-hover',
+			'group rounded-md transition-all font-normal flex gap-1 flex-row items-center justify-center border text-xs',
+			horizontalPadding,
+			height,
+			'text-primary data-[state=on]:text-primary',
+			'data-[state=on]:bg-surface-tertiary data-[state=off]:border-transparent data-[state=on]:border-border-normal/30',
+			'bg-surface-transparent hover:bg-surface-hover',
 			disabled ? '!shadow-none' : '',
 			className
 		)}
@@ -67,10 +79,10 @@
 		{#if icon}
 			{@const SvelteComponent = icon}
 			<SvelteComponent
-				size={small ? 12 : 14}
+				size={iconSize}
 				{...iconProps}
 				class={twMerge(
-					light ? 'text-tertiary' : 'text-secondary',
+					'text-primary',
 					selectedColor
 						? 'group-data-[state=on]:text-[var(--selected-color)]'
 						: 'group-data-[state=on]:text-blue-500 dark:group-data-[state=on]:text-nord-800',
@@ -82,7 +94,7 @@
 			{label}
 		{/if}
 		{#if showTooltipIcon}
-			<Info size={14} class="text-gray-400" />
+			<Info size={iconSize} class="text-gray-400" />
 		{/if}
 	</button>
 
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 293da341e4..2b24d57738 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -72,7 +72,7 @@
 >
 	<div
 		class={twMerge(
-			'flex bg-surface-secondary rounded-md h-full',
+			'flex bg-surface-sunken dark:bg-surface-sunken/60 rounded-md h-full',
 			wrap ? 'flex-wrap' : '',
 			tabListClass
 		)}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
index 8a9a103891..4c542083a9 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
@@ -13,22 +13,22 @@
 	interface Props {
 		disabled?: boolean
 		small?: boolean
-		light?: boolean
 		id?: string | undefined
 		item?: any | undefined
 		selected?: string | undefined
 		togglableItems: TogglableItem[]
+		btnText?: string
 		class?: string
 	}
 
 	let {
 		disabled = false,
 		small = false,
-		light = false,
 		id = undefined,
 		item = undefined,
 		selected = $bindable(undefined),
 		togglableItems,
+		btnText,
 		class: className = ''
 	}: Props = $props()
 
@@ -57,7 +57,6 @@
 				value={selected ?? ''}
 				{item}
 				{small}
-				{light}
 				{id}
 				label={togglableItems.find((i) => i.value === selected)?.label}
 				{tooltip}
@@ -65,7 +64,7 @@
 			/>
 		{/if}
 		<div class="flex items-center">
-			<DropdownV2 enableFlyTransition {items} />
+			<DropdownV2 {btnText} enableFlyTransition {items} size={small ? 'sm' : 'md'} />
 		</div>
 	</div>
 </Popover>
diff --git a/frontend/src/lib/components/copilot/AIFormAssistant.svelte b/frontend/src/lib/components/copilot/AIFormAssistant.svelte
index cf510345ab..4678342a57 100644
--- a/frontend/src/lib/components/copilot/AIFormAssistant.svelte
+++ b/frontend/src/lib/components/copilot/AIFormAssistant.svelte
@@ -24,7 +24,7 @@
 		<AskAiButton label="Fill with AI" onClick={fillFormWithAI} />
 	</div>
 	<div class="flex flex-row gap-2 items-center">
-		<p class="text-sm text-tertiary">
+		<p class="text-sm text-primary">
 			{instructions
 				? 'Instructions: ' + instructions
 				: 'No AI instructions provided. Click edit to add guidance for AI form filling.'}
diff --git a/frontend/src/lib/components/copilot/AIFormSettings.svelte b/frontend/src/lib/components/copilot/AIFormSettings.svelte
index d18f316cdc..44151a01b3 100644
--- a/frontend/src/lib/components/copilot/AIFormSettings.svelte
+++ b/frontend/src/lib/components/copilot/AIFormSettings.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { slide } from 'svelte/transition'
 	import Label from '../Label.svelte'
 	import Toggle from '../Toggle.svelte'
 	import Tooltip from '../Tooltip.svelte'
@@ -11,9 +12,10 @@
 	let { prompt = $bindable(undefined), type = 'script' }: Props = $props()
 </script>
 
-<div class="flex flex-col gap-2">
+<div>
 	<Toggle
-		size="sm"
+		textClass="font-medium"
+		size="xs"
 		checked={prompt !== undefined}
 		on:change={() => {
 			if (prompt !== undefined) {
@@ -22,21 +24,23 @@
 				prompt = ''
 			}
 		}}
-		options={{
-			right: `Enable filling ${type} inputs with AI`
-		}}
+		options={{ right: `Enable filling ${type} inputs with AI` }}
 	/>
 	{#if prompt !== undefined}
-		<Label label="Additional prompt for AI">
-			{#snippet header()}
-				<Tooltip>
-					AI will use script description and each field description to fill the inputs form. In
-					addition, any prompt passed here will be used by AI to guide it. You can mention specific
-					fields and interaction between fields here.
-				</Tooltip>
-			{/snippet}
-			<textarea bind:value={prompt} placeholder="Instructions for the AI about how to fill the form"
-			></textarea>
-		</Label>
+		<div transition:slide={{ duration: 120 }} class="mt-6">
+			<Label label="Additional prompt for AI">
+				{#snippet header()}
+					<Tooltip>
+						AI will use script description and each field description to fill the inputs form. In
+						addition, any prompt passed here will be used by AI to guide it. You can mention
+						specific fields and interaction between fields here.
+					</Tooltip>
+				{/snippet}
+				<textarea
+					bind:value={prompt}
+					placeholder="Instructions for the AI about how to fill the form"
+				></textarea>
+			</Label>
+		</div>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/copilot/AskAiButton.svelte b/frontend/src/lib/components/copilot/AskAiButton.svelte
index fba62c3e59..9a8a7d56d9 100644
--- a/frontend/src/lib/components/copilot/AskAiButton.svelte
+++ b/frontend/src/lib/components/copilot/AskAiButton.svelte
@@ -28,7 +28,7 @@
 		icon: WandSparkles
 	}}
 	size="xs2"
-	btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 !bg-surface"
+	btnClasses="!text-ai border border-gray-200 dark:border-gray-600 !bg-surface"
 	on:click={onClick}
 >
 	{label}
diff --git a/frontend/src/lib/components/copilot/CronGen.svelte b/frontend/src/lib/components/copilot/CronGen.svelte
index 9ff32b407f..36cc7de352 100644
--- a/frontend/src/lib/components/copilot/CronGen.svelte
+++ b/frontend/src/lib/components/copilot/CronGen.svelte
@@ -77,7 +77,7 @@
 			startIcon={{ icon: Wand2 }}
 			iconOnly
 			title="AI Assistant"
-			btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
 			loading={genLoading}
 			clickableWhileLoading
 			on:click={genLoading ? () => abortController?.abort() : () => {}}
@@ -104,7 +104,7 @@
 						color="light"
 						variant="contained"
 						buttonType="button"
-						btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+						btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
 						title="Generate CRON schedule from prompt"
 						aria-label="Generate"
 						iconOnly
diff --git a/frontend/src/lib/components/copilot/FlowInlineScriptAIButton.svelte b/frontend/src/lib/components/copilot/FlowInlineScriptAIButton.svelte
index eccced7dfe..a27cc36340 100644
--- a/frontend/src/lib/components/copilot/FlowInlineScriptAIButton.svelte
+++ b/frontend/src/lib/components/copilot/FlowInlineScriptAIButton.svelte
@@ -7,12 +7,14 @@
 	import { twMerge } from 'tailwind-merge'
 	import { aiChatManager, AIMode } from './chat/AIChatManager.svelte'
 	import { copilotInfo } from '$lib/aiStore'
+	import type { ComponentProps } from 'svelte'
 
 	interface Props {
 		moduleId?: string
+		btnProps?: ComponentProps<typeof Button>
 	}
 
-	const { moduleId }: Props = $props()
+	const { moduleId, btnProps }: Props = $props()
 
 	const aiChatScriptModeClasses = $derived(
 		aiChatManager.mode === AIMode.SCRIPT && aiChatManager.isOpen
@@ -29,7 +31,8 @@
 		{onClick}
 		iconOnly
 		title="Open AI chat"
-		startIcon={{ icon: WandSparkles, classes: 'text-violet-800 dark:text-violet-400' }}
+		startIcon={{ icon: WandSparkles, classes: 'text-ai' }}
+		{...btnProps}
 	/>
 {/snippet}
 
diff --git a/frontend/src/lib/components/copilot/IteratorGen.svelte b/frontend/src/lib/components/copilot/IteratorGen.svelte
index 1a2f953c0d..46eb6d1519 100644
--- a/frontend/src/lib/components/copilot/IteratorGen.svelte
+++ b/frontend/src/lib/components/copilot/IteratorGen.svelte
@@ -152,7 +152,7 @@ Only output the expression, do not explain or discuss.`
 			size="xs"
 			color="light"
 			btnClasses={twMerge(
-				'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
+				'text-ai bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
 				!loading && generatedContent.length > 0
 					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
 					: ''
@@ -193,7 +193,7 @@ Only output the expression, do not explain or discuss.`
 			{/if}
 		</Button>
 		{#snippet content()}
-			<div class="text-sm text-tertiary">
+			<div class="text-sm text-primary">
 				{generatedContent}
 			</div>
 		{/snippet}
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index 559afa64c3..b76bb0d7b3 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -14,6 +14,12 @@
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
 	import { validateToolName } from '$lib/components/graph/renderers/nodes/AIToolNode.svelte'
+	import {
+		inputBaseClass,
+		inputBorderClass,
+		inputSizeClasses
+	} from '../text_input/TextInput.svelte'
+	import { flowAIBtnClasses } from './chat/flow/FlowAIButton.svelte'
 
 	type PromptConfig = {
 		system: string
@@ -263,10 +269,8 @@ Generate a tool name for the script below:
 		{#if active}
 			<span
 				class={twMerge(
-					'absolute text-xs bg-violet-100 text-violet-800 dark:bg-gray-700 dark:text-violet-400 px-1 py-0.5 rounded-md flex flex-row items-center justify-center gap-2 transition-all shrink-0',
-					!loading && generatedContent.length > 0
-						? 'bg-green-100 text-green-800 dark:text-green-400 dark:bg-green-700'
-						: ''
+					'rounded-md px-1 border',
+					flowAIBtnClasses(!loading && generatedContent.length > 0 ? 'green' : 'default')
 				)}
 			>
 				<span class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1">
@@ -298,14 +302,14 @@ Generate a tool name for the script below:
 	</div>
 	{#if elementType === 'textarea'}
 		<div>
-			<div class="flex flex-row-reverse !text-3xs text-tertiary -mt-4">GH Markdown</div>
+			<div class="flex flex-row-reverse !text-3xs text-primary -mt-4">GH Markdown</div>
 			<textarea
 				bind:this={el}
 				bind:value={content}
 				use:autosize
 				{...elementProps}
 				placeholder={!active ? elementProps.placeholder : ''}
-				class={active ? '!indent-[3.5rem]' : ''}
+				class="{inputBaseClass} {inputSizeClasses.md} {inputBorderClass()} w-full"
 				on:focus={() => (focused = true)}
 				on:blur={() => (focused = false)}
 			></textarea>
@@ -316,10 +320,12 @@ Generate a tool name for the script below:
 			bind:value={content}
 			placeholder={!active ? elementProps.placeholder : ''}
 			class={twMerge(
-				active ? '!indent-[3.5rem]' : '',
-				promptConfigName === 'agentToolFunctionName' &&
-					!validateToolName(content ?? '') &&
-					'!border-red-400'
+				inputBaseClass,
+				inputSizeClasses.md,
+				inputBorderClass({
+					error: promptConfigName === 'agentToolFunctionName' && !validateToolName(content ?? '')
+				}),
+				'w-full'
 			)}
 			on:focus={() => (focused = true)}
 			on:blur={() => (focused = false)}
diff --git a/frontend/src/lib/components/copilot/PredicateGen.svelte b/frontend/src/lib/components/copilot/PredicateGen.svelte
index 6975cf7aab..6bfeacd62c 100644
--- a/frontend/src/lib/components/copilot/PredicateGen.svelte
+++ b/frontend/src/lib/components/copilot/PredicateGen.svelte
@@ -101,7 +101,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`
 				startIcon={{ icon: Wand2 }}
 				iconOnly
 				title="AI Assistant"
-				btnClasses="min-h-[30px] text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				btnClasses="min-h-[30px] text-ai bg-violet-100 dark:bg-gray-700"
 				{loading}
 				clickableWhileLoading
 				on:click={loading ? () => abortController?.abort() : () => {}}
@@ -125,7 +125,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`
 				color="light"
 				variant="contained"
 				buttonType="button"
-				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				btnClasses="!p-1 !w-[38px] !ml-2 text-ai bg-violet-100 dark:bg-gray-700"
 				title="Generate predicate from prompt"
 				aria-label="Generate"
 				iconOnly
diff --git a/frontend/src/lib/components/copilot/RegexGen.svelte b/frontend/src/lib/components/copilot/RegexGen.svelte
index 16bf4be2b9..faf6406c2a 100644
--- a/frontend/src/lib/components/copilot/RegexGen.svelte
+++ b/frontend/src/lib/components/copilot/RegexGen.svelte
@@ -101,7 +101,7 @@
 	<svelte:fragment slot="trigger">
 		<Button
 			title="Generate regexes from prompt"
-			btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
 			size="sm"
 			color={genLoading ? 'red' : 'light'}
 			spacingSize="md"
@@ -133,7 +133,7 @@
 							size="xs"
 							color="light"
 							buttonType="button"
-							btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+							btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
 							aria-label="Generate"
 							on:click={() => {
 								close()
diff --git a/frontend/src/lib/components/copilot/ScriptFix.svelte b/frontend/src/lib/components/copilot/ScriptFix.svelte
index 9ea98361f8..fc62e1d27b 100644
--- a/frontend/src/lib/components/copilot/ScriptFix.svelte
+++ b/frontend/src/lib/components/copilot/ScriptFix.svelte
@@ -41,7 +41,7 @@
 							aiChatManager.fix()
 						}
 					}}
-					btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 min-w-[84px]"
+					btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
 					propagateEvent={!$copilotInfo.enabled}
 				>
 					AI Fix
diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte
index f19be94e3e..1f24c5a01d 100644
--- a/frontend/src/lib/components/copilot/ScriptGen.svelte
+++ b/frontend/src/lib/components/copilot/ScriptGen.svelte
@@ -24,13 +24,13 @@
 	import { fade } from 'svelte/transition'
 	import { isInitialCode } from '$lib/script_helpers'
 	import { twMerge } from 'tailwind-merge'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, type ComponentProps } from 'svelte'
 	import ProviderModelSelector from './chat/ProviderModelSelector.svelte'
 	import { copilotInfo } from '$lib/aiStore'
 
 	interface Props {
 		// props
-		iconOnly?: boolean
+		btnProps?: ComponentProps<typeof Button>
 		lang: SupportedLanguage | 'bunnative' | 'frontend' | undefined
 		editor: Editor | SimpleEditor | undefined
 		diffEditor: DiffEditor | undefined
@@ -40,7 +40,7 @@
 	}
 
 	let {
-		iconOnly = false,
+		btnProps,
 		lang = $bindable(),
 		editor,
 		diffEditor,
@@ -309,21 +309,23 @@
 			<Button
 				title="Discard generated code"
 				btnClasses="!font-medium px-2 w-7"
-				size="xs"
-				color="red"
+				unifiedSize="md"
+				destructive
 				on:click={rejectDiff}
-				variant="contained"
+				variant="accent"
 				startIcon={{ icon: X }}
 				iconOnly
+				{...btnProps}
 			/>
 			<Button
 				title="Accept generated code"
 				btnClasses="!font-medium px-2 w-7"
-				size="xs"
-				color="green"
+				unifiedSize="md"
+				variant="accent"
 				on:click={acceptDiff}
 				iconOnly
 				startIcon={{ icon: Check }}
+				{...btnProps}
 			/>
 		</div>
 	{:else}
@@ -331,22 +333,22 @@
 			<Button
 				title="Discard generated code"
 				btnClasses="!font-medium px-2"
-				size="xs"
-				color="red"
+				unifiedSize="md"
+				destructive
 				on:click={rejectDiff}
-				variant="contained"
+				variant="accent"
 				startIcon={{ icon: X }}
-				{iconOnly}
+				{...btnProps}
 			>
 				Discard
 			</Button><Button
 				title="Accept generated code"
 				btnClasses="!font-medium px-2"
-				size="xs"
-				color="green"
+				unifiedSize="md"
+				variant="accent"
 				on:click={acceptDiff}
 				startIcon={{ icon: Check }}
-				{iconOnly}
+				{...btnProps}
 			>
 				Accept
 			</Button>
@@ -375,17 +377,13 @@
 					bind:element={button}
 					iconOnly
 					title="Generate code from prompt"
-					startIcon={genLoading
-						? { icon: Ban }
-						: { icon: Wand2, classes: 'text-violet-800 dark:text-violet-400' }}
+					startIcon={genLoading ? { icon: Ban } : { icon: Wand2, classes: 'text-ai' }}
+					{...btnProps}
 				/>
 			{:else}
 				<Button
 					title="Generate code from prompt"
-					btnClasses={twMerge(
-						'!font-medium',
-						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-400'
-					)}
+					btnClasses={twMerge('!font-medium', genLoading ? 'z-[5000]' : 'text-ai')}
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
 					spacingSize="md"
@@ -393,7 +391,7 @@
 					propagateEvent={!genLoading}
 					on:click={genLoading ? () => abortController?.abort() : handleAiButtonClick}
 					bind:element={button}
-					{iconOnly}
+					{...btnProps}
 				>
 					{#if genLoading}
 						Stop
@@ -420,20 +418,8 @@
 						<div class="flex flex-row justify-between items-center w-96 gap-2">
 							<ToggleButtonGroup class="w-auto shrink-0 h-auto" bind:selected={mode}>
 								{#snippet children({ item })}
-									<ToggleButton
-										value={'gen'}
-										label="Generate from scratch"
-										light
-										class="px-2"
-										{item}
-									/>
-									<ToggleButton
-										value={'edit'}
-										label="Edit existing code"
-										light
-										class="px-2"
-										{item}
-									/>
+									<ToggleButton value={'gen'} label="Generate from scratch" class="px-2" {item} />
+									<ToggleButton value={'edit'} label="Edit existing code" class="px-2" {item} />
 								{/snippet}
 							</ToggleButtonGroup>
 
@@ -460,7 +446,7 @@
 								size="xs"
 								color="light"
 								buttonType="button"
-								btnClasses="!h-[34px] qhd:!h-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+								btnClasses="!h-[34px] qhd:!h-[38px] !ml-2 text-ai bg-violet-100 dark:bg-gray-700"
 								title="Generate code from prompt"
 								aria-label="Generate"
 								on:click={() => {
@@ -530,10 +516,9 @@
 													? 'Dbo'
 													: 'Public') + ' schema'}
 												small
-												light
 												{item}
 											/>
-											<ToggleButton value={'false'} label="All schemas" small light {item} />
+											<ToggleButton value={'false'} label="All schemas" small {item} />
 										{/snippet}
 									</ToggleButtonGroup>
 								{/if}
diff --git a/frontend/src/lib/components/copilot/StepGenQuick.svelte b/frontend/src/lib/components/copilot/StepGenQuick.svelte
index 6742f419e2..d02a635cd3 100644
--- a/frontend/src/lib/components/copilot/StepGenQuick.svelte
+++ b/frontend/src/lib/components/copilot/StepGenQuick.svelte
@@ -6,6 +6,7 @@
 	import SearchItems from '../SearchItems.svelte'
 	import { emptyString } from '$lib/utils'
 	import { createEventDispatcher, onMount, untrack } from 'svelte'
+	import TextInput from '../text_input/TextInput.svelte'
 
 	let scripts: Script[] | undefined = $state(undefined)
 	interface Props {
@@ -43,7 +44,7 @@
 		scripts == undefined && funcDesc?.length > 1 && untrack(() => loadScripts())
 	})
 
-	let input: HTMLInputElement | undefined = $state()
+	let input: TextInput | undefined = $state()
 
 	$effect(() => {
 		preFilter &&
@@ -66,16 +67,17 @@
 
 <div class="relative text-primary items-center transition-all flex-grow">
 	<div class="grow items-cente">
-		<input
+		<TextInput
 			bind:this={input}
-			type="text"
-			onkeydown={(e) => {
-				if (e.key === 'Escape') {
-					dispatch('escape')
-				}
-			}}
 			bind:value={funcDesc}
-			placeholder="Search {trigger ? 'triggers' : 'scripts'} {disableAi ? '' : 'or AI gen'}"
+			class="pr-7"
+			inputProps={{
+				type: 'text',
+				onkeydown: (e) => {
+					if (e.key === 'Escape') dispatch('escape')
+				},
+				placeholder: `Search ${trigger ? 'triggers' : 'scripts'} ${disableAi ? '' : 'or AI gen'}`
+			}}
 		/>
 	</div>
 	<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
@@ -83,7 +85,7 @@
 			<Loader2 size={16} class="animate-spin text-gray-400" />
 		{/if}
 		{#if funcDesc?.length === 0 && !loading && !disableAi}
-			<Wand2 size={14} class="fill-current opacity-70 text-violet-800 dark:text-violet-400" />
+			<Wand2 size={14} class="fill-current opacity-70 text-ai" />
 		{/if}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/copilot/StepInputGen.svelte b/frontend/src/lib/components/copilot/StepInputGen.svelte
index 0ca7cb45a5..178daa8c7a 100644
--- a/frontend/src/lib/components/copilot/StepInputGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputGen.svelte
@@ -1,14 +1,3 @@
-<script lang="ts" module>
-	export function stepInputGenButtonClasses(selected: boolean) {
-		return twMerge(
-			'text-violet-500 dark:text-violet-400 border',
-			selected
-				? 'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400 '
-				: 'hover:bg-violet-50 border-violet-100 dark:hover:bg-violet-400/15 dark:border-violet-400/20'
-		)
-	}
-</script>
-
 <script lang="ts">
 	import { run } from 'svelte/legacy'
 
@@ -31,6 +20,7 @@
 	import FlowCopilotInputsModal from './FlowCopilotInputsModal.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { copilotInfo } from '$lib/aiStore'
+	import { flowAIBtnClasses } from './chat/flow/FlowAIButton.svelte'
 
 	let generatedContent = $state('')
 	let loading = $state(false)
@@ -248,9 +238,9 @@ Only return the expression without any wrapper.`
 	>
 		<Button
 			size="xs"
-			color="light"
+			variant="default"
 			btnClasses={twMerge(
-				stepInputGenButtonClasses(!loading && generatedContent.length > 0),
+				flowAIBtnClasses(!loading && generatedContent.length > 0 ? 'green' : 'default'),
 				btnClass
 			)}
 			on:click={() => {
@@ -297,7 +287,7 @@ Only return the expression without any wrapper.`
 			{/if}
 		</Button>
 		{#snippet content()}
-			<div class="text-sm text-tertiary">
+			<div class="text-sm text-primary">
 				{generatedContent || $generatedExprs?.[argName]}
 			</div>
 		{/snippet}
diff --git a/frontend/src/lib/components/copilot/StepInputsGen.svelte b/frontend/src/lib/components/copilot/StepInputsGen.svelte
index 6720e23c03..2ce8d4b177 100644
--- a/frontend/src/lib/components/copilot/StepInputsGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputsGen.svelte
@@ -19,7 +19,7 @@
 	import FlowCopilotInputsModal from './FlowCopilotInputsModal.svelte'
 	import type { Flow } from '$lib/gen'
 	import { twMerge } from 'tailwind-merge'
-	import { stepInputGenButtonClasses } from './StepInputGen.svelte'
+	import { flowAIBtnClasses } from './chat/flow/FlowAIButton.svelte'
 
 	let loading = $state(false)
 	interface Props {
@@ -170,6 +170,8 @@ input_name2: expression2
 
 	let out = $state(true) // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
 	let openInputsModal = $state(false)
+
+	let disabled = $derived(argNames.length === 0)
 </script>
 
 <div class="flex flex-row justify-end">
@@ -183,10 +185,13 @@ input_name2: expression2
 		/>
 		<Button
 			size="xs"
-			color="light"
 			wrapperClasses="flex-1"
+			variant="default"
 			btnClasses={twMerge(
-				stepInputGenButtonClasses(!loading && Object.keys($generatedExprs || {}).length > 0)
+				!disabled &&
+					flowAIBtnClasses(
+						!loading && Object.keys($generatedExprs || {}).length > 0 ? 'green' : 'default'
+					)
 			)}
 			on:mouseenter={(ev) => {
 				if (out) {
@@ -208,7 +213,7 @@ input_name2: expression2
 				icon: loading ? Loader2 : Object.keys($generatedExprs || {}).length > 0 ? Check : Wand2,
 				classes: loading ? 'animate-spin' : ''
 			}}
-			disabled={argNames.length === 0}
+			{disabled}
 		>
 			{#if loading}
 				Loading
@@ -228,8 +233,8 @@ input_name2: expression2
 			{#snippet trigger()}
 				<Button
 					size="xs"
-					color="light"
-					btnClasses={stepInputGenButtonClasses(false)}
+					variant="default"
+					btnClasses={flowAIBtnClasses('default')}
 					nonCaptureEvent
 					startIcon={{
 						icon: Wand2
diff --git a/frontend/src/lib/components/copilot/TestAIKey.svelte b/frontend/src/lib/components/copilot/TestAIKey.svelte
index bd29bd7d71..05b77a9881 100644
--- a/frontend/src/lib/components/copilot/TestAIKey.svelte
+++ b/frontend/src/lib/components/copilot/TestAIKey.svelte
@@ -2,19 +2,33 @@
 	import type { AIProvider } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
 	import Button from '../common/button/Button.svelte'
+	import { ButtonType } from '../common/button/model'
 	import { testKey } from './lib'
-	export let disabled = false
-	export let apiKey: string | undefined = undefined
-	export let resourcePath: string | undefined = undefined
-	export let aiProvider: AIProvider
-	export let model: string
-	let loading = false
+
+	interface Props {
+		disabled?: boolean
+		apiKey?: string | undefined
+		resourcePath?: string | undefined
+		aiProvider: AIProvider
+		model: string
+		variant?: ButtonType.Variant
+	}
+
+	let {
+		disabled = false,
+		apiKey = undefined,
+		resourcePath = undefined,
+		aiProvider,
+		model,
+		variant = 'accent'
+	}: Props = $props()
+
+	let loading = $state(false)
 </script>
 
 <Button
 	size="xs"
-	variant="contained"
-	color="dark"
+	{variant}
 	{disabled}
 	{loading}
 	on:click={async () => {
diff --git a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
index b3f624a9d2..2ad7a0e5b8 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
@@ -115,7 +115,7 @@
 				<svelte:fragment slot="content" let:close>
 					<div class="p-1 overflow-y-auto max-h-[300px]">
 						{#if pastChats.length === 0}
-							<div class="text-center text-tertiary text-xs">No history</div>
+							<div class="text-center text-primary text-xs">No history</div>
 						{:else}
 							<div class="flex flex-col">
 								{#each pastChats as chat}
@@ -136,8 +136,7 @@
 											iconOnly
 											size="xs2"
 											btnClasses="!p-1"
-											color="light"
-											variant="border"
+											variant="default"
 											startIcon={{ icon: X }}
 											on:click={() => {
 												deletePastChat(chat.id)
@@ -205,8 +204,7 @@
 				<Button
 					startIcon={{ icon: Loader2, classes: 'animate-spin' }}
 					size="xs"
-					variant="border"
-					color="light"
+					variant="default"
 					on:click={() => {
 						cancel()
 					}}
@@ -219,8 +217,7 @@
 				<Button
 					startIcon={{ icon: CheckIcon }}
 					size="xs"
-					variant="border"
-					color="light"
+					variant="default"
 					btnClasses="bg-green-500 hover:bg-green-600 text-white hover:text-white"
 					on:click={() => {
 						aiChatManager.flowAiChatHelpers?.acceptAllModuleActions()
@@ -231,8 +228,7 @@
 				<Button
 					startIcon={{ icon: XIcon }}
 					size="xs"
-					variant="border"
-					color="light"
+					variant="default"
 					btnClasses="dark:opacity-50 opacity-60 hover:opacity-100"
 					on:click={() => {
 						aiChatManager.flowAiChatHelpers?.rejectAllModuleActions()
@@ -259,7 +255,7 @@
 					<ChatQuickActions {askAi} {diffMode} />
 				{/if}
 				{#if disabled}
-					<div class="text-tertiary text-xs my-2 px-2">
+					<div class="text-primary text-xs my-2 px-2">
 						<Markdown md={disabledMessage} />
 					</div>
 				{:else}
diff --git a/frontend/src/lib/components/copilot/chat/AIChatInlineWidget.svelte b/frontend/src/lib/components/copilot/chat/AIChatInlineWidget.svelte
index 65a9e9f358..45fce62d43 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInlineWidget.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInlineWidget.svelte
@@ -187,7 +187,7 @@
 	{#if processing}
 		<LoadingIcon />
 	{:else if aiChatManager.pendingNewCode}
-		<span class="text-xs text-tertiary pr-1">
+		<span class="text-xs text-primary pr-1">
 			{getModifierKey()}↓ to apply
 		</span>
 	{:else}
diff --git a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
index b5686be453..2eb7a201f4 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
@@ -138,7 +138,7 @@
 				<Popover>
 					<svelte:fragment slot="trigger">
 						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-tertiary text-xs hover:bg-surface-hover bg-surface"
+							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
 							>@</div
 						>
 					</svelte:fragment>
diff --git a/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte b/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte
index 11c39a5f10..2a253773f2 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte
@@ -75,7 +75,7 @@
 				message.role === 'user' &&
 					'px-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 rounded-lg relative group',
 				(message.role === 'assistant' || message.role === 'tool') && 'px-[1px]',
-				message.role === 'tool' && 'text-tertiary'
+				message.role === 'tool' && 'text-primary'
 			)}
 		>
 			{#if message.role === 'assistant'}
@@ -88,12 +88,11 @@
 		</div>
 	{/if}
 	{#if message.role === 'user' && message.snapshot}
-		<div class="mx-2 text-sm text-tertiary flex flex-row items-center justify-between gap-2 mt-2">
+		<div class="mx-2 text-sm text-primary flex flex-row items-center justify-between gap-2 mt-2">
 			Saved a flow snapshot
 			<Button
 				size="xs2"
-				variant="border"
-				color="light"
+				variant="default"
 				on:click={() => {
 					if (message.snapshot) {
 						aiChatManager.flowAiChatHelpers?.revertToSnapshot(message.snapshot)
@@ -111,9 +110,8 @@
 	<div class="flex justify-end px-2 -mt-1">
 		<Button
 			size="xs2"
-			variant="border"
+			variant="default"
 			title="Retry generation"
-			color="light"
 			startIcon={{ icon: RefreshCwIcon }}
 			onclick={() => aiChatManager.retryRequest(messageIndex)}
 		>
diff --git a/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte b/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte
index 14b527191f..f258d96967 100644
--- a/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte
+++ b/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte
@@ -60,7 +60,7 @@
 								onclick={() => {
 									onMenuOpen?.()
 								}}
-								class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+								class="h-8 w-8 inline-flex items-center justify-center rounded-md text-primary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
 							>
 								<svg
 									class="h-6 w-6"
diff --git a/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte b/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
index 8c4e7617a4..241643ca4e 100644
--- a/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
+++ b/frontend/src/lib/components/copilot/chat/AvailableContextList.svelte
@@ -191,7 +191,7 @@
 </script>
 
 <div
-	class="flex flex-col gap-1 text-tertiary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll"
+	class="flex flex-col gap-1 text-primary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll"
 	onmousedown={(e) =>
 		// avoids triggering onblur on the textinput and closing the tooltip
 		e.preventDefault()}
@@ -224,7 +224,7 @@
 			</button>
 		{/each}
 		{#if filteredAvailableContext.length === 0}
-			<div class="text-center text-tertiary text-xs py-2">No matching context</div>
+			<div class="text-center text-primary text-xs py-2">No matching context</div>
 		{/if}
 	{:else if currentView === 'categories'}
 		<!-- Categories view -->
@@ -243,7 +243,7 @@
 			</button>
 		{/each}
 		{#if availableCategories.length === 0}
-			<div class="text-center text-tertiary text-xs py-2">No available context</div>
+			<div class="text-center text-primary text-xs py-2">No available context</div>
 		{/if}
 	{:else}
 		<!-- Category items view -->
@@ -256,7 +256,7 @@
 		</button>
 
 		{#if currentCategoryItems.length === 0}
-			<div class="text-center text-tertiary text-xs py-2">No items in this category</div>
+			<div class="text-center text-primary text-xs py-2">No items in this category</div>
 		{:else}
 			{#each currentCategoryItems as element, i}
 				{@const Icon = ContextIconMap[element.type]}
diff --git a/frontend/src/lib/components/copilot/chat/ChatMode.svelte b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
index 3a08f5d97b..045fe5d37c 100644
--- a/frontend/src/lib/components/copilot/chat/ChatMode.svelte
+++ b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
@@ -14,7 +14,7 @@
 	>
 		<svelte:fragment slot="trigger">
 			<div
-				class="text-tertiary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+				class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
 			>
 				<span class={`truncate`}>
 					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
diff --git a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
index 4b24221c6a..65ae5108b1 100644
--- a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
@@ -31,7 +31,7 @@
 	{#snippet trigger()}
 		<div
 			class={twMerge(
-				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
+				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-primary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
 			)}
 			onmouseenter={() => (showDelete = true)}
 			onmouseleave={() => (showDelete = false)}
@@ -75,7 +75,7 @@
 				{:else if contextElement.schema}
 					<ObjectViewer json={formatSchema(contextElement.schema)} pureViewer collapseLevel={1} />
 				{:else}
-					<div class="text-tertiary">Not loaded yet</div>
+					<div class="text-primary">Not loaded yet</div>
 				{/if}
 			</div>
 		{:else if contextElement.type === 'code' || contextElement.type === 'code_piece' || contextElement.type === 'diff' || contextElement.type === 'flow_module_code_piece'}
@@ -97,7 +97,7 @@
 				</div>
 			{:else}
 				<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
-					<div class="text-tertiary">{contextElement.title}</div>
+					<div class="text-primary">{contextElement.title}</div>
 				</div>
 			{/if}
 		{/if}
diff --git a/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte b/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte
index 3e3286f0a0..b949f44d68 100644
--- a/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte
+++ b/frontend/src/lib/components/copilot/chat/ProviderModelSelector.svelte
@@ -24,7 +24,7 @@
 <div class="min-w-0">
 	<Popover disablePopup={!multipleModels} class="max-w-full">
 		{#snippet trigger()}
-			<div class="text-tertiary text-xs flex flex-row items-center font-normal gap-0.5">
+			<div class="text-primary text-xs flex flex-row items-center font-normal gap-0.5">
 				<span class={`truncate ${multipleModels ? '' : 'pr-2'}`}>{providerModel.model}</span>
 				{#if multipleModels}
 					<div class="shrink-0">
diff --git a/frontend/src/lib/components/copilot/chat/ToolContentDisplay.svelte b/frontend/src/lib/components/copilot/chat/ToolContentDisplay.svelte
index 7558c40dd8..99e1251a26 100644
--- a/frontend/src/lib/components/copilot/chat/ToolContentDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/ToolContentDisplay.svelte
@@ -57,7 +57,7 @@
 			</span>
 			{#if showCopy && hasContent}
 				<button
-					class="p-1 rounded hover:bg-surface-secondary text-tertiary hover:text-secondary transition-colors"
+					class="p-1 rounded hover:bg-surface-secondary text-primary hover:text-secondary transition-colors"
 					onclick={copyToClipboard}
 					title="Copy {title.toLowerCase()}"
 				>
@@ -72,7 +72,7 @@
 
 		{#if loading}
 			<div
-				class="bg-surface-secondary border border-gray-200 dark:border-gray-700 rounded p-3 flex items-center gap-2 text-tertiary"
+				class="bg-surface-secondary border border-gray-200 dark:border-gray-700 rounded p-3 flex items-center gap-2 text-primary"
 			>
 				<Loader2 class="w-3 h-3 animate-spin" />
 				<span class="text-2xs">Executing...</span>
@@ -95,7 +95,7 @@
 			<div
 				class="bg-surface-secondary border border-gray-200 dark:border-gray-700 rounded p-3 text-center"
 			>
-				<span class="text-2xs text-tertiary">No {title.toLowerCase()} yet</span>
+				<span class="text-2xs text-primary">No {title.toLowerCase()} yet</span>
 			</div>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte b/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte
index 1eb1077c5e..4a417dad31 100644
--- a/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte
@@ -70,8 +70,7 @@
 					)}
 				>
 					<Button
-						variant="border"
-						color="gray"
+						variant="default"
 						size="xs"
 						on:click={() => {
 							if (message.tool_call_id) {
@@ -79,10 +78,10 @@
 							}
 						}}
 						startIcon={{ icon: XCircle }}
+						destructive
 					></Button>
 					<Button
-						variant="border"
-						color="green"
+						variant="accent"
 						size="xs"
 						on:click={() => {
 							if (message.tool_call_id) {
diff --git a/frontend/src/lib/components/copilot/chat/flow/FlowAIButton.svelte b/frontend/src/lib/components/copilot/chat/flow/FlowAIButton.svelte
index 4d53fee11e..7201f9bac6 100644
--- a/frontend/src/lib/components/copilot/chat/flow/FlowAIButton.svelte
+++ b/frontend/src/lib/components/copilot/chat/flow/FlowAIButton.svelte
@@ -1,39 +1,36 @@
+<script module lang="ts">
+	export function flowAIBtnClasses(state: 'default' | 'selected' | 'green' = 'default') {
+		return twMerge(
+			['selected', 'default'].includes(state) ? 'text-ai !border-ai/20 hover:bg-ai/15' : '',
+			{
+				default: '',
+				selected: 'bg-ai/10',
+				green:
+					'bg-green-50 hover:bg-green-50 dark:bg-green-400/15 dark:hover:bg-green-400/15 text-green-800 border-green-200 dark:border-green-300/60 dark:text-green-400'
+			}[state]
+		)
+	}
+</script>
+
 <script lang="ts">
 	import { base } from '$lib/base'
 	import { copilotInfo } from '$lib/aiStore'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import DarkPopover from '$lib/components/Popover.svelte'
-	import { ExternalLink } from 'lucide-svelte'
-	import { Button } from '$lib/components/common'
+	import { ExternalLink, WandSparkles } from 'lucide-svelte'
 	import { getModifierKey } from '$lib/utils'
-	import { WandSparkles } from 'lucide-svelte'
+	import Button from '$lib/components/common/button/Button.svelte'
 	import { twMerge } from 'tailwind-merge'
 
 	let {
 		togglePanel,
-		opened,
-		class: className
-	}: { togglePanel: () => void; opened?: boolean; class?: string } = $props()
+		selected = false
+	}: {
+		togglePanel: () => void
+		selected?: boolean
+	} = $props()
 </script>
 
-{#snippet button(onClick: () => void)}
-	<Button
-		color="light"
-		variant="border"
-		size="xs2"
-		on:click={onClick}
-		startIcon={{ icon: WandSparkles }}
-		iconOnly
-		btnClasses={twMerge(
-			'!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 bg-surface h-[28px] w-[32px] rounded-md py-1 px-1',
-			opened ? 'bg-surface-selected' : '',
-			className
-		)}
-	>
-		AI Panel
-	</Button>
-{/snippet}
-
 {#if $copilotInfo.enabled}
 	<DarkPopover>
 		{#snippet text()}
@@ -45,14 +42,12 @@
 				</div>
 			</div>
 		{/snippet}
-		{@render button(togglePanel)}
+		{@render button({ onPress: () => togglePanel() })}
 	</DarkPopover>
 {:else}
-	<Popover placement="bottom">
+	<Popover placement="bottom" class="h-full">
 		{#snippet trigger()}
-			{@render button(() => {
-				togglePanel()
-			})}
+			{@render button({ onPress: () => togglePanel() })}
 		{/snippet}
 		{#snippet content()}
 			<div class="block text-primary p-4">
@@ -68,3 +63,18 @@
 		{/snippet}
 	</Popover>
 {/if}
+
+{#snippet button({ onPress }: { onPress: () => void })}
+	<Button
+		unifiedSize="sm"
+		color="light"
+		variant="default"
+		onClick={onPress}
+		startIcon={{ icon: WandSparkles }}
+		iconOnly
+		wrapperClasses="h-7"
+		btnClasses={flowAIBtnClasses(selected ? 'selected' : 'default')}
+	>
+		AI Panel
+	</Button>
+{/snippet}
diff --git a/frontend/src/lib/components/copilot/chat/flow/utils.ts b/frontend/src/lib/components/copilot/chat/flow/utils.ts
index 02eafeb32f..0d5d3ba2e1 100644
--- a/frontend/src/lib/components/copilot/chat/flow/utils.ts
+++ b/frontend/src/lib/components/copilot/chat/flow/utils.ts
@@ -96,3 +96,28 @@ export function aiModuleActionToBgColor(action: AIModuleAction | undefined) {
 			return ''
 	}
 }
+export function aiModuleActionToBorderColor(action: AIModuleAction | undefined) {
+	switch (action) {
+		case 'modified':
+			return '!border-orange-300 dark:!border-orange-700'
+		case 'added':
+			return '!border-green-400 dark:!border-green-700'
+		case 'removed':
+			return '!border-red-300 dark:!border-red-700'
+		default:
+			return ''
+	}
+}
+
+export function aiModuleActionToTextColor(action: AIModuleAction | undefined) {
+	switch (action) {
+		case 'modified':
+			return '!text-orange-800 dark:!text-orange-200'
+		case 'added':
+			return '!text-green-800 dark:!text-green-200'
+		case 'removed':
+			return '!text-red-800 dark:!text-red-200'
+		default:
+			return ''
+	}
+}
diff --git a/frontend/src/lib/components/details/ClipboardPanel.svelte b/frontend/src/lib/components/details/ClipboardPanel.svelte
index cc2e16e086..cb5e0d535f 100644
--- a/frontend/src/lib/components/details/ClipboardPanel.svelte
+++ b/frontend/src/lib/components/details/ClipboardPanel.svelte
@@ -2,10 +2,11 @@
 	import { copyToClipboard } from '$lib/utils'
 	import { Clipboard } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { inputSizeClasses } from '../text_input/TextInput.svelte'
 
 	export let content: string
 	export let title: string | undefined = undefined
-	export let size: 'sm' | 'md' = 'sm'
+	export let size: 'sm' | 'md' = 'md'
 	export let disabled = false
 </script>
 
@@ -17,7 +18,8 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={twMerge(
-		'grow min-w-0 w-full px-2 py-1 border flex items-center bg-surface-secondary text-primary justify-between rounded-md',
+		'grow min-w-0 w-full border flex items-center bg-surface-secondary hover:opacity-60 transition-opacity text-primary justify-between rounded-md',
+		inputSizeClasses[size],
 		$$props.class
 	)}
 	class:cursor-not-allowed={disabled}
@@ -30,8 +32,6 @@
 		copyToClipboard(content)
 	}}
 >
-	<div class={twMerge('truncate whitespace-no-wrap grow', size === 'sm' ? 'text-xs' : 'text-sm')}
-		>{content}</div
-	>
+	<div class={twMerge('truncate whitespace-no-wrap grow text-xs')}>{content}</div>
 	<Clipboard size={12} class="flex-shrink-0" />
 </div>
diff --git a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
index 45bc8cb5c3..f3fa0a0c27 100644
--- a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
@@ -29,17 +29,17 @@
 
 <div class="flex flex-col h-full">
 	<Tabs bind:selected wrapperClass="flex-none w-full">
-		<Tab value="saved_inputs">Inputs library</Tab>
+		<Tab value="saved_inputs" label="Inputs library" />
 		{#if !isOperator}
-			<Tab value="triggers">Triggers</Tab>
+			<Tab value="triggers" label="Triggers" />
 		{/if}
 		{#if flow_json}
-			<Tab value="raw">Export</Tab>
+			<Tab value="raw" label="Export" />
 		{:else}
-			<Tab value="script">Script</Tab>
+			<Tab value="script" label="Script" />
 		{/if}
 		{#if selected == 'flow_step'}
-			<Tab value="flow_step">Step</Tab>
+			<Tab value="flow_step" label="Step" />
 		{/if}
 
 		{#snippet content()}
diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index 25e55a2c8a..8e1b21983e 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -88,7 +88,7 @@
 				{/if}
 				{@render trigger_badges?.()}
 			</div>
-			<div class="flex gap-1 md:gap-2 items-center">
+			<div class="flex gap-1 items-center">
 				{#if menuItems.length > 0}
 					{#key menuItems}
 						<DropdownV2
@@ -99,6 +99,7 @@
 								type: item.color === 'red' ? 'delete' : 'action'
 							}))}
 							placement="bottom-end"
+							size="md"
 						/>
 					{/key}
 				{/if}
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index a1f4ea4734..f7a76c282e 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -77,17 +77,17 @@
 			{@render header?.()}
 			<div class="grow min-h-0 w-full flex flex-col">
 				<Tabs bind:selected={mobileTab} wrapperClass="flex-none">
-					<Tab value="form">{isChatMode ? 'Chat' : 'Run form'}</Tab>
+					<Tab value="form" label={isChatMode ? 'Chat' : 'Run form'} />
 					{#if !isChatMode}
-						<Tab value="saved_inputs">Inputs</Tab>
+						<Tab value="saved_inputs" label="Inputs" />
 					{/if}
 					{#if !isOperator}
-						<Tab value="triggers">Triggers</Tab>
+						<Tab value="triggers" label="Triggers" />
 					{/if}
 					{#if flow_json}
-						<Tab value="raw">Export</Tab>
+						<Tab value="raw" label="Export" />
 					{:else}
-						<Tab value="script">Script</Tab>
+						<Tab value="script" label="Script" />
 					{/if}
 
 					{#snippet content()}
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
index 575424e6a9..bb9aee5987 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
@@ -52,9 +52,9 @@
 	title={errorHandlerMuted === undefined || !errorHandlerMuted
 		? 'Disable workspace error handler for this script'
 		: 'Enable workspace error handler for this script'}
-	size="xs"
+	unifiedSize="md"
 	on:click={toggleErrorHandler}
-	color="light"
+	variant="subtle"
 	startIcon={{
 		icon: errorHandlerMuted === undefined || !errorHandlerMuted ? Bell : BellOff
 	}}
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
index 8f52f2293a..ea1d610918 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
@@ -11,7 +11,7 @@
 	export let textDisabled = false
 	let toggleState = errorHandlerMuted
 
-	export let color: 'nord' | 'red' | 'blue' = 'nord'
+	export let color: 'nord' | 'red' | 'blue' | undefined = undefined
 
 	async function toggleErrorHandler(): Promise<void> {
 		toggleState = !toggleState
@@ -49,20 +49,20 @@
 				false
 			)
 		}
-		toggleState = false
 	}
 </script>
 
 <Toggle
+	textClass="font-medium"
 	{color}
-	textClass="font-normal text-sm"
 	size="xs"
 	checked={toggleState}
 	on:change={toggleErrorHandler}
 	options={{
 		right: 'Mute',
 		rightTooltip: 'Disable workspace error handler, EE only',
-		rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/error_handling#workspace-error-handler'
+		rightDocumentationLink:
+			'https://www.windmill.dev/docs/core_concepts/error_handling#workspace-error-handler'
 	}}
 	{textDisabled}
 />
diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte
index a96dcdf5ce..9f0ad43a41 100644
--- a/frontend/src/lib/components/flows/CreateActionsApp.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsApp.svelte
@@ -27,11 +27,11 @@
 	<Button
 		aiId="apps-create-actions-app"
 		aiDescription="Create a new low-code app"
-		size="sm"
-		spacingSize="xl"
+		unifiedSize="lg"
 		startIcon={{ icon: Plus }}
+		endIcon={{ icon: LayoutDashboard }}
 		href="{base}/apps/add?nodraft=true"
-		color="marine"
+		variant="accent"
 		dropdownItems={[
 			{
 				label: 'Import low-code app from YAML',
@@ -53,9 +53,7 @@
 			// }
 		]}
 	>
-		<div class="flex flex-row items-center">
-			App <LayoutDashboard class="ml-1.5" size={18} />
-		</div>
+		<div class="flex flex-row items-center"> App </div>
 	</Button>
 </div>
 
diff --git a/frontend/src/lib/components/flows/CreateActionsFlow.svelte b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
index 1671a84e5b..c8d8f0c55c 100644
--- a/frontend/src/lib/components/flows/CreateActionsFlow.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
@@ -27,12 +27,11 @@
 	<Button
 		aiId="flows-create-actions-flow"
 		aiDescription="Create a new flow"
-		size="sm"
-		spacingSize="xl"
+		unifiedSize="lg"
 		startIcon={{ icon: Plus }}
 		endIcon={{ icon: BarsStaggered }}
 		href="{base}/flows/add?nodraft=true"
-		color="marine"
+		variant="accent"
 		dropdownItems={[
 			{
 				label: 'Import from YAML',
diff --git a/frontend/src/lib/components/flows/FlowHistoryInner.svelte b/frontend/src/lib/components/flows/FlowHistoryInner.svelte
index 9e116e5244..8084ad216c 100644
--- a/frontend/src/lib/components/flows/FlowHistoryInner.svelte
+++ b/frontend/src/lib/components/flows/FlowHistoryInner.svelte
@@ -111,7 +111,7 @@
 						{/each}
 					</div>
 				{:else}
-					<div class="text-sm text-tertiary">No items</div>
+					<div class="text-sm text-primary">No items</div>
 				{/if}
 			{:else}
 				<Skeleton layout={[[40], [40], [40], [40], [40]]} />
@@ -124,7 +124,7 @@
 				{#if selected}
 					<div class="px-2 flex flex-col gap-2">
 						<div class="flex justify-between">
-							<span class="flex flex-row text-sm p-1 text-tertiary">
+							<span class="flex flex-row text-sm p-1 text-primary">
 								{#if deploymentMsgUpdateMode}
 									<div class="flex w-full">
 										<input
@@ -188,7 +188,7 @@
 									<div class="flex">
 										<Button
 											size="sm"
-											color="dark"
+											variant="accent"
 											on:click={() =>
 												window.open(
 													`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
@@ -201,7 +201,7 @@
 								{/if}
 
 								<div class="flex">
-									<Button size="sm" color="dark" on:click={() => restoreVersion(selected)}
+									<Button size="sm" variant="accent" on:click={() => restoreVersion(selected)}
 										>Redeploy with that version
 									</Button>
 								</div>
@@ -217,7 +217,7 @@
 					<Skeleton layout={[[40]]} />
 				{/if}
 			{:else}
-				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
+				<div class="text-sm p-2 text-primary">Select a deployment version to see its details</div>
 			{/if}
 		</div>
 	</Pane>
diff --git a/frontend/src/lib/components/flows/FlowModuleIcon.svelte b/frontend/src/lib/components/flows/FlowModuleIcon.svelte
index 1e77045d1e..97a7fd4340 100644
--- a/frontend/src/lib/components/flows/FlowModuleIcon.svelte
+++ b/frontend/src/lib/components/flows/FlowModuleIcon.svelte
@@ -20,7 +20,7 @@
 </script>
 
 {#if module?.value?.type === 'aiagent'}
-	<Bot size={16} class="text-violet-800 dark:text-violet-400" />
+	<Bot size={16} class="text-ai" />
 {:else if module?.value?.type === 'rawscript'}
 	<LanguageIcon lang={module.value.language} width={iconWidth} height={iconHeight} />
 {:else if module?.summary === 'Terminate flow'}
diff --git a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
index c0fd77fba6..f26da18224 100644
--- a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
@@ -74,7 +74,7 @@
 </script>
 
 <div
-	class="overflow-x-auto scrollbar-hidden flex items-center justify-between px-4 pt-1 pb-4 flex-nowrap"
+	class="overflow-x-auto scrollbar-hidden flex items-center justify-between px-4 pt-1 pb-1 flex-nowrap"
 >
 	{#if flowModuleValue}
 		<span class="text-sm w-full mr-4">
@@ -100,9 +100,8 @@
 					{#if flowModuleValue.hash}
 						{#if latestHash != flowModuleValue.hash}
 							<Button
-								color="light"
 								size="xs"
-								variant="border"
+								variant="default"
 								on:click={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
@@ -114,7 +113,7 @@
 						<Button
 							title="Unlock hash to always use latest deployed version at that path"
 							size="xs"
-							btnClasses="text-tertiary inline-flex gap-1 items-center"
+							btnClasses="text-primary inline-flex gap-1 items-center"
 							color="light"
 							on:click={() => {
 								if (flowModuleValue.type == 'script') {
@@ -128,7 +127,7 @@
 								title="Lock hash to always use this specific version"
 								color="light"
 								size="xs"
-								btnClasses="text-tertiary inline-flex gap-1 items-center"
+								btnClasses="text-primary inline-flex gap-1 items-center"
 								on:click={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
diff --git a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
index df936c64b4..854ecc363a 100644
--- a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
+++ b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
@@ -43,7 +43,6 @@
 
 {#if open}
 	<PropPickerWrapper
-		alwaysOn
 		notSelectable
 		pickableProperties={stepPropPicker.pickableProperties}
 		on:select={({ detail }) => {
@@ -79,7 +78,7 @@
 			<Button
 				size="xs"
 				startIcon={{ icon: Pen }}
-				variant="border"
+				variant="default"
 				on:click={() => (open = !open)}
 				id="flow-editor-edit-predicate"
 			>
diff --git a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
index 71531cca00..7224b8a304 100644
--- a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
@@ -14,7 +14,7 @@
 		variant="divider"
 		size="xs2"
 		endIcon={{ icon: ChevronDown, classes: `rotate-0 duration-300 ${opened ? '!rotate-180' : ''}` }}
-		btnClasses="text-hint font-normal pt-1"
+		btnClasses="text-hint text-2xs font-normal pt-1"
 	>
 		Help
 	</Button>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
index d14dd000f1..8fa98b33d1 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
@@ -91,12 +91,12 @@
 				{#if flowModule}
 					<Pane size={40}>
 						<TabsV2 bind:selected>
-							<Tab value="early-stop">Early Stop/Break</Tab>
-							<Tab value="skip">Skip</Tab>
-							<Tab value="suspend">Suspend/Approval/Prompt</Tab>
-							<Tab value="sleep">Sleep</Tab>
-							<Tab value="mock">Mock</Tab>
-							<Tab value="lifetime">Lifetime</Tab>
+							<Tab value="early-stop" label="Early Stop/Break" />
+							<Tab value="skip" label="Skip" />
+							<Tab value="suspend" label="Suspend/Approval/Prompt" />
+							<Tab value="sleep" label="Sleep" />
+							<Tab value="mock" label="Mock" />
+							<Tab value="lifetime" label="Lifetime" />
 							{#snippet content()}
 								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
index 0c26769e27..aa6d1af97c 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
@@ -71,7 +71,7 @@
 						<div class="py-2">
 							<div class="flex flex-row gap-2 text-sm p-2">
 								<Badge large={true} color="blue">Default branch</Badge>
-								<p class="italic text-tertiary"
+								<p class="italic text-primary"
 									>If none of the predicates' expressions evaluated in-order match, this branch is
 									chosen</p
 								>
@@ -109,12 +109,12 @@
 				{#if flowModule}
 					<Pane size={40}>
 						<TabsV2 bind:selected>
-							<Tab value="early-stop">Early Stop/Break</Tab>
-							<Tab value="skip">Skip</Tab>
-							<Tab value="suspend">Suspend/Approval/Prompt</Tab>
-							<Tab value="sleep">Sleep</Tab>
-							<Tab value="mock">Mock</Tab>
-							<Tab value="lifetime">Lifetime</Tab>
+							<Tab value="early-stop" label="Early Stop/Break" />
+							<Tab value="skip" label="Skip" />
+							<Tab value="suspend" label="Suspend/Approval/Prompt" />
+							<Tab value="sleep" label="Sleep" />
+							<Tab value="mock" label="Mock" />
+							<Tab value="lifetime" label="Lifetime" />
 							{#snippet content()}
 								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
index a92efaf493..d9890281e3 100644
--- a/frontend/src/lib/components/flows/content/FlowConstants.svelte
+++ b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -137,10 +137,10 @@
 			{#each steps as [_args, filter, m], index (m.id + index)}
 				{#if filter.length > 0}
 					<div class="relative h-full border-t p-4">
-						<h2 class="sticky w-full top-0 z-10 inline-flex items-center py-2">
+						<p class="text-sm font-bold sticky w-full top-0 z-10 inline-flex items-center">
 							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
 							<Badge large color="indigo">{m.id}</Badge>
-						</h2>
+						</p>
 
 						<InputTransformSchemaForm
 							noDynamicToggle
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 92b569c8bb..7eae608898 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -470,7 +470,6 @@
 	{#snippet action()}
 		{#if !disabled}
 			<Toggle
-				textClass="font-normal text-sm"
 				size="sm"
 				checked={chatInputEnabled}
 				on:click={(e) => {
@@ -552,28 +551,22 @@
 							<div class={twMerge('flex flex-row divide-x', ButtonType.ColorVariants.blue.divider)}>
 								<SideBarTab {dropdownItems} fullMenu={!!$flowInputEditorState?.selectedTab}>
 									{#snippet close_button()}
-										<button
-											onclick={() => {
-												handleEditSchema()
-											}}
-											title={!!$flowInputEditorState?.selectedTab
-												? 'Close input editor'
-												: 'Open input editor'}
-											class={twMerge(
-												ButtonType.ColorVariants.blue.contained,
-												!!$flowInputEditorState?.selectedTab
-													? 'rounded-tl-md border-l border-t'
-													: 'rounded-md border'
-											)}
-										>
-											<div class="p-2 center-center">
-												{#if !!$flowInputEditorState?.selectedTab}
-													<ChevronRight size={14} />
-												{:else}
-													<Pen size={14} />
-												{/if}
-											</div>
-										</button>
+										<Button
+											onClick={() => handleEditSchema()}
+											{...!!$flowInputEditorState?.selectedTab
+												? {
+														title: 'Close input editor',
+														startIcon: { icon: ChevronRight },
+														btnClasses: 'rounded-none rounded-tl-md'
+													}
+												: {
+														title: 'Open input editor',
+														startIcon: { icon: Pen }
+													}}
+											variant="accent"
+											iconOnly
+											wrapperClasses="h-full"
+										/>
 									{/snippet}
 								</SideBarTab>
 							</div>
@@ -597,8 +590,7 @@
 											: 'Update schema'}
 									</Button>
 									<Button
-										variant="border"
-										color="light"
+										variant="default"
 										size="xs"
 										startIcon={{ icon: X }}
 										shortCut={{ key: 'esc', withoutModifier: true }}
@@ -745,7 +737,7 @@
 						{#snippet runButton()}
 							<div class="w-full flex justify-end pr-5">
 								<Button
-									color="dark"
+									variant="accent"
 									btnClasses="w-fit"
 									disabled={runDisabled || !isValid}
 									size="xs"
diff --git a/frontend/src/lib/components/flows/content/FlowInputEditor.svelte b/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
index fa26cf965e..f69c5105dc 100644
--- a/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
@@ -20,9 +20,9 @@
 	<div
 		class="items-center grow-0 flex flex-row justify-between gap-2 data-schema-picker min-h-[40px]"
 	>
-		<h2 class="font-semibold text-secondary text-sm flex flex-row items-center gap-1 leading-6">
+		<h3 class="font-semibold text-emphasis text-xs flex flex-row items-center gap-1 leading-6">
 			{title}
-		</h2>
+		</h3>
 		{@render action?.()}
 	</div>
 
diff --git a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
index 4b01f3c878..faee8fb3d9 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
@@ -56,7 +56,8 @@
 					<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
 						<Badge
 							class="cursor-pointer hover:bg-gray-200"
-							on:click={() => {
+							clickable
+							onclick={() => {
 								ownerFilter = ownerFilter == owner ? undefined : owner
 							}}
 							color={owner === ownerFilter ? 'blue' : 'gray'}
diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index f88030f29a..37d7d742c6 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
@@ -285,7 +285,7 @@
 						{/each}
 						<div class="pb-1.5"></div>
 					{:else}
-						<div class="text-2xs text-tertiary font-light text-center py-3 px-3 items-center">
+						<div class="text-2xs text-primary font-light text-center py-3 px-3 items-center">
 							No items found.
 						</div>
 					{/if}
@@ -354,19 +354,17 @@
 						<Button
 							on:click={() => (openScriptSettings = true)}
 							startIcon={{ icon: SettingsIcon }}
-							color="light"
 							size="xs2"
-							btnClasses="!text-tertiary"
-							variant="contained"
+							btnClasses="!text-primary"
+							variant="subtle"
 							title="Edit global default scripts"
 						/>
 					{:else}
 						<Button
 							on:click={() => (openScriptSettings = false)}
 							startIcon={{ icon: SettingsIcon }}
-							color="dark"
+							variant="accent"
 							size="xs2"
-							variant="contained"
 						>
 							Close
 						</Button>
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index 56028f0da1..a8eafa4ef9 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -155,7 +155,7 @@
 					<Button
 						on:click={() => (previewOpen = true)}
 						startIcon={{ icon: Play }}
-						color="dark"
+						variant="accent"
 						size="sm">Test an iteration</Button
 					>
 				</div>
@@ -253,11 +253,10 @@
 								class="h-6"
 							>
 								{#snippet children({ item })}
-									<ToggleButton light small label="static" value="static" {item} />
+									<ToggleButton small label="static" value="static" {item} />
 
 									<ToggleButton
 										small
-										light
 										tooltip="JavaScript expression ('flow_input' or 'results')."
 										value="javascript"
 										icon={FunctionSquare}
@@ -281,12 +280,13 @@
 					</div>
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="border w-full mb-2 h-full max-h-[250px]"
+						class="border rounded-md overflow-auto w-full mb-2 h-full max-h-[250px]"
 						id="flow-editor-parallel-expression"
 						transition:slide={{ duration: 300 }}
 					>
 						<PropPickerWrapper
 							notSelectable
+							noPadding
 							flow_input={stepPropPicker.pickableProperties.flow_input}
 							pickableProperties={stepPropPicker.pickableProperties}
 							on:select={({ detail }) => {
@@ -313,7 +313,8 @@
 										}
 									}
 								}
-								class="small-editor"
+								class="h-full"
+								yPadding={7}
 								shouldBindKey={false}
 								extraLib={stepPropPicker.extraLib}
 							/>
@@ -368,12 +369,11 @@
 				{#if mod.value.iterator.type == 'javascript'}
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="border w-full"
+						class="border rounded-md overflow-auto w-full"
 						id="flow-editor-iterator-expression"
 						onkeyup={iteratorGen?.onKeyUp}
 					>
 						<PropPickerWrapper
-							alwaysOn
 							notSelectable
 							pickableProperties={stepPropPicker.pickableProperties}
 							on:select={({ detail }) => {
@@ -398,7 +398,8 @@
 								autofocus
 								lang="javascript"
 								bind:code={mod.value.iterator.expr}
-								class="small-editor"
+								class="h-full"
+								yPadding={7}
 								shouldBindKey={false}
 								extraLib={stepPropPicker.extraLib}
 							/>
@@ -416,12 +417,12 @@
 		<Pane size={40} minSize={20} class="flex flex-col flex-1">
 			<TabsV2 bind:selected>
 				<!-- <Tab value="retries">Retries</Tab> -->
-				<Tab value="early-stop">Early Stop/Break</Tab>
-				<Tab value="skip">Skip</Tab>
-				<Tab value="suspend">Suspend/Approval/Prompt</Tab>
-				<Tab value="sleep">Sleep</Tab>
-				<Tab value="mock">Mock</Tab>
-				<Tab value="lifetime">Lifetime</Tab>
+				<Tab value="early-stop" label="Early Stop/Break" />
+				<Tab value="skip" label="Skip" />
+				<Tab value="suspend" label="Suspend/Approval/Prompt" />
+				<Tab value="sleep" label="Sleep" />
+				<Tab value="mock" label="Mock" />
+				<Tab value="lifetime" label="Lifetime" />
 
 				{#snippet content()}
 					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
diff --git a/frontend/src/lib/components/flows/content/FlowModuleCache.svelte b/frontend/src/lib/components/flows/content/FlowModuleCache.svelte
index bf9fa4bf43..72749eb46e 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleCache.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleCache.svelte
@@ -26,10 +26,10 @@
 	{/snippet}
 
 	{#if flowModule.value.type != 'rawscript'}
-		<p
-			>The cache settings need to be set in the referenced script/flow settings directly. Cache for
-			hub scripts is not available yet.</p
-		>
+		<p class="text-xs text-secondary">
+			The cache settings need to be set in the referenced script/flow settings directly. Cache for
+			hub scripts is not available yet.
+		</p>
 	{:else}
 		<Toggle
 			checked={isCacheEnabled}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 01252b6a46..529f7f90d6 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -6,7 +6,7 @@
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Editor from '$lib/components/Editor.svelte'
-	import EditorBar from '$lib/components/EditorBar.svelte'
+	import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from '$lib/components/EditorBar.svelte'
 	import ModulePreview from '$lib/components/ModulePreview.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { createScriptFromInlineScript, fork } from '$lib/components/flows/flowStateUtils.svelte'
@@ -347,7 +347,7 @@
 <svelte:window onkeydown={onKeyDown} />
 
 {#if flowModule.value}
-	<div class="h-full" bind:clientWidth={width}>
+	<div class="h-full bg-surface" bind:clientWidth={width}>
 		<FlowCard
 			flowModuleValue={flowModule?.value}
 			on:reload={() => {
@@ -427,7 +427,7 @@
 							{diffEditor}
 							lang={flowModule.value['language'] ?? 'deno'}
 							{websocketAlive}
-							iconOnly={width < 950}
+							iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
 							kind={scriptKind}
 							template={scriptTemplate}
 							args={Object.entries(flowModule.value.input_transforms).reduce((acc, [key, obj]) => {
@@ -551,22 +551,18 @@
 						>
 							<Splitpanes>
 								<Pane minSize={36} bind:size={leftPanelSize}>
-									<Tabs bind:selected>
-										{#if !preprocessorModule && !isAgentTool}
-											<Tab value="inputs">Step Input</Tab>
-										{/if}
-										<Tab value="test">Test this step</Tab>
-										{#if !preprocessorModule && !isAgentTool}
-											<Tab value="advanced">Advanced</Tab>
-										{/if}
-									</Tabs>
-									<div
-										class={advancedSelected === 'runtime'
-											? 'h-[calc(100%-68px)]'
-											: 'h-[calc(100%-34px)]'}
-									>
+									<div class="flex flex-col relative h-[99.99%]">
+										<Tabs bind:selected wrapperClass="shrink-0">
+											{#if !preprocessorModule && !isAgentTool}
+												<Tab value="inputs" label="Step Input" />
+											{/if}
+											<Tab value="test" label="Test this step" />
+											{#if !preprocessorModule && !isAgentTool}
+												<Tab value="advanced" label="Advanced" />
+											{/if}
+										</Tabs>
 										{#if selected === 'inputs' && (flowModule.value.type == 'rawscript' || flowModule.value.type == 'script' || flowModule.value.type == 'flow' || flowModule.value.type == 'aiagent')}
-											<div class="h-full overflow-auto bg-surface" id="flow-editor-step-input">
+											<div class="flex-1 overflow-auto" id="flow-editor-step-input">
 												<PropPickerWrapper
 													pickableProperties={stepPropPicker.pickableProperties}
 													error={failureModule}
@@ -607,6 +603,7 @@
 											</div>
 										{:else if selected === 'test'}
 											<ModulePreview
+												class="flex-1"
 												pickableProperties={stepPropPicker.pickableProperties}
 												bind:this={modulePreview}
 												mod={flowModule}
@@ -619,38 +616,49 @@
 												{onJobDone}
 											/>
 										{:else if selected === 'advanced'}
-											<Tabs bind:selected={advancedSelected}>
-												<Tab value="retries" active={flowModule.retry !== undefined}>Retries</Tab>
+											<Tabs bind:selected={advancedSelected} wrapperClass="shrink-0">
+												<Tab
+													value="retries"
+													active={flowModule.retry !== undefined}
+													label="Retries"
+												/>
 												{#if !$selectedId.includes('failure')}
-													<Tab value="runtime">Runtime</Tab>
-													<Tab value="cache" active={Boolean(flowModule.cache_ttl)}>Cache</Tab>
+													<Tab value="runtime" label="Runtime" />
+													<Tab value="cache" active={Boolean(flowModule.cache_ttl)} label="Cache" />
 													<Tab
 														value="early-stop"
 														active={Boolean(
 															flowModule.stop_after_if || flowModule.stop_after_all_iters_if
 														)}
-													>
-														Early Stop
-													</Tab>
-													<Tab value="skip" active={Boolean(flowModule.skip_if)}>Skip</Tab>
-													<Tab value="suspend" active={Boolean(flowModule.suspend)}>Suspend</Tab>
-													<Tab value="sleep" active={Boolean(flowModule.sleep)}>Sleep</Tab>
-													<Tab value="mock" active={Boolean(flowModule.mock?.enabled)}>Mock</Tab>
-													<Tab value="same_worker">Shared Directory</Tab>
+														label="Early Stop"
+													/>
+													<Tab value="skip" active={Boolean(flowModule.skip_if)} label="Skip" />
+													<Tab
+														value="suspend"
+														active={Boolean(flowModule.suspend)}
+														label="Suspend"
+													/>
+													<Tab value="sleep" active={Boolean(flowModule.sleep)} label="Sleep" />
+													<Tab
+														value="mock"
+														active={Boolean(flowModule.mock?.enabled)}
+														label="Mock"
+													/>
+													<Tab value="same_worker" label="Shared Directory" />
 													{#if flowModule.value['language'] === 'python3' || flowModule.value['language'] === 'deno'}
-														<Tab value="s3">S3</Tab>
+														<Tab value="s3" label="S3" />
 													{/if}
 												{/if}
 											</Tabs>
 											{#if advancedSelected === 'runtime'}
-												<Tabs bind:selected={advancedRuntimeSelected}>
-													<Tab value="concurrency">Concurrency</Tab>
-													<Tab value="timeout">Timeout</Tab>
-													<Tab value="priority">Priority</Tab>
-													<Tab value="lifetime">Lifetime</Tab>
+												<Tabs bind:selected={advancedRuntimeSelected} wrapperClass="shrink-0">
+													<Tab value="concurrency" label="Concurrency" />
+													<Tab value="timeout" label="Timeout" />
+													<Tab value="priority" label="Priority" />
+													<Tab value="lifetime" label="Lifetime" />
 												</Tabs>
 											{/if}
-											<div class="h-[calc(100%-32px)] overflow-auto p-4">
+											<div class="flex-1 overflow-auto p-4">
 												{#if advancedSelected === 'retries'}
 													<Section label="Retries">
 														{#snippet header()}
@@ -661,24 +669,18 @@
 																maximum number of attempts as defined below.
 															</Tooltip>
 														{/snippet}
-														<span class="text-2xs"
-															>After all retries attempts have been exhausted:</span
-														>
-														<div class="flex gap-2 mb-4">
+														<Label label="After all retries attempts have been exhausted:">
 															<Toggle
 																size="xs"
 																bind:checked={flowModule.continue_on_error}
 																options={{
 																	left: 'Stop on error and propagate error up',
-																	right: "Continue on error with error as step's return"
+																	right: "Continue on error with error as step's return",
+																	rightTooltip:
+																		'When enabled, the flow will continue to the next step after going through all the retries (if any) even if this step fails. This enables to process the error in a branch one for instance.'
 																}}
 															/>
-															<Tooltip>
-																When enabled, the flow will continue to the next step after going
-																through all the retries (if any) even if this step fails. This
-																enables to process the error in a branch one for instance.
-															</Tooltip>
-														</div>
+														</Label>
 														<div class="my-8"></div>
 														<FlowRetries bind:flowModuleRetry={flowModule.retry} bind:flowModule />
 													</Section>
@@ -697,8 +699,7 @@
 																	/>
 																	<Button
 																		size="xs"
-																		color="light"
-																		variant="border"
+																		variant="default"
 																		on:click={() => {
 																			if (flowModule.value.type == 'rawscript') {
 																				flowModule.value.concurrent_limit = undefined
diff --git a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
index d490ae4ac5..26ae558589 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
@@ -117,7 +117,7 @@
 			/>
 
 			<div
-				class="w-full mt-2 border p-2 flex flex-col gap-2 {flowModule.stop_after_if
+				class="w-full mt-2 border rounded-md p-2 flex flex-col gap-2 {flowModule.stop_after_if
 					? ''
 					: 'bg-surface-secondary'}"
 			>
@@ -162,8 +162,9 @@
 						/>
 					{/if}
 					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
-					<div class="border w-full">
+					<div class="border rounded-md w-full overflow-auto">
 						<PropPickerWrapper
+							noPadding
 							notSelectable
 							flow_input={stepPropPicker.pickableProperties.flow_input}
 							pickableProperties={undefined}
@@ -176,9 +177,10 @@
 						>
 							<SimpleEditor
 								bind:this={editor}
+								yPadding={7}
 								lang="javascript"
 								bind:code={flowModule.stop_after_if.expr}
-								class="few-lines-editor"
+								class="h-full"
 								extraLib={`declare const result = ${JSON.stringify(earlyStopResult)};` +
 									`\n declare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input)};` +
 									(isLoop ? `\ndeclare const all_iters = ${JSON.stringify(result)};` : '')}
@@ -259,7 +261,7 @@
 			/>
 
 			<div
-				class="w-full border mt-2 p-2 flex flex-col gap-2 {flowModule.stop_after_all_iters_if
+				class="w-full border rounded-md mt-2 p-2 flex flex-col gap-2 {flowModule.stop_after_all_iters_if
 					? ''
 					: 'bg-surface-secondary'}"
 			>
@@ -298,9 +300,10 @@
 						/>
 					{/if}
 					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
-					<div class="border w-full">
+					<div class="border rounded-md w-full overflow-auto">
 						<PropPickerWrapper
 							notSelectable
+							noPadding
 							flow_input={stepPropPicker.pickableProperties.flow_input}
 							pickableProperties={undefined}
 							{result}
@@ -313,7 +316,8 @@
 								bind:this={editor}
 								lang="javascript"
 								bind:code={flowModule.stop_after_all_iters_if.expr}
-								class="few-lines-editor"
+								class="h-full"
+								yPadding={7}
 								extraLib={`declare const result = ${JSON.stringify(result)};` +
 									`\ndeclare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input)};`}
 							/>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
index 14136a694a..65ec0ecf6a 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
@@ -41,7 +41,7 @@
 		}
 	}
 	run(() => {
-		flowModule.mock, untrack(() => updateMock(flowModule.mock))
+		;(flowModule.mock, untrack(() => updateMock(flowModule.mock)))
 	})
 
 	function updateMockValue({ detail }: any) {
@@ -92,7 +92,7 @@
 				<JsonEditor {code} on:changeValue={updateMockValue} />
 			{/key}
 		{:else}
-			<pre class="text-xs border rounded p-2 bg-surface-disabled"
+			<pre class="text-xs border rounded p-2 bg-surface-disabled/20"
 				>{flowModule.mock?.return_value
 					? JSON.stringify(flowModule.mock?.return_value, null, 2)
 					: ''}</pre
diff --git a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
index 121cba59f1..cde3371f38 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
@@ -125,10 +125,10 @@
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
 	{#if showDate && date}
-		<span class="text-xs text-tertiary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
+		<span class="text-xs text-primary mb-4"><TimeAgo agoOnlyIfRecent {date} /></span>
 	{/if}
 	{#if tag}
-		<div class="text-xs text-tertiary mb-4">tag: {tag}</div>
+		<div class="text-xs text-primary mb-4">tag: {tag}</div>
 	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte b/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
index 4acfc75183..f233a1acc3 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
@@ -62,14 +62,15 @@
 		/>
 
 		<div
-			class="w-full border p-2 mt-2 flex flex-col {flowModule.skip_if
+			class="w-full border rounded-md p-2 mt-2 flex flex-col gap-1 {flowModule.skip_if
 				? ''
 				: 'bg-surface-secondary'}"
 		>
 			{#if flowModule.skip_if}
 				<span class="mt-2 text-xs font-bold">Skip condition expression</span>
-				<div class="border w-full">
+				<div class="border rounded-md w-full overflow-auto">
 					<PropPickerWrapper
+						noPadding
 						notSelectable
 						pickableProperties={stepPropPicker.pickableProperties}
 						on:select={({ detail }) => {
@@ -81,7 +82,8 @@
 							bind:this={editor}
 							lang="javascript"
 							bind:code={flowModule.skip_if.expr}
-							class="few-lines-editor"
+							yPadding={7}
+							class="h-full"
 							extraLib={stepPropPicker.extraLib}
 						/>
 					</PropPickerWrapper>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte b/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte
index e6c967aee9..e9e15120fc 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte
@@ -56,6 +56,7 @@
 
 	<Toggle
 		checked={isSleepEnabled}
+		class="mb-6"
 		on:change={() => {
 			if (isSleepEnabled && flowModule.sleep != undefined) {
 				flowModule.sleep = undefined
@@ -72,7 +73,7 @@
 	/>
 	<Label label="Sleep for duration">
 		{#if flowModule.sleep && schema.properties['sleep']}
-			<div class="border">
+			<div class="border rounded-md overflow-auto">
 				<PropPickerWrapper
 					noFlowPlugConnect={true}
 					flow_input={stepPropPicker.pickableProperties.flow_input}
@@ -97,7 +98,7 @@
 			</div>
 		{:else}
 			<SecondsInput disabled />
-			<div class="text-secondary">OR use a dynamic expression</div>
+			<div class="text-secondary text-xs">OR use a dynamic expression</div>
 		{/if}
 	</Label>
 </Section>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte b/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte
index ab17bdb28b..fffc702a22 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte
@@ -103,15 +103,9 @@
 
 	<div class="overflow-x-auto scrollbar-hidden">
 		<Tabs bind:selected={suspendTabSelected}>
-			<Tab size="xs" value="core" disabled={!isSuspendEnabled}>
-				<div class="flex gap-2 items-center my-1">Core</div>
-			</Tab>
-			<Tab size="xs" value="form" disabled={!isSuspendEnabled}>
-				<div class="flex gap-2 items-center my-1">Form</div>
-			</Tab>
-			<Tab size="xs" value="permissions" disabled={!isSuspendEnabled}>
-				<div class="flex gap-2 items-center my-1">Permissions</div>
-			</Tab>
+			<Tab value="core" disabled={!isSuspendEnabled} label="Core" />
+			<Tab value="form" disabled={!isSuspendEnabled} label="Form" />
+			<Tab value="permissions" disabled={!isSuspendEnabled} label="Permissions" />
 		</Tabs>
 	</div>
 
@@ -251,7 +245,6 @@
 					<div class="flex flex-col items-end mb-2 w-full">
 						<Toggle
 							checked={false}
-							label="JSON View"
 							size="xs"
 							options={{
 								right: 'JSON editor',
diff --git a/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte b/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte
index afa2420819..dbf46afba5 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte
@@ -101,13 +101,13 @@
 			</div>
 		{:else}
 			<SecondsInput disabled />
-			<div class="text-secondary">OR use a dynamic expression</div>
+			<div class="text-secondary text-sm">OR use a dynamic expression</div>
 		{/if}
 	</Label>
 
 	<div class="mt-4">
 		<Alert title="Only used when testing the full flow" type="info">
-			<p class="text-sm"> The timeout will be ignored when running "Test this step" </p>
+			<p class="text-xs"> The timeout will be ignored when running "Test this step" </p>
 		</Alert>
 	</div>
 </Section>
diff --git a/frontend/src/lib/components/flows/content/FlowResult.svelte b/frontend/src/lib/components/flows/content/FlowResult.svelte
index 7dd3e20e9d..e87902a21e 100644
--- a/frontend/src/lib/components/flows/content/FlowResult.svelte
+++ b/frontend/src/lib/components/flows/content/FlowResult.svelte
@@ -33,14 +33,14 @@
 			/>
 		</div>
 	{:else}
-		<p class="p-4 text-secondary">The result of the flow will be the result of the last node.</p>
+		<p class="p-4 text-secondary text-xs">
+			The result of the flow will be the result of the last node.
+		</p>
 	{/if}
 </FlowCard>
 
 {#snippet extra()}
 	<div class="flex justify-end">
-		<Button variant="border" color="light" size="xs" on:click={() => onOpenDetails?.()}
-			>Open details</Button
-		>
+		<Button variant="default" size="xs" on:click={() => onOpenDetails?.()}>Open details</Button>
 	</div>
 {/snippet}
diff --git a/frontend/src/lib/components/flows/content/FlowRetries.svelte b/frontend/src/lib/components/flows/content/FlowRetries.svelte
index 8d14890961..5cc6f3d3a6 100644
--- a/frontend/src/lib/components/flows/content/FlowRetries.svelte
+++ b/frontend/src/lib/components/flows/content/FlowRetries.svelte
@@ -108,7 +108,7 @@
 <div class="h-full flex flex-col gap-4">
 	<ToggleButtonGroup
 		bind:selected={delayType}
-		class={`h-10 ${disabled ? 'disabled' : ''}`}
+		class={`${disabled ? 'disabled' : ''}`}
 		on:selected={(e) => {
 			flowModuleRetry = undefined
 			if (e.detail === 'constant') {
@@ -121,9 +121,9 @@
 		}}
 	>
 		{#snippet children({ item })}
-			<ToggleButton light value="disabled" label="Disabled" {item} />
-			<ToggleButton light value="constant" label="Constant" {item} />
-			<ToggleButton light value="exponential" label="Exponential" {item} />
+			<ToggleButton value="disabled" label="Disabled" {item} />
+			<ToggleButton value="constant" label="Constant" {item} />
+			<ToggleButton value="exponential" label="Exponential" {item} />
 		{/snippet}
 	</ToggleButtonGroup>
 
@@ -160,18 +160,19 @@
 			/>
 
 			<div
-				class="w-full border p-2 mt-2 flex flex-col {flowModuleRetry?.retry_if
+				class="w-full border rounded-md p-2 mt-2 flex flex-col {flowModuleRetry?.retry_if
 					? ''
 					: 'bg-surface-secondary'}"
 			>
 				{#if flowModuleRetry?.retry_if}
 					<span class="mt-2 text-xs font-bold">Retry condition expression</span>
-					<span class="text-xs text-tertiary mb-2"
+					<span class="text-xs text-primary mb-2"
 						>Expression should return true to retry, false to skip retry</span
 					>
-					<div class="border w-full">
+					<div class="border rounded-md overflow-auto w-full">
 						{#if stepPropPicker}
 							<PropPickerWrapper
+								noPadding
 								notSelectable
 								pickableProperties={stepPropPicker.pickableProperties}
 								{result}
@@ -184,7 +185,8 @@
 									bind:this={editor}
 									lang="javascript"
 									bind:code={flowModuleRetry.retry_if.expr}
-									class="few-lines-editor"
+									yPadding={7}
+									class="h-full"
 									extraLib={`declare const result = ${JSON.stringify(result)};` +
 										`\ndeclare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input || {})};`}
 								/>
@@ -201,7 +203,7 @@
 					</div>
 				{:else}
 					<span class="mt-2 text-xs font-bold">Retry condition expression</span>
-					<span class="text-xs text-tertiary mb-2"
+					<span class="text-xs text-primary mb-2"
 						>Expression should return true to retry, false to skip retry</span
 					>
 					<textarea disabled rows="3" class="min-h-[80px]"></textarea>
@@ -244,7 +246,7 @@
 						>
 					</div>
 					<div class="text-xs font-bold !mt-2">Multiplier</div>
-					<span class="text-xs text-tertiary">delay = multiplier * base ^ (number of attempt)</span>
+					<span class="text-xs text-primary">delay = multiplier * base ^ (number of attempt)</span>
 					<input bind:value={flowModuleRetry.exponential.multiplier} type="number" />
 					<div class="text-xs font-bold !mt-2">Base (in seconds)</div>
 					<input bind:value={flowModuleRetry.exponential.seconds} type="number" step="1" />
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 8c1b1b1c94..6d769e4cbe 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -22,6 +22,9 @@
 	import Badge from '$lib/components/Badge.svelte'
 	import { AlertTriangle } from 'lucide-svelte'
 	import AIFormSettings from '$lib/components/copilot/AIFormSettings.svelte'
+	import { twMerge } from 'tailwind-merge'
+	import { inputBaseClass, inputBorderClass } from '$lib/components/text_input/TextInput.svelte'
+	import { slide } from 'svelte/transition'
 
 	interface Props {
 		noEditor: boolean
@@ -46,6 +49,10 @@
 	})
 
 	let activeAdvancedOptions = $derived([
+		{
+			name: 'Fill flow inputs with AI',
+			active: typeof flowStore.val.schema?.prompt_for_ai == 'string'
+		},
 		{
 			name: 'High Priority',
 			active: flowStore.val.value.priority !== undefined && flowStore.val.value.priority > 0
@@ -62,19 +69,17 @@
 		{ name: 'Worker Tag', active: displayWorkerTagPicker }
 	])
 
-	let numberOfAdvancedOptionsOn = $derived(
-		activeAdvancedOptions.filter((option) => option.active).length
-	)
 	let activeAdvancedOptionNames = $derived(
 		activeAdvancedOptions.filter((option) => option.active).map((option) => option.name)
 	)
+	let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length)
 </script>
 
-<div class="h-full overflow-y-auto flex flex-col">
+<div class="h-full flex flex-col">
 	<FlowCard {noEditor} title="Settings">
-		<div class="grow min-h-0 p-4 h-full flex flex-col gap-8">
+		<div class="grow min-h-0 p-4 h-full flex flex-col gap-6">
 			<!-- Metadata Section -->
-			<div class="gap-8 flex flex-col">
+			<div class="gap-6 flex flex-col">
 				<Label label="Summary">
 					<MetadataGen
 						bind:content={flowStore.val.summary}
@@ -126,13 +131,6 @@
 						}}
 					/>
 				</Label>
-
-				{#if flowStore.val.schema && enableAi}
-					<AIFormSettings
-						bind:prompt={flowStore.val.schema.prompt_for_ai as string | undefined}
-						type="flow"
-					/>
-				{/if}
 			</div>
 
 			<!-- Deployable Section -->
@@ -140,14 +138,19 @@
 				label="Advanced"
 				collapsable={true}
 				small={true}
-				class="h-full grow  min-h-0 flex flex-col gap-4"
+				class="h-full grow mt-2 min-h-0 flex flex-col gap-6"
 			>
+				{#if flowStore.val.schema && enableAi}
+					<AIFormSettings
+						bind:prompt={flowStore.val.schema.prompt_for_ai as string | undefined}
+						type="flow"
+					/>
+				{/if}
 				<!-- Worker Group Section -->
 				{#if customUi?.settingsTabs?.workerGroup != false}
 					<div>
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={displayWorkerTagPicker}
 							on:change={() => {
@@ -162,11 +165,12 @@
 									"When a worker group tag is defined at the flow level, any steps inside the flow will run on any worker group that listen to that tag, regardless of the steps tag. If no worker group tags is defined, the flow controls will be executed with the default tag 'flow' and the steps will be executed with their respective tag",
 								rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/worker_groups'
 							}}
-							class="py-1"
 						/>
 
 						{#if displayWorkerTagPicker}
-							<WorkerTagPicker bind:tag={flowStore.val.tag} popupPlacement="top-end" />
+							<div transition:slide={{ duration: 120 }} class="mt-2">
+								<WorkerTagPicker bind:tag={flowStore.val.tag} popupPlacement="top-end" />
+							</div>
 						{/if}
 					</div>
 
@@ -182,9 +186,7 @@
 					{#if numberOfAdvancedOptionsOn > 0}
 						<div class="flex grow min-w-0 w-full flex-wrap gap-1 ps-2">
 							{#each activeAdvancedOptionNames as optionName}
-								<Badge twBgColor="bg-nord-950 dark:bg-nord-400" twTextColor="text-primary-inverse"
-									>{optionName}</Badge
-								>
+								<Badge twBgColor="bg-surface-sunken" twTextColor="text-primary">{optionName}</Badge>
 							{/each}
 						</div>
 					{/if}
@@ -194,8 +196,7 @@
 				{#if customUi?.settingsTabs?.cache != false}
 					<div>
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.cache_ttl)}
 							on:change={() => {
@@ -211,12 +212,11 @@
 									'When enabled, the flow will cache the results of the flow for each possible set of inputs.',
 								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/cache#cache-flows'
 							}}
-							class="py-1"
 						/>
 						{#if flowStore.val.value.cache_ttl}
-							<div class="flex gap-x-4 flex-col gap-1">
-								<div class="text-sm text-secondary">How long to keep the cache valid</div>
-								<div>
+							<div class="flex gap-x-4 flex-col gap-1 mt-2" transition:slide={{ duration: 120 }}>
+								<div class="text-2xs text-secondary">How long to keep the cache valid</div>
+								<div class="-mt-5">
 									{#if flowStore.val.value.cache_ttl}
 										<SecondsInput bind:seconds={flowStore.val.value.cache_ttl} />
 									{:else}
@@ -233,8 +233,7 @@
 					<div>
 						<!-- documentationLink="https://www.windmill.dev/docs/flows/early_stop -->
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.skip_expr)}
 							on:change={() => {
@@ -252,17 +251,18 @@
 								rightDocumentationLink:
 									'https://www.windmill.dev/docs/flows/early_stop#early-stop-for-flow'
 							}}
-							class="py-1"
 						/>
 						{#if flowStore.val.value.skip_expr}
 							<div
-								class="w-full border flex flex-col {flowStore.val.value.skip_expr
+								class="w-full border rounded-md flex flex-col mt-2 {flowStore.val.value.skip_expr
 									? ''
 									: 'bg-surface-secondary'}"
 							>
-								<div class="border w-full">
+								<div class="w-full rounded-md overflow-auto">
 									<SimpleEditor
 										lang="javascript"
+										small
+										yPadding={7}
 										bind:code={flowStore.val.value.skip_expr}
 										class="small-editor"
 										extraLib={`declare const flow_input = ${JSON.stringify(
@@ -270,7 +270,7 @@
 										)};
 									declare const WM_SCHEDULED_FOR: string;`}
 									/>
-									<div class="text-xs text-tertiary mt-2">
+									<div class="text-xs text-hint p-2">
 										You can use the variable `flow_input` to access the inputs of the flow. <br
 										/>The variable `WM_SCHEDULED_FOR` contains the time the flow was scheduled for
 										which you can use to stop early non fresh jobs:
@@ -286,8 +286,7 @@
 				{#if customUi?.settingsTabs?.earlyReturn != false}
 					<div>
 						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
+							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.early_return)}
 							on:change={() => {
@@ -303,13 +302,13 @@
 									'If defined, sync endpoints will return early at the node defined here while the rest of the flow continue asynchronously.',
 								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/early_return'
 							}}
-							class="py-1"
 						/>
 						{#if flowStore.val.value.early_return}
 							<div
-								class="max-w-[120px] flex flex-col {flowStore.val.value.early_return
+								class="max-w-[120px] flex flex-col mt-2 {flowStore.val.value.early_return
 									? ''
 									: 'bg-surface-secondary'}"
+								transition:slide={{ duration: 120 }}
 							>
 								<select
 									name="oauth_name"
@@ -330,8 +329,7 @@
 				<!-- Shared Directory Section -->
 				{#if customUi?.settingsTabs?.sharedDiretory != false}
 					<Toggle
-						textClass="font-normal text-sm"
-						color="nord"
+						textClass="font-medium"
 						size="xs"
 						bind:checked={flowStore.val.value.same_worker}
 						options={{
@@ -343,14 +341,12 @@
 							rightDocumentationLink:
 								'https://www.windmill.dev/docs/core_concepts/persistent_storage/within_windmill#shared-directory'
 						}}
-						class="py-1"
 					/>
 				{/if}
 
 				<!-- Visibility Section -->
 				<Toggle
-					textClass="font-normal text-sm"
-					color="nord"
+					textClass="font-medium"
 					size="xs"
 					checked={Boolean(flowStore.val.visible_to_runner_only)}
 					on:change={() => {
@@ -367,13 +363,11 @@
 						rightDocumentationLink:
 							'https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#invisible-runs'
 					}}
-					class="py-1"
 				/>
 
 				<!-- On behalf of last editor section -->
 				<Toggle
-					textClass="font-normal text-sm"
-					color="nord"
+					textClass="font-medium"
 					size="xs"
 					checked={Boolean(flowStore.val.on_behalf_of_email)}
 					on:change={() => {
@@ -388,13 +382,11 @@
 						rightTooltip:
 							'When this option is enabled, the flow will be run with the permissions of the last editor.'
 					}}
-					class="py-1"
 				/>
 
 				<!-- Error Handler Section -->
 				<div class="flex flex-row items-center py-1">
 					<ErrorHandlerToggleButtonV2
-						color="nord"
 						kind="flow"
 						scriptOrFlowPath={$pathStore}
 						bind:errorHandlerMuted={flowStore.val.ws_error_handler_muted}
@@ -412,32 +404,28 @@
 				<!-- Concurrency Section -->
 				{#if customUi?.settingsTabs?.concurrency != false}
 					<div>
-						<div class="flex flex-row items-center gap-2">
-							<Toggle
-								textClass="font-normal text-sm"
-								color="nord"
-								size="xs"
-								disabled={!$enterpriseLicense}
-								checked={Boolean(flowStore.val.value.concurrent_limit)}
-								on:change={() => {
-									if (flowStore.val.value.concurrent_limit) {
-										flowStore.val.value.concurrent_limit = undefined
-									} else {
-										flowStore.val.value.concurrent_limit = 1
-									}
-								}}
-								options={{
-									right: 'Concurrency limits',
-									rightTooltip: 'Allowed concurrency within a given timeframe',
-									rightDocumentationLink: 'https://www.windmill.dev/docs/flows/concurrency_limit'
-								}}
-								class="py-1"
-								eeOnly={true}
-							/>
-						</div>
+						<Toggle
+							textClass="font-medium"
+							size="xs"
+							disabled={!$enterpriseLicense}
+							checked={Boolean(flowStore.val.value.concurrent_limit)}
+							on:change={() => {
+								if (flowStore.val.value.concurrent_limit) {
+									flowStore.val.value.concurrent_limit = undefined
+								} else {
+									flowStore.val.value.concurrent_limit = 1
+								}
+							}}
+							options={{
+								right: 'Concurrency limits',
+								rightTooltip: 'Allowed concurrency within a given timeframe',
+								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/concurrency_limit'
+							}}
+							eeOnly={true}
+						/>
 
 						{#if flowStore.val.value.concurrent_limit}
-							<div class="flex flex-col gap-4">
+							<div class="flex flex-col gap-6 mt-6" transition:slide={{ duration: 120 }}>
 								<Label label="Max number of executions within the time window">
 									<div class="flex flex-row gap-2 max-w-sm">
 										<input
@@ -456,10 +444,12 @@
 									</div>
 								</Label>
 								<Label label="Time window in seconds">
-									<SecondsInput
-										disabled={!$enterpriseLicense}
-										bind:seconds={flowStore.val.value.concurrency_time_window_s}
-									/>
+									<div class="-mt-5">
+										<SecondsInput
+											disabled={!$enterpriseLicense}
+											bind:seconds={flowStore.val.value.concurrency_time_window_s}
+										/>
+									</div>
 								</Label>
 								<Label label="Custom concurrency key (optional)">
 									{#snippet header()}
@@ -485,8 +475,7 @@
 
 				<!-- Priority Section -->
 				<Toggle
-					textClass="font-normal text-sm"
-					color="nord"
+					textClass="font-medium"
 					size="xs"
 					disabled={!$enterpriseLicense || isCloudHosted()}
 					checked={flowStore.val.value.priority !== undefined && flowStore.val.value.priority > 0}
@@ -504,12 +493,15 @@
 						}`,
 						rightDocumentationLink: 'https://www.windmill.dev/docs/flows/priority'
 					}}
-					class="py-1 relative"
 				>
 					{#snippet right()}
 						<input
 							type="number"
-							class="!w-16 text-xs ml-4 absolute left-52"
+							class={twMerge(
+								inputBaseClass,
+								inputBorderClass(),
+								'!w-16 text-xs ml-4 absolute left-52'
+							)}
 							disabled={flowStore.val.value.priority === undefined}
 							bind:value={flowStore.val.value.priority}
 							onfocus={bubble('focus')}
@@ -533,33 +525,29 @@
 				</Toggle>
 
 				<div>
-					<div class="flex flex-row items-center gap-2">
-						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
-							size="xs"
-							disabled={!$enterpriseLicense || isCloudHosted()}
-							checked={Boolean(flowStore.val.dedicated_worker)}
-							on:change={() => {
-								if (flowStore.val.dedicated_worker) {
-									flowStore.val.dedicated_worker = undefined
-								} else {
-									flowStore.val.dedicated_worker = true
-								}
-							}}
-							options={{
-								right: 'Flow is run on dedicated workers',
-								rightTooltip: 'When enabled, the flow will be executed on a dedicated worker.',
-								rightDocumentationLink:
-									'https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs'
-							}}
-							class="py-1"
-							eeOnly={true}
-						/>
-					</div>
+					<Toggle
+						textClass="font-medium"
+						size="xs"
+						disabled={!$enterpriseLicense || isCloudHosted()}
+						checked={Boolean(flowStore.val.dedicated_worker)}
+						on:change={() => {
+							if (flowStore.val.dedicated_worker) {
+								flowStore.val.dedicated_worker = undefined
+							} else {
+								flowStore.val.dedicated_worker = true
+							}
+						}}
+						options={{
+							right: 'Flow is run on dedicated workers',
+							rightTooltip: 'When enabled, the flow will be executed on a dedicated worker.',
+							rightDocumentationLink:
+								'https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs'
+						}}
+						eeOnly={true}
+					/>
 
 					{#if flowStore.val.dedicated_worker}
-						<div>
+						<div class="mt-2">
 							<Alert type="info" title="Require dedicated workers">
 								One worker in a worker group needs to be configured with dedicated worker set to: <pre
 									>{$workspaceStore}:flow/{$pathStore}</pre
@@ -568,6 +556,7 @@
 						</div>
 					{/if}
 				</div>
+				<div></div>
 			</Section>
 		</div>
 	</FlowCard>
diff --git a/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte b/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
index edcfdca5f1..81bf6c4c11 100644
--- a/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
@@ -109,7 +109,7 @@
 						<Button
 							on:click={() => (previewOpen = true)}
 							startIcon={{ icon: Play }}
-							color="dark"
+							variant="accent"
 							size="sm">Test an iteration</Button
 						>
 					</div>
@@ -119,12 +119,12 @@
 		<Pane size={40} minSize={20} class="flex flex-col flex-1">
 			<TabsV2 bind:selected>
 				<!-- <Tab value="retries">Retries</Tab> -->
-				<Tab value="early-stop">Early Stop/Break</Tab>
-				<Tab value="skip">Skip</Tab>
-				<Tab value="suspend">Suspend/Approval/Prompt</Tab>
-				<Tab value="sleep">Sleep</Tab>
-				<Tab value="mock">Mock</Tab>
-				<Tab value="lifetime">Lifetime</Tab>
+				<Tab value="early-stop" label="Early Stop/Break" />
+				<Tab value="skip" label="Skip" />
+				<Tab value="suspend" label="Suspend/Approval/Prompt" />
+				<Tab value="sleep" label="Sleep" />
+				<Tab value="mock" label="Mock" />
+				<Tab value="lifetime" label="Lifetime" />
 
 				{#snippet content()}
 					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
diff --git a/frontend/src/lib/components/flows/content/GenAiQuick.svelte b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
index ef59d9d6d7..39ae79d0cf 100644
--- a/frontend/src/lib/components/flows/content/GenAiQuick.svelte
+++ b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
@@ -22,7 +22,7 @@
 		: ''}"
 	on:click
 >
-	<Wand2 size={14} class="text-violet-800 dark:text-violet-400" />
+	<Wand2 size={14} class="text-ai" />
 
 	<span class="grow truncate text-left text-2xs text-primary font-normal">
 		Generate "{funcDesc}" in {lang}
diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
index 1c61d4ff27..99ad0c4a9a 100644
--- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
@@ -151,8 +151,7 @@
 		<span>Are you sure you want to discard the changes you have made? </span>
 		<Button
 			wrapperClasses="self-start"
-			color="light"
-			variant="border"
+			variant="default"
 			size="xs"
 			on:click={() => {
 				if (!savedScript || !script) {
@@ -223,7 +222,7 @@
 		{:else}
 			<div
 				out:fade={{ duration: 200 }}
-				class="absolute inset-0 center-center flex-col bg-surface text-tertiary border"
+				class="absolute inset-0 center-center flex-col bg-surface text-primary border"
 			>
 				<Loader2 class="animate-spin" size={16} />
 				<span class="text-xs mt-1">Loading</span>
@@ -232,8 +231,7 @@
 		{#snippet actions()}
 			<Button
 				disabled={!savedScript || !script}
-				color="light"
-				variant="border"
+				variant="default"
 				on:click={async () => {
 					if (!savedScript || !script) {
 						return
diff --git a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
index b8f883c561..209f4d059d 100644
--- a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
@@ -13,8 +13,7 @@
 
 <Button
 	size="xs"
-	variant="border"
-	color="light"
+	variant="default"
 	on:click={() => {
 		drawer.openDrawer()
 	}}
@@ -35,9 +34,9 @@
 				prompt to the operator when running the flow. Additionally, adding the cancel url will also
 				render a cancel button, providing the operator with an option to cancel the step. e.g:
 				<Tabs selected="bun" class="pt-4">
-					<Tab value="bun">TypeScript (Bun)</Tab>
-					<Tab value="deno">TypeScript (Deno)</Tab>
-					<Tab value="python">Python</Tab>
+					<Tab value="bun" label="TypeScript (Bun)" />
+					<Tab value="deno" label="TypeScript (Deno)" />
+					<Tab value="python" label="Python" />
 
 					{#snippet content()}
 						<TabContent value="deno" class="p-2">
diff --git a/frontend/src/lib/components/flows/conversations/FlowConversationsSidebar.svelte b/frontend/src/lib/components/flows/conversations/FlowConversationsSidebar.svelte
index 9a7757af0b..02bd5dbc1b 100644
--- a/frontend/src/lib/components/flows/conversations/FlowConversationsSidebar.svelte
+++ b/frontend/src/lib/components/flows/conversations/FlowConversationsSidebar.svelte
@@ -240,7 +240,7 @@
 	{#if isExpanded}
 		<!-- Footer -->
 		<div class="flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700">
-			<p class="text-xs text-tertiary">
+			<p class="text-xs text-primary">
 				{conversations.length} conversation{conversations.length !== 1 ? 's' : ''}
 			</p>
 		</div>
diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
index ee33680c4e..db680eeb96 100644
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -129,8 +129,8 @@
 </script>
 
 <Button
-	color="dark"
-	size="xs"
+	variant="accent-secondary"
+	unifiedSize="md"
 	on:click={() => {
 		previewMode = 'whole'
 		previewOpen = !previewOpen
diff --git a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
index 38a2431643..8e51fad250 100644
--- a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
+++ b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
@@ -55,7 +55,7 @@
 			refreshStateStore(flowStore)
 			sendUserToast('Changes applied')
 		} catch (e) {
-			sendUserToast('Error parsing yaml: ' + e), true
+			;(sendUserToast('Error parsing yaml: ' + e), true)
 		}
 	}
 
@@ -65,8 +65,8 @@
 <Drawer on:open={reload} bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
 		{#snippet actions()}
-			<Button color="dark" size="sm" on:click={reload}>Reset code</Button>
-			<Button color="dark" size="sm" on:click={apply}>Apply changes</Button>
+			<Button variant="accent" size="sm" on:click={reload}>Reset code</Button>
+			<Button variant="accent" size="sm" on:click={apply}>Apply changes</Button>
 		{/snippet}
 
 		{#if flowStore.val}
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index eca2a9bc91..ec50d09d62 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import type { FlowEditorContext } from '../types'
 	import { createEventDispatcher, getContext } from 'svelte'
-	import { classNames } from '$lib/utils'
 	import { Bug, X } from 'lucide-svelte'
-	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
+	import InsertModulePopover from '$lib/components/flows/map/InsertModulePopover.svelte'
 	import { insertNewFailureModule } from '$lib/components/flows/flowStateUtils.svelte'
 	import type { RawScript, ScriptLang } from '$lib/gen'
 	import { twMerge } from 'tailwind-merge'
@@ -11,14 +10,18 @@
 	import ModuleAcceptReject, {
 		getAiModuleAction
 	} from '$lib/components/copilot/chat/flow/ModuleAcceptReject.svelte'
-	import { aiModuleActionToBgColor } from '$lib/components/copilot/chat/flow/utils'
+	import {
+		aiModuleActionToBgColor,
+		aiModuleActionToBorderColor,
+		aiModuleActionToTextColor
+	} from '$lib/components/copilot/chat/flow/utils'
+	import Button from '$lib/components/common/button/Button.svelte'
+
 	let {
-		small,
-		clazz,
-		disableAi
+		disableAi,
+		small
 	}: {
 		small: boolean
-		clazz: string
 		disableAi?: boolean
 	} = $props()
 
@@ -57,22 +60,18 @@
 {#if flowStore.val?.value?.failure_module}
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		id="flow-editor-error-handler"
-		class={classNames(
-			'z-10',
-			'relative cursor-pointer border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 gap-2 bg-surface text-sm flex items-center flex-row',
-			$selectedId?.includes('failure')
-				? 'outline outline-offset-1 outline-2 outline-slate-900 dark:outline-slate-900/0 dark:bg-surface-secondary dark:border-gray-400'
-				: '',
-			aiModuleActionToBgColor(action)
+	<Button
+		variant="default"
+		unifiedSize="sm"
+		wrapperClasses={twMerge('min-w-36 h-7', small ? 'max-w-52' : 'max-w-64')}
+		btnClasses={twMerge(
+			aiModuleActionToBgColor(action),
+			aiModuleActionToBorderColor(action),
+			aiModuleActionToTextColor(action)
 		)}
-		style="min-width: {flowStore.val?.value?.failure_module
-			? small
-				? '200px'
-				: '230px'
-			: ''}; max-width: 275px;"
-		onclick={() => {
+		id="flow-editor-error-handler"
+		selected={$selectedId?.includes('failure')}
+		onClick={() => {
 			if (flowStore.val?.value?.failure_module) {
 				$selectedId = 'failure'
 			}
@@ -80,9 +79,7 @@
 	>
 		<ModuleAcceptReject id="failure" {action} placement="bottom" />
 
-		<div class="flex items-center grow-0 min-w-0 gap-2">
-			<Bug size={16} color={'#3b82f6'} />
-		</div>
+		<Bug size={14} class="shrink-0" />
 
 		<div class="truncate grow min-w-0 text-center text-xs">
 			{flowStore.val.value.failure_module?.summary ||
@@ -95,12 +92,7 @@
 			<button
 				title="Delete failure script"
 				type="button"
-				class={twMerge(
-					'w-5 h-4 flex items-center justify-center grow-0 shrink-0',
-					'outline-[1px] outline dark:outline-gray-500 outline-gray-300',
-					'text-secondary',
-					'bg-surface focus:outline-none hover:bg-surface-hover rounded '
-				)}
+				class="ml-1"
 				onclick={() => {
 					flowStore.val.value.failure_module = undefined
 					$selectedId = 'settings-metadata'
@@ -109,12 +101,11 @@
 				<X size={12} />
 			</button>
 		{/if}
-	</div>
+	</Button>
 {:else}
 	<!-- Index 0 is used by the tutorial to identify the first "Add step" -->
-	<InsertModuleButton
+	<InsertModulePopover
 		{disableAi}
-		index="error-handler-button"
 		placement={'bottom-center'}
 		on:new={(e) => {
 			insertFailureModule(e.detail.inlineScript)
@@ -123,6 +114,21 @@
 			insertFailureModule(undefined, e.detail)
 		}}
 		kind="failure"
-		clazz={twMerge(clazz, '!outline-none px-2 py-1.5')}
-	/>
+	>
+		{#snippet trigger({ toggleOpen })}
+			<Button
+				unifiedSize="sm"
+				wrapperClasses="min-w-36 h-7"
+				title={`Add failure module`}
+				variant="default"
+				id={`flow-editor-add-step-error-handler-button`}
+				onClick={() => toggleOpen()}
+			>
+				<div class="flex items-center gap-1">
+					<Bug size={14} />
+					<span class="text-xs w-20">Error Handler</span>
+				</div>
+			</Button>
+		{/snippet}
+	</InsertModulePopover>
 {/if}
diff --git a/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte b/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte
index e7faec4898..c9a2b62bcb 100644
--- a/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte
+++ b/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte
@@ -5,6 +5,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import Popover from '$lib/components/Popover.svelte'
 	import type { Job } from '$lib/gen'
+	import { NODE } from '$lib/components/graph'
 
 	interface Props {
 		isRunning?: boolean
@@ -41,11 +42,13 @@
 {#if !isRunning}
 	<Button
 		size="sm"
-		color="dark"
+		variant="accent-secondary"
 		btnClasses={twMerge(
-			'relative p-1.5 h-[36px] transition-all duration-200',
-			wide ? 'w-[120px]' : 'w-[44.5px]'
+			'relative p-1.5 transition-all duration-200 drop-shadow-base',
+			wide ? 'w-[120px]' : 'w-[44.5px]',
+			'max-[1760px]:mt-[1.5px]' // Magic number comes from app.css (when :root fontSize becomes bigger)
 		)}
+		style="height: {NODE.height}px;"
 		on:click={() => {
 			onTestFlow?.()
 		}}
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index bebe9237f0..e172893196 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -41,7 +41,8 @@
 	import ModuleTest from '$lib/components/ModuleTest.svelte'
 	import { getStepHistoryLoaderContext } from '$lib/components/stepHistoryLoader.svelte'
 	import { aiModuleActionToBgColor } from '$lib/components/copilot/chat/flow/utils'
-	import type { FlowStatusModule, Job } from '$lib/gen'
+	import type { Job } from '$lib/gen'
+	import { getNodeColorClasses, type FlowNodeState } from '$lib/components/graph'
 
 	interface Props {
 		selected?: boolean
@@ -63,8 +64,7 @@
 		label: string
 		path?: string
 		modType?: string | undefined
-		bgColor?: string
-		bgHoverColor?: string
+		nodeState?: FlowNodeState
 		concurrency?: boolean
 		retries?: number | undefined
 		warningMessage?: string | undefined
@@ -80,9 +80,6 @@
 		flowJob?: Job | undefined
 		isOwner?: boolean
 		enableTestRun?: boolean
-		type?: FlowStatusModule['type'] | undefined
-		darkMode?: boolean
-		skipped?: boolean
 	}
 
 	let {
@@ -100,8 +97,7 @@
 		label,
 		path = '',
 		modType = undefined,
-		bgColor = '',
-		bgHoverColor = '',
+		nodeState,
 		concurrency = false,
 		retries = undefined,
 		warningMessage = undefined,
@@ -115,12 +111,11 @@
 		onUpdateMock,
 		onEditInput,
 		flowJob,
-		enableTestRun = false,
-		type,
-		darkMode,
-		skipped
+		enableTestRun = false
 	}: Props = $props()
 
+	let colorClasses = $derived(getNodeColorClasses(nodeState, selected))
+
 	let pickableIds: Record<string, any> | undefined = $state(undefined)
 
 	const flowEditorContext = getContext<FlowEditorContext | undefined>('FlowEditorContext')
@@ -214,7 +209,7 @@
 				/>
 				<div class="mt-8">
 					<h3>Step Inputs Replacements</h3>
-					<div class="text-2xs text-tertiary pt-0.5">
+					<div class="text-2xs text-primary pt-0.5">
 						Replace all occurrences of `results.<span class="font-bold">{id}</span>` with{' '}
 						results.<span class="font-bold">{newId}</span> in the step inputs of all steps that depend
 						on it.
@@ -235,7 +230,7 @@
 								</div>
 							{/each}
 						{:else}
-							<div class="text-2xs text-tertiary"> No dependents </div>
+							<div class="text-2xs text-primary"> No dependents </div>
 						{/if}
 					</div>
 				</div>
@@ -265,12 +260,11 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class={classNames(
-			'w-full module flex rounded-sm cursor-pointer max-w-full',
-			deletable ? aiModuleActionToBgColor(action) : ''
+			'w-full module flex rounded-md cursor-pointer max-w-full drop-shadow-base',
+			deletable ? aiModuleActionToBgColor(action) : '',
+			colorClasses.bg
 		)}
-		style="width: 275px; height: 34px; background-color: {hover && bgHoverColor
-			? bgHoverColor
-			: bgColor};"
+		style="width: 275px; height: 34px;"
 		onmouseenter={() => (hover = true)}
 		onmouseleave={() => (hover = false)}
 		onpointerdown={stopPropagation(preventDefault(() => dispatch('pointerdown')))}
@@ -279,11 +273,8 @@
 			<ModuleAcceptReject {action} {id} />
 		{/if}
 		<div
-			class={classNames(
-				'absolute rounded-sm outline-offset-0 outline-slate-500 dark:outline-gray-400',
-				selected ? 'outline outline-2' : 'active:outline active:outline-2'
-			)}
-			style={`width: 275px; height: ${outputPickerVisible ? '51px' : '34px'};`}
+			class={classNames('absolute z-0 rounded-md outline-offset-0', colorClasses.outline)}
+			style={`width: 275px; height: 34px;`}
 		></div>
 		<div
 			class="absolute text-sm right-2 flex flex-row gap-1 z-10 transition-all duration-100"
@@ -412,6 +403,7 @@
 				{bold}
 				bind:editId
 				{hover}
+				{colorClasses}
 			>
 				{#snippet icon()}
 					{@render icon_render?.()}
@@ -430,9 +422,6 @@
 					bind:bottomBarOpen={outputPickerBarOpen}
 					{loopStatus}
 					{onEditInput}
-					{type}
-					{darkMode}
-					{skipped}
 				>
 					{#snippet children({ allowCopy, isConnecting, selectConnection })}
 						<OutputPickerInner
@@ -537,10 +526,9 @@
 					{#if !testIsLoading}
 						<Button
 							size="xs"
-							color="light"
 							title="Run"
-							variant="border"
-							btnClasses="px-1 py-1.5"
+							variant="default"
+							btnClasses="px-1 py-1.5 bg-surface"
 							on:click={() => {
 								outputPicker?.toggleOpen(true)
 								moduleTest?.loadArgsAndRunTest()
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte
index e75b281c91..b4b1b649e3 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItemViewer.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { preventDefault, stopPropagation } from 'svelte/legacy'
-
 	import Popover from '$lib/components/Popover.svelte'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
+	import type { FlowNodeColorClasses } from '$lib/components/graph'
 	import { Pencil } from 'lucide-svelte'
+	import { slide } from 'svelte/transition'
+	import { twMerge } from 'tailwind-merge'
 
 	let iconWidth: number = $state(0)
 	let idBadgeWidth: number | undefined = $state(undefined)
@@ -15,6 +16,7 @@
 		bold?: boolean
 		editId?: boolean
 		hover?: boolean
+		colorClasses?: FlowNodeColorClasses
 		icon?: import('svelte').Snippet
 		onclick?: () => void
 	}
@@ -27,6 +29,7 @@
 		bold = false,
 		editId = $bindable(false),
 		hover = false,
+		colorClasses,
 		icon,
 		onclick
 	}: Props = $props()
@@ -48,7 +51,7 @@
 		class="absolute left-1/2 transform -translate-x-1/2 center-center"
 		style="max-width: calc(100% - {marginLeft}px)"
 	>
-		<div class="text-center truncate {bold ? '!font-bold' : 'font-normal'}">
+		<div class="text-center {colorClasses?.text} truncate {bold ? '!font-bold' : 'font-normal'}">
 			{label}
 		</div>
 		{#snippet text()}
@@ -59,31 +62,36 @@
 		{/snippet}
 	</Popover>
 
-	<div class="flex items-center space-x-2 relative max-w-[25%]" bind:clientWidth={idBadgeWidth}>
+	<div class="flex items-center space-x-2 relative" bind:clientWidth={idBadgeWidth}>
 		{#if id && id !== 'preprocessor' && !id.startsWith('failure') && !id.startsWith('subflow:')}
 			<Badge
-				color="indigo"
-				wrapperClass="max-w-full"
-				baseClass="max-w-full truncate !px-1"
+				color="transparent"
+				class="border-none"
+				wrapperClass={twMerge(
+					'max-w-full rounded-md hover:opacity-60 transition-opacity',
+					colorClasses?.badge
+				)}
+				baseClass={twMerge('!px-1')}
 				title={id}
+				clickable
+				onclick={(e) => {
+					e?.preventDefault()
+					e?.stopPropagation()
+					editId = !editId
+					onclick?.()
+				}}
 			>
-				<span class="max-w-full text-2xs truncate">{id}</span></Badge
-			>
-			{#if deletable}
-				<button
-					class="absolute -left-[28px] z-10 h-[20px] rounded-l rounded-t rounded-s w-[20px] trash center-center text-secondary bg-surface duration-0 hover:bg-blue-400 {editId
-						? '!bg-blue-400'
-						: ''} hover:text-white
-hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
-					onclick={stopPropagation(
-						preventDefault((event) => {
-							editId = !editId
-							onclick?.()
-						})
-					)}
-					title="Edit Id"><Pencil size={12} /></button
-				>
-			{/if}
+				<span class="max-w-full text-2xs truncate flex items-center">
+					{#if editId || (hover && deletable)}
+						<span transition:slide={{ axis: 'x', duration: 100 }}>
+							<Pencil size={10} class="mr-1" />
+						</span>
+					{/if}
+					<span class="max-w-12 truncate">
+						{id}
+					</span>
+				</span>
+			</Badge>
 		{:else if id?.startsWith('subflow:')}
 			<Badge color="blue" wrapperClass="max-w-full" baseClass="!px-1" title={id}>
 				<span class="max-w-full text-2xs truncate">{id.substring('subflow:'.length)}</span></Badge
diff --git a/frontend/src/lib/components/flows/map/FlowStickyNode.svelte b/frontend/src/lib/components/flows/map/FlowStickyNode.svelte
index 118a4a17dd..ebb0ac193c 100644
--- a/frontend/src/lib/components/flows/map/FlowStickyNode.svelte
+++ b/frontend/src/lib/components/flows/map/FlowStickyNode.svelte
@@ -3,10 +3,10 @@
 	import { getContext } from 'svelte'
 	import { Badge } from '$lib/components/common'
 	import { DollarSign, Settings } from 'lucide-svelte'
-	import { twMerge } from 'tailwind-merge'
 	import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte'
 	import FlowAIButton from '$lib/components/copilot/chat/flow/FlowAIButton.svelte'
 	import Popover from '$lib/components/Popover.svelte'
+	import Button from '$lib/components/common/button/Button.svelte'
 
 	interface Props {
 		disableSettings?: boolean
@@ -29,59 +29,55 @@
 	}: Props = $props()
 
 	const { selectedId, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
-
-	const nodeClass =
-		'border w-fit rounded p-1 px-2 bg-surface text-sm cursor-pointer flex items-center h-[28px] hover:!bg-surface-secondary active:!bg-surface'
-	const nodeSelectedClass =
-		'outline outline-offset-1 outline-2 outline-slate-800 dark:bg-white/5 dark:outline-slate-400/60 dark:outline-gray-400'
 </script>
 
-<div class="flex flex-row gap-2 p-1 rounded shadow-md bg-surface">
+<div class="flex flex-row gap-2 h-8 p-1 rounded-md bg-surface">
 	{#if !disableSettings}
-		<button
-			onclick={() => ($selectedId = 'settings-metadata')}
-			class={twMerge(nodeClass, $selectedId?.startsWith('settings') ? nodeSelectedClass : '')}
+		<Button
+			unifiedSize="sm"
+			wrapperClasses="min-w-36"
+			startIcon={{ icon: Settings }}
+			selected={$selectedId?.startsWith('settings')}
+			variant="default"
 			title="Settings"
+			onClick={() => ($selectedId = 'settings')}
 		>
-			<Settings size={14} />
-			<span
-				class="font-bold flex flex-row justify-between w-fit gap-2 items-center truncate ml-1.5"
-			>
-				<span class="text-xs">Settings</span>
-				<span class="h-[18px] flex items-center">
-					{#if flowStore.val.value.same_worker}
-						<Badge color="blue" baseClass="truncate">./shared</Badge>
-					{/if}
-				</span>
-			</span>
-		</button>
+			Settings
+			{#if flowStore.val.value.same_worker}
+				<Badge color="blue" wrapperClass="max-h-[18px]">./shared</Badge>
+			{/if}
+		</Button>
 	{/if}
+	<Popover>
+		<FlowErrorHandlerItem {disableAi} small={smallErrorHandler} on:generateStep />
+		{#snippet text()}
+			Error Handler
+		{/snippet}
+	</Popover>
 	{#if !disableStaticInputs}
 		<Popover>
-			<button
-				onclick={() => ($selectedId = 'constants')}
-				class={twMerge(nodeClass, $selectedId == 'constants' ? nodeSelectedClass : '')}
-			>
-				<DollarSign size={14} />
-			</button>
+			<Button
+				wrapperClasses="h-full"
+				unifiedSize="sm"
+				startIcon={{ icon: DollarSign }}
+				selected={$selectedId === 'constants'}
+				variant="default"
+				title="Static Inputs"
+				iconOnly
+				onClick={() => ($selectedId = 'constants')}
+			/>
 			{#snippet text()}
 				Static Inputs
 			{/snippet}
 		</Popover>
 	{/if}
-	<Popover>
-		<FlowErrorHandlerItem {disableAi} small={smallErrorHandler} on:generateStep clazz={nodeClass} />
-		{#snippet text()}
-			Error Handler
-		{/snippet}
-	</Popover>
 	{#if showFlowAiButton}
 		<Popover>
 			<FlowAIButton
 				togglePanel={() => {
 					toggleAiChat?.()
 				}}
-				opened={aiChatOpen}
+				selected={aiChatOpen}
 			/>
 			{#snippet text()}
 				Flow AI Chat
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index d54444564e..8518fb6efc 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -1,106 +1,23 @@
 <script lang="ts">
-	import { Bug, Cross } from 'lucide-svelte'
-	import InsertModuleInner from './InsertModuleInner.svelte'
-	import { twMerge } from 'tailwind-merge'
-	import type { ComputeConfig } from 'svelte-floating-ui'
+	import type { IconType } from '$lib/utils'
+	import { Plus } from 'lucide-svelte'
 
-	import PopupV2 from '$lib/components/common/popup/PopupV2.svelte'
-	import { flip, offset } from 'svelte-floating-ui/dom'
-	import { SchedulePollIcon } from '$lib/components/icons'
-
-	// import type { Writable } from 'svelte/store'
-
-	type Alignment = 'start' | 'end' | 'center'
-	type Side = 'top' | 'bottom'
-	type Placement = `${Side}-${Alignment}`
-
-	interface Props {
-		index?: number | 'error-handler-button'
-		funcDesc?: string
-		kind?: 'script' | 'trigger' | 'preprocessor' | 'failure'
-		iconSize?: number
-		clazz?: string
-		placement?: Placement
-		disableAi?: boolean
+	type Props = {
+		onPress: () => void
+		Icon?: IconType
+		title?: string
+		id?: string
 	}
 
-	let {
-		index = 0,
-		funcDesc = $bindable(''),
-		kind = 'script',
-		iconSize = 12,
-		clazz = '',
-		placement = 'bottom-center',
-		disableAi = false
-	}: Props = $props()
-
-	let floatingConfig: ComputeConfig = {
-		strategy: 'fixed',
-		// @ts-ignore
-		placement,
-		middleware: [offset(8), flip()],
-		autoUpdate: true
-	}
-
-	let open = $state(false)
-
-	$effect(() => {
-		!open && (funcDesc = '')
-	})
+	let { onPress, Icon = Plus, title, id }: Props = $props()
 </script>
 
-<!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
-
-<!-- {floatingConfig}
-floatingClasses="mt-2"
-containerClasses="border rounded-lg shadow-lg  bg-surface"
-noTransition
-shouldUsePortal={true} -->
-
-<PopupV2 {floatingConfig} bind:open target="#flow-editor">
-	{#snippet button()}
-		<button
-			title={`Add ${
-				kind === 'failure'
-					? ' failure module '
-					: kind === 'preprocessor'
-						? 'preprocessor step'
-						: kind === 'trigger'
-							? 'trigger'
-							: 'step'
-			}`}
-			id={`flow-editor-add-step-${index}`}
-			type="button"
-			class={twMerge(
-				'w-[17.5px] h-[17.5px] flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded',
-				clazz
-			)}
-			onpointerdown={() => {
-				open = !open
-			}}
-		>
-			{#if kind === 'trigger'}
-				<SchedulePollIcon size={14} />
-			{:else if kind === 'failure'}
-				<div class="flex items-center gap-1">
-					<Bug size={14} />
-					<span class="text-xs w-20">Error Handler</span>
-				</div>
-			{:else}
-				<Cross size={iconSize} />
-			{/if}
-		</button>
-	{/snippet}
-	{#snippet children({ close })}
-		<InsertModuleInner
-			on:close={() => close()}
-			on:insert
-			on:new
-			on:pickFlow
-			on:pickScript
-			allowTrigger={index == 0}
-			{kind}
-			{disableAi}
-		/>
-	{/snippet}
-</PopupV2>
+<button class="center-center p-2 group" onpointerdown={onPress}>
+	<div
+		{title}
+		{id}
+		class={'w-[20px] h-[20px] flex items-center justify-center text-primary border border-border-normal bg-surface-secondary group-hover:bg-surface-accent-primary group-hover:text-white group-hover:border-none transition-all rounded-md'}
+	>
+		<Icon size={12} />
+	</div>
+</button>
diff --git a/frontend/src/lib/components/flows/map/InsertModulePopover.svelte b/frontend/src/lib/components/flows/map/InsertModulePopover.svelte
new file mode 100644
index 0000000000..2fdcfb05ac
--- /dev/null
+++ b/frontend/src/lib/components/flows/map/InsertModulePopover.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import InsertModuleInner from './InsertModuleInner.svelte'
+	import type { ComputeConfig } from 'svelte-floating-ui'
+
+	import PopupV2 from '$lib/components/common/popup/PopupV2.svelte'
+	import { flip, offset } from 'svelte-floating-ui/dom'
+
+	// import type { Writable } from 'svelte/store'
+
+	type Alignment = 'start' | 'end' | 'center'
+	type Side = 'top' | 'bottom'
+	type Placement = `${Side}-${Alignment}`
+
+	interface Props {
+		allowTrigger?: boolean
+		funcDesc?: string
+		kind?: 'script' | 'trigger' | 'preprocessor' | 'failure'
+		placement?: Placement
+		disableAi?: boolean
+		trigger: import('svelte').Snippet<[{ toggleOpen: () => void }]>
+	}
+
+	let {
+		funcDesc = $bindable(''),
+		kind = 'script',
+		placement = 'bottom-center',
+		disableAi = false,
+		trigger,
+		allowTrigger = false
+	}: Props = $props()
+
+	let floatingConfig: ComputeConfig = {
+		strategy: 'fixed',
+		// @ts-ignore
+		placement,
+		middleware: [offset(8), flip()],
+		autoUpdate: true
+	}
+
+	let open = $state(false)
+
+	$effect(() => {
+		!open && (funcDesc = '')
+	})
+</script>
+
+<PopupV2 {floatingConfig} bind:open target="#flow-editor">
+	{#snippet button()}
+		{@render trigger?.({ toggleOpen: () => (open = !open) })}
+	{/snippet}
+	{#snippet children({ close })}
+		<InsertModuleInner
+			on:close={() => close()}
+			on:insert
+			on:new
+			on:pickFlow
+			on:pickScript
+			{allowTrigger}
+			{kind}
+			{disableAi}
+		/>
+	{/snippet}
+</PopupV2>
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 6f2070a8ba..c03650528b 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import type { FlowModule, FlowStatusModule, Job } from '$lib/gen'
+	import type { FlowModule, Job } from '$lib/gen'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
@@ -15,14 +15,14 @@
 	import { checkIfParentLoop } from '$lib/components/flows/utils'
 	import type { FlowEditorContext } from '$lib/components/flows/types'
 	import { twMerge } from 'tailwind-merge'
+	import type { FlowNodeState } from '$lib/components/graph'
 
 	interface Props {
 		moduleId: string
 		mod: FlowModule
 		insertable: boolean
 		annotation?: string | undefined
-		bgColor?: string
-		bgHoverColor?: string
+		nodeState?: FlowNodeState
 		moving?: string | undefined
 		duration_ms?: number | undefined
 		retries?: number | undefined
@@ -45,9 +45,6 @@
 		onEditInput?: (moduleId: string, key: string) => void
 		flowJob?: Job | undefined
 		isOwner?: boolean
-		type?: FlowStatusModule['type'] | undefined
-		darkMode?: boolean
-		skipped?: boolean
 	}
 
 	let {
@@ -56,8 +53,7 @@
 		mod = $bindable(),
 		insertable,
 		annotation = undefined,
-		bgColor = '',
-		bgHoverColor = '',
+		nodeState,
 		moving = undefined,
 		duration_ms = undefined,
 		retries = undefined,
@@ -68,10 +64,7 @@
 		onUpdateMock,
 		onEditInput,
 		flowJob,
-		isOwner = false,
-		type,
-		darkMode,
-		skipped
+		isOwner = false
 	}: Props = $props()
 
 	const { selectedId } = getContext<{
@@ -108,16 +101,16 @@
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
-				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border">
-					Cancel move
-				</Button>
+				<Button variant="accent" on:click={() => dispatch('move')} size="xs" destructive
+					>Cancel move</Button
+				>
 			</div>
 		{/if}
 
 		{#if duration_ms}
 			<div
 				class={twMerge(
-					'absolute z-10 right-0 -top-4 center-center text-tertiary text-2xs',
+					'absolute z-10 right-0 -top-4 center-center text-primary text-2xs',
 					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-10' : ''
 				)}
 			>
@@ -127,7 +120,7 @@
 		{#if annotation && annotation != ''}
 			<div
 				class={twMerge(
-					'absolute z-10 left-0 -top-5 center-center text-tertiary',
+					'absolute z-10 left-0 -top-5 center-center text-primary',
 					editMode ? '-top-4 text-gray-400 dark:text-gray-500 text-xs font-normal' : ''
 				)}
 			>
@@ -168,8 +161,7 @@
 						onUpdateMock?.({ id: mod.id, mock })
 					}}
 					{...itemProps}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					warningMessage={mod?.value?.type === 'forloopflow' &&
 					mod?.value?.iterator?.type === 'javascript' &&
 					mod?.value?.iterator?.expr === ''
@@ -178,8 +170,6 @@
 					alwaysShowOutputPicker={!mod.id.startsWith('subflow:')}
 					loopStatus={{ type: 'self', flow: mod.value.type }}
 					{onTestUpTo}
-					{type}
-					{darkMode}
 				>
 					{#snippet icon()}
 						<FlowModuleIcon module={mod} />
@@ -196,11 +186,8 @@
 					{...itemProps}
 					id={mod.id}
 					label={mod.summary || 'Run one branch'}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					{onTestUpTo}
-					{type}
-					{darkMode}
 				>
 					{#snippet icon()}
 						<FlowModuleIcon module={mod} />
@@ -217,11 +204,8 @@
 					id={mod.id}
 					{...itemProps}
 					label={mod.summary || `Run all branches${mod.value.parallel ? ' (parallel)' : ''}`}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					{onTestUpTo}
-					{type}
-					{darkMode}
 				>
 					{#snippet icon()}
 						<FlowModuleIcon module={mod} />
@@ -245,8 +229,7 @@
 					id={mod.id}
 					{...itemProps}
 					modType={mod.value.type}
-					{bgColor}
-					{bgHoverColor}
+					{nodeState}
 					label={mod.summary ||
 						(mod.value.type === 'aiagent' ? 'AI Agent' : undefined) ||
 						(mod.id === 'preprocessor'
@@ -268,9 +251,6 @@
 					{flowJob}
 					{isOwner}
 					enableTestRun
-					{type}
-					{darkMode}
-					{skipped}
 				>
 					{#snippet icon()}
 						{@const size =
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 239732bb2d..3c6cb8d236 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -13,16 +13,14 @@
 	import { aiModuleActionToBgColor } from '$lib/components/copilot/chat/flow/utils'
 	import FlowGraphPreviewButton from './FlowGraphPreviewButton.svelte'
 	import type { Job } from '$lib/gen'
+	import { getNodeColorClasses } from '$lib/components/graph'
 
 	interface Props {
 		label?: string | undefined
-		bgColor?: string
-		bgHoverColor?: string
 		selected: boolean
 		selectable: boolean
 		id?: string | undefined
 		center?: boolean
-		borderColor?: string | undefined
 		hideId?: boolean
 		preLabel?: string | undefined
 		inputJson?: Object | undefined
@@ -41,21 +39,16 @@
 		individualStepTests?: boolean
 		nodeKind?: 'input' | 'result'
 		job?: Job
-		type?: string
 		showJobStatus?: boolean
-		darkMode?: boolean
 		flowHasChanged?: boolean
 	}
 
 	let {
 		label = undefined,
-		bgColor = '',
-		bgHoverColor = '',
 		selected,
 		selectable,
 		id = undefined,
 		center = true,
-		borderColor = undefined,
 		hideId = false,
 		preLabel = undefined,
 		inputJson = undefined,
@@ -75,7 +68,6 @@
 		individualStepTests = false,
 		job,
 		showJobStatus = false,
-		darkMode = false,
 		flowHasChanged = false
 	}: Props = $props()
 
@@ -97,17 +89,16 @@
 					: undefined
 			: undefined
 	)
+	let colorClasses = $derived(getNodeColorClasses(outputType ?? '_VirtualItem', selected))
 </script>
 
 <VirtualItemWrapper
 	{label}
-	{bgColor}
-	{bgHoverColor}
-	{selected}
 	{selectable}
 	{id}
 	outputPickerVisible={outputPickerVisible ?? false}
 	className={editMode ? aiModuleActionToBgColor(action) : ''}
+	{colorClasses}
 	on:select
 >
 	{#snippet children({ hover })}
@@ -116,17 +107,16 @@
 		{/if}
 		<div class="flex flex-col w-full">
 			<div
-				style={borderColor ? `border-color: ${borderColor};` : 'border: 0'}
-				class="flex flex-row justify-between {center
+				class="flex flex-row justify-between {colorClasses.outline} {center
 					? 'items-center'
-					: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
+					: 'items-baseline'} w-full overflow-hidden rounded-md p-2 text-2xs module text-primary"
 			>
 				{#if icon}
 					{@render icon?.()}
 				{/if}
 				<div class="flex flex-col flex-grow shrink-0 max-w-full min-w-0">
 					{#if label}
-						<div class="truncate text-center">{label}</div>
+						<div class="truncate text-center {colorClasses.text}">{label}</div>
 					{/if}
 					{#if preLabel}
 						<div class="truncate text-2xs text-center"><pre>{preLabel}</pre></div>
@@ -147,8 +137,6 @@
 					id={id ?? ''}
 					isConnectingCandidate={nodeKind !== 'result'}
 					variant="virtual"
-					type={outputType}
-					{darkMode}
 				>
 					{#snippet children({ allowCopy, isConnecting, selectConnection })}
 						<OutputPickerInner
diff --git a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
index bbbb4e4536..798116b47d 100644
--- a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { NODE, type FlowNodeColorClasses } from '$lib/components/graph'
 	import type { FlowModule } from '$lib/gen'
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
@@ -7,29 +8,24 @@
 	interface Props {
 		label: string | undefined
 		selectable: boolean
-		selected: boolean
 		id: string | undefined
 		onTop?: boolean
-		bgColor: string
-		bgHoverColor?: string
 		children?: import('svelte').Snippet<[any]>
 		outputPickerVisible?: boolean
 		className?: string
 		previewButton?: import('svelte').Snippet
+		colorClasses: FlowNodeColorClasses
 	}
 
 	let {
 		label,
 		selectable,
-		selected,
 		id,
 		onTop = false,
-		bgColor,
-		bgHoverColor = '',
 		children,
-		outputPickerVisible = false,
 		className,
-		previewButton
+		previewButton,
+		colorClasses
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{
@@ -49,10 +45,13 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class={classNames('w-full flex relative rounded-sm', onTop ? 'z-[901]' : '', className)}
-		style="width: 275px; max-height: 34px; background-color: {hover && bgHoverColor && selectable
-			? bgHoverColor
-			: bgColor};"
+		class={classNames(
+			'w-full flex relative rounded-md drop-shadow-base',
+			colorClasses.bg,
+			onTop ? 'z-[901]' : '',
+			className
+		)}
+		style="width: {NODE.width}px; height: {NODE.height}px;"
 		onpointerdown={() => {
 			if (selectable) {
 				dispatch('select', id || label || '')
@@ -67,15 +66,7 @@
 		title={label ? label + ' ' : ''}
 		id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}
 	>
-		<div
-			class={twMerge(
-				'absolute  outline-gray-600 dark:outline-gray-400 rounded-sm',
-				selected ? 'outline outline-2' : '',
-				selectable ? 'cursor-pointer active:outline active:outline-2' : ''
-			)}
-			style={`width: 275px; height: ${outputPickerVisible ? '50px' : '34px'};`}
-		>
-		</div>
+		<div class={twMerge('absolute rounded-md inset-0', selectable ? 'cursor-pointer' : '')}> </div>
 		{@render children?.({ hover })}
 	</div>
 
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
index af80c21096..ba8332aa72 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
@@ -23,8 +23,7 @@
 		on:click
 		size="sm"
 		spacingSize="md"
-		variant="border"
-		color="light"
+		variant="default"
 		disabled={disabled || (enterpriseLangs.includes(lang || '') && !$enterpriseLicense)}
 		{id}
 	>
diff --git a/frontend/src/lib/components/flows/pickers/PickHubApp.svelte b/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
index 44b6c9ca7d..7f534a924a 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
@@ -1,25 +1,32 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte'
-	import { Badge, Skeleton } from '$lib/components/common'
+	import { Badge, ButtonType, Skeleton } from '$lib/components/common'
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
 	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
 	import { loadHubApps } from '$lib/hub'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
-	export let filter = ''
-	export let syncQuery = false
+	interface Props {
+		filter?: string
+		syncQuery?: boolean
+		children?: import('svelte').Snippet
+		size?: ButtonType.UnifiedSize
+	}
+
+	let { filter = $bindable(''), syncQuery = false, children, size = 'md' }: Props = $props()
 
 	type Item = { apps: string[]; summary: string; path: string }
-	let hubApps: any[] | undefined = undefined
-	let filteredItems: (Item & { marked?: string })[] = []
-	let appFilter: string | undefined = undefined
+	let hubApps: any[] | undefined = $state(undefined)
+	let filteredItems: (Item & { marked?: string })[] = $state([])
+	let appFilter: string | undefined = $state(undefined)
 
-	$: prefilteredItems = appFilter
-		? (hubApps ?? []).filter((i) => i.apps.includes(appFilter))
-		: hubApps ?? []
+	const prefilteredItems = $derived(
+		appFilter ? (hubApps ?? []).filter((i: Item) => i.apps.includes(appFilter!)) : (hubApps ?? [])
+	)
 
-	$: apps = Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort()
+	const apps = $derived(Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort())
 
 	const dispatch = createEventDispatcher()
 
@@ -34,9 +41,16 @@
 	bind:filteredItems
 	f={(x) => x.summary + ' (' + x.apps.join(', ') + ')'}
 />
-<div class="w-full flex mt-1 items-center gap-2">
-	<slot />
-	<input type="text" placeholder="Search Hub Apps" bind:value={filter} class="text-2xl grow" />
+<div class="w-full flex items-center gap-2">
+	{@render children?.()}
+	<TextInput
+		inputProps={{
+			placeholder: 'Search Hub Apps'
+		}}
+		bind:value={filter}
+		class="grow !pr-9"
+		{size}
+	/>
 </div>
 <ListFilters {syncQuery} filters={apps} bind:selectedFilter={appFilter} resourceType />
 
@@ -44,18 +58,18 @@
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y border rounded-md">
+		<ul class="divide-y border rounded-md bg-surface-tertiary">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
-						on:click={() => dispatch('pick', item)}
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover transition-all items-center"
+						onclick={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="app" />
 
-							<div class="w-full text-left font-normal">
-								<div class="text-primary flex-wrap text-md font-semibold">
+							<div class="w-full text-left">
+								<div class="text-emphasis flex-wrap text-xs font-semibold">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
@@ -75,7 +89,6 @@
 		</ul>
 	{/if}
 {:else}
-	<div class="my-2"></div>
 	{#each Array(10).fill(0) as _}
 		<Skeleton layout={[[4], 0.5]} />
 	{/each}
diff --git a/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
index bdce359e01..2ab12aea36 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
@@ -1,25 +1,32 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte'
-	import { Badge, Skeleton } from '$lib/components/common'
+	import { Badge, ButtonType, Skeleton } from '$lib/components/common'
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
 	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
 	import { loadHubFlows } from '$lib/hub'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
-	export let filter = ''
-	export let syncQuery = false
+	interface Props {
+		filter?: string
+		syncQuery?: boolean
+		children?: import('svelte').Snippet
+		size?: ButtonType.UnifiedSize
+	}
+
+	let { filter = $bindable(''), syncQuery = false, children, size = 'md' }: Props = $props()
 
 	type Item = { apps: string[]; summary: string; path: string }
-	let hubFlows: any[] | undefined = undefined
-	let filteredItems: (Item & { marked?: string })[] = []
-	let appFilter: string | undefined = undefined
+	let hubFlows: any[] | undefined = $state(undefined)
+	let filteredItems: (Item & { marked?: string })[] = $state([])
+	let appFilter: string | undefined = $state(undefined)
 
-	$: prefilteredItems = appFilter
-		? (hubFlows ?? []).filter((i) => i.apps.includes(appFilter))
-		: hubFlows ?? []
+	const prefilteredItems = $derived(
+		appFilter ? (hubFlows ?? []).filter((i: Item) => i.apps.includes(appFilter!)) : (hubFlows ?? [])
+	)
 
-	$: apps = Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort()
+	const apps = $derived(Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort())
 
 	const dispatch = createEventDispatcher()
 
@@ -34,9 +41,16 @@
 	bind:filteredItems
 	f={(x) => x.summary + ' (' + x.apps.join(', ') + ')'}
 />
-<div class="w-full flex mt-1 items-center gap-2">
-	<slot />
-	<input type="text" placeholder="Search Hub Flows" bind:value={filter} class="text-2xl grow" />
+<div class="w-full flex items-center gap-2">
+	{@render children?.()}
+	<TextInput
+		inputProps={{
+			placeholder: 'Search Hub Flows'
+		}}
+		bind:value={filter}
+		{size}
+		class="grow !pr-9"
+	/>
 </div>
 <ListFilters {syncQuery} filters={apps} bind:selectedFilter={appFilter} resourceType />
 
@@ -44,18 +58,18 @@
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y border rounded-md overflow-hidden">
+		<ul class="divide-y border rounded-md bg-surface-tertiary overflow-hidden">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surfacehite transition-all items-center"
-						on:click={() => dispatch('pick', item)}
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover transition-all items-center"
+						onclick={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
-							<div class="w-full text-left font-normal">
-								<div class="text-primary flex-wrap text-md font-semibold">
+							<div class="w-full text-left">
+								<div class="text-emphasis flex-wrap text-xs font-semibold">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
index 2c9202886d..5bad9ca272 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
@@ -1,21 +1,29 @@
 <script lang="ts">
 	import { createEventDispatcher, untrack } from 'svelte'
-	import { Alert, Badge, Skeleton } from '$lib/components/common'
-	import { capitalize, classNames } from '$lib/utils'
+	import { Alert, Badge, ButtonType, Skeleton } from '$lib/components/common'
+	import { capitalize } from '$lib/utils'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
 	import { APP_TO_ICON_COMPONENT } from '$lib/components/icons'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
 	import { IntegrationService, ScriptService, type HubScriptKind } from '$lib/gen'
 	import { Loader2 } from 'lucide-svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	interface Props {
 		kind?: HubScriptKind & string
 		filter?: string
 		syncQuery?: boolean
 		children?: import('svelte').Snippet
+		size?: ButtonType.UnifiedSize
 	}
 
-	let { kind = 'script', filter = $bindable(''), syncQuery = false, children }: Props = $props()
+	let {
+		kind = 'script',
+		filter = $bindable(''),
+		syncQuery = false,
+		children,
+		size = 'md'
+	}: Props = $props()
 
 	let loading = $state(false)
 	let hubNotAvailable = $state(false)
@@ -116,14 +124,16 @@
 	})
 </script>
 
-<div class="w-full flex mt-1 items-center gap-2">
+<div class="w-full flex items-center gap-2">
 	{@render children?.()}
 	<div class="relative w-full">
-		<input
-			type="text"
-			placeholder="Search Hub Scripts"
+		<TextInput
+			inputProps={{
+				placeholder: 'Search Hub Scripts'
+			}}
 			bind:value={filter}
-			class="text-2xl grow !pr-9"
+			class="grow !pr-9"
+			{size}
 		/>
 		{#if loading}
 			<Loader2 class="animate-spin text-gray-400 absolute right-2 top-2.5" />
@@ -132,38 +142,32 @@
 </div>
 
 {#if hubNotAvailable}
-	<div class="mt-2"></div>
 	<Alert type="error" title="Hub not available" />
 {:else if items.length > 0 && apps.length > 0}
 	<ListFilters {syncQuery} filters={apps} bind:selectedFilter={appFilter} resourceType />
 	{#if items.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y border rounded-md">
+		<ul class="divide-y border rounded-md bg-surface-tertiary">
 			{#each items as item (item.path)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow hover:bg-surface-hover transition-all items-center"
 						onclick={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
-							<div
-								class={classNames(
-									'rounded-md p-1 flex justify-center items-center border',
-									'bg-surface border'
-								)}
-							>
+							<div class="flex justify-center items-center">
 								{#if item['app'] in APP_TO_ICON_COMPONENT}
 									{@const SvelteComponent = APP_TO_ICON_COMPONENT[item['app']]}
 									<SvelteComponent height={18} width={18} />
 								{/if}
 							</div>
 
-							<div class="w-full text-left font-normal">
-								<div class="text-primary flex-wrap text-md font-semibold mb-1">
+							<div class="w-full text-left">
+								<div class="text-emphasis flex-wrap text-xs font-semibold mb-1">
 									{item.summary ?? ''}
 								</div>
-								<div class="text-secondary text-xs">
+								<div class="text-secondary text-2xs font-normal">
 									{item.path}
 								</div>
 							</div>
@@ -177,12 +181,11 @@
 		</ul>
 	{/if}
 	{#if items.length == 40}
-		<div class="text-tertiary text-sm py-4">
+		<div class="text-primary text-xs font-normal py-4">
 			There are more items than being displayed. Refine your search.
 		</div>
 	{/if}
 {:else}
-	<div class="my-2"></div>
 	{#each Array(10).fill(0) as _}
 		<Skeleton layout={[0.5, [4]]} />
 	{/each}
diff --git a/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte b/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte
index 9aff3abba9..f6aa796096 100644
--- a/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte
+++ b/frontend/src/lib/components/flows/pickers/TopLevelNode.svelte
@@ -40,7 +40,7 @@
 		'While loop': { icon: Repeat },
 		'Branch to one': { icon: GitBranch },
 		'Branch to all': { icon: GitBranch },
-		'AI Agent': { icon: BotIcon, iconClass: 'text-violet-800 dark:text-violet-400' },
+		'AI Agent': { icon: BotIcon, iconClass: 'text-ai' },
 		MCP: { icon: Plug, showChevron: true }
 	}
 
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
index 61b578d253..def0c1e58e 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
@@ -9,6 +9,7 @@
 	import { emptyString, truncateHash } from '$lib/utils'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	export let kind: 'script' | 'trigger' | 'approval' | 'failure' = 'script'
 	export let isTemplate: boolean | undefined = undefined
@@ -57,15 +58,17 @@
 	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
 />
 <div class="flex flex-col min-h-0">
-	<div class="w-full flex mt-1 items-center gap-2 mb-3">
+	<div class="w-full flex items-center gap-2 mb-3">
 		<slot />
 
-		<input
-			type="text"
-			on:keydown|stopPropagation
-			placeholder="Search Workspace Scripts"
+		<TextInput
+			inputProps={{
+				type: 'text',
+				onkeydown: (e) => e.stopPropagation(),
+				placeholder: 'Search Workspace Scripts'
+			}}
 			bind:value={filter}
-			class="text-2xl grow"
+			class="grow"
 		/>
 	</div>
 
@@ -76,7 +79,8 @@
 					<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
 						<Badge
 							class="cursor-pointer hover:bg-gray-200"
-							on:click={() => {
+							clickable
+							onclick={() => {
 								ownerFilter = ownerFilter == owner ? undefined : owner
 							}}
 							color={owner === ownerFilter ? 'blue' : 'gray'}
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
index c4df0772d3..9d1e6fca63 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
@@ -147,7 +147,7 @@
 <svelte:window onkeydown={onKeyDown} />
 {#if filteredItems}
 	{#if filteredItems.length == 0}
-		<div class="text-2xs text-tertiary font-light text-center py-2 px-3 items-center">
+		<div class="text-2xs text-primary font-light text-center py-2 px-3 items-center">
 			{kind == 'flow' ? 'No flows found.' : 'No scripts found.'}
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/flows/propPicker/InputPickerInner.svelte b/frontend/src/lib/components/flows/propPicker/InputPickerInner.svelte
index bde5e1c9d8..1ed9be896a 100644
--- a/frontend/src/lib/components/flows/propPicker/InputPickerInner.svelte
+++ b/frontend/src/lib/components/flows/propPicker/InputPickerInner.svelte
@@ -40,7 +40,7 @@
 			{#if inputTransform[key].type === 'javascript'}
 				<SquareFunction size={14} class="text-blue-500 -my-1 dark:text-blue-400" />
 			{:else if inputTransform[key].type === 'static'}
-				<DollarSign size={12} class="text-tertiary font-mono -my-1" />
+				<DollarSign size={12} class="text-primary font-mono -my-1" />
 			{/if}
 			{#if stepsInputArgs?.isArgManuallySet(id, key)}
 				<button
diff --git a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
index 4df3392504..d65582251e 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
@@ -7,9 +7,8 @@
 	import InputPickerInner from './InputPickerInner.svelte'
 	import { ChevronDown, Plug } from 'lucide-svelte'
 	import { useSvelteFlow } from '@xyflow/svelte'
-	import { getStateColor } from '$lib/components/graph/util'
-	import type { FlowStatusModule } from '$lib/gen'
 	import type { FlowEditorContext } from '../types'
+	import Button from '$lib/components/common/button/Button.svelte'
 
 	interface Props {
 		selected?: boolean
@@ -25,9 +24,6 @@
 		onEditInput?: (moduleId: string, key: string) => void
 		initial?: boolean
 		onResetInitial?: () => void
-		type: FlowStatusModule['type'] | undefined
-		darkMode?: boolean
-		skipped?: boolean
 	}
 
 	let {
@@ -41,10 +37,7 @@
 		id,
 		bottomBarOpen = $bindable(false),
 		loopStatus,
-		onEditInput,
-		type,
-		darkMode,
-		skipped
+		onEditInput
 	}: Props = $props()
 
 	const context = getContext<PropPickerContext>('PropPickerContext')
@@ -71,14 +64,6 @@
 	let inputPopover: Popover | undefined = $state(undefined)
 	let popover: Popover | undefined = $state(undefined)
 
-	const virtualItemClasses = {
-		bar: 'dark:hover:bg-[#525d6f] dark:bg-[#414958] bg-[#d7dfea] hover:bg-slate-300'
-	}
-
-	const defaultClasses = {
-		bar: 'bg-surface-disabled hover:bg-surface-hover dark:bg-[#454e5f] dark:hover:bg-[#576278]'
-	}
-
 	export function toggleOpen(forceOpen: boolean = false) {
 		if (popover?.isOpened() && !forceOpen) {
 			popover?.close()
@@ -130,32 +115,26 @@
 </script>
 
 <div
-	class="relative h-1 w-[275px]"
+	class="relative h-0 w-[275px] -z-10"
 	onpointerdown={(e) => {
 		e.preventDefault()
 		e.stopPropagation()
 	}}
 >
 	<!-- Invisible hover area to maintain consistent height -->
-	<div class="absolute w-full h-[20px]"></div>
+	<div class="absolute w-full h-[18px]"></div>
 	<div
 		class={twMerge(
-			'bg-slate-200 absolute w-full',
-			variant === 'virtual'
-				? `${virtualItemClasses.bar} ${bottomBarOpen ? 'bg-slate-300 dark:bg-[#525d6f]' : ''}`
-				: `${defaultClasses.bar} ${bottomBarOpen ? 'bg-surface-hover dark:bg-[#576278]' : ''}`,
-			'shadow-[inset_0_1px_5px_0_rgba(0,0,0,0.05)] rounded-b-sm',
+			'absolute w-full top-1',
+			variant === 'virtual' ? `` : ``,
 			'group transition-all duration-100',
 			'flex flex-row items-center justify-center',
-			'h-1 hover:h-[20px]',
-			bottomBarOpen && 'h-[20px]'
+			'h-0 hover:h-[18px]',
+			bottomBarOpen && 'h-[18px]'
 		)}
-		style:background-color={type && type !== 'WaitingForEvents'
-			? getStateColor(type, !!darkMode, true, skipped)
-			: undefined}
 		data-prop-picker
 	>
-		<div class="flex flex-row items-center justify-center w-full h-full">
+		<div class="flex flex-row gap-2 items-center justify-center w-full h-full">
 			{#if showInput}
 				<Popover
 					enableFlyTransition
@@ -183,16 +162,20 @@
 					bind:this={inputPopover}
 				>
 					{#snippet trigger({ isOpen })}
-						<button
-							class={twMerge(
-								'h-full center-center transition-opacity duration-150 w-full',
+						<Button
+							variant="default"
+							selected={inputOpen}
+							wrapperClasses={twMerge(
+								'w-full h-full transition-colors rounded-b-md',
 								bottomBarOpen ? 'opacity-100' : 'opacity-0',
-								'text-2xs font-normal w-full h-full border-t-2 border-transparent',
-								inputOpen ? 'border-primary' : 'hover:border-primary/20'
+								inputOpen ? 'bg-surface-secondary' : 'bg-surface-tertiary'
 							)}
+							btnClasses="font-normal"
+							endIcon={{ icon: ChevronDown }}
+							size="xs3"
 						>
 							In
-						</button>
+						</Button>
 					{/snippet}
 					{#snippet content()}
 						<InputPickerInner {inputTransform} {id} {onEditInput} />
@@ -234,12 +217,16 @@
 						baseRadius="2px"
 						marginWidth="1px"
 					>
-						<button
-							class={twMerge(
-								'text-2xs font-normal w-full h-full border-t-2 border-transparent',
-								outputOpen ? 'border-primary' : 'hover:border-primary/20',
-								showConnecting ? 'bg-surface-hover rounded-sm border-0' : ''
+						<Button
+							variant="default"
+							selected={outputOpen}
+							wrapperClasses={twMerge(
+								'w-full h-full rounded-b-md transition-colors',
+								outputOpen ? 'bg-surface-secondary' : 'bg-surface-tertiary'
 							)}
+							btnClasses="font-normal"
+							endIcon={showInput ? { icon: ChevronDown } : undefined}
+							size="xs3"
 						>
 							{#if showInput}
 								Out
@@ -248,7 +235,7 @@
 							{:else}
 								<ChevronDown size={12} class="w-full" />
 							{/if}
-						</button>
+						</Button>
 					</AnimatedButton>
 				{/snippet}
 				{#snippet content()}
diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
index 5da141b28f..b5346566a2 100644
--- a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
+++ b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	type SelectCallback = (path: string) => boolean
 
 	export const CONNECT = 'connect' as const
@@ -29,21 +29,36 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { writable, type Writable } from 'svelte/store'
 	import type { PickableProperties } from '../previousResults'
-	import { twMerge } from 'tailwind-merge'
 	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
 
-	export let pickableProperties: PickableProperties | undefined
-	export let result: any = undefined
-	export let extraResults: any = undefined
-	export let flow_input: any = undefined
-	export let error: boolean = false
-	export let displayContext = true
-	export let notSelectable = false
-	export let noPadding: boolean = false
-	export let alwaysOn: boolean = false
-	export let paneClass: string = ''
-	export let noFlowPlugConnect = false
+	interface Props {
+		pickableProperties: PickableProperties | undefined
+		result?: any
+		extraResults?: any
+		flow_input?: any
+		error?: boolean
+		displayContext?: boolean
+		notSelectable?: boolean
+		noPadding?: boolean
+		paneClass?: string
+		noFlowPlugConnect?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		pickableProperties,
+		result = undefined,
+		extraResults = undefined,
+		flow_input = undefined,
+		error = false,
+		displayContext = true,
+		notSelectable = false,
+		noPadding = false,
+		paneClass = '',
+		noFlowPlugConnect = false,
+		children
+	}: Props = $props()
 
 	const propPickerConfig: Writable<PropPickerConfig | undefined> = writable<
 		PropPickerConfig | undefined
@@ -89,68 +104,72 @@
 			document.querySelectorAll('[data-prop-picker], [data-prop-picker] *')
 		) as HTMLElement[]
 	}
+
+	let rightPaneHeight: number = $state(0)
 </script>
 
 <div
 	class="h-full w-full"
 	data-prop-picker-root
-	use:clickOutside={{ capture: true, exclude: getPropPickerElements }}
-	on:click_outside={() => {
-		propPickerConfig.set(undefined)
-		flowPropPickerConfig.set(undefined)
+	use:clickOutside={{
+		capture: true,
+		exclude: getPropPickerElements,
+		onClickOutside: () => {
+			propPickerConfig.set(undefined)
+			flowPropPickerConfig.set(undefined)
+		}
 	}}
 >
 	<Splitpanes class={$propPickerConfig ? 'splitpanes-remove-splitter' : ''}>
-		<Pane
-			minSize={20}
-			size={60}
-			class={twMerge('relative !transition-none ', noPadding ? '' : 'p-2')}
-		>
-			<slot />
+		<Pane minSize={20} size={60} class={'relative !transition-none'}>
+			<div style="height: {rightPaneHeight}px;" class={noPadding ? '' : 'p-2'}>
+				{@render children?.()}
+			</div>
 		</Pane>
-		<Pane minSize={20} size={40} class="!transition-none z-1000 {paneClass}">
-			<AnimatedButton
-				animate={$propPickerConfig?.insertionMode == 'connect'}
-				baseRadius="4px"
-				wrapperClasses="prop-picker-inputs h-full w-full pt-1 !bg-surface "
-				marginWidth="3px"
-				ringColor={$propPickerConfig?.insertionMode == 'insert' ||
-				$propPickerConfig?.insertionMode == 'append'
-					? '#3b82f6'
-					: 'transparent'}
-				animationDuration="4s"
-			>
-				{#if result != undefined}
-					<PropPickerResult
-						{result}
-						{extraResults}
-						{flow_input}
-						allowCopy={!notSelectable && !$propPickerConfig}
-						on:select={({ detail }) => {
-							dispatch('select', detail)
-							if ($propPickerConfig?.onSelect(detail)) {
-								$propPickerConfig?.clearFocus()
-							}
-						}}
-					/>
-				{:else if pickableProperties}
-					<PropPicker
-						{alwaysOn}
-						{displayContext}
-						{error}
-						previousId={pickableProperties?.previousId}
-						{pickableProperties}
-						allowCopy={!notSelectable && !$propPickerConfig}
-						on:select={({ detail }) => {
-							// console.log('selecting', detail)
-							dispatch('select', detail)
-							if ($propPickerConfig?.onSelect(detail)) {
-								$propPickerConfig?.clearFocus()
-							}
-						}}
-					/>
-				{/if}
-			</AnimatedButton>
+		<Pane minSize={20} size={40} class="!transition-none z-1000 relative {paneClass}">
+			<div bind:clientHeight={rightPaneHeight} class="min-h-40 h-full !bg-surface-secondary">
+				<AnimatedButton
+					animate={$propPickerConfig?.insertionMode == 'connect'}
+					baseRadius="4px"
+					wrapperClasses="prop-picker-inputs h-full w-full pt-1"
+					marginWidth="3px"
+					ringColor={$propPickerConfig?.insertionMode == 'insert' ||
+					$propPickerConfig?.insertionMode == 'append'
+						? '#3b82f6'
+						: 'transparent'}
+					animationDuration="4s"
+				>
+					{#if result != undefined}
+						<PropPickerResult
+							{result}
+							{extraResults}
+							{flow_input}
+							allowCopy={!notSelectable && !$propPickerConfig}
+							on:select={({ detail }) => {
+								dispatch('select', detail)
+								if ($propPickerConfig?.onSelect(detail)) {
+									$propPickerConfig?.clearFocus()
+								}
+							}}
+						/>
+					{:else if pickableProperties}
+						<PropPicker
+							{displayContext}
+							{error}
+							previousId={pickableProperties?.previousId}
+							{pickableProperties}
+							allowCopy={!notSelectable && !$propPickerConfig}
+							on:select={({ detail }) => {
+								// console.log('selecting', detail)
+								dispatch('select', detail)
+								if ($propPickerConfig?.onSelect(detail)) {
+									$propPickerConfig?.clearFocus()
+								}
+							}}
+						/>
+					{/if}
+				</AnimatedButton>
+			</div>
 		</Pane>
 	</Splitpanes>
 </div>
diff --git a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
index 653c4dfe12..17b5fd1e24 100644
--- a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
+++ b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
@@ -155,7 +155,7 @@
 		<JobPickerLight job={item} />
 	{/snippet}
 	{#snippet empty()}
-		<div class="text-center text-tertiary text-xs py-2 px-2">
+		<div class="text-center text-primary text-xs py-2 px-2">
 			{noHistory === 'isLoop'
 				? 'History is not available with loops.'
 				: noHistory === 'isInsideLoop'
diff --git a/frontend/src/lib/components/git_sync/DetectionFlow.svelte b/frontend/src/lib/components/git_sync/DetectionFlow.svelte
index 1ee2b37d1c..817b9942f7 100644
--- a/frontend/src/lib/components/git_sync/DetectionFlow.svelte
+++ b/frontend/src/lib/components/git_sync/DetectionFlow.svelte
@@ -8,7 +8,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import GitSyncModeDisplay from './GitSyncModeDisplay.svelte'
 
-	let { idx, mode } = $props<{ idx: number, mode?: 'sync' | 'promotion' }>()
+	let { idx, mode } = $props<{ idx: number; mode?: 'sync' | 'promotion' }>()
 
 	const gitSyncContext = getGitSyncContext()
 	const repo = $derived(gitSyncContext.getRepository(idx))
@@ -19,15 +19,18 @@
 		const abortController = new AbortController()
 
 		if (repo?.git_repo_resource_path) {
-			gitSyncContext.getTargetBranch(repo).then(branch => {
-				if (!abortController.signal.aborted) {
-					targetBranch = branch
-				}
-			}).catch(error => {
-				if (!abortController.signal.aborted) {
-					console.warn('Failed to get target branch:', error)
-				}
-			})
+			gitSyncContext
+				.getTargetBranch(repo)
+				.then((branch) => {
+					if (!abortController.signal.aborted) {
+						targetBranch = branch
+					}
+				})
+				.catch((error) => {
+					if (!abortController.signal.aborted) {
+						console.warn('Failed to get target branch:', error)
+					}
+				})
 		}
 
 		return () => {
@@ -74,7 +77,6 @@
 	}
 </script>
 
-
 {#if repo}
 	<div class="space-y-4">
 		{#if !repo.detectionState || repo.detectionState === 'idle'}
@@ -174,7 +176,7 @@
 
 		<!-- Job status display -->
 		{#if repo.detectionJobId && (repo.detectionState === 'loading' || repo.detectionState === 'error')}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if repo.detectionJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if repo.detectionJobStatus === 'success'}
diff --git a/frontend/src/lib/components/git_sync/GitSyncModeDisplay.svelte b/frontend/src/lib/components/git_sync/GitSyncModeDisplay.svelte
index e592a970fb..599eb08f4a 100644
--- a/frontend/src/lib/components/git_sync/GitSyncModeDisplay.svelte
+++ b/frontend/src/lib/components/git_sync/GitSyncModeDisplay.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
 	import type { GitSyncRepository } from './GitSyncContext.svelte'
 
-	let {
-		mode,
-		targetBranch,
-		repository
-	} = $props<{
+	let { mode, targetBranch, repository } = $props<{
 		mode?: 'sync' | 'promotion' | null
 		targetBranch: string
 		repository?: GitSyncRepository | null
@@ -14,11 +10,13 @@
 
 <div class="text-base">
 	{#if mode === 'promotion'}
-		<div><span class="font-bold">Promotion:</span> Creating branches whose promotion target is {targetBranch}</div>
+		<div
+			><span class="font-bold">Promotion:</span> Creating branches whose promotion target is {targetBranch}</div
+		>
 		{#if repository?.group_by_folder}
-			<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
+			<div class="text-sm text-primary mt-1">Grouped by folder</div>
 		{/if}
 	{:else}
 		<div><span class="font-bold">Sync:</span> Syncing back to branch {targetBranch}</div>
 	{/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte b/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte
index 1283f81c0c..bb1ec27ea8 100644
--- a/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte
+++ b/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte
@@ -1,5 +1,15 @@
 <script lang="ts">
-	import { Save, Trash, XCircle, CheckCircle2, RotateCw, RotateCcw, Download, Upload, Plus } from 'lucide-svelte'
+	import {
+		Save,
+		Trash,
+		XCircle,
+		CheckCircle2,
+		RotateCw,
+		RotateCcw,
+		Download,
+		Upload,
+		Plus
+	} from 'lucide-svelte'
 	import { Button, Alert } from '$lib/components/common'
 	import { getGitSyncContext } from './GitSyncContext.svelte'
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
@@ -23,14 +33,14 @@
 		isCollapsible = true,
 		showEmptyState = false
 	} = $props<{
-		idx?: number | null,
-		isSecondary?: boolean,
-		isLegacy?: boolean,
-		variant?: 'primary-sync' | 'primary-promotion' | 'secondary' | 'legacy' | 'standard',
-		mode?: 'sync' | 'promotion' | null,
-		repository?: GitSyncRepository | null,
-		onAdd?: (() => void) | null,
-		isCollapsible?: boolean,
+		idx?: number | null
+		isSecondary?: boolean
+		isLegacy?: boolean
+		variant?: 'primary-sync' | 'primary-promotion' | 'secondary' | 'legacy' | 'standard'
+		mode?: 'sync' | 'promotion' | null
+		repository?: GitSyncRepository | null
+		onAdd?: (() => void) | null
+		isCollapsible?: boolean
 		showEmptyState?: boolean
 	}>()
 
@@ -46,15 +56,18 @@
 		const abortController = new AbortController()
 
 		if (repo?.git_repo_resource_path) {
-			gitSyncContext.getTargetBranch(repo).then(branch => {
-				if (!abortController.signal.aborted) {
-					targetBranch = branch
-				}
-			}).catch(error => {
-				if (!abortController.signal.aborted) {
-					console.warn('Failed to get target branch:', error)
-				}
-			})
+			gitSyncContext
+				.getTargetBranch(repo)
+				.then((branch) => {
+					if (!abortController.signal.aborted) {
+						targetBranch = branch
+					}
+				})
+				.catch((error) => {
+					if (!abortController.signal.aborted) {
+						console.warn('Failed to get target branch:', error)
+					}
+				})
 		}
 
 		return () => {
@@ -65,29 +78,39 @@
 	// Compute already-used repository paths to exclude from picker
 	const usedRepositoryPaths = $derived(
 		gitSyncContext.repositories
-			.map((r, i) => i !== idx ? r.git_repo_resource_path : null)
+			.map((r, i) => (i !== idx ? r.git_repo_resource_path : null))
 			.filter((path): path is string => Boolean(path?.trim()))
 	)
 
 	// Determine display title based on variant and legacy status
 	const displayTitle = $derived(
-		variant === 'primary-sync' ? (mode === 'sync' ? 'Sync mode' : 'Promotion mode') :
-		variant === 'primary-promotion' ? 'Promotion mode' :
-		isLegacy ? 'Legacy promotion repository' :
-		isSecondary ? 'Secondary sync repository' :
-		`Repository #${(idx ?? 0) + 1}`
+		variant === 'primary-sync'
+			? mode === 'sync'
+				? 'Sync mode'
+				: 'Promotion mode'
+			: variant === 'primary-promotion'
+				? 'Promotion mode'
+				: isLegacy
+					? 'Legacy promotion repository'
+					: isSecondary
+						? 'Secondary sync repository'
+						: `Repository #${(idx ?? 0) + 1}`
 	)
 
 	// Determine display description based on variant and mode
 	const displayDescription = $derived(
-		(variant === 'primary-sync' || variant === 'primary-promotion') ?
-			(mode === 'sync' ? `Changes will be committed directly to the ${targetBranch} branch` :
-			mode === 'promotion' ? `Changes will be made to new branches whose promotion target is ${targetBranch}` :
-			null) :
-		null
+		variant === 'primary-sync' || variant === 'primary-promotion'
+			? mode === 'sync'
+				? `Changes will be committed directly to the ${targetBranch} branch`
+				: mode === 'promotion'
+					? `Changes will be made to new branches whose promotion target is ${targetBranch}`
+					: null
+			: null
 	)
 
-	const shouldShowEmptyState = $derived(showEmptyState || (!repo && (variant === 'primary-sync' || variant === 'primary-promotion')))
+	const shouldShowEmptyState = $derived(
+		showEmptyState || (!repo && (variant === 'primary-sync' || variant === 'primary-promotion'))
+	)
 
 	async function handleSave() {
 		if (!repo || idx === null) return
@@ -155,20 +178,11 @@
 {#snippet headerActions()}
 	{#if !isLegacy}
 		{#if validation?.hasChanges && validation?.isValid && !repo.isUnsavedConnection}
-			<Button
-				size="xs"
-				onclick={handleSave}
-				startIcon={{ icon: Save }}
-			>
+			<Button size="xs" onclick={handleSave} startIcon={{ icon: Save }}>
 				{repo.legacyImported ? 'Migrate and save' : 'Save changes'}
 			</Button>
 			{#if idx !== null && gitSyncContext.initialRepositories[idx] && !repo.legacyImported}
-				<Button
-					color="light"
-					size="xs"
-					onclick={handleRevert}
-					startIcon={{ icon: RotateCcw }}
-				>
+				<Button color="light" size="xs" onclick={handleRevert} startIcon={{ icon: RotateCcw }}>
 					Revert
 				</Button>
 			{/if}
@@ -203,12 +217,7 @@
 					viewBox="0 0 24 24"
 					stroke="currentColor"
 				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M5 15l7-7 7 7"
-					/>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
 				</svg>
 			{/if}
 		</button>
@@ -217,10 +226,10 @@
 		<div transition:fade|local={{ duration: 100 }}>
 			<Button
 				size="xs"
-				color="light"
-				variant="border"
+				variant="default"
 				onclick={initiateDelete}
 				startIcon={{ icon: Trash }}
+				destructive
 			>
 				Delete
 			</Button>
@@ -249,7 +258,7 @@
 	<div class="space-y-4">
 		<!-- Resource Picker -->
 		<div class="flex gap-2 items-center">
-			<div class="font-medium">Resource:</div>
+			<div class="font-semibold">Resource:</div>
 			<div class="flex-1">
 				<ResourcePicker
 					bind:value={repo.git_repo_resource_path}
@@ -261,7 +270,7 @@
 			{#if !emptyString(repo.git_repo_resource_path)}
 				<Button
 					disabled={emptyString(repo.script_path)}
-					color="dark"
+					variant="accent"
 					onclick={runGitSyncTestJob}
 					size="xs"
 				>
@@ -301,7 +310,8 @@
 			<!-- Warnings -->
 			{#if repo.legacyImported}
 				<Alert type="warning" title="Legacy git sync settings imported">
-					This repository was initialized from workspace-level legacy Git-Sync settings. Review the filters and press <b>Save</b> to migrate.
+					This repository was initialized from workspace-level legacy Git-Sync settings. Review the
+					filters and press <b>Save</b> to migrate.
 				</Alert>
 			{/if}
 
@@ -310,15 +320,17 @@
 					The git sync version for this repository is not latest. Current: <a
 						target="_blank"
 						href="https://hub.windmill.dev/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
-					>{repo.script_path}</a>, latest:
+						>{repo.script_path}</a
+					>, latest:
 					<a
 						target="_blank"
 						href="https://hub.windmill.dev/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
-					>{hubPaths.gitSync}</a>
+						>{hubPaths.gitSync}</a
+					>
 					<div class="flex mt-2">
 						<Button
 							size="xs"
-							color="dark"
+							variant="accent"
 							onclick={() => {
 								if (repo) {
 									repo.script_path = hubPaths.gitSync
@@ -333,7 +345,10 @@
 
 			<!-- Configuration -->
 			{#if repo.isUnsavedConnection && !emptyString(repo.git_repo_resource_path) && idx !== null}
-				<DetectionFlow {idx} mode={variant === 'primary-promotion' || variant === 'legacy' ? 'promotion' : 'sync'} />
+				<DetectionFlow
+					{idx}
+					mode={variant === 'primary-promotion' || variant === 'legacy' ? 'promotion' : 'sync'}
+				/>
 			{:else}
 				<GitSyncFilterSettings
 					bind:git_repo_resource_path={repo.git_repo_resource_path}
@@ -348,11 +363,7 @@
 					useIndividualBranch={repo.use_individual_branch}
 				>
 					{#snippet actions()}
-						<Button
-							size="md"
-							onclick={handlePullSettings}
-							startIcon={{ icon: Download }}
-						>
+						<Button size="md" onclick={handlePullSettings} startIcon={{ icon: Download }}>
 							Pull settings
 						</Button>
 					{/snippet}
@@ -360,14 +371,16 @@
 
 				{#if !repo.isUnsavedConnection}
 					<div class="flex justify-between items-start">
-					<!-- Display mode settings as prominent text -->
-					<div class="flex-1 mr-4">
-						<GitSyncModeDisplay
-							mode={variant === 'primary-promotion' || variant === 'legacy' ? 'promotion' : 'sync'}
-							{targetBranch}
-							repository={repo}
-						/>
-					</div>
+						<!-- Display mode settings as prominent text -->
+						<div class="flex-1 mr-4">
+							<GitSyncModeDisplay
+								mode={variant === 'primary-promotion' || variant === 'legacy'
+									? 'promotion'
+									: 'sync'}
+								{targetBranch}
+								repository={repo}
+							/>
+						</div>
 
 						<!-- Manual sync section for existing repos -->
 						{#if !emptyString(repo.git_repo_resource_path) && !repo.legacyImported}
@@ -376,8 +389,7 @@
 								<div class="flex gap-2">
 									<Button
 										size="xs"
-										color="dark"
-										variant="border"
+										variant="default"
 										onclick={() => idx !== null && gitSyncContext.showPullModal(idx)}
 										startIcon={{ icon: Download }}
 									>
@@ -385,8 +397,7 @@
 									</Button>
 									<Button
 										size="xs"
-										color="dark"
-										variant="border"
+										variant="default"
 										onclick={() => idx !== null && gitSyncContext.showPushModal(idx)}
 										startIcon={{ icon: Upload }}
 									>
@@ -399,7 +410,7 @@
 				{/if}
 			{/if}
 		{:else}
-			<div class="text-xs text-tertiary">Please select a Git repository resource.</div>
+			<div class="text-xs text-primary">Please select a Git repository resource.</div>
 		{/if}
 	</div>
 {/snippet}
@@ -411,16 +422,18 @@
 	<div class="rounded-lg border bg-surface p-4 mb-4">
 		<div class="flex items-center justify-between mb-4">
 			<div class="flex flex-col">
-				<h3 class="text-xl font-semibold">{displayTitle}</h3>
+				<h3 class="text-xs font-semibold text-emphasis">{displayTitle}</h3>
 				{#if displayDescription}
-					<p class="text-sm text-secondary">{displayDescription}</p>
+					<p class="text-2xs text-secondary">{displayDescription}</p>
 				{/if}
 			</div>
 		</div>
 
-		<div class="flex flex-col items-center justify-center py-8 px-4 border-2 border-dashed rounded-md">
+		<div
+			class="flex flex-col items-center justify-center py-8 px-4 border-2 border-dashed rounded-md border-border-normal"
+		>
 			<div class="text-center mb-4">
-				<p class="text-secondary mb-2">
+				<p class="text-primary text-xs font-normal mb-2">
 					{#if mode === 'sync'}
 						No sync repository configured. Add one to enable direct synchronization.
 					{:else if mode === 'promotion'}
@@ -431,13 +444,7 @@
 				</p>
 			</div>
 			{#if onAdd}
-				<Button
-					size="md"
-					color="dark"
-					variant="border"
-					startIcon={{ icon: Plus }}
-					onclick={onAdd}
-				>
+				<Button unifiedSize="md" variant="default" startIcon={{ icon: Plus }} onclick={onAdd}>
 					Add {mode || 'repository'} repository
 				</Button>
 			{/if}
@@ -467,11 +474,13 @@
 				<div class="flex items-center gap-2">
 					<span class="text-lg font-semibold">{displayTitle}</span>
 					{#if repo.legacyImported}
-						<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200">
+						<span
+							class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 border border-orange-200"
+						>
 							Legacy Configuration
 						</span>
 					{/if}
-					<span class="text-xs text-tertiary pt-1 pl-8">
+					<span class="text-xs text-primary pt-1 pl-8">
 						{repo.git_repo_resource_path}
 					</span>
 				</div>
@@ -486,4 +495,4 @@
 			{/if}
 		</div>
 	{/if}
-{/if}
\ No newline at end of file
+{/if}
diff --git a/frontend/src/lib/components/git_sync/GitSyncSection.svelte b/frontend/src/lib/components/git_sync/GitSyncSection.svelte
index f4b685fba7..41269a82bd 100644
--- a/frontend/src/lib/components/git_sync/GitSyncSection.svelte
+++ b/frontend/src/lib/components/git_sync/GitSyncSection.svelte
@@ -9,7 +9,6 @@
 	import { sendUserToast } from '$lib/toast'
 	import { untrack } from 'svelte'
 
-
 	// Create context reactively based on workspaceStore
 	const gitSyncContext = $derived($workspaceStore ? setGitSyncContext($workspaceStore) : null)
 
@@ -38,8 +37,7 @@
 	let legacyPromotionExpanded = $state(false)
 
 	// Check if any secondary repositories are unsaved
-	const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedConnection))
-
+	const hasUnsavedSecondary = $derived(secondarySync.some((s) => s.repo.isUnsavedConnection))
 </script>
 
 {#if !gitSyncContext}
@@ -53,10 +51,10 @@
 {:else}
 	<div class="flex flex-col gap-4 my-8">
 		<div class="flex flex-col gap-1">
-			<div class="text-primary text-lg font-semibold">Git Sync</div>
+			<div class="text-emphasis text-sm font-semibold">Git Sync</div>
 			<Description link="https://www.windmill.dev/docs/advanced/git_sync">
-				Connect the Windmill workspace to a Git repository to automatically commit and push
-				scripts, flows, and apps to the repository on each deploy.
+				Connect the Windmill workspace to a Git repository to automatically commit and push scripts,
+				flows, and apps to the repository on each deploy.
 			</Description>
 		</div>
 		<Alert type="info" title="Only new updates trigger git sync">
@@ -75,7 +73,7 @@
 	{#if $enterpriseLicense && gitSyncContext.repositories != undefined}
 		<div class="flex mt-5 mb-5 gap-8">
 			<Button
-				color="dark"
+				variant="accent"
 				target="_blank"
 				endIcon={{ icon: ExternalLink }}
 				href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
@@ -122,11 +120,7 @@
 								{:else}
 									{#each secondarySync as { repo, idx } (repo.git_repo_resource_path)}
 										<div class="pl-4">
-											<GitSyncRepositoryCard
-												variant="secondary"
-												{idx}
-												isSecondary={true}
-											/>
+											<GitSyncRepositoryCard variant="secondary" {idx} isSecondary={true} />
 										</div>
 									{/each}
 								{/if}
@@ -135,8 +129,7 @@
 									<div class="pl-4">
 										<Button
 											size="xs"
-											color="light"
-											variant="border"
+											variant="default"
 											startIcon={{ icon: Plus }}
 											onclick={() => gitSyncContext.addSyncRepository()}
 										>
@@ -152,7 +145,7 @@
 					{#if !hasUnsavedSecondary}
 						<div class="mt-2">
 							<button
-								class="text-xs text-tertiary hover:text-secondary transition-colors"
+								class="text-xs text-primary hover:text-secondary transition-colors"
 								onclick={() => {
 									secondarySyncExpanded = true
 									gitSyncContext.addSyncRepository()
@@ -181,8 +174,8 @@
 			<!-- Legacy promotion repositories (backwards compatibility) -->
 			{#if legacyPromotion.length > 0}
 				<Alert type="warning" title="Multiple promotion repositories detected">
-					Multiple promotion repositories are no longer supported. Please reduce to a single promotion repository.
-					Only deletion is allowed for the additional repositories below.
+					Multiple promotion repositories are no longer supported. Please reduce to a single
+					promotion repository. Only deletion is allowed for the additional repositories below.
 				</Alert>
 				<div class="mt-4">
 					<button
diff --git a/frontend/src/lib/components/git_sync/PullWorkspaceModal.svelte b/frontend/src/lib/components/git_sync/PullWorkspaceModal.svelte
index 265593801d..b302b3656c 100644
--- a/frontend/src/lib/components/git_sync/PullWorkspaceModal.svelte
+++ b/frontend/src/lib/components/git_sync/PullWorkspaceModal.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
 	import Modal from '$lib/components/common/modal/Modal.svelte'
 	import { Button, Alert, Badge } from '$lib/components/common'
-	import { Loader2, CheckCircle2, XCircle, Terminal, ChevronDown, ChevronUp, Save, Edit3 } from 'lucide-svelte'
+	import {
+		Loader2,
+		CheckCircle2,
+		XCircle,
+		Terminal,
+		ChevronDown,
+		ChevronUp,
+		Save,
+		Edit3
+	} from 'lucide-svelte'
 	import GitDiffPreview from '../GitDiffPreview.svelte'
 	import { JobService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -145,7 +154,8 @@
 				pull: true,
 				only_wmill_yaml: settingsOnly,
 				settings_json: JSON.stringify(uiState),
-				use_promotion_overrides: currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch === true
+				use_promotion_overrides:
+					currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch === true
 			}
 
 			const jobId = await JobService.runScriptByPath({
@@ -164,30 +174,27 @@
 			}
 
 			// Use JobManager instead of tryEvery
-			const result = await jobManager.runWithProgress(
-				() => Promise.resolve(jobId),
-				{
-					workspace,
-					timeout: 60000,
-					timeoutMessage: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s`,
-					onProgress: (status) => {
-						if (isPreview) {
-							previewJobStatus = status.status
-						} else {
-							applyJobStatus = status.status
-						}
+			const result = await jobManager.runWithProgress(() => Promise.resolve(jobId), {
+				workspace,
+				timeout: 60000,
+				timeoutMessage: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s`,
+				onProgress: (status) => {
+					if (isPreview) {
+						previewJobStatus = status.status
+					} else {
+						applyJobStatus = status.status
+					}
 
-						// Handle failure status
-						if (status.status === 'failure') {
-							if (isPreview) {
-								previewError = status.error || 'Preview failed'
-							} else {
-								applyError = status.error || 'Pull failed'
-							}
+					// Handle failure status
+					if (status.status === 'failure') {
+						if (isPreview) {
+							previewError = status.error || 'Preview failed'
+						} else {
+							applyError = status.error || 'Pull failed'
 						}
 					}
 				}
-			)
+			})
 
 			// Handle successful result
 			if (isPreview) {
@@ -223,7 +230,6 @@
 		}
 	}
 
-
 	// Apply settings only (no job needed - we have the data from preview)
 	async function applySettingsOnly() {
 		isApplying = true
@@ -257,7 +263,6 @@
 				settingsApplied = true
 				sendUserToast('Settings applied successfully. You can now review workspace changes.')
 			}
-
 		} catch (error: any) {
 			console.error('Failed to apply settings:', error)
 			sendUserToast('Failed to apply settings: ' + error.message, true)
@@ -265,27 +270,31 @@
 			isApplying = false
 		}
 	}
-
-
 </script>
 
-
-<Modal bind:open title={settingsOnly ? "Pull Settings from Git Repository" : "Pull Workspace from Git Repository"} class="sm:max-w-4xl" cancelText={settingsOnly && !getSettingsChanges(previewResult).hasChanges ? "Close" : "Cancel"}>
+<Modal
+	bind:open
+	title={settingsOnly ? 'Pull Settings from Git Repository' : 'Pull Workspace from Git Repository'}
+	class="sm:max-w-4xl"
+	cancelText={settingsOnly && !getSettingsChanges(previewResult).hasChanges ? 'Close' : 'Cancel'}
+>
 	<div class="flex flex-col gap-4">
 		<!-- Description -->
 		<p class="text-sm text-secondary">
 			{#if settingsOnly}
-				Pull and apply settings changes from the Git repository to your workspace. This will update your sync filter settings only.
+				Pull and apply settings changes from the Git repository to your workspace. This will update
+				your sync filter settings only.
 			{:else}
-				Pull and apply changes from the Git repository to your workspace. If settings changes are detected, you can choose to pull just the settings or everything.
+				Pull and apply changes from the Git repository to your workspace. If settings changes are
+				detected, you can choose to pull just the settings or everything.
 			{/if}
 		</p>
 
 		<!-- Warning about overwrites - only show for full pulls, not settings-only -->
 		{#if !settingsOnly}
 			<Alert type="warning" title="This will overwrite local changes">
-				Pulling from the repository will overwrite any local changes to files that exist in the repository.
-				Make sure to preview the changes before applying.
+				Pulling from the repository will overwrite any local changes to files that exist in the
+				repository. Make sure to preview the changes before applying.
 			</Alert>
 		{/if}
 
@@ -294,7 +303,7 @@
 			<div class="flex justify-start pt-4">
 				<Button
 					size="md"
-					color="dark"
+					variant="accent"
 					onclick={() => {
 						previewAttempted = false // Allow manual retry
 						executeJob(true, settingsOnly)
@@ -312,7 +321,7 @@
 
 		<!-- Job status for preview -->
 		{#if previewJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if previewJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if previewJobStatus === 'success'}
@@ -354,23 +363,31 @@
 						<div class="bg-surface-secondary rounded-lg p-4 space-y-1">
 							{#if settingsChanges.diff?.diff}
 								{#each Object.entries(settingsChanges.diff.diff) as [field, change]}
-									{@const fieldName = field.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
-									{@const typedChange = change as {from: any, to: any}}
+									{@const fieldName = field
+										.replace(/([A-Z])/g, ' $1')
+										.replace(/^./, (str) => str.toUpperCase())}
+									{@const typedChange = change as { from: any; to: any }}
 									<div class="flex items-center gap-2 text-xs">
-										<span class="text-tertiary min-w-0 flex-shrink-0">{fieldName}:</span>
+										<span class="text-primary min-w-0 flex-shrink-0">{fieldName}:</span>
 										{#if Array.isArray(typedChange.from) && Array.isArray(typedChange.to)}
-											<span class="text-red-600">{typedChange.from.length === 0 ? 'None' : typedChange.from.join(', ')}</span>
-											<span class="text-tertiary">→</span>
-											<span class="text-green-600">{typedChange.to.length === 0 ? 'None' : typedChange.to.join(', ')}</span>
+											<span class="text-red-600"
+												>{typedChange.from.length === 0
+													? 'None'
+													: typedChange.from.join(', ')}</span
+											>
+											<span class="text-primary">→</span>
+											<span class="text-green-600"
+												>{typedChange.to.length === 0 ? 'None' : typedChange.to.join(', ')}</span
+											>
 										{:else}
 											<span class="text-red-600">{typedChange.from}</span>
-											<span class="text-tertiary">→</span>
+											<span class="text-primary">→</span>
 											<span class="text-green-600">{typedChange.to}</span>
 										{/if}
 									</div>
 								{/each}
 							{:else}
-								<div class="text-xs text-tertiary">
+								<div class="text-xs text-primary">
 									Settings changes detected but no detailed diff available.
 								</div>
 							{/if}
@@ -381,15 +398,15 @@
 				<!-- No settings changes detected (settings-only mode) -->
 				{#if settingsOnly && !settingsChanges.hasChanges}
 					<div class="bg-surface-secondary rounded-lg p-3">
-						<div class="text-sm text-tertiary">
-							No settings changes detected. Your local sync filter settings are already up to date with the repository.
-							See the CLI instructions below on how to edit wmill.yaml
+						<div class="text-sm text-primary">
+							No settings changes detected. Your local sync filter settings are already up to date
+							with the repository. See the CLI instructions below on how to edit wmill.yaml
 						</div>
 					</div>
 					<div class="flex justify-start">
 						<Button
 							size="sm"
-							color="dark"
+							variant="accent"
 							onclick={() => {
 								previewAttempted = false
 								previewResult = null
@@ -415,7 +432,7 @@
 							<GitDiffPreview previewResult={previewResult as SyncResponse} />
 						{:else}
 							<div class="bg-surface-secondary rounded-lg p-3">
-								<div class="text-sm text-tertiary">No changes to pull from the repository.</div>
+								<div class="text-sm text-primary">No changes to pull from the repository.</div>
 							</div>
 						{/if}
 					</div>
@@ -433,8 +450,12 @@
 					{#if settingsChanges.hasChanges && workspaceChanges.hasChanges && !settingsApplied}
 						<!-- Step 1: Settings changes first when both are present -->
 						<div class="flex flex-col gap-3">
-							<div class="text-sm font-medium text-primary">Step 1 of 2: Apply settings changes</div>
-							<div class="text-xs text-tertiary">Settings changes detected. Apply these first to ensure workspace content is pulled with the correct configuration.</div>
+							<div class="text-sm font-medium text-primary">Step 1 of 2: Apply settings changes</div
+							>
+							<div class="text-xs text-primary"
+								>Settings changes detected. Apply these first to ensure workspace content is pulled
+								with the correct configuration.</div
+							>
 							<div class="flex gap-2">
 								<Button
 									size="md"
@@ -468,8 +489,12 @@
 						<!-- Step 2: Workspace changes (either no settings changes, or settings already applied) -->
 						<div class="flex flex-col gap-3">
 							{#if settingsApplied}
-								<div class="text-sm font-medium text-primary">Step 2 of 2: Pull Workspace Changes</div>
-								<div class="text-xs text-green-600">✓ Settings applied successfully. Now you can pull the workspace changes.</div>
+								<div class="text-sm font-medium text-primary"
+									>Step 2 of 2: Pull Workspace Changes</div
+								>
+								<div class="text-xs text-green-600"
+									>✓ Settings applied successfully. Now you can pull the workspace changes.</div
+								>
 							{/if}
 							<div class="flex gap-2">
 								<Button
@@ -488,10 +513,10 @@
 					{:else}
 						<!-- No changes to pull -->
 						<div class="bg-surface-secondary rounded-lg p-3">
-							<div class="text-sm text-tertiary mb-3">No changes to pull from the repository.</div>
+							<div class="text-sm text-primary mb-3">No changes to pull from the repository.</div>
 							<Button
 								size="sm"
-								color="dark"
+								variant="accent"
 								onclick={() => {
 									previewAttempted = false
 									previewResult = null
@@ -513,7 +538,7 @@
 
 		<!-- Job status for apply -->
 		{#if applyJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if applyJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if applyJobStatus === 'success'}
@@ -543,15 +568,15 @@
 		<div class="border-t pt-4 mt-4">
 			<button
 				class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-				onclick={() => showCliInstructions = !showCliInstructions}
+				onclick={() => (showCliInstructions = !showCliInstructions)}
 			>
 				<Terminal size={16} />
 				{#if settingsOnly}
-				<span>Update settings with CLI</span>
+					<span>Update settings with CLI</span>
 				{:else}
-				<span>Update workspace with CLI</span>
+					<span>Update workspace with CLI</span>
 				{/if}
-				<Edit3 size={14} class="text-tertiary" />
+				<Edit3 size={14} class="text-primary" />
 				{#if showCliInstructions}
 					<ChevronUp size={16} />
 				{:else}
@@ -561,11 +586,19 @@
 
 			{#if showCliInstructions}
 				<div class="mt-3 bg-surface-secondary rounded-lg p-3">
-				    {#if settingsOnly}
-					<div class="text-xs text-tertiary mb-2">
-						Filter settings are sourced from the <code class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code> file in your git repository.
-						To modify them, edit the file in your repository, commit the changes, and sync using the commands below. Learn more about <a href="https://www.windmill.dev/docs/advanced/cli/sync#wmillyaml" target="_blank" rel="noopener noreferrer">the wmill.yaml format</a>.
-					</div>
+					{#if settingsOnly}
+						<div class="text-xs text-primary mb-2">
+							Filter settings are sourced from the <code class="bg-surface px-1 py-0.5 rounded"
+								>wmill.yaml</code
+							>
+							file in your git repository. To modify them, edit the file in your repository, commit the
+							changes, and sync using the commands below. Learn more about
+							<a
+								href="https://www.windmill.dev/docs/advanced/cli/sync#wmillyaml"
+								target="_blank"
+								rel="noopener noreferrer">the wmill.yaml format</a
+							>.
+						</div>
 					{/if}
 					<pre class="text-xs bg-surface p-3 rounded overflow-x-auto whitespace-pre-wrap break-all">
 # Make sure your repo is up to date
@@ -573,25 +606,30 @@ git pull
 
 {#if !settingsOnly}# Push from git repository to workspace
 wmill sync push --workspace {$workspaceStore} --repository {gitRepoResourcePath}
-
-{:else}
-# Edit wmill.yaml file
+						{:else}
+							# Edit wmill.yaml file
 vim wmill.yaml
 git add wmill.yaml
-{/if}# Commit changes
+						{/if}# Commit changes
 git commit
 git push
 {#if settingsOnly}
-# Push settings only from git repository or click the pull settings button above{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath} --promotion main{:else}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath}{/if}{/if}</pre>
+							# Push settings only from git repository or click the pull settings button above{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch}
+								wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath} --promotion main{:else}
+								wmill gitsync-settings push --workspace {$workspaceStore} --repository {gitRepoResourcePath}{/if}{/if}</pre
+					>
 					{#if currentGitSyncSettings?.repositories?.[repoIndex!]?.use_individual_branch && settingsOnly}
-						<div class="text-xs text-tertiary mt-3">
+						<div class="text-xs text-primary mt-3">
 							<div class="font-medium mb-1">Promotion Mode Configuration:</div>
 							<div class="flex items-center gap-2">
-								<span>You can add promotion-specific overrides in your <code class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code> file:</span>
+								<span
+									>You can add promotion-specific overrides in your <code
+										class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code
+									> file:</span
+								>
 							</div>
-							<pre class="text-xs bg-surface p-2 rounded mt-2 overflow-x-auto">git_branches:
+							<pre class="text-xs bg-surface p-2 rounded mt-2 overflow-x-auto"
+								>git_branches:
   main:
     promotionOverrides:
       # Add your promotion-specific settings here
diff --git a/frontend/src/lib/components/git_sync/PushWorkspaceModal.svelte b/frontend/src/lib/components/git_sync/PushWorkspaceModal.svelte
index 8b040adb3d..87c6ecb807 100644
--- a/frontend/src/lib/components/git_sync/PushWorkspaceModal.svelte
+++ b/frontend/src/lib/components/git_sync/PushWorkspaceModal.svelte
@@ -60,7 +60,6 @@
 		}
 	})
 
-
 	// Execute job with dry run or actual execution
 	async function executeJob(isDryRun: boolean) {
 		const isPreview = isDryRun
@@ -106,30 +105,27 @@
 			}
 
 			// Use JobManager instead of tryEvery
-			const result = await jobManager.runWithProgress(
-				() => Promise.resolve(jobId),
-				{
-					workspace,
-					timeout: 60000,
-					timeoutMessage: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s`,
-					onProgress: (status) => {
-						if (isPreview) {
-							previewJobStatus = status.status
-						} else {
-							applyJobStatus = status.status
-						}
+			const result = await jobManager.runWithProgress(() => Promise.resolve(jobId), {
+				workspace,
+				timeout: 60000,
+				timeoutMessage: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s`,
+				onProgress: (status) => {
+					if (isPreview) {
+						previewJobStatus = status.status
+					} else {
+						applyJobStatus = status.status
+					}
 
-						// Handle failure status
-						if (status.status === 'failure') {
-							if (isPreview) {
-								previewError = status.error || 'Preview failed'
-							} else {
-								applyError = status.error || 'Push failed'
-							}
+					// Handle failure status
+					if (status.status === 'failure') {
+						if (isPreview) {
+							previewError = status.error || 'Preview failed'
+						} else {
+							applyError = status.error || 'Push failed'
 						}
 					}
 				}
-			)
+			})
 
 			// Handle successful result
 			if (isPreview) {
@@ -158,20 +154,26 @@
 			}
 		}
 	}
-
 </script>
 
-
 <Modal bind:open title="Push Workspace to Git Repository" class="sm:max-w-4xl">
 	<div class="flex flex-col gap-4">
 		<!-- Description -->
-		<p class="text-sm text-secondary">Push your current workspace content to the connected Git repository based on the configured filters.</p>
-		<p class="text-sm text-tertiary">Note: This will not update git sync settings in wmill.yaml. Settings can only be pulled from the repository as it is the source of truth.</p>
+		<p class="text-sm text-secondary"
+			>Push your current workspace content to the connected Git repository based on the configured
+			filters.</p
+		>
+		<p class="text-sm text-primary"
+			>Note: This will not update git sync settings in wmill.yaml. Settings can only be pulled from
+			the repository as it is the source of truth.</p
+		>
 
 		<!-- Settings display for new connections -->
 		{#if isNewConnection}
 			<div class="bg-surface-secondary border border-border rounded-lg p-3">
-				<h4 class="text-sm font-medium text-primary mb-2">Settings that will be pushed to repository</h4>
+				<h4 class="text-sm font-medium text-primary mb-2"
+					>Settings that will be pushed to repository</h4
+				>
 				<div class="text-xs text-secondary space-y-1">
 					<div><strong>Include paths:</strong> {uiState.include_path?.join(', ') || 'None'}</div>
 					<div><strong>Exclude paths:</strong> {uiState.exclude_path?.join(', ') || 'None'}</div>
@@ -180,7 +182,9 @@
 					{/if}
 					<div><strong>Include types:</strong> {uiState.include_type?.join(', ') || 'None'}</div>
 				</div>
-				<p class="text-xs text-tertiary mt-2">To modify these settings, cancel and configure them in the workspace settings.</p>
+				<p class="text-xs text-primary mt-2"
+					>To modify these settings, cancel and configure them in the workspace settings.</p
+				>
 			</div>
 		{/if}
 
@@ -189,7 +193,7 @@
 			<div class="flex justify-start pt-4">
 				<Button
 					size="md"
-					color="dark"
+					variant="accent"
 					onclick={() => executeJob(true)}
 					disabled={isPreviewLoading}
 					startIcon={{
@@ -204,7 +208,7 @@
 
 		<!-- Job status for preview -->
 		{#if previewJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if previewJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if previewJobStatus === 'success'}
@@ -236,10 +240,10 @@
 				<h4 class="text-sm font-semibold text-primary">Changes to Push</h4>
 
 				{#if previewResult.changes?.length > 0}
-					<GitDiffPreview previewResult={previewResult} />
+					<GitDiffPreview {previewResult} />
 				{:else}
 					<div class="bg-surface-secondary rounded-lg p-3">
-						<div class="text-sm text-tertiary">No changes to push to the repository.</div>
+						<div class="text-sm text-primary">No changes to push to the repository.</div>
 					</div>
 				{/if}
 			</div>
@@ -249,40 +253,38 @@
 		{#if previewResult && !previewError}
 			{@const hasChanges = previewResult.changes?.length > 0}
 			{#if hasChanges}
-			<div class="border-t pt-4 mt-4">
-				<div class="flex justify-start gap-2">
-					<Button
-						size="xs"
-						onclick={() => executeJob(false)}
-						disabled={isApplying}
-						startIcon={{
-							icon: isApplying ? Loader2 : undefined,
-							classes: isApplying ? 'animate-spin' : ''
-						}}
-					>
-						{isApplying ?
-							(isNewConnection ? 'Initializing...' : 'Pushing...') :
-							(isNewConnection ? 'Initialize repo and save connection' : 'Push to repository')
-						}
-					</Button>
-					{#if isNewConnection && onSaveWithoutInit}
+				<div class="border-t pt-4 mt-4">
+					<div class="flex justify-start gap-2">
 						<Button
 							size="xs"
-							color="light"
-							onclick={onSaveWithoutInit}
+							onclick={() => executeJob(false)}
 							disabled={isApplying}
+							startIcon={{
+								icon: isApplying ? Loader2 : undefined,
+								classes: isApplying ? 'animate-spin' : ''
+							}}
 						>
-							Save without initializing repo
+							{isApplying
+								? isNewConnection
+									? 'Initializing...'
+									: 'Pushing...'
+								: isNewConnection
+									? 'Initialize repo and save connection'
+									: 'Push to repository'}
 						</Button>
-					{/if}
+						{#if isNewConnection && onSaveWithoutInit}
+							<Button size="xs" color="light" onclick={onSaveWithoutInit} disabled={isApplying}>
+								Save without initializing repo
+							</Button>
+						{/if}
+					</div>
 				</div>
-			</div>
 			{/if}
 		{/if}
 
 		<!-- Job status for apply -->
 		{#if applyJobId}
-			<div class="flex items-center gap-2 text-xs text-tertiary">
+			<div class="flex items-center gap-2 text-xs text-primary">
 				{#if applyJobStatus === 'running'}
 					<Loader2 class="animate-spin" size={14} />
 				{:else if applyJobStatus === 'success'}
@@ -312,7 +314,7 @@
 		<div class="border-t pt-4 mt-4">
 			<button
 				class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-				onclick={() => showCliInstructions = !showCliInstructions}
+				onclick={() => (showCliInstructions = !showCliInstructions)}
 			>
 				<Terminal size={16} />
 				<span>CLI Instructions</span>
@@ -332,7 +334,8 @@ wmill workspace add {$workspaceStore} {$workspaceStore} {window.location.origin}
 wmill init --workspace {$workspaceStore} --repository {gitRepoResourcePath}
 
 # Pull workspace content to git repository
-wmill sync pull --workspace {$workspaceStore} --repository {gitRepoResourcePath}</pre>
+wmill sync pull --workspace {$workspaceStore} --repository {gitRepoResourcePath}</pre
+					>
 				</div>
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 3b95378497..9a29ba41f5 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -619,10 +619,7 @@
 				>
 					{#if showDataflow}
 						<Toggle
-							value={$useDataflow}
-							on:change={() => {
-								$useDataflow = !$useDataflow
-							}}
+							bind:checked={$useDataflow}
 							size="xs"
 							options={{
 								right: 'Dataflow'
diff --git a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
index 6217a65111..8f86b6f572 100644
--- a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
+++ b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
+	import InsertModulePopover from '$lib/components/flows/map/InsertModulePopover.svelte'
 	import { getBezierPath, BaseEdge, type EdgeProps, EdgeLabel } from '@xyflow/svelte'
 	import { ClipboardCopy, Hourglass } from 'lucide-svelte'
 	import { getContext } from 'svelte'
@@ -12,6 +12,7 @@
 	import FlowStatusWaitingForEvents from '$lib/components/FlowStatusWaitingForEvents.svelte'
 	import type { Job } from '$lib/gen'
 	import type { GraphModuleState } from '../../model'
+	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
 
 	const { useDataflow } = getContext<{
 		useDataflow: Writable<boolean | undefined>
@@ -80,7 +81,7 @@
 
 <EdgeLabel
 	x={sourceX}
-	y={sourceY + 28 + (data.shouldOffsetInsertBtnDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
+	y={sourceY + 32 + (data.shouldOffsetInsertBtnDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
 	class="base-edge"
 	style=""
 >
@@ -91,9 +92,9 @@
 		>
 			<!-- <pre class="text-2xs">A{JSON.stringify(data.branch)}, {data.sourceId}, {data.targetId}</pre> -->
 			<!-- {data.targetId} B -->
-			<InsertModuleButton
+			<InsertModulePopover
 				disableAi={data.disableAi}
-				index={data.index ?? 0}
+				allowTrigger={data.index == 0}
 				on:new={(e) => {
 					data?.eventHandlers.insert({
 						sourceId: data.sourceId,
@@ -125,7 +126,15 @@
 						flow: e.detail
 					})
 				}}
-			/>
+			>
+				{#snippet trigger({ toggleOpen })}
+					<InsertModuleButton
+						onPress={toggleOpen}
+						title={`Add step`}
+						id={`flow-editor-add-step-${data.index ?? 0}`}
+					/>
+				{/snippet}
+			</InsertModulePopover>
 		</div>
 	{/if}
 
diff --git a/frontend/src/lib/components/graph/renderers/nodes/AIToolNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AIToolNode.svelte
index f23946a473..ac56f0920b 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AIToolNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AIToolNode.svelte
@@ -258,7 +258,7 @@
 
 	import type { Writable } from 'svelte/store'
 	import type { GraphModuleState } from '../../model'
-	import { getStateColor, getStateHoverColor } from '../../util'
+	import { getNodeColorClasses } from '../../util'
 	import { deepEqual } from 'fast-equals'
 
 	let hover = $state(false)
@@ -274,21 +274,29 @@
 	}>('FlowGraphContext')
 
 	const flowModuleState = $derived(data.flowModuleStates?.[data.moduleId])
+	let colorClasses = $derived(
+		getNodeColorClasses(
+			!validateToolName(data.tool) ? 'Failure' : flowModuleState?.type,
+			$selectedId === data.moduleId
+		)
+	)
 </script>
 
 <NodeWrapper>
 	{#snippet children({ darkMode })}
-		{@const bgColor = getStateColor(flowModuleState?.type, darkMode, true, false)}
-		{@const bgHoverColor = getStateHoverColor(flowModuleState?.type, darkMode, true, false)}
-
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="relative" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
+		<div
+			class="relative bg-surface-secondary rounded-md"
+			onmouseenter={() => (hover = true)}
+			onmouseleave={() => (hover = false)}
+		>
 			<button
 				class={twMerge(
-					'text-left bg-surface h-6 flex items-center gap-1.5 rounded-sm text-secondary overflow-clip w-full outline-offset-0 outline-slate-500 dark:outline-gray-400',
-					$selectedId === data.moduleId ? 'outline outline-1' : 'active:outline active:outline-1'
+					'text-left h-6 flex items-center gap-1.5 rounded-md overflow-clip w-full outline-offset-0 drop-shadow-base',
+					colorClasses.outline,
+					colorClasses.text,
+					colorClasses.bg
 				)}
-				style={`background-color: ${hover ? bgHoverColor : bgColor};`}
 				onclick={() => data.eventHandlers.select(data.moduleId)}
 			>
 				{#if data.moduleId.startsWith(AI_TOOL_MESSAGE_PREFIX)}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
index 3362882375..61588e2319 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
@@ -230,9 +230,10 @@
 	import AssetGenericIcon from '$lib/components/icons/AssetGenericIcon.svelte'
 	import type { Edge, Node } from '@xyflow/svelte'
 
-	import { NODE } from '../../util'
+	import { getNodeColorClasses, NODE } from '../../util'
 	import { userStore } from '$lib/stores'
 	import { deepEqual } from 'fast-equals'
+	import { slide } from 'svelte/transition'
 
 	interface Props {
 		data: AssetN['data']
@@ -247,16 +248,19 @@
 		flowGraphAssetsCtx?.val.resourceMetadataCache[data.asset.path]
 	)
 	const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.asset))
+	const colors = $derived(getNodeColorClasses(undefined, isSelected))
 </script>
 
-<NodeWrapper>
+<NodeWrapper wrapperClass="bg-surface-secondary rounded-md">
 	{#snippet children({ darkMode })}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<Tooltip>
 			<div
 				class={twMerge(
-					'bg-surface h-6 flex items-center gap-1.5 rounded-sm text-tertiary border overflow-clip',
-					isSelected ? 'bg-surface-secondary !border-surface-inverse' : 'border-transparent'
+					'h-6 flex items-center gap-1.5 rounded-md drop-shadow-base overflow-clip transition-colors',
+					colors.outline,
+					colors.text,
+					colors.bg
 				)}
 				onmouseenter={() =>
 					flowGraphAssetsCtx && (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
@@ -266,7 +270,9 @@
 				<AssetGenericIcon
 					assetKind={data.asset.kind}
 					fill={''}
-					class="shrink-0 ml-1 fill-tertiary stroke-tertiary"
+					class="shrink-0 ml-1 {isSelected
+						? 'fill-accent stroke-accent'
+						: 'fill-tertiary stroke-tertiary'}"
 					size="16px"
 				/>
 				<span class="text-3xs truncate flex-1">
@@ -278,15 +284,17 @@
 						<svelte:fragment slot="text">Could not find resource</svelte:fragment>
 					</Tooltip>
 				{:else if isSelected && assetCanBeExplored(data.asset, cachedResourceMetadata) && !$userStore?.operator}
-					<ExploreAssetButton
-						btnClasses="rounded-none"
-						asset={data.asset}
-						noText
-						buttonVariant="contained"
-						s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
-						dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
-						_resourceMetadata={cachedResourceMetadata}
-					/>
+					<div transition:slide={{ axis: 'x', duration: 100 }}>
+						<ExploreAssetButton
+							btnClasses="rounded-none"
+							asset={data.asset}
+							noText
+							buttonVariant="accent"
+							s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
+							dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
+							_resourceMetadata={cachedResourceMetadata}
+						/>
+					</div>
 				{/if}
 			</div>
 			<svelte:fragment slot="text">
@@ -299,7 +307,7 @@
 						'text-xs',
 						data.asset.kind === 'resource'
 							? 'text-blue-400 cursor-pointer'
-							: 'dark:text-tertiary text-tertiary-inverse'
+							: 'dark:text-primary text-primary-inverse'
 					)}
 					onclick={() => {
 						if (data.asset.kind === 'resource')
@@ -308,7 +316,7 @@
 				>
 					{data.asset.path}
 				</a><br />
-				<span class="dark:text-tertiary text-tertiary-inverse text-xs"
+				<span class="dark:text-primary text-primary-inverse text-xs"
 					>{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
 				>
 			</svelte:fragment>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
index 88fb4b1059..9c637dd819 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
@@ -43,7 +43,7 @@
 			usePointerDownOutside
 			bind:isOpen
 			class={twMerge(
-				'!w-full text-2xs font-normal bg-surface h-6 pr-0.5 flex justify-center items-center rounded-sm text-tertiary border',
+				'!w-full text-2xs font-normal bg-surface h-6 pr-0.5 flex justify-center items-center rounded-sm text-primary border',
 				includesSelected ? 'bg-surface-secondary border-surface-inverse' : 'border-transparent',
 				'hover:bg-surface-secondary hover:border-surface-inverse active:opacity-55'
 			)}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
index 47bf4c869c..6230f631be 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
@@ -2,7 +2,6 @@
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { BranchAllEndN } from '../../graphBuilder.svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 
 	interface Props {
 		data: BranchAllEndN['data']
@@ -18,9 +17,6 @@
 			id={data.id}
 			selectable={true}
 			selected={false}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(data?.flowModuleState?.type, darkMode)}
 			on:select={(e) => {
 				data?.eventHandlers?.select(e.detail)
 			}}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
index 09ba0d81d8..8bf4c06225 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
@@ -4,19 +4,13 @@
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { X } from 'lucide-svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 	import type { BranchAllStartN } from '../../graphBuilder.svelte'
-	import { computeBorderStatus } from '../utils'
 
 	interface Props {
 		data: BranchAllStartN['data']
 	}
 
 	let { data }: Props = $props()
-
-	let borderStatus = $derived(
-		computeBorderStatus(data.branchIndex, 'branchall', data.flowModuleState)
-	)
 </script>
 
 <NodeWrapper offset={data.offset}>
@@ -25,11 +19,6 @@
 			label={data.label}
 			selectable
 			selected={false}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={borderStatus
-				? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
-				: undefined}
 			on:select={() => {
 				setTimeout(() => data.eventHandlers.select(data.id))
 			}}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
index 250fddd992..7539a4520e 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
@@ -4,8 +4,6 @@
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { X } from 'lucide-svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
-	import { computeBorderStatus } from '../utils'
 	import type { BranchOneStartN } from '../../graphBuilder.svelte'
 
 	interface Props {
@@ -13,10 +11,6 @@
 	}
 
 	let { data }: Props = $props()
-
-	let borderStatus = $derived(
-		computeBorderStatus(data.branchIndex + 1, 'branchone', data.flowModuleState)
-	)
 </script>
 
 <NodeWrapper offset={data.offset}>
@@ -26,9 +20,6 @@
 			preLabel={data.preLabel}
 			selectable
 			selected={data.selected}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={borderStatus ? getStateColor(borderStatus, darkMode) : undefined}
 			on:select={() => {
 				setTimeout(() => data?.eventHandlers?.select(data.id))
 			}}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
index 1da127d454..7e145094cf 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import { getStateColor } from '../../util'
 	import type { ForLoopEndN } from '../../graphBuilder.svelte'
 
 	interface Props {
@@ -20,8 +19,6 @@
 				selected={false}
 				id={data.id}
 				hideId
-				bgColor={getStateColor(undefined, darkMode)}
-				borderColor={getStateColor(data.flowModuleState?.type, darkMode)}
 				on:select={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}
@@ -32,8 +29,6 @@
 				selectable={true}
 				selected={false}
 				id={data.id}
-				bgColor={getStateColor(undefined, darkMode)}
-				borderColor={getStateColor(data.flowModuleState?.type, darkMode)}
 				on:select={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
index 9760664ee7..59e6d648c2 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import type { FlowModule, FlowStatusModule } from '$lib/gen'
-	import { getStateColor, getStateHoverColor } from '../../util'
-	import type { GraphModuleState } from '../../model'
+	import type { FlowModule } from '$lib/gen'
 	import { getContext } from 'svelte'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
 	import type { ForLoopStartN } from '../../graphBuilder.svelte'
@@ -31,16 +29,6 @@
 		return {}
 	}
 
-	function computeStatus(
-		state: GraphModuleState | undefined
-	): FlowStatusModule['type'] | undefined {
-		if (state?.type == 'InProgress' || state?.type == 'Success' || state?.type == 'Failure') {
-			let r = state?.flow_jobs_success?.[state?.selectedForloopIndex ?? 0]
-			if (r == undefined) return 'InProgress'
-			return r ? 'Success' : 'InProgress'
-		}
-	}
-
 	function isSelectedDescendant(
 		module: FlowModule,
 		selectedId: string
@@ -73,9 +61,6 @@
 			selected={false}
 			id={data.id}
 			hideId
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(computeStatus(data.flowModuleState), darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
index 2ea359f07a..9950c3a339 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
@@ -2,9 +2,9 @@
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { InputN } from '../../graphBuilder.svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
+	import InsertModulePopover from '$lib/components/flows/map/InsertModulePopover.svelte'
 	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
 	import { schemaToObject } from '$lib/schema'
 	import type { Schema } from '$lib/common'
@@ -36,10 +36,10 @@
 <NodeWrapper>
 	{#snippet children({ darkMode })}
 		{#if data.insertable && !data.hasPreprocessor}
-			<div class="absolute bottom-full left-0 right-0 flex center-center mb-3.5">
-				<InsertModuleButton
+			<div class="absolute bottom-full left-0 right-0 center-center mb-2.5">
+				<InsertModulePopover
 					disableAi={data.disableAi}
-					index={0}
+					allowTrigger
 					kind="preprocessor"
 					on:new={(e) => {
 						data?.eventHandlers.insert({
@@ -57,9 +57,15 @@
 							isPreprocessor: true
 						})
 					}}
-					clazz="w-[14px] h-[14px]"
-					iconSize={10}
-				/>
+				>
+					{#snippet trigger({ toggleOpen })}
+						<InsertModuleButton
+							onPress={toggleOpen}
+							title={`Add preprocessor step`}
+							id={`flow-editor-add-step-0`}
+						/>
+					{/snippet}
+				</InsertModulePopover>
 			</div>
 		{/if}
 		<VirtualItem
@@ -68,8 +74,6 @@
 			label={inputLabel}
 			selectable
 			selected={$selectedId === 'Input'}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
 			on:insert={(e) => {
 				setTimeout(() => data?.eventHandlers?.insert(e.detail))
 			}}
@@ -100,7 +104,6 @@
 			job={data.flowJob}
 			showJobStatus={data.showJobStatus}
 			flowHasChanged={data.flowHasChanged}
-			{darkMode}
 		>
 			{#snippet icon()}
 				{#if data.chatInputEnabled}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
index 0ad3f6f109..95408b7a7e 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -4,7 +4,6 @@
 	import MapItem from '$lib/components/flows/map/MapItem.svelte'
 	import { GitBranchPlus, Maximize2 } from 'lucide-svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 	import type { ModuleN } from '../../graphBuilder.svelte'
 	import { jobToGraphModuleState } from '$lib/components/modulesTest.svelte'
 
@@ -71,13 +70,7 @@
 					'/' +
 					(state?.iteration_total ?? '?')
 				: ''}
-			bgColor={getStateColor(data.editMode ? undefined : type, darkMode, true, state?.skipped)}
-			bgHoverColor={getStateHoverColor(
-				data.editMode ? undefined : type,
-				darkMode,
-				true,
-				state?.skipped
-			)}
+			nodeState={state?.skipped ? '_Skipped' : type}
 			moving={data.moving}
 			duration_ms={state?.duration_ms}
 			retries={state?.retries}
@@ -107,9 +100,6 @@
 			onEditInput={data.eventHandlers.editInput}
 			flowJob={data.flowJob}
 			isOwner={data.isOwner}
-			{type}
-			{darkMode}
-			skipped={state?.skipped}
 		/>
 
 		<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
index 0aa0b619f6..880822bfa4 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { twMerge } from 'tailwind-merge'
 	import { type NewAiToolN } from '../../graphBuilder.svelte'
 	import InsertModuleInner from '$lib/components/flows/map/InsertModuleInner.svelte'
-	import { Cross } from 'lucide-svelte'
+	import { Plus } from 'lucide-svelte'
 	import PopupV2 from '$lib/components/common/popup/PopupV2.svelte'
 	import { flip, offset } from 'svelte-floating-ui/dom'
 	import type { ComputeConfig } from 'svelte-floating-ui'
+	import { Button } from '$lib/components/common'
 
 	let funcDesc = $state('')
 	interface Props {
@@ -27,20 +27,19 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <PopupV2 bind:open {floatingConfig} target="#flow-editor">
 	{#snippet button()}
-		<button
-			title={`Add 'tool'
-			}`}
-			type="button"
-			class={twMerge(
-				'!w-full h-6 flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded'
-			)}
+		<Button
+			size="xs3"
+			variant="default"
 			onpointerdown={() => (open = !open)}
+			selected={open}
+			startIcon={{ icon: Plus }}
+			wrapperClasses="{open
+				? 'bg-surface-secondary'
+				: 'bg-surface-tertiary'} transition-colors drop-shadow-base"
+			btnClasses="gap-1 "
 		>
-			<div class="flex flex-row items-center gap-1 font-medium text-2xs">
-				<Cross size={12} />
-				tool
-			</div>
-		</button>
+			Tool
+		</Button>
 	{/snippet}
 	{#snippet children({ close })}
 		<InsertModuleInner
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
index dc6986fe52..2744fd2ac8 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 	import type { NoBranchN } from '../../graphBuilder.svelte'
 
 	interface Props {
@@ -19,9 +18,6 @@
 			hideId={true}
 			selectable={true}
 			selected={false}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(undefined, darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte b/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
index 39aae0e292..0a0dc4299e 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
@@ -24,10 +24,7 @@
 
 <DarkModeObserver bind:darkMode />
 
-<div
-	class={twMerge('relative shadow-md rounded-sm', wrapperClass)}
-	style={`margin-left: ${offset}px;`}
->
+<div class={twMerge('relative rounded-md', wrapperClass)} style={`margin-left: ${offset}px;`}>
 	{@render children?.({ darkMode })}
 </div>
 
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
index b22150aa3e..3917206edb 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 	import type { Writable } from 'svelte/store'
 	import { getContext } from 'svelte'
 	import type { ResultN } from '../../graphBuilder.svelte'
@@ -15,10 +14,6 @@
 	const { selectedId } = getContext<{
 		selectedId: Writable<string | undefined>
 	}>('FlowGraphContext')
-
-	const type = $derived(
-		data.success == undefined ? undefined : data.success ? 'Success' : 'Failure'
-	)
 </script>
 
 <NodeWrapper enableSourceHandle={false}>
@@ -29,17 +24,13 @@
 			selectable={true}
 			selected={$selectedId === 'Result'}
 			hideId={true}
-			bgColor={getStateColor(type, darkMode)}
-			bgHoverColor={getStateHoverColor(type, darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
 			nodeKind="result"
 			editMode={data.editMode}
 			job={data.job}
-			{type}
 			showJobStatus={data.showJobStatus}
-			{darkMode}
 		/>
 	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
index 320350a929..f4f14c32ed 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
@@ -4,7 +4,6 @@
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { Minimize2 } from 'lucide-svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 	import type { SubflowBoundN } from '../../graphBuilder.svelte'
 
 	interface Props {
@@ -21,9 +20,6 @@
 			preLabel={data.preLabel}
 			selectable
 			selected={data.selected}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={undefined}
 			on:select={() => {
 				setTimeout(() => data.eventHandlers?.select(data.id))
 			}}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
index 55707f08a2..7283739b5f 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
@@ -5,7 +5,7 @@
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import { Maximize2, Minimize2, Calendar } from 'lucide-svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
+	import { getNodeColorClasses } from '../../util'
 	import { setScheduledPollSchedule, type TriggerContext } from '$lib/components/triggers'
 	import VirtualItemWrapper from '$lib/components/flows/map/VirtualItemWrapper.svelte'
 	import { type Trigger, type TriggerType } from '$lib/components/triggers/utils'
@@ -43,18 +43,19 @@
 						schedule: triggersCount?.primary_schedule?.schedule
 					}
 	}
+
+	$: colorClasses = getNodeColorClasses('_VirtualItem', $selectedId == 'triggers')
 </script>
 
-<NodeWrapper wrapperClass="shadow-md rounded-sm">
+<NodeWrapper>
 	{#snippet children({ darkMode })}
 		{#if data.simplifiableFlow?.simplifiedFlow != true}
 			<TriggersWrapper
 				disableAi={data.disableAi}
 				isEditor={data.isEditor}
 				path={data.path}
-				bgColor={getStateColor(undefined, darkMode)}
-				bgHoverColor={getStateHoverColor(undefined, darkMode)}
 				showDraft={data.isEditor ?? false}
+				{colorClasses}
 				on:new={(e) => {
 					data?.eventHandlers.insert({
 						index: 0,
@@ -94,12 +95,11 @@
 			<VirtualItemWrapper
 				label="Check for new events"
 				selectable={true}
-				selected={$selectedId == 'triggers'}
 				id={'triggers'}
-				bgColor={getStateColor(undefined, darkMode)}
 				on:select={(e) => {
 					data?.eventHandlers?.select(e.detail)
 				}}
+				{colorClasses}
 			>
 				{#if triggersState.triggers.some((t) => t.isPrimary) || $triggersCount?.primary_schedule}
 					{@const { enabled, schedule } = getScheduleCfg(
diff --git a/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
index 971254129c..0615d8e0ab 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
@@ -2,7 +2,6 @@
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { BranchOneEndN } from '../../graphBuilder.svelte'
-	import { getStateColor, getStateHoverColor } from '../../util'
 
 	interface Props {
 		data: BranchOneEndN['data']
@@ -18,9 +17,6 @@
 			id={data.id}
 			selectable={true}
 			selected={false}
-			bgColor={getStateColor(undefined, darkMode)}
-			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(data?.flowModuleState?.type, darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index 2801161a24..2ffa6a8d49 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { NODE } from '../../util'
+	import { NODE, type FlowNodeColorClasses } from '../../util'
 	import { createEventDispatcher } from 'svelte'
 	import type { TriggerType } from '$lib/components/triggers/utils'
 	import TriggersBadge from './TriggersBadge.svelte'
@@ -17,9 +17,8 @@
 		selected: boolean
 		isEditor?: boolean
 		disableAi?: boolean
-		bgColor: string
-		bgHoverColor?: string
 		showDraft?: boolean
+		colorClasses: FlowNodeColorClasses
 		onSelect?: (triggerIndex: number) => void
 		onAddDraftTrigger?: (type: TriggerType) => void
 	}
@@ -30,10 +29,9 @@
 		selected,
 		isEditor = false,
 		disableAi = false,
-		bgColor,
-		bgHoverColor = '',
 		showDraft,
 		onSelect,
+		colorClasses,
 		onAddDraftTrigger
 	}: Props = $props()
 
@@ -42,8 +40,6 @@
 
 	const dispatch = createEventDispatcher()
 
-	let hover = $state(false)
-
 	let floatingConfig: ComputeConfig = {
 		strategy: 'fixed',
 		// @ts-ignore
@@ -57,19 +53,14 @@
 
 <div style={`width: ${NODE.width}px;`} use:floatingRef>
 	<button
-		style="background-color: {hover && bgHoverColor ? bgHoverColor : bgColor};"
-		class="relative flex w-full flex-row gap-1.5 px-2 p-1 items-center justify-center rounded-sm {selected
-			? 'outline  outline-2  outline-gray-600 dark:bg-white/5 dark:outline-gray-400'
-			: ''}"
-		onclick={() => {
-			dispatch('select')
-		}}
-		onmouseenter={() => (hover = true)}
-		onmouseleave={() => (hover = false)}
+		class="relative flex w-full flex-row gap-1.5 px-2 p-1 items-center justify-center rounded-md drop-shadow-base {colorClasses.outline} {colorClasses.bg}"
+		style="height: {NODE.height}px"
+		onclick={() => dispatch('select')}
 	>
 		<div
 			class={twMerge(
 				'flex flex-row items-center text-2xs font-normal',
+				colorClasses.text,
 				numberOfTriggers > 6 ? 'absolute left-0 -top-[20px]' : ''
 			)}
 		>
diff --git a/frontend/src/lib/components/graph/util.ts b/frontend/src/lib/components/graph/util.ts
index 526c37cdaa..437e3f1352 100644
--- a/frontend/src/lib/components/graph/util.ts
+++ b/frontend/src/lib/components/graph/util.ts
@@ -5,59 +5,124 @@ export const NODE = {
 	height: 34,
 	gap: {
 		horizontal: 50,
-		vertical: 50
+		vertical: 62
 	}
 }
 
-export function getStateColor(
-	state: FlowStatusModule['type'] | undefined,
-	isDark: boolean,
-	nonVirtualItem?: boolean,
-	isSkipped?: boolean
-): string {
-	switch (state) {
-		case 'Success':
-			if (isSkipped) {
-				return isDark ? '#1E3A8A' : 'rgb(191, 219, 254)'
-			} else {
-				return isDark ? '#059669' : 'rgb(193, 255, 216)'
-			}
-		case 'Failure':
-			return isDark ? '#dc2626' : 'rgb(248 113 113)'
-		case 'InProgress':
-			return isDark ? '#f59e0b' : 'rgb(253, 240, 176)'
-		case 'WaitingForEvents':
-			return isDark ? '#75599E' : '#c4b5fd'
-		case 'WaitingForExecutor':
-			return isDark ? '#ea580c' : 'rgb(255, 208, 193)'
-		default:
-			if (nonVirtualItem) {
-				return isDark ? '#2E3440' : 'white'
-			} else {
-				return isDark ? '#313742' : '#dfe6ee'
-			}
-	}
+export type FlowNodeColorClasses = {
+	text: string
+	bg: string
+	outline: string
+	badge: string
 }
+export type FlowNodeState = FlowStatusModule['type'] | '_VirtualItem' | '_Skipped' | undefined
 
-export function getStateHoverColor(
-	state: FlowStatusModule['type'] | undefined,
-	isDark: boolean,
-	nonVirtualItem?: boolean,
-	isSkipped?: boolean
-): string {
-	switch (state) {
-		case 'Success':
-		case 'Failure':
-		case 'InProgress':
-		case 'WaitingForEvents':
-		case 'WaitingForExecutor':
-			return getStateColor(state, isDark, nonVirtualItem, isSkipped)
+export function getNodeColorClasses(state: FlowNodeState, selected: boolean): FlowNodeColorClasses {
+	let outlined = ' outline outline-1 active:outline active:outline-1'
 
-		default:
-			if (nonVirtualItem) {
-				return isDark ? '#343B46' : '#f6f6f6'
-			} else {
-				return isDark ? '#343B46' : '#d5dee8'
+	let defaultStyle = {
+		selected: {
+			bg: 'bg-surface-accent-selected/30',
+			outline: 'outline-border-selected' + outlined,
+			text: 'text-accent',
+			badge: 'bg-blue-100 outline-border-selected text-blue-800'
+		},
+		notSelected: {
+			bg: 'bg-surface-tertiary',
+			outline: '',
+			text: 'text-emphasis',
+			badge: 'bg-component-virtual-node text-emphasis'
+		}
+	} satisfies Record<any, FlowNodeColorClasses>
+	let orangeStyle = {
+		selected: {
+			bg: 'bg-orange-200 dark:bg-[#905036]',
+			outline: 'outline-orange-500' + outlined,
+			text: 'text-orange-800 dark:text-orange-200',
+			badge: 'bg-orange-100 text-orange-700'
+		},
+		notSelected: {
+			bg: 'bg-orange-100 dark:bg-[#654338]',
+			outline: '',
+			text: 'text-orange-700 dark:text-orange-300',
+			badge: 'bg-orange-200 text-orange-700'
+		}
+	} satisfies Record<any, FlowNodeColorClasses>
+	let map = {
+		_VirtualItem: {
+			selected: defaultStyle.selected,
+			notSelected: {
+				bg: 'bg-component-virtual-node',
+				outline: '',
+				text: 'text-emphasis'
 			}
-	}
+		},
+		_Skipped: {
+			selected: defaultStyle.selected,
+			notSelected: {
+				bg: 'bg-blue-100 dark:bg-[#2D3B63]',
+				outline: '',
+				text: 'text-blue-600 dark:text-blue-200',
+				badge: 'bg-blue-200 outline-border-selected text-blue-800'
+			}
+		},
+		Success: {
+			selected: {
+				bg: 'bg-green-200 dark:bg-[#329E6A]',
+				outline: 'outline-green-500 dark:outline-green-400' + outlined,
+				text: 'text-green-800 dark:text-green-100',
+				badge: 'bg-green-100 text-green-700'
+			},
+			notSelected: {
+				bg: 'bg-green-100 dark:bg-[#3B7B5B]',
+				outline: '',
+				text: 'text-green-700 dark:text-green-100',
+				badge: 'bg-green-200 text-green-700'
+			}
+		},
+		Failure: {
+			selected: {
+				bg: 'bg-red-200 dark:bg-[#AA3E47]',
+				outline: 'outline-red-500' + outlined,
+				text: 'text-red-800 dark:text-red-100',
+				badge: 'bg-red-100 text-red-700'
+			},
+			notSelected: {
+				bg: 'bg-red-100 dark:bg-[#81383F]',
+				outline: '',
+				text: 'text-red-700 dark:text-red-200',
+				badge: 'bg-red-200 text-red-700'
+			}
+		},
+		InProgress: orangeStyle,
+		WaitingForExecutor: orangeStyle,
+		WaitingForEvents: {
+			selected: {
+				bg: 'bg-purple-200 dark:bg-[#8243BB]',
+				outline: 'outline-purple-500' + outlined,
+				text: 'text-purple-800 dark:text-purple-100',
+				badge: 'bg-purple-100 text-purple-700'
+			},
+			notSelected: {
+				bg: 'bg-purple-100 dark:bg-[#5F417E]',
+				outline: '',
+				text: 'text-purple-700 dark:text-purple-200',
+				badge: 'bg-purple-200 text-purple-700'
+			}
+		},
+		default: defaultStyle
+	} as Record<
+		NonNullable<FlowNodeState> | 'default',
+		Record<'selected' | 'notSelected', FlowNodeColorClasses>
+	>
+
+	let r =
+		map[state ?? 'default']?.[selected ? 'selected' : 'notSelected'] ??
+		defaultStyle[selected ? 'selected' : 'notSelected']
+	r.bg += ' transition-colors'
+	r.outline += ' transition-colors'
+	r.text += ' transition-colors'
+	r.badge = r.badge ?? ''
+
+	return r
 }
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index af3b1e944b..8e35713d4f 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -18,8 +18,8 @@
 		Code2,
 		FoldVertical,
 		LayoutDashboard,
+		ListFilterPlus,
 		SearchCode,
-		SlidersHorizontal,
 		UnfoldVertical
 	} from 'lucide-svelte'
 
@@ -42,6 +42,7 @@
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import { getContext, untrack } from 'svelte'
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
+	import TextInput from '../text_input/TextInput.svelte'
 	interface Props {
 		filter?: string
 		subtab?: 'flow' | 'script' | 'app'
@@ -361,7 +362,7 @@
 
 <CenteredPage>
 	<div
-		class="flex flex-wrap gap-2 items-center justify-between w-full mt-2"
+		class="flex flex-wrap gap-2 items-center justify-between w-full"
 		use:triggerableByAI={{
 			id: 'home-items-list',
 			description: 'Lists of scripts, flows, and apps'
@@ -376,24 +377,17 @@
 					}
 					setQuery($page.url, 'kind', v)
 				}}
-				class="h-10"
 			>
 				{#snippet children({ item })}
-					<ToggleButton value="all" label="All" class="text-sm px-4 py-2" {item} />
-					<ToggleButton
-						value="script"
-						icon={Code2}
-						label="Scripts"
-						class="text-sm px-4 py-2"
-						{item}
-					/>
+					<ToggleButton value="all" label="All" size="md" {item} />
+					<ToggleButton value="script" icon={Code2} label="Scripts" size="md" {item} />
 					{#if HOME_SEARCH_SHOW_FLOW}
 						<ToggleButton
 							value="flow"
 							label="Flows"
 							icon={FlowIcon}
-							class="text-sm px-4 py-2"
 							selectedColor="#14b8a6"
+							size="md"
 							{item}
 						/>
 					{/if}
@@ -401,23 +395,26 @@
 						value="app"
 						label="Apps"
 						icon={LayoutDashboard}
-						class="text-sm px-4 py-2"
 						selectedColor="#fb923c"
+						size="md"
 						{item}
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 
-		<div class="relative text-tertiary grow min-w-[100px]">
+		<div class="relative text-primary grow min-w-[100px]">
 			<!-- svelte-ignore a11y_autofocus -->
-			<input
-				autofocus
-				placeholder={HOME_SEARCH_PLACEHOLDER}
+			<TextInput
+				inputProps={{
+					autofocus: true,
+					placeholder: HOME_SEARCH_PLACEHOLDER
+				}}
+				size="md"
 				bind:value={filter}
-				class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
+				class="!pr-10"
 			/>
-			<button aria-label="Search" type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+			<button aria-label="Search" type="submit" class="absolute right-0 top-0 mt-2 mr-4">
 				<svg
 					class="h-4 w-4 fill-current"
 					xmlns="http://www.w3.org/2000/svg"
@@ -440,11 +437,8 @@
 		</div>
 		<Button
 			on:click={() => openSearchWithPrefilledText('#')}
-			variant="border"
-			size="sm"
-			spacingSize="lg"
-			wrapperClasses="h-10"
-			color="light"
+			variant="default"
+			unifiedSize="md"
 			endIcon={{
 				icon: SearchCode
 			}}
@@ -463,24 +457,24 @@
 			<div class="mt-10"></div>
 		{/if}
 		{#if !loading}
-			<div class="flex w-full flex-row-reverse gap-2 mt-4 mb-1 items-center h-6">
+			<div class="flex w-full flex-row-reverse gap-2 mt-2 mb-1 items-center h-6">
 				<Popover floatingConfig={{ placement: 'bottom-end' }}>
 					{#snippet trigger()}
 						<Button
 							startIcon={{
-								icon: SlidersHorizontal
+								icon: ListFilterPlus
 							}}
 							nonCaptureEvent
 							iconOnly
 							size="xs"
 							color="light"
-							variant="border"
+							variant="default"
 							spacingSize="xs2"
 						/>
 					{/snippet}
 					{#snippet content()}
 						<div class="p-4">
-							<span class="text-sm font-semibold">Filters</span>
+							<span class="text-sm font-semibold text-emphasis">Filters</span>
 							<div class="flex flex-col gap-2 mt-2">
 								<Toggle size="xs" bind:checked={archived} options={{ right: 'Only archived' }} />
 								{#if $userStore && !$userStore.operator}
@@ -506,10 +500,8 @@
 				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if treeView}
 					<Button
-						btnClasses="py-0 h-6"
-						size="xs"
-						variant="border"
-						color="light"
+						size="xs2"
+						variant="default"
 						on:click={() => (collapseAll = !collapseAll)}
 						startIcon={{
 							icon: collapseAll ? UnfoldVertical : FoldVertical
@@ -553,7 +545,7 @@
 				{showCode}
 			/>
 		{:else}
-			<div class="border rounded-md">
+			<div class="border rounded-md bg-surface-tertiary">
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path + (item.hash ? '/' + item.hash : ''))}
 					<Item
 						{item}
@@ -572,9 +564,12 @@
 				{/each}
 			</div>
 			{#if items && items?.length > 15 && nbDisplayed < items.length}
-				<span class="text-xs"
+				<span class="text-xs font-normal text-secondary"
 					>{nbDisplayed} items out of {items.length}
-					<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
+					<button
+						class="ml-4 text-xs font-normal text-primary hover:text-emphasis"
+						onclick={() => (nbDisplayed += 30)}>load 30 more</button
+					></span
 				>
 			{/if}
 		{/if}
diff --git a/frontend/src/lib/components/home/ListFilters.svelte b/frontend/src/lib/components/home/ListFilters.svelte
index 9efe2a4eb5..34cc8b2cfd 100644
--- a/frontend/src/lib/components/home/ListFilters.svelte
+++ b/frontend/src/lib/components/home/ListFilters.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { classNames } from '$lib/utils'
 	import { Folder, User } from 'lucide-svelte'
 	import { Badge } from '../common'
 	import { APP_TO_ICON_COMPONENT } from '../icons'
@@ -77,11 +76,8 @@
 		{#each filtersAndSelected as filter (filter)}
 			<div>
 				<Badge
-					class={classNames(
-						'cursor-pointer inline-flex items-center gap-1 align-middle',
-						filter === selectedFilter ? 'hover:bg-blue-200' : 'hover:bg-gray-200'
-					)}
-					on:click={() => {
+					class="inline-flex items-center gap-1 align-middle"
+					onclick={() => {
 						selectedFilter = selectedFilter == filter ? undefined : filter
 						if (selectedFilter) {
 							setQuery(new URL(window.location.href), queryName, selectedFilter)
@@ -89,8 +85,9 @@
 							setQuery(new URL(window.location.href), queryName, undefined)
 						}
 					}}
-					color={filter === selectedFilter ? 'blue' : 'gray'}
-					baseClass={filter === selectedFilter ? 'border border-blue-500' : 'border'}
+					color={'transparent'}
+					clickable
+					selected={filter === selectedFilter}
 				>
 					<span style="height: 12px" class="-mt-0.5">
 						{#if resourceType}
diff --git a/frontend/src/lib/components/home/NoItemFound.svelte b/frontend/src/lib/components/home/NoItemFound.svelte
index 997d4c2039..0c444488c7 100644
--- a/frontend/src/lib/components/home/NoItemFound.svelte
+++ b/frontend/src/lib/components/home/NoItemFound.svelte
@@ -1,6 +1,6 @@
 <div class="flex justify-center items-center h-48">
-	<div class="text-tertiary text-center">
-		<div class="text-2xl font-bold">No items found</div>
-		<div class="text-sm">Try changing your search or filters</div>
+	<div class="text-primary text-center">
+		<div class="text-lg font-semibold text-emphasis">No items found</div>
+		<div class="text-xs font-normal text-hint">Try changing your search or filters</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/home/TreeView.svelte b/frontend/src/lib/components/home/TreeView.svelte
index d455a1ce16..93081cae5d 100644
--- a/frontend/src/lib/components/home/TreeView.svelte
+++ b/frontend/src/lib/components/home/TreeView.svelte
@@ -40,18 +40,16 @@
 				class={twMerge('flex flex-row items-center gap-4 text-sm font-semibold')}
 				style={depth > 0 ? `padding-left: ${depth * 16}px;` : ''}
 			>
-				<div
-					class=" rounded-md p-1 flex justify-center items-center border bg-gray-50 border-gray-200 dark:bg-transparent dark:border-gray-900"
-				>
+				<div class="flex justify-center items-center">
 					{#if depth === 0}
-						<Folder size={20} color="#aaa" />
+						<Folder size={16} class="text-secondary" />
 					{:else}
-						<FolderTree size={20} color="#aaa" />
+						<FolderTree size={16} class="text-secondary" />
 					{/if}
 				</div>
 
 				<div>
-					<span class="whitespace-nowrap"
+					<span class="whitespace-nowrap text-xs text-emphasis font-semibold"
 						>{#if depth === 0}f/{/if}{item.folderName}</span
 					>
 					<div class="text-2xs font-normal text-secondary whitespace-nowrap">
@@ -61,15 +59,15 @@
 			</div>
 			<button class="w-full flex flex-row-reverse">
 				{#if opened}
-					<ChevronUp size={20} />
+					<ChevronUp size={16} />
 				{:else}
-					<ChevronDown size={20} />
+					<ChevronDown size={16} />
 				{/if}
 			</button>
 		</div>
 		{#if opened || isSearching}
 			<div>
-				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
+				{#each item.items.slice(0, showMax) as subItem, index ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] + '__' + index : undefined) ?? 'folder__' + subItem['folderName'] + '__' + index)}
 					<TreeView
 						{isSearching}
 						{collapseAll}
@@ -87,7 +85,7 @@
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="text-center text-sm text-secondary cursor-pointer hover:text-primary"
+						class="text-center text-xs py-2 text-secondary cursor-pointer hover:text-primary"
 						onclick={() => {
 							if (isFolder(item)) {
 								showMax += Math.min(30, item.items.length - showMax)
@@ -113,14 +111,14 @@
 				class={twMerge('flex flex-row items-center gap-4 text-sm font-semibold')}
 				style={depth > 0 ? `padding-left: ${depth * 16}px;` : ''}
 			>
-				<div
-					class=" rounded-md p-1 flex justify-center items-center border bg-gray-50 border-gray-200 dark:bg-transparent dark:border-gray-900"
-				>
-					<User size={20} color="#aaa" />
+				<div class="flex justify-center items-center">
+					<User size={16} class="text-secondary" />
 				</div>
 
 				<div>
-					<span class="whitespace-nowrap">u/{item.username}</span>
+					<span class="whitespace-nowrap text-xs text-emphasis font-semibold"
+						>u/{item.username}</span
+					>
 					<div class="text-2xs font-normal text-secondary whitespace-nowrap"
 						>({pluralize(item.items.length, ' item')})</div
 					>
@@ -128,15 +126,15 @@
 			</div>
 			<div class="w-full flex flex-row-reverse">
 				{#if opened}
-					<ChevronUp size={20} />
+					<ChevronUp size={16} />
 				{:else}
-					<ChevronDown size={20} />
+					<ChevronDown size={16} />
 				{/if}
 			</div>
 		</div>
 		{#if opened || isSearching}
 			<div>
-				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
+				{#each item.items.slice(0, showMax) as subItem, index ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] + '__' + index : undefined) ?? 'folder__' + subItem['folderName'] + '__' + index)}
 					<TreeView
 						{collapseAll}
 						item={subItem}
@@ -153,7 +151,7 @@
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="text-center text-sm text-secondary cursor-pointer py-2 hover:text-primary"
+						class="text-center text-xs text-secondary cursor-pointer py-2 hover:text-primary"
 						onclick={() => {
 							if (isUser(item)) {
 								showMax += Math.min(30, item.items.length - showMax)
diff --git a/frontend/src/lib/components/home/TreeViewRoot.svelte b/frontend/src/lib/components/home/TreeViewRoot.svelte
index e9f8f797fd..efe8279a87 100644
--- a/frontend/src/lib/components/home/TreeViewRoot.svelte
+++ b/frontend/src/lib/components/home/TreeViewRoot.svelte
@@ -33,10 +33,10 @@
 	</div>
 {:else if groupedItems.length === 0}
 	<div class="flex flex-row items-center justify-center">
-		<div class="text-gray-500 dark:text-gray-400">No items</div>
+		<div class="text-xs font-normal text-hint">No items</div>
 	</div>
 {:else}
-	<div class="border rounded-md">
+	<div class="border rounded-md bg-surface-tertiary">
 		{#each groupedItems.slice(0, nbDisplayed) as item (item['folderName'] ?? 'user__' + item['username'])}
 			{#if item}
 				<TreeView
@@ -54,9 +54,9 @@
 		{/each}
 	</div>
 	{#if groupedItems.length > 15 && nbDisplayed < groupedItems.length}
-		<span class="text-xs"
+		<span class="text-xs font-normal text-secondary"
 			>{nbDisplayed} root nodes out of {groupedItems.length}
-			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4 text-xs font-normal text-primary hover:text-emphasis" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 {/if}
diff --git a/frontend/src/lib/components/icons/MSTeamsIcon.svelte b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
index 0caf1558ed..d761a645a0 100644
--- a/frontend/src/lib/components/icons/MSTeamsIcon.svelte
+++ b/frontend/src/lib/components/icons/MSTeamsIcon.svelte
@@ -1,10 +1,83 @@
 <script lang="ts">
 	interface Props {
-		height?: string;
-		width?: string;
+		size?: number
 	}
 
-	let { height = '24px', width = '24px' }: Props = $props();
+	let { size = 24 }: Props = $props()
 </script>
 
-<svg {width} {height} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#5059C9" d="M10.765 6.875h3.616c.342 0 .619.276.619.617v3.288a2.272 2.272 0 01-2.274 2.27h-.01a2.272 2.272 0 01-2.274-2.27V7.199c0-.179.145-.323.323-.323zM13.21 6.225c.808 0 1.464-.655 1.464-1.462 0-.808-.656-1.463-1.465-1.463s-1.465.655-1.465 1.463c0 .807.656 1.462 1.465 1.462z"/><path fill="#7B83EB" d="M8.651 6.225a2.114 2.114 0 002.117-2.112A2.114 2.114 0 008.65 2a2.114 2.114 0 00-2.116 2.112c0 1.167.947 2.113 2.116 2.113zM11.473 6.875h-5.97a.611.611 0 00-.596.625v3.75A3.669 3.669 0 008.488 15a3.669 3.669 0 003.582-3.75V7.5a.611.611 0 00-.597-.625z"/><path fill="#000000" d="M8.814 6.875v5.255a.598.598 0 01-.596.595H5.193a3.951 3.951 0 01-.287-1.476V7.5a.61.61 0 01.597-.624h3.31z" opacity=".1"/><path fill="#000000" d="M8.488 6.875v5.58a.6.6 0 01-.596.595H5.347a3.22 3.22 0 01-.267-.65 3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.488 6.875v4.93a.6.6 0 01-.596.595H5.08a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z" opacity=".2"/><path fill="#000000" d="M8.163 6.875v4.93a.6.6 0 01-.596.595H5.079a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.66z" opacity=".2"/><path fill="#000000" d="M8.814 5.195v1.024c-.055.003-.107.006-.163.006-.055 0-.107-.003-.163-.006A2.115 2.115 0 016.593 4.6h1.625a.598.598 0 01.596.594z" opacity=".1"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z" opacity=".2"/><path fill="#000000" d="M8.163 5.52v.647a2.115 2.115 0 01-1.465-1.242h.87a.598.598 0 01.595.595z" opacity=".2"/><path fill="url(#microsoft-teams-color-16__paint0_linear_2372_494)" d="M1.597 4.925h5.969c.33 0 .597.267.597.596v5.958a.596.596 0 01-.597.596h-5.97A.596.596 0 011 11.479V5.521c0-.33.267-.596.597-.596z"/><path fill="#ffffff" d="M6.152 7.193H4.959v3.243h-.76V7.193H3.01v-.63h3.141v.63z"/><defs><linearGradient id="microsoft-teams-color-16__paint0_linear_2372_494" x1="2.244" x2="6.906" y1="4.46" y2="12.548" gradientUnits="userSpaceOnUse"><stop stop-color="#5A62C3"/><stop offset=".5" stop-color="#4D55BD"/><stop offset="1" stop-color="#3940AB"/></linearGradient></defs></svg>
\ No newline at end of file
+<svg
+	width="{size}px"
+	height="{size}px"
+	viewBox="0 0 16 16"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+>
+	<path
+		fill="#5059C9"
+		d="M10.765 6.875h3.616c.342 0 .619.276.619.617v3.288a2.272 2.272 0 01-2.274 2.27h-.01a2.272 2.272 0 01-2.274-2.27V7.199c0-.179.145-.323.323-.323zM13.21 6.225c.808 0 1.464-.655 1.464-1.462 0-.808-.656-1.463-1.465-1.463s-1.465.655-1.465 1.463c0 .807.656 1.462 1.465 1.462z"
+	/>
+	<path
+		fill="#7B83EB"
+		d="M8.651 6.225a2.114 2.114 0 002.117-2.112A2.114 2.114 0 008.65 2a2.114 2.114 0 00-2.116 2.112c0 1.167.947 2.113 2.116 2.113zM11.473 6.875h-5.97a.611.611 0 00-.596.625v3.75A3.669 3.669 0 008.488 15a3.669 3.669 0 003.582-3.75V7.5a.611.611 0 00-.597-.625z"
+	/>
+	<path
+		fill="#000000"
+		d="M8.814 6.875v5.255a.598.598 0 01-.596.595H5.193a3.951 3.951 0 01-.287-1.476V7.5a.61.61 0 01.597-.624h3.31z"
+		opacity=".1"
+	/>
+	<path
+		fill="#000000"
+		d="M8.488 6.875v5.58a.6.6 0 01-.596.595H5.347a3.22 3.22 0 01-.267-.65 3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z"
+		opacity=".2"
+	/>
+	<path
+		fill="#000000"
+		d="M8.488 6.875v4.93a.6.6 0 01-.596.595H5.08a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.985z"
+		opacity=".2"
+	/>
+	<path
+		fill="#000000"
+		d="M8.163 6.875v4.93a.6.6 0 01-.596.595H5.079a3.951 3.951 0 01-.172-1.15V7.498a.61.61 0 01.596-.624h2.66z"
+		opacity=".2"
+	/>
+	<path
+		fill="#000000"
+		d="M8.814 5.195v1.024c-.055.003-.107.006-.163.006-.055 0-.107-.003-.163-.006A2.115 2.115 0 016.593 4.6h1.625a.598.598 0 01.596.594z"
+		opacity=".1"
+	/>
+	<path
+		fill="#000000"
+		d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z"
+		opacity=".2"
+	/>
+	<path
+		fill="#000000"
+		d="M8.488 5.52v.699a2.115 2.115 0 01-1.79-1.293h1.195a.598.598 0 01.595.594z"
+		opacity=".2"
+	/>
+	<path
+		fill="#000000"
+		d="M8.163 5.52v.647a2.115 2.115 0 01-1.465-1.242h.87a.598.598 0 01.595.595z"
+		opacity=".2"
+	/>
+	<path
+		fill="url(#microsoft-teams-color-16__paint0_linear_2372_494)"
+		d="M1.597 4.925h5.969c.33 0 .597.267.597.596v5.958a.596.596 0 01-.597.596h-5.97A.596.596 0 011 11.479V5.521c0-.33.267-.596.597-.596z"
+	/>
+	<path fill="#ffffff" d="M6.152 7.193H4.959v3.243h-.76V7.193H3.01v-.63h3.141v.63z" />
+	<defs>
+		<linearGradient
+			id="microsoft-teams-color-16__paint0_linear_2372_494"
+			x1="2.244"
+			x2="6.906"
+			y1="4.46"
+			y2="12.548"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#5A62C3" />
+			<stop offset=".5" stop-color="#4D55BD" />
+			<stop offset="1" stop-color="#3940AB" />
+		</linearGradient>
+	</defs>
+</svg>
diff --git a/frontend/src/lib/components/icons/NextcloudIcon.svelte b/frontend/src/lib/components/icons/NextcloudIcon.svelte
index ff5e338723..b2d778f667 100644
--- a/frontend/src/lib/components/icons/NextcloudIcon.svelte
+++ b/frontend/src/lib/components/icons/NextcloudIcon.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
 	interface Props {
-		height?: string;
-		width?: string;
+		size?: number
 	}
 
-	let { height = '24px', width = '24px' }: Props = $props();
+	let { size = 24 }: Props = $props()
 </script>
 
-<svg role="img" viewBox="0 0 24 24" {width} {height} xmlns="http://www.w3.org/2000/svg" style="fill:currentcolor;"
+<svg
+	role="img"
+	viewBox="0 0 24 24"
+	width="{size}px"
+	height="{size}px"
+	xmlns="http://www.w3.org/2000/svg"
+	style="fill:currentcolor;"
 	><title>Nextcloud icon</title><path
 		d="M12.018 6.537c-2.5 0-4.6 1.712-5.241 4.015-.56-1.232-1.793-2.105-3.225-2.105A3.569 3.569 0 0 0 0 12a3.569 3.569 0 0 0 3.552 3.553c1.432 0 2.664-.874 3.224-2.106.641 2.304 2.742 4.016 5.242 4.016 2.487 0 4.576-1.693 5.231-3.977.569 1.21 1.783 2.067 3.198 2.067A3.568 3.568 0 0 0 24 12a3.569 3.569 0 0 0-3.553-3.553c-1.416 0-2.63.858-3.199 2.067-.654-2.284-2.743-3.978-5.23-3.977zm0 2.085c1.878 0 3.378 1.5 3.378 3.378 0 1.878-1.5 3.378-3.378 3.378A3.362 3.362 0 0 1 8.641 12c0-1.878 1.5-3.378 3.377-3.378zm-8.466 1.91c.822 0 1.467.645 1.467 1.468s-.644 1.467-1.467 1.468A1.452 1.452 0 0 1 2.085 12c0-.823.644-1.467 1.467-1.467zm16.895 0c.823 0 1.468.645 1.468 1.468s-.645 1.468-1.468 1.468A1.452 1.452 0 0 1 18.98 12c0-.823.644-1.467 1.467-1.467z"
 	/></svg
diff --git a/frontend/src/lib/components/icons/WindmillIcon.svelte b/frontend/src/lib/components/icons/WindmillIcon.svelte
index 500691faab..205e3c6030 100644
--- a/frontend/src/lib/components/icons/WindmillIcon.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon.svelte
@@ -7,15 +7,20 @@
 		white?: boolean
 		spin?: 'slow' | 'medium' | 'fast' | 'veryfast' | undefined
 		class?: string
+		size?: number
 	}
 
 	let {
-		height = '24px',
-		width = '24px',
+		height: heightProp = '24px',
+		width: widthProp = '24px',
 		white = false,
 		spin = undefined,
-		class: classNames = ''
+		class: classNames = '',
+		size = undefined
 	}: Props = $props()
+
+	let width = $derived(size ? `${size}px` : widthProp)
+	let height = $derived(size ? `${size}px` : heightProp)
 </script>
 
 {#if customIcon.white || customIcon.normal}
diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
index 3ed91cb8c1..75ff539ddb 100644
--- a/frontend/src/lib/components/jobs/JobPreview.svelte
+++ b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -134,7 +134,7 @@
 			</div>
 			<div class="w-1/2 h-full overflow-auto p-2">
 				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-					<div class="text-sm font-semibold text-tertiary mb-1">
+					<div class="text-xs font-semibold text-emphasis mb-1">
 						<div>Job is scheduled for</div>
 						<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
 					</div>
@@ -148,7 +148,7 @@
 						language={job?.language}
 					/>
 				{:else if job && `running` in job ? job.running : false}
-					<div class="text-sm font-semibold text-tertiary mb-1"> Job is still running </div>
+					<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
 					<LogViewer
 						jobId={job?.id}
 						duration={job?.['duration_ms']}
diff --git a/frontend/src/lib/components/meltComponents/MenuItem.svelte b/frontend/src/lib/components/meltComponents/MenuItem.svelte
index 37a1e02959..dbbb362cd9 100644
--- a/frontend/src/lib/components/meltComponents/MenuItem.svelte
+++ b/frontend/src/lib/components/meltComponents/MenuItem.svelte
@@ -11,6 +11,7 @@
 		target?: string | undefined
 		item: MenubarMenuElements['item']
 		class?: string | undefined
+		lightMode?: boolean
 		onClick?: (event: MouseEvent) => void
 		children?: import('svelte').Snippet
 		onFocusIn?: (event: FocusEvent) => void
@@ -25,6 +26,7 @@
 		target = undefined,
 		item,
 		class: classNames = undefined,
+		lightMode = false,
 		children,
 		onClick,
 		onFocusIn,
@@ -48,6 +50,7 @@
 		}}
 		{href}
 		class={classNames}
+		data-light-mode={lightMode}
 		role="menuitem"
 		aria-disabled={disabled}
 		tabindex={disabled ? -1 : undefined}
@@ -72,6 +75,7 @@
 		{disabled}
 		class={classNames}
 		role="menuitem"
+		data-light-mode={lightMode}
 		onfocusin={onFocusIn}
 		onfocusout={onFocusOut}
 	>
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index 7c7aaf13a6..31ba34aa7f 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -171,7 +171,7 @@
 		use:melt={$content}
 		transition:fly={{ duration: enableFlyTransition ? 100 : 0, y: -16 }}
 		class={twMerge(
-			'relative border rounded-md bg-surface shadow-lg',
+			'relative border rounded-md bg-surface-tertiary shadow-lg',
 			fullScreen
 				? `fixed !top-1/2 !left-1/2 !-translate-x-1/2 !-translate-y-1/2 !resize-none`
 				: 'w-fit',
@@ -217,6 +217,6 @@
 		@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-full;
 		@apply text-primary  transition-colors hover:bg-surface-hover;
 		@apply focus-visible:ring focus-visible:ring-gray-400 focus-visible:ring-offset-2;
-		@apply bg-surface p-0 text-sm font-medium;
+		@apply bg-surface p-0 text-sm font-semibold;
 	}
 </style>
diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte
index 05046c4a4e..297709b672 100644
--- a/frontend/src/lib/components/meltComponents/Tooltip.svelte
+++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte
@@ -37,8 +37,8 @@
 {#if !$$slots.default}
 	<div
 		class="inline-flex w-3 mx-0.5 h-3 {light
-			? 'text-tertiary-inverse'
-			: 'text-tertiary'} {$$props.class} "
+			? 'text-primary-inverse'
+			: 'text-primary'} {$$props.class} "
 		use:melt={$trigger}
 	>
 		<InfoIcon size={small ? 12 : 14} />
diff --git a/frontend/src/lib/components/preview/FlowPreviewStatus.svelte b/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
index bab46277cc..68587fbf24 100644
--- a/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
+++ b/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
@@ -18,16 +18,16 @@
 
 <div
 	class={twMerge(
-		'grid grid-cols-2 gap-4 mb-1 text-tertiary dark:text-gray-400',
+		'grid grid-cols-2 gap-4 mb-1 text-primary ',
 		extra && job && !hideJobId ? 'grid-cols-3' : 'grid-cols-2'
 	)}
 >
 	<JobStatus {job} />
 	{#if job && !hideJobId}
 		<div>
-			<div class="text-primary whitespace-nowrap truncate text-sm">
+			<div class="text-primary whitespace-nowrap truncate text-xs">
 				{#if ['flow', 'flowpreview', 'flownode'].includes(job.job_kind)}
-					<span class="font-semibold mr-1">Flow:</span>
+					<span class="font-semibold text-emphasis text-xs mr-1">Flow:</span>
 				{/if}
 				<a
 					rel="noreferrer"
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index b7a03d1de1..a748d40e96 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -155,7 +155,7 @@
 		title={JSON.stringify(v)}
 	>
 		{#if v === NEVER_TESTED_THIS_FAR}
-			<span class="text-2xs text-tertiary font-normal"> Test the flow to see a value </span>
+			<span class="text-2xs text-primary font-normal"> Test the flow to see a value </span>
 		{:else if v == undefined}
 			<span class="text-2xs">undefined</span>
 		{:else if v == null}
@@ -215,7 +215,7 @@
 				color="light"
 				size="xs3"
 				iconOnly
-				btnClasses="text-tertiary hover:text-primary"
+				btnClasses="text-primary hover:text-primary"
 				startIcon={{ icon: Search }}
 				on:click={() => {
 					searchOpen = true
@@ -234,16 +234,15 @@
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 
 				<Button
-					color="light"
 					size="xs2"
-					variant="border"
+					variant="default"
 					on:click={collapse}
 					wrapperClasses="!inline-flex w-fit"
 					btnClasses="font-mono h-4 text-2xs px-1 font-thin text-primary rounded-[0.275rem]"
 					>-</Button
 				>
 			{/if}
-			{#if level == 0 && topBrackets}<span class="text-tertiary">{openBracket}</span>{/if}
+			{#if level == 0 && topBrackets}<span class="text-primary">{openBracket}</span>{/if}
 			<ul
 				class={`w-full ${
 					level === 0 ? `border-none ${topBrackets ? 'pl-2' : ''}` : 'pl-2 border-l border-dotted'
@@ -279,7 +278,7 @@
 							</Button>
 							{@render metaData?.(key)}
 						</AnimatedButton>
-						<span class="text-2xs -ml-0.5 text-tertiary">:</span>
+						<span class="text-2xs -ml-0.5 text-primary">:</span>
 
 						{#if getTypeAsString(jsonFiltered[key]) === 'object'}
 							<ObjectViewer
@@ -310,7 +309,7 @@
 			</ul>
 			{#if level == 0 && topBrackets}
 				<div class="flex">
-					<span class="text-tertiary">{closeBracket}</span>
+					<span class="text-primary">{closeBracket}</span>
 					{#if getTypeAsString(jsonFiltered) === 's3object'}
 						<a
 							class="text-secondary underline font-semibold text-2xs whitespace-nowrap ml-1 w-fit"
@@ -340,12 +339,11 @@
 	{#if fullyCollapsed}
 		<span>
 			<Button
-				color="light"
 				size="xs2"
-				variant="border"
+				variant="default"
 				on:click={collapse}
 				wrapperClasses="!inline-flex w-fit"
-				btnClasses="h-4 text-[9px] px-1  text-primary rounded-[0.275rem]"
+				btnClasses="h-4 text-[9px] px-1 text-primary rounded-[0.275rem]"
 			>
 				{openBracket}{collapsedSymbol}{closeBracket}
 			</Button>
@@ -354,11 +352,11 @@
 {:else if topBrackets}
 	<span class="text-primary">{openBracket}{closeBracket}</span>
 {:else if jsonFiltered == undefined}
-	<span class="text-tertiary text-2xs ml-2">undefined</span>
+	<span class="text-primary text-2xs ml-2">undefined</span>
 {:else if typeof jsonFiltered != 'object'}
 	{@render renderScalar('', jsonFiltered)}
 {:else}
-	<span class="text-tertiary text-2xs ml-2">No items</span>
+	<span class="text-primary text-2xs ml-2">No items</span>
 {/if}
 
 <style lang="postcss">
@@ -368,10 +366,10 @@
 	}
 
 	.val.undefined {
-		@apply text-tertiary;
+		@apply text-primary;
 	}
 	.val.null {
-		@apply text-tertiary;
+		@apply text-primary;
 	}
 	.val.string {
 		@apply text-green-600 dark:text-green-400/80;
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index 69829c1508..5620a1ef62 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -17,7 +17,6 @@
 	export let displayContext = true
 	export let error: boolean = false
 	export let allowCopy = false
-	export let alwaysOn = false
 	export let previousId: string | undefined = undefined
 
 	let variables: Record<string, string> = {}
@@ -198,20 +197,19 @@
 	onDestroy(() => {
 		clearTimeout(timeout)
 	})
+
+	const categoryContentClasses = 'overflow-y-auto pb-4'
+	const categoryTitleClasses = 'font-semibold text-xs text-emphasis'
 </script>
 
-<div class="flex flex-col h-full rounded">
+<div class="flex flex-col h-full">
 	<div class="px-1 pb-1">
 		<ClearableInput bind:value={search} placeholder="Search prop..." />
 	</div>
 	<!-- <div
 	class="px-2 pt-2 grow relative"
 	class:bg-surface-secondary={!$propPickerConfig && !alwaysOn} -->
-	<Scrollable
-		scrollableClass="grow relative min-h-0 px-1 xl:px-2 py-1 shrink {!$propPickerConfig && !alwaysOn
-			? 'bg-surface-secondary'
-			: ''}"
-	>
+	<Scrollable scrollableClass="grow relative min-h-0 px-1 xl:px-2 py-1 shrink">
 		<!-- <div
 			class="px-2 pt-2 grow relative"
 			class:bg-surface-secondary={!$propPickerConfig && !alwaysOn}
@@ -225,13 +223,8 @@
 			</div>
 		{/if}
 		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
-			<div class="flex justify-between items-center space-x-1">
-				<span class="font-normal text-sm text-secondary"
-					><span class="font-mono">flow_input</span></span
-				>
-				<div class="flex space-x-2 items-center"></div>
-			</div>
-			<div class="overflow-y-auto pb-2">
+			<span class={categoryTitleClasses}>Flow Input</span>
+			<div class={categoryContentClasses}>
 				<ObjectViewer
 					{allowCopy}
 					pureViewer={!$propPickerConfig}
@@ -242,8 +235,8 @@
 			</div>
 		{/if}
 		{#if error}
-			<span class="font-normal text-sm text-secondary">Error</span>
-			<div class="overflow-y-auto pb-2">
+			<span class={categoryTitleClasses}>Error</span>
+			<div class={categoryContentClasses}>
 				<ObjectViewer
 					{allowCopy}
 					pureViewer={!$propPickerConfig}
@@ -260,8 +253,8 @@
 			</div>
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
 				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
-					<span class="font-normal text-sm text-secondary">Suggested Results</span>
-					<div class="overflow-y-auto pb-2">
+					<span class={categoryTitleClasses}>Suggested Results</span>
+					<div class={categoryContentClasses}>
 						<ObjectViewer
 							{allowCopy}
 							pureViewer={!$propPickerConfig}
@@ -272,8 +265,8 @@
 						/>
 					</div>
 				{/if}
-				<span class="font-normal text-sm text-tertiary font-mono">results</span>
-				<div class="overflow-y-auto pb-2">
+				<span class={categoryTitleClasses}>Results</span>
+				<div class={categoryContentClasses}>
 					<ObjectViewer
 						expandedEvenOnLevel0={previousId}
 						{allowCopy}
@@ -287,8 +280,8 @@
 			{/if}
 		{:else}
 			{#if pickableProperties.hasResume}
-				<span class="font-normal text-sm text-secondary">Resume payloads</span>
-				<div class="overflow-y-auto pb-2">
+				<span class={categoryTitleClasses}>Resume payloads</span>
+				<div class={categoryContentClasses}>
 					<ObjectViewer
 						{allowCopy}
 						pureViewer={!$propPickerConfig}
@@ -303,8 +296,8 @@
 			{/if}
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
 				{#if !filterActive && suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
-					<span class="font-normal text-sm text-secondary">Suggested Results</span>
-					<div class="overflow-y-auto pb-2">
+					<span class={categoryTitleClasses}>Suggested Results</span>
+					<div class={categoryContentClasses}>
 						<ObjectViewer
 							{allowCopy}
 							pureViewer={!$propPickerConfig}
@@ -316,9 +309,8 @@
 					</div>
 				{/if}
 				{#if Object.keys(resultByIdFiltered ?? {}).length > 0}
-					<div class="overflow-y-auto pb-2 pt-2">
-						<span class="font-normal text-sm text-tertiary font-mono">results</span>
-
+					<span class={categoryTitleClasses}>Results</span>
+					<div class={categoryContentClasses}>
 						<ObjectViewer
 							{allowCopy}
 							pureViewer={!$propPickerConfig}
@@ -335,14 +327,12 @@
 
 		{#if displayContext}
 			{#if !filterActive || $inputMatches?.some((match) => match.word === 'variable')}
-				<div class="overflow-y-auto pb-2 pt-4">
-					<span class="font-normal text-xs text-secondary">Variables:</span>
-
+				<span class={categoryTitleClasses}>Variables</span>
+				<div class={categoryContentClasses}>
 					{#if displayVariable}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={() => {
 								displayVariable = false
 							}}
@@ -359,9 +349,8 @@
 						/>
 					{:else}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={async () => {
 								await loadVariables()
 								displayVariable = true
@@ -375,14 +364,12 @@
 				</div>
 			{/if}
 			{#if !filterActive || $inputMatches?.some((match) => match.word === 'resource')}
-				<div class="overflow-y-auto pb-2">
-					<span class="font-normal text-xs text-secondary">Resources:</span>
-
+				<span class={categoryTitleClasses}>Resources</span>
+				<div class={categoryContentClasses}>
 					{#if displayResources}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={() => {
 								displayResources = false
 							}}
@@ -399,9 +386,8 @@
 						/>
 					{:else}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={async () => {
 								await loadResources()
 								displayResources = true
diff --git a/frontend/src/lib/components/propertyPicker/WarningMessage.svelte b/frontend/src/lib/components/propertyPicker/WarningMessage.svelte
index 9e357f9185..619de4ecd3 100644
--- a/frontend/src/lib/components/propertyPicker/WarningMessage.svelte
+++ b/frontend/src/lib/components/propertyPicker/WarningMessage.svelte
@@ -1,3 +1,3 @@
 <div class="flex px-2 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
-	<div class="text-xs font-medium text-yellow-700 dark:text-yellow-800">Require testing flow</div>
+	<div class="text-xs font-semibold text-yellow-700 dark:text-yellow-800">Require testing flow</div>
 </div>
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
index 60027a2a12..c29f9e8a3b 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
@@ -658,8 +658,7 @@
 		{#snippet actions()}
 			<div class="flex flex-row gap-4">
 				<Button
-					variant="border"
-					color="light"
+					variant="default"
 					disabled={!savedApp || savedApp.draft_only}
 					on:click={async () => {
 						if (!savedApp) {
@@ -774,7 +773,7 @@
 					>
 						<Badge
 							color="gray"
-							class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all flex gap-1"
+							class="center-center !bg-surface-secondary !text-primary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all flex gap-1"
 						>
 							<Pen size={14} />Path
 						</Badge>
@@ -821,7 +820,7 @@
 					<Bug size={14} />
 					<div>Debug runs</div>
 
-					<div class="text-2xs text-tertiary"
+					<div class="text-2xs text-primary"
 						>({jobs?.length > 99 ? '99+' : (jobs?.length ?? 0)})</div
 					>
 				</div>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
index 8db51872dc..ff2556db23 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
@@ -169,9 +169,8 @@
 				{/if}
 
 				<Button
-					variant="border"
+					variant="default"
 					size="xs2"
-					color="light"
 					on:click={async () => {
 						editor?.format()
 					}}
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
index dbeb645b2a..56f12a90c0 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
@@ -44,8 +44,7 @@
 			/>
 			<Button
 				size="xs"
-				color="light"
-				variant="border"
+				variant="default"
 				btnClasses="!rounded-full !p-1"
 				title="Create a new background runnable"
 				aria-label="Create a new background runnable"
@@ -76,7 +75,7 @@
 						{/if}
 					{/each}
 				{:else}
-					<div class="text-xs text-tertiary">No backend runnable</div>
+					<div class="text-xs text-primary">No backend runnable</div>
 				{/if}
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
index a68745f82c..9d31a088a7 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
@@ -105,7 +105,7 @@
 		<Pane size={55}>
 			{#if runnable?.type === 'runnableByName' && runnable.inlineScript}
 				{#if runnable.inlineScript.language == 'frontend'}
-					<div class="text-sm text-tertiary">Frontend scripts not supported for raw apps</div>
+					<div class="text-sm text-primary">Frontend scripts not supported for raw apps</div>
 				{:else}
 					<RawAppInlineScriptEditor
 						on:createScriptFromInlineScript={() =>
@@ -145,8 +145,8 @@
 		</Pane>
 		<Pane size={45}>
 			<Tabs bind:selected={selectedTab}>
-				<Tab value="inputs">Inputs</Tab>
-				<Tab value="test">Test</Tab>
+				<Tab value="inputs" label="Inputs" />
+				<Tab value="test" label="Test" />
 				{#snippet content()}
 					{#if selectedTab == 'inputs'}
 						{#if runnable?.fields}
@@ -174,7 +174,7 @@
 								{/each}
 							</div>
 						{:else}
-							<div class="text-tertiary text-sm">No inputs</div>
+							<div class="text-primary text-xs">No inputs</div>
 						{/if}
 					{:else if selectedTab == 'test'}
 						<SplitPanesWrapper>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte
index 8a9bce38a1..682f592558 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte
@@ -52,7 +52,7 @@
 					bind:runnable={runnables[selectedRunnable]}
 				/>{/key}
 		{:else}
-			<div class="text-sm text-tertiary text-center py-8 px-2">
+			<div class="text-sm text-primary text-center py-8 px-2">
 				No runnable at id {selectedRunnable}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
index 2c4834ea04..8af542c413 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
@@ -86,7 +86,7 @@
 					{/if}
 				</div>
 				{#if displayType}
-					<div class="text-xs text-tertiary mr-1">
+					<div class="text-xs text-primary mr-1">
 						{fieldType === 'array' && subFieldType
 							? `${fieldTypeToTsType(subFieldType)}[]`
 							: fieldTypeToTsType(fieldType)}
@@ -96,7 +96,7 @@
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
-					<ToggleButtonGroup class="h-7" bind:selected={componentInput.type}>
+					<ToggleButtonGroup bind:selected={componentInput.type}>
 						{#snippet children({ item })}
 							<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
 							<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
@@ -119,7 +119,7 @@
 				/>
 			</div>
 		{:else if componentInput?.type === 'user' || componentInput?.type == undefined}
-			<span class="text-2xs italic text-tertiary">Field's value is a frontend input</span>
+			<span class="text-2xs italic text-primary">Field's value is a frontend input</span>
 		{/if}
 		{#if componentInput?.type === 'user' && ((fieldType == 'object' && format?.startsWith('resource-') && format !== 'resource-s3_object') || fieldType == 'resource')}
 			<div class="flex flex-row items-center">
diff --git a/frontend/src/lib/components/runs/JobRunsPreview.svelte b/frontend/src/lib/components/runs/JobRunsPreview.svelte
index 78dffdf776..8b0a9954fd 100644
--- a/frontend/src/lib/components/runs/JobRunsPreview.svelte
+++ b/frontend/src/lib/components/runs/JobRunsPreview.svelte
@@ -16,7 +16,7 @@
 	import Popover from '../Popover.svelte'
 	import { isFlowPreview, isScriptPreview, truncateRev } from '$lib/utils'
 	import { createEventDispatcher, setContext, untrack } from 'svelte'
-	import { ListFilter, LoaderCircle } from 'lucide-svelte'
+	import { Calendar, ListFilter, LoaderCircle } from 'lucide-svelte'
 	import FlowAssetsHandler, { initFlowGraphAssetsCtx } from '../flows/FlowAssetsHandler.svelte'
 	import JobAssetsViewer from '../assets/JobAssetsViewer.svelte'
 
@@ -183,11 +183,10 @@
 			</div>
 			<a
 				href="{base}/run/{job?.id}?workspace={job?.workspace_id}"
-				class="flex flex-row gap-1 items-center"
+				class="text-xs font-semibold"
 				target={blankLink ? '_blank' : undefined}
 			>
-				<span class="font-semibold text-sm leading-6">ID:</span>
-				<span class="text-sm">{job?.id ?? ''}</span>
+				ID: {job?.id ?? ''}
 			</a>
 
 			<div class="w-full">
@@ -199,9 +198,16 @@
 			</div>
 
 			{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-				<div class="text-sm font-semibold text-tertiary mb-1">
-					<div>Job is scheduled for</div>
-					<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
+				<div
+					class="flex flex-row gap-4 items-center mb-1 w-full bg-surface-tertiary rounded-md p-4 border"
+				>
+					<Calendar size={16} class="text-accent" />
+					<div class="flex flex-col gap-1">
+						<span class="text-2xs font-normal text-secondary">Job is scheduled for</span>
+						<span class="text-xs font-semibold text-emphasis"
+							>{new Date(job?.['scheduled_for']).toLocaleString()}</span
+						>
+					</div>
 				</div>
 			{/if}
 
@@ -221,11 +227,11 @@
 						</div>
 					{:else}
 						<Tabs bind:selected={viewTab}>
-							<Tab size="xs" value="result">Results</Tab>
-							<Tab size="xs" value="logs">Logs</Tab>
-							<Tab size="xs" value="assets">Assets</Tab>
+							<Tab value="result" label="Results" />
+							<Tab value="logs" label="Logs" />
+							<Tab value="assets" label="Assets" />
 							{#if isScriptPreview(job?.job_kind)}
-								<Tab size="xs" value="code">Code</Tab>
+								<Tab value="code" label="Code" />
 							{/if}
 						</Tabs>
 
@@ -298,7 +304,7 @@
 							<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
 						</div>
 					{:else}
-						<div class="text-sm font-semibold text-tertiary mb-1"> Job is still running </div>
+						<div class="text-sm font-semibold text-primary mb-1"> Job is still running </div>
 						<LogViewer
 							jobId={job?.id}
 							duration={job?.['duration_ms']}
diff --git a/frontend/src/lib/components/runs/ManuelDatePicker.svelte b/frontend/src/lib/components/runs/ManuelDatePicker.svelte
index 84a4f12a9f..81bd03cf6e 100644
--- a/frontend/src/lib/components/runs/ManuelDatePicker.svelte
+++ b/frontend/src/lib/components/runs/ManuelDatePicker.svelte
@@ -38,7 +38,7 @@
 						label: 'Within last minute',
 						computeMinMax: () => computeMinMaxInc(60 * 1000)
 					}
-			  ]
+				]
 			: []),
 		{
 			label: 'Within last 5 minutes',
@@ -70,16 +70,14 @@
 			}
 		},
 		...fixedManualDates
-
 	]
 
 	const dispatch = createEventDispatcher()
 </script>
 
 <Button
-	color="light"
-	size="xs"
-	variant="border"
+	unifiedSize="md"
+	variant="default"
 	on:click={() => {
 		const ts = computeMinMax()
 		if (ts) {
diff --git a/frontend/src/lib/components/runs/MobileFilters.svelte b/frontend/src/lib/components/runs/MobileFilters.svelte
index a32151ae6f..8271897001 100644
--- a/frontend/src/lib/components/runs/MobileFilters.svelte
+++ b/frontend/src/lib/components/runs/MobileFilters.svelte
@@ -8,7 +8,7 @@
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
 	<svelte:fragment slot="trigger">
-		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
+		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
 			Filters
 		</Button>
 	</svelte:fragment>
diff --git a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
index 7882005409..19d373beae 100644
--- a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
+++ b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
@@ -53,7 +53,7 @@
 				</Button>
 			{/snippet}
 			{#if args.length > 100000 || (args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG')}
-				<div class="text-sm mb-2 text-tertiary">
+				<div class="text-sm mb-2 text-primary">
 					<a
 						download="windmill-args.json"
 						href={`data:text/json;charset=utf-8,${encodeURIComponent(args)}`}
diff --git a/frontend/src/lib/components/runs/QueuePopover.svelte b/frontend/src/lib/components/runs/QueuePopover.svelte
index aa42e269e3..bede71a09a 100644
--- a/frontend/src/lib/components/runs/QueuePopover.svelte
+++ b/frontend/src/lib/components/runs/QueuePopover.svelte
@@ -42,7 +42,7 @@
 					>{job.id} <ExternalLink size={10} />
 				</a>
 				<div class="w-32">{displayDate(job.created_at)}</div>
-				<div class="text-2xs text-tertiary">tag: {job.tag}</div>
+				<div class="text-2xs text-primary">tag: {job.tag}</div>
 			</div>
 		{/each}
 	</div>
diff --git a/frontend/src/lib/components/runs/RunOption.svelte b/frontend/src/lib/components/runs/RunOption.svelte
index 88abd5286f..5bd89e80aa 100644
--- a/frontend/src/lib/components/runs/RunOption.svelte
+++ b/frontend/src/lib/components/runs/RunOption.svelte
@@ -15,7 +15,9 @@
 <div class="flex flex-col items-start w-fit gap-0.5">
 	<div class="text-xs truncate">
 		{#if forAttr}
-			<label for={forAttr} class="text-hint" class:text-transparent={noLabel}>{label}</label>
+			<label for={forAttr} class="text-hint text-2xs font-normal" class:text-transparent={noLabel}
+				>{label}</label
+			>
 		{:else}
 			<span class:text-transparent={noLabel}>{label}</span>
 		{/if}
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 1c25bcb578..e38959f881 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -107,7 +107,7 @@
 <div
 	class={twMerge(
 		'hover:bg-surface-hover cursor-pointer',
-		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+		selected ? 'bg-surface-accent-selected/30' : '',
 		'grid items-center h-full'
 	)}
 	class:grid-runs-table={!containsLabel && !selectionMode && showTag}
@@ -212,7 +212,7 @@
 	</div>
 
 	<!-- Job duration-->
-	<div class="text-2xs font-normal text-secondary pr-2">
+	<div class="text-2xs font-normal text-primary pr-2">
 		{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 			{msToReadableTime(job.duration_ms, 2)}
 		{:else}
@@ -230,7 +230,7 @@
 				<Tooltip class="h-full">
 					<div class="relative">
 						{#if job && job.parent_job}
-							<span class="absolute -top-1 -right-1 text-xs text-blue-500">*</span>
+							<span class="absolute -top-1 -right-1 text-xs text-accent">*</span>
 						{/if}
 						<JobKindIcon size={14} />
 					</div>
@@ -254,7 +254,7 @@
 					{/snippet}
 				</Tooltip>
 
-				<div class="whitespace-nowrap text-xs text-secondary truncate">
+				<div class="whitespace-nowrap text-xs text-primary truncate">
 					{#if job.script_path}
 						<div class="flex flex-row gap-1 items-center">
 							{#if isExternal}
@@ -292,11 +292,7 @@
 									class="w-fit"
 								>
 									{#snippet buttonReplacement()}
-										<div
-											class="p-1 hover:bg-surface cursor-pointer rounded-md text-gray-300 hover:text-primary"
-										>
-											<ListFilterPlus size={14} />
-										</div>
+										{@render filterButton()}
 									{/snippet}
 								</DropdownV2>
 							{/if}
@@ -326,7 +322,7 @@
 		</div>
 	{/if}
 	<!-- Author and schedule-->
-	<div class="flex justify-start pr-4 text-secondary">
+	<div class="flex justify-start pr-4 text-primary">
 		{#if job && job.schedule_path}
 			<div class="flex flex-row items-center gap-1 w-full -ml-2">
 				<Button
@@ -337,7 +333,11 @@
 				>
 					<Calendar size={14} />
 				</Button>
-				<div class="text-xs truncate text-ellipsis text-left" dir="rtl" title={job.schedule_path}>
+				<div
+					class="text-xs text-primary font-normal truncate text-ellipsis text-left"
+					dir="rtl"
+					title={job.schedule_path}
+				>
 					{job.schedule_path}
 				</div>
 				<DropdownV2
@@ -350,17 +350,17 @@
 					class="w-fit"
 				>
 					{#snippet buttonReplacement()}
-						<div
-							class="p-1 hover:bg-surface cursor-pointer rounded-md text-gray-300 hover:text-primary"
-						>
-							<ListFilterPlus size={14} />
-						</div>
+						{@render filterButton()}
 					{/snippet}
 				</DropdownV2>
 			</div>
 		{:else}
 			<div class="flex flex-row gap-1 items-center w-full">
-				<div class="text-xs truncate text-ellipsis text-left" dir="rtl" title={job.created_by}>
+				<div
+					class="text-xs font-normal text-primary truncate text-ellipsis text-left"
+					dir="rtl"
+					title={job.created_by}
+				>
 					{job.created_by ?? ''}
 				</div>
 				{#if !isExternal}
@@ -375,11 +375,7 @@
 						class="w-fit"
 					>
 						{#snippet buttonReplacement()}
-							<div
-								class="p-1 hover:bg-surface cursor-pointer rounded-md text-gray-300 hover:text-primary"
-							>
-								<ListFilterPlus size={14} />
-							</div>
+							{@render filterButton()}
 						{/snippet}
 					</DropdownV2>
 				{/if}
@@ -391,7 +387,7 @@
 	{#if showTag}
 		<div class="flex justify-start gap-1">
 			{#if job.tag}
-				<span class="text-xs text-secondary truncate" title={job.tag}>{job.tag}</span>
+				<span class="text-xs text-primary font-normal truncate" title={job.tag}>{job.tag}</span>
 			{/if}
 		</div>
 	{/if}
@@ -404,9 +400,7 @@
 				href="{base}/run/{job.id}?workspace={job.workspace_id}"
 				class={twMerge(
 					'text-right float-right  px-2',
-					selected
-						? 'text-blue-500 hover:text-primary'
-						: 'text-gray-300 dark:text-gray-500 hover:text-primary dark:hover:text-primary'
+					selected ? 'text-accent' : 'text-secondary hover:text-accent'
 				)}
 				title="See run detail in a new tab"
 			>
@@ -415,3 +409,9 @@
 		</div>
 	{/if}
 </div>
+
+{#snippet filterButton()}
+	<div class="p-1 cursor-pointer rounded-md text-hint/50 hover:text-primary">
+		<ListFilterPlus size={14} />
+	</div>
+{/snippet}
diff --git a/frontend/src/lib/components/runs/RunsBatchActionsDropdown.svelte b/frontend/src/lib/components/runs/RunsBatchActionsDropdown.svelte
index 9274aea02e..5c59aebdfc 100644
--- a/frontend/src/lib/components/runs/RunsBatchActionsDropdown.svelte
+++ b/frontend/src/lib/components/runs/RunsBatchActionsDropdown.svelte
@@ -45,18 +45,18 @@
 	<div class="h-8 flex flex-row items-center gap-1">
 		<Button
 			startIcon={{ icon: X }}
-			size="xs"
-			color="gray"
-			variant="contained"
+			iconOnly
+			unifiedSize="md"
+			variant="default"
 			on:click={() => onSetSelectionMode(false)}
 		/>
 		{#if selectionMode == 'cancel'}
 			<Button
 				disabled={selectionCount == 0}
 				startIcon={{ icon: Check }}
-				size="xs"
-				color="red"
-				variant="contained"
+				unifiedSize="md"
+				variant="accent"
+				destructive
 				on:click={onCancelSelectedJobs}
 			>
 				Cancel {jobCountString(selectionCount)}
@@ -66,9 +66,8 @@
 			<Button
 				disabled={selectionCount == 0}
 				startIcon={{ icon: Check }}
-				size="xs"
-				color="green"
-				variant="contained"
+				unifiedSize="md"
+				variant="accent"
 				on:click={onReRunSelectedJobs}
 			>
 				Re-run {jobCountString(selectionCount)}
@@ -96,15 +95,17 @@
 		]}
 	>
 		{#snippet buttonReplacement()}
-			<div
-				class="px-2 h-[30px] border flex flex-row items-center hover:bg-surface-hover cursor-pointer rounded-md gap-2"
+			<Button
+				nonCaptureEvent
+				variant="default"
+				unifiedSize="md"
+				startIcon={{ icon: SquareMousePointer }}
+				endIcon={{ icon: ChevronDown }}
 			>
-				<SquareMousePointer size={16} />
 				{#if !small}
-					<span class="text-xs min-w-[5rem]">Batch actions</span>
+					<span>Batch actions</span>
 				{/if}
-				<ChevronDown size={16} />
-			</div>
+			</Button>
 		{/snippet}
 	</DropdownV2>
 {/if}
diff --git a/frontend/src/lib/components/runs/RunsFilter.svelte b/frontend/src/lib/components/runs/RunsFilter.svelte
index 62425b9591..4ffdace346 100644
--- a/frontend/src/lib/components/runs/RunsFilter.svelte
+++ b/frontend/src/lib/components/runs/RunsFilter.svelte
@@ -17,6 +17,7 @@
 	import RunOption from './RunOption.svelte'
 	import DropdownSelect from '../DropdownSelect.svelte'
 	import TooltipV2 from '$lib/components/meltComponents/Tooltip.svelte'
+	import TextInput from '../text_input/TextInput.svelte'
 
 	interface Props {
 		// Filters
@@ -183,10 +184,9 @@
 		</RunOption>
 	{/if}
 	<!-- Filter by -->
-	<div class="flex flex-row gap-4">
+	<div class="flex flex-row gap-2">
 		<RunOption label="Filter by" for="filter-by">
 			<ToggleButtonGroup
-				class="h-9"
 				bind:selected={filterBy}
 				on:selected={(e) => {
 					if (e.detail != filterBy) {
@@ -227,7 +227,6 @@
 						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
 						clearable
 						onClear={() => ((user = null), dispatch('reset'))}
-						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (usernames.push(item), (user = item))}
 						createText="Press enter to use this value"
 						id="user"
@@ -242,7 +241,6 @@
 						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
 						clearable
 						onClear={() => ((folder = null), dispatch('reset'))}
-						inputClass="!max-h-9 min-w-36 border-none"
 						id="folder"
 					/>
 				{/key}
@@ -255,7 +253,6 @@
 						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
 						clearable
 						onClear={() => ((path = null), dispatch('reset'))}
-						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (paths.push(item), (path = item))}
 						createText="Press enter to use this value"
 						id="path"
@@ -285,20 +282,21 @@
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedLabel}
-							onkeydown={(e) => {
-								if (labelTimeout) {
-									clearTimeout(labelTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								type: 'text',
+								onkeydown: (e) => {
+									if (labelTimeout) {
+										clearTimeout(labelTimeout)
+									}
 
-								labelTimeout = setTimeout(() => {
-									label = displayedLabel
-								}, 1000)
+									labelTimeout = setTimeout(() => {
+										label = displayedLabel
+									}, 1000)
+								}
 							}}
+							bind:value={() => displayedLabel ?? undefined, (v) => (displayedLabel = v ?? null)}
 						/>
 						<div class="absolute -top-4 right-0">
 							<Toggle
@@ -333,21 +331,24 @@
 					{/if}
 
 					<!-- svelte-ignore a11y_autofocus -->
-					<input
-						autofocus
-						type="text"
-						class="!h-[32px] py-1 !text-xs min-w-36"
-						bind:value={displayedConcurrencyKey}
-						onkeydown={(e) => {
-							if (concurrencyKeyTimeout) {
-								clearTimeout(concurrencyKeyTimeout)
-							}
+					<TextInput
+						inputProps={{
+							autofocus: true,
+							type: 'text',
+							onkeydown: (e) => {
+								if (concurrencyKeyTimeout) {
+									clearTimeout(concurrencyKeyTimeout)
+								}
 
-							concurrencyKeyTimeout = setTimeout(() => {
-								concurrencyKey = displayedConcurrencyKey
-							}, 1000)
+								concurrencyKeyTimeout = setTimeout(() => {
+									concurrencyKey = displayedConcurrencyKey
+								}, 1000)
+							}
 						}}
-						id="concurrencyKey"
+						bind:value={
+							() => displayedConcurrencyKey ?? undefined,
+							(v) => (displayedConcurrencyKey = v ?? null)
+						}
 					/>
 				{/key}
 			</RunOption>
@@ -368,21 +369,22 @@
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedTag}
-							onkeydown={(e) => {
-								if (tagTimeout) {
-									clearTimeout(tagTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								type: 'text',
+								id: 'tag',
+								onkeydown: (e) => {
+									if (tagTimeout) {
+										clearTimeout(tagTimeout)
+									}
 
-								tagTimeout = setTimeout(() => {
-									tag = displayedTag
-								}, 1000)
+									tagTimeout = setTimeout(() => {
+										tag = displayedTag
+									}, 1000)
+								}
 							}}
-							id="tag"
+							bind:value={() => displayedTag ?? undefined, (v) => (displayedTag = v ?? null)}
 						/>
 						<div class="absolute -top-4 right-0">
 							<Toggle
@@ -411,21 +413,22 @@
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedSchedule}
-							onkeydown={(e) => {
-								if (tagTimeout) {
-									clearTimeout(tagTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								type: 'text',
+								onkeydown: (e) => {
+									if (tagTimeout) {
+										clearTimeout(tagTimeout)
+									}
 
-								tagTimeout = setTimeout(() => {
-									schedulePath = displayedSchedule
-								}, 1000)
+									tagTimeout = setTimeout(() => {
+										schedulePath = displayedSchedule
+									}, 1000)
+								},
+								id: 'schedulePath'
 							}}
-							id="schedulePath"
+							bind:value={displayedSchedule}
 						/>
 					</div>
 				{/key}
@@ -447,21 +450,21 @@
 						{/if}
 
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							class="!h-[32px] py-1 !text-xs min-w-36"
-							bind:value={displayedWorker}
-							onkeydown={(e) => {
-								if (workerTimeout) {
-									clearTimeout(workerTimeout)
-								}
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								onkeydown: (e) => {
+									if (workerTimeout) {
+										clearTimeout(workerTimeout)
+									}
 
-								workerTimeout = setTimeout(() => {
-									worker = displayedWorker
-								}, 1000)
+									workerTimeout = setTimeout(() => {
+										worker = displayedWorker
+									}, 1000)
+								},
+								id: 'worker'
 							}}
-							id="worker"
+							bind:value={() => displayedWorker ?? undefined, (v) => (displayedWorker = v ?? null)}
 						/>
 						<div class="absolute -top-4 right-0">
 							<Toggle
@@ -525,7 +528,7 @@
 				selected={jobKindsCat}
 			/>
 		{:else}
-			<ToggleButtonGroup bind:selected={jobKindsCat} class="h-9">
+			<ToggleButtonGroup bind:selected={jobKindsCat}>
 				{#snippet children({ item })}
 					<ToggleButton value="all" label="All" {item} />
 					<ToggleButton
@@ -572,7 +575,6 @@
 	<!-- Status -->
 	<RunOption label="Status" for="status">
 		<ToggleButtonGroup
-			class="h-9"
 			selected={success ?? 'all'}
 			on:selected={({ detail }) => {
 				success = detail === 'all' ? undefined : detail
@@ -587,7 +589,10 @@
 					tooltip="Running"
 					class="whitespace-nowrap"
 					icon={CirclePlay}
-					selectedColor="yellow"
+					iconProps={{
+						class:
+							'group-data-[state=on]:text-yellow-600 dark:group-data-[state=on]:text-yellow-400'
+					}}
 					{item}
 				/>
 				<ToggleButton
@@ -595,7 +600,9 @@
 					tooltip="Success"
 					class="whitespace-nowrap"
 					icon={CircleCheck}
-					selectedColor="green"
+					iconProps={{
+						class: 'group-data-[state=on]:text-green-500 dark:group-data-[state=on]:text-green-300'
+					}}
 					{item}
 				/>
 				<ToggleButton
@@ -603,7 +610,9 @@
 					tooltip="Failure"
 					class="whitespace-nowrap"
 					icon={CircleAlert}
-					selectedColor="red"
+					iconProps={{
+						class: 'group-data-[state=on]:text-red-500 dark:group-data-[state=on]:text-red-300'
+					}}
 					{item}
 				/>
 				{#if success == 'waiting'}
@@ -639,19 +648,17 @@
 	>
 		{#snippet trigger()}
 			<Button
-				color="light"
-				variant="contained"
-				size="xs"
+				variant="default"
+				unifiedSize="md"
 				nonCaptureEvent={true}
 				startIcon={{ icon: ListFilterPlus }}
 				iconOnly
-				btnClasses="bg-surface-secondary py-[8.5px]"
 			></Button>
 		{/snippet}
 
 		{#snippet content()}
 			<Section label="Filters">
-				<div class="w-102 flex flex-col gap-4">
+				<div class="w-102 flex flex-col gap-6">
 					{#if mobile}
 						{#if $workspaceStore == 'admins'}
 							<Label label="Workspaces">
@@ -943,27 +950,32 @@
 
 					<Label label="Show skipped flows">
 						<div class="flex flex-row gap-1 items-center">
-							<Toggle size="xs" bind:checked={isSkipped} />
-							<Tooltip>Skipped flows are flows that did an early break</Tooltip>
+							<Toggle size="sm" bind:checked={isSkipped} />
 						</div>
+						{#snippet header()}
+							<Tooltip>Skipped flows are flows that did an early break</Tooltip>
+						{/snippet}
 					</Label>
 
-					<div class="flex flex-col gap-1">
-						<span class="text-xs leading-6">
-							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-						</span>
+					<div class="flex flex-col gap-6">
 						<Label label="Filter by args">
 							<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
+							<span class="text-2xs text-secondary">
+								{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
+							</span>
 						</Label>
 						<Label label="Filter by result">
 							<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
+							<span class="text-2xs text-secondary">
+								{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
+							</span>
 						</Label>
 					</div>
 
 					<div class="flex flex-row gap-2 justify-between">
 						<Button
-							size="xs"
-							color="light"
+							unifiedSize="md"
+							variant="default"
 							on:click={() => {
 								argFilter = ''
 								resultFilter = ''
@@ -973,8 +985,8 @@
 						</Button>
 
 						<Button
-							size="xs"
-							color="dark"
+							unifiedSize="md"
+							variant="accent"
 							on:click={() => {
 								argFilter = copyArgFilter
 								resultFilter = copyResultFilter
diff --git a/frontend/src/lib/components/runs/RunsQueue.svelte b/frontend/src/lib/components/runs/RunsQueue.svelte
index 41c37d342e..8337280445 100644
--- a/frontend/src/lib/components/runs/RunsQueue.svelte
+++ b/frontend/src/lib/components/runs/RunsQueue.svelte
@@ -85,7 +85,7 @@
 				: ''}>{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}</div
 		>
 		<div class="truncate text-2xs !text-secondary mt-0.5">
-			<Button size="xs2" color="light" on:click={() => onJobsWaiting?.()}>
+			<Button variant="subtle" unifiedSize="md" on:click={() => onJobsWaiting?.()}>
 				{#if success == 'waiting'}
 					<div class="flex flex-row items-center gap-1">
 						Reset filter
@@ -111,7 +111,7 @@
 					: ''}>{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}</div
 			>
 			<div class="truncate text-2xs !text-secondary">
-				<Button size="xs2" color="light" on:click={() => onJobsSuspended?.()}>
+				<Button unifiedSize="md" variant="subtle" on:click={() => onJobsSuspended?.()}>
 					{#if success == 'suspended'}
 						<div class="flex flex-row items-center gap-1">
 							Reset filter
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
index 26d8fb7ce2..ac6a3f771d 100644
--- a/frontend/src/lib/components/runs/RunsTable.svelte
+++ b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -275,7 +275,7 @@
 						{#if jobOrDate}
 							{#if jobOrDate?.type === 'date'}
 								<div
-									class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-2 h-[42px] flex items-center"
+									class="bg-surface-secondary py-2 font-semibold text-xs pl-2 h-[42px] flex items-center"
 								>
 									{jobOrDate.date}
 								</div>
diff --git a/frontend/src/lib/components/schema/AddPropertyForm.svelte b/frontend/src/lib/components/schema/AddPropertyForm.svelte
index 9aaabe6ade..eb313d71db 100644
--- a/frontend/src/lib/components/schema/AddPropertyForm.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyForm.svelte
@@ -24,8 +24,7 @@
 		}}
 	/>
 	<Button
-		variant="contained"
-		color="dark"
+		variant="accent"
 		size="xs"
 		startIcon={{ icon: Plus }}
 		id="flow-editor-add-property"
diff --git a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
index 189d8d64e5..92c8c8c10b 100644
--- a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
@@ -39,8 +39,7 @@
 			{disabled}
 		/>
 		<Button
-			variant="contained"
-			color="dark"
+			variant="accent"
 			size="xs"
 			id="flow-editor-add-property"
 			on:click={() => {
diff --git a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
index cea82e7dfe..53eb057ea9 100644
--- a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
@@ -96,7 +96,6 @@
 
 	<Toggle
 		bind:checked={jsonView}
-		label="JSON View"
 		size="xs"
 		options={{
 			right: 'JSON editor',
@@ -178,7 +177,7 @@
 								</div>
 							{/if}
 						{:else}
-							<div class="text-tertiary"> Value is undefined </div>
+							<div class="text-primary"> Value is undefined </div>
 						{/if}
 					</div>
 				{/each}
@@ -223,7 +222,7 @@
 		{/snippet}
 	</Drawer>
 {:else}
-	<div class="mt-2 bg-surface-secondary rounded-md border py-2.5">
+	<div class="mt-2 bg-surface-tertiary rounded-md border py-2.5">
 		<SimpleEditor
 			bind:this={editor}
 			small
diff --git a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
index f1aea70a63..f4f99eb23b 100644
--- a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
@@ -179,8 +179,7 @@
 								bind:value={variantName}
 							/>
 							<Button
-								variant="border"
-								color="light"
+								variant="default"
 								size="xs"
 								on:click={() => {
 									createVariant(variantName)
@@ -232,8 +231,7 @@
 								bind:value={variantName}
 							/>
 							<Button
-								variant="border"
-								color="light"
+								variant="default"
 								size="xs"
 								on:click={() => {
 									if (oneOfSelected) {
@@ -329,7 +327,7 @@
 					/>
 				{:else if customObjectSelected === 'json-schema-resource'}
 					{#if format == undefined}
-						<div class="text-xs text-tertiary my-1">
+						<div class="text-xs text-primary my-1">
 							Select a <code>json_schema</code> resource as a reusable JSON schema template
 						</div>
 					{/if}
@@ -451,9 +449,10 @@
 		}}
 	/>
 	{#if showExpr}
-		<div class="mt-2 bg-surface-secondary rounded-md pl-4">
+		<div class="mt-2 bg-surface-tertiary rounded-md pl-3">
 			<SimpleEditor
-				yPadding={8}
+				small
+				yPadding={7}
 				extraLib={`declare const fields: Record<${propsNames
 					?.filter((x) => x != name)
 					.map((x) => `"${x}"`)
@@ -466,7 +465,7 @@
 				autoHeight
 			/>
 		</div>
-		<div class="flex flex-row-reverse text-2xs text-tertiary">
+		<div class="flex flex-row-reverse text-2xs text-primary">
 			<div>
 				Other fields are available under <code>fields</code> (e.g:
 				<code>fields.foo == 42</code>)
diff --git a/frontend/src/lib/components/schema/SchemaFormDND.svelte b/frontend/src/lib/components/schema/SchemaFormDND.svelte
index ea2ae4f743..6c72adf0d6 100644
--- a/frontend/src/lib/components/schema/SchemaFormDND.svelte
+++ b/frontend/src/lib/components/schema/SchemaFormDND.svelte
@@ -141,7 +141,7 @@
 >
 	{#snippet actions()}
 		{#if !disableDnd}
-			<div class="w-4 h-8 cursor-move ml-2 handle mt-[9px]" aria-label="drag-handle" use:dragHandle>
+			<div class="w-4 h-6 cursor-move ml-2 handle mt-[9px]" aria-label="drag-handle" use:dragHandle>
 				<GripVertical size={16} />
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/schema/SchemaPickerRow.svelte b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
index 8e0c0c114a..f436d3452e 100644
--- a/frontend/src/lib/components/schema/SchemaPickerRow.svelte
+++ b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
@@ -110,7 +110,7 @@
 	<div class="flex items-center justify-center border grow min-w-0 rounded-md">
 		<div
 			class={twMerge(
-				'grow min-w-0 text-xs p-1 font-normal text-tertiary text-left  whitespace-nowrap overflow-hidden text-ellipsis',
+				'grow min-w-0 text-xs p-1 font-normal text-primary text-left  whitespace-nowrap overflow-hidden text-ellipsis',
 				hovering && 'border-surface'
 			)}
 		>
@@ -144,7 +144,7 @@
 			{#snippet content()}
 				<div class="relative p-2 max-w-[400px]">
 					{#if payloadData === 'WINDMILL_TOO_BIG'}
-						<div class="text-center text-tertiary text-xs">
+						<div class="text-center text-primary text-xs">
 							{#if limitPayloadSize}
 								Payload too big to be used
 							{:else}
@@ -165,7 +165,7 @@
 							{#if !objectViewerLoaded && isTooBig}
 								<div class="flex justify-center items-center p-4">
 									<Loader2 size={20} class="animate-spin text-primary" />
-									<span class="ml-2 text-xs text-tertiary">Loading data...</span>
+									<span class="ml-2 text-xs text-primary">Loading data...</span>
 								</div>
 							{/if}
 
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 5ee5046fee..3c4f1df466 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -116,12 +116,12 @@
 </Drawer>
 <div class="h-full flex flex-col">
 	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
-		<Tab value="logs" size="xs">Logs & Result</Tab>
+		<Tab value="logs" label="Logs & Result" />
 		{#if customUi?.disableHistory !== true}
-			<Tab value="history" size="xs">History</Tab>
+			<Tab value="history" label="History" />
 		{/if}
 		{#if showCaptures && customUi?.disableTriggerCaptures !== true}
-			<Tab value="captures" size="xs">Trigger captures</Tab>
+			<Tab value="captures" label="Trigger captures" />
 		{/if}
 
 		{#snippet content()}
@@ -173,7 +173,7 @@
 										</div>
 									</div>
 								{:else}
-									<div class="text-sm text-tertiary p-2 flex justify-between items-center">
+									<div class="text-sm text-primary p-2 flex justify-between items-center">
 										<span>
 											{#if previewIsLoading}
 												<Loader2 class="animate-spin" />
diff --git a/frontend/src/lib/components/scripts/CreateActionsScript.svelte b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
index 3491dffe7d..7d42f4a72b 100644
--- a/frontend/src/lib/components/scripts/CreateActionsScript.svelte
+++ b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
@@ -11,12 +11,12 @@
 	<Button
 		{aiId}
 		{aiDescription}
-		size="sm"
-		spacingSize="xl"
-		color="marine"
+		unifiedSize="lg"
+		variant="accent"
 		startIcon={{ icon: Plus }}
 		href="{base}/scripts/add"
+		endIcon={{ icon: Code2 }}
 	>
-		Script <Code2 class="ml-1.5" size={18} />
+		Script
 	</Button>
 </div>
diff --git a/frontend/src/lib/components/search/GlobalSearchModal.svelte b/frontend/src/lib/components/search/GlobalSearchModal.svelte
index 2540e69784..e23e4ac307 100644
--- a/frontend/src/lib/components/search/GlobalSearchModal.svelte
+++ b/frontend/src/lib/components/search/GlobalSearchModal.svelte
@@ -685,9 +685,7 @@
 					{#if tab === 'default'}
 						{#if (itemMap[tab] ?? []).filter((e) => (combinedItems ?? []).includes(e)).length > 0}
 							<div class="p-2">
-								<div class="py-2 px-1 text-xs font-semibold text-tertiary">
-									Flows/Scripts/Apps
-								</div>
+								<div class="py-2 px-1 text-xs font-semibold text-primary"> Flows/Scripts/Apps </div>
 								{#each (itemMap[tab] ?? []).filter((e) => (combinedItems ?? []).includes(e)) as el}
 									<QuickMenuItem
 										onselect={(shift) => {
@@ -719,7 +717,7 @@
 									bind:mouseMoved
 								/>
 								<div class="flex w-full justify-center items-center">
-									<div class="text-tertiary text-center">
+									<div class="text-primary text-center">
 										<div class="pt-1 text-sm">Tip: press `esc` to quickly clear the search bar</div>
 									</div>
 								</div>
diff --git a/frontend/src/lib/components/search/RunsSearch.svelte b/frontend/src/lib/components/search/RunsSearch.svelte
index c12c14f988..31e1cd1c2a 100644
--- a/frontend/src/lib/components/search/RunsSearch.svelte
+++ b/frontend/src/lib/components/search/RunsSearch.svelte
@@ -112,13 +112,13 @@
 <div class="flex h-full p-2 divide-x">
 	{#if loadingCompletedRuns}
 		<div class="flex w-full justify-center items-center h-48">
-			<div class="text-tertiary text-center">
+			<div class="text-primary text-center">
 				<Loader2 size={34} class="animate-spin" />
 			</div>
 		</div>
 	{:else if loadedRuns && loadedRuns.length > 0}
 		<div class="w-4/12 max-h-[70vh] flex flex-col">
-			<div class="text-tertiary text-xs">
+			<div class="text-primary text-xs">
 				{runSearchTotalCount} jobs matched the query
 			</div>
 			<div class="overflow-y-auto">
@@ -126,7 +126,7 @@
 					{#if r.search_id === 'opt:load_more_jobs'}
 						<div class="pt-4"></div>
 						{#if loadingMoreJobs}
-							<div class="pl-8 pb-8 text-tertiary text-center">
+							<div class="pl-8 pb-8 text-primary text-center">
 								<Loader2 size={20} class="animate-spin" />
 							</div>
 						{:else}
@@ -187,12 +187,12 @@
 										<div class="text-xs"> {r?.document.script_path} </div>
 										<div class="flex flex-row gap-2">
 											<div
-												class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+												class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 											>
 												{displayDateOnly(new Date(r?.document.created_at[0]))}
 											</div>
 											<div
-												class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
+												class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 											>
 												<TimeAgo date={r?.document.created_at[0] ?? ''} />
 											</div>
@@ -235,7 +235,7 @@
 		</div>
 	{:else}
 		<div class="flex flex-col h-full w-full justify-center items-center h-48">
-			<div class="text-tertiary text-center">
+			<div class="text-primary text-center">
 				{#if searchTerm === ''}
 					<div class="text-2xl font-bold">Enter your search terms</div>
 					<div class="text-sm">Start typing to do full-text search across completed runs</div>
diff --git a/frontend/src/lib/components/select/DraggableTags.svelte b/frontend/src/lib/components/select/DraggableTags.svelte
index dc554dcbc1..adb6f49e52 100644
--- a/frontend/src/lib/components/select/DraggableTags.svelte
+++ b/frontend/src/lib/components/select/DraggableTags.svelte
@@ -29,8 +29,8 @@
 	<li
 		role="listitem"
 		class={twMerge(
-			allowClear ? 'pr-1' : 'pr-3',
-			'pl-3 min-h-6 border bg-surface rounded-full flex items-center gap-0.5',
+			allowClear ? 'pr-0' : 'pr-2',
+			'pl-2 min-h-6 border bg-surface rounded-full flex items-center',
 			currentlyDraggingIndex !== undefined ? 'hover:opacity-20' : ''
 		)}
 		style={currentlyDraggingIndex === index
@@ -51,10 +51,10 @@
 			dragPos = [0, 0]
 		}}
 	>
-		<span class="text-sm select-none">{item.label || item.value}</span>
+		<span class="text-xs select-none">{item.label || item.value}</span>
 		{#if allowClear}
 			<CloseButton
-				class="text-hint bg-transparent"
+				class="text-hint bg-transparent border-none"
 				small
 				on:close={(e) => (onRemove(item), e.stopPropagation())}
 			/>
diff --git a/frontend/src/lib/components/select/MultiSelect.svelte b/frontend/src/lib/components/select/MultiSelect.svelte
index eff05d25d7..625795de5a 100644
--- a/frontend/src/lib/components/select/MultiSelect.svelte
+++ b/frontend/src/lib/components/select/MultiSelect.svelte
@@ -7,7 +7,11 @@
 	import DraggableTags from './DraggableTags.svelte'
 	import { Search } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
-	import TextInput, { inputBorderClass } from '../text_input/TextInput.svelte'
+	import TextInput, {
+		inputBaseClass,
+		inputBorderClass,
+		inputSizeClasses
+	} from '../text_input/TextInput.svelte'
 
 	type Value = Item['value']
 
@@ -27,6 +31,7 @@
 		placeholderClass = '',
 		allowClear = true,
 		hideMainClearBtn = false,
+		size = 'md',
 		onOpen,
 		groupBy,
 		sortBy,
@@ -50,6 +55,7 @@
 		placeholderClass?: string
 		allowClear?: boolean
 		hideMainClearBtn?: boolean
+		size?: keyof typeof inputSizeClasses
 		groupBy?: (item: Item) => string
 		sortBy?: (a: Item, b: Item) => number
 		onOpen?: () => void
@@ -100,7 +106,9 @@
 <div
 	bind:this={wrapperEl}
 	class={twMerge(
-		'relative min-h-10 flex items-center w-full bg-surface-secondary !text-secondary rounded-md',
+		'flex items-center flex-wrap',
+		inputBaseClass,
+		inputSizeClasses[size],
 		inputBorderClass({ forceFocus: open && !disabled }),
 		disabled ? 'pointer-events-none' : '',
 		open && !disabled ? 'open' : '',
@@ -115,15 +123,13 @@
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 
 	{#if value.length === 0}
-		<span
-			class={twMerge('text-sm ml-4 h-full flex items-center flex-1 text-hint', placeholderClass)}
-		>
+		<span class={twMerge('text-xs h-full flex items-center flex-1 text-hint', placeholderClass)}>
 			{placeholder}
 		</span>
 	{:else}
 		<ul
 			class={twMerge(
-				'overflow-clip overflow-x-hidden h-full cursor-pointer items-center flex flex-wrap gap-1 py-0.5 px-0.5 flex-1 text-primary',
+				'overflow-clip overflow-x-hidden h-full cursor-pointer items-center flex flex-wrap gap-1 py-0.5 flex-1 text-primary',
 				selectedUlClass
 			)}
 			role="list"
@@ -176,7 +182,7 @@
 						}}
 						class="!pr-7 !bg-surface"
 					/>
-					<Search size={16} class="absolute right-2 text-tertiary" />
+					<Search size={16} class="absolute right-2 text-primary" />
 				</div>
 			{/if}
 		{/snippet}
diff --git a/frontend/src/lib/components/select/Select.svelte b/frontend/src/lib/components/select/Select.svelte
index b2075c38aa..287c620a7b 100644
--- a/frontend/src/lib/components/select/Select.svelte
+++ b/frontend/src/lib/components/select/Select.svelte
@@ -7,7 +7,12 @@
 	import { getLabel, processItems, type ProcessedItem } from './utils.svelte'
 	import SelectDropdown from './SelectDropdown.svelte'
 	import { deepEqual } from 'fast-equals'
-	import { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte'
+	import {
+		inputBaseClass,
+		inputBorderClass,
+		inputSizeClasses
+	} from '../text_input/TextInput.svelte'
+	import { ButtonType } from '../common/button/model'
 
 	type Value = Item['value']
 
@@ -33,6 +38,7 @@
 		id,
 		itemLabelWrapperClasses,
 		itemButtonWrapperClasses,
+		size = 'md',
 		groupBy,
 		sortBy,
 		onFocus,
@@ -64,6 +70,7 @@
 		id?: string
 		itemLabelWrapperClasses?: string
 		itemButtonWrapperClasses?: string
+		size?: 'sm' | 'md' | 'lg'
 		groupBy?: (item: Item) => string
 		sortBy?: (a: Item, b: Item) => number
 		onFocus?: () => void
@@ -76,6 +83,7 @@
 	} = $props()
 
 	let disabled = $derived(_disabled || (loading && !value))
+	let iconSize = $derived(ButtonType.UnifiedIconSizes[size])
 
 	let inputEl: HTMLInputElement | undefined = $state()
 
@@ -119,15 +127,20 @@
 >
 	{#if loading}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<Loader2 size={18} class="animate-spin" />
+			<Loader2 size={iconSize} class="animate-spin" />
 		</div>
 	{:else if clearable && !disabled && value}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<CloseButton class="bg-transparent text-hint" noBg small on:close={clearValue} />
+			<CloseButton
+				class="bg-transparent text-secondary hover:text-primary"
+				noBg
+				small
+				on:close={clearValue}
+			/>
 		</div>
 	{:else if RightIcon}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<RightIcon size={18} class="text-tertiary/35" />
+			<RightIcon size={iconSize} class="text-secondary" />
 		</div>
 	{/if}
 	<!-- svelte-ignore a11y_autofocus -->
@@ -135,17 +148,25 @@
 		{autofocus}
 		{disabled}
 		type="text"
-		bind:value={() => filterText, (v) => (filterText = v)}
-		placeholder={loading && !value
-			? 'Loading...'
-			: (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
+		bind:value={
+			() => (open ? filterText : (valueEntry?.label ?? getLabel({ value }) ?? '')),
+			(v) => {
+				if (open) {
+					filterText = v
+				}
+			}
+		}
+		placeholder={loading && !value ? 'Loading...' : value ? valueEntry?.label : placeholder}
 		style={containerStyle}
 		class={twMerge(
 			inputBaseClass,
+			inputSizeClasses[size],
+			ButtonType.UnifiedHeightClasses[size],
 			inputBorderClass({ error, forceFocus: open }),
 			'w-full',
 			open ? '' : 'cursor-pointer',
-			!loading && value && !disabled ? '!placeholder-secondary' : 'placeholder-hint',
+			// Show value as placeholder when opening the dropdown and the search is empty
+			!value ? 'placeholder-hint' : '!placeholder-primary',
 			(clearable || RightIcon) && !disabled && value ? 'pr-8' : '',
 			inputClass ?? ''
 		)}
diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
index 90338b259b..4a620873cd 100644
--- a/frontend/src/lib/components/select/SelectDropdown.svelte
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -153,7 +153,7 @@
 		<div
 			class={twMerge(
 				disablePortal ? 'absolute' : 'fixed',
-				'z-[5001] text-tertiary text-sm select-none',
+				'z-[5001] text-primary text-sm select-none',
 				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
 				uiState.visible ? '' : 'pointer-events-none',
 				className
@@ -164,22 +164,25 @@
 		>
 			<div
 				class={twMerge(
-					'overflow-clip rounded-md bg-surface-secondary shadow-lg transition-height',
+					'overflow-clip rounded-md drop-shadow-base transition-height',
 					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
 				)}
 				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
 			>
-				<div bind:this={listEl} class="flex flex-col max-h-64 border rounded-md overflow-clip">
+				<div
+					bind:this={listEl}
+					class="flex flex-col max-h-64 rounded-md overflow-clip bg-surface-tertiary"
+				>
 					{@render header?.()}
 					{#if processedItems?.length === 0}
-						<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
+						<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
 					{/if}
 					<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
 						{#each processedItems ?? [] as item, itemIndex}
 							{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
 								<li
 									class={twMerge(
-										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
+										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
 										itemIndex === 0 ? 'mt-3' : 'mt-6'
 									)}
 								>
@@ -189,9 +192,12 @@
 							<li>
 								<button
 									class={twMerge(
-										'py-2 px-4 w-full font-normal text-left text-primary',
-										itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
-										item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+										'py-2 px-4 w-full font-normal text-left text-primary text-xs',
+										itemIndex === keyArrowPos
+											? 'bg-surface-hover/60'
+											: item.value === value
+												? 'bg-surface-hover/60'
+												: 'hover:bg-surface-hover',
 										itemButtonWrapperClasses
 									)}
 									onclick={(e) => {
@@ -205,7 +211,7 @@
 									</span>
 									{@render endSnippet?.({ item, close: () => (open = false) })}
 									{#if item.subtitle}
-										<div class="text-xs text-tertiary">{item.subtitle}</div>
+										<div class="text-xs text-primary">{item.subtitle}</div>
 									{/if}
 								</button>
 							</li>
diff --git a/frontend/src/lib/components/settings/AIUserSettings.svelte b/frontend/src/lib/components/settings/AIUserSettings.svelte
index ee32c6c071..09b07e6c05 100644
--- a/frontend/src/lib/components/settings/AIUserSettings.svelte
+++ b/frontend/src/lib/components/settings/AIUserSettings.svelte
@@ -26,10 +26,10 @@
 	}
 </script>
 
-<div>
-	<h2 class="border-b">AI user settings</h2>
+<div class="border border-border-light rounded-md p-4 h-full">
+	<h2 class="text-emphasis text-sm font-semibold mb-2">AI user settings</h2>
 
-	<div class="flex flex-col gap-4 mt-2">
+	<div class="flex flex-col gap-4">
 		<Toggle
 			on:change={(e) => {
 				updateSetting(codeCompletionSessionEnabled, e.detail, 'codeCompletionSessionEnabled')
@@ -40,6 +40,7 @@
 				rightTooltip: 'AI completion in the code editors'
 			}}
 		/>
+
 		<Toggle
 			on:change={(e) => {
 				updateSetting(metadataCompletionEnabled, e.detail, 'metadataCompletionEnabled')
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
index 28747e5e45..c3fbf9644d 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
@@ -51,8 +51,8 @@
 	}
 </script>
 
-<div>
-	<p class="font-semibold text-sm">Workspace color</p>
+<div class="flex flex-col gap-1">
+	<p class="font-medium text-xs text-emphasis">Workspace color</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		{#if $workspaceColor}
 			<div
@@ -60,7 +60,7 @@
 				style="background-color: {$workspaceColor}"
 			></div>
 		{:else}
-			<span class="text-xs text-secondary">No color set</span>
+			<span class="text-xs font-normal text-primary">No color set</span>
 		{/if}
 		<Button
 			on:click={() => {
@@ -75,7 +75,9 @@
 			}}
 		/>
 	</div>
-	<p class="italic text-xs"> Color to identify the current workspace in the list of workspaces </p>
+	<p class="text-2xs text-secondary font-normal">
+		Color to identify the current workspace in the list of workspaces
+	</p>
 </div>
 
 <Modal bind:open title="Change Workspace Color">
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
index 26057c2446..52333e7036 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
@@ -56,10 +56,10 @@
 	export let open = false
 </script>
 
-<div>
-	<p class="font-semibold text-sm">Workspace ID</p>
+<div class="flex flex-col gap-1">
+	<p class="font-medium text-xs text-emphasis">Workspace ID</p>
 	<div class="flex flex-row gap-0.5 items-center">
-		<p class="text-sm text-secondary">{$workspaceStore ?? ''}</p>
+		<p class="text-xs font-normal text-primary">{$workspaceStore ?? ''}</p>
 		{#if !isCloudHosted() || $superadmin}
 			<Button
 				on:click={() => {
@@ -75,7 +75,7 @@
 			/>
 		{/if}
 	</div>
-	<p class="italic text-xs">Slug to uniquely identify your workspace</p>
+	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 </div>
 
 <Modal bind:open title="Change workspace ID">
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
index 42e9e8a12e..15dc554623 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
@@ -37,10 +37,10 @@
 	}
 </script>
 
-<div>
-	<p class="font-semibold text-sm">Workspace name</p>
+<div class="flex flex-col gap-1">
+	<p class="font-medium text-xs text-emphasis">Workspace name</p>
 	<div class="flex flex-row gap-0.5 items-center">
-		<p class="text-sm text-secondary">{currentName}</p>
+		<p class="text-xs font-normal text-primary">{currentName}</p>
 		<Button
 			on:click={() => {
 				open = true
@@ -55,7 +55,7 @@
 		/>
 	</div>
 
-	<p class="italic text-xs"> Displayable name </p>
+	<p class="text-2xs text-secondary font-normal"> Displayable name </p>
 </div>
 
 <Modal bind:open title="Change workspace name">
diff --git a/frontend/src/lib/components/settings/CreateToken.svelte b/frontend/src/lib/components/settings/CreateToken.svelte
index c1ba21c57b..e6c36bdf70 100644
--- a/frontend/src/lib/components/settings/CreateToken.svelte
+++ b/frontend/src/lib/components/settings/CreateToken.svelte
@@ -250,8 +250,8 @@
 </script>
 
 <div>
-	<div class="py-3 px-3 border rounded-md mb-6 bg-surface-secondary min-w-min">
-		<h3 class="pb-3 font-semibold">Add a new token</h3>
+	<div class="p-4 rounded-md mb-6 min-w-min bg-surface-tertiary">
+		<h3 class="pb-2 font-semibold text-emphasis text-sm">Add a new token</h3>
 
 		{#if showMcpMode}
 			<div
@@ -288,9 +288,9 @@
 
 		{#if scopes != undefined}
 			<div class="mb-4">
-				<span class="block mb-1">Scope</span>
+				<span class="block mb-1 text-emphasis text-xs font-semibold">Scope</span>
 				{#each scopes as scope}
-					<input disabled type="text" value={scope} class="mb-2 w-full" />
+					<TextInput inputProps={{ disabled: true }} value={scope} class="mb-2 w-full" />
 				{/each}
 			</div>
 		{/if}
@@ -318,7 +318,7 @@
 		<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
 			{#if mcpCreationMode}
 				<div>
-					<span class="block mb-1">Scope</span>
+					<span class="block mb-1 text-emphasis text-xs font-semibold">Scope</span>
 					<ToggleButtonGroup bind:selected={newMcpScope} allowEmpty={false}>
 						{#snippet children({ item })}
 							<ToggleButton
@@ -345,13 +345,13 @@
 
 				{#if newMcpScope === 'folder'}
 					<div>
-						<span class="block mb-1">Select Folder</span>
+						<span class="block mb-1 text-emphasis text-xs font-semibold">Select Folder</span>
 						<FolderPicker bind:folderName={selectedFolder} />
 					</div>
 				{/if}
 
 				<div>
-					<span class="block mb-1">Hub scripts (optional)</span>
+					<span class="block mb-1 text-emphasis text-xs font-semibold">Hub scripts (optional)</span>
 					{#if loadingApps}
 						<div>Loading...</div>
 					{:else if errorFetchApps}
@@ -361,13 +361,12 @@
 							items={safeSelectItems(allApps)}
 							placeholder="Select apps"
 							bind:value={newMcpApps}
-							class="!bg-surface"
 						/>
 					{/if}
 				</div>
 
 				<div>
-					<span class="block mb-1">Workspace</span>
+					<span class="block mb-1 text-emphasis text-xs font-semibold">Workspace</span>
 					<select bind:value={newTokenWorkspace} disabled={workspaces.length === 1} class="w-full">
 						{#each workspaces as workspace}
 							<option value={workspace.id}>{workspace.name}</option>
@@ -377,23 +376,21 @@
 			{/if}
 
 			<div>
-				<span class="block mb-1">Label <span class="text-xs text-tertiary">(optional)</span></span>
-				<TextInput
-					inputProps={{ type: 'text' }}
-					bind:value={newTokenLabel}
-					class="w-full !bg-surface"
-				/>
+				<span class="block mb-1 text-emphasis text-xs font-semibold"
+					>Label <span class="text-xs text-primary">(optional)</span></span
+				>
+				<TextInput inputProps={{ type: 'text' }} bind:value={newTokenLabel} class="w-full" />
 			</div>
 
 			{#if !mcpCreationMode}
 				<div>
-					<span class="block mb-1"
-						>Expires In <span class="text-xs text-tertiary">(optional)</span></span
+					<span class="block mb-1 text-xs text-emphasis font-semibold"
+						>Expires In <span class="text-xs text-primary">(optional)</span></span
 					>
 					<Select
 						bind:value={newTokenExpiration}
 						placeholder="No expiration"
-						inputClass="!bg-surface"
+						inputClass="w-full"
 						items={[
 							{ label: 'No expiration', value: undefined },
 							{ label: '15 minutes', value: 15 * 60 },
@@ -410,7 +407,7 @@
 			{#if mcpCreationMode && (newMcpScope !== 'folder' || selectedFolder.length > 0)}
 				{#if loadingRunnables}
 					<div class="flex flex-col gap-2 col-span-2 pr-4">
-						<span class="block text-xs text-tertiary"
+						<span class="block text-xs text-primary"
 							>Scripts & Flows that will be available via MCP</span
 						>
 						<div class="flex flex-wrap gap-1">
@@ -438,7 +435,7 @@
 									+{validRunnables.length - 3} more
 								</Badge>
 							{:else}
-								<p class="text-xs text-tertiary">
+								<p class="text-xs text-primary">
 									{warning}
 								</p>
 							{/if}
@@ -472,6 +469,7 @@
 				on:click={() => {
 					mcpCreationMode = false
 				}}
+				variant="default"
 			>
 				Cancel
 			</Button>
@@ -479,6 +477,7 @@
 				on:click={() => createToken(mcpCreationMode)}
 				disabled={mcpCreationMode &&
 					(newTokenWorkspace == undefined || (newMcpScope === 'folder' && !selectedFolder))}
+				variant="accent"
 			>
 				New token
 			</Button>
diff --git a/frontend/src/lib/components/settings/PremiumInfo.svelte b/frontend/src/lib/components/settings/PremiumInfo.svelte
index bd7a91a026..8683ca2356 100644
--- a/frontend/src/lib/components/settings/PremiumInfo.svelte
+++ b/frontend/src/lib/components/settings/PremiumInfo.svelte
@@ -174,10 +174,10 @@
 	<div class="mt-2">
 		<Button
 			endIcon={{ icon: ExternalLink }}
-			color="dark"
+			variant="accent"
 			href="{base}/api/w/{$workspaceStore}/workspaces/billing_portal">Customer Portal</Button
 		>
-		<p class="text-xs text-tertiary mt-1">
+		<p class="text-xs text-primary mt-1">
 			See invoices, change billing information or subscription details.
 		</p>
 	</div>
@@ -468,7 +468,7 @@
 	<div class="flex flex-col gap-4">
 		<div>
 			<div class="text-sm mb-1 text-secondary font-medium"> What is an execution? </div>
-			<div class="text-xs max-w-xl border-b pb-4 text-tertiary">
+			<div class="text-xs max-w-xl border-b pb-4 text-primary">
 				The single credit-unit is called an "execution". An execution corresponds to a single job
 				whose duration is less than 1s. For any additional seconds of computation, an additional
 				execution is accounted for. Jobs are executed on one powerful virtual CPU with 2Gb of
@@ -479,7 +479,7 @@
 			<div class="text-sm mb-1 text-secondary font-medium">
 				What is the difference between a developer and an operator?
 			</div>
-			<div class="text-xs max-w-xl text-tertiary">
+			<div class="text-xs max-w-xl text-primary">
 				A developer can write scripts/flows/apps/variables/resources. An operator can only run/view
 				them.
 			</div>
diff --git a/frontend/src/lib/components/settings/ScopeSelector.svelte b/frontend/src/lib/components/settings/ScopeSelector.svelte
index 9b25a2d643..815e8627ef 100644
--- a/frontend/src/lib/components/settings/ScopeSelector.svelte
+++ b/frontend/src/lib/components/settings/ScopeSelector.svelte
@@ -487,25 +487,24 @@
 			<Loader2 size={32} class="animate-spin text-primary" />
 		</div>
 	{:else if error}
-		<div class="p-4 bg-red-50 border border-red-200 rounded-lg">
-			<p class="text-sm text-red-800 mb-3">{error}</p>
-			<Button onclick={fetchScopeDomains} variant="contained" color="red" size="sm">
-				Try again
-			</Button>
+		<div class="p-4 bg-surface-tertiary border border-red-200 rounded-lg">
+			<p class="text-xs text-red-600 mb-3">{error}</p>
+			<Button onclick={fetchScopeDomains} variant="accent" size="sm">Try again</Button>
 		</div>
 	{:else if scopeDomains}
-		<div class="mb-6 p-4 bg-surface-secondary border rounded-lg">
+		<div class="mb-6 p-4 bg-surface-tertiary border rounded-md">
 			<div class="flex items-center justify-between mb-3">
-				<h4 class="text-sm font-semibold text-primary">
+				<h4 class="text-xs font-semibold text-emphasis">
 					Selected Scopes ({selectedScopes.length})
 				</h4>
-				<Button onclick={clearAllScopes} {disabled} size="xs" color="light">Clear All</Button>
+				<Button onclick={clearAllScopes} {disabled} size="xs" variant="subtle">Clear All</Button>
 			</div>
 
 			{#if selectedScopes.length === 0}
-				<p class="text-sm text-tertiary">No scopes selected. Token will have full access.</p>
+				<p class="text-xs text-secondary">No scopes selected. Token will have full access.</p>
 			{:else if hasAdministratorScope}
-				<p class="text-sm text-tertiary">Administrator scope grants full access to all resources.</p
+				<p class="text-xs text-secondary"
+					>Administrator scope grants full access to all resources.</p
 				>
 			{:else}
 				<div class="flex flex-wrap gap-2">
@@ -536,21 +535,21 @@
 			{/if}
 		</div>
 
-		<div class="space-y-3 max-h-96 overflow-y-auto border rounded-lg p-4">
+		<div class="max-h-96 overflow-y-auto border rounded-md">
 			{#each scopeDomains as domain}
 				{@const domainState = getDomainState(domain.name)}
 				{@const isExpanded = domainState?.isExpanded || false}
 				{@const isDomainSelected = domainState?.hasFullAccess || false}
 				{@const selectedScopes = getSelectedScopesForDomain(domain)}
 
-				<div class="border rounded-lg bg-surface overflow-hidden">
+				<div class="overflow-hidden">
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="p-4 bg-surface-secondary cursor-pointer hover:bg-surface-tertiary transition-colors"
+						class="p-4 cursor-pointer hover:bg-surface-hover transition-colors"
 						onclick={() => toggleDomainExpansion(domain.name)}
 					>
-						<div class="flex items-center gap-3">
+						<div class="flex items-center gap-2">
 							<div class="flex-shrink-0">
 								<ChevronRight
 									size={16}
@@ -572,12 +571,12 @@
 								/>
 							</div>
 
-							<div class="flex-1 min-w-0">
-								<div class="flex items-center gap-2 flex-wrap">
+							<div class="flex-1 min-w-0 flex flex-col gap-1">
+								<div class="flex items-center gap-x-2 gap-y-1 flex-wrap">
 									<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 									<label
 										for={`domain-${domain.name}`}
-										class="text-sm font-semibold text-primary cursor-pointer"
+										class="text-xs font-medium text-emphasis cursor-pointer"
 										onclick={(e) => e.stopPropagation()}
 									>
 										{domain.name}
@@ -603,14 +602,14 @@
 									{/each}
 								</div>
 								{#if domain.description}
-									<p class="text-xs text-tertiary mt-0.5">{domain.description}</p>
+									<p class="text-2xs text-secondary">{domain.description}</p>
 								{/if}
 							</div>
 						</div>
 					</div>
 
 					{#if isExpanded}
-						<div class="p-2">
+						<div class="p-2 pl-12">
 							<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
 								{#each domain.scopes as scope}
 									{@const scopeState = domainState?.scopes[scope.value]}
@@ -621,11 +620,11 @@
 									{@const isDisabled = disabled || isScopeDisabled(scope, domain)}
 
 									<div
-										class="p-3 border rounded-lg w-full {isDisabled
-											? 'bg-surface opacity-60'
-											: 'bg-surface-secondary'}"
+										class="p-2 border rounded-lg w-full {isDisabled
+											? 'bg-surface-disabled/20 opacity-60'
+											: 'bg-surface-tertiary'}"
 									>
-										<div class="flex justify-between items-center mb-2">
+										<div class="flex justify-between items-center">
 											<label
 												class={twMerge(
 													'flex items-center gap-2 flex-1 min-w-0',
@@ -643,8 +642,8 @@
 
 												<span
 													class={twMerge(
-														'font-medium text-xs truncate cursor-pointer',
-														isDisabled ? 'text-tertiary' : ''
+														'font-normal text-xs truncate cursor-pointer',
+														isDisabled ? 'text-disabled' : 'text-primary'
 													)}
 												>
 													{scope.label}
@@ -658,7 +657,7 @@
 														contentClasses="p-3"
 													>
 														{#snippet trigger()}
-															<Button size="xs" disabled={isDisabled} color="dark">
+															<Button size="xs" disabled={isDisabled} variant="default">
 																Restrict paths
 																<Tooltip light>
 																	Restrict this scope to specific resource paths. If no paths are
@@ -686,7 +685,6 @@
 																				addResourcePath(scope.value, currentInput)
 																			}
 																		}}
-																		class="flex-1 text-sm px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-surface"
 																	/>
 																	<Button
 																		onclick={() => {
@@ -699,7 +697,7 @@
 																	</Button>
 																</div>
 																{#if pathError}
-																	<p class="text-xs text-red-600 mt-1">{pathError}</p>
+																	<p class="text-2xs text-red-600 mt-1">{pathError}</p>
 																{/if}
 															</div>
 														{/snippet}
diff --git a/frontend/src/lib/components/settings/TokensTable.svelte b/frontend/src/lib/components/settings/TokensTable.svelte
index cc55a9df8f..8076b9a17a 100644
--- a/frontend/src/lib/components/settings/TokensTable.svelte
+++ b/frontend/src/lib/components/settings/TokensTable.svelte
@@ -4,6 +4,8 @@
 	import { UserService, type TruncatedToken } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
 	import CreateToken from './CreateToken.svelte'
+	import Button from '../common/button/Button.svelte'
+	import { Trash } from 'lucide-svelte'
 
 	// --- Props ---
 	interface Props {
@@ -63,11 +65,11 @@
 	}
 </script>
 
-<div class="flex flex-col min-h-0">
-	<div class="text-2xs text-tertiary italic pb-2 mt-2">
+<div class="flex flex-col p-4 border border-border-light rounded-md">
+	<h2 class="text-emphasis text-sm font-semibold mb-1">Tokens</h2>
+	<div class="text-xs text-secondary mb-2">
 		Authenticate to the Windmill API with access tokens.
 	</div>
-
 	<CreateToken
 		{showMcpMode}
 		{openWithMcpMode}
@@ -76,14 +78,14 @@
 		{scopes}
 		onTokenCreated={handleTokenCreated}
 	/>
-	<div class="overflow-auto flex-1 min-h-64">
+	<div class="overflow-auto grow min-h-64 max-h-2/3">
 		<TableCustom>
 			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 			<tr slot="header-row">
-				<th>prefix</th>
-				<th>label</th>
-				<th>expiration</th>
-				<th>scopes</th>
+				<th>Prefix</th>
+				<th>Label</th>
+				<th>Expiration</th>
+				<th>Scopes</th>
 				<th></th>
 			</tr>
 			{#snippet body()}
@@ -91,46 +93,43 @@
 					{#if tokens && tokens.length > 0}
 						{#each tokens as { token_prefix, expiration, label, scopes }}
 							<tr>
-								<td class="grow">{token_prefix}****</td>
-								<td class="grow">{label ?? ''}</td>
-								<td class="grow">{displayDate(expiration ?? '')}</td>
-								<td class="grow">{scopes?.join(', ') ?? ''}</td>
-								<td class="grow">
-									<button
-										class="text-red-500 text-xs underline"
-										onclick={() => handleDeleteClick(token_prefix)}
-									>
-										Delete
-									</button>
+								<td class="w-32 text-xs text-primary">{token_prefix}****</td>
+								<td class="min-w-0 max-w-32 truncate text-xs text-primary">{label ?? ''}</td>
+								<td class="w-24 whitespace-nowrap text-xs text-secondary"
+									>{displayDate(expiration ?? '')}</td
+								>
+								<td
+									class="min-w-0 max-w-48 truncate text-xs text-secondary"
+									title={scopes?.join(', ') ?? ''}>{scopes?.join(', ') ?? ''}</td
+								>
+								<td class="w-16 text-center">
+									<Button
+										variant="subtle"
+										destructive
+										on:click={() => handleDeleteClick(token_prefix)}
+										size="xs"
+										startIcon={{ icon: Trash }}
+										iconOnly
+									/>
 								</td>
 							</tr>
 						{/each}
 					{:else if tokens && tokens.length === 0}
 						<tr class="px-6">
-							<td class="text-secondary italic text-xs"> There are no tokens yet</td>
+							<td class="text-secondary italic text-2xs"> There are no tokens yet</td>
 						</tr>
 					{:else}
-						<tr><td>Loading...</td></tr>
+						<tr><td class="text-secondary text-xs">Loading...</td></tr>
 					{/if}
 				</tbody>
 			{/snippet}
 		</TableCustom>
-		<div class="flex flex-row-reverse gap-2 w-full">
+		<div class="flex flex-row-reverse gap-2 w-full mt-2">
 			{#if tokens?.length == 100}
-				<button
-					class="p-1 underline text-sm whitespace-nowrap text-center"
-					onclick={handleNextPage}
-				>
-					Next
-				</button>
+				<Button variant="subtle" size="xs" on:click={handleNextPage}>Next</Button>
 			{/if}
 			{#if tokenPage > 1}
-				<button
-					class="p-1 underline text-sm whitespace-nowrap text-center"
-					onclick={handlePreviousPage}
-				>
-					Previous
-				</button>
+				<Button variant="subtle" size="xs" on:click={handlePreviousPage}>Previous</Button>
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/settings/UserInfoSettings.svelte b/frontend/src/lib/components/settings/UserInfoSettings.svelte
index 2dc91d3ec3..c142c89f7d 100644
--- a/frontend/src/lib/components/settings/UserInfoSettings.svelte
+++ b/frontend/src/lib/components/settings/UserInfoSettings.svelte
@@ -3,6 +3,7 @@
 	import { UserService } from '$lib/gen'
 	import { Button } from '$lib/components/common'
 	import { sendUserToast } from '$lib/toast'
+	import TextInput from '../text_input/TextInput.svelte'
 
 	let newPassword = $state<string | undefined>(undefined)
 	let passwordError = $state<string | undefined>(undefined)
@@ -30,44 +31,38 @@
 	}
 </script>
 
-<div>
-	<h2 class="border-b">User info</h2>
-	<div class="">
-		{#if passwordError}
-			<div class="text-red-600 text-2xs grow">{passwordError}</div>
-		{/if}
-		<div class="flex flex-col gap-2 w-full">
-			<form class="mt-4">
-				<label class="block w-60 mb-2 text-tertiary">
-					<div class="text-secondary">email</div>
-					<input type="text" disabled value={$usersWorkspaceStore?.email} class="input mt-1" />
-				</label>
-				{#if login_type == 'password'}
-					<label class="block w-120">
-						<div class="text-secondary">password</div>
-						<input
-							autocomplete="new-password"
-							type="password"
-							bind:value={newPassword}
-							class="
-							w-full
-							block
-							py-1
-							px-2
-							rounded-md
-							border
-							border-gray-300
-							shadow-sm
-							focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
-							text-sm
-							"
-						/>
-						<Button size="sm" btnClasses="mt-4 w-min" on:click={setPassword}>Set password</Button>
-					</label>
-				{:else if login_type == 'github'}
-					<span class="text-sm">Authenticated through Github OAuth2. Cannot set a password.</span>
-				{/if}
-			</form>
+<div class="border border-border-light rounded-md p-4 h-full">
+	<h2 class="text-emphasis text-sm font-semibold mb-2">User info</h2>
+
+	<form class="flex flex-col gap-6">
+		<div class="w-full text-primary flex flex-col gap-1">
+			<div class="text-xs text-emphasis font-semibold">Email</div>
+			<span class="text-xs font-normal text-primary">
+				{$usersWorkspaceStore?.email}
+			</span>
 		</div>
-	</div>
+
+		<label class="flex flex-col gap-1 w-120">
+			<span class="text-xs text-emphasis font-semibold">Password</span>
+			{#if login_type == 'password'}
+				<div class="flex flex-row gap-1 items-center">
+					<TextInput
+						inputProps={{ autocomplete: 'new-password', type: 'password' }}
+						bind:value={newPassword}
+						error={passwordError}
+					/>
+					<Button size="sm" variant="default" btnClasses="w-min" on:click={setPassword}
+						>Set password</Button
+					>
+				</div>
+				{#if passwordError}
+					<div class="text-red-600 text-2xs">{passwordError}</div>
+				{/if}
+			{:else if login_type == 'github'}
+				<span class="text-xs text-primary font-normal"
+					>Authenticated through Github OAuth2. Cannot set a password.</span
+				>
+			{/if}
+		</label>
+	</form>
 </div>
diff --git a/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte b/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
index 6471af33bd..24cca0fc58 100644
--- a/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
@@ -90,13 +90,13 @@
 
 <div class="mt-6">
 	<Section
-		label="Operator Settings"
+		label="Operator settings"
 		collapsable={true}
 		tooltip="Configure the operator visibility settings for your workspace. Toggle the settings you want to enable."
 	>
 		<div class="flex flex-col gap-4 my-4">
 			<div class="flex flex-col gap-1">
-				<div class="text-tertiary text-xs">
+				<div class="text-primary text-xs">
 					Configure the operator visibility settings for your workspace. Toggle the settings you
 					want to enable.
 				</div>
diff --git a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
index 13b0e9abc5..2137e23bce 100644
--- a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
@@ -292,7 +292,7 @@
 />
 <div class="flex flex-col gap-4 my-8">
 	<div class="flex flex-col gap-1">
-		<div class="text-tertiary text-xs">
+		<div class="text-primary text-xs">
 			Add members to your workspace and manage their roles. You can also auto-add users to join your
 			workspace.
 			<a
@@ -308,7 +308,7 @@
 		title="Members {(filteredUsers?.length ?? users?.length) != undefined
 			? `(${filteredUsers?.length ?? users?.length})`
 			: ''}"
-		primary={true}
+		primary={false}
 		tooltip="Manage users manually or enable SSO authentication."
 		documentationLink="https://www.windmill.dev/docs/core_concepts/authentification"
 	/>
@@ -323,8 +323,9 @@
 		>
 			{#snippet trigger()}
 				<Button
-					color={auto_invite_domain != undefined ? 'green' : 'red'}
-					variant="border"
+					color={'accent'}
+					destructive={auto_invite_domain === undefined}
+					variant="default"
 					size="xs"
 					nonCaptureEvent={true}
 					startIcon={{ icon: Mails }}
@@ -478,7 +479,7 @@
 								<div class="flex w-full mt-1 gap-2 items-end justify-between">
 									<div class="flex gap-2 items-end">
 										<div class="flex flex-col gap-1">
-											<span class="text-xs text-tertiary">Instance group</span>
+											<span class="text-xs text-primary">Instance group</span>
 											<Select
 												items={availableGroupItems}
 												placeholder="Select group"
@@ -489,7 +490,7 @@
 										</div>
 
 										<div class="flex flex-col gap-1">
-											<span class="text-xs text-tertiary">Role</span>
+											<span class="text-xs text-primary">Role</span>
 											<ToggleButtonGroup
 												selected={selectedNewRole}
 												on:selected={(e) => {
@@ -539,7 +540,7 @@
 									<div class="flex flex-col gap-1">
 										<table class="w-full text-sm">
 											<thead>
-												<tr class="text-left text-xs text-tertiary">
+												<tr class="text-left text-xs text-primary">
 													<th class="pb-2 w-1/2">Group</th>
 													<th class="pb-2 w-1/4">Role</th>
 													<th class="pb-2 w-1/4"></th>
@@ -552,7 +553,7 @@
 														<td class="py-2">
 															<div class="font-medium">{groupName}</div>
 															{#if group?.summary}
-																<div class="text-xs text-tertiary">{group.summary}</div>
+																<div class="text-xs text-primary">{group.summary}</div>
 															{/if}
 														</td>
 														<td class="py-2">
@@ -612,7 +613,7 @@
 									</div>
 								</div>
 							{:else}
-								<div class="text-center text-tertiary text-sm py-4">
+								<div class="text-center text-primary text-sm py-4">
 									No instance groups configured for auto-add
 								</div>
 							{/if}
@@ -675,7 +676,7 @@
 					{#if hasNonManualUsers && index > 0 && sortedUsers()[index - 1]?.added_via?.source !== 'instance_group' && added_via?.source === 'instance_group'}
 						<tr class="bg-surface-secondary">
 							<td colspan={hasNonManualUsers ? 8 : 7} class="px-4 py-2">
-								<div class="text-xs text-tertiary font-bold"> Instance group users </div>
+								<div class="text-xs text-primary font-bold"> Instance group users </div>
 							</td>
 						</tr>
 					{/if}
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
index 42cd2f3f39..948381f76c 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
@@ -185,7 +185,7 @@
 				>
 					<svelte:fragment slot="trigger">
 						<div id="mute-settings-button">
-							<Button variant="border" color="light" nonCaptureEvent>
+							<Button variant="default" nonCaptureEvent>
 								{#if muteSettings.global || muteSettings.workspace}
 									<BellOff size="16" />
 								{:else}
@@ -205,7 +205,6 @@
 											right: 'Automatically acknowledge critical alerts instance wide'
 										}}
 										size="xs"
-										stopPropagation={true}
 									/>
 								{/if}
 							</div>
@@ -218,7 +217,6 @@
 										right: 'Automatically acknowledge critical alerts for current workspace'
 									}}
 									size="xs"
-									stopPropagation={true}
 								/>
 							</div>
 						</List>
@@ -234,7 +232,7 @@
 				>
 					<svelte:fragment slot="trigger">
 						<div id="settings-button">
-							<Button variant="border" color="light" nonCaptureEvent>
+							<Button variant="default" nonCaptureEvent>
 								<Settings size="16" />
 							</Button>
 						</div>
@@ -272,8 +270,7 @@
 			{:else}
 				<Button
 					size="xs"
-					color="light"
-					variant="border"
+					variant="default"
 					href="{base}/workspace_settings?tab=error_handler"
 					target="_blank"
 				>
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
index 02244a87f6..f66c836dfb 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
@@ -109,7 +109,7 @@
 	}
 
 	// Update filter change handlers
-	$: hideAcknowledged, workspaceContext, onFiltersChange()
+	$: (hideAcknowledged, workspaceContext, onFiltersChange())
 
 	let totalNumberOfAlerts = 0
 </script>
@@ -142,8 +142,8 @@
 			</div>
 
 			<List wFull={false} horizontal gap="md" justify="end">
-				<div class="text-xs text-tertiary whitespace-nowrap"
-					>{`${totalNumberOfAlerts === 1000 ? '1000+' : totalNumberOfAlerts ?? '?'} items`}
+				<div class="text-xs text-primary whitespace-nowrap"
+					>{`${totalNumberOfAlerts === 1000 ? '1000+' : (totalNumberOfAlerts ?? '?')} items`}
 				</div>
 				<RefreshButton {loading} on:click={refreshAlerts} />
 			</List>
diff --git a/frontend/src/lib/components/sidebar/MenuButton.svelte b/frontend/src/lib/components/sidebar/MenuButton.svelte
index d859b74ab2..9d2bd8dd48 100644
--- a/frontend/src/lib/components/sidebar/MenuButton.svelte
+++ b/frontend/src/lib/components/sidebar/MenuButton.svelte
@@ -1,3 +1,12 @@
+<script module lang="ts">
+	export const sidebarClasses = {
+		text: 'text-primary-inverse dark:text-primary data-[light-mode=true]:text-primary text-xs font-normal',
+		selectedText: 'text-emphasis-inverse dark:text-emphasis text-xs font-normal',
+		hoverBg:
+			'transition-colors hover:bg-surface-hover-inverse dark:hover:bg-surface-hover data-[light-mode=true]:hover:bg-surface-hover'
+	}
+</script>
+
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 	import Popover from '../Popover.svelte'
@@ -80,11 +89,10 @@
 						dispatch('click')
 					}}
 			{href}
+			data-light-mode={lightMode}
 			class={twMerge(
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
-				lightMode
-					? 'text-primary data-[highlighted]:bg-surface-hover hover:bg-surface-hover'
-					: 'data-[highlighted]:bg-[#2A3648] hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
+				sidebarClasses.hoverBg,
 				color ? 'border-4' : '',
 				'transition-all relative',
 				classNames
@@ -98,14 +106,7 @@
 				{@const SvelteComponent = icon}
 				<SvelteComponent
 					size={16}
-					class={twMerge(
-						'flex-shrink-0',
-						lightMode
-							? 'text-primary group-hover:text-secondary'
-							: 'text-primary-inverse group-hover:text-secondary-inverse dark:group-hover:text-secondary dark:text-primary',
-						'transition-all',
-						iconClasses
-					)}
+					class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
 					{...iconProps}
 				/>
 			{/if}
@@ -114,7 +115,7 @@
 				<span
 					class={twMerge(
 						'whitespace-pre truncate',
-						lightMode ? 'text-primary' : 'text-primary-inverse dark:text-primary',
+						sidebarClasses.text,
 						'transition-all',
 						classNames
 					)}
diff --git a/frontend/src/lib/components/sidebar/MenuLink.svelte b/frontend/src/lib/components/sidebar/MenuLink.svelte
index 9ecdc65072..a76b64b24a 100644
--- a/frontend/src/lib/components/sidebar/MenuLink.svelte
+++ b/frontend/src/lib/components/sidebar/MenuLink.svelte
@@ -7,6 +7,7 @@
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
 	import { goto } from '$app/navigation'
 	import { twMerge } from 'tailwind-merge'
+	import { sidebarClasses } from './MenuButton.svelte'
 
 	interface Props {
 		aiId?: string | undefined
@@ -62,16 +63,12 @@
 			class={twMerge(
 				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
 				isSelected
-					? lightMode
-						? 'bg-surface-selected hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
-						: 'bg-frost-700 hover:bg-[#30404e] data-[highlighted]:bg-[#30404e]'
-					: lightMode
-						? 'hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
-						: 'hover:bg-[#2A3648] data-[highlighted]:bg-[#2A3648]',
-
-				'hover:transition-all',
+					? 'bg-surface-selected-inverse dark:bg-surface-selected'
+					: sidebarClasses.hoverBg,
+				isSelected ? sidebarClasses.selectedText : sidebarClasses.text,
 				classNames
 			)}
+			data-light-mode={lightMode}
 			target={href.includes('http') ? '_blank' : null}
 			title={isCollapsed ? undefined : label}
 			use:conditionalMelt={item}
@@ -79,35 +76,13 @@
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<SvelteComponent
-					size={16}
-					class={twMerge(
-						'flex-shrink-0',
-						isSelected
-							? lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-frost-200 group-hover:text-white'
-							: lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-gray-100 group-hover:text-white',
-						'transition-all'
-					)}
-				/>
+				<SvelteComponent size={16} class={twMerge('flex-shrink-0 transition-all')} />
 			{/if}
 
 			{#if !isCollapsed}
 				<span
-					class={twMerge(
-						'whitespace-pre truncate',
-						isSelected
-							? lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-frost-200 group-hover:text-white'
-							: lightMode
-								? 'text-primary group-hover:text-secondary'
-								: 'text-gray-100 group-hover:text-white',
-						'transition-all duration-75'
-					)}
+					data-light-mode={lightMode}
+					class={twMerge('whitespace-pre truncate transition-all duration-75')}
 				>
 					{label}
 				</span>
diff --git a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
index 5008d0a230..0c0297c5bb 100644
--- a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
+++ b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
@@ -98,7 +98,7 @@
 					</span>
 					<div class="flex flex-col">
 						<span class="text-sm text-primary truncate">{user}</span>
-						<span class="text-xs text-tertiary truncate">{showActivity(url)}</span>
+						<span class="text-xs text-primary truncate">{showActivity(url)}</span>
 					</div>
 				</div>
 			{/each}
diff --git a/frontend/src/lib/components/sidebar/OperatorMenu.svelte b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
index 7c1dd70add..0450358725 100644
--- a/frontend/src/lib/components/sidebar/OperatorMenu.svelte
+++ b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
@@ -23,7 +23,7 @@
 	import DarkModeObserver from '../DarkModeObserver.svelte'
 	import BarsStaggered from '../icons/BarsStaggered.svelte'
 	import { Menu, Menubar, MenuItem } from '$lib/components/meltComponents'
-	import MenuButton from './MenuButton.svelte'
+	import MenuButton, { sidebarClasses } from './MenuButton.svelte'
 	import MenuLink from './MenuLink.svelte'
 	import { onDestroy } from 'svelte'
 	let darkMode: boolean = $state(false)
@@ -207,7 +207,7 @@
 				</div>
 
 				{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} lightMode {item} />
+					<MenuLink class="!text-xs" {...menuLink} {isCollapsed} {item} lightMode />
 				{/each}
 
 				<div class="divide-y" role="none">
@@ -215,11 +215,11 @@
 						<MenuItem
 							href={USER_SETTINGS_HASH}
 							class={twMerge(
-								'flex flex-row gap-3.5 items-center px-2 py-2 ',
-								'text-secondary text-xs',
-								'hover:bg-surface-hover hover:text-primary cursor-pointer',
-								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+								'flex flex-row gap-3.5 items-center px-2 py-2',
+								sidebarClasses.text,
+								sidebarClasses.hoverBg
 							)}
+							lightMode
 							{item}
 						>
 							<Settings size={14} />
@@ -238,10 +238,11 @@
 									window.localStorage.setItem('dark-mode', 'light')
 								}
 							}}
+							lightMode
 							class={twMerge(
-								'text-secondary block text-left px-2 py-2 font-normal text-xs hover:bg-surface-hover hover:text-primary w-full',
-								'flex flex-row items-center gap-3.5 ',
-								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+								'w-full flex gap-3.5 px-2 py-2',
+								sidebarClasses.hoverBg,
+								sidebarClasses.text
 							)}
 							{item}
 						>
@@ -257,10 +258,8 @@
 							onClick={() => {
 								localStorage.removeItem('workspace')
 							}}
-							class={twMerge(
-								'text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary',
-								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-							)}
+							lightMode
+							class={twMerge('flex gap-3.5 px-2 py-2', sidebarClasses.hoverBg, sidebarClasses.text)}
 							{item}
 						>
 							<Building size={14} />
@@ -308,7 +307,7 @@
 							{item}
 						>
 							{#if !moreOpen || secondMenuLinks.length === 0}
-								<div class="px-2 py-2 text-tertiary text-2xs">More...</div>
+								<div class="px-2 py-2 text-primary text-2xs">More...</div>
 							{/if}
 						</MenuItem>
 						{#if moreOpen && secondMenuLinks.length > 0}
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index 547818747b..7ddb5a7e9b 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -51,7 +51,7 @@
 			<p class="text-sm font-medium text-primary truncate" role="none">
 				{$userStore?.email}
 			</p>
-			<span class="text-xs text-tertiary flex flex-row gap-2 items-center">
+			<span class="text-xs text-primary flex flex-row gap-2 items-center">
 				{#if $userStore?.is_admin}
 					Admin of this workspace <Crown size={14} />
 				{:else if $userStore?.operator}
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index c1d0ce1c69..c331bcbc3e 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -95,11 +95,9 @@
 		: null}
 	<Menu {createMenu} usePointerDownOutside>
 		{#snippet triggr({ trigger })}
-			<div
-				class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs"
-			>
-				<Building size={12} class="text-tertiary" />
-				<span class="text-xs text-tertiary"> {parentWorkspace?.name ?? ''} </span>
+			<div class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs">
+				<Building size={12} class="text-primary" />
+				<span class="text-xs text-primary"> {parentWorkspace?.name ?? ''} </span>
 			</div>
 		{/snippet}
 	</Menu>
@@ -160,7 +158,7 @@
 								style:padding-left={`${4 + depth * 12}px`}
 							>
 								{#if isForked}
-									<GitFork size={12} class="text-tertiary flex-shrink-0" />
+									<GitFork size={12} class="text-primary flex-shrink-0" />
 								{:else}
 									<Building size={12} />
 								{/if}
@@ -176,13 +174,13 @@
 									<div
 										class={twMerge(
 											'font-mono text-2xs whitespace-nowrap truncate text-left',
-											isForked ? 'text-tertiary opacity-75' : 'text-tertiary'
+											isForked ? 'text-primary opacity-75' : 'text-primary'
 										)}
 									>
 										{workspace.id}
 									</div>
 									{#if isForked && parentName}
-										<div class="text-tertiary text-2xs truncate text-left pl-2 min-h-[1rem]">
+										<div class="text-primary text-2xs truncate text-left pl-2 min-h-[1rem]">
 											Fork of {parentName}
 										</div>
 									{/if}
diff --git a/frontend/src/lib/components/table/Cell.svelte b/frontend/src/lib/components/table/Cell.svelte
index d5fc30f811..bd2ca0b697 100644
--- a/frontend/src/lib/components/table/Cell.svelte
+++ b/frontend/src/lib/components/table/Cell.svelte
@@ -42,7 +42,9 @@
 		if (shouldStopPropagation) e.stopPropagation()
 	}}
 	class={twMerge(
-		'text-left text-xs text-primary font-normal',
+		'text-left font-normal',
+		// Typography based on brand guidelines
+		head ? 'text-2xs text-primary' : 'text-xs text-primary',
 		wrap ? 'break-words' : 'whitespace-nowrap',
 		first ? 'sm:pl-6' : '',
 		last ? 'sm:pr-6' : '',
@@ -51,8 +53,7 @@
 		last && size === 'xs' ? 'sm:pr-3' : '',
 
 		numeric ? 'text-right' : '',
-		head ? 'font-semibold ' : '',
-		sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-3.5',
+		sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-2',
 		size === 'sm' ? 'px-1.5 py-2.5' : '',
 		size === 'lg' ? 'px-3 py-4' : '',
 		size === 'xs' ? 'px-1 py-1.5' : '',
diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 48b77b85ca..ea154fa5b5 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -192,7 +192,7 @@
 		{/if}
 		{#if (loading || loadingMore) && !neverShowLoader}
 			<div
-				class="text-tertiary bg-surface border-t flex flex-row justify-center py-2 items-center gap-2"
+				class="text-primary bg-surface border-t flex flex-row justify-center py-2 items-center gap-2"
 			>
 				<Loader2 class="animate-spin" size={14} />
 				{#if loadingMore}
diff --git a/frontend/src/lib/components/table/DownloadCsv.svelte b/frontend/src/lib/components/table/DownloadCsv.svelte
index fa4b041074..5069842afe 100644
--- a/frontend/src/lib/components/table/DownloadCsv.svelte
+++ b/frontend/src/lib/components/table/DownloadCsv.svelte
@@ -8,8 +8,8 @@
 </script>
 
 <Button
-	size="xs"
-	color="light"
+	unifiedSize="md"
+	variant="subtle"
 	startIcon={{ icon: Download }}
 	on:click={() => {
 		try {
diff --git a/frontend/src/lib/components/text_input/TextInput.svelte b/frontend/src/lib/components/text_input/TextInput.svelte
index 23a33b5966..bcc5ab3bc0 100644
--- a/frontend/src/lib/components/text_input/TextInput.svelte
+++ b/frontend/src/lib/components/text_input/TextInput.svelte
@@ -7,18 +7,26 @@
 		forceFocus?: boolean
 	} = {}) {
 		return twMerge(
-			'transition-colors border',
+			'transition-colors border border-border-light',
 			forceFocus
-				? '!border-nord-900 dark:!border-nord-900'
-				: '!border-nord-400 dark:!border-nord-300 hover:!border-nord-900/50 hover:dark:!border-nord-900/50 focus:!border-nord-900 dark:focus:!border-nord-900',
+				? '!border-border-selected'
+				: '!border-border-light hover:!border-border-selected/50 focus:!border-border-selected',
 			error
-				? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
+				? '!border-red-300 dark:!border-red-400/45 focus:!border-red-400 hover:!border-red-500 dark:hover:!border-red-400/75'
 				: ''
 		)
 	}
 
 	export const inputBaseClass =
-		'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint'
+		'rounded-md focus:ring-0 no-default-style text-xs text-primary font-normal !bg-surface-input disabled:!bg-surface-disabled/20 disabled:!border-transparent disabled:!text-disabled disabled:cursor-not-allowed shadow-none !placeholder-hint'
+
+	import { ButtonType } from '$lib/components/common/button/model'
+
+	export const inputSizeClasses = {
+		sm: `${ButtonType.UnifiedSizingClasses.sm} ${ButtonType.UnifiedMinHeightClasses.sm} !py-0.5`,
+		md: `${ButtonType.UnifiedSizingClasses.md} ${ButtonType.UnifiedMinHeightClasses.md}`,
+		lg: `${ButtonType.UnifiedSizingClasses.lg} ${ButtonType.UnifiedMinHeightClasses.lg}`
+	}
 </script>
 
 <script lang="ts">
@@ -30,6 +38,8 @@
 		value?: string
 		class?: string
 		error?: string | boolean
+		size?: 'sm' | 'md' | 'lg'
+		unifiedHeight?: boolean
 	}
 
 	export function focus() {
@@ -38,16 +48,25 @@
 
 	let inputEl: HTMLInputElement | undefined = $state()
 
-	let { inputProps, value = $bindable(), class: className = '', error }: Props = $props()
+	let {
+		inputProps,
+		value = $bindable(),
+		class: className = '',
+		error,
+		size = 'md',
+		unifiedHeight = true
+	}: Props = $props()
 </script>
 
 <input
 	{...inputProps}
 	class={twMerge(
 		inputBaseClass,
+		inputSizeClasses[size],
 		'w-full',
 		'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
 		inputBorderClass({ error: !!error }),
+		unifiedHeight ? ButtonType.UnifiedHeightClasses[size] : '',
 		className
 	)}
 	bind:this={inputEl}
diff --git a/frontend/src/lib/components/triggers/CaptureButton.svelte b/frontend/src/lib/components/triggers/CaptureButton.svelte
index 912c1173f0..995be6e1f5 100644
--- a/frontend/src/lib/components/triggers/CaptureButton.svelte
+++ b/frontend/src/lib/components/triggers/CaptureButton.svelte
@@ -90,9 +90,8 @@
 	{#snippet buttonReplacement()}
 		{#if small}
 			<Button
-				color="light"
 				size="xs"
-				variant="border"
+				variant="default"
 				wrapperClasses="h-full"
 				nonCaptureEvent
 				title="Test trigger"
@@ -104,7 +103,7 @@
 			</Button>
 		{:else}
 			<Button
-				color="dark"
+				variant="accent-secondary"
 				btnClasses="!rounded-l-none"
 				wrapperClasses="h-full"
 				nonCaptureEvent
diff --git a/frontend/src/lib/components/triggers/CaptureSection.svelte b/frontend/src/lib/components/triggers/CaptureSection.svelte
index 043eec325e..709cc2bc0f 100644
--- a/frontend/src/lib/components/triggers/CaptureSection.svelte
+++ b/frontend/src/lib/components/triggers/CaptureSection.svelte
@@ -281,8 +281,8 @@
 								size="xs"
 								on:click={() => dispatch('captureToggle', {})}
 								{disabled}
-								color={captureInfo.active ? 'light' : 'dark'}
-								btnClasses={captureInfo.active ? 'text-blue-500' : ''}
+								variant={captureInfo.active ? 'default' : 'accent-secondary'}
+								selected={captureInfo.active}
 								startIcon={captureInfo.active
 									? { icon: CircleStop }
 									: { icon: CaptureIcon, props: { variant: 'redDot' } }}
@@ -402,7 +402,7 @@
 								: 'Apply args to inputs'}
 					<Button
 						size="xs2"
-						color="dark"
+						variant="accent"
 						btnClasses="h-[27px]"
 						dropdownItems={[
 							{
@@ -475,7 +475,7 @@
 					/>
 				</div>
 			{:else}
-				<div class="text-center text-tertiary p-4 bg-surface rounded-md"
+				<div class="text-center text-primary p-4 bg-surface rounded-md"
 					>No captures to show yet.</div
 				>
 			{/if}
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 1001746ab6..20f3703921 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -333,7 +333,7 @@
 									<CustomPopover noPadding>
 										<Button
 											size="xs2"
-											color="dark"
+											variant="accent"
 											disabled
 											endIcon={{
 												icon: Info
@@ -347,7 +347,7 @@
 												<p> You need to add a preprocessor to use preprocessor captures as args </p>
 												<Button
 													size="xs2"
-													color="dark"
+													variant="accent"
 													on:click={() => {
 														dispatch('addPreprocessor')
 													}}
@@ -416,7 +416,7 @@
 				</SchemaPickerRow>
 			{/snippet}
 			{#snippet empty()}
-				<div class="text-center text-xs text-tertiary py-2">No captures yet</div>
+				<div class="text-center text-xs text-primary py-2">No captures yet</div>
 			{/snippet}
 		</InfiniteList>
 	</div>
diff --git a/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte b/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte
index b06392bb7e..1b4d6f8954 100644
--- a/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte
+++ b/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte
@@ -32,10 +32,7 @@
 	{#if trigger !== undefined}
 		{@const IconComponent = triggerIconMap[trigger.type]}
 		<div class="flex flex-row gap-2 items-center grow min-w-0 pr-2 rounded-md my-4">
-			<IconComponent
-				size={16}
-				class={twMerge(trigger.isDraft ? 'text-frost-400' : '', 'shrink-0')}
-			/>
+			<IconComponent size={16} class={twMerge(trigger.isDraft ? 'text-hint' : '', 'shrink-0')} />
 			<TriggerLabel {trigger} />
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
index 31dc66dffa..8561fae505 100644
--- a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
+++ b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
@@ -90,8 +90,7 @@
 		<Button
 			spacingSize="sm"
 			size="xs"
-			color="light"
-			variant="border"
+			variant="default"
 			on:click={testTriggerConnection}
 			loading={testLoading}
 			clickableWhileLoading
diff --git a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
index ac3032afc1..3540209ad5 100644
--- a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
+++ b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
@@ -60,6 +60,7 @@
 	{#if canSave}
 		<Button
 			size="sm"
+			variant="accent"
 			startIcon={{ icon: Save }}
 			disabled={saveDisabled}
 			on:click={() => {
@@ -75,7 +76,6 @@
 		{#if !trigger?.draftConfig && enabled !== undefined}
 			<div class="center-center">
 				<Toggle
-					size="2sm"
 					disabled={permissions === 'none'}
 					checked={enabled}
 					options={{ right: 'enable', left: 'disable' }}
@@ -91,7 +91,7 @@
 			<Button
 				size="xs"
 				startIcon={{ icon: RotateCcw }}
-				color={'light'}
+				variant="default"
 				on:click={() => {
 					onReset?.()
 				}}
@@ -102,6 +102,7 @@
 		{#if canSave}
 			<Tooltip placement="bottom-end" disablePopup={!saveDisabled && !cloudDisabled && isDeployed}>
 				<Button
+					variant="accent"
 					size="xs"
 					startIcon={{ icon: Save }}
 					disabled={saveDisabled || cloudDisabled || !isDeployed || !trigger?.draftConfig}
diff --git a/frontend/src/lib/components/triggers/TriggerLabel.svelte b/frontend/src/lib/components/triggers/TriggerLabel.svelte
index f906d66886..8952a75216 100644
--- a/frontend/src/lib/components/triggers/TriggerLabel.svelte
+++ b/frontend/src/lib/components/triggers/TriggerLabel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Badge from '../common/badge/Badge.svelte'
 	import { getTriggerLabel, type Trigger } from './utils'
 	import { twMerge } from 'tailwind-merge'
 
@@ -9,7 +10,7 @@
 
 <span
 	class={twMerge(
-		trigger.isDraft ? 'text-frost-400 italic dark:text-frost-200' : 'font-normal',
+		trigger.isDraft ? 'text-hint' : 'font-normal',
 		'truncate pr-1',
 		discard ? 'line-through' : ''
 	)}
@@ -27,25 +28,13 @@
 {/if}
 
 {#if trigger.isPrimary}
-	<span
-		class="ml-2 bg-blue-50 dark:bg-blue-900/40 px-1.5 py-0.5 rounded text-xs text-blue-700 dark:text-blue-100 whitespace-nowrap"
-	>
-		Primary
-	</span>
+	<Badge color="blue">Primary</Badge>
 {/if}
 
 {#if trigger.draftConfig && !trigger.isDraft}
-	<span
-		class="ml-2 text-xs bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-100 px-1.5 py-0.5 rounded whitespace-nowrap"
-	>
-		Modified
-	</span>
+	<Badge color="orange">Modified</Badge>
 {/if}
 
 {#if trigger.isDraft}
-	<span
-		class="ml-2 text-xs bg-frost-400 dark:bg-frost-900 text-white px-1.5 py-0.5 rounded whitespace-nowrap"
-	>
-		New
-	</span>
+	<Badge color="gray">New</Badge>
 {/if}
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index fab8c2c436..c04362f347 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -289,7 +289,9 @@
 	{#if chatInputEnabled}
 		<div class="p-2 pb-0">
 			<Alert type="warning" title="Chat Input Mode Enabled" size="xs">
-				This flow will only accept <span class="font-mono text-xs bg-surface-secondary px-1 rounded">user_message</span> as input parameter.
+				This flow will only accept
+				<span class="font-mono text-xs bg-surface-secondary px-1 rounded"> user_message</span>
+				as input parameter.
 			</Alert>
 		</div>
 	{/if}
@@ -319,9 +321,12 @@
 								class="w-fit h-fit"
 								placement="right-start"
 							>
-								<Button size="xs" nonCaptureEvent btnClasses="p-2 w-fit" wrapperClasses="p-0">
-									<Plus size="14" />
-								</Button>
+								<Button
+									variant="accent"
+									btnClasses="h-8 w-8 p-0"
+									nonCaptureEvent
+									startIcon={{ icon: Plus }}
+								/>
 							</AddTriggersButton>
 							<TriggersBadge
 								showOnlyWithCount={false}
@@ -390,7 +395,7 @@
 								</div>
 							{/key}
 						{:else}
-							<span class="text-sm text-tertiary text-center mx-auto mt-2"
+							<span class="text-sm text-primary text-center mx-auto mt-2"
 								>{`Select a trigger from the ${useVerticalTriggerBar ? 'left toolbar' : 'table'} or create a new one`}</span
 							>
 						{/if}
diff --git a/frontend/src/lib/components/triggers/TriggersTable.svelte b/frontend/src/lib/components/triggers/TriggersTable.svelte
index 7f9dd914bf..33588cb9d8 100644
--- a/frontend/src/lib/components/triggers/TriggersTable.svelte
+++ b/frontend/src/lib/components/triggers/TriggersTable.svelte
@@ -45,12 +45,11 @@
 				aiId="add-trigger"
 				aiDescription="Add a new trigger"
 				size="xs"
-				color="blue"
 				startIcon={{ icon: Plus }}
 				nonCaptureEvent
-				btnClasses="w-full justify-center"
+				variant="accent"
 			>
-				<span>Add trigger</span>
+				Add trigger
 			</Button>
 		</AddTriggersButton>
 	</div>
@@ -74,7 +73,7 @@
 						<div class="relative flex justify-center items-center">
 							<SvelteComponent
 								size={16}
-								class={trigger.isDraft ? 'text-frost-400' : 'text-tertiary'}
+								class={trigger.isDraft ? 'text-frost-400' : 'text-primary'}
 							/>
 
 							{#if trigger.isPrimary}
@@ -123,12 +122,12 @@
 
 			{#if !loading && triggers.length === 0}
 				<tr>
-					<td colspan="2" class="text-center py-4 text-tertiary text-sm"> No triggers found </td>
+					<td colspan="2" class="text-center py-4 text-primary text-sm"> No triggers found </td>
 				</tr>
 			{/if}
 			{#if loading && triggers.length === 0}
 				<tr>
-					<td colspan="2" class="text-center py-4 text-tertiary text-sm">
+					<td colspan="2" class="text-center py-4 text-primary text-sm">
 						<div class="flex justify-center items-center gap-2">
 							<Loader2 class="animate-spin" size={16} />
 							<span>Loading triggers...</span>
diff --git a/frontend/src/lib/components/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
index 586186c6ee..a6be555a42 100644
--- a/frontend/src/lib/components/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
@@ -169,7 +169,7 @@
 {:else if selectedTrigger.type === 'poll'}
 	<ScheduledPollPanel />
 {:else if selectedTrigger.type === 'cli'}
-	<div class="py-1 flex flex-col gap-4">
+	<div class="py-1 flex flex-col gap-6">
 		<ClipboardPanel content={selectedTrigger.extra?.cliCommand ?? ''} />
 		<CliHelpBox />
 	</div>
@@ -180,7 +180,7 @@
 	<div class="flex flex-row gap-2 items-center grow min-w-0 pr-2">
 		<IconComponent
 			size={16}
-			class={twMerge(selectedTrigger.isDraft ? 'text-frost-400' : '', 'shrink-0')}
+			class={twMerge(selectedTrigger.isDraft ? 'text-hint' : '', 'shrink-0')}
 		/>
 		<TriggerLabel trigger={selectedTrigger} />
 	</div>
diff --git a/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte b/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte
index d97848a76d..6e3702ba87 100644
--- a/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte
@@ -12,6 +12,7 @@
 	import { base32 } from 'rfc4648'
 	import { emptyString } from '$lib/utils'
 	import UserSettings from '$lib/components/UserSettings.svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	let requestType: 'hash' | 'path' = $state('path')
 
@@ -54,21 +55,18 @@
 </script>
 
 <div>
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-6">
 		{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
 			<Label label="Token">
 				<div class="flex flex-row justify-between gap-2">
-					<input
+					<TextInput
 						bind:value={token}
-						placeholder="paste your token here once created to alter examples below"
+						inputProps={{
+							placeholder: 'Paste your token here once created to alter examples below'
+						}}
 						class="!text-xs"
 					/>
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						on:click={() => userSettings.openDrawer()}
-					>
+					<Button size="xs" variant="default" on:click={() => userSettings.openDrawer()}>
 						Create an Email-specific Token
 						<Tooltip light>
 							The token will have a scope such that it can only be used to trigger this script. It
@@ -89,7 +87,7 @@
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row justify-between">
 					<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
-					<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+					<ToggleButtonGroup class="w-auto" bind:selected={requestType}>
 						{#snippet children({ item })}
 							<ToggleButton label="By path" value="path" {item} />
 							<ToggleButton label="By hash" value="hash" {item} />
@@ -105,21 +103,15 @@
 					{#if !emptyString(token)}
 						<ClipboardPanel content={email} />
 					{:else}
-						<input
-							type="text"
-							disabled
-							value="Create a token first"
-							class="!text-xs !text-red-400"
-						/>
+						<TextInput inputProps={{ placeholder: 'Create a token first', disabled: true }} />
 					{/if}
+					<Alert title="Email trigger" size="xs" class="mt-1">
+						To trigger the job by email, send an email to the address above. The job will receive
+						two arguments: `raw_email` containing the raw email as string, and `parsed_email`
+						containing the parsed email as an object.
+					</Alert>
 				</Label>
 			{/key}
 		{/key}
-
-		<Alert title="Email trigger" size="xs">
-			To trigger the job by email, send an email to the address above. The job will receive two
-			arguments: `raw_email` containing the raw email as string, and `parsed_email` containing the
-			parsed email as an object.
-		</Alert>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte b/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte
index 3fb95b1477..3859237cdd 100644
--- a/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte
+++ b/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte
@@ -60,7 +60,7 @@
 	{scopes}
 />
 
-<Section label="Default email trigger" class="flex flex-col gap-4">
+<Section label="Default email trigger" class="flex flex-col gap-6">
 	<Description link="https://www.windmill.dev/docs/advanced/email_triggers">
 		Default email trigger is a partially fixed email address that can be used to trigger a script or
 		flow. The email address is composed of the encoded workspace and script or flow path as well as
diff --git a/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
index 62e1eecb92..abdcc24400 100644
--- a/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
@@ -265,7 +265,7 @@
 
 			{#if !hideTarget}
 				<Section label="Target">
-					<p class="text-xs mt-3 mb-1 text-tertiary">
+					<p class="text-xs mt-3 mb-1 text-primary">
 						Pick a script or flow to be triggered<Required required={true} />
 					</p>
 					<div class="flex flex-col gap-2">
@@ -285,7 +285,7 @@
 							{#if emptyString(script_path)}
 								<Button
 									btnClasses="ml-4 mt-2"
-									color="dark"
+									variant="accent"
 									size="xs"
 									href={itemKind === 'flow' ? '/flows/add?hub=72' : '/scripts/add?hub=hub%2F19813'}
 									target="_blank">Create from template</Button
@@ -311,8 +311,8 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							<TriggerRetriesAndErrorHandler
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
index 76858f79fb..8d0aa20277 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
@@ -191,8 +191,7 @@
 							/>
 							<Button
 								disabled={!can_write}
-								variant="border"
-								color="light"
+								variant="default"
 								wrapperClasses="self-stretch"
 								on:click={loadAllPubSubTopicsFromProject}
 								startIcon={{ icon: RefreshCw }}
@@ -284,7 +283,7 @@
 											<Url url={`${base_endpoint}/${path}`} label="Production URL" />
 										</div>
 										<Subsection label="Authenticate">
-											<p class="text-xs mb-2 text-tertiary">
+											<p class="text-xs mb-2 text-primary">
 												Enable Google Cloud authentication for push delivery using a verified token.<Required
 													required={true}
 												/>
@@ -327,8 +326,7 @@
 									/>
 									<Button
 										disabled={!can_write}
-										variant="border"
-										color="light"
+										variant="default"
 										wrapperClasses="self-stretch"
 										on:click={loadAllSubscriptionFromGooglePubSubTopic}
 										startIcon={{ icon: RefreshCw }}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
index 3a14b27522..83b04b5de6 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
@@ -226,7 +226,7 @@
 			path,
 			script_path,
 			enabled,
-			is_flow : itemKind === 'flow',
+			is_flow: itemKind === 'flow',
 			error_handler_path,
 			error_handler_args,
 			retry,
@@ -364,7 +364,7 @@
 
 			{#if !hideTarget}
 				<Section label="Runnable">
-					<p class="text-xs mb-1 text-tertiary">
+					<p class="text-xs mb-1 text-primary">
 						Pick a script or flow to be triggered <Required required={true} />
 					</p>
 					<div class="flex flex-row mb-2">
@@ -381,9 +381,9 @@
 						/>
 						{#if emptyString(script_path)}
 							<Button
-								btnClasses="ml-4 mt-2"
-								color="dark"
-								size="xs"
+								btnClasses="ml-4"
+								variant="default"
+								unifiedSize="md"
 								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=68' : '/scripts/add?hub=hub%2F19796'}
 								target="_blank">Create from template</Button
@@ -415,9 +415,9 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="settings">Settings</Tab>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="settings" label="Settings" />
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							{#if optionTabSelected === 'settings'}
diff --git a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
index 3fc99e55c5..fd66b449d0 100644
--- a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
+++ b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
@@ -354,7 +354,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 																<div class="flex justify-start w-full">
 																	<Badge
 																		color="gray"
-																		class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
+																		class="center-center !bg-surface-secondary !text-primary !w-[70px] !h-[24px] rounded-r-none border"
 																	>
 																		Full path
 																	</Badge>
@@ -430,7 +430,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 																	<div class="flex justify-start w-full">
 																		<Badge
 																			color="gray"
-																			class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
+																			class="center-center !bg-surface-secondary !text-primary !w-[70px] !h-[24px] rounded-r-none border"
 																		>
 																			Full path
 																		</Badge>
@@ -453,8 +453,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 								</div>
 
 								<Button
-									variant="border"
-									color="light"
+									variant="default"
 									size="xs"
 									btnClasses="bg-surface-secondary hover:bg-red-500 hover:text-white p-2 rounded-full"
 									aria-label="Clear"
@@ -476,10 +475,9 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 						<div class="w-1/2">
 							<Button
 								spacingSize="sm"
-								color="light"
 								btnClasses="h-10"
 								size="xs"
-								variant="border"
+								variant="default"
 								on:click={() => {
 									webhookAndHttpRouteFilter.push({
 										path: '*',
@@ -528,8 +526,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 							<Button
 								size="xs"
 								btnClasses="h-10"
-								color="light"
-								variant="border"
+								variant="default"
 								on:click={() => {
 									webhookAndHttpRouteFilter.push({
 										path_regex: '*',
@@ -587,9 +584,8 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 					<Button
 						{disabled}
 						spacingSize="sm"
-						color="light"
 						size="xs"
-						variant="border"
+						variant="default"
 						on:click={copyCommandToClipboard}
 						startIcon={{ icon: ClipboardCopy }}
 					>
@@ -630,8 +626,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 						<Button
 							disabled={emptyStringTrimmed(openapiDocument)}
 							spacingSize="sm"
-							color="light"
-							variant="border"
+							variant="default"
 							btnClasses="mb-2"
 							on:click={async () => {
 								await copyToClipboard(openapiDocument)
@@ -643,8 +638,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 						<Button
 							disabled={emptyStringTrimmed(openapiDocument)}
 							spacingSize="sm"
-							color="light"
-							variant="border"
+							variant="default"
 							btnClasses="mb-2"
 							on:click={() => {
 								download(
diff --git a/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte b/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
index 1fa781d089..38ffe933c4 100644
--- a/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
@@ -19,7 +19,7 @@
 	}: Props = $props()
 </script>
 
-<Label label="Raw body" class="w-full">
+<Label label="Raw body" for="raw-body-toggle" class="w-full">
 	{#snippet header()}
 		<Tooltip
 			documentationLink="https://www.windmill.dev/docs/core_concepts/http_routing#body-processing-options"
@@ -39,10 +39,11 @@
 				raw_string = !raw_string
 			}}
 			{disabled}
+			id="raw-body-toggle"
 		/>
 	{/snippet}
 </Label>
-<Label label="Wrap body" class="w-full">
+<Label label="Wrap body" for="wrap-body-toggle" class="w-full">
 	{#snippet header()}
 		<Tooltip
 			documentationLink="https://www.windmill.dev/docs/core_concepts/http_routing#body-processing-options"
@@ -61,6 +62,7 @@
 				wrap_body = !wrap_body
 			}}
 			{disabled}
+			id="wrap-body-toggle"
 		/>
 	{/snippet}
 </Label>
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
index 9756496121..94965d696c 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
@@ -12,6 +12,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import TestingBadge from '../testingBadge.svelte'
 	import { untrack } from 'svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	interface Props {
 		initialTriggerPath?: string | undefined
@@ -116,29 +117,30 @@
 			</Alert>
 			<div class="my-2"></div>
 		{/if}
-		<div class="flex flex-col w-full gap-4">
+		<div class="flex flex-col w-full gap-6">
 			<label class="block grow w-full">
 				<div class="flex flex-col gap-1">
-					<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+					<div
+						class="text-emphasis text-xs font-semibold flex items-center gap-1 w-full justify-between"
+					>
 						<div>
 							Path
 							<Required required={true} />
 						</div>
-						<div class="text-2xs text-tertiary"> ':myparam' for path params </div>
 					</div>
 					<!-- svelte-ignore a11y_autofocus -->
-					<input
-						type="text"
-						autocomplete="off"
-						bind:value={route_path}
-						disabled={!userCanEditConfig || !can_write}
-						class={routeError === ''
-							? ''
-							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-						oninput={() => {
-							dirtyRoutePath = true
+					<TextInput
+						inputProps={{
+							autocomplete: 'off',
+							disabled: !userCanEditConfig || !can_write,
+							oninput: () => {
+								dirtyRoutePath = true
+							}
 						}}
+						bind:value={route_path}
+						error={routeError !== ''}
 					/>
+					<div class="text-2xs text-secondary"> ':myparam' for path params </div>
 				</div>
 			</label>
 
@@ -155,31 +157,28 @@
 					<ToggleButton label="DELETE" value="delete" {item} {disabled} />
 				{/snippet}
 			</ToggleButtonGroup>
-			<div class="flex flex-col w-full">
+			<div class="flex flex-col w-full gap-1">
 				<Url url={fullRoute} label="Production URL" />
 
-				<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
-					>{dirtyRoutePath ? routeError : ''}</div
+				<div class="text-red-600 dark:text-red-400 text-2xs">{dirtyRoutePath ? routeError : ''}</div
 				>
 				{#if !isCloudHosted()}
-					<div class="mt-1">
-						<Toggle
-							size="sm"
-							checked={workspaced_route}
-							disabled={!can_write || !userCanEditConfig}
-							on:change={() => {
-								workspaced_route = !workspaced_route
-								dirtyRoutePath = true
-							}}
-							options={{
-								right: 'Prefix with workspace',
-								rightTooltip:
-									'Prefixes the route with the workspace ID (e.g., {base_url}/api/r/{workspace_id}/{route}). Note: deploying the HTTP trigger to another workspace updates the route workspace prefix accordingly.',
-								rightDocumentationLink:
-									'https://www.windmill.dev/docs/core_concepts/http_routing#workspace-prefix'
-							}}
-						/>
-					</div>
+					<Toggle
+						size="sm"
+						checked={workspaced_route}
+						disabled={!can_write || !userCanEditConfig}
+						on:change={() => {
+							workspaced_route = !workspaced_route
+							dirtyRoutePath = true
+						}}
+						options={{
+							right: 'Prefix with workspace',
+							rightTooltip:
+								'Prefixes the route with the workspace ID (e.g., {base_url}/api/r/{workspace_id}/{route}). Note: deploying the HTTP trigger to another workspace updates the route workspace prefix accordingly.',
+							rightDocumentationLink:
+								'https://www.windmill.dev/docs/core_concepts/http_routing#workspace-prefix'
+						}}
+					/>
 				{/if}
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
index c17c3b479e..2fb5bfeb26 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
@@ -405,10 +405,10 @@
 			<Loader2 class="animate-spin" />
 		{/if}
 	{:else}
-		<div class="flex flex-col gap-12">
+		<div class="flex flex-col gap-8">
 			<Section label="Metadata">
-				<div class="flex flex-col gap-2">
-					<Label label="Summary">
+				<div class="flex flex-col gap-6">
+					<Label label="Summary" for="summary">
 						<!-- svelte-ignore a11y_autofocus -->
 						<input
 							autofocus
@@ -417,10 +417,11 @@
 							class="text-sm w-full"
 							bind:value={summary}
 							disabled={!can_write}
+							id="summary"
 						/>
 					</Label>
 
-					<Label label="Path">
+					<Label label="Path" for="path">
 						<Path
 							bind:dirty={dirtyPath}
 							bind:error={pathError}
@@ -434,13 +435,14 @@
 						/>
 					</Label>
 
-					<Label label="Description">
+					<Label label="Description" for="description">
 						<textarea
 							rows="4"
 							use:autosize
 							bind:value={routeDescription}
 							placeholder="Describe the route"
 							disabled={!can_write}
+							id="description"
 						></textarea>
 					</Label>
 				</div>
@@ -448,141 +450,145 @@
 
 			{#if !hideTarget}
 				<Section label="Target">
-					{#if !isCloudHosted()}
-						<ToggleButtonGroup
-							disabled={fixedScriptPath != '' || !can_write}
-							selected={static_asset_config
-								? is_static_website
-									? 'static_website'
-									: 'static_asset'
-								: 'runnable'}
-							on:selected={(ev) => {
-								if (ev.detail === 'static_asset' || ev.detail === 'static_website') {
-									static_asset_config = { s3: '' }
-									s3Editor?.setCode(JSON.stringify(static_asset_config, null, 2))
-									script_path = ''
-									initialScriptPath = ''
-									is_flow = false
-									http_method = 'get'
-									request_type = 'sync'
-									is_static_website = ev.detail === 'static_website'
-									if (is_static_website) {
-										authentication_method = 'none'
+					<div class="flex flex-col gap-6">
+						{#if !isCloudHosted()}
+							<ToggleButtonGroup
+								disabled={fixedScriptPath != '' || !can_write}
+								selected={static_asset_config
+									? is_static_website
+										? 'static_website'
+										: 'static_asset'
+									: 'runnable'}
+								on:selected={(ev) => {
+									if (ev.detail === 'static_asset' || ev.detail === 'static_website') {
+										static_asset_config = { s3: '' }
+										s3Editor?.setCode(JSON.stringify(static_asset_config, null, 2))
+										script_path = ''
+										initialScriptPath = ''
+										is_flow = false
+										http_method = 'get'
+										request_type = 'sync'
+										is_static_website = ev.detail === 'static_website'
+										if (is_static_website) {
+											authentication_method = 'none'
+										}
+									} else if (ev.detail === 'runnable') {
+										static_asset_config = undefined
 									}
-								} else if (ev.detail === 'runnable') {
-									static_asset_config = undefined
-								}
-							}}
-						>
-							{#snippet children({ item, disabled })}
-								<ToggleButton label="Runnable" value="runnable" {item} {disabled} />
-								<ToggleButton label="Static asset" value="static_asset" {item} {disabled} />
-								<ToggleButton label="Static website" value="static_website" {item} {disabled} />
-							{/snippet}
-						</ToggleButtonGroup>
-					{/if}
-
-					{#if static_asset_config}
-						{#if is_static_website}
-							<p class="text-xs my-1 text-tertiary">
-								Upload or specify a <b>folder</b> on S3. All its files will be served under the path
-								above. Use this full path as the base URL of your website to ensure relative imports
-								work correctly.
-							</p>
+								}}
+							>
+								{#snippet children({ item, disabled })}
+									<ToggleButton label="Runnable" value="runnable" {item} {disabled} />
+									<ToggleButton label="Static asset" value="static_asset" {item} {disabled} />
+									<ToggleButton label="Static website" value="static_website" {item} {disabled} />
+								{/snippet}
+							</ToggleButtonGroup>
 						{/if}
-						<div class="flex flex-col gap-4">
-							<div class="flex flex-col w-full gap-1">
-								{#if can_write}
-									<Toggle
-										class="flex justify-end"
-										bind:checked={s3FileUploadRawMode}
-										size="xs"
-										options={{ left: 'Raw S3 object input' }}
-										disabled={!can_write}
-									/>
-								{/if}
-								{#if s3FileUploadRawMode}
-									{#if can_write}
-										<JsonEditor
-											bind:editor={s3Editor}
-											code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
-											bind:value={static_asset_config}
-										/>
-									{:else}
-										<Highlight
-											language={json}
-											code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
-										/>
-									{/if}
-								{:else}
-									{#key is_static_website}
-										<FileUpload
-											folderOnly={is_static_website}
-											allowMultiple={false}
-											randomFileKey={true}
-											on:addition={(evt) => {
-												static_asset_config = {
-													s3: evt.detail?.path ?? '',
-													filename: evt.detail?.filename ?? undefined
-												}
-											}}
-											on:deletion={(evt) => {
-												static_asset_config = {
-													s3: ''
-												}
-											}}
-										/>
-									{/key}
-								{/if}
-								{#if can_write}
-									<Button
-										variant="border"
-										color="light"
-										size="xs"
-										btnClasses="mt-1"
-										on:click={() => {
-											s3FilePicker?.open?.(!is_static_website ? static_asset_config : undefined)
-										}}
-										startIcon={{ icon: Pipette }}
-									>
-										Choose an object from the catalog
-									</Button>
-								{/if}
-							</div>
-						</div>
-					{:else}
-						<p class="text-xs mt-3 mb-1 text-tertiary">
-							Pick a script or flow to be triggered<Required required={true} /><br />
-							To handle headers, query or path parameters, add a preprocessor to your runnable.
-						</p>
-						<div class="flex flex-col gap-2">
-							<div class="flex flex-row mb-2">
-								<ScriptPicker
-									disabled={fixedScriptPath != '' || !can_write}
-									initialPath={fixedScriptPath || initialScriptPath}
-									kinds={['script']}
-									allowFlow={true}
-									bind:itemKind
-									bind:scriptPath={script_path}
-									allowRefresh={can_write}
-									allowEdit={!$userStore?.operator}
-									clearable
-								/>
 
-								{#if emptyString(script_path)}
-									<Button
-										btnClasses="ml-4 mt-2"
-										color="dark"
-										size="xs"
-										href={itemKind === 'flow'
-											? '/flows/add?hub=62'
-											: '/scripts/add?hub=hub%2F19669'}
-										target="_blank">Create from template</Button
-									>
+						{#if static_asset_config}
+							<div class="flex flex-col gap-1">
+								{#if is_static_website}
+									<p class="text-xs text-primary">
+										Upload or specify a <b class="font-semibold text-emphasis">folder</b> on S3. All
+										its files will be served under the path above. Use this full path as the base URL
+										of your website to ensure relative imports work correctly.
+									</p>
 								{/if}
+								<div class="flex flex-col gap-4">
+									<div class="flex flex-col w-full gap-1">
+										{#if can_write}
+											<Toggle
+												class="flex justify-end"
+												bind:checked={s3FileUploadRawMode}
+												size="xs"
+												options={{ left: 'Raw S3 object input' }}
+												disabled={!can_write}
+											/>
+										{/if}
+										{#if s3FileUploadRawMode}
+											{#if can_write}
+												<JsonEditor
+													bind:editor={s3Editor}
+													code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
+													bind:value={static_asset_config}
+												/>
+											{:else}
+												<Highlight
+													language={json}
+													code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
+												/>
+											{/if}
+										{:else}
+											{#key is_static_website}
+												<FileUpload
+													folderOnly={is_static_website}
+													allowMultiple={false}
+													randomFileKey={true}
+													on:addition={(evt) => {
+														static_asset_config = {
+															s3: evt.detail?.path ?? '',
+															filename: evt.detail?.filename ?? undefined
+														}
+													}}
+													on:deletion={(evt) => {
+														static_asset_config = {
+															s3: ''
+														}
+													}}
+												/>
+											{/key}
+										{/if}
+										{#if can_write}
+											<Button
+												variant="default"
+												size="xs"
+												on:click={() => {
+													s3FilePicker?.open?.(!is_static_website ? static_asset_config : undefined)
+												}}
+												startIcon={{ icon: Pipette }}
+											>
+												Choose an object from the catalog
+											</Button>
+										{/if}
+									</div>
+								</div>
 							</div>
-						</div>
-					{/if}
+						{:else}
+							<div class="flex flex-col gap-1">
+								<p class="text-xs text-primary font-normal">
+									Pick a script or flow to be triggered<Required required={true} />
+								</p>
+
+								<div class="flex flex-row items-center gap-2">
+									<ScriptPicker
+										disabled={fixedScriptPath != '' || !can_write}
+										initialPath={fixedScriptPath || initialScriptPath}
+										kinds={['script']}
+										allowFlow={true}
+										bind:itemKind
+										bind:scriptPath={script_path}
+										allowRefresh={can_write}
+										allowEdit={!$userStore?.operator}
+										clearable
+									/>
+
+									{#if emptyString(script_path)}
+										<Button
+											variant="default"
+											size="lg"
+											href={itemKind === 'flow'
+												? '/flows/add?hub=62'
+												: '/scripts/add?hub=hub%2F19669'}
+											target="_blank">Create from template</Button
+										>
+									{/if}
+								</div>
+								<p class="text-2xs text-secondary font-normal">
+									To handle headers, query or path parameters, add a preprocessor to your runnable.
+								</p>
+							</div>
+						{/if}
+					</div>
 				</Section>
 			{/if}
 
@@ -601,153 +607,149 @@
 
 			{#if !is_static_website}
 				<Section label="Advanced" collapsable>
-					<div class="flex flex-col gap-4">
-						<div class="min-h-96">
-							<Tabs bind:selected={optionTabSelected}>
-								<Tab value="request_options">Request Options</Tab>
-								<Tab value="error_handler">Error Handler</Tab>
-								<Tab value="retries">Retries</Tab>
-							</Tabs>
-							<div class="mt-4">
-								{#if optionTabSelected === 'request_options'}
-									<div class="flex flex-col gap-4">
-										{#if !static_asset_config}
-											<div class="flex flex-row justify-between">
-												<Label label="Request type" class="w-full">
-													{#snippet action()}
-														<ToggleButtonGroup
-															class="w-auto h-full"
-															selected={request_type}
-															on:selected={({ detail }) => {
-																request_type = detail
-															}}
-															disabled={!can_write || !!static_asset_config}
-														>
-															{#snippet children({ item, disabled })}
-																<ToggleButton
-																	label="Sync"
-																	value="sync"
-																	tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-																	{item}
-																	{disabled}
-																/>
-																<ToggleButton
-																	label="Async"
-																	value="async"
-																	tooltip="The returning value is the uuid of the job assigned to execute the job."
-																	{item}
-																	{disabled}
-																/>
-																<ToggleButton
-																	label="Sync SSE"
-																	value="sync_sse"
-																	tooltip="Triggers the execution and returns an SSE stream."
-																	{item}
-																	{disabled}
-																/>
-															{/snippet}
-														</ToggleButtonGroup>
-													{/snippet}
-												</Label>
-											</div>
-										{/if}
-										<Label label="Authentication" class="w-full">
-											{#snippet action()}
-												<ToggleButtonGroup
-													class="w-auto h-full"
-													bind:selected={authentication_method}
-													on:selected={(e) => {
-														if (
-															e.detail === 'signature' &&
-															signature_options_type === 'custom_script'
-														) {
-															raw_string = true
-														}
-													}}
-													disabled={!can_write}
-												>
-													{#snippet children({ item, disabled })}
-														{#each authentication_options as option}
-															{#if option.value === 'signature'}
-																<Popover placement="top-end" usePointerDownOutside>
-																	{#snippet trigger()}
-																		<ToggleButton
-																			label={option.label}
-																			value={option.value}
-																			tooltip={option.tooltip}
-																			{item}
-																			{disabled}
-																		/>
-																	{/snippet}
-																	{#snippet content()}
-																		<ToggleButtonGroup
-																			class="w-auto h-full"
-																			bind:selected={signature_options_type}
-																			on:selected={(e) => {
-																				if (e.detail === 'custom_script') {
-																					if (!raw_string) {
-																						raw_string = true
-																					}
+					<div class="min-h-96">
+						<Tabs bind:selected={optionTabSelected}>
+							<Tab value="request_options" label="Request Options" />
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
+						</Tabs>
+						<div class="mt-4">
+							{#if optionTabSelected === 'request_options'}
+								<div class="flex flex-col gap-4">
+									{#if !static_asset_config}
+										<div class="flex flex-row justify-between">
+											<Label label="Request type" class="w-full">
+												{#snippet action()}
+													<ToggleButtonGroup
+														class="w-auto h-full"
+														selected={request_type}
+														on:selected={({ detail }) => {
+															request_type = detail
+														}}
+														disabled={!can_write || !!static_asset_config}
+													>
+														{#snippet children({ item, disabled })}
+															<ToggleButton
+																label="Sync"
+																value="sync"
+																tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+																{item}
+																{disabled}
+															/>
+															<ToggleButton
+																label="Async"
+																value="async"
+																tooltip="The returning value is the uuid of the job assigned to execute the job."
+																{item}
+																{disabled}
+															/>
+															<ToggleButton
+																label="Sync SSE"
+																value="sync_sse"
+																tooltip="Triggers the execution and returns an SSE stream."
+																{item}
+																{disabled}
+															/>
+														{/snippet}
+													</ToggleButtonGroup>
+												{/snippet}
+											</Label>
+										</div>
+									{/if}
+									<Label label="Authentication" class="w-full">
+										{#snippet action()}
+											<ToggleButtonGroup
+												class="w-auto h-full"
+												bind:selected={authentication_method}
+												on:selected={(e) => {
+													if (
+														e.detail === 'signature' &&
+														signature_options_type === 'custom_script'
+													) {
+														raw_string = true
+													}
+												}}
+												disabled={!can_write}
+											>
+												{#snippet children({ item, disabled })}
+													{#each authentication_options as option}
+														{#if option.value === 'signature'}
+															<Popover placement="top-end" usePointerDownOutside>
+																{#snippet trigger()}
+																	<ToggleButton
+																		label={option.label}
+																		value={option.value}
+																		tooltip={option.tooltip}
+																		{item}
+																		{disabled}
+																	/>
+																{/snippet}
+																{#snippet content()}
+																	<ToggleButtonGroup
+																		class="w-auto h-full"
+																		bind:selected={signature_options_type}
+																		on:selected={(e) => {
+																			if (e.detail === 'custom_script') {
+																				if (!raw_string) {
+																					raw_string = true
 																				}
-																			}}
-																			disabled={!can_write}
-																		>
-																			{#snippet children({ item, disabled })}
-																				<ToggleButton
-																					label="Signature validation"
-																					value="custom_signature"
-																					tooltip="Use a predefined or custom signature-based authentication scheme"
-																					{item}
-																					{disabled}
-																				/>
-																				<ToggleButton
-																					label="Custom script"
-																					value="custom_script"
-																					tooltip="Use your own script logic"
-																					{item}
-																					{disabled}
-																				/>
-																			{/snippet}
-																		</ToggleButtonGroup>
-																	{/snippet}
-																</Popover>
-															{:else}
-																<ToggleButton
-																	label={option.label}
-																	value={option.value}
-																	tooltip={option.tooltip}
-																	{item}
-																	{disabled}
-																/>
-															{/if}
-														{/each}
-													{/snippet}
-												</ToggleButtonGroup>
-											{/snippet}
-										</Label>
+																			}
+																		}}
+																		disabled={!can_write}
+																	>
+																		{#snippet children({ item, disabled })}
+																			<ToggleButton
+																				label="Signature validation"
+																				value="custom_signature"
+																				tooltip="Use a predefined or custom signature-based authentication scheme"
+																				{item}
+																				{disabled}
+																			/>
+																			<ToggleButton
+																				label="Custom script"
+																				value="custom_script"
+																				tooltip="Use your own script logic"
+																				{item}
+																				{disabled}
+																			/>
+																		{/snippet}
+																	</ToggleButtonGroup>
+																{/snippet}
+															</Popover>
+														{:else}
+															<ToggleButton
+																label={option.label}
+																value={option.value}
+																tooltip={option.tooltip}
+																{item}
+																{disabled}
+															/>
+														{/if}
+													{/each}
+												{/snippet}
+											</ToggleButtonGroup>
+										{/snippet}
+									</Label>
 
-										{#each authentication_options as option}
-											{#if option.resource_type && authentication_method === option.value}
-												<ResourcePicker
-													bind:value={authentication_resource_path}
-													resourceType={option.resource_type}
-													disabled={!can_write}
-												/>
-											{/if}
-										{/each}
+									{#each authentication_options as option}
+										{#if option.resource_type && authentication_method === option.value}
+											<ResourcePicker
+												bind:value={authentication_resource_path}
+												resourceType={option.resource_type}
+												disabled={!can_write}
+											/>
+										{/if}
+									{/each}
 
-										{#if authentication_method === 'signature'}
-											{#if signature_options_type === 'custom_signature'}
-												<ResourcePicker
-													bind:value={authentication_resource_path}
-													resourceType={'signature_auth'}
-													disabled={!can_write}
-												/>
-											{:else if signature_options_type === 'custom_script'}
-												<p class="text-xs mt-3 mb-1 text-tertiary">
-													Pick a secret variable or create one which will be used as a secret key
-													for your custom script/flow<Required required={true} /><br />
-												</p>
+									{#if authentication_method === 'signature'}
+										{#if signature_options_type === 'custom_signature'}
+											<ResourcePicker
+												bind:value={authentication_resource_path}
+												resourceType={'signature_auth'}
+												disabled={!can_write}
+											/>
+										{:else if signature_options_type === 'custom_script'}
+											<div class="flex flex-col gap-1">
 												<div class="flex flex-row gap-2">
 													<div class="flex flex-row gap-2 w-full">
 														<input
@@ -759,9 +761,9 @@
 														/>
 														<Button
 															title="Add variable"
+															variant="accent"
 															on:click={() => variablePicker?.openDrawer()}
 															size="xs"
-															color="dark"
 															disabled={!can_write}
 														>
 															Pick variable
@@ -769,7 +771,7 @@
 													</div>
 													<Button
 														disabled={emptyString(variable_path) || !can_write}
-														color="dark"
+														variant="default"
 														size="xs"
 														href={itemKind === 'flow'
 															? `/flows/add?${SECRET_KEY_PATH}=${encodeURIComponent(variable_path)}&hub=${
@@ -781,28 +783,32 @@
 														target="_blank">Create from template</Button
 													>
 												</div>
-											{/if}
+												<p class="text-2xs text-secondary">
+													Pick a secret variable or create one which will be used as a secret key
+													for your custom script/flow<Required required={true} /><br />
+												</p>
+											</div>
 										{/if}
+									{/if}
 
-										<RouteBodyTransformerOption
-											bind:raw_string
-											bind:wrap_body
-											disabled={!can_write}
-											{testingBadge}
-										/>
-									</div>
-								{:else}
-									<TriggerRetriesAndErrorHandler
-										{optionTabSelected}
-										{itemKind}
-										{can_write}
-										bind:errorHandlerSelected
-										bind:error_handler_path
-										bind:error_handler_args
-										bind:retry
+									<RouteBodyTransformerOption
+										bind:raw_string
+										bind:wrap_body
+										disabled={!can_write}
+										{testingBadge}
 									/>
-								{/if}
-							</div>
+								</div>
+							{:else}
+								<TriggerRetriesAndErrorHandler
+									{optionTabSelected}
+									{itemKind}
+									{can_write}
+									bind:errorHandlerSelected
+									bind:error_handler_path
+									bind:error_handler_args
+									bind:retry
+								/>
+							{/if}
 						</div>
 					</div>
 				</Section>
@@ -883,8 +889,7 @@
 	{#snippet submission()}
 		<div class="flex flex-row">
 			<Button
-				variant="border"
-				color="blue"
+				variant="default"
 				size="sm"
 				startIcon={{ icon: Plus }}
 				on:click={() => {
diff --git a/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
index 74ad72e3e5..42cce7648a 100644
--- a/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
+++ b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
@@ -158,7 +158,7 @@
 			<div class="flex flex-col gap-1 h-full">
 				<Subsection>
 					<div class="flex flex-col gap-1">
-						<p class="text-xs text-tertiary">
+						<p class="text-xs text-primary">
 							Pick a folder to bind the generated HTTP routes to.<Required required={true} />
 						</p>
 						<FolderPicker bind:folderName />
@@ -274,8 +274,7 @@
 								loading={isGeneratingHttpRoutes}
 								on:click={generateHttpTrigger}
 								disabled={code.length === 0}
-								color="light"
-								variant="border">Generate HTTP routes</Button
+								variant="default">Generate HTTP routes</Button
 							>
 						</div>
 					</Subsection>
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
index 8d4bd54458..ba65707876 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
@@ -355,7 +355,7 @@
 
 			{#if !hideTarget}
 				<Section label="Runnable">
-					<p class="text-xs mb-1 text-tertiary">
+					<p class="text-xs mb-1 text-primary">
 						Pick a script or flow to be triggered<Required required={true} />
 					</p>
 					<div class="flex flex-row mb-2">
@@ -373,7 +373,7 @@
 						{#if emptyString(script_path)}
 							<Button
 								btnClasses="ml-4 mt-2"
-								color="dark"
+								variant="accent"
 								size="xs"
 								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=65' : '/scripts/add?hub=hub%2F19659'}
@@ -397,8 +397,8 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							<TriggerRetriesAndErrorHandler
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
index cdfdaed056..4768f77008 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
@@ -68,7 +68,7 @@
 			</Subsection>
 
 			<Subsection label="Topics">
-				<p class="text-xs text-tertiary mb-2"
+				<p class="text-xs text-primary mb-2"
 					>Choose which topics you want to subscribe to<Required required={true} />
 				</p>
 				<div class="flex flex-col gap-4 mt-1">
@@ -163,8 +163,7 @@
 
 					<div class="flex items-baseline">
 						<Button
-							variant="border"
-							color="light"
+							variant="default"
 							size="xs"
 							btnClasses="mt-1"
 							on:click={() => {
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
index 73075b5f53..8c1fb093bf 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
@@ -386,7 +386,7 @@
 
 			{#if !hideTarget}
 				<Section label="Runnable">
-					<p class="text-xs mb-1 text-tertiary">
+					<p class="text-xs mb-1 text-primary">
 						Pick a script or flow to be triggered<Required required={true} />
 					</p>
 					<div class="flex flex-row mb-2">
@@ -404,7 +404,7 @@
 						{#if emptyString(script_path)}
 							<Button
 								btnClasses="ml-4 mt-2"
-								color="dark"
+								variant="accent"
 								size="xs"
 								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=61' : '/scripts/add?hub=hub%2F19655'}
@@ -431,9 +431,9 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="connection_options">Connection Options</Tab>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="connection_options" label="Connection Options" />
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							{#if optionTabSelected === 'connection_options'}
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
index 86b948dd98..26b30ca88c 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
@@ -368,7 +368,7 @@
 			</div>
 			{#if !hideTarget}
 				<Section label="Runnable">
-					<p class="text-xs mb-1 text-tertiary">
+					<p class="text-xs mb-1 text-primary">
 						Pick a script or flow to be triggered<Required required={true} />
 					</p>
 					<div class="flex flex-row mb-2">
@@ -386,7 +386,7 @@
 						{#if emptyString(script_path)}
 							<Button
 								btnClasses="ml-4 mt-2"
-								color="dark"
+								variant="accent"
 								size="xs"
 								href={itemKind === 'flow' ? '/flows/add?hub=66' : '/scripts/add?hub=hub%2F19663'}
 								target="_blank"
@@ -414,8 +414,8 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							<TriggerRetriesAndErrorHandler
diff --git a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
index 54de211507..92799b2685 100644
--- a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
+++ b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
@@ -30,7 +30,7 @@
 		} catch (error) {
 			sendUserToast(error.body, true)
 		}
-		
+
 		loadingConfiguration = false
 	}
 
@@ -59,9 +59,8 @@
 			loading={loadingConfiguration}
 			on:click={checkConnectionAndDatabaseConfiguration}
 			size="xs"
-			color="light"
 			spacingSize="sm"
-			variant="border"
+			variant="default"
 		>
 			{`Check database configuration ${checkConnection ? 'and connection' : ''}`}
 			<Tooltip
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
index 18ea24b88f..0dba9b66ba 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
@@ -536,7 +536,7 @@
 			</Label>
 			{#if !hideTarget}
 				<Section label="Runnable">
-					<p class="text-xs text-tertiary">
+					<p class="text-xs text-primary">
 						Pick a script or flow to be triggered <Required required={true} />
 					</p>
 					<div class="flex flex-row mb-2">
@@ -557,7 +557,7 @@
 								<Button
 									disabled={!can_write}
 									btnClasses="ml-4 mt-2"
-									color="dark"
+									variant="accent"
 									size="xs"
 									on:click={getTemplateScript}
 									target="_blank"
@@ -581,7 +581,7 @@
 						<TestingBadge />
 					{/if}
 				{/snippet}
-				<p class="text-xs text-tertiary mb-2">
+				<p class="text-xs text-primary mb-2">
 					Pick a database to connect to <Required required={true} />
 				</p>
 				<div class="flex flex-col gap-8">
@@ -643,9 +643,9 @@
 								{/if}
 							{/snippet}
 							<Tabs bind:selected={tab}>
-								<Tab value="basic"
-									><div class="flex flex-row gap-1"
-										>Basic<Tooltip
+								<Tab value="basic" label="Basic">
+									{#snippet extra()}
+										<Tooltip
 											documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#define-what-to-track"
 											><p
 												>Choose the <strong>relations</strong> to track without worrying about the
@@ -654,12 +654,12 @@
 												or <strong>slot</strong>. This simplified option lets you focus only on the
 												data you want to monitor.</p
 											></Tooltip
-										></div
-									></Tab
-								>
-								<Tab value="advanced"
-									><div class="flex flex-row gap-1"
-										>Advanced<Tooltip
+										>
+									{/snippet}
+								</Tab>
+								<Tab value="advanced" label="Advanced">
+									{#snippet extra()}
+										<Tooltip
 											documentationLink="https://www.windmill.dev/docs/core_concepts/postgres_triggers#advanced"
 											><p
 												>Select a specific <strong>publication</strong> from your database to track,
@@ -671,9 +671,9 @@
 												<strong>currently used slot</strong> by the trigger will be retrieved from your
 												database for management.</p
 											></Tooltip
-										></div
-									></Tab
-								>
+										>
+									{/snippet}
+								</Tab>
 								{#snippet content()}
 									<div class="mt-5 overflow-hidden bg-surface">
 										<TabContent value="basic">
@@ -710,9 +710,8 @@
 																/>
 																<Button
 																	loading={creatingSlot}
-																	color="light"
 																	size="xs"
-																	variant="border"
+																	variant="default"
 																	disabled={emptyStringTrimmed(replication_slot_name) || !can_write}
 																	on:click={createSlot}>Create</Button
 																>
@@ -766,9 +765,8 @@
 																/>
 																<Button
 																	loading={creatingPublication}
-																	color="light"
 																	size="xs"
-																	variant="border"
+																	variant="default"
 																	disabled={emptyStringTrimmed(publication_name) ||
 																		(relations && relations.length === 0) ||
 																		!can_write}
@@ -808,8 +806,8 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							<TriggerRetriesAndErrorHandler
diff --git a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
index 7a23f4eab8..3acdb82f8c 100644
--- a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
@@ -110,8 +110,7 @@
 	/>
 	<Button
 		disabled={!can_write || disabled}
-		variant="border"
-		color="light"
+		variant="default"
 		wrapperClasses="self-stretch"
 		on:click={listDatabasePublication}
 		startIcon={{ icon: RefreshCw }}
@@ -119,17 +118,15 @@
 	/>
 	<Button
 		loading={updatingPublication}
-		color="light"
 		size="xs"
-		variant="border"
+		variant="default"
 		disabled={emptyString(publication_name) || !can_write || disabled}
 		on:click={updatePublication}>Update</Button
 	>
 	<Button
 		loading={deletingPublication}
-		color="light"
 		size="xs"
-		variant="border"
+		variant="default"
 		disabled={emptyString(publication_name) || !can_write || disabled}
 		on:click={deletePublication}>Delete</Button
 	>
diff --git a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
index 98b90bc772..a62c400f71 100644
--- a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
@@ -237,10 +237,9 @@
 										/>
 									</Label>
 									<Button
-										variant="border"
+										variant="default"
 										wrapperClasses="absolute -top-3 -right-3"
 										btnClasses="hidden group-hover:block hover:bg-red-500 hover:text-white p-2 rounded-full hover:border-red-500 transition-all duration-300"
-										color="light"
 										size="xs"
 										on:click={() => {
 											if (pg14 && v.table_to_track.length > 1) {
@@ -284,8 +283,7 @@
 						</div>
 					</div>
 					<Button
-						variant="border"
-						color="light"
+						variant="default"
 						size="xs"
 						btnClasses="bg-surface-secondary hover:bg-red-500 hover:text-white p-2 rounded-full"
 						aria-label="Clear"
@@ -329,8 +327,7 @@
 			>
 				{#snippet trigger()}
 					<Button
-						variant="border"
-						color="light"
+						variant="default"
 						size="xs"
 						btnClasses="w-full"
 						disabled={!can_write || disabled}
diff --git a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
index 66b1b1b623..677eff5abf 100644
--- a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
@@ -85,8 +85,7 @@
 		{disabled}
 	/>
 	<Button
-		variant="border"
-		color="light"
+		variant="default"
 		wrapperClasses="self-stretch"
 		on:click={listDatabaseSlot}
 		startIcon={{ icon: RefreshCw }}
@@ -95,9 +94,8 @@
 	/>
 	<Button
 		loading={deletingSlot}
-		color="light"
 		size="xs"
-		variant="border"
+		variant="default"
 		disabled={emptyString(replication_slot_name) || disabled}
 		on:click={deleteSlot}>Delete</Button
 	>
diff --git a/frontend/src/lib/components/triggers/scheduled/ScheduledPollPanel.svelte b/frontend/src/lib/components/triggers/scheduled/ScheduledPollPanel.svelte
index 4502526c81..8f582107e4 100644
--- a/frontend/src/lib/components/triggers/scheduled/ScheduledPollPanel.svelte
+++ b/frontend/src/lib/components/triggers/scheduled/ScheduledPollPanel.svelte
@@ -11,7 +11,7 @@
 		by a schedule, and returning a list of the changed states so we can iterate over them.
 	</Description>
 
-	<Label label="Setting a scheduled poll" primary>
+	<Label label="Setting a scheduled poll">
 		<ul class="pt-4 space-y-2 text-sm">
 			<li>
 				1. Choose a trigger script using the script picker that will poll for new events regularly <img
diff --git a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
index 37bb11b409..18557a6101 100644
--- a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
@@ -35,6 +35,7 @@
 	import WorkerTagPicker from '$lib/components/WorkerTagPicker.svelte'
 	import { runScheduleNow } from '../scheduled/utils'
 	import { handleConfigChange } from '../utils'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	let {
 		useDrawer = true,
@@ -51,8 +52,12 @@
 		trigger = undefined
 	} = $props()
 
-	let optionTabSelected: 'error_handler' | 'recovery_handler' | 'success_handler' | 'retries' | 'dynamic_skip' =
-		$state('error_handler')
+	let optionTabSelected:
+		| 'error_handler'
+		| 'recovery_handler'
+		| 'success_handler'
+		| 'retries'
+		| 'dynamic_skip' = $state('error_handler')
 	let initialPath = $state('')
 	let edit = $state(true)
 	let schedule: string = $state('0 0 12 * *')
@@ -643,7 +648,7 @@
 					<div class="mr-8 flex flex-row gap-3">
 						<Button
 							size="sm"
-							variant="border"
+							variant="default"
 							startIcon={{ icon: List }}
 							disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
 							href={`${base}/runs/${script_path}?show_schedules=true&show_future_jobs=true`}
@@ -652,7 +657,7 @@
 						</Button>
 						<Button
 							size="sm"
-							variant="border"
+							variant="default"
 							disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
 							on:click={() => {
 								runScheduleNow(script_path, path, is_flow, $workspaceStore!)
@@ -673,79 +678,83 @@
 			<Loader2 class="animate-spin" />
 		{/if}
 	{:else}
-		<div class="flex flex-col gap-12">
-			<div class="flex flex-col gap-4">
-				<div>
-					<h2 class="text-base font-semibold mb-2">Metadata</h2>
-					<Label label="Summary">
+		<div class="flex flex-col gap-8">
+			<Section label="Metadata">
+				<div class="flex flex-col gap-6">
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-emphasis">Summary</span>
 						<!-- svelte-ignore a11y_autofocus -->
-						<input
-							autofocus
-							type="text"
-							placeholder="Short summary to be displayed when listed"
-							class="text-sm w-full"
-							bind:value={summary}
-							disabled={!can_write}
-							onkeyup={() => {
-								if (!edit && summary?.length > 0 && !dirtyPath) {
-									pathC?.setName(
-										summary
-											.toLowerCase()
-											.replace(/[^a-z0-9_]/g, '_')
-											.replace(/-+/g, '_')
-											.replace(/^-|-$/g, '')
-									)
+						<TextInput
+							inputProps={{
+								autofocus: true,
+								type: 'text',
+								placeholder: 'Short summary to be displayed when listed',
+								disabled: !can_write,
+								onkeyup: () => {
+									if (!edit && summary?.length > 0 && !dirtyPath) {
+										pathC?.setName(
+											summary
+												.toLowerCase()
+												.replace(/[^a-z0-9_]/g, '_')
+												.replace(/-+/g, '_')
+												.replace(/^-|-$/g, '')
+										)
+									}
 								}
 							}}
+							bind:value={summary}
 						/>
-					</Label>
-				</div>
-				<Label label="Path">
-					{#if !edit && !trigger?.isPrimary}
-						<Path
-							bind:dirty={dirtyPath}
-							bind:this={pathC}
-							checkInitialPathExistence={!edit}
-							bind:error={pathError}
-							bind:path
-							{initialPath}
-							namePlaceholder="schedule"
-							kind="schedule"
-							disableEditing={!can_write}
-						/>
-					{:else}
-						<div class="flex justify-start w-full">
-							<Badge
-								color="gray"
-								class="center-center !bg-surface-secondary !text-tertiary  !h-[24px] rounded-r-none border"
-							>
-								Schedule path (not editable)
-							</Badge>
-							<input
-								type="text"
-								readonly
-								value={path}
-								size={path?.length || 50}
-								class="font-mono !text-xs grow shrink overflow-x-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-								onfocus={({ currentTarget }) => {
-									currentTarget.select()
-								}}
-							/>
-							<!-- <span class="font-mono text-sm break-all">{path}</span> -->
-						</div>
-					{/if}
-				</Label>
+					</label>
 
-				<Label label="Description">
-					<textarea
-						rows="4"
-						use:autosize
-						bind:value={description}
-						placeholder="What this schedule does and how to use it"
-						disabled={!can_write}
-					></textarea>
-				</Label>
-			</div>
+					<div class="flex flex-col gap-1">
+						<label for="path" class="text-xs font-semibold text-emphasis">Path</label>
+						{#if !edit && !trigger?.isPrimary}
+							<Path
+								bind:dirty={dirtyPath}
+								bind:this={pathC}
+								checkInitialPathExistence={!edit}
+								bind:error={pathError}
+								bind:path
+								{initialPath}
+								namePlaceholder="schedule"
+								kind="schedule"
+								disableEditing={!can_write}
+							/>
+						{:else}
+							<div class="flex justify-start w-full">
+								<Badge
+									color="gray"
+									class="center-center !bg-surface-secondary !text-secondary rounded-r-none border"
+								>
+									Schedule path (not editable)
+								</Badge>
+								<input
+									type="text"
+									readonly
+									value={path}
+									size={path?.length || 50}
+									class="font-mono !text-2xs grow shrink overflow-x-auto !py-0 !border-l-0 !rounded-l-none"
+									onfocus={({ currentTarget }) => {
+										currentTarget.select()
+									}}
+								/>
+								<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+							</div>
+						{/if}
+					</div>
+
+					<label class="flex flex-col gap-1">
+						<span class="text-xs font-semibold text-emphasis">Description</span>
+						<textarea
+							rows="4"
+							use:autosize
+							bind:value={description}
+							placeholder="What this schedule does and how to use it"
+							disabled={!can_write}
+						></textarea>
+					</label>
+				</div>
+			</Section>
 
 			<Section label="Schedule">
 				{#snippet header()}
@@ -760,50 +769,53 @@
 						>
 					{/if}
 				{/snippet}
-				{#if initialCronVersion !== 'v2'}
-					<div class="flex flex-row">
-						<AlertTriangle color="orange" class="mr-2" size={16} />
+				<div class="flex flex-col gap-6">
+					{#if initialCronVersion !== 'v2'}
+						<div class="flex flex-row">
+							<AlertTriangle color="orange" class="mr-2" size={16} />
+							<Toggle
+								options={{
+									right: 'enable latest Cron syntax',
+									rightTooltip:
+										'The latest Cron syntax is more flexible and allows for more complex schedules. See the documentation for more information.',
+									rightDocumentationLink:
+										'https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax'
+								}}
+								size="xs"
+								bind:checked={isLatestCron}
+								on:change={onVersionChange}
+								disabled={!can_write}
+							/>
+						</div>
+					{/if}
+					<CronInput
+						disabled={!can_write}
+						bind:schedule
+						bind:timezone
+						bind:validCRON
+						bind:cronVersion
+					/>
+					<div class="flex flex-col gap-1">
 						<Toggle
 							options={{
-								right: 'enable latest Cron syntax',
+								right: 'Pause schedule until...',
 								rightTooltip:
-									'The latest Cron syntax is more flexible and allows for more complex schedules. See the documentation for more information.',
-								rightDocumentationLink:
-									'https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax'
+									'Pausing the schedule will program the next job to run as if the schedule starts at the time the pause is lifted, instead of now.'
 							}}
-							size="xs"
-							bind:checked={isLatestCron}
-							on:change={onVersionChange}
+							bind:checked={showPauseUntil}
 							disabled={!can_write}
 						/>
+						{#if showPauseUntil}
+							<DateTimeInput bind:value={paused_until} />
+						{/if}
 					</div>
-				{/if}
-				<CronInput
-					disabled={!can_write}
-					bind:schedule
-					bind:timezone
-					bind:validCRON
-					bind:cronVersion
-				/>
-				<Toggle
-					options={{
-						right: 'Pause schedule until...',
-						rightTooltip:
-							'Pausing the schedule will program the next job to run as if the schedule starts at the time the pause is lifted, instead of now.'
-					}}
-					bind:checked={showPauseUntil}
-					size="xs"
-					disabled={!can_write}
-				/>
-				{#if showPauseUntil}
-					<DateTimeInput bind:value={paused_until} />
-				{/if}
+				</div>
 			</Section>
 
 			<Section label="Runnable">
 				{#if !hideTarget}
 					{#if !edit}
-						<p class="text-xs mb-1 text-tertiary">
+						<p class="text-xs mb-1 text-secondary">
 							Pick a script or flow to be triggered by the schedule<Required required={true} />
 						</p>
 						<ScriptPicker
@@ -869,17 +881,17 @@
 									/>
 								{/await}
 							{:else}
-								<div class="text-xs texg-gray-700">
+								<div class="text-xs text-secondary">
 									This {is_flow ? 'flow' : 'script'} takes no argument
 								</div>
 							{/if}
 						{:else if script_path != ''}
-							<div class="text-xs texg-gray-700 my-2">
+							<div class="text-xs text-secondary my-2">
 								You cannot see the the {is_flow ? 'flow' : 'script'} input form as you do not have access
 								to it.
 							</div>
 						{:else}
-							<div class="text-xs texg-gray-700 my-2">
+							<div class="text-xs text-secondary my-2">
 								Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
 							</div>
 						{/if}
@@ -900,25 +912,24 @@
 	<div class="flex flex-col gap-2 min-h-96">
 		{#if !loading}
 			<Tabs bind:selected={optionTabSelected}>
-				<Tab value="error_handler">Error Handler</Tab>
-				<Tab value="recovery_handler">Recovery Handler</Tab>
-				<Tab value="success_handler">Success Handler</Tab>
-				<Tab value="retries">Retries</Tab>
-				<Tab value="dynamic_skip">Dynamic skip</Tab>
+				<Tab value="error_handler" label="Error Handler" />
+				<Tab value="recovery_handler" label="Recovery Handler" />
+				<Tab value="success_handler" label="Success Handler" />
+				<Tab value="retries" label="Retries" />
+				<Tab value="dynamic_skip" label="Dynamic skip" />
 				{#if itemKind === 'script'}
-					<Tab value="tag">Custom tag</Tab>
+					<Tab value="tag" label="Custom tag" />
 				{/if}
 			</Tabs>
-			<div class="pt-0.5"></div>
 			{#if optionTabSelected === 'error_handler'}
 				<Section label="Error handler">
 					{#snippet header()}
 						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+							{#if !$enterpriseLicense}<span class="text-xs text-secondary">(ee only)</span>{/if}
 						</div>
 					{/snippet}
 					{#snippet action()}
-						<div class="flex flex-row items-center gap-1 text-2xs text-tertiary">
+						<div class="flex flex-row items-center gap-1 text-xs text-secondary">
 							<Dropdown
 								disabled={!can_write}
 								items={[
@@ -963,7 +974,7 @@
 						{#snippet customTabTooltip()}
 							<Tooltip>
 								<div class="flex gap-20 items-start mt-3">
-									<div class="text-sm"
+									<div class="text-xs"
 										>The following args will be passed to the error handler:
 										<ul class="mt-1 ml-2">
 											<li
@@ -986,8 +997,8 @@
 						{/snippet}
 					</ErrorOrRecoveryHandler>
 					<div class="flex flex-row items-center justify-between">
-						<div class="flex flex-row items-center mt-4 font-semibold text-sm gap-2">
-							<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}>
+						<div class="flex flex-row items-center mt-4 font-semibold text-xs gap-2">
+							<p class={emptyString(errorHandlerPath) ? 'text-primary' : ''}>
 								Triggered when schedule failed</p
 							>
 							<select
@@ -1000,12 +1011,12 @@
 							</select>
 							<input
 								type="number"
-								class="!w-14 text-center {emptyString(errorHandlerPath) ? 'text-tertiary' : ''}"
+								class="!w-14 text-center {emptyString(errorHandlerPath) ? 'text-primary' : ''}"
 								bind:value={failedTimes}
 								disabled={!$enterpriseLicense}
 								min="1"
 							/>
-							<p class={emptyString(errorHandlerPath) ? 'text-tertiary' : ''}
+							<p class={emptyString(errorHandlerPath) ? 'text-primary' : ''}
 								>time{failedTimes > 1 ? 's in a row' : ''}</p
 							>
 						</div>
@@ -1016,11 +1027,11 @@
 				<Section label="Recovery handler">
 					{#snippet header()}
 						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+							{#if !$enterpriseLicense}<span class="text-xs text-secondary">(ee only)</span>{/if}
 						</div>
 					{/snippet}
 					{#snippet action()}
-						<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
+						<div class="flex flex-row items-center text-secondary text-xs gap-2">
 							defaults
 							<Dropdown
 								{disabled}
@@ -1056,7 +1067,7 @@
 						{#snippet customTabTooltip()}
 							<Tooltip>
 								<div class="flex gap-20 items-start mt-3">
-									<div class=" text-sm"
+									<div class="text-xs"
 										>The following args will be passed to the recovery handler:
 										<ul class="mt-1 ml-2">
 											<li><b>path</b>: The path of the script or flow that recovered.</li>
@@ -1082,10 +1093,10 @@
 					</ErrorOrRecoveryHandler>
 					<div class="flex flex-row items-center justify-between">
 						<div
-							class="flex flex-row items-center mt-5 font-semibold text-sm {emptyString(
+							class="flex flex-row items-center mt-5 font-semibold text-xs {emptyString(
 								recoveryHandlerPath
 							)
-								? 'text-tertiary'
+								? 'text-primary'
 								: ''}"
 						>
 							<p>Triggered when schedule recovered</p>
@@ -1105,11 +1116,11 @@
 				<Section label="Success handler">
 					{#snippet header()}
 						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+							{#if !$enterpriseLicense}<span class="text-xs text-secondary">(ee only)</span>{/if}
 						</div>
 					{/snippet}
 					{#snippet action()}
-						<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
+						<div class="flex flex-row items-center text-secondary text-xs gap-2">
 							defaults
 							<Dropdown
 								{disabled}
@@ -1145,7 +1156,7 @@
 						{#snippet customTabTooltip()}
 							<Tooltip>
 								<div class="flex gap-20 items-start mt-3">
-									<div class=" text-sm"
+									<div class="text-xs"
 										>The following args will be passed to the success handler:
 										<ul class="mt-1 ml-2">
 											<li><b>path</b>: The path of the script or flow that succeeded.</li>
@@ -1165,7 +1176,7 @@
 				<Section label="Retries">
 					{#snippet header()}
 						<div class="flex flex-row gap-2">
-							{#if !$enterpriseLicense}<span class="text-normal text-2xs">(ee only)</span>{/if}
+							{#if !$enterpriseLicense}<span class="text-xs text-secondary">(ee only)</span>{/if}
 						</div>
 						<Tooltip>
 							If defined, upon error this schedule will be retried with a delay and a maximum number
@@ -1198,7 +1209,7 @@
 							boolean. True = run on this date, False = skip to next occurrence.
 						</Tooltip>
 					{/snippet}
-					<div class="flex flex-col gap-2">
+					<div class="flex flex-col gap-6">
 						<Label label="Dynamic skip script">
 							<div class="flex flex-row">
 								<ScriptPicker
@@ -1211,7 +1222,7 @@
 								{#if !dynamicSkipPath}
 									<Button
 										btnClasses="ml-4 mt-2"
-										color="dark"
+										variant="default"
 										size="xs"
 										href="/scripts/add?hub=hub%2F19822%2Fwindmill%2Fdynamic_skip_template"
 										disabled={!can_write}
@@ -1223,7 +1234,8 @@
 							</div>
 						</Label>
 						<Alert type="info" size="xs" title="Handler requirements">
-							Handler must return a boolean value. Return true to execute the scheduled job, false to skip.
+							Handler must return a boolean value. Return true to execute the scheduled job, false
+							to skip.
 						</Alert>
 					</div>
 				</Section>
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
index a3e8a10c94..3ee60502ff 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
@@ -65,7 +65,7 @@
 			<Subsection label="Connection setup">
 				<div class="flex flex-col gap-3">
 					<div class="flex flex-col gap-3">
-						<p class="text-xs text-tertiary">
+						<p class="text-xs text-primary">
 							Select an AWS resource to authenticate your account. <Required required={true} />
 						</p>
 
@@ -93,7 +93,7 @@
 					<div class="flex flex-col gap-1">
 						<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
 							<div class="flex flex-col gap-1">
-								<p class="text-xs text-tertiary">
+								<p class="text-xs text-primary">
 									Provide the URL of the SQS queue the application should listen to. <Required
 										required={true}
 									/>
@@ -170,8 +170,7 @@
 	{#snippet submission()}
 		<div class="flex flex-row">
 			<Button
-				variant="border"
-				color="blue"
+				variant="accent"
 				size="sm"
 				startIcon={{ icon: Plus }}
 				on:click={() => {
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
index 1513e94f09..1a6e5a8305 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
@@ -354,7 +354,7 @@
 
 			{#if !hideTarget}
 				<Section label="Runnable">
-					<p class="text-xs mb-1 text-tertiary">
+					<p class="text-xs mb-1 text-primary">
 						Pick a script or flow to be triggered <Required required={true} />
 					</p>
 					<div class="flex flex-row mb-2">
@@ -372,7 +372,7 @@
 						{#if emptyString(script_path)}
 							<Button
 								btnClasses="ml-4 mt-2"
-								color="dark"
+								variant="accent"
 								size="xs"
 								disabled={!can_write}
 								href={itemKind === 'flow' ? '/flows/add?hub=59' : '/scripts/add?hub=hub%2F19657'}
@@ -400,8 +400,8 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							<TriggerRetriesAndErrorHandler
diff --git a/frontend/src/lib/components/triggers/testingBadge.svelte b/frontend/src/lib/components/triggers/testingBadge.svelte
index eb8d288fbf..2deb844f21 100644
--- a/frontend/src/lib/components/triggers/testingBadge.svelte
+++ b/frontend/src/lib/components/triggers/testingBadge.svelte
@@ -4,6 +4,6 @@
 </script>
 
 <Tooltip>
-	<FlaskConical size={14} class="text-tertiary inline-block" />
+	<FlaskConical size={14} class="text-primary inline-block" />
 	<span slot="text">Config used for creating a testing endpoint</span>
 </Tooltip>
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
index d77a76f543..86ea517607 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
@@ -21,6 +21,7 @@
 	import { workspaceStore, userStore } from '$lib/stores'
 	import UserSettings from '../../UserSettings.svelte'
 	import { generateRandomString } from '$lib/utils'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	interface Props {
 		isFlow?: boolean
@@ -182,7 +183,8 @@
 
 	function fetchCode() {
 		if (requestType === 'sync_sse') {
-			return `
+			return `import { EventSource } from "eventsource";
+
 export async function main() {
   const response = await fetch(\`${url}\`, {
     method: '${callMethod === 'get' ? 'GET' : 'POST'}',
@@ -235,8 +237,7 @@ export async function main() {
 }`
 		}
 		if (requestType === 'sync') {
-			return `
-export async function main() {
+			return `export async function main() {
   const jobTriggerResponse = await triggerJob();
   const data = await jobTriggerResponse.json();
   return data;
@@ -263,8 +264,7 @@ async function triggerJob() {
 }`
 		} else {
 			// Main function
-			let mainFunction = `
-export async function main() {
+			let mainFunction = `export async function main() {
   const jobTriggerResponse = await triggerJob();
   const UUID = await jobTriggerResponse.text();
   const jobCompletionData = await waitForJobCompletion(UUID);
@@ -368,17 +368,12 @@ done`
 	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
 		<Label label="Token">
 			<div class="flex flex-row justify-between gap-2">
-				<input
+				<TextInput
 					bind:value={token}
-					placeholder="paste your token here once created to alter examples below"
+					inputProps={{ placeholder: 'Paste your token here once created to alter examples below' }}
 					class="!text-xs !font-normal"
 				/>
-				<Button
-					size="xs"
-					color="light"
-					variant="border"
-					on:click={() => userSettings?.openDrawer()}
-				>
+				<Button size="xs" variant="default" on:click={() => userSettings?.openDrawer()}>
 					Create a Webhook-specific Token
 					<Tooltip light>
 						The token will have a scope such that it can only be used to trigger this script. It is
@@ -389,10 +384,9 @@ done`
 		</Label>
 	{/if}
 
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+	<div class="flex flex-col gap-6">
+		<Label label="Request type">
+			<ToggleButtonGroup bind:selected={requestType}>
 				{#snippet children({ item })}
 					<ToggleButton
 						label="Async"
@@ -417,10 +411,9 @@ done`
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-		</div>
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={callMethod}>
+		</Label>
+		<Label label="Call method">
+			<ToggleButtonGroup bind:selected={callMethod}>
 				{#snippet children({ item })}
 					<ToggleButton
 						label="POST"
@@ -439,47 +432,41 @@ done`
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-		</div>
+		</Label>
 		{#if !isFlow}
-			<div class="flex flex-row justify-between">
-				<div class="text-sm font-normal text-secondary flex flex-row items-center">
-					Reference type
-				</div>
-				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={runnableId}>
+			<Label label="Reference type">
+				<ToggleButtonGroup bind:selected={runnableId}>
 					{#snippet children({ item })}
 						<ToggleButton label="Path" value="path" {item} />
 						<ToggleButton label="Hash" value="hash" disabled={!hash} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
-			</div>
+			</Label>
 		{/if}
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center"
-				>Token configuration</div
-			>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
+		<Label label="Token configuration">
+			<ToggleButtonGroup bind:selected={tokenType}>
 				{#snippet children({ item })}
 					<ToggleButton label="Token in Headers" value="headers" {item} />
 					<ToggleButton label="Token in Query" value="query" {item} />
 				{/snippet}
 			</ToggleButtonGroup>
-		</div>
+		</Label>
 	</div>
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div>
 		<Tabs bind:selected={selectedTab}>
-			<Tab value="rest" size="xs">REST</Tab>
+			<Tab value="rest" label="REST" />
 			{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
-				<Tab value="curl" size="xs">Curl</Tab>
+				<Tab value="curl" label="Curl" />
 			{/if}
-			<Tab value="fetch" size="xs">Fetch</Tab>
+			<Tab value="fetch" label="Fetch" />
 
 			{#snippet content()}
 				{#key token}
-					<TabContent value="rest" class="flex flex-col flex-1 h-full ">
-						<div class="flex flex-col gap-2">
+					<TabContent value="rest" class="flex flex-col flex-1 h-full mt-2">
+						<div class="flex flex-col gap-6">
 							<Label label="Url">
 								<ClipboardPanel content={url} />
 							</Label>
@@ -498,7 +485,7 @@ done`
 							{/key}
 						</div>
 					</TabContent>
-					<TabContent value="curl" class="flex flex-col flex-1 h-full">
+					<TabContent value="curl" class="flex flex-col flex-1 h-full mt-2">
 						<div class="relative">
 							{#key runnableArgs}
 								{#key callMethod}
@@ -520,7 +507,7 @@ done`
 							{/key}
 						</div>
 					</TabContent>
-					<TabContent value="fetch">
+					<TabContent value="fetch" class="mt-2">
 						{#key runnableArgs}
 							{#key callMethod}
 								{#key requestType}
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
index 92f4778cc5..257cca5ef4 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
@@ -410,7 +410,7 @@
 				</Alert>
 			{/if}
 		</div>
-		<div class="flex flex-col gap-12 mt-6">
+		<div class="flex flex-col gap-6 mt-6">
 			<div class="flex flex-col gap-4">
 				<Label label="Path">
 					<Path
@@ -430,7 +430,7 @@
 			<Section label={hideTarget ? 'Runnable options' : 'Runnable'} class="flex flex-col gap-4">
 				{#if !hideTarget}
 					<div>
-						<p class="text-xs mb-1 text-tertiary">
+						<p class="text-xs mb-1 text-primary">
 							Pick a script or flow to be triggered<Required required={true} />
 						</p>
 						<div class="flex flex-row mb-2">
@@ -448,7 +448,7 @@
 							{#if emptyString(script_path)}
 								<Button
 									btnClasses="ml-4 mt-2"
-									color="dark"
+									variant="accent"
 									size="xs"
 									disabled={!can_write}
 									href={itemKind === 'flow' ? '/flows/add?hub=64' : '/scripts/add?hub=hub%2F19660'}
@@ -472,6 +472,7 @@
 							'Whether the runnable result should be sent as a message to the websocket server when not null.'
 					}}
 					disabled={!can_write}
+					textClass="font-semibold"
 				/>
 
 				<Toggle
@@ -485,6 +486,7 @@
 							'Allows the runnable result to be sent as a message to the WebSocket server if the result is a non-null error.'
 					}}
 					disabled={!can_write || !can_return_message}
+					textClass="font-semibold"
 				/>
 			</Section>
 
@@ -498,7 +500,7 @@
 			/>
 
 			<Section label="Initial messages">
-				<p class="text-xs mb-1 text-tertiary">
+				<p class="text-xs mb-1 text-primary">
 					Initial messages are sent at the beginning of the connection. They are sent in order.<br
 					/>
 					Raw messages and runnable results are supported.
@@ -619,8 +621,7 @@
 
 					<div class="flex items-baseline">
 						<Button
-							variant="border"
-							color="light"
+							variant="default"
 							size="xs"
 							btnClasses="mt-1"
 							on:click={() => {
@@ -641,7 +642,7 @@
 			</Section>
 
 			<Section label="Filters">
-				<p class="text-xs mb-1 text-tertiary">
+				<p class="text-xs mb-1 text-primary">
 					Filters will limit the execution of the trigger to only messages that match all criteria.<br
 					/>
 					The JSON filter checks if the value at the key is equal or a superset of the filter value.
@@ -700,8 +701,7 @@
 
 					<div class="flex items-baseline">
 						<Button
-							variant="border"
-							color="light"
+							variant="default"
 							size="xs"
 							btnClasses="mt-1"
 							on:click={() => {
@@ -726,8 +726,8 @@
 				<div class="flex flex-col gap-4">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
-							<Tab value="error_handler">Error Handler</Tab>
-							<Tab value="retries">Retries</Tab>
+							<Tab value="error_handler" label="Error Handler" />
+							<Tab value="retries" label="Retries" />
 						</Tabs>
 						<div class="mt-4">
 							<TriggerRetriesAndErrorHandler
diff --git a/frontend/src/lib/components/tutorials/SkipTutorials.svelte b/frontend/src/lib/components/tutorials/SkipTutorials.svelte
index 5b5f2c6e71..6fd6ba254b 100644
--- a/frontend/src/lib/components/tutorials/SkipTutorials.svelte
+++ b/frontend/src/lib/components/tutorials/SkipTutorials.svelte
@@ -9,9 +9,8 @@
 <div class="flex flex-row gap-2 justify-end w-full pt-6 pb-2">
 	<Button
 		size="xs"
-		color="light"
 		startIcon={{ icon: CheckCircle }}
-		variant="border"
+		variant="default"
 		btnClasses="font-normal"
 		on:click={() => {
 			dispatch('skipThis')
@@ -21,10 +20,9 @@
 	</Button>
 	<Button
 		size="xs"
-		color="light"
 		startIcon={{ icon: CheckCircle }}
 		btnClasses="font-normal"
-		variant="border"
+		variant="default"
 		on:click={() => {
 			dispatch('skipAll')
 		}}
diff --git a/frontend/src/lib/components/tutorials/TutorialControls.svelte b/frontend/src/lib/components/tutorials/TutorialControls.svelte
index 712f7ac39f..96c0b7385b 100644
--- a/frontend/src/lib/components/tutorials/TutorialControls.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialControls.svelte
@@ -36,7 +36,7 @@
 			</Button>
 			<Button
 				size="xs2"
-				color="dark"
+				variant="accent"
 				endIcon={{ icon: ArrowRight }}
 				on:click={() => {
 					dispatch('next')
diff --git a/frontend/src/lib/components/vscode.ts b/frontend/src/lib/components/vscode.ts
index f4c68e8f74..eab33883ae 100644
--- a/frontend/src/lib/components/vscode.ts
+++ b/frontend/src/lib/components/vscode.ts
@@ -10,6 +10,7 @@ import {
 	MonacoVscodeApiWrapper
 } from 'monaco-languageclient/vscodeApiWrapper'
 import getLanguagesServiceOverride from '@codingame/monaco-vscode-languages-service-override'
+import { getCssColor } from '$lib/utils'
 
 export function buildWorkerDefinition() {
 	const envEnhanced = getEnhancedMonacoEnvironment()
@@ -159,7 +160,7 @@ export async function initializeVscode(caller?: string, htmlContainer?: HTMLElem
 						token: ''
 					},
 					{
-						foreground: '808b9f',
+						foreground: '98A7C1',
 						token: 'comment'
 					},
 					{
@@ -238,14 +239,16 @@ export async function initializeVscode(caller?: string, htmlContainer?: HTMLElem
 				],
 				colors: {
 					'editor.foreground': '#D8DEE9',
-					'editor.background': '#00000000',
+					'editor.background': getCssColor('surface-input', { format: 'hex-dark' }),
 					'editor.selectionBackground': '#515A6D',
 					'editor.inactiveSelectionBackground': '#515A6DB0',
 					'editor.lineHighlightBackground': '#3B4252',
 					'editorCursor.foreground': '#D8DEE9',
 					'editorWhitespace.foreground': '#515A6D',
 					'editorIndentGuide.background1': '#5A647860',
-					'editorIndentGuide.activeBackground1': '#6A7488'
+					'editorIndentGuide.activeBackground1': '#6A7488',
+					'editorLineNumber.foreground': '#515A6D',
+					'editorLineNumber.activeForeground': '#D8DEE980'
 				}
 			})
 
@@ -254,7 +257,7 @@ export async function initializeVscode(caller?: string, htmlContainer?: HTMLElem
 				inherit: true,
 				rules: [],
 				colors: {
-					'editor.background': '#FFFFFF00',
+					'editor.background': '#FFFFFF',
 					'editor.foreground': '#2d3748',
 					'editorLineNumber.foreground': '#C2C9D1',
 					'editorLineNumber.activeForeground': '#989DA5',
diff --git a/frontend/src/lib/components/wizards/AgGridWizard.svelte b/frontend/src/lib/components/wizards/AgGridWizard.svelte
index c419a0ee24..53632821cb 100644
--- a/frontend/src/lib/components/wizards/AgGridWizard.svelte
+++ b/frontend/src/lib/components/wizards/AgGridWizard.svelte
@@ -35,7 +35,7 @@
 	}
 
 	let { value = $bindable(), trigger: trigger_render }: Props = $props()
-	
+
 	const isActionsColumn = $derived((value as any)?._isActionsColumn === true)
 
 	const presets = [
@@ -176,62 +176,62 @@
 
 				{#if !isActionsColumn}
 					<Label label="Value formatter">
-					{#snippet header()}
-						<Tooltip
-							documentationLink="https://www.ag-grid.com/javascript-data-grid/value-formatters/"
-						>
-							Value formatters allow you to format values for display. This is useful when data is
-							one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in
-							currency symbols and number formatting).
-						</Tooltip>
-					{/snippet}
-					{#snippet action()}
-						<Button
-							size="xs"
-							color="light"
-							variant="border"
-							on:click={() => {
-								// @ts-ignore
-								value.valueFormatter = null
-								renderCount++
-							}}
-						>
-							Clear
-						</Button>
-					{/snippet}
-				</Label>
-				<div>
-					{#key renderCount}
-						<div class="flex flex-col gap-4">
-							<div class="relative">
-								{#if !presets.find((preset) => preset.value === value?.valueFormatter)}
-									<div class="z-50 absolute bg-opacity-50 bg-surface top-0 left-0 bottom-0 right-0"
-									></div>
-								{/if}
-								<div class="text-xs font-semibold">Presets</div>
-								<select
-									bind:value={value.valueFormatter}
-									onchange={() => {
-										renderCount++
-									}}
-									placeholder="Code"
-								>
-									{#each presets as preset}
-										<option value={preset.value}>{preset.label}</option>
-									{/each}
-								</select>
-							</div>
+						{#snippet header()}
+							<Tooltip
+								documentationLink="https://www.ag-grid.com/javascript-data-grid/value-formatters/"
+							>
+								Value formatters allow you to format values for display. This is useful when data is
+								one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in
+								currency symbols and number formatting).
+							</Tooltip>
+						{/snippet}
+						{#snippet action()}
+							<Button
+								size="xs"
+								variant="default"
+								on:click={() => {
+									// @ts-ignore
+									value.valueFormatter = null
+									renderCount++
+								}}
+							>
+								Clear
+							</Button>
+						{/snippet}
+					</Label>
+					<div>
+						{#key renderCount}
+							<div class="flex flex-col gap-4">
+								<div class="relative">
+									{#if !presets.find((preset) => preset.value === value?.valueFormatter)}
+										<div
+											class="z-50 absolute bg-opacity-50 bg-surface top-0 left-0 bottom-0 right-0"
+										></div>
+									{/if}
+									<div class="text-xs font-semibold">Presets</div>
+									<select
+										bind:value={value.valueFormatter}
+										onchange={() => {
+											renderCount++
+										}}
+										placeholder="Code"
+									>
+										{#each presets as preset}
+											<option value={preset.value}>{preset.label}</option>
+										{/each}
+									</select>
+								</div>
 
-							<SimpleEditor
-								extraLib={'declare const value: any'}
-								autoHeight
-								lang="javascript"
-								bind:code={value.valueFormatter}
-							/>
-							<div class="text-xs text-secondary -mt-4">Use `value` in the formatter</div>
-						</div>
-					{/key}
-				</div>
+								<SimpleEditor
+									extraLib={'declare const value: any'}
+									autoHeight
+									lang="javascript"
+									bind:code={value.valueFormatter}
+								/>
+								<div class="text-xs text-secondary -mt-4">Use `value` in the formatter</div>
+							</div>
+						{/key}
+					</div>
 
 					<Label label="Sort">
 						<select bind:value={value.sort}>
diff --git a/frontend/src/lib/components/wizards/DBExplorerWizard.svelte b/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
index 57075e55a0..6eb39ae4a6 100644
--- a/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
+++ b/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
@@ -340,8 +340,7 @@
 						{#snippet action()}
 							<Button
 								size="xs"
-								color="light"
-								variant="border"
+								variant="default"
 								on:click={() => {
 									// @ts-ignore
 									value.valueFormatter = null
diff --git a/frontend/src/lib/components/wizards/TableActionsWizard.svelte b/frontend/src/lib/components/wizards/TableActionsWizard.svelte
index 49f2a04f4f..83b1eb258d 100644
--- a/frontend/src/lib/components/wizards/TableActionsWizard.svelte
+++ b/frontend/src/lib/components/wizards/TableActionsWizard.svelte
@@ -71,11 +71,8 @@
 						/>
 						<Button
 							size="xs"
-							color="light"
-							startIcon={{
-								icon: Code
-							}}
-							variant="border"
+							startIcon={{ icon: Code }}
+							variant="default"
 							on:click={() => {
 								actionsOrder = undefined
 							}}
@@ -85,11 +82,8 @@
 					{:else}
 						<Button
 							size="xs"
-							color="light"
-							startIcon={{
-								icon: Code
-							}}
-							variant="border"
+							startIcon={{ icon: Code }}
+							variant="default"
 							on:click={() => {
 								actionsOrder = {
 									fieldType: 'text',
diff --git a/frontend/src/lib/components/workspaceSettings/AISettings.svelte b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
index 77215d332b..4fbbf8ca47 100644
--- a/frontend/src/lib/components/workspaceSettings/AISettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
@@ -154,7 +154,7 @@
 
 <div class="flex flex-col gap-4 my-8">
 	<div class="flex flex-col gap-1">
-		<div class="text-primary text-lg font-semibold"> Windmill AI</div>
+		<div class="text-emphasis text-sm font-semibold"> Windmill AI</div>
 		<Description link="https://www.windmill.dev/docs/core_concepts/ai_generation">
 			Windmill AI integrates with your favorite AI providers and models.
 		</Description>
@@ -163,7 +163,7 @@
 
 <div class="flex flex-col gap-8">
 	<div class="flex flex-col gap-2">
-		<p class="font-semibold">AI Providers</p>
+		<p class="font-semibold text-xs text-emphasis">AI Providers</p>
 		<div class="flex flex-col gap-4">
 			{#each Object.entries(AI_PROVIDERS) as [provider, details]}
 				<div class="flex flex-col gap-2">
@@ -383,6 +383,7 @@
 	{/if}
 
 	<Button
+		variant="accent"
 		wrapperClasses="self-start"
 		disabled={!Object.values(aiProviders).every((p) => p.resource_path) ||
 			(codeCompletionModel != undefined && codeCompletionModel.length === 0) ||
diff --git a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
index 1ba96d9de1..89264d6b96 100644
--- a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
+++ b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
@@ -29,6 +29,7 @@
 	import { AI_PROVIDERS } from '$lib/components/copilot/lib'
 	import { GitFork } from 'lucide-svelte'
 	import PrefixedInput from '../PrefixedInput.svelte'
+	import TextInput from '../text_input/TextInput.svelte'
 
 	interface Props {
 		isFork?: boolean
@@ -48,7 +49,7 @@
 	let codeCompletionEnabled = $state(true)
 	let checking = $state(false)
 
-	let workspaceColor: string | null = $state(null)
+	let workspaceColor: string | undefined = $state(undefined)
 	let colorEnabled = $state(false)
 
 	function generateRandomColor() {
@@ -246,98 +247,109 @@
 </script>
 
 <CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace">
-	{#if isFork}
-		<div class="flex flex-block gap-2">
-			<GitFork />
-			<span class="text-secondary text-l"> Forking </span>
-			<span class="text-secondary font-bold text-l">
-				{$workspaceStore}
-			</span>
-		</div>
-	{/if}
-	<label class="block pb-4 pt-4">
+	<div class="flex flex-col gap-8">
 		{#if isFork}
-			<span class="text-secondary text-sm">Fork name</span>
-			<span class="ml-4 text-tertiary text-xs">Displayable name of the forked workspace</span>
-		{:else}
-			<span class="text-secondary text-sm">Workspace name</span>
-			<span class="ml-4 text-tertiary text-xs">Displayable name</span>
-		{/if}
-		<!-- svelte-ignore a11y_autofocus -->
-		<input autofocus type="text" bind:value={name} />
-	</label>
-	<label class="block pb-4">
-		<span class="text-secondary text-sm">Workspace ID</span>
-		{#if isFork}
-			<span class="ml-10 text-tertiary text-xs"
-				>Slug to uniquely identify your fork (this will also set the branch name)</span
-			>
-		{:else}
-			<span class="ml-10 text-tertiary text-xs">Slug to uniquely identify your workspace</span>
-		{/if}
-		{#if errorId}
-			<span class="text-red-500 text-xs">{errorId}</span>
+			<div class="flex flex-block gap-2">
+				<GitFork size={16} />
+				<span class="text-xs text-normal">Forking </span>
+				<span class="text-xs text-emphasis font-semibold">
+					{$workspaceStore}
+				</span>
+			</div>
 		{/if}
+		<label class="flex flex-col gap-1">
+			{#if isFork}
+				<span class="text-xs font-semibold text-emphasis">Fork name</span>
+				<span class="text-xs text-secondary">Displayable name of the forked workspace</span>
+			{:else}
+				<span class="text-xs font-semibold text-emphasis">Workspace name</span>
+				<span class="text-xs text-secondary">Displayable name</span>
+			{/if}
+			<!-- svelte-ignore a11y_autofocus -->
+			<TextInput inputProps={{ autofocus: true }} bind:value={name} />
+		</label>
+		<label class="flex flex-col gap-1">
+			<span class="text-xs font-semibold text-emphasis">Workspace ID</span>
+			{#if isFork}
+				<span class="text-2xs text-secondary"
+					>Slug to uniquely identify your fork (this will also set the branch name)</span
+				>
+			{:else}
+				<span class="text-2xs text-secondary">Slug to uniquely identify your workspace</span>
+			{/if}
 
-		{#if isFork}
-			<PrefixedInput
-				prefix={WM_FORK_PREFIX}
-				type="text"
-				bind:value={id}
-				placeholder="example.com"
-				class={errorId != '' ? 'input-error' : ''}
-			/>
-		{:else}
-			<input type="text" bind:value={id} class:input-error={errorId != ''} />
-		{/if}
-	</label>
-	<label class="block pb-4">
-		<span class="text-secondary text-sm">Workspace color</span>
-		<span class="ml-5 text-tertiary text-xs"
-			>Color to identify the current workspace in the list of workspaces</span
-		>
-		<div class="flex items-center gap-2">
-			<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
-			{#if colorEnabled}<input
-					class="w-10"
-					type="color"
-					bind:value={workspaceColor}
-					disabled={!colorEnabled}
-				/>{/if}
-			<input
-				type="text"
-				class="w-24 text-sm"
-				bind:value={workspaceColor}
-				disabled={!colorEnabled}
-			/>
-			<Button on:click={generateRandomColor} size="xs" disabled={!colorEnabled}>Random</Button>
-		</div>
-	</label>
-	{#if !automateUsernameCreation}
-		<label class="block pb-4">
-			<span class="text-secondary text-sm">Your username in that workspace</span>
-			<input type="text" bind:value={username} onkeyup={handleKeyUp} />
-			{#if errorUser}
-				<span class="text-red-500 text-xs">{errorUser}</span>
+			{#if isFork}
+				<PrefixedInput
+					prefix={WM_FORK_PREFIX}
+					type="text"
+					bind:value={id}
+					placeholder="example.com"
+					class={errorId != '' ? 'input-error' : ''}
+				/>
+			{:else}
+				<TextInput bind:value={id} error={errorId} />
+			{/if}
+			{#if errorId}
+				<span class="text-red-500 text-2xs font-normal">{errorId}</span>
 			{/if}
 		</label>
-	{/if}
-	{#if !isFork}
-		<div class="block pb-4">
-			<label for="ai-key" class="flex flex-col gap-1">
-				<span class="text-secondary text-sm">
-					AI key for Windmill AI
-					<Tooltip>
-						Find out how it can help you <a
-							href="https://www.windmill.dev/docs/core_concepts/ai_generation"
-							target="_blank"
-							rel="noopener noreferrer">in the docs</a
-						>
-					</Tooltip>
-					<span class="text-2xs text-tertiary ml-2">(optional but recommended)</span>
-				</span>
+		<label class="flex flex-col gap-1">
+			<span class="text-xs font-semibold text-emphasis">Workspace color</span>
+			<span class="text-xs text-secondary"
+				>Color to identify the current workspace in the list of workspaces</span
+			>
+			<div class="flex items-center gap-4">
+				<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
+				{#if colorEnabled}
+					<div class="flex items-center gap-1 grow">
+						<input
+							class="grow min-w-10"
+							type="color"
+							bind:value={workspaceColor}
+							disabled={!colorEnabled}
+						/>
+
+						<TextInput
+							class="w-24"
+							bind:value={workspaceColor}
+							inputProps={{ disabled: !colorEnabled }}
+						/>
+						<Button
+							on:click={generateRandomColor}
+							size="xs"
+							variant="default"
+							disabled={!colorEnabled}>Random</Button
+						>
+					</div>
+				{/if}
+			</div>
+		</label>
+		{#if !automateUsernameCreation}
+			<label class="flex flex-col gap-1">
+				<span class="text-xs font-semibold text-emphasis">Your username in that workspace</span>
+				<TextInput bind:value={username} inputProps={{ onkeyup: handleKeyUp }} error={errorUser} />
+				{#if errorUser}
+					<span class="text-red-500 text-2xs">{errorUser}</span>
+				{/if}
+			</label>
+		{/if}
+		{#if !isFork}
+			<div class="block">
+				<div class="flex flex-col gap-1">
+					<label for="ai-key" class="flex flex-row gap-2">
+						<span class="text-xs font-semibold text-emphasis">
+							AI key for Windmill AI
+							<Tooltip>
+								Find out how it can help you <a
+									href="https://www.windmill.dev/docs/core_concepts/ai_generation"
+									target="_blank"
+									rel="noopener noreferrer">in the docs</a
+								>
+							</Tooltip>
+						</span>
+						<span class="text-2xs text-secondary">(optional but recommended)</span>
+					</label>
 
-				<div class="pb-2">
 					<ToggleButtonGroup bind:selected>
 						{#snippet children({ item })}
 							<ToggleButton value="openai" label="OpenAI" {item} />
@@ -346,82 +358,96 @@
 							<ToggleButton value="deepseek" label="DeepSeek" {item} />
 						{/snippet}
 					</ToggleButtonGroup>
+					<div class="flex flex-row gap-1">
+						<input
+							id="ai-key"
+							type="password"
+							autocomplete="new-password"
+							bind:value={aiKey}
+							onkeyup={handleKeyUp}
+						/>
+						<TestAIKey
+							apiKey={aiKey}
+							disabled={!aiKey}
+							aiProvider={selected}
+							model={AI_PROVIDERS[selected].defaultModels[0]}
+						/>
+					</div>
 				</div>
-			</label>
 
-			<div class="flex flex-row gap-1 pb-4">
-				<input
-					id="ai-key"
-					type="password"
-					autocomplete="new-password"
-					bind:value={aiKey}
-					onkeyup={handleKeyUp}
-				/>
-				<TestAIKey
-					apiKey={aiKey}
-					disabled={!aiKey}
-					aiProvider={selected}
-					model={AI_PROVIDERS[selected].defaultModels[0]}
-				/>
+				{#if aiKey}
+					<div class="flex flex-col gap-2 mt-2">
+						<Toggle
+							disabled={!aiKey}
+							bind:checked={codeCompletionEnabled}
+							options={{ right: 'Enable code completion' }}
+						/>
+					</div>
+				{/if}
 			</div>
-			{#if aiKey}
+			<div class="flex flex-col gap-1">
+				<label for="auto-invite" class="text-xs font-semibold text-emphasis"
+					>{isCloudHosted()
+						? `Auto-invite anyone from ${domain}`
+						: `Auto-invite anyone joining the instance`}</label
+				>
 				<Toggle
-					disabled={!aiKey}
-					bind:checked={codeCompletionEnabled}
-					options={{ right: 'Enable code completion' }}
+					id="auto-invite"
+					disabled={isCloudHosted() && !isDomainAllowed}
+					bind:checked={auto_invite}
 				/>
-			{/if}
-		</div>
-		<Toggle
-			disabled={isCloudHosted() && !isDomainAllowed}
-			bind:checked={auto_invite}
-			options={{
-				right: isCloudHosted()
-					? `Auto-invite anyone from ${domain}`
-					: `Auto-invite anyone joining the instance`
-			}}
-		/>
-		{#if isCloudHosted() && isDomainAllowed == false}
-			<div class="text-tertiary text-sm mb-4 mt-2">{domain} domain not allowed for auto-invite</div>
-		{/if}
-		<div class={'overflow-hidden transition-all ' + (auto_invite ? 'h-36' : 'h-0')}>
-			<div class="text-xs mb-1 leading-6 pt-2">
-				Mode <Tooltip>Whether to invite or add users directly to the workspace.</Tooltip>
-			</div>
+				{#if isCloudHosted() && isDomainAllowed == false}
+					<div class="text-secondary text-2xs">{domain} domain not allowed for auto-invite</div>
+				{/if}
 
-			<div class="text-xs mb-1 leading-6 pt-2"
-				>Role <Tooltip>Role of the auto-invited users</Tooltip></div
+				{#if auto_invite}
+					<div class="bg-surface-tertiary p-4 rounded-md flex flex-col gap-8">
+						<!-- svelte-ignore a11y_label_has_associated_control -->
+						<label class="flex flex-col gap-1">
+							<span class="text-xs font-semibold text-emphasis">Mode</span>
+							<span class="text-xs text-secondary font-normal"
+								>Whether to invite or add users directly to the workspace.</span
+							>
+						</label>
+
+						<label class="font-semibold flex flex-col gap-1">
+							<span class="text-xs font-semibold text-emphasis">Role</span>
+							<span class="text-xs text-secondary font-normal">Role of the auto-invited users</span>
+							<ToggleButtonGroup
+								selected={operatorOnly ? 'operator' : 'developer'}
+								on:selected={(e) => {
+									operatorOnly = e.detail == 'operator'
+								}}
+							>
+								{#snippet children({ item })}
+									<ToggleButton value="operator" label="Operator" {item} />
+									<ToggleButton value="developer" label="Developer" {item} />
+								{/snippet}
+							</ToggleButtonGroup>
+						</label>
+					</div>
+				{/if}
+			</div>
+		{/if}
+		<div class="flex flex-wrap flex-row justify-between pt-12 gap-4">
+			<Button variant="default" size="sm" href="{base}/user/workspaces"
+				>&leftarrow; Back to workspaces</Button
 			>
-			<ToggleButtonGroup
-				selected={operatorOnly ? 'operator' : 'developer'}
-				on:selected={(e) => {
-					operatorOnly = e.detail == 'operator'
-				}}
+			<Button
+				variant="accent"
+				disabled={checking ||
+					errorId != '' ||
+					!name ||
+					(!automateUsernameCreation && (errorUser != '' || !username)) ||
+					!id}
+				on:click={createOrForkWorkspace}
 			>
-				{#snippet children({ item })}
-					<ToggleButton value="operator" small label="Operator" {item} />
-					<ToggleButton value="developer" small label="Developer" {item} />
-				{/snippet}
-			</ToggleButtonGroup>
+				{#if isFork}
+					Fork workspace
+				{:else}
+					Create workspace
+				{/if}
+			</Button>
 		</div>
-	{/if}
-	<div class="flex flex-wrap flex-row justify-between pt-10 gap-1">
-		<Button variant="border" size="sm" href="{base}/user/workspaces"
-			>&leftarrow; Back to workspaces</Button
-		>
-		<Button
-			disabled={checking ||
-				errorId != '' ||
-				!name ||
-				(!automateUsernameCreation && (errorUser != '' || !username)) ||
-				!id}
-			on:click={createOrForkWorkspace}
-		>
-			{#if isFork}
-				Fork workspace
-			{:else}
-				Create workspace
-			{/if}
-		</Button>
 	</div>
 </CenteredModal>
diff --git a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
index 1a001b7036..e8be26a2d7 100644
--- a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
@@ -301,7 +301,7 @@
 									bind:this={instanceCatalogPopover}
 								>
 									<svelte:fragment slot="trigger">
-										<Button spacingSize="xs2" variant="border" color="light" btnClasses="h-6">
+										<Button spacingSize="xs2" variant="default" btnClasses="h-6">
 											{#if !status}
 												<span class="text-yellow-600 dark:text-yellow-400">
 													Setup <ArrowRight class="inline" size={14} />
@@ -380,7 +380,7 @@
 		<Row class="!border-0">
 			<Cell colspan={tableHeadNames.length} class="pt-0 pb-2">
 				<div class="flex justify-center">
-					<Button size="sm" btnClasses="max-w-fit" variant="border" on:click={onNewDucklake}>
+					<Button size="sm" btnClasses="max-w-fit" variant="default" on:click={onNewDucklake}>
 						<Plus /> New ducklake
 					</Button>
 				</div>
@@ -471,7 +471,7 @@
 		)}
 	/>
 	{#if showManageCatalogButton}
-		<div class="text-tertiary text-xs mt-6">
+		<div class="text-primary text-xs mt-6">
 			Note: the 'Manage catalog' button below is different from the Manage Ducklake button. This
 			will show you the content of the PostgreSQL database used as a catalog, while the other button
 			shows you the actual content of the ducklake (the parquet files).
diff --git a/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte b/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte
index e73cb40e0c..8347944b0b 100644
--- a/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte
@@ -35,7 +35,7 @@
 		isInitialSetup = false,
 		requiresMigration = false,
 		actions = undefined,
-		useIndividualBranch = false,
+		useIndividualBranch = false
 	} = $props()
 
 	// Component state
@@ -107,8 +107,6 @@
 	function capitalize(str: string) {
 		return str.charAt(0).toUpperCase() + str.slice(1)
 	}
-
-
 </script>
 
 <div class="rounded-lg shadow-sm border p-0 w-full">
@@ -119,11 +117,14 @@
 			<span class="font-semibold text-sm">Git Sync filter settings</span>
 			{#if isLegacyRepo}
 				<Tooltip>
-					This repository uses legacy configuration format and inherits settings from workspace-level defaults. Excluded types are filtered out from inherited types. Save to migrate to the new format.
+					This repository uses legacy configuration format and inherits settings from
+					workspace-level defaults. Excluded types are filtered out from inherited types. Save to
+					migrate to the new format.
 				</Tooltip>
 			{:else if !isEditable}
 				<Tooltip documentationLink="https://www.windmill.dev/docs/advanced/cli/sync#wmillyaml">
-					These settings are controlled by the wmill.yaml file in your git repository. Click "Pull from repo" to check for settings drift and pull settings from repo.
+					These settings are controlled by the wmill.yaml file in your git repository. Click "Pull
+					from repo" to check for settings drift and pull settings from repo.
 				</Tooltip>
 			{/if}
 		</div>
@@ -174,8 +175,8 @@
 				<div class="grid grid-cols-1 md:grid-cols-2 md:gap-32">
 					<div class="flex flex-col gap-2">
 						<Tabs bind:selected={filtersTab}>
-							<Tab value="includes">Includes</Tab>
-							<Tab value="excludes">Excludes</Tab>
+							<Tab value="includes" label="Includes"></Tab>
+							<Tab value="excludes" label="Excludes"></Tab>
 						</Tabs>
 
 						{#if filtersTab === 'includes'}
@@ -336,7 +337,7 @@
 				</div>
 			</div>
 			<div class="mt-6 p-2 border-t">
-				<div class="text-xs text-tertiary mb-2">
+				<div class="text-xs text-primary mb-2">
 					{isInitialSetup ? 'Configure initial sync settings' : 'Review migration settings'}
 				</div>
 			</div>
@@ -350,11 +351,13 @@
 							{#if include_path.length > 0}
 								<div class="flex flex-wrap gap-1 text-xs">
 									{#each include_path as path}
-										<span class="bg-surface-secondary text-primary rounded-full px-2 py-1">{path}</span>
+										<span class="bg-surface-secondary text-primary rounded-full px-2 py-1"
+											>{path}</span
+										>
 									{/each}
 								</div>
 							{:else}
-								<div class="text-tertiary text-xs">No include paths configured</div>
+								<div class="text-primary text-xs">No include paths configured</div>
 							{/if}
 						</div>
 
@@ -367,7 +370,7 @@
 									{/each}
 								</div>
 							{:else}
-								<div class="text-tertiary text-xs">No exclude paths configured</div>
+								<div class="text-primary text-xs">No exclude paths configured</div>
 							{/if}
 						</div>
 					</div>
@@ -380,7 +383,7 @@
 									<div class={enabled ? 'text-green-600' : 'text-gray-400'}>
 										{enabled ? '✓' : '✗'}
 									</div>
-									<span class={enabled ? 'text-primary' : 'text-tertiary'}>
+									<span class={enabled ? 'text-primary' : 'text-primary'}>
 										{capitalize(key)}
 									</span>
 								</div>
@@ -400,11 +403,11 @@
 				<div class="border-t pt-2 mt-4">
 					<button
 						class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-						onclick={() => showCliInstructions = !showCliInstructions}
+						onclick={() => (showCliInstructions = !showCliInstructions)}
 					>
 						<Terminal size={16} />
 						<span>Update settings with CLI</span>
-						<Edit3 size={14} class="text-tertiary" />
+						<Edit3 size={14} class="text-primary" />
 						{#if showCliInstructions}
 							<ChevronUp size={16} />
 						{:else}
@@ -414,11 +417,20 @@
 
 					{#if showCliInstructions}
 						<div class="mt-3 bg-surface-secondary rounded-lg p-3">
-							<div class="text-xs text-tertiary mb-2">
-								These filter settings are sourced from the <code class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code> file in your git repository.
-								To modify them, edit the file in your repository, commit the changes, and sync using the commands below. Learn more about <a href="https://www.windmill.dev/docs/advanced/cli/sync#wmillyaml" target="_blank" rel="noopener noreferrer">the wmill.yaml format</a>
+							<div class="text-xs text-primary mb-2">
+								These filter settings are sourced from the <code
+									class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code
+								>
+								file in your git repository. To modify them, edit the file in your repository, commit
+								the changes, and sync using the commands below. Learn more about
+								<a
+									href="https://www.windmill.dev/docs/advanced/cli/sync#wmillyaml"
+									target="_blank"
+									rel="noopener noreferrer">the wmill.yaml format</a
+								>
 							</div>
-							<pre class="text-xs bg-surface p-3 rounded overflow-x-auto whitespace-pre-wrap break-all">
+							<pre
+								class="text-xs bg-surface p-3 rounded overflow-x-auto whitespace-pre-wrap break-all">
 # Make sure your repo is up to date
 git pull
 
@@ -431,16 +443,23 @@ git commit
 git push
 
 # Push changes to workspace or click the pull settings button above{#if useIndividualBranch}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path} --promotion main{:else}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path}{/if}</pre>
+									wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path} --promotion main{:else}
+									wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path}{/if}</pre
+							>
 							{#if useIndividualBranch}
-								<div class="text-xs text-tertiary mt-3">
+								<div class="text-xs text-primary mt-3">
 									<div class="font-medium mb-1">Promotion Mode Configuration:</div>
-									<div>You can add promotion-specific overrides in your <code class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code> file:</div>
-									<pre class="text-xs bg-surface p-2 rounded mt-2 overflow-x-auto">git_branches:
+									<div
+										>You can add promotion-specific overrides in your <code
+											class="bg-surface px-1 py-0.5 rounded">wmill.yaml</code
+										> file:</div
+									>
+									<pre class="text-xs bg-surface p-2 rounded mt-2 overflow-x-auto"
+										>git_branches:
   main:
     promotionOverrides:
-      # Add your promotion-specific settings here</pre>
+      # Add your promotion-specific settings here</pre
+									>
 								</div>
 							{/if}
 						</div>
diff --git a/frontend/src/lib/components/workspaceSettings/ModelTokenLimits.svelte b/frontend/src/lib/components/workspaceSettings/ModelTokenLimits.svelte
index 1ecf775c08..470f77a1d5 100644
--- a/frontend/src/lib/components/workspaceSettings/ModelTokenLimits.svelte
+++ b/frontend/src/lib/components/workspaceSettings/ModelTokenLimits.svelte
@@ -163,7 +163,7 @@
 											</div>
 										</div>
 										{#if !isAtDefault}
-											<div class="text-xs text-tertiary flex flex-row items-center gap-1">
+											<div class="text-xs text-primary flex flex-row items-center gap-1">
 												<span>Default: {defaultTokens} tokens</span>
 												<button
 													type="button"
diff --git a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
index 337e84d8d1..a15df0f080 100644
--- a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
@@ -53,7 +53,7 @@
 
 <div class="flex flex-col gap-4 my-8">
 	<div class="flex flex-col gap-1">
-		<div class="text-primary text-lg font-semibold"
+		<div class="text-sm font-semibold text-emphasis"
 			>Workspace Object Storage (S3/Azure Blob/GCS)</div
 		>
 		<Description
@@ -77,7 +77,7 @@
 		storage using S3Object and use the wmill sdk to read and write large files backed by an object
 		storage. Large-scale log management and distributed dependency caching is under <a
 			href="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#instance-object-storage"
-			class="text-blue-500">Instance object storage</a
+			>Instance object storage</a
 		>, set by the superadmins in the instance settings UI.
 	</Alert>
 {/if}
@@ -87,11 +87,11 @@
 			<!-- this can be removed once parent moves to runes -->
 			<!-- svelte-ignore binding_property_non_reactive -->
 			<Tabs bind:selected={s3ResourceSettings.resourceType}>
-				<Tab exact size="xs" value="s3">S3</Tab>
-				<Tab size="xs" value="azure_blob">Azure Blob</Tab>
-				<Tab exact size="xs" value="s3_aws_oidc">AWS OIDC</Tab>
-				<Tab size="xs" value="azure_workload_identity">Azure Workload Identity</Tab>
-				<Tab exact size="xs" value="gcloud_storage">Google Cloud Storage</Tab>
+				<Tab exact label="S3" value="s3" />
+				<Tab value="azure_blob" label="Azure Blob" />
+				<Tab exact value="s3_aws_oidc" label="AWS OIDC" />
+				<Tab value="azure_workload_identity" label="Azure Workload Identity" />
+				<Tab exact value="gcloud_storage" label="Google Cloud Storage" />
 			</Tabs>
 		</div>
 		<div class="w-full flex gap-1 mt-4">
@@ -104,8 +104,7 @@
 			{@render permissionBtn(s3ResourceSettings)}
 			<Button
 				size="sm"
-				variant="contained"
-				color="dark"
+				variant="accent"
 				disabled={emptyString(s3ResourceSettings.resourcePath)}
 				on:click={async () => {
 					if ($workspaceStore) {
@@ -166,8 +165,7 @@
 					{@render permissionBtn(s3ResourceSettings.secondaryStorage![idx][1])}
 					<Button
 						size="sm"
-						variant="contained"
-						color="dark"
+						variant="accent"
 						disabled={emptyString(s3ResourceSettings.secondaryStorage?.[idx]?.[1].resourcePath)}
 						on:click={async () => {
 							if ($workspaceStore) {
@@ -193,7 +191,7 @@
 			<div class="flex gap-1">
 				<Button
 					size="xs"
-					variant="border"
+					variant="default"
 					on:click={() => {
 						if (s3ResourceSettings.secondaryStorage === undefined) {
 							s3ResourceSettings.secondaryStorage = []
@@ -231,7 +229,7 @@
 {#snippet permissionBtn(storage: NonNullable<S3ResourceSettings['secondaryStorage']>[number][1])}
 	<Popover closeOnOtherPopoverOpen placement="left">
 		<svelte:fragment slot="trigger">
-			<Button variant="border" wrapperClasses="h-full" btnClasses="px-2.5" color="dark" size="sm">
+			<Button variant="default" wrapperClasses="h-full" btnClasses="px-2.5" size="sm">
 				<Shield size={16} /> Permissions <ChevronDown size={14} />
 			</Button>
 		</svelte:fragment>
@@ -349,7 +347,7 @@
 			<CloseButton onClick={() => rules?.splice(idx, 1)} />
 		</div>
 	{/each}
-	<Button size="xs" variant="border" on:click={() => rules?.push({ pattern: '', allow: [] })}>
+	<Button size="xs" variant="default" on:click={() => rules?.push({ pattern: '', allow: [] })}>
 		<Plus size={14} />
 		Add permission rule
 	</Button>
diff --git a/frontend/src/lib/defaults.ts b/frontend/src/lib/defaults.ts
deleted file mode 100644
index 7096ad1185..0000000000
--- a/frontend/src/lib/defaults.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const SELECT_INPUT_DEFAULT_STYLE = {
-	inputStyles: 'border-radius: 0;',
-	containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;',
-	containerStylesDark:
-		'--height: 34px; --padding: 0 0 0 8px; border-color: #4b5563; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
-} as const
diff --git a/frontend/src/lib/toast.ts b/frontend/src/lib/toast.ts
index 9d47debbde..b71422d1d6 100644
--- a/frontend/src/lib/toast.ts
+++ b/frontend/src/lib/toast.ts
@@ -1,9 +1,12 @@
 import Toast from '$lib/components/Toast.svelte'
 import { toast } from '@zerodevx/svelte-toast'
+import type { ComponentProps } from 'svelte'
+import type { Button } from './components/common'
 
 export type ToastAction = {
 	label: string
 	callback: () => void
+	buttonType?: ComponentProps<typeof Button>['variant']
 }
 
 export function sendUserToast(
@@ -43,7 +46,8 @@ export function sendUserToast(
 		theme: {
 			'--toastPadding': '0',
 			'--toastMsgPadding': '0',
-			'--toastBackground': 'var(--color-surface)'
+			'--toastBackground': '#00000000',
+			'--toastBorderRadius': '0.4rem'
 		}
 	})
 }
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 29f43eac72..26f87888c4 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1460,7 +1460,7 @@ export function getOS() {
 
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import type { Snippet } from 'svelte'
+import type { Component, Snippet } from 'svelte'
 import { OpenAPIV2, type OpenAPI, type OpenAPIV3, type OpenAPIV3_1 } from 'openapi-types'
 import type { IPosition } from 'monaco-editor'
 
@@ -1622,3 +1622,27 @@ export function createCache<Keys extends Record<string, any>, T, InitialKeys ext
 export async function wait(ms: number) {
 	return new Promise((resolve) => setTimeout(() => resolve(undefined), ms))
 }
+
+export type CssColor = keyof (typeof tokensFile)['tokens']['light']
+import tokensFile from './assets/tokens/tokens.json'
+import { darkModeName, lightModeName } from './assets/tokens/colorTokensConfig'
+export function getCssColor(
+	color: CssColor,
+	{
+		alpha = 1,
+		format = 'css-var'
+	}: {
+		alpha?: number
+		format?: 'css-var' | 'hex-dark' | 'hex-light'
+	}
+): string {
+	if (format === 'hex-light') {
+		return tokensFile.tokens[lightModeName][color]
+	}
+	if (format === 'hex-dark') {
+		return tokensFile.tokens[darkModeName][color]
+	}
+	return `rgb(var(--color-${color}) / ${alpha})`
+}
+
+export type IconType = Component<{ size?: number }> | typeof import('lucide-svelte').Dot
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index 4f53e5a3bf..de79f789c2 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -502,7 +502,7 @@
 											}}
 											label="Ask AI"
 											class="!text-xs"
-											iconClasses="!text-violet-400 dark:!text-violet-400"
+											iconClasses="!text-ai-inverse dark:!text-ai"
 											shortcut={`${getModifierKey()}L`}
 										/>
 									</div>
@@ -576,7 +576,7 @@
 									}}
 									label="Ask AI"
 									class="!text-xs"
-									iconClasses="!text-violet-400 dark:!text-violet-400"
+									iconClasses="!text-ai-inverse dark:!text-ai"
 									shortcut={`${getModifierKey()}L`}
 								/>
 							</div>
@@ -611,7 +611,6 @@
 					<OperatorMenu {favoriteLinks} />
 				</div>
 			{/if}
-
 			<!-- Legacy menu -->
 			<div
 				class={classNames(
@@ -690,7 +689,7 @@
 									}}
 									label="Ask AI"
 									class="!text-xs"
-									iconClasses="!text-violet-400 dark:!text-violet-400"
+									iconClasses="!text-ai-inverse dark:!text-ai"
 									shortcut={`${getModifierKey()}L`}
 								/>
 							</div>
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index bc95f315e7..1050248b69 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -2,6 +2,9 @@
 	import { AppService, FlowService, type OpenFlow, type Script } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { Alert, Button, Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import FlowIcon from '$lib/components/home/FlowIcon.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import CreateActionsFlow from '$lib/components/flows/CreateActionsFlow.svelte'
 	import CreateActionsScript from '$lib/components/scripts/CreateActionsScript.svelte'
@@ -10,7 +13,15 @@
 	import PickHubScript from '$lib/components/flows/pickers/PickHubScript.svelte'
 	import PickHubFlow from '$lib/components/flows/pickers/PickHubFlow.svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
-	import { Building, ExternalLink, GitFork, Globe2, Loader2 } from 'lucide-svelte'
+	import {
+		Building,
+		ExternalLink,
+		GitFork,
+		Globe2,
+		Loader2,
+		Code,
+		LayoutDashboard
+	} from 'lucide-svelte'
 	import { hubBaseUrlStore } from '$lib/stores'
 	import { base } from '$lib/base'
 
@@ -98,7 +109,7 @@
 			<Button
 				href="{base}/scripts/add?hub={encodeURIComponent(codeViewerObj?.path ?? '')}"
 				startIcon={{ icon: GitFork }}
-				color="dark"
+				variant="accent"
 				size="xs"
 				disabled={codeViewerObj == undefined}
 			>
@@ -135,7 +146,7 @@
 			<Button
 				href="{base}/flows/add?hub={flowViewerFlow?.flow?.id}"
 				startIcon={{ icon: GitFork }}
-				color="dark"
+				variant="accent"
 				size="xs"
 				disabled={flowViewerFlow == undefined}
 			>
@@ -177,7 +188,7 @@
 			<Button
 				href="{base}/apps/add?hub={appViewerApp?.app?.id}"
 				startIcon={{ icon: GitFork }}
-				color="dark"
+				variant="accent"
 				disabled={appViewerApp == undefined}
 				size="xs"
 			>
@@ -213,107 +224,97 @@
 	</DrawerContent>
 </Drawer>
 
-<div>
-	<div class="max-w-7xl mx-auto px-4 sm:px-8 md:px-8 h-fit-content">
-		{#if $workspaceStore == 'admins'}
-			<div class="my-4"></div>
+<div class="max-w-7xl mx-auto px-4 sm:px-8 md:px-8 h-fit">
+	{#if $workspaceStore == 'admins'}
+		<div class="my-4"></div>
 
-			<Alert title="Admins workspace">
-				The Admins workspace is for admins only and contains scripts whose purpose is to manage your
-				Windmill instance, such as keeping resource types up to date.
-			</Alert>
-		{/if}
-		<PageHeader title="Home">
-			<div class="flex flex-row gap-4 flex-wrap justify-end items-center">
-				{#if !$userStore?.operator}
-					<span class="text-sm text-secondary">Create a</span>
-					<CreateActionsScript aiId="create-script-button" aiDescription="Creates a new script" />
-					{#if HOME_SHOW_CREATE_FLOW}<CreateActionsFlow />{/if}
-					{#if HOME_SHOW_CREATE_APP}<CreateActionsApp />{/if}
+		<Alert title="Admins workspace">
+			The Admins workspace is for admins only and contains scripts whose purpose is to manage your
+			Windmill instance, such as keeping resource types up to date.
+		</Alert>
+	{/if}
+	<PageHeader title="Home">
+		<div class="flex flex-row gap-4 flex-wrap justify-end items-center">
+			{#if !$userStore?.operator}
+				<span class="text-xs font-normal text-primary">Create a</span>
+				<CreateActionsScript aiId="create-script-button" aiDescription="Creates a new script" />
+				{#if HOME_SHOW_CREATE_FLOW}<CreateActionsFlow />{/if}
+				{#if HOME_SHOW_CREATE_APP}<CreateActionsApp />{/if}
+			{/if}
+		</div>
+	</PageHeader>
+
+	{#if !$userStore?.operator}
+		<div class="w-full overflow-auto scrollbar-hidden pb-2">
+			<Tabs values={['hub', 'workspace']} hashNavigation bind:selected={tab}>
+				<Tab value="workspace" label="Workspace" icon={Building} />
+				{#if HOME_SHOW_HUB}
+					<Tab value="hub" label="Hub" icon={Globe2} />
 				{/if}
-			</div>
-		</PageHeader>
-
-		{#if !$userStore?.operator}
-			<div class="w-full overflow-auto scrollbar-hidden">
-				<Tabs values={['hub', 'workspace']} hashNavigation bind:selected={tab}>
-					<Tab size="md" value="workspace">
-						<div class="flex gap-2 items-center my-1">
-							<Building size={18} />
-							Workspace
-						</div>
-					</Tab>
-					{#if HOME_SHOW_HUB}
-						<Tab size="md" value="hub">
-							<div class="flex gap-2 items-center my-1">
-								<Globe2 size={18} />
-								Hub
-							</div>
-						</Tab>
-					{/if}
-				</Tabs>
-			</div>
-		{/if}
-		<div class="my-2"></div>
+			</Tabs>
+		</div>
+	{/if}
+	{#if tab == 'hub'}
 		<div class="flex flex-col gap-y-16">
-			<div class="flex flex-col">
-				{#if tab == 'hub'}
-					<Tabs
+			<div class="flex flex-col pb-8">
+				{#snippet toggleKinds()}
+					<ToggleButtonGroup
 						bind:selected={subtab}
-						on:selected={() => {
-							setQuery($page.url, 'kind', subtab, window.location.hash)
+						onSelected={(v) => {
+							setQuery($page.url, 'kind', v, window.location.hash)
 						}}
+						noWFull
 					>
-						<Tab size="md" value="script">
-							<div class="flex gap-2 items-center my-1"> Scripts </div>
-						</Tab>
-						<Tab size="md" value="flow">
-							<div class="flex gap-2 items-center my-1"> Flows </div>
-						</Tab>
-						<Tab size="md" value="app">
-							<div class="flex gap-2 items-center my-1"> Apps </div>
-						</Tab>
-					</Tabs>
-					<div class="my-2"></div>
+						{#snippet children({ item })}
+							<ToggleButton value="script" label="Scripts" icon={Code} {item} />
+							<ToggleButton
+								value="flow"
+								label="Flows"
+								icon={FlowIcon}
+								selectedColor="#14b8a6"
+								{item}
+							/>
+							<ToggleButton
+								value="app"
+								label="Apps"
+								icon={LayoutDashboard}
+								selectedColor="#fb923c"
+								{item}
+							/>
+						{/snippet}
+					</ToggleButtonGroup>
+					<Button
+						startIcon={{ icon: ExternalLink }}
+						target="_blank"
+						href={$hubBaseUrlStore}
+						variant="default"
+					>
+						Hub
+					</Button>
+				{/snippet}
 
-					{#if subtab == 'script'}
-						<PickHubScript syncQuery bind:filter on:pick={(e) => viewCode(e.detail)}>
-							<Button
-								startIcon={{ icon: ExternalLink }}
-								target="_blank"
-								href={$hubBaseUrlStore}
-								variant="border"
-								color="light"
-							>
-								Hub
-							</Button>
-						</PickHubScript>
-					{:else if subtab == 'flow'}
-						<PickHubFlow syncQuery bind:filter on:pick={(e) => viewFlow(e.detail)}>
-							<Button
-								startIcon={{ icon: ExternalLink }}
-								target="_blank"
-								href={$hubBaseUrlStore}
-								variant="border"
-								color="light"
-								>Hub
-							</Button>
-						</PickHubFlow>
-					{:else if subtab == 'app'}
-						<PickHubApp syncQuery bind:filter on:pick={(e) => viewApp(e.detail)}>
-							<Button
-								startIcon={{ icon: ExternalLink }}
-								target="_blank"
-								href={$hubBaseUrlStore}
-								variant="border"
-								color="light">Hub</Button
-							>
-						</PickHubApp>
-					{/if}
+				{#if subtab == 'script'}
+					<PickHubScript syncQuery bind:filter on:pick={(e) => viewCode(e.detail)}>
+						{#snippet children()}
+							{@render toggleKinds?.()}
+						{/snippet}
+					</PickHubScript>
+				{:else if subtab == 'flow'}
+					<PickHubFlow syncQuery bind:filter on:pick={(e) => viewFlow(e.detail)}>
+						{#snippet children()}
+							{@render toggleKinds?.()}
+						{/snippet}
+					</PickHubFlow>
+				{:else if subtab == 'app'}
+					<PickHubApp syncQuery bind:filter on:pick={(e) => viewApp(e.detail)}>
+						{#snippet children()}
+							{@render toggleKinds?.()}
+						{/snippet}
+					</PickHubApp>
 				{/if}
 			</div>
 		</div>
-	</div>
+	{/if}
 </div>
 
 {#if tab == 'workspace'}
diff --git a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
index 2469bdcce9..cd38ee4a39 100644
--- a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
@@ -80,7 +80,7 @@
 					<Button
 						size="sm"
 						startIcon={{ icon: Pen }}
-						variant="border"
+						variant="default"
 						href="{base}/apps/edit/{app.path}?nodraft=true">Edit</Button
 					>
 				</div>
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte
index 31c04f4449..4b37c01f76 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/get/[...path]/+page.svelte
@@ -57,7 +57,7 @@
 			<Button
 				size="sm"
 				startIcon={{ icon: Pen }}
-				variant="border"
+				variant="default"
 				btnClasses="bg-white"
 				href="{base}/apps_raw/edit/{page.params.path}?nodraft=true">Edit</Button
 			>
diff --git a/frontend/src/routes/(root)/(logged)/assets/+page.svelte b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
index 2ee70243ad..6f7aab03af 100644
--- a/frontend/src/routes/(root)/(logged)/assets/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
@@ -68,7 +68,7 @@
 			<tbody class="divide-y bg-surface">
 				{#if assets.status == 'ok' && filteredAssets.length === 0}
 					<tr class="h-14">
-						<Cell colspan="4" class="text-center text-tertiary">No assets found</Cell>
+						<Cell colspan="4">No assets found</Cell>
 					</tr>
 				{/if}
 				{#each filteredAssets as asset}
@@ -87,7 +87,7 @@
 						</Cell>
 						<Cell class="w-[75%] flex flex-col">
 							<span>{truncate(asset.path, 92)}</span>
-							<span class="text-2xs text-tertiary">{formatAssetKind(asset)}</span>
+							<span class="text-2xs text-secondary">{formatAssetKind(asset)}</span>
 						</Cell>
 						<Cell>
 							<a href={`#${assetUri}`} onclick={() => assetsUsageDropdown?.open(asset)}>
diff --git a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
index e56a63a4a3..63153f69ed 100644
--- a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
@@ -88,7 +88,7 @@
 	<div class="flex flex-col w-full h-screen">
 		<div class="flex items-center space-x-2 flex-row justify-between">
 			<div class="flex flex-row flex-wrap justify-between py-2 my-4 px-4 gap-1 items-center">
-				<h1 class="!text-2xl font-semibold leading-6 tracking-tight">Audit logs</h1>
+				<h1 class="text-2xl font-semibold text-emphasis">Audit logs</h1>
 				<Tooltip documentationLink="https://www.windmill.dev/docs/core_concepts/audit_logs">
 					You can only see your own audit logs unless you are an admin.
 				</Tooltip>
diff --git a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
index d8428c75a9..a24a047866 100644
--- a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
@@ -47,9 +47,12 @@
 
 		const endStart = new Date().getTime()
 		// toggle concurrencyGroupsLoading to false in 1 secs to let some time for the animation to play
-		setTimeout(() => {
-			concurrencyGroupsLoading = false
-		}, 1000 - (endStart - timeStart))
+		setTimeout(
+			() => {
+				concurrencyGroupsLoading = false
+			},
+			1000 - (endStart - timeStart)
+		)
 	}
 
 	async function deleteConcurrencyGroup(concurrencyGroupId: string) {
@@ -63,10 +66,9 @@
 <CenteredPage>
 	<PageHeader title="Concurrency Groups">
 		<Button
-			color="light"
 			size="md"
 			btnClasses="w-full h-8"
-			variant="border"
+			variant="default"
 			on:click={loadConcurrencyGroupsOnce}
 		>
 			<RefreshCw class={concurrencyGroupsLoading ? 'animate-spin' : ''} size="xs" />Refresh
diff --git a/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte
index 0336a36fd0..8ea6a5069a 100644
--- a/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte
@@ -226,7 +226,8 @@
 		>
 			{#if $userStore?.is_admin || $userStore?.is_super_admin}
 				<Button
-					size="md"
+					unifiedSize="md"
+					variant="accent"
 					startIcon={{ icon: Plus }}
 					on:click={() => emailTriggerEditor?.openNew(false)}
 				>
@@ -270,7 +271,7 @@
 					<Skeleton layout={[[6], 0.4]} />
 				{/each}
 			{:else if !triggers?.length}
-				<div class="text-center text-sm text-tertiary mt-2"> No email triggers </div>
+				<div class="text-center text-sm text-primary mt-2"> No email triggers </div>
 			{:else if items?.length}
 				<div class="border rounded-md divide-y">
 					{#each items.slice(0, nbDisplayed) as { workspace_id, workspaced_local_part, path, edited_by, edited_at, script_path, is_flow, extra_perms, canWrite, marked, local_part } (path)}
@@ -294,7 +295,9 @@
 									onclick={() => emailTriggerEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
-									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+									<div
+										class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate"
+									>
 										{#if marked}
 											<span class="text-xs">
 												{@html marked}
@@ -318,7 +321,7 @@
 								<div class="flex gap-2 items-center justify-end">
 									<Button
 										on:click={() => copyToClipboard(emailAddress)}
-										color="dark"
+										variant="accent"
 										size="xs"
 										startIcon={{ icon: ClipboardCopy }}
 									>
@@ -332,7 +335,7 @@
 											: {
 													icon: Eye
 												}}
-										color="dark"
+										variant="accent"
 									>
 										{canWrite ? 'Edit' : 'View'}
 									</Button>
@@ -404,7 +407,7 @@
 							</div>
 							<div class="w-full flex justify-between items-baseline">
 								<div
-									class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+									class="flex flex-wrap text-[0.7em] text-primary gap-1 items-center justify-end truncate pr-2"
 								>
 									<div class="truncate">edited by {edited_by}</div>
 									<div class="truncate">at {displayDate(edited_at)}</div>
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index f0aa403cbe..84ceabe2b6 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -238,7 +238,7 @@
 				label: 'Fork',
 				buttonProps: {
 					href: `${base}/flows/add?template=${flow.path}`,
-					color: 'light',
+					variant: 'subtle',
 					size: 'xs',
 					startIcon: GitFork
 				}
@@ -254,7 +254,7 @@
 			buttonProps: {
 				href: `${base}/runs/${flow.path}`,
 				size: 'xs',
-				color: 'light',
+				variant: 'subtle',
 				startIcon: Play
 			}
 		})
@@ -262,12 +262,9 @@
 		buttons.push({
 			label: `History`,
 			buttonProps: {
-				onClick: () => {
-					flowHistory?.open()
-				},
-
+				onClick: () => flowHistory?.open(),
 				size: 'xs',
-				color: 'light',
+				variant: 'subtle',
 				startIcon: History
 			}
 		})
@@ -285,9 +282,8 @@
 						$importStore = JSON.parse(JSON.stringify(app))
 						await goto('/apps/add?nodraft=true')
 					},
-
 					size: 'xs',
-					color: 'light',
+					variant: 'accent',
 					startIcon: Columns
 				}
 			})
@@ -296,9 +292,8 @@
 				label: 'Edit',
 				buttonProps: {
 					href: `${base}/flows/edit/${path}?nodraft=true`,
-					variant: 'contained',
+					variant: 'accent-secondary',
 					size: 'xs',
-					color: 'dark',
 					disabled: !can_write,
 					startIcon: Pen
 				}
@@ -650,7 +645,6 @@
 								/>
 								<Toggle
 									bind:checked={jsonView}
-									label="JSON View"
 									size="xs"
 									options={{
 										right: 'JSON',
@@ -693,15 +687,13 @@
 						<div class="py-10"></div>
 
 						{#if !emptyString(flow.summary)}
-							<div class="mb-2">
-								<span class="!text-tertiary">{flow.path}</span>
+							<div>
+								<span class="text-primary text-xs">{flow.path}</span>
 							</div>
 						{/if}
-						<div class="flex flex-row gap-x-2 flex-wrap items-center">
-							<span class="text-sm text-tertiary">
-								Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
-							</span>
-						</div>
+						<span class="text-2xs text-secondary">
+							Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
+						</span>
 					{/if}
 				</div>
 				{#if !chatInputEnabled}
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index 5783f53a74..414ce0f51d 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -100,7 +100,9 @@
 					contentClasses="flex flex-col gap-2 p-4"
 				>
 					{#snippet trigger()}
-						<Button size="md" startIcon={{ icon: Plus }} nonCaptureEvent>New folder</Button>
+						<Button variant="accent" unifiedSize="md" startIcon={{ icon: Plus }} nonCaptureEvent
+							>New folder</Button
+						>
 					{/snippet}
 					{#snippet content({ close })}
 						<input
@@ -112,7 +114,7 @@
 
 						<div>
 							<Button
-								size="md"
+								variant="accent"
 								startIcon={{ icon: Plus }}
 								disabled={!newFolderName}
 								on:click={() => {
@@ -155,7 +157,7 @@
 					{:else}
 						{#if folders.length === 0}
 							<tr>
-								<td colspan="4" class="text-tertiary mt-2">No folders yet, create one!</td>
+								<td colspan="4" class="text-primary mt-2">No folders yet, create one!</td>
 							</tr>
 						{/if}
 
@@ -168,10 +170,10 @@
 								}}
 							>
 								<Cell first>
-									<span class="text-blue-500">{name}</span>
+									<span class="text-emphasis text-xs font-semibold">{name}</span>
 									{#if summary}
 										<br />
-										<span class="text-gray-500">{summary}</span>
+										<span class="text-2xs font-normal text-secondary">{summary}</span>
 									{/if}
 								</Cell>
 								<FolderUsageInfo {name} tabular />
diff --git a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
index 729c615cbf..639ffd3226 100644
--- a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
@@ -290,7 +290,12 @@
 
 <CenteredPage>
 	<PageHeader title="GCP Pub/Sub triggers" tooltip="GCP Pub/Sub trigger">
-		<Button size="md" startIcon={{ icon: Plus }} on:click={() => gcpTriggerEditor?.openNew(false)}>
+		<Button
+			unifiedSize="md"
+			variant="accent"
+			startIcon={{ icon: Plus }}
+			on:click={() => gcpTriggerEditor?.openNew(false)}
+		>
 			New&nbsp;GCP Pub/Sub trigger
 		</Button>
 	</PageHeader>
@@ -308,13 +313,12 @@
 				<ToggleButtonGroup bind:selected={selectedFilterKind}>
 					{#snippet children({ item })}
 						<ToggleButton
-							small
 							value="trigger"
 							label="GCP Pub/Sub trigger"
 							icon={GoogleCloudIcon}
 							{item}
 						/>
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
 			</div>
@@ -337,7 +341,7 @@
 				<Skeleton layout={[[6], 0.4]} />
 			{/each}
 		{:else if !triggers?.length}
-			<div class="text-center text-sm text-tertiary mt-2"> No GCP Pub/Sub triggers </div>
+			<div class="text-center text-sm text-primary mt-2"> No GCP Pub/Sub triggers </div>
 		{:else if items?.length}
 			<div class="border rounded-md divide-y">
 				{#each items.slice(0, nbDisplayed) as { gcp_resource_path, topic_id, workspace_id, delivery_type, path, edited_by, error, edited_at, script_path, is_flow, extra_perms, canWrite, enabled, server_id, subscription_id } (path)}
@@ -357,7 +361,7 @@
 								onclick={() => gcpTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
-								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+								<div class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate">
 									{path} - {topic_id}
 								</div>
 								<div class="text-secondary text-xs truncate text-left font-light">
@@ -427,7 +431,7 @@
 									<Button
 										on:click={() =>
 											copyToClipboard(getHttpRoute('gcp/w', path, true, workspace_id))}
-										color="dark"
+										variant="subtle"
 										size="xs"
 										startIcon={{ icon: ClipboardCopy }}
 									>
@@ -442,7 +446,7 @@
 										: {
 												icon: Eye
 											}}
-									color="dark"
+									variant="subtle"
 								>
 									{canWrite ? 'Edit' : 'View'}
 								</Button>
@@ -525,7 +529,7 @@
 						</div>
 						<div class="w-full flex justify-between items-baseline">
 							<div
-								class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+								class="flex flex-wrap text-[0.7em] text-primary gap-1 items-center justify-end truncate pr-2"
 								><div class="truncate">edited by {edited_by}</div><div class="truncate"
 									>the {displayDate(edited_at)}</div
 								></div
diff --git a/frontend/src/routes/(root)/(logged)/groups/+page.svelte b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
index 6f2d3af892..40cd5d7373 100644
--- a/frontend/src/routes/(root)/(logged)/groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
@@ -11,7 +11,6 @@
 	import GroupInfo from '$lib/components/GroupInfo.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
-	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { userStore, workspaceStore, userWorkspaces } from '$lib/stores'
 	import { canWrite } from '$lib/utils'
 	import { Pen, Plus, Trash } from 'lucide-svelte'
@@ -20,6 +19,8 @@
 	import Cell from '$lib/components/table/Cell.svelte'
 	import Row from '$lib/components/table/Row.svelte'
 	import { untrack } from 'svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
+	import { Tooltip } from '$lib/components/meltComponents'
 
 	type GroupW = Group & { canWrite: boolean }
 
@@ -95,18 +96,23 @@
 						containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 					>
 						{#snippet trigger()}
-							<Button size="md" startIcon={{ icon: Plus }} nonCaptureEvent>New&nbsp;group</Button>
+							<Button unifiedSize="md" variant="accent" startIcon={{ icon: Plus }} nonCaptureEvent
+								>New&nbsp;group</Button
+							>
 						{/snippet}
 						{#snippet content({ close })}
 							<div class="flex-col flex gap-2 p-4">
-								<input
-									class="mr-2"
-									onkeyup={(e) => handleKeyUp(e, close)}
-									placeholder="New group name"
+								<TextInput
+									size="md"
+									inputProps={{
+										placeholder: 'New group name',
+										onkeyup: (e) => handleKeyUp(e, close)
+									}}
 									bind:value={newGroupName}
 								/>
 								<Button
-									size="md"
+									unifiedSize="md"
+									variant="accent"
 									startIcon={{ icon: Plus }}
 									disabled={!newGroupName}
 									on:click={() => {
@@ -153,10 +159,10 @@
 								<Cell first>
 									<div class="flex flex-row gap-2 justify-between">
 										<div>
-											<span class="text-blue-500">{name}</span>
+											<span class="text-emphasis text-xs font-semibold">{name}</span>
 											{#if summary}
 												<br />
-												<span class="text-gray-500">{summary}</span>
+												<span class="text-2xs font-normal text-secondary">{summary}</span>
 											{/if}
 										</div>
 										<SharedBadge {canWrite} extraPerms={extra_perms} />
@@ -200,53 +206,57 @@
 		</div>
 
 		{#if instanceGroups && instanceGroups.length > 0}
-			<PageHeader
-				title="Instance Groups"
-				tooltip="Instance Groups are managed by SCIM and are groups shared by every workspaces"
-				documentationLink="https://www.windmill.dev/docs/misc/saml_and_scim#scim"
-			/>
-			<div class="relative mb-20 pt-8">
-				<TableCustom>
-					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
-						<th>Name</th>
-						<th>Members</th>
-						<th>Workspaces</th>
-					</tr>
-					{#snippet body()}
-						<tbody>
-							{#each instanceGroups ?? [] as { name, emails, workspaces }}
-								<tr>
-									<td>
-										<a
-											href="#{name}"
-											onclick={() => {
-												if (name) {
-													editGroupName = name
-													groupDrawer?.openDrawer()
-												}
-											}}
-											>{name}
-										</a>
-									</td>
-									<td>{emails?.length ?? 0} members</td>
-									<td>
-										{#if workspaces && workspaces.length > 0}
-											{#each workspaces as workspace, index}
-												{#if index > 0}${", "}{/if}<a
-													href="/workspace_settings?tab=users&workspace={workspace.workspace_id}"
-													class="text-blue-500 hover:underline"
-												>{workspace.workspace_id}</a> ({workspace.role})
-											{/each}
-										{:else}
-											<span class="text-tertiary text-sm">No workspaces</span>
-										{/if}
-									</td>
-								</tr>
-							{/each}
-						</tbody>
+			<div class="flex flex-row gap-1 items-center mb-2">
+				<span class="text-emphasis text-sm font-semibold">Instance groups</span>
+				<Tooltip documentationLink="https://www.windmill.dev/docs/misc/saml_and_scim#scim">
+					{#snippet text()}
+						Instance Groups are managed by SCIM and are groups shared by every workspaces
 					{/snippet}
-				</TableCustom>
+				</Tooltip>
+			</div>
+			<div class="relative mb-20">
+				<DataTable>
+					<Head>
+						<tr>
+							<Cell head first>Name</Cell>
+							<Cell head>Members</Cell>
+							<Cell head last>Workspaces</Cell>
+						</tr>
+					</Head>
+					<tbody class="divide-y">
+						{#each instanceGroups ?? [] as { name, emails, workspaces }}
+							<Row>
+								<Cell first>
+									<a
+										href="#{name}"
+										onclick={() => {
+											if (name) {
+												editGroupName = name
+												groupDrawer?.openDrawer()
+											}
+										}}
+										>{name}
+									</a>
+								</Cell>
+								<Cell>{emails?.length ?? 0} members</Cell>
+								<Cell last>
+									{#if workspaces && workspaces.length > 0}
+										{#each workspaces as workspace, index}
+											{#if index > 0}${', '}{/if}<a
+												href="/workspace_settings?tab=users&workspace={workspace.workspace_id}"
+											>
+												{workspace.workspace_id}
+											</a>
+											({workspace.role})
+										{/each}
+									{:else}
+										<span class="text-emphasis font-semibold text-xs">No workspaces</span>
+									{/if}
+								</Cell>
+							</Row>
+						{/each}
+					</tbody>
+				</DataTable>
 			</div>
 		{/if}
 	</CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
index 2cf7f4d0c0..2ddd4f66c6 100644
--- a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
@@ -105,8 +105,8 @@
 							<td>{emails?.length ?? 0} members</td>
 							<td
 								><Button
-									color="red"
-									variant="border"
+									variant="default"
+									destructive
 									on:click={async () => {
 										await GroupService.deleteInstanceGroup({ name })
 										sendUserToast(`Instance group ${name} deleted`)
diff --git a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
index 047eaa00be..20d9c725d6 100644
--- a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
@@ -264,7 +264,8 @@
 			tooltip="Windmill can consume kafka events and trigger scripts or flows based on them."
 		>
 			<Button
-				size="md"
+				unifiedSize="md"
+				variant="accent"
 				startIcon={{ icon: Plus }}
 				on:click={() => kafkaTriggerEditor?.openNew(false)}
 			>
@@ -290,8 +291,8 @@
 					<div class="text-sm shrink-0"> Filter by path of </div>
 					<ToggleButtonGroup bind:selected={selectedFilterKind}>
 						{#snippet children({ item })}
-							<ToggleButton small value="trigger" label="Kafka trigger" icon={KafkaIcon} {item} />
-							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+							<ToggleButton value="trigger" label="Kafka trigger" icon={KafkaIcon} {item} />
+							<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 						{/snippet}
 					</ToggleButtonGroup>
 				</div>
@@ -314,7 +315,7 @@
 					<Skeleton layout={[[6], 0.4]} />
 				{/each}
 			{:else if !triggers?.length}
-				<div class="text-center text-sm text-tertiary mt-2"> No Kafka triggers </div>
+				<div class="text-center text-sm text-primary mt-2"> No Kafka triggers </div>
 			{:else if items?.length}
 				<div class="border rounded-md divide-y">
 					{#each items.slice(0, nbDisplayed) as { path, edited_by, edited_at, script_path, is_flow, kafka_resource_path, topics, extra_perms, canWrite, marked, server_id, error, last_server_ping, enabled } (path)}
@@ -334,7 +335,9 @@
 									onclick={() => kafkaTriggerEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
-									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+									<div
+										class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate"
+									>
 										{#if marked}
 											<span class="text-xs">
 												{@html marked}
@@ -405,17 +408,18 @@
 								<div class="flex gap-2 items-center justify-end">
 									<Button
 										on:click={() => kafkaTriggerEditor?.openEdit(path, is_flow)}
-										size="xs"
+										unifiedSize="md"
 										startIcon={canWrite
 											? { icon: Pen }
 											: {
 													icon: Eye
 												}}
-										color="dark"
+										variant="subtle"
 									>
 										{canWrite ? 'Edit' : 'View'}
 									</Button>
 									<Dropdown
+										size="md"
 										items={[
 											{
 												displayName: `View ${is_flow ? 'Flow' : 'Script'}`,
@@ -477,8 +481,8 @@
 							</div>
 							<div class="w-full flex justify-between items-baseline">
 								<div
-									class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
-									><div class="truncate">edited by {edited_by}</div><div class="truncate"
+									class="flex flex-wrap text-2xs font-normal text-secondary gap-1 items-center justify-end truncate pr-2"
+									><div class="truncate">Edited by {edited_by}</div><div class="truncate"
 										>the {displayDate(edited_at)}</div
 									></div
 								></div
diff --git a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
index c47efd26a1..399e1c4a19 100644
--- a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
@@ -251,7 +251,12 @@
 		title="MQTT triggers"
 		tooltip="Windmill can connect to an MQTT broker, subscribe to specific topics, and trigger scripts or flows based on those topics."
 	>
-		<Button size="md" startIcon={{ icon: Plus }} on:click={() => mqttTriggerEditor?.openNew(false)}>
+		<Button
+			unifiedSize="md"
+			variant="accent"
+			startIcon={{ icon: Plus }}
+			on:click={() => mqttTriggerEditor?.openNew(false)}
+		>
 			New&nbsp;MQTT trigger
 		</Button>
 	</PageHeader>
@@ -274,8 +279,8 @@
 				<div class="text-sm shrink-0"> Filter by path of </div>
 				<ToggleButtonGroup bind:selected={selectedFilterKind}>
 					{#snippet children({ item })}
-						<ToggleButton small value="trigger" label="MQTT trigger" icon={MqttIcon} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						<ToggleButton value="trigger" label="MQTT trigger" icon={MqttIcon} {item} />
+						<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
 			</div>
@@ -298,7 +303,7 @@
 				<Skeleton layout={[[6], 0.4]} />
 			{/each}
 		{:else if !triggers?.length}
-			<div class="text-center text-sm text-tertiary mt-2"> No MQTT triggers </div>
+			<div class="text-center text-sm text-primary mt-2"> No MQTT triggers </div>
 		{:else if items?.length}
 			<div class="border rounded-md divide-y">
 				{#each items.slice(0, nbDisplayed) as { path, edited_by, edited_at, script_path, is_flow, extra_perms, canWrite, error, last_server_ping, server_id, enabled } (path)}
@@ -318,7 +323,7 @@
 								onclick={() => mqttTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
-								<div class="text-secondary text-xs truncate text-left font-light">
+								<div class="text-emphasis font-semibold text-xs truncate text-left">
 									{path}
 								</div>
 								<div class="text-secondary text-xs truncate text-left font-light">
@@ -379,13 +384,13 @@
 							<div class="flex gap-2 items-center justify-end">
 								<Button
 									on:click={() => mqttTriggerEditor?.openEdit(path, is_flow)}
-									size="xs"
+									unifiedSize="md"
 									startIcon={canWrite
 										? { icon: Pen }
 										: {
 												icon: Eye
 											}}
-									color="dark"
+									variant="subtle"
 								>
 									{canWrite ? 'Edit' : 'View'}
 								</Button>
@@ -451,7 +456,7 @@
 						</div>
 						<div class="w-full flex justify-between items-baseline">
 							<div
-								class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+								class="flex flex-wrap text-[0.7em] text-primary gap-1 items-center justify-end truncate pr-2"
 								><div class="truncate">edited by {edited_by}</div><div class="truncate"
 									>the {displayDate(edited_at)}</div
 								></div
diff --git a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
index acfc9bbf1b..0d1013a649 100644
--- a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
@@ -263,7 +263,8 @@
 			tooltip="Windmill can consume NATS events and trigger scripts or flows based on them."
 		>
 			<Button
-				size="md"
+				unifiedSize="md"
+				variant="accent"
 				startIcon={{ icon: Plus }}
 				on:click={() => natsTriggerEditor?.openNew(false)}
 			>
@@ -285,12 +286,12 @@
 					bind:value={filter}
 					class="search-item"
 				/>
-				<div class="flex flex-row items-center gap-2 mt-6">
-					<div class="text-sm shrink-0"> Filter by path of </div>
+				<div class="flex flex-row items-center gap-2 mt-2">
+					<div class="text-xs font-semibold text-emphasis shrink-0"> Filter by path of </div>
 					<ToggleButtonGroup bind:selected={selectedFilterKind}>
 						{#snippet children({ item })}
-							<ToggleButton small value="trigger" label="NATS trigger" icon={NatsIcon} {item} />
-							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+							<ToggleButton value="trigger" label="NATS trigger" icon={NatsIcon} {item} />
+							<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 						{/snippet}
 					</ToggleButtonGroup>
 				</div>
@@ -313,7 +314,7 @@
 					<Skeleton layout={[[6], 0.4]} />
 				{/each}
 			{:else if !triggers?.length}
-				<div class="text-center text-sm text-tertiary mt-2"> No NATS triggers </div>
+				<div class="text-center text-sm text-primary mt-2"> No NATS triggers </div>
 			{:else if items?.length}
 				<div class="border rounded-md divide-y">
 					{#each items.slice(0, nbDisplayed) as { path, edited_by, edited_at, script_path, is_flow, nats_resource_path, subjects, extra_perms, canWrite, marked, server_id, error, last_server_ping, enabled } (path)}
@@ -333,7 +334,9 @@
 									onclick={() => natsTriggerEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
-									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+									<div
+										class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate"
+									>
 										{#if marked}
 											<span class="text-xs">
 												{@html marked}
@@ -404,13 +407,13 @@
 								<div class="flex gap-2 items-center justify-end">
 									<Button
 										on:click={() => natsTriggerEditor?.openEdit(path, is_flow)}
-										size="xs"
+										unifiedSize="md"
 										startIcon={canWrite
 											? { icon: Pen }
 											: {
 													icon: Eye
 												}}
-										color="dark"
+										variant="subtle"
 									>
 										{canWrite ? 'Edit' : 'View'}
 									</Button>
@@ -476,7 +479,7 @@
 							</div>
 							<div class="w-full flex justify-between items-baseline">
 								<div
-									class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+									class="flex flex-wrap text-2xs text-secondary gap-1 items-center justify-end truncate pr-2"
 									><div class="truncate">edited by {edited_by}</div><div class="truncate"
 										>the {displayDate(edited_at)}</div
 									></div
diff --git a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
index 600110ddff..15939ba62e 100644
--- a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
@@ -40,6 +40,7 @@
 	import { ALL_DEPLOYABLE, isDeployable } from '$lib/utils_deployable'
 	import DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	type TriggerD = PostgresTrigger & { canWrite: boolean }
 
@@ -318,7 +319,8 @@
 		tooltip="Windmill enables real-time responsiveness by listening to specific database transactions—such as inserts, updates, and deletes—and automatically triggering scripts or workflows in response."
 	>
 		<Button
-			size="md"
+			unifiedSize="md"
+			variant="accent"
 			startIcon={{ icon: Plus }}
 			on:click={() => postgresTriggerEditor?.openNew(false)}
 		>
@@ -334,18 +336,19 @@
 	{/if}
 	<div class="w-full h-full flex flex-col">
 		<div class="w-full pb-4 pt-6">
-			<input
-				type="text"
-				placeholder="Search Postgres triggers"
+			<TextInput
+				inputProps={{
+					placeholder: 'Search Postgres triggers',
+					class: 'search-item'
+				}}
 				bind:value={filter}
-				class="search-item"
 			/>
-			<div class="flex flex-row items-center gap-2 mt-6">
-				<div class="text-sm shrink-0"> Filter by path of </div>
+			<div class="flex flex-row items-center gap-2 mt-2">
+				<div class="text-xs font-semibold text-emphasis shrink-0"> Filter by path of </div>
 				<ToggleButtonGroup bind:selected={selectedFilterKind}>
 					{#snippet children({ item })}
-						<ToggleButton small value="trigger" label="Postgres trigger" icon={Database} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						<ToggleButton value="trigger" label="Postgres trigger" icon={Database} {item} />
+						<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
 			</div>
@@ -368,7 +371,7 @@
 				<Skeleton layout={[[6], 0.4]} />
 			{/each}
 		{:else if !triggers?.length}
-			<div class="text-center text-sm text-tertiary mt-2"> No postgres triggers </div>
+			<div class="text-center text-sm text-primary mt-2"> No postgres triggers </div>
 		{:else if items?.length}
 			<div class="border rounded-md divide-y">
 				{#each items.slice(0, nbDisplayed) as { postgres_resource_path, publication_name, replication_slot_name, path, edited_by, error, edited_at, script_path, is_flow, extra_perms, canWrite, enabled, server_id } (path)}
@@ -388,7 +391,7 @@
 								onclick={() => postgresTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
-								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+								<div class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate">
 									{path}
 								</div>
 								<div class="text-secondary text-xs truncate text-left font-light">
@@ -456,7 +459,7 @@
 										: {
 												icon: Eye
 											}}
-									color="dark"
+									variant="subtle"
 								>
 									{canWrite ? 'Edit' : 'View'}
 								</Button>
@@ -548,7 +551,7 @@
 						</div>
 						<div class="w-full flex justify-between items-baseline">
 							<div
-								class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+								class="flex flex-wrap text-[0.7em] text-primary gap-1 items-center justify-end truncate pr-2"
 								><div class="truncate">edited by {edited_by}</div><div class="truncate"
 									>the {displayDate(edited_at)}</div
 								></div
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 252e401e83..a5f7269f11 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -43,6 +43,7 @@
 
 	import { convert } from '@redocly/json-to-json-schema'
 	import {
+		Boxes,
 		Braces,
 		Building,
 		Circle,
@@ -616,8 +617,7 @@
 						<Button
 							on:click={openInferrer}
 							size="sm"
-							color="light"
-							variant="border"
+							variant="default"
 							startIcon={{ icon: Braces }}
 						>
 							Infer schema from a json value
@@ -655,8 +655,8 @@
 		>
 			<div class="flex flex-row justify-end gap-4">
 				<Button
-					variant="border"
-					size="md"
+					variant="default"
+					unifiedSize="md"
 					startIcon={{ icon: Plus }}
 					on:click={startNewType}
 					aiId="resources-add-resource-type"
@@ -665,8 +665,9 @@
 					Add resource type
 				</Button>
 				<Button
-					size="md"
-					startIcon={{ icon: Link }}
+					unifiedSize="md"
+					variant="accent"
+					startIcon={{ icon: Boxes }}
 					on:click={() => appConnect?.open?.()}
 					aiId="resources-add-resource"
 					aiDescription="Add resource"
@@ -689,57 +690,47 @@
 					}
 				}}
 			>
-				<Tab size="md" value="workspace">
-					<div class="flex gap-2 items-center my-1">
-						<Building size={18} />
-						Workspace
-					</div>
-				</Tab>
-				<Tab size="md" value="types">
-					<div class="flex gap-2 items-center my-1">
-						Resource Types
+				<Tab value="workspace" label="Workspace" icon={Building} />
+				<Tab value="types" label="Resource Types">
+					{#snippet extra()}
 						<Tooltip
 							documentationLink="https://www.windmill.dev/docs/core_concepts/resources_and_types"
 						>
 							Every resource has a Resource Type attached to it which contains its schema and make
 							it easy in scripts and flows to accept only resources of a specific resource type.
 						</Tooltip>
-					</div>
+					{/snippet}
 				</Tab>
-				<Tab size="md" value="states">
-					<div class="flex gap-2 items-center my-1">
-						States
+				<Tab value="states" label="States">
+					{#snippet extra()}
 						<Tooltip>
 							States are actually resources (but excluded from the Workspace tab for clarity).
 							States are used by scripts to keep data persistent between runs of the same script by
 							the same trigger (schedule or user)
 						</Tooltip>
-					</div>
+					{/snippet}
 				</Tab>
-				<Tab size="md" value="cache">
-					<div class="flex gap-2 items-center my-1">
-						Cache
+				<Tab value="cache" label="Cache">
+					{#snippet extra()}
 						<Tooltip>
 							Cached results are actually resources (but excluded from the Workspace tab for
 							clarity). Cache are used by flows's step to cache result to avoid recomputing
 							unnecessarily
 						</Tooltip>
-					</div>
+					{/snippet}
 				</Tab>
-				<Tab size="md" value="theme">
-					<div class="flex gap-2 items-center my-1">
-						Theme
+				<Tab value="theme" label="Theme">
+					{#snippet extra()}
 						<Tooltip>
 							Theme are actually resources (but excluded from the Workspace tab for clarity). Theme
 							are used by the apps to customize their look and feel.
 						</Tooltip>
-					</div>
+					{/snippet}
 				</Tab>
 			</Tabs>
 			<div class="flex">
 				<Button
-					variant="border"
-					color="light"
+					variant="default"
 					on:click={reload}
 					startIcon={{
 						icon: RotateCw,
@@ -772,8 +763,8 @@
 					{/each}
 				{:else if filteredItems?.length == 0}
 					<div class="flex flex-col items-center justify-center h-full">
-						<div class="text-md font-medium">No resources found</div>
-						<div class="text-sm text-secondary">
+						<div class="text-xs text-emphasis font-semibold">No resources found</div>
+						<div class="text-2xs text-secondary font-normal">
 							Try changing the filters or creating a new resource
 						</div>
 					</div>
@@ -834,7 +825,7 @@
 											</a>
 										</Cell>
 										<Cell>
-											<span class="text-tertiary text-xs">
+											<span class="text-primary text-xs">
 												{removeMarkdown(truncate(description ?? '', 30))}
 											</span>
 										</Cell>
@@ -1041,7 +1032,7 @@
 											</a>
 										</Cell>
 										<Cell>
-											<span class="text-tertiary text-xs w-96 flex flex-wrap whitespace-pre-wrap">
+											<span class="text-primary text-xs w-96 flex flex-wrap whitespace-pre-wrap">
 												{removeMarkdown(truncate(description ?? '', 200))}
 											</span>
 										</Cell>
@@ -1058,11 +1049,11 @@
 												<div class="flex flex-row-reverse gap-2">
 													<Button
 														size="xs"
-														color="red"
-														variant="border"
+														variant="default"
 														btnClasses="border-0"
 														startIcon={{ icon: Trash }}
 														on:click={() => handleDeleteResourceType(name)}
+														destructive
 													>
 														Delete
 													</Button>
diff --git a/frontend/src/routes/(root)/(logged)/routes/+page.svelte b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
index d03ae50ff5..3312b2741f 100644
--- a/frontend/src/routes/(root)/(logged)/routes/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
@@ -233,7 +233,8 @@
 			{#if $userStore?.is_admin || $userStore?.is_super_admin}
 				<div class="flex flex-row gap-2">
 					<Button
-						size="md"
+						unifiedSize="md"
+						variant="default"
 						startIcon={{ icon: Plus }}
 						on:click={() => {
 							routesGenerator?.openDrawer()
@@ -242,7 +243,8 @@
 						From OpenAPI spec
 					</Button>
 					<Button
-						size="md"
+						unifiedSize="md"
+						variant="default"
 						startIcon={{ icon: Plus }}
 						on:click={() => {
 							openAPISpecGenerator?.openDrawer()
@@ -250,7 +252,12 @@
 					>
 						To OpenAPI spec
 					</Button>
-					<Button size="md" startIcon={{ icon: Plus }} on:click={() => routeEditor?.openNew(false)}>
+					<Button
+						unifiedSize="md"
+						variant="accent"
+						startIcon={{ icon: Plus }}
+						on:click={() => routeEditor?.openNew(false)}
+					>
 						New&nbsp;route
 					</Button>
 				</div>
@@ -259,12 +266,12 @@
 		<div class="w-full h-full flex flex-col">
 			<div class="w-full pb-4 pt-6">
 				<input type="text" placeholder="Search routes" bind:value={filter} class="search-item" />
-				<div class="flex flex-row items-center gap-2 mt-6">
-					<div class="text-sm shrink-0"> Filter by path of </div>
+				<div class="flex flex-row items-center gap-2 mt-2">
+					<div class="text-xs font-semibold text-emphasis shrink-0"> Filter by path of </div>
 					<ToggleButtonGroup bind:selected={selectedFilterKind}>
 						{#snippet children({ item })}
-							<ToggleButton small value="trigger" label="Route" icon={Route} {item} />
-							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+							<ToggleButton value="trigger" label="Route" icon={Route} {item} />
+							<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 						{/snippet}
 					</ToggleButtonGroup>
 				</div>
@@ -287,17 +294,17 @@
 					<Skeleton layout={[[6], 0.4]} />
 				{/each}
 			{:else if !triggers?.length}
-				<div class="text-center text-sm text-tertiary mt-2"> No routes </div>
+				<div class="text-center text-sm font-semibold text-emphasis mt-2"> No routes </div>
 			{:else if items?.length}
 				<div class="border rounded-md divide-y">
 					{#each items.slice(0, nbDisplayed) as { workspace_id, workspaced_route, path, edited_by, edited_at, script_path, route_path, is_flow, extra_perms, canWrite, marked, http_method, static_asset_config } (path)}
 						{@const href = `${is_flow ? '/flows/get' : '/scripts/get'}/${script_path}`}
 
 						<div
-							class="hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
+							class="bg-surface-tertiary hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
 				first-of-type:rounded-t-md last-of-type:rounded-b-md flex flex-col"
 						>
-							<div class="w-full flex gap-5 items-center">
+							<div class="w-full flex gap-4 items-center">
 								<RowIcon kind={is_flow ? 'flow' : 'script'} />
 
 								<a
@@ -305,7 +312,9 @@
 									onclick={() => routeEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
-									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+									<div
+										class="text-emphasis font-semibold flex-wrap text-left text-xs mb-1 truncate"
+									>
 										{#if marked}
 											<span class="text-xs">
 												{@html marked}
@@ -317,10 +326,10 @@
 												: route_path}
 										{/if}
 									</div>
-									<div class="text-secondary text-xs truncate text-left font-light">
+									<div class="text-secondary text-xs truncate text-left font-normal">
 										{path}
 									</div>
-									<div class="text-secondary text-xs truncate text-left font-light">
+									<div class="text-secondary text-xs truncate text-left font-normal">
 										{#if static_asset_config}
 											file: {static_asset_config.s3}
 										{:else}
@@ -339,25 +348,26 @@
 											copyToClipboard(
 												getHttpRoute('r', route_path, workspaced_route ?? false, workspace_id)
 											)}
-										color="dark"
-										size="xs"
+										variant="subtle"
+										unifiedSize="md"
 										startIcon={{ icon: ClipboardCopy }}
 									>
 										Copy URL
 									</Button>
 									<Button
 										on:click={() => routeEditor?.openEdit(path, is_flow)}
-										size="xs"
+										unifiedSize="md"
 										startIcon={canWrite
 											? { icon: Pen }
 											: {
 													icon: Eye
 												}}
-										color="dark"
+										variant="subtle"
 									>
 										{canWrite ? 'Edit' : 'View'}
 									</Button>
 									<Dropdown
+										size="md"
 										items={[
 											{
 												displayName: `View ${is_flow ? 'Flow' : 'Script'}`,
@@ -423,9 +433,9 @@
 									/>
 								</div>
 							</div>
-							<div class="w-full flex justify-between items-baseline">
+							<div class="w-full flex justify-end items-baseline">
 								<div
-									class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+									class="flex flex-wrap text-2xs font-normal text-secondary gap-1 items-center justify-end truncate pr-2"
 								>
 									<div class="truncate">edited by {edited_by}</div>
 									<div class="truncate">at {displayDate(edited_at)}</div>
@@ -439,9 +449,11 @@
 			{/if}
 		</div>
 		{#if items && items?.length > 15 && nbDisplayed < items.length}
-			<span class="text-xs"
+			<span class="text-xs font-normal text-primary"
 				>{nbDisplayed} items out of {items.length}
-				<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
+				<button class="ml-4 font-semibold text-emphasis" onclick={() => (nbDisplayed += 30)}
+					>load 30 more</button
+				></span
 			>
 		{/if}
 	</CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index f04879339b..b9bcfe9a6a 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -42,8 +42,8 @@
 		XCircle,
 		Code2,
 		ClipboardCopy,
-		MoreVertical,
-		GitBranch
+		GitBranch,
+		EllipsisVertical
 	} from 'lucide-svelte'
 
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
@@ -84,7 +84,6 @@
 	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
 
 	import ExecutionDuration from '$lib/components/ExecutionDuration.svelte'
-	import CustomPopover from '$lib/components/CustomPopover.svelte'
 	import { isWindmillTooBigObject } from '$lib/components/job_args'
 	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
 	import { setContext, untrack } from 'svelte'
@@ -95,6 +94,7 @@
 	import JobAssetsViewer from '$lib/components/assets/JobAssetsViewer.svelte'
 	import { page } from '$app/state'
 	import RunBadges from '$lib/components/runs/RunBadges.svelte'
+	import { twMerge } from 'tailwind-merge'
 	let job: (Job & { result?: any; result_stream?: string }) | undefined = $state()
 	let jobUpdateLastFetch: Date | undefined = $state()
 
@@ -412,8 +412,8 @@
 							copyToClipboard(
 								JSON.stringify(removeSensitiveInfos(debugContent, redactSensitive), null, 4)
 							)}
-						color="light"
-						size="xs"
+						unifiedSize="md"
+						variant="subtle"
 					>
 						<div class="flex gap-2 items-center">Copy <ClipboardCopy /> </div>
 					</Button>
@@ -449,13 +449,16 @@
 {#if notfound || (job?.workspace_id != undefined && $workspaceStore != undefined && job?.workspace_id != $workspaceStore)}
 	<div class="max-w-7xl px-4 mx-auto w-full">
 		<div class="flex flex-col gap-6">
-			<h1 class="text-red-400 mt-6">Job {page.params.run} not found in {$workspaceStore}</h1>
-			<h2>Are you in the right workspace?</h2>
+			<h1 class="text-red-400 mt-6 text-2xl font-semibold"
+				>Job {page.params.run} not found in {$workspaceStore}</h1
+			>
+			<h2 class="text-primary text-lg font-semibold">Are you in the right workspace?</h2>
 			<div class="flex flex-col gap-2">
 				{#each $userWorkspaces as workspace}
 					<div>
 						<Button
-							variant="border"
+							variant="default"
+							unifiedSize="md"
 							on:click={() => {
 								goto(`/run/${page.params.run}?workspace=${workspace.id}`)
 							}}
@@ -465,7 +468,7 @@
 					</div>
 				{/each}
 				<div>
-					<Button href="{base}/runs">Go to runs page</Button>
+					<Button href="{base}/runs" unifiedSize="md" variant="default">Go to runs page</Button>
 				</div>
 			</div>
 		</div>
@@ -494,17 +497,11 @@
 						]}
 					>
 						{#snippet buttonReplacement()}
-							<Button nonCaptureEvent variant="border" size="sm" startIcon={{ icon: Trash }} />
+							<Button nonCaptureEvent variant="default" size="sm" startIcon={{ icon: Trash }} />
 						{/snippet}
 					</Dropdown>
 					{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
-						<Button
-							href={runsHref}
-							variant="border"
-							color="blue"
-							size="sm"
-							startIcon={{ icon: List }}
-						>
+						<Button href={runsHref} variant="default" size="sm" startIcon={{ icon: List }}>
 							View runs
 						</Button>
 					{/if}
@@ -529,9 +526,9 @@
 						class="h-auto"
 					>
 						{#snippet buttonReplacement()}
-							<Button nonCaptureEvent size="xs" color="light">
+							<Button nonCaptureEvent unifiedSize="md" variant="subtle">
 								<div class="flex flex-row items-center">
-									<MoreVertical size={14} />
+									<EllipsisVertical size={14} />
 								</div>
 							</Button>
 						{/snippet}
@@ -540,9 +537,8 @@
 			{/if}
 			{#if isFlowPreview(job?.job_kind) || isScriptPreview(job?.job_kind)}
 				<Button
-					color="dark"
-					size="md"
-					variant="border"
+					unifiedSize="md"
+					variant="default"
 					startIcon={{ icon: GitBranch }}
 					on:click={forkPreview}
 				>
@@ -551,8 +547,8 @@
 			{/if}
 			{#if persistentScriptDefinition !== undefined}
 				<Button
-					color="blue"
-					size="md"
+					unifiedSize="md"
+					variant="default"
 					startIcon={{ icon: Activity }}
 					on:click={() => {
 						persistentScriptDrawer?.open?.(persistentScriptDefinition)
@@ -564,8 +560,9 @@
 			{#if job && job?.type != 'CompletedJob' && (!job?.schedule_path || job?.['running'] == true)}
 				{#if !forceCancel}
 					<Button
-						color="red"
-						size="md"
+						unifiedSize="md"
+						variant="accent"
+						destructive
 						startIcon={{ icon: TimerOff }}
 						on:click|once={() => {
 							if (job?.id) {
@@ -580,8 +577,9 @@
 					</Button>
 				{:else}
 					<Button
-						color="red"
-						size="md"
+						unifiedSize="md"
+						variant="accent"
+						destructive
 						startIcon={{ icon: TimerOff }}
 						on:click|once={() => {
 							if (job?.id) {
@@ -595,7 +593,8 @@
 			{/if}
 			{#if job?.schedule_path}
 				<Button
-					size="sm"
+					unifiedSize="md"
+					variant="default"
 					on:click={() => {
 						if (!job || !job.schedule_path) {
 							return
@@ -611,8 +610,8 @@
 						title={`Re-start this flow from step ${selectedJobStep} (included). ${
 							!$enterpriseLicense ? ' This is a feature only available in enterprise edition.' : ''
 						}`}
-						variant="border"
-						color="blue"
+						variant="default"
+						unifiedSize="md"
 						disabled={!$enterpriseLicense}
 						on:click|once={() => {
 							restartFlow(job?.id, selectedJobStep, 0)
@@ -639,8 +638,8 @@
 										? ' This is a feature only available in enterprise edition.'
 										: ''
 								}`}
-								variant="border"
-								color="blue"
+								variant="default"
+								unifiedSize="md"
 								disabled={!$enterpriseLicense}
 								startIcon={{ icon: RefreshCw }}
 								nonCaptureEvent={true}
@@ -653,7 +652,7 @@
 						{/snippet}
 						{#snippet content()}
 							<label class="block text-primary">
-								<div class="pb-1 text-sm text-secondary"
+								<div class="pb-1 text-xs font-semibold text-emphasis"
 									>{selectedJobStepType == 'forloop' ? 'From iteration #:' : 'From branch:'}</div
 								>
 								<div class="flex w-full">
@@ -678,8 +677,8 @@
 									{/if}
 
 									<Button
-										size="xs"
-										color="blue"
+										unifiedSize="md"
+										variant="accent"
 										buttonType="button"
 										btnClasses="!p-1 !w-[34px] !ml-1"
 										aria-label="Restart flow"
@@ -696,23 +695,23 @@
 				{/if}
 			{/if}
 			{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
-				<CustomPopover noPadding appearTimeout={0}>
-					<Button
-						on:click|once={() => {
-							goto(viewHref + `#${computeSharableHash(job?.args)}`)
-						}}
-						color="blue"
-						size="sm"
-						startIcon={{ icon: RefreshCw }}>Run again</Button
-					>
-					{#snippet overlay()}
-						<div class="flex flex-row gap-2">
-							<Button size="xs" loading={runImmediatelyLoading} on:click={() => runImmediately()}>
-								Run immediately with same args
-							</Button>
-						</div>
-					{/snippet}
-				</CustomPopover>
+				<Button
+					on:click|once={() => {
+						goto(viewHref + `#${computeSharableHash(job?.args)}`)
+					}}
+					unifiedSize="md"
+					variant="default"
+					startIcon={{ icon: RefreshCw }}
+					loading={runImmediatelyLoading}
+					dropdownItems={[
+						{
+							label: 'Run immediately with same args',
+							onClick: () => runImmediately()
+						}
+					]}
+				>
+					Run again
+				</Button>
 			{/if}
 			{#if job?.job_kind === 'script' || job?.job_kind === 'flow'}
 				{#if !$userStore?.operator}
@@ -722,7 +721,8 @@
 								$initialArgsStore = job?.args
 								goto(`${stem}/edit/${job?.script_path}${isScript ? `` : `?nodraft=true`}`)
 							}}
-							color="blue"
+							unifiedSize="md"
+							variant="default"
 							size="sm"
 							startIcon={{ icon: Pen }}>Edit</Button
 						>
@@ -730,8 +730,8 @@
 				{/if}
 				<Button
 					href={viewHref}
-					color="blue"
-					size="sm"
+					unifiedSize="md"
+					variant="accent"
 					startIcon={{
 						icon:
 							job?.job_kind === 'script' ? Code2 : job?.job_kind === 'flow' ? BarsStaggered : Code2
@@ -743,29 +743,32 @@
 		{/snippet}
 	</ActionRow>
 	<div class="w-full">
-		<h1
+		<div
 			class="flex flex-row flex-wrap justify-between items-center gap-x-4 py-6 max-w-7xl mx-auto px-4"
 		>
 			<div class="flex flex-row flex-wrap gap-6 items-center">
 				{#if job}
 					{#if 'success' in job && job.success}
 						{#if job.is_skipped}
-							<FastForward class="text-green-600" size={14} />
+							<FastForward class="text-green-600" size={20} />
 						{:else}
-							<CheckCircle2 class="text-green-600" size={14} />
+							<CheckCircle2 class="text-green-600" size={20} />
 						{/if}
 					{:else if job && 'success' in job}
-						<XCircle class="text-red-700" size={14} />
+						<XCircle class="text-red-700" size={20} />
 					{:else if job && 'running' in job && job.running && job.suspend}
-						<Hourglass class="text-violet-500" size={14} />
+						<Hourglass class="text-violet-500" size={20} />
 					{:else if job && 'running' in job && job.running}
-						<Circle class="text-yellow-500 fill-current" size={14} />
+						<Circle class="text-yellow-500 fill-current" size={20} />
 					{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
-						<Calendar class="text-secondary" size={14} />
+						<Calendar class="text-secondary" size={20} />
 					{:else if job && 'running' in job && job.scheduled_for}
-						<Hourglass class="text-tertiary" size={14} />
+						<Hourglass class="text-primary" size={20} />
 					{/if}
-					{job.script_path ?? (job.job_kind == 'dependencies' ? 'lock dependencies' : 'No path')}
+					<span class="text-emphasis text-2xl font-semibold"
+						>{job.script_path ??
+							(job.job_kind == 'dependencies' ? 'lock dependencies' : 'No path')}</span
+					>
 					<div class="flex flex-row gap-2 items-center flex-wrap">
 						<RunBadges
 							{job}
@@ -774,11 +777,12 @@
 								persistentScriptDrawer?.open?.(persistentScriptDefinition)
 							}}
 							{concurrencyKey}
+							verySmall={false}
 						/>
 					</div>
 				{/if}
 			</div>
-		</h1>
+		</div>
 		{#if job?.['deleted']}
 			<div class="max-w-7xl mx-auto w-full px-4">
 				<Alert type="error" title="Deleted">
@@ -818,7 +822,7 @@
 									localStorage.setItem('hideExplicitProgressTip', 'true')
 									showExplicitProgressTip = false
 								}}
-								class="absolute m-2 top-0 right-0 inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
+								class="absolute m-2 top-0 right-0 inline-flex rounded-md bg-surface-secondary text-primary hover:text-primary focus:outline-none"
 							>
 								<span class="sr-only">Close</span>
 								<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -861,18 +865,23 @@
 							manuallySetLogs = value == 'logs'
 						}}
 					>
-						<Tab value="result">Result</Tab>
-						<Tab value="logs">Logs</Tab>
-						<Tab value="stats">Metrics</Tab>
-						<Tab value="assets">Assets</Tab>
+						<Tab value="result" label="Result" />
+						<Tab value="logs" label="Logs" />
+						<Tab value="stats" label="Metrics" />
+						<Tab value="assets" label="Assets" />
 						{#if isScriptPreview(job?.job_kind)}
-							<Tab value="code">Code</Tab>
+							<Tab value="code" label="Code" />
 						{/if}
 					</Tabs>
 
 					<Skeleton loading={!job} layout={[[5]]} />
 					{#if job}
-						<div class="flex flex-row border rounded-md p-2 mt-2 overflow-auto min-h-[600px]">
+						<div
+							class={twMerge(
+								'flex flex-row border rounded-md p-2 mt-2 overflow-auto min-h-[600px]',
+								viewTab == 'logs' ? 'bg-surface-secondary' : 'bg-surface-tertiary'
+							)}
+						>
 							{#if viewTab == 'logs'}
 								<div class="w-full">
 									<LogViewer
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index f891ea0a9f..0ccba41b67 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -953,7 +953,7 @@
 						{#if minTs || maxTs}
 							<input
 								type="text"
-								class="!text-sm text-tertiary !bg-surface-secondary h-9 !border-none"
+								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
 								value={minTs ? new Date(minTs).toLocaleString() : 'zoom x axis to set min'}
 								disabled
 								name="min-datetimes"
@@ -985,7 +985,7 @@
 						{#if maxTs || minTs}
 							<input
 								type="text"
-								class="!text-sm text-tertiary !bg-surface-secondary h-9 !border-none"
+								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
 								value={maxTs ? new Date(maxTs).toLocaleString() : 'zoom x axis to set max'}
 								name="max-datetimes"
 								disabled
@@ -1015,15 +1015,13 @@
 
 					{#if minTs || maxTs}
 						<RunOption label="Reset" for="reset" noLabel>
-							<Button color="light" variant="border" size="xs" onClick={reset} btnClasses="h-9">
-								Reset
-							</Button>
+							<Button variant="default" size="xs" onClick={reset} btnClasses="h-9">Reset</Button>
 						</RunOption>
 					{/if}
 				</div>
 
 				<!-- Filters 1 -->
-				<div class="flex flex-row gap-4">
+				<div class="flex flex-row gap-2">
 					<RunsFilter
 						bind:allowWildcards
 						bind:isSkipped
@@ -1183,8 +1181,9 @@
 												onclick={selectAll}
 											/>
 										</div>
-										<label class="cursor-pointer whitespace-nowrap" for="select-all"
-											>Select all</label
+										<label
+											class="cursor-pointer whitespace-nowrap text-xs text-emphasis font-semibold"
+											for="select-all">Select all</label
 										>
 									</div>
 								{/if}
@@ -1206,7 +1205,6 @@
 								<div class="flex flex-row gap-1 items-center">
 									<Toggle
 										id="cron-schedules"
-										size="xs"
 										bind:checked={showSchedules}
 										on:change={() => {
 											localStorage.setItem(
@@ -1216,16 +1214,16 @@
 										}}
 										options={tableTopBarWidth < 800 || selectionMode
 											? {}
-											: { right: 'CRON Schedules' }}
+											: { right: 'Cron schedules' }}
 									/>
-									<span title="CRON Schedules">
-										<Calendar size="16" />
+									<span title="Cron schedules">
+										<Calendar size="14" />
 									</span>
 								</div>
 
 								<div class="flex flex-row gap-1 items-center">
 									<Toggle
-										size="xs"
+										size="sm"
 										bind:checked={showFutureJobs}
 										on:change={() => {
 											localStorage.setItem('show_future_jobs', showFutureJobs ? 'true' : 'false')
@@ -1236,7 +1234,7 @@
 											: { right: 'Planned later' }}
 									/>
 									<span title="Planned later">
-										<Clock size={16} />
+										<Clock size={14} />
 									</span>
 								</div>
 								<div class="flex flex-row gap-2 items-center">
@@ -1252,7 +1250,7 @@
 										bind:this={manualDatePicker}
 									/>
 									<Toggle
-										size="xs"
+										size="sm"
 										bind:checked={autoRefresh}
 										on:change={() => {
 											localStorage.setItem('auto_refresh_in_runs', autoRefresh ? 'true' : 'false')
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index 54501c3b39..5420fe36f8 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -271,7 +271,8 @@
 			documentationLink="https://www.windmill.dev/docs/core_concepts/scheduling"
 		>
 			<Button
-				size="md"
+				size="lg"
+				variant="accent"
 				startIcon={{ icon: Plus }}
 				on:click={() => scheduleEditor?.openNew(false)}
 				aiId="schedules-add-schedule"
@@ -283,19 +284,19 @@
 		<div class="w-full h-full flex flex-col">
 			<div class="w-full pb-4 pt-6">
 				<input type="text" placeholder="Search schedule" bind:value={filter} class="search-item" />
-				<div class="flex flex-row items-center gap-2 mt-6">
-					<div class="text-sm shrink-0"> Filter by path of </div>
+				<div class="flex flex-row items-center gap-2 mt-2">
+					<div class="text-xs font-semibold text-emphasis shrink-0"> Filter by path of </div>
 					<ToggleButtonGroup bind:selected={selectedFilterKind}>
 						{#snippet children({ item })}
-							<ToggleButton small value="schedule" label="Schedule" icon={Calendar} {item} />
-							<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+							<ToggleButton value="schedule" label="Schedule" icon={Calendar} {item} />
+							<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 				<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
 
 				<div class="flex flex-row items-center justify-end gap-4">
-					<ToggleButtonGroup class="h-6 w-auto" bind:selected={filterEnabledDisabled}>
+					<ToggleButtonGroup class="w-auto" bind:selected={filterEnabledDisabled}>
 						{#snippet children({ item })}
 							<ToggleButton small value="all" label="All" {item} />
 							<ToggleButton small value="enabled" label="Enabled" {item} />
@@ -318,7 +319,7 @@
 					<Skeleton layout={[[6], 0.4]} />
 				{/each}
 			{:else if !schedules?.length}
-				<div class="text-center text-sm text-tertiary mt-2"> No schedules </div>
+				<div class="text-center text-xs font-semibold text-emphasis mt-2"> No schedules </div>
 			{:else if items?.length}
 				<div class="border rounded-md divide-y">
 					{#each items.slice(0, nbDisplayed) as { path, error, summary, edited_by, edited_at, schedule, timezone, enabled, script_path, is_flow, extra_perms, canWrite, marked, jobs, paused_until } (path)}
@@ -328,10 +329,10 @@
 							: undefined}
 
 						<div
-							class="hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
+							class="bg-surface-tertiary hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
 				first-of-type:rounded-t-md last-of-type:rounded-b-md flex flex-col"
 						>
-							<div class="w-full flex gap-5 items-center">
+							<div class="w-full flex gap-4 items-center">
 								<RowIcon kind={is_flow ? 'flow' : 'script'} />
 
 								<a
@@ -339,7 +340,9 @@
 									onclick={() => scheduleEditor?.openEdit(path, is_flow)}
 									class="min-w-0 grow hover:underline decoration-gray-400"
 								>
-									<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+									<div
+										class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate"
+									>
 										{#if marked}
 											<span class="text-xs">
 												{@html marked}
@@ -348,7 +351,7 @@
 											{summary || script_path}
 										{/if}
 									</div>
-									<div class="text-secondary text-xs truncate text-left font-light">
+									<div class="text-secondary text-xs truncate text-left">
 										schedule: {path}
 									</div>
 								</a>
@@ -403,10 +406,9 @@
 								<div class="flex gap-2 items-center justify-end">
 									<Button
 										href={`${base}/runs/?schedule_path=${path}&show_schedules=true&show_future_jobs=true`}
-										size="xs"
+										unifiedSize="md"
 										startIcon={{ icon: List }}
-										color="light"
-										variant="border"
+										variant="subtle"
 									>
 										Runs
 									</Button>
@@ -414,11 +416,12 @@
 										on:click={() => scheduleEditor?.openEdit(path, is_flow)}
 										size="xs"
 										startIcon={{ icon: canWrite ? Pen : Eye }}
-										color="dark"
+										variant="subtle"
 									>
 										{canWrite ? 'Edit' : 'View'}
 									</Button>
 									<Dropdown
+										size="md"
 										items={[
 											{
 												displayName: `View ${is_flow ? 'Flow' : 'Script'}`,
@@ -503,14 +506,14 @@
 							</div>
 							<div class="w-full flex justify-between items-baseline">
 								{#if loadingSchedulesWithJobStats}
-									<div class="flex gap-1 ml-0.5 text-[0.7em] text-tertiary items-center">
+									<div class="flex gap-1 ml-0.5 text-xs text-secondary items-center">
 										<Loader2 size={14} class="animate-spin" />
 										<span>Job stats loading...</span>
 									</div>
 								{:else}
 									<div class="flex gap-1.5 ml-0.5 items-baseline flex-row-reverse">
 										{#if avg_s}
-											<div class="pl-2 text-tertiary text-2xs"
+											<div class="pl-2 text-secondary text-xs"
 												>Avg: {(avg_s / 1000).toFixed(2)}s</div
 											>
 										{/if}
@@ -523,7 +526,7 @@
 															class="{job.success ? 'bg-green-300' : 'bg-red-300'} mx-auto w-1.5"
 															style="height: {h}px"
 														></div>
-														<!-- <div class="text-[0.6em] mt-0.5 text-center text-tertiary"
+														<!-- <div class="text-[0.6em] mt-0.5 text-center text-primary"
 														>{(job.duration_ms / 1000).toFixed(2)}s</div
 													> -->
 													</div>
@@ -533,7 +536,7 @@
 									</div>
 								{/if}
 								<div
-									class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+									class="flex flex-wrap text-xs text-secondary gap-1 items-center justify-end truncate pr-2"
 									><div class="truncate">edited by {edited_by}</div><div class="truncate"
 										>the {displayDate(edited_at)}</div
 									></div
@@ -547,10 +550,12 @@
 			{/if}
 		</div>
 		{#if items && items?.length > 15 && nbDisplayed < items.length}
-			<span class="text-xs"
-				>{nbDisplayed} items out of {items.length}
-				<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
-			>
+			<div class="flex items-center gap-4 text-xs font-semibold text-emphasis">
+				<span>{nbDisplayed} items out of {items.length}</span>
+				<Button size="xs" variant="subtle" on:click={() => (nbDisplayed += 30)}>
+					Load 30 more
+				</Button>
+			</div>
 		{/if}
 	</CenteredPage>
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index 3dc0905a08..cc7d9e67b4 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -288,8 +288,8 @@
 				label: 'Fork',
 				buttonProps: {
 					href: `${base}/scripts/add?template=${script.path}`,
-					size: 'xs',
-					color: 'light',
+					unifiedSize: 'md',
+					variant: 'subtle',
 					startIcon: GitFork
 				}
 			})
@@ -303,8 +303,8 @@
 			label: `Runs`,
 			buttonProps: {
 				href: `${base}/runs/${script.path}`,
-				size: 'xs',
-				color: 'light',
+				unifiedSize: 'md',
+				variant: 'subtle',
 				startIcon: Play
 			}
 		})
@@ -321,8 +321,8 @@
 						versionsDrawerOpen = !versionsDrawerOpen
 					},
 
-					size: 'xs',
-					color: 'light',
+					unifiedSize: 'md',
+					variant: 'subtle',
 					startIcon: History
 				}
 			})
@@ -338,8 +338,8 @@
 						await goto('/apps/add?nodraft=true')
 					},
 
-					size: 'xs',
-					color: 'light',
+					unifiedSize: 'md',
+					variant: 'accent',
 					startIcon: Table2
 				}
 			})
@@ -351,10 +351,9 @@
 						onClick: () => {
 							persistentScriptDrawer?.open?.(script)
 						},
-						size: 'xs',
+						unifiedSize: 'md',
 						startIcon: Activity,
-						color: 'dark',
-						variant: 'contained'
+						variant: 'accent'
 					}
 				})
 			}
@@ -366,10 +365,9 @@
 						href: `${base}/scripts/edit/${script.path}?${
 							topHash ? `&hash=${script.hash}&topHash=` + topHash : ''
 						}`,
-						size: 'xs',
+						unifiedSize: 'md',
 						startIcon: Pen,
-						color: 'dark',
-						variant: 'contained',
+						variant: 'accent-secondary',
 						disabled: !can_write
 					}
 				})
@@ -704,7 +702,6 @@
 							/>
 							<Toggle
 								bind:checked={jsonView}
-								label="JSON View"
 								size="xs"
 								options={{
 									right: 'JSON',
@@ -747,12 +744,12 @@
 
 					<div class="py-10"></div>
 					{#if !emptyString(script.summary)}
-						<div class="mb-2">
-							<span class="!text-tertiary">{script.path}</span>
+						<div>
+							<span class="text-primary">{script.path}</span>
 						</div>
 					{/if}
 					<div class="flex flex-row gap-x-2 flex-wrap items-center">
-						<span class="text-sm text-tertiary">
+						<span class="text-2xs text-secondary">
 							Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by || 'unknown'}
 						</span>
 						<Badge small color="gray">
@@ -812,9 +809,9 @@
 				<Skeleton {loading} layout={[[20]]} />
 
 				<Tabs selected="code">
-					<Tab value="code" size="xs">Code</Tab>
-					<Tab value="dependencies" size="xs">Lockfile</Tab>
-					<Tab value="schema" size="xs">Schema</Tab>
+					<Tab value="code" label="Code" />
+					<Tab value="dependencies" label="Lockfile" />
+					<Tab value="schema" label="Schema" />
 					{#snippet content()}
 						{#if script}
 							<TabContent value="code">
diff --git a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
index 69f6d690a8..3c494e4165 100644
--- a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
@@ -247,7 +247,12 @@
 
 <CenteredPage>
 	<PageHeader title="SQS triggers" tooltip="SQS trigger">
-		<Button size="md" startIcon={{ icon: Plus }} on:click={() => sqsTriggerEditor?.openNew(false)}>
+		<Button
+			unifiedSize="md"
+			variant="accent"
+			startIcon={{ icon: Plus }}
+			on:click={() => sqsTriggerEditor?.openNew(false)}
+		>
 			New&nbsp;SQS trigger
 		</Button>
 	</PageHeader>
@@ -266,12 +271,12 @@
 				bind:value={filter}
 				class="search-item"
 			/>
-			<div class="flex flex-row items-center gap-2 mt-6">
+			<div class="flex flex-row items-center gap-2 mt-2">
 				<div class="text-sm shrink-0"> Filter by path of </div>
 				<ToggleButtonGroup bind:selected={selectedFilterKind}>
 					{#snippet children({ item })}
-						<ToggleButton small value="trigger" label="SQS trigger" icon={AwsIcon} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						<ToggleButton value="trigger" label="SQS trigger" icon={AwsIcon} {item} />
+						<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
 			</div>
@@ -294,7 +299,7 @@
 				<Skeleton layout={[[6], 0.4]} />
 			{/each}
 		{:else if !triggers?.length}
-			<div class="text-center text-sm text-tertiary mt-2"> No sqs triggers </div>
+			<div class="text-center text-sm text-primary mt-2"> No sqs triggers </div>
 		{:else if items?.length}
 			<div class="border rounded-md divide-y">
 				{#each items.slice(0, nbDisplayed) as { path, edited_by, error, edited_at, script_path, is_flow, extra_perms, canWrite, enabled, server_id } (path)}
@@ -314,7 +319,7 @@
 								onclick={() => sqsTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
-								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+								<div class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate">
 									{path}
 								</div>
 								<div class="text-secondary text-xs truncate text-left font-light"></div>
@@ -380,7 +385,7 @@
 										: {
 												icon: Eye
 											}}
-									color="dark"
+									variant="accent"
 								>
 									{canWrite ? 'Edit' : 'View'}
 								</Button>
@@ -450,7 +455,7 @@
 						</div>
 						<div class="w-full flex justify-between items-baseline">
 							<div
-								class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+								class="flex flex-wrap text-[0.7em] text-primary gap-1 items-center justify-end truncate pr-2"
 								><div class="truncate">edited by {edited_by}</div><div class="truncate"
 									>the {displayDate(edited_at)}</div
 								></div
diff --git a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
index f3a0849a7a..30f8351330 100644
--- a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
+++ b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
@@ -65,8 +65,6 @@
 
 		token = undefined
 
-
-
 		scopes = [`jobs:run:${itemKind}s:${scriptPath}`]
 	}
 </script>
@@ -112,15 +110,11 @@
 				/>
 				<h4>or</h4>
 				<div class="flex flex-row gap-2">
-					<Button size="xs" color="light" variant="border" target="_blank" href="/scripts/add"
+					<Button size="xs" variant="default" target="_blank" href="/scripts/add"
 						>Create new script</Button
 					>
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						target="_blank"
-						href="/flows/add?nodraft=true">Create new flow</Button
+					<Button size="xs" variant="default" target="_blank" href="/flows/add?nodraft=true"
+						>Create new flow</Button
 					>
 				</div>
 			</div>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
index fe517174c3..2cf363a3c9 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
@@ -80,7 +80,7 @@
 		</label>
 	{/if}
 	<div class="flex flex-row justify-between pt-4 gap-x-1">
-		<Button variant="border" size="sm" href="{base}/user/workspaces"
+		<Button variant="default" size="sm" href="{base}/user/workspaces"
 			>&leftarrow; Back to workspaces</Button
 		>
 		<button
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte
index 60415f095b..fa15481734 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte
@@ -22,6 +22,6 @@
 	</p>
 	<div class="flex flex-row justify-between pt-4 gap-x-1">
 		<Button color="light" size="xs2" variant="contained" on:click={decline}>Skip</Button>
-		<Button color="dark" size="lg" on:click={startSetup}>Setup</Button>
+		<Button variant="accent" size="lg" on:click={startSetup}>Setup</Button>
 	</div>
 </CenteredModal>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
index 27f37b90bb..0094e66a40 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
@@ -125,10 +125,10 @@
 				<WindmillIcon height="80px" width="80px" spin="slow" />
 			{/if}
 		</div>
-		<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-primary">
+		<h2 class="mt-6 text-center text-2xl font-semibold tracking-tight text-emphasis">
 			Log in or sign up
 		</h2>
-		<p class="mt-2 text-center text-sm text-secondary">
+		<p class="mt-2 text-center text-xs text-secondary">
 			Log in or sign up with any of the methods below
 		</p>
 	</div>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
index e1c783cc9b..b8c3f679fd 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
@@ -20,7 +20,7 @@
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { USER_SETTINGS_HASH } from '$lib/components/sidebar/settings'
 	import { switchWorkspace } from '$lib/storeUtils'
-	import { Cog, Crown, GitFork } from 'lucide-svelte'
+	import { Crown, GitFork, Settings } from 'lucide-svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import { emptyString } from '$lib/utils'
 	import { getUserExt } from '$lib/user'
@@ -160,7 +160,7 @@
 {/if}
 
 <CenteredModal title="Select a workspace" subtitle="Logged in as {$usersWorkspaceStore?.email}">
-	<h2 class="mb-4 inline-flex gap-2">
+	<h2 class="mb-4 inline-flex gap-2 text-sm font-semibold text-emphasis">
 		Workspaces{#if loading}<WindmillIcon spin="fast" />{/if}
 	</h2>
 
@@ -175,8 +175,7 @@
 
 	{#if adminsInstance}
 		<Button
-			btnClasses="w-full mt-2 mb-4 truncate text-secondary"
-			color="light"
+			btnClasses="w-full mt-2 mb-4 truncate bg-surface-tertiary"
 			size="sm"
 			on:click={async () => {
 				workspaceStore.set('admins')
@@ -188,14 +187,14 @@
 				await goto(rd ?? '/')
 				loading = false
 			}}
-			variant="border"
+			variant="default"
 			>Manage Windmill on the superadmins workspace
 		</Button>
 	{/if}
 
 	{#if workspaces && $usersWorkspaceStore}
 		{#if workspaces.length == 0}
-			<p class="text-sm text-tertiary mt-2">
+			<p class="text-xs text-secondary mt-2">
 				You are not a member of any workspace yet. Accept an invitation {#if createWorkspace}or
 					create your own{/if}
 				workspace.
@@ -203,13 +202,9 @@
 		{/if}
 		{#each groupedNonAdminWorkspaces as { workspace, depth, isForked, parentName } (workspace.id)}
 			<label class="block pb-2" style:padding-left={`${depth * 24}px`}>
-				<button
-					class="w-full mx-auto py-1 px-2 rounded-md border
-					shadow-sm text-sm text-secondary font-normal mt-1 flex items-center"
-					class:opacity-50={workspace.disabled}
-					class:cursor-not-allowed={workspace.disabled}
-					class:hover:ring-1={!workspace.disabled}
-					class:hover:ring-indigo-300={!workspace.disabled}
+				<Button
+					variant="default"
+					btnClasses="bg-surface-tertiary"
 					disabled={workspace.disabled}
 					on:click={async () => {
 						if (!workspace.disabled) {
@@ -218,7 +213,7 @@
 					}}
 				>
 					{#if isForked}
-						<GitFork size={12} class="text-tertiary mr-2 flex-shrink-0" />
+						<GitFork size={12} class="text-primary mr-2 flex-shrink-0" />
 					{/if}
 					<span class="flex-1">
 						{#if workspace.color}
@@ -238,19 +233,18 @@
 							<span class="text-red-500"> (user disabled in this workspace)</span>
 						{/if}
 						{#if isForked && parentName}
-							<span class="text-tertiary text-xs mt-1">
+							<span class="text-secondary text-2xs mt-1">
 								<br />
 								Fork of {parentName}
 							</span>
 						{/if}
 					</span>
-				</button>
+				</Button>
 				{#if $superadmin && workspace['deleted']}
 					<Button
 						size="xs"
 						btnClasses="w-full mt-1"
-						color="green"
-						variant="border"
+						variant="default"
 						on:click={async () => {
 							await WorkspaceService.unarchiveWorkspace({ workspace: workspace.id })
 							loadWorkspacesAsAdmin()
@@ -272,9 +266,8 @@
 			<Button
 				size="sm"
 				btnClasses={noWorkspaces ? 'animate-bounce hover:animate-none' : ''}
-				color={noWorkspaces ? 'dark' : 'blue'}
 				href="{base}/user/create_workspace{rd ? `?rd=${encodeURIComponent(rd)}` : ''}"
-				variant={noWorkspaces ? 'contained' : 'border'}
+				variant={noWorkspaces ? 'accent' : 'default'}
 				>+&nbsp;Create a new workspace
 			</Button>
 		</div>
@@ -282,35 +275,37 @@
 
 	{@const nonForkInvites = invites.filter((invite) => invite.parent_workspace_id == undefined)}
 
-	<h2 class="mt-6 mb-4">Invites to join a Workspace</h2>
+	<h2 class="mt-6 mb-4 text-sm font-semibold text-emphasis">Invites to join a Workspace</h2>
 	{#if nonForkInvites.length == 0}
-		<p class="text-sm text-tertiary mt-2"> You don't have new invites at the moment. </p>
+		<p class="text-xs text-secondary mt-2"> You don't have new invites at the moment. </p>
 	{/if}
 	{#each nonForkInvites as invite}
 		<div
-			class="w-full mx-auto py-1 px-2 rounded-md border shadow-sm
-			text-sm mt-1 flex flex-row justify-between items-center"
+			class="w-full mx-auto py-1 px-2 rounded-md border border-border-light
+			text-xs mt-1 flex flex-row justify-between items-center"
 		>
 			<div class="grow">
-				<span class="font-mono font-semibold">{invite.workspace_id}</span>
+				<span class="font-mono font-semibold text-emphasis">{invite.workspace_id}</span>
 				{#if invite.is_admin}
-					<span class="text-sm">as an admin</span>
+					<span class="text-xs text-primary">as an admin</span>
 				{:else if invite.operator}
-					<span class="text-sm">as an operator</span>
+					<span class="text-xs text-primary">as an operator</span>
 				{/if}
 			</div>
 			<div class="flex justify-end items-center flex-col sm:flex-row gap-1">
-				<a
-					class="font-bold p-1"
+				<Button
+					variant="accent"
+					size="xs2"
 					href="{base}/user/accept_invite?workspace={encodeURIComponent(invite.workspace_id)}{rd
 						? `&rd=${encodeURIComponent(rd)}`
 						: ''}"
 				>
 					Accept
-				</a>
+				</Button>
 
-				<button
-					class="text-red-700 font-bold p-1"
+				<Button
+					variant="subtle"
+					size="xs2"
 					on:click={async () => {
 						await UserService.declineInvite({
 							requestBody: { workspace_id: invite.workspace_id }
@@ -318,48 +313,55 @@
 						sendUserToast(`Declined invite to ${invite.workspace_id}`)
 						loadInvites()
 					}}
+					destructive
 				>
 					Decline
-				</button>
+				</Button>
 			</div>
 		</div>
 	{/each}
 
+	{#if workspaces}
+		<div class="flex flex-row pt-6 pb-2">
+			<Toggle size="xs" bind:checked={showAllForks} options={{ right: 'Show workspace forks' }} />
+		</div>
+	{/if}
+
 	{#if showAllForks}
 		{@const allWorkspacesList = workspaces || []}
 		{@const filteredInvites = invites.filter((invite) => invite.parent_workspace_id)}
 
-		<h2 class="mt-6 mb-4">Forks of the workspaces you're in</h2>
+		<h2 class="mb-4 text-sm font-semibold text-emphasis">Forks of the workspaces you're in</h2>
 		{#if filteredInvites.length == 0}
-			<p class="text-sm text-tertiary mt-2"> There isn't anything here </p>
+			<p class="text-xs text-secondary mt-2"> There isn't anything here </p>
 		{/if}
 		{#each filteredInvites as invite}
 			{@const inviteWorkspace = allWorkspacesList.find((w) => w.id === invite.workspace_id)}
 			<div
-				class="w-full mx-auto py-1 px-2 rounded-md border shadow-sm
-			text-sm mt-1 flex flex-row justify-between items-center"
+				class="w-full mx-auto py-1 px-2 rounded-md border border-border-light
+			text-xs mt-1 flex flex-row justify-between items-center"
 			>
 				<div class="grow">
 					<div class="flex items-center gap-2">
 						{#if inviteWorkspace?.parent_workspace_id}
-							<GitFork size={12} class="text-tertiary flex-shrink-0" />
+							<GitFork size={12} class="text-secondary flex-shrink-0" />
 						{/if}
-						<span class="font-mono font-semibold">{invite.workspace_id}</span>
+						<span class="font-mono font-semibold text-emphasis">{invite.workspace_id}</span>
 					</div>
 					{#if invite.is_admin}
-						<span class="text-sm">as an admin</span>
+						<span class="text-xs text-primary">as an admin</span>
 					{:else if invite.operator}
-						<span class="text-sm">as an operator</span>
+						<span class="text-xs text-primary">as an operator</span>
 					{/if}
 					{#if invite.parent_workspace_id}
-						<div class="text-tertiary text-xs mt-1">
+						<div class="text-secondary text-2xs mt-1">
 							Fork of {invite.parent_workspace_id}
 						</div>
 					{/if}
 				</div>
 				<div class="flex justify-end items-center flex-col sm:flex-row gap-1">
 					<a
-						class="font-bold p-1"
+						class="font-semibold text-xs p-1"
 						href="{base}/user/accept_invite?workspace={encodeURIComponent(invite.workspace_id)}{rd
 							? `&rd=${encodeURIComponent(rd)}`
 							: ''}"
@@ -368,7 +370,7 @@
 					</a>
 
 					<button
-						class="text-red-700 font-bold p-1"
+						class="text-red-700 font-semibold text-xs p-1"
 						on:click={async () => {
 							await UserService.declineInvite({
 								requestBody: { workspace_id: invite.workspace_id }
@@ -383,16 +385,11 @@
 			</div>
 		{/each}
 	{/if}
-	{#if workspaces}
-		<div class="flex flex-row-reverse pt-4 pb-2">
-			<Toggle bind:checked={showAllForks} options={{ right: 'Show workspace forks' }} />
-		</div>
-	{/if}
 
 	<div class="flex justify-between items-center mt-10 flex-wrap gap-2">
 		{#if $superadmin}
 			<Button
-				variant="border"
+				variant="default"
 				size="sm"
 				on:click={superadminSettings.openDrawer}
 				startIcon={{ icon: Crown }}
@@ -401,17 +398,16 @@
 			</Button>
 		{/if}
 		<Button
-			variant="border"
+			variant="default"
 			size="sm"
 			on:click={() => userSettings.openDrawer()}
-			startIcon={{ icon: Cog }}
+			startIcon={{ icon: Settings }}
 		>
 			User settings
 		</Button>
 
 		<Button
-			variant="border"
-			color="blue"
+			variant="default"
 			size="sm"
 			on:click={async () => {
 				logout()
@@ -426,7 +422,7 @@
 		class="border rounded-md shadow-md bg-white w-full max-w-[640px] p-4 sm:py-8 sm:px-10 mb-6 md:mb-20"
 	>
 		<h1 class="text-center mb-2">Select a workspace</h1>
-		<p class="text-center font-medium text-tertiary text-xs mb-10">
+		<p class="text-center font-semibold text-primary text-xs mb-10">
 			Logged in as {$usersWorkspaceStore?.email}
 		</p>
 	</div>
diff --git a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
index c402337089..ab3c387cec 100644
--- a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
@@ -30,7 +30,7 @@
 		Token will be posted to {host == 'localhost' ? 'your local machine' : host} to port {port}
 	</p>
 	<div class="flex flex-row justify-around pt-4 gap-x-1">
-		<Button variant="border" color="dark" size="sm" href={base}>Decline</Button>
-		<Button variant="contained" color="blue" size="sm" on:click={authorizeToken}>Authorize</Button>
+		<Button variant="default" size="sm" href={base}>Decline</Button>
+		<Button variant="accent" size="sm" on:click={authorizeToken}>Authorize</Button>
 	</div>
 </CenteredModal>
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index fb0fd59124..3ef551f01f 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -167,14 +167,20 @@
 			<div class="flex flex-row justify-end">
 				{#if tab == 'contextual' && ($userStore?.is_admin || $userStore?.is_super_admin)}
 					<Button
-						size="md"
+						unifiedSize="md"
+						variant="accent"
 						startIcon={{ icon: Plus }}
 						on:click={() => contextualVariableEditor?.initNew()}
 					>
 						New&nbsp;contextual&nbsp;variable
 					</Button>
 				{:else}
-					<Button size="md" startIcon={{ icon: Plus }} on:click={() => variableEditor?.initNew()}>
+					<Button
+						unifiedSize="md"
+						variant="accent"
+						startIcon={{ icon: Plus }}
+						on:click={() => variableEditor?.initNew()}
+					>
 						New&nbsp;variable
 					</Button>
 				{/if}
@@ -194,23 +200,16 @@
 		/>
 
 		<Tabs bind:selected={tab}>
-			<Tab size="md" value="workspace">
-				<div class="flex gap-2 items-center my-1">
-					<Building size={18} />
-					Workspace
-				</div>
-			</Tab>
-			<Tab size="md" value="contextual">
-				<div class="flex gap-2 items-center my-1">
-					<DollarSign size={18} />
-					Contextual
+			<Tab value="workspace" label="Workspace" icon={Building} />
+			<Tab value="contextual" label="Contextual" icon={DollarSign}>
+				{#snippet extra()}
 					<Tooltip
 						documentationLink="https://www.windmill.dev/docs/core_concepts/variables_and_secrets#contextual-variables"
 					>
 						Contextual variables are passed as environment variables when running a script and
 						depends on the execution context.
 					</Tooltip>
-				</div>
+				{/snippet}
 			</Tab>
 		</Tabs>
 		{#if tab == 'workspace'}
@@ -285,7 +284,7 @@
 										</span>
 									</Cell>
 									<Cell class="break-words">
-										<span class="text-xs text-tertiary">{truncate(description ?? '', 50)} </span>
+										<span class="text-xs text-primary">{truncate(description ?? '', 50)} </span>
 									</Cell>
 
 									<Cell class="text-center">
@@ -454,7 +453,9 @@
 					<PageHeader title="Custom contextual variables" primary={false} />
 					{#if contextualVariables.filter((x) => x.is_custom).length === 0}
 						<div class="flex flex-col items-center justify-center h-full">
-							<div class="text-md font-medium">No custom contextual variables found</div>
+							<div class="text-xs text-primary font-normal"
+								>No custom contextual variables found</div
+							>
 						</div>
 					{:else}
 						<TableSimple
diff --git a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
index 1919888d0e..19b42040d4 100644
--- a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
@@ -250,7 +250,8 @@
 		tooltip="Windmill can listen to WebSocket events and trigger scripts or flows based on them."
 	>
 		<Button
-			size="md"
+			unifiedSize="md"
+			variant="accent"
 			startIcon={{ icon: Plus }}
 			on:click={() => websocketTriggerEditor?.openNew(false)}
 		>
@@ -267,12 +268,12 @@
 	<div class="w-full h-full flex flex-col">
 		<div class="w-full pb-4 pt-6">
 			<input type="text" placeholder="Search WS triggers" bind:value={filter} class="search-item" />
-			<div class="flex flex-row items-center gap-2 mt-6">
-				<div class="text-sm shrink-0"> Filter by path of </div>
+			<div class="flex flex-row items-center gap-2 mt-2">
+				<div class="text-xs font-semibold text-emphasis shrink-0"> Filter by path of </div>
 				<ToggleButtonGroup bind:selected={selectedFilterKind}>
 					{#snippet children({ item })}
-						<ToggleButton small value="trigger" label="WS trigger" icon={Unplug} {item} />
-						<ToggleButton small value="script_flow" label="Script/Flow" icon={Code} {item} />
+						<ToggleButton value="trigger" label="WS trigger" icon={Unplug} {item} />
+						<ToggleButton value="script_flow" label="Script/Flow" icon={Code} {item} />
 					{/snippet}
 				</ToggleButtonGroup>
 			</div>
@@ -295,7 +296,7 @@
 				<Skeleton layout={[[6], 0.4]} />
 			{/each}
 		{:else if !triggers?.length}
-			<div class="text-center text-sm text-tertiary mt-2"> No websocket triggers </div>
+			<div class="text-center text-sm text-primary mt-2"> No websocket triggers </div>
 		{:else if items?.length}
 			<div class="border rounded-md divide-y">
 				{#each items.slice(0, nbDisplayed) as { path, edited_by, edited_at, script_path, url, is_flow, extra_perms, canWrite, marked, error, last_server_ping, server_id, enabled } (path)}
@@ -315,7 +316,7 @@
 								onclick={() => websocketTriggerEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
-								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
+								<div class="text-emphasis flex-wrap text-left text-xs font-semibold mb-1 truncate">
 									{#if marked}
 										<span class="text-xs">
 											{@html marked}
@@ -395,7 +396,7 @@
 										: {
 												icon: Eye
 											}}
-									color="dark"
+									variant="subtle"
 								>
 									{canWrite ? 'Edit' : 'View'}
 								</Button>
@@ -461,7 +462,7 @@
 						</div>
 						<div class="w-full flex justify-between items-baseline">
 							<div
-								class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
+								class="flex flex-wrap text-[0.7em] text-primary gap-1 items-center justify-end truncate pr-2"
 								><div class="truncate">edited by {edited_by}</div><div class="truncate"
 									>the {displayDate(edited_at)}</div
 								></div
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 0d28045eb7..2b979a956c 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -333,6 +333,7 @@
 							on:refresh={() => {
 								loadCustomTags()
 							}}
+							variant="default"
 						/>
 					</div>
 					<div>
@@ -340,8 +341,8 @@
 					</div>
 					<div>
 						<Button
-							size="xs"
-							color="dark"
+							unifiedSize="md"
+							variant="default"
 							startIcon={{
 								icon: LineChart
 							}}
@@ -354,8 +355,8 @@
 					</div>
 					<div>
 						<Button
-							size="xs"
-							color="dark"
+							unifiedSize="md"
+							variant="default"
 							startIcon={{
 								icon: List
 							}}
@@ -389,9 +390,8 @@
 				{#if $superadmin || $devopsRole}
 					<div class="flex flex-row gap-4 items-center">
 						<Button
-							size="sm"
-							color="light"
-							variant="border"
+							unifiedSize="md"
+							variant="default"
 							startIcon={{ icon: Plus }}
 							on:click={() => {
 								newHttpAgentWorkerDrawer?.toggleDrawer?.()
@@ -404,7 +404,8 @@
 							<svelte:fragment slot="trigger">
 								<div class="flex items-center gap-2">
 									<Button
-										size="sm"
+										variant="accent"
+										unifiedSize="md"
 										startIcon={{ icon: Plus }}
 										nonCaptureEvent
 										disabled={!$enterpriseLicense}
@@ -489,14 +490,16 @@
 							{@const activeWorkers = worker_group?.[1].flatMap((x) =>
 								x[1]?.filter((y) => (y.last_ping ?? 0) < 15)
 							)}
-							<Tab value={worker_group[0]}>
-								{`${worker_group[0]} - ${pluralize(activeWorkers?.length, 'worker')}`}
-								<Tooltip>Number of workers active in the last 15s</Tooltip>
+							<Tab
+								value={worker_group[0]}
+								label={`${worker_group[0]} - ${pluralize(activeWorkers?.length, 'worker')}`}
+							>
+								{#snippet extra()}
+									<Tooltip>Number of workers active in the last 15s</Tooltip>
+								{/snippet}
 							</Tab>
 						{:else}
-							<Tab value={name}>
-								{name} (0 worker)
-							</Tab>
+							<Tab value={name} label={`${name} (0 worker)`} />
 						{/if}
 					{/each}
 				</Tabs>
@@ -530,7 +533,7 @@
 						<Search class="absolute left-2 " size={14} />
 					</div>
 					{#if worker_group?.[1].length == 0 && search}
-						<div class="text-xs text-tertiary">
+						<div class="text-xs text-primary">
 							No workers found. Reset the search to see all workers.
 						</div>
 					{:else}
@@ -583,7 +586,7 @@
 												? 12
 												: 9}
 											scope="colgroup"
-											class="bg-surface-secondary/30 !py-1 border-b !text-xs"
+											class="bg-surface-secondary/30 border-b !text-xs"
 										>
 											<div class="flex flex-row w-full">
 												<div class="min-w-64">
@@ -603,7 +606,7 @@
 										{#each workers as { worker, custom_tags, last_ping, started_at, jobs_executed, last_job_id, last_job_workspace_id, occupancy_rate_15s, occupancy_rate_5m, occupancy_rate_30m, occupancy_rate, wm_version, vcpus, memory, memory_usage, wm_memory_usage }}
 											{@const isWorkerAlive = isWorkerMaybeAlive(last_ping)}
 											<tr>
-												<Cell first>
+												<Cell class="py-6 text-secondary" first>
 													{@const underscorePos = worker.search('_')}
 													{#if underscorePos === -1}
 														{worker}
@@ -612,7 +615,7 @@
 														<Tooltip>{worker}</Tooltip>
 													{/if}
 												</Cell>
-												<Cell>
+												<Cell class="text-secondary">
 													{#if custom_tags && custom_tags?.length > 2}
 														{truncate(custom_tags?.join(', ') ?? '', 10)}
 														<Tooltip>{custom_tags?.join(', ')}</Tooltip>
@@ -620,13 +623,13 @@
 														{custom_tags?.join(', ') ?? ''}
 													{/if}
 												</Cell>
-												<Cell
+												<Cell class="text-secondary"
 													>{last_ping != undefined ? last_ping + timeSinceLastPing : -1}s ago</Cell
 												>
-												<Cell>{displayDate(started_at)}</Cell>
-												<Cell>{jobs_executed}</Cell>
+												<Cell class="text-secondary">{displayDate(started_at)}</Cell>
+												<Cell class="text-secondary">{jobs_executed}</Cell>
 												{#if (!config || config?.dedicated_worker == undefined) && ($superadmin || $devopsRole)}
-													<Cell>
+													<Cell class="text-secondary">
 														{#if last_job_id}
 															<a href={`/run/${last_job_id}?workspace=${last_job_workspace_id}`}>
 																View last job
@@ -635,7 +638,7 @@
 															(workspace {last_job_workspace_id})
 														{/if}
 													</Cell>
-													<Cell>
+													<Cell class="text-secondary">
 														{displayOccupancyRate(occupancy_rate_15s)}/{displayOccupancyRate(
 															occupancy_rate_5m
 														)}/{displayOccupancyRate(occupancy_rate_30m)}/{displayOccupancyRate(
@@ -643,7 +646,7 @@
 														)}
 													</Cell>
 												{/if}
-												<Cell>
+												<Cell class="text-secondary">
 													<div class="flex flex-col gap-1">
 														<div>
 															{memory_usage ? Math.round(memory_usage / 1024 / 1024) + 'MB' : '--'}
@@ -655,7 +658,7 @@
 														</div>
 													</div>
 												</Cell>
-												<Cell>
+												<Cell class="text-secondary">
 													<div class="flex flex-col gap-1">
 														<div>
 															{vcpus ? (vcpus / 100000).toFixed(2) + ' vCPUs' : '--'}
@@ -665,12 +668,12 @@
 														</div>
 													</div>
 												</Cell>
-												<Cell>
+												<Cell class="text-secondary">
 													<div class="!text-2xs">
 														{wm_version.split('-')[0]}<Tooltip>{wm_version}</Tooltip>
 													</div>
 												</Cell>
-												<Cell>
+												<Cell class="text-secondary">
 													<Badge
 														color={isWorkerAlive != undefined
 															? isWorkerAlive
@@ -686,7 +689,7 @@
 													</Badge>
 												</Cell>
 												{#if $superadmin || $devopsRole}
-													<Cell>
+													<Cell class="text-secondary">
 														<Button
 															size="xs"
 															color="light"
@@ -727,7 +730,7 @@
 							config={worker_group[1]}
 							activeWorkers={0}
 						/>
-						<div class="text-xs text-tertiary"> No workers currently in this worker group </div>
+						<div class="text-xs text-primary"> No workers currently in this worker group </div>
 					{/if}
 				{/if}
 			</div>
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 2061483810..fc7fcfcaff 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -57,6 +57,7 @@
 	} from '$lib/components/workspaceSettings/DucklakeSettings.svelte'
 	import { AIMode } from '$lib/components/copilot/chat/AIChatManager.svelte'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
 	let slackInitialPath: string = $state('')
 	let slackScriptPath: string = $state('')
@@ -502,12 +503,7 @@
 	{#if $userStore?.is_admin || $superadmin}
 		<PageHeader title="Workspace settings: {$workspaceStore}"
 			>{#if $superadmin}
-				<Button
-					variant="border"
-					color="dark"
-					size="sm"
-					on:click={() => goto('#superadmin-settings')}
-				>
+				<Button variant="default" size="sm" on:click={() => goto('#superadmin-settings')}>
 					Instance settings
 				</Button>
 			{/if}</PageHeader
@@ -526,107 +522,86 @@
 				}}
 			>
 				<Tab
-					size="xs"
 					value="users"
 					aiId="workspace-settings-users"
 					aiDescription="Users workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Users</div>
-				</Tab>
+					label="Users"
+				/>
 				<Tab
-					size="xs"
 					value="git_sync"
 					aiId="workspace-settings-git-sync"
 					aiDescription="Git sync workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Git Sync</div>
-				</Tab>
+					label="Git Sync"
+				/>
 				<Tab
-					size="xs"
 					value="deploy_to"
 					aiId="workspace-settings-deploy-to"
 					aiDescription="Deployment UI workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Deployment UI</div>
-				</Tab>
+					label="Deployment UI"
+				/>
+
 				{#if WORKSPACE_SHOW_SLACK_CMD}
 					<Tab
-						size="xs"
 						value="slack"
 						aiId="workspace-settings-slack"
 						aiDescription="Slack / Teams workspace settings"
-					>
-						<div class="flex gap-2 items-center my-1">Slack / Teams</div>
-					</Tab>
+						label="Slack / Teams"
+					/>
 				{/if}
 				{#if isCloudHosted()}
 					<Tab
-						size="xs"
 						value="premium"
 						aiId="workspace-settings-premium"
 						aiDescription="Premium plans workspace settings"
-					>
-						<div class="flex gap-2 items-center my-1">Premium Plans</div>
-					</Tab>
+						label="Premium Plans"
+					/>
 				{/if}
 				{#if WORKSPACE_SHOW_WEBHOOK_CLI_SYNC}
 					<Tab
-						size="xs"
 						value="webhook"
 						aiId="workspace-settings-webhook"
 						aiDescription="Webhook workspace settings"
-					>
-						<div class="flex gap-2 items-center my-1">Webhook</div>
-					</Tab>
+						label="Webhook"
+					/>
 				{/if}
 				<Tab
-					size="xs"
 					value="error_handler"
 					aiId="workspace-settings-error-handler"
 					aiDescription="Error handler workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Error Handler</div>
-				</Tab>
+					label="Error Handler"
+				/>
 				<Tab
-					size="xs"
 					value="ai"
 					aiId="workspace-settings-ai"
 					aiDescription="Windmill AI workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Windmill AI</div>
-				</Tab>
+					label="Windmill AI"
+				/>
 				<Tab
-					size="xs"
 					value="windmill_lfs"
 					aiId="workspace-settings-windmill-lfs"
 					aiDescription="Object Storage (S3) workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Object Storage (S3)</div>
-				</Tab>
+					label="Object Storage (S3)"
+				/>
 				<Tab
-					size="xs"
 					value="default_app"
 					aiId="workspace-settings-default-app"
 					aiDescription="Default app workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Default App</div>
-				</Tab>
+					label="Default App"
+				/>
+
 				<Tab
-					size="xs"
 					value="encryption"
 					aiId="workspace-settings-encryption"
 					aiDescription="Encryption workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">Encryption</div>
-				</Tab>
+					label="Encryption"
+				/>
+
 				<Tab
-					size="xs"
 					value="general"
 					aiId="workspace-settings-general"
 					aiDescription="General workspace settings"
-				>
-					<div class="flex gap-2 items-center my-1">General</div>
-				</Tab>
+					label="General"
+				/>
 			</Tabs>
 		</div>
 		{#if !loadedSettings}
@@ -636,7 +611,7 @@
 		{:else if tab == 'deploy_to'}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class="text-primary text-lg font-semibold">
+					<div class="text-sm font-semibold text-emphasis">
 						Link this Workspace to another Staging / Prod Workspace
 					</div>
 					<Description link="https://www.windmill.dev/docs/core_concepts/staging_prod">
@@ -659,7 +634,7 @@
 		{:else if tab == 'slack'}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class="text-primary text-lg font-semibold"
+					<div class="text-sm font-semibold text-emphasis"
 						>Workspace connections to Slack and Teams</div
 					>
 					<Description link="https://www.windmill.dev/docs/integrations/slack">
@@ -669,12 +644,8 @@
 				</div>
 
 				<Tabs bind:selected={slack_tabs}>
-					<Tab size="xs" value="slack_commands">
-						<div class="flex gap-2 items-center my-1"> Slack</div>
-					</Tab>
-					<Tab size="xs" value="teams_commands">
-						<div class="flex gap-2 items-center my-1"> Teams</div>
-					</Tab>
+					<Tab value="slack_commands" label="Slack" />
+					<Tab value="teams_commands" label="Teams" />
 				</Tabs>
 
 				{#if slack_tabs === 'slack_commands'}
@@ -728,22 +699,22 @@
 				{/if}
 			</div>
 		{:else if tab == 'general'}
-			<div class="flex flex-col gap-4 my-8">
+			<div class="flex flex-col gap-4 my-6">
 				<div class="flex flex-col gap-1">
-					<div class=" text-primary text-lg font-semibold">General</div>
+					<div class="text-sm font-semibold text-emphasis">General</div>
 					<Description link="https://www.windmill.dev/docs/core_concepts/workspace_settings">
 						Configure general workspace settings.
 					</Description>
 				</div>
 			</div>
 
-			<div class="flex flex-col gap-10">
+			<div class="flex flex-col gap-6">
 				<ChangeWorkspaceName />
 				<ChangeWorkspaceId />
 				<ChangeWorkspaceColor />
 			</div>
 
-			<PageHeader title="Export workspace" primary={false} />
+			<div class="text-xs font-semibold text-emphasis mt-6 mb-1">Export workspace</div>
 			<div class="flex justify-start">
 				<Button
 					size="sm"
@@ -754,22 +725,22 @@
 				</Button>
 			</div>
 
-			<div class="mt-20"></div>
-			<PageHeader title="Delete workspace" primary={false} />
+			<div class="mt-12"></div>
+			<span class="text-sm font-semibold text-emphasis">Delete workspace</span>
 			{#if !$superadmin}
-				<p class="italic text-xs"> Only instance superadmins can delete a workspace. </p>
+				<p class="text-2xs text-secondary"> Only instance superadmins can delete a workspace. </p>
 			{/if}
 			{#if $workspaceStore === 'admins' || $workspaceStore === 'starter'}
-				<p class="italic text-xs">
+				<p class="text-2xs text-secondary">
 					This workspace cannot be deleted as it has a special function. Consult the documentation
 					for more information.
 				</p>
 			{/if}
 			<div class="flex gap-2">
 				<Button
-					color="red"
+					destructive
 					disabled={$workspaceStore === 'admins' || $workspaceStore === 'starter'}
-					size="sm"
+					unifiedSize="md"
 					btnClasses="mt-2"
 					on:click={async () => {
 						await WorkspaceService.archiveWorkspace({ workspace: $workspaceStore ?? '' })
@@ -803,7 +774,7 @@
 		{:else if tab == 'webhook'}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class=" text-primary text-lg font-semibold"> Workspace Webhook</div>
+					<div class="text-xs font-semibold text-emphasis"> Workspace Webhook</div>
 					<Description
 						link="https://www.windmill.dev/docs/core_concepts/webhooks#workspace-webhook"
 					>
@@ -814,8 +785,8 @@
 			</div>
 			<div class="flex flex-col gap-4 my-4">
 				<div class="flex flex-col gap-1">
-					<div class=" text-primary text-base font-semibold"> URL to send requests to</div>
-					<div class="text-tertiary text-xs">
+					<div class="text-xs font-semibold text-emphasis"> URL to send requests to</div>
+					<div class="text-primary text-xs">
 						This URL will be POSTed to with a JSON body depending on the type of event. The type is
 						indicated by the type field. The other fields are dependent on the type.
 					</div>
@@ -836,7 +807,7 @@
 			{/if}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class="text-primary text-lg font-semibold"> Workspace Error Handler</div>
+					<div class="text-sm font-semibold text-emphasis"> Workspace Error Handler</div>
 					<Description
 						link="https://www.windmill.dev/docs/core_concepts/error_handling#workspace-error-handler"
 					>
@@ -846,7 +817,7 @@
 			</div>
 			<div class="flex flex-col gap-4 my-4">
 				<div class="flex flex-col gap-1">
-					<div class="text-primary text-base font-semibold">
+					<div class="text-xs font-semibold text-emphasis">
 						Script or flow to run as error handler</div
 					>
 				</div>
@@ -907,7 +878,7 @@
 			</div>
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class="text-primary text-lg font-semibold"> Workspace Critical Alerts</div>
+					<div class="text-sm font-semibold text-emphasis"> Workspace Critical Alerts</div>
 					<Description link="https://www.windmill.dev/docs/core_concepts/critical_alerts">
 						Critical alerts within the scope of a workspace are sent to the workspace admins through
 						a UI notification.
@@ -960,12 +931,12 @@
 				}}
 			/>
 			<DucklakeSettings
-			bind:ducklakeSettings
-			bind:ducklakeSavedSettings
-			onSave={() => {
-				ducklakeSavedSettings = clone(ducklakeSettings)
-			}}
-		/>
+				bind:ducklakeSettings
+				bind:ducklakeSavedSettings
+				onSave={() => {
+					ducklakeSavedSettings = clone(ducklakeSettings)
+				}}
+			/>
 		{:else if tab == 'git_sync'}
 			{#if $workspaceStore}
 				<GitSyncSection />
@@ -977,7 +948,7 @@
 		{:else if tab == 'default_app'}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class="text-primary text-lg font-semibold">Workspace Default App</div>
+					<div class="text-sm font-semibold text-emphasis">Workspace Default App</div>
 					<Description>
 						If configured, users who are operators in this workspace will be redirected to this app
 						automatically when logging into this workspace.
@@ -1011,7 +982,7 @@
 		{:else if tab == 'encryption'}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
-					<div class="text-primary text-lg font-semibold">Workspace Secret Encryption</div>
+					<div class="text-sm font-semibold text-emphasis">Workspace Secret Encryption</div>
 					<Description>
 						When updating the encryption key of a workspace, all secrets will be re-encrypted with
 						the new key and the previous key will be replaced by the new one.
@@ -1039,16 +1010,20 @@
 					}}>Save & Re-encrypt workspace</Button
 				>
 			</div>
-			<h6> Workspace encryption key </h6>
+			<label for="workspace-encryption-key" class="text-xs font-semibold text-emphasis mt-1">
+				Workspace encryption key
+			</label>
 			<div class="flex gap-2 mt-1">
-				<input
-					class="justify-start"
-					type="text"
-					placeholder={'*'.repeat(64)}
+				<TextInput
+					inputProps={{
+						id: 'workspace-encryption-key',
+						placeholder: '*'.repeat(64)
+					}}
 					bind:value={editedWorkspaceEncryptionKey}
 				/>
 				<Button
-					color="light"
+					variant="default"
+					unifiedSize="md"
 					on:click={() => {
 						loadWorkspaceEncryptionKey()
 					}}>Load current key</Button
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
index 8be0325839..3529c45ce4 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
@@ -38,11 +38,11 @@
 				The checkout failed, your subscription has not been updated.
 			</Alert>
 		</div>
-		<p class="text-sm my-6 text-tertiary">
+		<p class="text-sm my-6 text-primary">
 			You will be redirected to the workspace settings page in 5 seconds...
 		</p>
 	{:else}
-		<p class="text-sm my-6 text-tertiary w-full text-center">
+		<p class="text-sm my-6 text-primary w-full text-center">
 			Waiting for your upgrade to be processed...
 		</p>
 	{/if}
diff --git a/frontend/src/routes/a/[...path]/+page.svelte b/frontend/src/routes/a/[...path]/+page.svelte
index 8fa7b9798b..3fec55ce0a 100644
--- a/frontend/src/routes/a/[...path]/+page.svelte
+++ b/frontend/src/routes/a/[...path]/+page.svelte
@@ -114,12 +114,12 @@
 		? 'transition-opacity delay-1000 duration-1000 opacity-20 hover:delay-0 hover:opacity-100'
 		: ''}"
 >
-	<a href="https://windmill.dev" class="whitespace-nowrap text-tertiary inline-flex items-center"
+	<a href="https://windmill.dev" class="whitespace-nowrap text-primary inline-flex items-center"
 		>Powered by &nbsp;<WindmillIcon />&nbsp;Windmill</a
 	>
 </div>
 
-<div class="z-50 text-2xs text-tertiary absolute top-3 left-2"
+<div class="z-50 text-2xs text-primary absolute top-3 left-2"
 	>{#if $userStore}
 		<div class="flex gap-1 items-center"><User size={14} />{$userStore.username}</div>
 	{:else}<UserRoundX size={14} />{/if}
diff --git a/frontend/src/routes/kitchen_sink/+page.svelte b/frontend/src/routes/kitchen_sink/+page.svelte
index e913af3912..0e07158244 100644
--- a/frontend/src/routes/kitchen_sink/+page.svelte
+++ b/frontend/src/routes/kitchen_sink/+page.svelte
@@ -18,7 +18,7 @@
 <DarkModeToggle forcedDarkMode={false} />
 
 <Tabs bind:selected={tab}>
-	<Tab value="button">Buttons</Tab>
+	<Tab value="button" label="Buttons" />
 
 	{#snippet content()}
 		<TabContent value="button" class="p-4 flex gap-4 flex-col ">
@@ -27,7 +27,7 @@
 				<Button>Lorem</Button>
 				<Button disabled>Lorem</Button>
 
-				<Button color="dark" loading>Lorem</Button>
+				<Button variant="accent" loading>Lorem</Button>
 				<Button
 					color="gray"
 					startIcon={{
@@ -43,18 +43,18 @@
 			</div>
 			<div class="font-bold text-md">Border buttons</div>
 			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
-				<Button variant="border">Lorem</Button>
-				<Button variant="border" color="dark">Lorem</Button>
-				<Button variant="border" color="gray">Lorem</Button>
-				<Button variant="border" color="green">Lorem</Button>
-				<Button variant="border" color="light">Lorem</Button>
-				<Button variant="border" color="none">Lorem</Button>
-				<Button variant="border" color="red">Lorem</Button>
+				<Button variant="default">Lorem</Button>
+				<Button variant="default">Lorem</Button>
+				<Button variant="default">Lorem</Button>
+				<Button variant="default">Lorem</Button>
+				<Button variant="default">Lorem</Button>
+				<Button variant="default">Lorem</Button>
+				<Button variant="default">Lorem</Button>
 			</div>
 			<div class="font-bold text-md">Dropdown buttons</div>
 			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
 				<Button {dropdownItems}>Lorem</Button>
-				<Button {dropdownItems} color="dark">Lorem</Button>
+				<Button {dropdownItems} variant="accent">Lorem</Button>
 				<Button {dropdownItems} color="gray">Lorem</Button>
 				<Button {dropdownItems} color="green">Lorem</Button>
 				<Button {dropdownItems} color="light">Lorem</Button>
@@ -63,13 +63,13 @@
 			</div>
 			<div class="font-bold text-md">Dropdown buttons</div>
 			<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-6">
-				<Button variant="border" {dropdownItems}>Lorem</Button>
-				<Button variant="border" {dropdownItems} color="dark">Lorem</Button>
-				<Button variant="border" {dropdownItems} color="gray">Lorem</Button>
-				<Button variant="border" {dropdownItems} color="green">Lorem</Button>
-				<Button variant="border" {dropdownItems} color="light">Lorem</Button>
-				<Button variant="border" {dropdownItems} color="none">Lorem</Button>
-				<Button variant="border" {dropdownItems} color="red">Lorem</Button>
+				<Button variant="default" {dropdownItems}>Lorem</Button>
+				<Button variant="default" {dropdownItems}>Lorem</Button>
+				<Button variant="default" {dropdownItems}>Lorem</Button>
+				<Button variant="default" {dropdownItems}>Lorem</Button>
+				<Button variant="default" {dropdownItems}>Lorem</Button>
+				<Button variant="default" {dropdownItems}>Lorem</Button>
+				<Button variant="default" {dropdownItems}>Lorem</Button>
 			</div>
 		</TabContent>
 	{/snippet}
diff --git a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
index df72207624..7b7541b386 100644
--- a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
+++ b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
@@ -100,12 +100,12 @@
 		? 'transition-opacity delay-1000 duration-1000 opacity-20 hover:delay-0 hover:opacity-100'
 		: ''}"
 >
-	<a href="https://windmill.dev" class="whitespace-nowrap text-tertiary inline-flex items-center"
+	<a href="https://windmill.dev" class="whitespace-nowrap text-primary inline-flex items-center"
 		>Powered by &nbsp;<WindmillIcon />&nbsp;Windmill</a
 	>
 </div>
 
-<div class="z-50 text-2xs text-tertiary absolute top-3 left-2"
+<div class="z-50 text-2xs text-primary absolute top-3 left-2"
 	>{#if $userStore}
 		<div class="flex gap-1 items-center"><User size={14} />{$userStore.username}</div>
 	{:else}<UserRoundX size={14} />{/if}
diff --git a/frontend/src/routes/test_dev/kitchen_sink/+page.svelte b/frontend/src/routes/test_dev/kitchen_sink/+page.svelte
new file mode 100644
index 0000000000..82ce3c4287
--- /dev/null
+++ b/frontend/src/routes/test_dev/kitchen_sink/+page.svelte
@@ -0,0 +1,679 @@
+<script lang="ts">
+	import DropdownV2 from '$lib/components/DropdownV2.svelte'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import TextInput from '$lib/components/text_input/TextInput.svelte'
+	import ClearableInput from '$lib/components/common/clearableInput/ClearableInput.svelte'
+	import DateInput from '$lib/components/DateInput.svelte'
+	import DateTimeInput from '$lib/components/DateTimeInput.svelte'
+	import {
+		Pen,
+		GitFork,
+		Trash,
+		Eye,
+		Share,
+		Copy,
+		Archive,
+		Settings,
+		Earth,
+		Database,
+		Code,
+		Play,
+		Plus,
+		Save,
+		Search,
+		Moon,
+		Sun,
+		X
+	} from 'lucide-svelte'
+
+	let darkMode: boolean = $state(false)
+	let selectedToggle1: string = $state('option1')
+	let selectedToggle2: string = $state('small')
+	let selectedToggle3: string = $state('view')
+
+	// Input states
+	let basicTextValue: string = $state('')
+	let placeholderTextValue: string = $state('')
+	let errorTextValue: string = $state('Invalid input')
+	let disabledTextValue: string = $state('Disabled value')
+	let clearableValue: string = $state('Clearable text')
+	let textAreaValue: string = $state('This is a text area\nwith multiple lines')
+	let numberValue: number = $state(42)
+	let dateValue: string = $state('')
+	let dateTimeValue: string = $state('')
+
+	function toggleTheme() {
+		if (!document.documentElement.classList.contains('dark')) {
+			document.documentElement.classList.add('dark')
+			window.localStorage.setItem('dark-mode', 'dark')
+		} else {
+			document.documentElement.classList.remove('dark')
+			window.localStorage.setItem('dark-mode', 'light')
+		}
+	}
+
+	// Basic dropdown items
+	const basicItems = [
+		{
+			displayName: 'Edit',
+			icon: Pen,
+			action: () => console.log('Edit clicked')
+		},
+		{
+			displayName: 'Duplicate',
+			icon: GitFork,
+			action: () => console.log('Duplicate clicked')
+		},
+		{
+			displayName: 'Share',
+			icon: Share,
+			action: () => console.log('Share clicked')
+		},
+		{
+			displayName: 'Archive',
+			icon: Archive,
+			action: () => console.log('Archive clicked'),
+			type: 'delete' as const
+		}
+	]
+
+	// Dropdown with disabled items
+	const disabledItems = [
+		{
+			displayName: 'Available Action',
+			icon: Eye,
+			action: () => console.log('Available action')
+		},
+		{
+			displayName: 'Disabled Action',
+			icon: Settings,
+			action: () => console.log('This should not fire'),
+			disabled: true
+		},
+		{
+			displayName: 'Another Available',
+			icon: Copy,
+			action: () => console.log('Another available action')
+		},
+		{
+			displayName: 'Disabled Delete',
+			icon: Trash,
+			action: () => console.log('This should not fire'),
+			disabled: true,
+			type: 'delete' as const
+		}
+	]
+
+	// Dropdown with external links
+	const linkItems = [
+		{
+			displayName: 'Internal Link',
+			icon: Code,
+			href: '/scripts'
+		},
+		{
+			displayName: 'External Link',
+			icon: Earth,
+			href: 'https://windmill.dev',
+			hrefTarget: '_blank' as const
+		},
+		{
+			displayName: 'Documentation',
+			icon: Database,
+			href: 'https://docs.windmill.dev',
+			hrefTarget: '_blank' as const
+		}
+	]
+
+	// Button dropdown items
+	const buttonDropdownItems = [
+		{
+			label: 'Edit',
+			icon: Pen,
+			onClick: () => console.log('Edit clicked')
+		},
+		{
+			label: 'Duplicate',
+			icon: GitFork,
+			onClick: () => console.log('Duplicate clicked')
+		},
+		{
+			label: 'Archive',
+			icon: Archive,
+			onClick: () => console.log('Archive clicked')
+		},
+		{
+			label: 'Delete',
+			icon: Trash,
+			onClick: () => console.log('Delete clicked'),
+			disabled: true
+		}
+	]
+</script>
+
+<div class="p-8 flex flex-col gap-8 max-w-6xl mx-auto bg-surface-secondary min-h-screen pb-32">
+	<header class="flex flex-col gap-2">
+		<div class="flex items-center justify-between">
+			<h1 class="text-2xl font-semibold text-emphasis">Design system kitchen sink</h1>
+			<Button
+				variant="subtle"
+				size="xs"
+				startIcon={{ icon: darkMode ? Sun : Moon }}
+				onclick={toggleTheme}
+				title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+			>
+				{darkMode ? 'Light mode' : 'Dark mode'}
+			</Button>
+		</div>
+		<p class="text-xs text-secondary max-w-3xl">
+			Showcase of Button and Dropdown components following Windmill's design system guidelines.
+		</p>
+	</header>
+
+	<!-- BUTTON SECTION HEADER -->
+	<header class="flex flex-col gap-2 border-b border-gray-200 dark:border-gray-700 pb-4">
+		<h2 class="text-lg font-semibold text-emphasis">Buttons</h2>
+		<p class="text-xs text-secondary">
+			Design system button variants following semantic color guidelines.
+		</p>
+	</header>
+
+	<!-- Button Variants -->
+	<div class="flex flex-col gap-6">
+		<h3 class="text-sm font-semibold text-emphasis">Button variants</h3>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Default</h4>
+					<p class="text-xs text-secondary">Standard actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="default" size="sm">Default Button</Button>
+					<Button variant="default" size="xs" startIcon={{ icon: Pen }}>With Icon</Button>
+					<Button variant="default" size="xs" disabled>Disabled</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Accent</h4>
+					<p class="text-xs text-secondary">Primary actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent" size="sm">Accent Button</Button>
+					<Button variant="accent" size="xs" startIcon={{ icon: Play }}>Run Script</Button>
+					<Button variant="accent" size="xs" disabled>Disabled</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Accent Secondary</h4>
+					<p class="text-xs text-secondary">Secondary actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent-secondary" size="sm">Secondary</Button>
+					<Button variant="accent-secondary" size="xs" startIcon={{ icon: GitFork }}>Fork</Button>
+					<Button variant="accent-secondary" size="xs" disabled>Disabled</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Subtle</h4>
+					<p class="text-xs text-secondary">Utility actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="subtle" size="sm">Subtle Button</Button>
+					<Button variant="subtle" size="xs" startIcon={{ icon: Eye }}>View</Button>
+					<Button variant="subtle" size="xs" disabled>Disabled</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Destructive Buttons -->
+	<div class="flex flex-col gap-6 mt-8">
+		<h3 class="text-sm font-semibold text-emphasis">Destructive buttons</h3>
+		<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Destructive Default</h4>
+					<p class="text-xs text-secondary">Delete actions (subtle)</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="default" size="sm" destructive>Delete Item</Button>
+					<Button variant="default" size="xs" startIcon={{ icon: Trash }} destructive>Remove</Button
+					>
+					<Button variant="default" size="xs" disabled destructive>Disabled</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Destructive Accent</h4>
+					<p class="text-xs text-secondary">Critical delete actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent" size="sm" destructive>Delete Forever</Button>
+					<Button variant="accent" size="xs" startIcon={{ icon: Trash }} destructive
+						>Remove All</Button
+					>
+					<Button variant="accent" size="xs" disabled destructive>Disabled</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Destructive Accent Secondary</h4>
+					<p class="text-xs text-secondary">Important delete actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent-secondary" size="sm" destructive>Archive</Button>
+					<Button variant="accent-secondary" size="xs" startIcon={{ icon: Archive }} destructive
+						>Archive Item</Button
+					>
+					<Button variant="accent-secondary" size="xs" disabled destructive>Disabled</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Destructive Subtle</h4>
+					<p class="text-xs text-secondary">Minimal delete actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="subtle" size="sm" destructive>Remove</Button>
+					<Button variant="subtle" size="xs" startIcon={{ icon: X }} destructive>Clear</Button>
+					<Button variant="subtle" size="xs" disabled destructive>Disabled</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Button Sizes -->
+	<div class="flex flex-col gap-6 mt-8">
+		<h3 class="text-sm font-semibold text-emphasis">Button sizes</h3>
+		<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Large (lg)</h4>
+					<p class="text-xs text-secondary">Prominent actions</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent" size="lg">Large Button</Button>
+					<Button variant="default" size="lg" startIcon={{ icon: Plus }}>Add Item</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Medium (sm)</h4>
+					<p class="text-xs text-secondary">Standard size</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent" size="sm">Medium Button</Button>
+					<Button variant="default" size="sm" startIcon={{ icon: Save }}>Save</Button>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Small (xs)</h4>
+					<p class="text-xs text-secondary">Compact interfaces</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent" size="xs">Small Button</Button>
+					<Button variant="default" size="xs" startIcon={{ icon: Search }}>Search</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Buttons with dropdown -->
+	<div class="flex flex-col gap-6 mt-8">
+		<h3 class="text-sm font-semibold text-emphasis">Buttons with dropdown</h3>
+		<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Default with dropdown</h4>
+					<p class="text-xs text-secondary">Standard actions with menu</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="default" size="sm" dropdownItems={buttonDropdownItems}>Actions</Button>
+					<Button
+						variant="default"
+						size="xs"
+						dropdownItems={buttonDropdownItems}
+						startIcon={{ icon: Settings }}>Options</Button
+					>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Accent with dropdown</h4>
+					<p class="text-xs text-secondary">Primary actions with menu</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent" size="sm" dropdownItems={buttonDropdownItems}>Actions</Button>
+					<Button
+						variant="accent"
+						size="xs"
+						dropdownItems={buttonDropdownItems}
+						startIcon={{ icon: Play }}>Run</Button
+					>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Accent Secondary with dropdown</h4>
+					<p class="text-xs text-secondary">Secondary actions with menu</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent-secondary" size="sm" dropdownItems={buttonDropdownItems}
+						>Actions</Button
+					>
+					<Button
+						variant="accent-secondary"
+						size="xs"
+						dropdownItems={buttonDropdownItems}
+						startIcon={{ icon: GitFork }}>Fork</Button
+					>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Subtle with dropdown</h4>
+					<p class="text-xs text-secondary">Utility actions with menu</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="subtle" size="sm" dropdownItems={buttonDropdownItems}>Actions</Button>
+					<Button
+						variant="subtle"
+						size="xs"
+						dropdownItems={buttonDropdownItems}
+						startIcon={{ icon: Eye }}>View</Button
+					>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Destructive with dropdown</h4>
+					<p class="text-xs text-secondary">Delete actions with menu</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<Button variant="accent" size="sm" dropdownItems={buttonDropdownItems} destructive
+						>Delete</Button
+					>
+					<Button
+						variant="default"
+						size="xs"
+						dropdownItems={buttonDropdownItems}
+						startIcon={{ icon: Trash }}
+						destructive>Remove</Button
+					>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- TOGGLE SECTION HEADER -->
+	<header class="flex flex-col gap-2 border-b border-gray-200 dark:border-gray-700 pb-4 mt-12">
+		<h2 class="text-lg font-semibold text-emphasis">Toggle Buttons</h2>
+		<p class="text-xs text-secondary"> Toggle button groups for selection and filtering. </p>
+	</header>
+
+	<!-- Toggle Examples -->
+	<div class="flex flex-col gap-6">
+		<h3 class="text-sm font-semibold text-emphasis">Toggle button groups</h3>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Basic Toggle</h4>
+					<p class="text-xs text-secondary">Simple option selection</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<ToggleButtonGroup bind:selected={selectedToggle1}>
+						{#snippet children({ item })}
+							<ToggleButton value="option1" label="Option 1" {item} />
+							<ToggleButton value="option2" label="Option 2" {item} />
+							<ToggleButton value="option3" label="Option 3" {item} />
+						{/snippet}
+					</ToggleButtonGroup>
+					<p class="text-2xs text-primary">Selected: {selectedToggle1}</p>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">With Icons</h4>
+					<p class="text-xs text-secondary">Toggle with icon variants</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<ToggleButtonGroup bind:selected={selectedToggle2}>
+						{#snippet children({ item })}
+							<ToggleButton value="small" label="Small" icon={Search} {item} small />
+							<ToggleButton value="medium" label="Medium" icon={Settings} {item} small />
+							<ToggleButton value="large" label="Large" icon={Plus} {item} small />
+						{/snippet}
+					</ToggleButtonGroup>
+					<p class="text-2xs text-primary">Selected: {selectedToggle2}</p>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Icon Only</h4>
+					<p class="text-xs text-secondary">Compact icon-only toggles</p>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<ToggleButtonGroup bind:selected={selectedToggle3}>
+						{#snippet children({ item })}
+							<ToggleButton value="view" icon={Eye} {item} iconOnly tooltip="View mode" />
+							<ToggleButton value="edit" icon={Pen} {item} iconOnly tooltip="Edit mode" />
+							<ToggleButton value="share" icon={Share} {item} iconOnly tooltip="Share mode" />
+						{/snippet}
+					</ToggleButtonGroup>
+					<p class="text-2xs text-primary">Selected: {selectedToggle3}</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- DROPDOWN SECTION HEADER -->
+	<header class="flex flex-col gap-2 border-b border-gray-200 dark:border-gray-700 pb-4 mt-12">
+		<h2 class="text-lg font-semibold text-emphasis">Dropdowns</h2>
+		<p class="text-xs text-secondary">
+			Contextual menu components with consistent styling and accessibility.
+		</p>
+	</header>
+
+	<!-- Dropdown Examples -->
+	<div class="flex flex-col gap-6">
+		<h3 class="text-sm font-semibold text-emphasis">Dropdown types</h3>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Standard Actions</h4>
+					<p class="text-xs text-secondary">Common operations</p>
+				</div>
+				<div class="flex justify-end">
+					<DropdownV2 items={basicItems} aiId="basic-dropdown" />
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">With Links</h4>
+					<p class="text-xs text-secondary">Navigation items</p>
+				</div>
+				<div class="flex justify-end">
+					<DropdownV2 items={linkItems} aiId="link-dropdown" />
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Mixed States</h4>
+					<p class="text-xs text-secondary">Enabled and disabled</p>
+				</div>
+				<div class="flex justify-end">
+					<DropdownV2 items={disabledItems} aiId="disabled-dropdown" />
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- INPUT SECTION HEADER -->
+	<header class="flex flex-col gap-2 border-b border-gray-200 dark:border-gray-700 pb-4 mt-12">
+		<h2 class="text-lg font-semibold text-emphasis">Input Components</h2>
+		<p class="text-xs text-secondary">
+			Text inputs, date pickers, and form controls with proper validation states.
+		</p>
+	</header>
+
+	<!-- Basic Text Inputs -->
+	<div class="flex flex-col gap-6">
+		<h3 class="text-sm font-semibold text-emphasis">Text inputs</h3>
+
+		<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Basic Text Input</h4>
+					<p class="text-xs text-secondary">Standard text field</p>
+				</div>
+				<div class="space-y-2">
+					<TextInput bind:value={basicTextValue} />
+					<TextInput
+						bind:value={placeholderTextValue}
+						inputProps={{ placeholder: 'Enter text here...' }}
+					/>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Input States</h4>
+					<p class="text-xs text-secondary">Error and disabled states</p>
+				</div>
+				<div class="space-y-2">
+					<TextInput bind:value={errorTextValue} error="This field has an error" />
+					<TextInput bind:value={disabledTextValue} inputProps={{ disabled: true }} />
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Clearable Inputs</h4>
+					<p class="text-xs text-secondary">Text inputs with clear button</p>
+				</div>
+				<div class="space-y-2">
+					<ClearableInput bind:value={clearableValue} placeholder="Clearable text input" />
+					<ClearableInput bind:value={numberValue} type="number" placeholder="Number input" />
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Text Area</h4>
+					<p class="text-xs text-secondary">Multi-line text input</p>
+				</div>
+				<div class="space-y-2">
+					<ClearableInput
+						bind:value={textAreaValue}
+						type="textarea"
+						placeholder="Enter multiple lines..."
+					/>
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">Date Input</h4>
+					<p class="text-xs text-secondary">Date picker component</p>
+				</div>
+				<div class="space-y-2">
+					<DateInput bind:value={dateValue} />
+				</div>
+			</div>
+
+			<div
+				class="flex flex-col space-y-4 p-6 border border-gray-200 dark:border-gray-700 rounded-lg bg-surface"
+			>
+				<div class="space-y-1">
+					<h4 class="text-xs font-semibold text-emphasis">DateTime Input</h4>
+					<p class="text-xs text-secondary">Date and time picker</p>
+				</div>
+				<div class="space-y-2">
+					<DateTimeInput bind:value={dateTimeValue} />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<DarkModeObserver bind:darkMode />
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 1eb0f711fb..a3540878ea 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -4,68 +4,11 @@ const {
 } = require('./src/lib/components/apps/editor/componentsPanel/tailwindUtils')
 const { zIndexes } = require('./src/lib/zIndexes')
 
-const lightTheme = {
-	surface: '#ffffff',
-	surfaceSecondary: '#f3f4f6',
-	surfaceHover: '#e5e7eb',
-	surfaceDisabled: '#f9fafb',
-	surfaceSelected: '#d1d5db',
+const figmaTokens = makeRgb(require('./src/lib/assets/tokens/tokens.json'))
+const { darkModeName, lightModeName } = require('./src/lib/assets/tokens/colorTokensConfig')
 
-	textPrimary: '#2d3748',
-	textSecondary: '#4a5568',
-	textTertiary: '#505c70',
-	textHint: '#757E8F',
-	textDisabled: '#a0aec0',
-
-	border: '#dddddd',
-	borderHover: '#cccccc'
-}
-
-const lightThemeRgb = makeRgb(lightTheme)
-
-const darkTheme = {
-	surface: '#2e3440',
-	surfaceSecondary: '#3b4252',
-	surfaceHover: '#454F64',
-	surfaceDisabled: '#212732',
-	surfaceSelected: '#434c5e',
-
-	textPrimary: '#EEEEEE',
-	textSecondary: '#C2C9D1',
-	textTertiary: '#A8AEB7',
-	textHint: '#989DA5',
-	textDisabled: '#989DA5',
-
-	border: '#3e4c60',
-	borderHover: '#3e4c60'
-}
-
-const darkThemeRgb = makeRgb(darkTheme)
-
-function makeRgb(theme) {
-	return Object.fromEntries(
-		Object.entries(theme).map(([key, value]) => {
-			if (typeof value === 'string' && value.startsWith('#')) {
-				return [key, hexToRgb(value)]
-			}
-
-			return [key, value]
-		})
-	)
-}
-
-function hexToRgb(hex) {
-	// Remove '#' symbol from the beginning of the hex value
-	hex = hex.replace('#', '')
-
-	// Convert the hex value to decimal
-	const r = parseInt(hex.substring(0, 2), 16)
-	const g = parseInt(hex.substring(2, 4), 16)
-	const b = parseInt(hex.substring(4, 6), 16)
-
-	// Return the RGB string format
-	return `${r} ${g} ${b}`
-}
+const tokens = { dark: figmaTokens.tokens[darkModeName], light: figmaTokens.tokens[lightModeName] }
+const primitives = figmaTokens.primitives.light
 
 /** @type {import('tailwindcss').Config} */
 const config = {
@@ -96,6 +39,89 @@ const config = {
 			transparent: 'transparent',
 			white: '#ffffff',
 			black: '#000000',
+
+			// Surface colors (semantic)
+			surface: 'rgb(var(--color-surface-primary) / <alpha-value>)',
+			'surface-secondary': 'rgb(var(--color-surface-secondary) / <alpha-value>)',
+			'surface-sunken': 'rgb(var(--color-surface-sunken) / <alpha-value>)',
+			'surface-tertiary': 'rgb(var(--color-surface-tertiary) / <alpha-value>)',
+			'surface-hover': 'rgb(var(--color-surface-hover) / <alpha-value>)',
+			'surface-disabled': 'rgb(var(--color-surface-disabled) / <alpha-value>)',
+			'surface-selected': 'rgb(var(--color-surface-selected) / <alpha-value>)',
+			'surface-accent-primary': 'rgb(var(--color-surface-accent-primary) / <alpha-value>)',
+			'surface-accent-hover': 'rgb(var(--color-surface-accent-hover) / <alpha-value>)',
+			'surface-accent-clicked': 'rgb(var(--color-surface-accent-clicked) / <alpha-value>)',
+			'surface-accent-secondary': 'rgb(var(--color-surface-accent-secondary) / <alpha-value>)',
+			'surface-accent-secondary-hover':
+				'rgb(var(--color-surface-accent-secondary-hover) / <alpha-value>)',
+			'surface-accent-secondary-clicked':
+				'rgb(var(--color-surface-accent-secondary-clicked) / <alpha-value>)',
+			'surface-accent-selected': 'rgb(var(--color-surface-accent-selected))',
+			'surface-input': 'rgb(var(--color-surface-input))',
+
+			// Text colors (semantic)
+			primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
+			secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
+			tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
+			hint: 'rgb(var(--color-text-hint) / <alpha-value>)',
+			disabled: 'rgb(var(--color-text-disabled) / <alpha-value>)',
+			emphasis: 'rgb(var(--color-text-emphasis) / <alpha-value>)',
+			accent: 'rgb(var(--color-text-accent) / <alpha-value>)',
+
+			// Inverse colors (computed from opposite theme)
+			'primary-inverse': 'rgb(var(--color-text-primary-inverse) / <alpha-value>)',
+			'secondary-inverse': 'rgb(var(--color-text-secondary-inverse) / <alpha-value>)',
+			'tertiary-inverse': 'rgb(var(--color-text-tertiary-inverse) / <alpha-value>)',
+			'emphasis-inverse': 'rgb(var(--color-text-emphasis-inverse) / <alpha-value>)',
+			'hint-inverse': 'rgb(var(--color-text-hint-inverse) / <alpha-value>)',
+			'disabled-inverse': 'rgb(var(--color-text-disabled-inverse) / <alpha-value>)',
+
+			// Border colors (semantic)
+			'border-light': 'rgb(var(--color-border-light) / <alpha-value>)',
+			'border-normal': 'rgb(var(--color-border-normal) / <alpha-value>)',
+			'border-accent': 'rgb(var(--color-border-accent) / <alpha-value>)',
+			'border-selected': 'rgb(var(--color-border-selected) / <alpha-value>)',
+
+			// Reserved colors (semantic)
+			ai: 'rgb(var(--color-reserved-ai) / <alpha-value>)',
+			'ai-inverse': 'rgb(var(--color-reserved-ai-inverse) / <alpha-value>)',
+
+			// Surface inverse colors (computed from opposite theme)
+			'surface-inverse': 'rgb(var(--color-surface-primary-inverse) / <alpha-value>)',
+			'surface-secondary-inverse': 'rgb(var(--color-surface-secondary-inverse) / <alpha-value>)',
+			'surface-hover-inverse': 'rgb(var(--color-surface-hover-inverse) / <alpha-value>)',
+			'surface-disabled-inverse': 'rgb(var(--color-surface-disabled-inverse) / <alpha-value>)',
+			'surface-selected-inverse': 'rgb(var(--color-surface-selected-inverse) / <alpha-value>)',
+
+			// Component colors
+			'component-virtual-node': 'rgb(var(--color-component-virtual-node) / <alpha-value>)',
+
+			// Design token colors
+			'light-blue': `rgb(${primitives['light-blue']})`,
+			'deep-blue': {
+				50: `rgb(${primitives['deep-blue-50']})`,
+				100: `rgb(${primitives['deep-blue-100']})`,
+				200: `rgb(${primitives['deep-blue-200']})`,
+				300: `rgb(${primitives['deep-blue-300']})`,
+				400: `rgb(${primitives['deep-blue-400']})`,
+				500: `rgb(${primitives['deep-blue-500']})`,
+				600: `rgb(${primitives['deep-blue-600']})`,
+				700: `rgb(${primitives['deep-blue-700']})`,
+				800: `rgb(${primitives['deep-blue-800']})`,
+				900: `rgb(${primitives['deep-blue-900']})`
+			},
+			'luminance-blue': {
+				50: `rgb(${primitives['luminance-blue-50']})`,
+				100: `rgb(${primitives['luminance-blue-100']})`,
+				200: `rgb(${primitives['luminance-blue-200']})`,
+				300: `rgb(${primitives['luminance-blue-300']})`,
+				400: `rgb(${primitives['luminance-blue-400']})`,
+				500: `rgb(${primitives['luminance-blue-500']})`,
+				600: `rgb(${primitives['luminance-blue-600']})`,
+				700: `rgb(${primitives['luminance-blue-700']})`,
+				800: `rgb(${primitives['luminance-blue-800']})`,
+				900: `rgb(${primitives['luminance-blue-900']})`
+			},
 			slate: {
 				50: '#f8fafc',
 				100: '#f1f5f9',
@@ -404,31 +430,7 @@ const config = {
 				800: '#88C0D0',
 				900: '#81A1C1',
 				950: '#5E81AC'
-			},
-
-			surface: 'rgb(var(--color-surface) / <alpha-value>)',
-			'surface-secondary': 'rgb(var(--color-surface-secondary) / <alpha-value>)',
-			'surface-hover': 'rgb(var(--color-surface-hover) / <alpha-value>)',
-			'surface-disabled': 'rgb(var(--color-surface-disabled) / <alpha-value>)',
-			'surface-selected': 'rgb(var(--color-surface-selected) / <alpha-value>)',
-
-			primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
-			secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
-			tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
-			hint: 'rgb(var(--color-text-hint) / <alpha-value>)',
-			disabled: 'rgb(var(--color-text-disabled) / <alpha-value>)',
-
-			'surface-inverse': 'rgb(var(--color-surface-inverse) / <alpha-value>)',
-			'surface-secondary-inverse': 'rgb(var(--color-surface-secondary-inverse) / <alpha-value>)',
-			'surface-hover-inverse': 'rgb(var(--color-surface-hover-inverse) / <alpha-value>)',
-			'surface-disabled-inverse': 'rgb(var(--color-surface-disabled-inverse) / <alpha-value>)',
-			'surface-selected-inverse': 'rgb(var(--color-surface-selected-inverse) / <alpha-value>)',
-
-			'primary-inverse': 'rgb(var(--color-text-primary-inverse) / <alpha-value>)',
-			'secondary-inverse': 'rgb(var(--color-text-secondary-inverse) / <alpha-value>)',
-			'tertiary-inverse': 'rgb(var(--color-text-tertiary-inverse) / <alpha-value>)',
-			'hint-inverse': 'rgb(var(--color-text-hint-inverse) / <alpha-value>)',
-			'disabled-inverse': 'rgb(var(--color-text-disabled-inverse) / <alpha-value>)'
+			}
 		},
 		fontFamily: {
 			// add double quotes if there is space in font name
@@ -481,6 +483,9 @@ const config = {
 				qhd: '2500px',
 				'4k': '3800px'
 			},
+			dropShadow: {
+				base: ['0 2px 1px rgba(0, 0, 0, 0.06)', '0 2px 2px rgba(0, 0, 0, 0.1)']
+			},
 			animation: {
 				'spin-counter-clockwise': 'spin-counter-clockwise 1s linear infinite',
 				'zoom-in': 'zoom-in 0.25s ease-in-out',
@@ -506,40 +511,24 @@ const config = {
 		require('@tailwindcss/forms'),
 		require('@tailwindcss/typography'),
 		plugin(({ addBase, addComponents, addUtilities, theme }) => {
+			let lightColorVariables = Object.fromEntries([
+				...Object.entries(tokens.light).map(([key, value]) => [`--color-${key}`, value]),
+				...Object.entries(tokens.dark).map(([key, value]) => [`--color-${key}-inverse`, value])
+			])
+			let darkColorVariables = Object.fromEntries([
+				...Object.entries(tokens.dark).map(([key, value]) => [`--color-${key}`, value]),
+				...Object.entries(tokens.light).map(([key, value]) => [`--color-${key}-inverse`, value])
+			])
+
 			addBase({
 				html: {
 					fontFamily: theme('fontFamily.main'),
 					fontSize: theme('fontSize.base'),
 					fontWeight: theme('fontWeight.normal'),
 
-					backgroundColor: 'rgb(var(--color-surface))',
-					color: lightTheme.textPrimary,
-					'--color-surface': lightThemeRgb.surface,
-					'--color-surface-secondary': lightThemeRgb.surfaceSecondary,
-					'--color-surface-hover': lightThemeRgb.surfaceHover,
-					'--color-surface-disabled': lightThemeRgb.surfaceDisabled,
-					'--color-surface-selected': lightThemeRgb.surfaceSelected,
-
-					'--color-text-primary': lightThemeRgb.textPrimary,
-					'--color-text-secondary': lightThemeRgb.textSecondary,
-					'--color-text-tertiary': lightThemeRgb.textTertiary,
-					'--color-text-hint': lightThemeRgb.textHint,
-					'--color-text-disabled': lightThemeRgb.textDisabled,
-
-					'--color-surface-inverse': darkThemeRgb.surface,
-					'--color-surface-secondary-inverse': darkThemeRgb.surfaceSecondary,
-					'--color-surface-hover-inverse': darkThemeRgb.surfaceHover,
-					'--color-surface-disabled-inverse': darkThemeRgb.surfaceDisabled,
-					'--color-surface-selected-inverse': darkThemeRgb.surfaceSelected,
-
-					'--color-text-primary-inverse': darkThemeRgb.textPrimary,
-					'--color-text-secondary-inverse': darkThemeRgb.textSecondary,
-					'--color-text-tertiary-inverse': darkThemeRgb.textTertiary,
-					'--color-text-hint-inverse': darkThemeRgb.textHint,
-					'--color-text-disabled-inverse': darkThemeRgb.textDisabled,
-
-					'--color-border': lightThemeRgb.border,
-					'--color-border-hover': lightThemeRgb.borderHover,
+					...lightColorVariables,
+					backgroundColor: 'rgb(var(--color-surface-primary))',
+					color: 'rgb(var(--color-text-primary))',
 
 					'--vscode-editorSuggestWidget-background': '#f3f3f3',
 					'--vscode-editorHoverWidget-foreground': '#616161',
@@ -554,35 +543,10 @@ const config = {
 					},
 
 					'&.dark': {
-						backgroundColor: darkTheme.surface,
-						color: darkTheme.textPrimary,
+						backgroundColor: `rgb(${tokens.dark['surface-primary']})`,
+						color: `rgb(${tokens.dark['text-primary']})`,
 
-						'--color-surface': darkThemeRgb.surface,
-						'--color-surface-secondary': darkThemeRgb.surfaceSecondary,
-						'--color-surface-hover': darkThemeRgb.surfaceHover,
-						'--color-surface-disabled': darkThemeRgb.surfaceDisabled,
-						'--color-surface-selected': darkThemeRgb.surfaceSelected,
-
-						'--color-text-primary': darkThemeRgb.textPrimary,
-						'--color-text-secondary': darkThemeRgb.textSecondary,
-						'--color-text-tertiary': darkThemeRgb.textTertiary,
-						'--color-text-hint': darkThemeRgb.textHint,
-						'--color-text-disabled': darkThemeRgb.textDisabled,
-
-						'--color-surface-inverse': lightThemeRgb.surface,
-						'--color-surface-secondary-inverse': lightThemeRgb.surfaceSecondary,
-						'--color-surface-hover-inverse': lightThemeRgb.surfaceHover,
-						'--color-surface-disabled-inverse': lightThemeRgb.surfaceDisabled,
-						'--color-surface-selected-inverse': lightThemeRgb.surfaceSelected,
-
-						'--color-text-primary-inverse': lightThemeRgb.textPrimary,
-						'--color-text-secondary-inverse': lightThemeRgb.textSecondary,
-						'--color-text-tertiary-inverse': lightThemeRgb.textTertiary,
-						'--color-text-hint-inverse': lightThemeRgb.textHint,
-						'--color-text-disabled-inverse': lightThemeRgb.textDisabled,
-
-						'--color-border': darkThemeRgb.border,
-						'--color-border-hover': darkThemeRgb.borderHover,
+						...darkColorVariables,
 
 						'--vscode-editorSuggestWidget-background': '#252526',
 						'--vscode-editorHoverWidget-foreground': '#cccccc',
@@ -658,7 +622,7 @@ const config = {
 					fontWeight: theme('fontWeight.semibold')
 				},
 				a: {
-					color: theme('colors.blue.500')
+					color: 'rgb(var(--color-text-accent))'
 				},
 				'.dark input::placeholder': {
 					color: theme('colors.gray.400')
@@ -672,35 +636,22 @@ const config = {
 				'input:not(.windmillapp):not(.no-default-style),input[type="text"]:not(.windmillapp):not(.no-default-style),input[type="email"]:not(.windmillapp):not(.no-default-style),input[type="url"]:not(.windmillapp):not(.no-default-style),input[type="password"]:not(.windmillapp):not(.no-default-style),input[type="number"]:not(.windmillapp):not(.no-default-style),input[type="date"]:not(.windmillapp):not(.no-default-style),input[type="datetime-local"]:not(.windmillapp):not(.no-default-style),input[type="month"]:not(.windmillapp):not(.no-default-style),input[type="search"]:not(.windmillapp):not(.no-default-style),input[type="tel"]:not(.windmillapp):not(.no-default-style),input[type="time"]:not(.windmillapp):not(.no-default-style),input[type="week"]:not(.windmillapp):not(.no-default-style),textarea:not(.windmillapp):not(.no-default-style):not(.monaco-mouse-cursor-text),select:not(.windmillapp):not(.no-default-style)':
 					{
 						display: 'block',
-						fontSize: theme('fontSize.sm'),
-						boxShadow: theme('boxShadow.sm'),
+						fontSize: theme('fontSize.xs'),
 						width: '100%',
 						padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
-						border: `1px solid ${theme('colors.gray.300')}`,
+						backgroundColor: 'rgb(var(--color-surface-input))' + ' !important',
+						border: '1px solid rgb(var(--color-border-light))',
 						borderRadius: theme('borderRadius.md'),
+						'&:hover': {
+							borderColor: 'rgb(var(--color-border-selected) / 0.5)'
+						},
 						'&:focus': {
-							'--tw-ring-color': theme('colors.frost.100'),
-							'--tw-ring-offset-shadow':
-								'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
-							'--tw-ring-shadow':
-								'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
-							boxShadow:
-								'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)'
+							borderColor: 'rgb(var(--color-border-selected))',
+							outline: 'none',
+							boxShadow: 'none'
 						},
 						'&:disabled,[disabled]': {
-							backgroundColor: theme('colors.gray.100') + ' !important',
-							'.dark &': {
-								backgroundColor: theme('colors.gray.700') + ' !important'
-							}
-						}
-					},
-				'.dark input:not(.windmillapp):not(.no-default-style),.dark input[type="text"]:not(.windmillapp):not(.no-default-style),.dark input[type="email"]:not(.windmillapp):not(.no-default-style),.dark input[type="url"]:not(.windmillapp):not(.no-default-style),.dark input[type="password"]:not(.windmillapp):not(.no-default-style),.dark input[type="number"]:not(.windmillapp):not(.no-default-style),.dark input[type="date"]:not(.windmillapp):not(.no-default-style),.dark input[type="datetime-local"]:not(.windmillapp):not(.no-default-style),.dark input[type="month"]:not(.windmillapp):not(.no-default-style),.dark input[type="search"]:not(.windmillapp):not(.no-default-style),.dark input[type="tel"]:not(.windmillapp):not(.no-default-style),.dark input[type="time"]:not(.windmillapp):not(.no-default-style),.dark input[type="week"]:not(.windmillapp):not(.no-default-style),.dark textarea:not(.windmillapp):not(.no-default-style):not(.monaco-mouse-cursor-text),.dark select:not(.windmillapp):not(.no-default-style)':
-					{
-						backgroundColor: theme('colors.gray.700'),
-						color: theme('colors.gray.200'),
-						borderColor: theme('colors.gray.600'),
-						'&:focus': {
-							'--tw-ring-color': theme('colors.frost.700')
+							backgroundColor: 'rgba(var(--color-surface-disabled) / 0.2)' + ' !important'
 						}
 					},
 
@@ -765,41 +716,41 @@ const config = {
 			addComponents({
 				'.table-custom': {
 					'& th': {
-						paddingTop: theme('spacing.3'),
+						paddingTop: theme('spacing.2'),
 						paddingRight: theme('spacing.1'),
 						paddingLeft: theme('spacing.1'),
-						paddingBottom: theme('spacing.3'),
-						fontSize: theme('fontSize.sm'),
+						paddingBottom: theme('spacing.2'),
+						fontSize: theme('fontSize.2xs'),
 						textAlign: 'left',
-						fontWeight: theme('fontWeight.semibold'),
-						color: theme('colors.gray.900'),
-						textTransform: 'capitalize'
+						fontWeight: theme('fontWeight.normal'),
+						color: 'rgb(var(--color-text-secondary))',
+						textTransform: 'none'
 					},
 					'.dark & th': {
-						color: theme('colors.gray.200')
+						color: 'rgb(var(--color-text-secondary))'
 					},
 					'& td': {
 						paddingLeft: theme('spacing.1'),
 						paddingRight: theme('spacing.1'),
 						paddingTop: theme('spacing.2'),
 						paddingBottom: theme('spacing.2'),
-						fontSize: theme('fontSize.sm'),
-						color: theme('colors.gray.700')
+						fontSize: theme('fontSize.xs'),
+						color: 'rgb(var(--color-text-primary))'
 					},
 					'.dark & td ': {
-						color: theme('colors.gray.200')
+						color: 'rgb(var(--color-text-primary))'
 					},
 					'& tbody > :not([hidden]) ~ :not([hidden])': {
-						borderTop: `1px solid ${theme('colors.gray.200')}`
+						borderTop: `1px solid rgb(var(--color-border-light))`
 					},
 					'.dark & tbody > :not([hidden]) ~ :not([hidden])': {
-						borderTop: `1px solid ${theme('colors.gray.700')}`
+						borderTop: `1px solid rgb(var(--color-border-light))`
 					},
 					'& tbody > tr:hover': {
-						backgroundColor: theme('colors.gray.50')
+						backgroundColor: 'rgb(var(--color-surface-hover))'
 					},
 					'.dark & tbody > tr:hover': {
-						backgroundColor: theme('colors.gray.800')
+						backgroundColor: 'rgb(var(--color-surface-hover))'
 					}
 				},
 				'.commit-hash': {
@@ -830,19 +781,19 @@ const config = {
 					)})`
 				},
 				'.splitpanes__pane': {
-					backgroundColor: lightTheme.surface + ' !important',
+					backgroundColor: `rgb(${tokens.light['surface-primary']})` + ' !important',
 					overflow: 'auto !important'
 				},
 				'.dark .splitpanes__pane': {
-					backgroundColor: darkTheme.surface + ' !important',
+					backgroundColor: `rgb(${tokens.dark['surface-primary']})` + ' !important',
 					overflow: 'auto !important'
 				},
 				'.splitpanes__splitter': {
-					backgroundColor: lightTheme.border + ' !important',
+					backgroundColor: `rgb(${tokens.light['border-light']})` + ' !important',
 					margin: '0 !important',
 					border: 'none !important',
 					'&::after': {
-						backgroundColor: lightTheme.border + ' !important',
+						backgroundColor: `rgb(${tokens.light['border-light']})` + ' !important',
 						margin: '0 !important',
 						transform: 'none !important',
 						transition: 'opacity 200ms !important',
@@ -856,9 +807,9 @@ const config = {
 					}
 				},
 				'.dark .splitpanes__splitter': {
-					backgroundColor: darkTheme.border + ' !important',
+					backgroundColor: `rgb(${tokens.dark['border-light']})` + ' !important',
 					'&::after': {
-						backgroundColor: darkTheme.border + ' !important'
+						backgroundColor: `rgb(${tokens.dark['border-light']})` + ' !important'
 					}
 				},
 				'.splitpanes--vertical>.splitpanes__splitter': {
@@ -892,22 +843,22 @@ const config = {
 				// Windmill Tab classes
 
 				'.wm-tab-active': {
-					borderColor: darkTheme.border,
-					color: lightTheme.textPrimary
+					borderColor: `rgb(${tokens.dark['border-light']})`,
+					color: `rgb(${tokens.light['text-primary']})`
 				},
 
 				'.dark .wm-tab-active': {
-					borderColor: lightTheme.border,
-					color: darkTheme.textPrimary
+					borderColor: `rgb(${tokens.dark['border-light']})`,
+					color: `rgb(${tokens.dark['text-primary']})`
 				}
 			})
 
 			addUtilities({
 				'.separator': {
-					backgroundColor: `${lightTheme.border} !important`
+					backgroundColor: `${`rgb(${tokens.dark['border-light']})`} !important`
 				},
 				'.dark .separator': {
-					backgroundColor: `${darkTheme.border} !important`
+					backgroundColor: `${`rgb(${tokens.dark['border-light']})`} !important`
 				},
 				'.center-center': {
 					display: 'flex',
@@ -915,10 +866,10 @@ const config = {
 					alignItems: 'center'
 				},
 				'.inner-border': {
-					boxShadow: `inset 0 0 0 1px ${lightTheme.border}`
+					boxShadow: `inset 0 0 0 1px ${`rgb(${tokens.dark['border-light']})`}`
 				},
 				'.dark .inner-border': {
-					boxShadow: `inset 0 0 0 1px ${darkTheme.border}`
+					boxShadow: `inset 0 0 0 1px ${`rgb(${tokens.dark['border-light']})`}`
 				},
 				'.z5000': {
 					zIndex: '5000 !important'
@@ -957,3 +908,35 @@ const config = {
 }
 
 module.exports = config
+
+/**
+ * @template T
+ * @param {T} obj
+ * @returns {T}
+ */
+function makeRgb(obj) {
+	const result = {}
+	for (const [key, value] of Object.entries(obj)) {
+		if (typeof value === 'object' && value !== null) {
+			result[key] = makeRgb(value)
+		} else if (typeof value === 'string' && value.startsWith('#')) {
+			result[key] = hexToRgb(value)
+		} else {
+			result[key] = value
+		}
+	}
+	return result
+}
+
+function hexToRgb(hex) {
+	// Remove '#' symbol from the beginning of the hex value
+	hex = hex.replace('#', '')
+
+	// Convert the hex value to decimal
+	const r = parseInt(hex.substring(0, 2), 16)
+	const g = parseInt(hex.substring(2, 4), 16)
+	const b = parseInt(hex.substring(4, 6), 16)
+
+	// Return the RGB string format
+	return `${r} ${g} ${b}`
+}