diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index 92ae0e1003..6188ce04d7 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -2,6 +2,7 @@
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
 	import Portal from 'svelte-portal'
+	import { ExternalLink } from 'lucide-svelte'
 
 	export let placement: PopoverPlacement = 'auto'
 	export let notClickable = false
@@ -9,6 +10,7 @@
 	export let disablePopup = false
 	export let disappearTimeout = 100
 	export let appearTimeout = 300
+	export let documentationLink: string | undefined = undefined
 
 	const [popperRef, popperContent] = createPopperActions({ placement })
 
@@ -46,6 +48,7 @@
 </script>
 
 {#if notClickable}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<span use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
 		<slot />
 	</span>
@@ -56,15 +59,23 @@
 {/if}
 {#if showTooltip && !disablePopup}
 	<Portal>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}
 			on:mouseenter={open}
 			on:mouseleave={close}
-			class="z-[5001] py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800
-		whitespace-normal text-left {popupClass}"
+			class="z-[5001] py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left {popupClass}"
 		>
 			<div class="max-w-sm">
 				<slot name="text" />
+				{#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}
 			</div>
 		</div>
 	</Portal>
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 34cac291ec..46826bb94b 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -10,12 +10,24 @@
 	import ScriptEditor from './ScriptEditor.svelte'
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 	import { Alert, Badge, Button, Drawer, Kbd, SecondsInput, Tab, TabContent, Tabs } from './common'
-	import { faPlus, faSave } from '@fortawesome/free-solid-svg-icons'
+	import { faSave } from '@fortawesome/free-solid-svg-icons'
 	import LanguageIcon from './common/languageIcons/LanguageIcon.svelte'
 	import type { SupportedLanguage } from '$lib/common'
 	import Tooltip from './Tooltip.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
-	import { Loader2, Pen, X } from 'lucide-svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import {
+		Bug,
+		CheckCircle,
+		Code,
+		ExternalLink,
+		Loader2,
+		Pen,
+		Plus,
+		Rocket,
+		X
+	} from 'lucide-svelte'
 	import autosize from 'svelte-autosize'
 	import type Editor from './Editor.svelte'
 	import { SCRIPT_SHOW_BASH, SCRIPT_SHOW_GO } from '$lib/consts'
@@ -23,11 +35,11 @@
 	import { sendUserToast } from '$lib/toast'
 	import { isCloudHosted } from '$lib/cloud'
 	import Awareness from './Awareness.svelte'
-	import { Icon } from 'svelte-awesome'
 	import { fade } from 'svelte/transition'
 	import Popover from './Popover.svelte'
 	import Toggle from './Toggle.svelte'
 	import ScriptSchema from './ScriptSchema.svelte'
+	import Section from './Section.svelte'
 
 	export let script: NewScript
 	export let initialPath: string = ''
@@ -77,33 +89,39 @@
 	langs.push(['Snowflake', Script.language.SNOWFLAKE])
 	langs.push(['GraphQL', Script.language.GRAPHQL])
 	langs.push(['PowerShell', Script.language.POWERSHELL])
+
 	const scriptKindOptions: {
 		value: Script.kind
 		title: string
+		Icon: any
 		desc?: string
 		documentationLink?: string
 	}[] = [
 		{
 			value: Script.kind.SCRIPT,
-			title: 'Action'
+			title: 'Action',
+			Icon: Code
 		},
 		{
 			value: Script.kind.TRIGGER,
 			title: 'Trigger',
 			desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.',
-			documentationLink: 'https://www.windmill.dev/docs/flows/flow_trigger'
+			documentationLink: 'https://www.windmill.dev/docs/flows/flow_trigger',
+			Icon: Rocket
 		},
 		{
 			value: Script.kind.APPROVAL,
 			title: 'Approval',
 			desc: 'Send notifications externally to ask for approval to continue a flow.',
-			documentationLink: 'https://www.windmill.dev/docs/flows/flow_approval'
+			documentationLink: 'https://www.windmill.dev/docs/flows/flow_approval',
+			Icon: CheckCircle
 		},
 		{
 			value: Script.kind.FAILURE,
 			title: 'Error Handler',
 			desc: 'Handle errors in flows after all retry attempts have been exhausted.',
-			documentationLink: 'https://www.windmill.dev/docs/flows/flow_error_handler'
+			documentationLink: 'https://www.windmill.dev/docs/flows/flow_error_handler',
+			Icon: Bug
 		}
 	]
 
@@ -277,339 +295,353 @@
 
 <svelte:window on:keydown={onKeyDown} />
 <UnsavedConfirmationModal />
+
 {#if !$userStore?.operator}
 	<Drawer placement="right" bind:open={metadataOpen} size="800px">
 		<DrawerContent noPadding title="Settings" on:close={() => (metadataOpen = false)}>
 			<Tabs bind:selected={selectedTab}>
 				<Tab value="metadata">Metadata</Tab>
 				<Tab value="runtime">Runtime</Tab>
-				<Tab value="ui"
-					>Generated UI<Tooltip
+				<Tab value="ui">
+					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
-				>
+					>
+						The arguments are synced with the main signature but you may refine the parts that
+						cannot be inferred from the type directly.
+					</Tooltip>
+				</Tab>
 				<svelte:fragment slot="content">
-					<div class="px-4">
+					<div class="p-4">
 						<TabContent value="metadata">
-							<div class="text-sm mt-4 text-secondary font-semibold">Summary</div>
+							<div class="flex flex-col gap-8 my-1.5">
+								<Section label="Metadata">
+									<div class="flex flex-col gap-4">
+										<div>
+											<span class="text-secondary text-sm leading-none">Summary</span>
+											<input
+												type="text"
+												autofocus
+												bind:value={script.summary}
+												placeholder="Short summary to be displayed when listed"
+												on:keyup={() => {
+													if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) {
+														path?.setName(
+															script.summary
+																.toLowerCase()
+																.replace(/[^a-z0-9_]/g, '_')
+																.replace(/-+/g, '_')
+																.replace(/^-|-$/g, '')
+														)
+													}
+												}}
+											/>
+										</div>
+										<div>
+											<span class="text-secondary text-sm leading-none">Description</span>
+											<textarea
+												use:autosize
+												bind:value={script.description}
+												placeholder="Description displayed in the details page"
+												class="text-sm"
+											/>
+										</div>
+									</div>
+								</Section>
 
-							<input
-								type="text"
-								autofocus
-								bind:value={script.summary}
-								placeholder="Short summary to be displayed when listed"
-								on:keyup={() => {
-									if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) {
-										path?.setName(
-											script.summary
-												.toLowerCase()
-												.replace(/[^a-z0-9_]/g, '_')
-												.replace(/-+/g, '_')
-												.replace(/^-|-$/g, '')
-										)
-									}
-								}}
-							/>
-							<div class="text-sm mt-6 text-secondary font-semibold">Path</div>
-							<Path
-								bind:this={path}
-								bind:error={pathError}
-								bind:path={script.path}
-								bind:dirty={dirtyPath}
-								{initialPath}
-								autofocus={false}
-								namePlaceholder="script"
-								kind="script"
-							/>
+								<Section label="Path">
+									<Path
+										bind:this={path}
+										bind:error={pathError}
+										bind:path={script.path}
+										bind:dirty={dirtyPath}
+										{initialPath}
+										autofocus={false}
+										namePlaceholder="script"
+										kind="script"
+									/>
+								</Section>
 
-							<div class="text-sm mt-6 text-secondary font-semibold">Description</div>
-							<textarea
-								use:autosize
-								bind:value={script.description}
-								placeholder="Description displayed in the details page"
-								class="text-sm"
-							/>
-
-							<div class="border-b pb-1 mb-4 mt-8 font-semibold">Language</div>
-
-							{#if lockedLanguage}
-								<div class="text-sm text-tertiary italic mb-2">
-									As a forked script, the language '{script.language}' cannot be modified.
-								</div>
-							{/if}
-							<div class=" grid grid-cols-3 gap-2">
-								{#each langs as [label, lang]}
-									{@const isPicked = script.language == lang && template == 'script'}
-									<Popover disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}>
+								<Section label="Language">
+									{#if lockedLanguage}
+										<div class="text-sm text-tertiary italic mb-2">
+											As a forked script, the language '{script.language}' cannot be modified.
+										</div>
+									{/if}
+									<div class=" grid grid-cols-3 gap-2">
+										{#each langs as [label, lang]}
+											{@const isPicked = script.language == lang && template == 'script'}
+											<Popover
+												disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
+											>
+												<Button
+													size="sm"
+													variant="border"
+													color={isPicked ? 'blue' : 'light'}
+													btnClasses={isPicked
+														? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
+														: 'm-[1px]'}
+													on:click={() => {
+														template = 'script'
+														initContent(lang, script.kind, template)
+														script.language = lang
+													}}
+													disabled={lockedLanguage ||
+														(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
+												>
+													<LanguageIcon {lang} />
+													<span class="ml-2 py-2 truncate">{label}</span>
+												</Button>
+												<svelte:fragment slot="text"
+													>{label} is only available with an enterprise license</svelte:fragment
+												>
+											</Popover>
+										{/each}
 										<Button
 											size="sm"
 											variant="border"
-											color={isPicked ? 'blue' : 'light'}
-											btnClasses={isPicked
+											color={template == 'docker' ? 'blue' : 'light'}
+											btnClasses={template == 'docker'
 												? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
 												: 'm-[1px]'}
+											disabled={lockedLanguage}
 											on:click={() => {
-												template = 'script'
-												initContent(lang, script.kind, template)
-												script.language = lang
+												if (isCloudHosted()) {
+													sendUserToast(
+														'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+														true,
+														[
+															{
+																label: 'Learn more',
+																callback: () => {
+																	window.open(
+																		'https://www.windmill.dev/docs/advanced/docker',
+																		'_blank'
+																	)
+																}
+															}
+														]
+													)
+													return
+												}
+												template = 'docker'
+												initContent(Script.language.BASH, script.kind, template)
+												script.language = Script.language.BASH
 											}}
-											disabled={lockedLanguage ||
-												(enterpriseLangs.includes(lang) && !$enterpriseLicense)}
 										>
-											<LanguageIcon {lang} />
-											<span class="ml-2 py-2 truncate">{label}</span>
+											<LanguageIcon lang="docker" /><span class="ml-2 py-2">Docker</span>
 										</Button>
-										<svelte:fragment slot="text"
-											>{label} is only available with an enterprise license</svelte:fragment
-										>
-									</Popover>
-								{/each}
-								<Button
-									size="sm"
-									variant="border"
-									color={template == 'docker' ? 'blue' : 'light'}
-									btnClasses={template == 'docker'
-										? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
-										: 'm-[1px]'}
-									disabled={lockedLanguage}
-									on:click={() => {
-										if (isCloudHosted()) {
-											sendUserToast(
-												'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
-												true,
-												[
-													{
-														label: 'Learn more',
-														callback: () => {
-															window.open('https://www.windmill.dev/docs/advanced/docker', '_blank')
-														}
-													}
-												]
-											)
-											return
-										}
-										template = 'docker'
-										initContent(Script.language.BASH, script.kind, template)
-										script.language = Script.language.BASH
-									}}
-								>
-									<LanguageIcon lang="docker" /><span class="ml-2 py-2">Docker</span>
-								</Button>
+									</div>
+								</Section>
 
-								<!-- <Button
-					size="sm"
-					variant="border"
-					color={template == 'mysql' ? 'blue' : 'dark'}
-					btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-					on:click={() => {
-						script.language = Script.language.DENO
-						template = 'mysql'
-						initContent(script.language, script.kind, template)
-					}}
-				>
-					<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
-				</Button> -->
-							</div>
-
-							<div class="border-b pb-1 mb-4 mt-6 font-semibold">
-								Script kind
-								<Tooltip>
-									Tag this script's purpose within flows such that it is available as the
-									corresponding action.
-								</Tooltip>
-							</div>
-							<div class="flex flex-wrap gap-2 mb-8">
-								{#each scriptKindOptions as { value, title, desc, documentationLink }}
-									{@const isPicked = script.kind === value}
-									<Button
-										size="sm"
-										variant="border"
-										color={isPicked ? 'blue' : 'light'}
-										btnClasses="font-medium {isPicked
-											? '!bg-blue-50/75 dark:!bg-frost-900/75'
-											: ''}"
-										on:click={() => {
+								<Section label="Script kind">
+									<svelte:fragment slot="header">
+										<Tooltip>
+											Tag this script's purpose within flows such that it is available as the
+											corresponding action.
+										</Tooltip>
+									</svelte:fragment>
+									<ToggleButtonGroup
+										class="h-10"
+										selected={script.kind}
+										on:selected={({ detail }) => {
 											template = 'script'
-											script.kind = value
-											initContent(script.language, value, template)
+											script.kind = detail
+											initContent(script.language, detail, template)
 										}}
 									>
-										{title}
-										{#if desc}
-											<Tooltip {documentationLink}>
-												{desc}
-											</Tooltip>
-										{/if}
-									</Button>
-								{/each}
+										{#each scriptKindOptions as { value, title, desc, documentationLink, Icon }}
+											<ToggleButton
+												label={title}
+												{value}
+												tooltip={desc}
+												{documentationLink}
+												icon={Icon}
+												showTooltipIcon={Boolean(desc)}
+											/>
+										{/each}
+									</ToggleButtonGroup>
+								</Section>
 							</div>
 						</TabContent>
 						<TabContent value="runtime">
-							<h2 class="border-b pb-1 mt-4 mb-4">Concurrency limits</h2>
-							<div class="flex gap-x-4 shrink">
-								<label class="block shrink min-w-0">
-									<span class="text-secondary text-sm">Maximum number of runs</span>
-									<input class="!w-55" type="number" bind:value={script.concurrent_limit} />
-								</label>
-								<label class="block shrink min-w-0">
-									<span class="text-secondary text-sm">Per time window (seconds)</span>
-									<input
-										class="!w-18"
-										type="number"
-										bind:value={script.concurrency_time_window_s}
-									/>
-								</label>
-							</div>
-
-							<h2 class="border-b pb-1 mt-10 mb-4"
-								>Worker group tag <Tooltip
-									documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
-									>The script will be executed on a worker configured to accept its worker group
-									tag. For instance, you could setup an "highmem", or "gpu" worker group.</Tooltip
-								></h2
-							>
-							{#if $workerTags}
-								{#if $workerTags?.length > 0}
-									<div class="max-w-sm">
-										<select
-											bind:value={script.tag}
-											on:change={(e) => {
-												if (script.tag == '') {
-													script.tag = undefined
-												}
-											}}
-										>
-											{#if script.tag}
-												<option value="">reset to default</option>
-											{:else}
-												<option value="" disabled selected>Worker Group</option>
-											{/if}
-											{#each $workerTags ?? [] as tag (tag)}
-												<option value={tag}>{tag}</option>
-											{/each}
-										</select>
+							<div class="flex flex-col gap-8 my-1.5">
+								<Section label="Concurency limits">
+									<div class="flex gap-x-4 shrink">
+										<label class="block shrink min-w-0">
+											<span class="text-secondary text-sm leading-none">
+												Maximum number of runs
+											</span>
+											<input type="number" bind:value={script.concurrent_limit} />
+										</label>
+										<label class="block shrink min-w-0">
+											<span class="text-secondary text-sm leading-none"
+												>Per time window (seconds)</span
+											>
+											<input type="number" bind:value={script.concurrency_time_window_s} />
+										</label>
 									</div>
-								{:else}
-									<div class="text-sm text-secondary italic mb-2">
-										No custom worker group defined on this instance. See <a
-											href="https://www.windmill.dev/docs/core_concepts/worker_groups"
-											target="_blank">documentation</a
+								</Section>
+								<Section label="Worker group tag">
+									<svelte:fragment slot="header">
+										<Tooltip
+											documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
 										>
-									</div>
-								{/if}
-							{:else}
-								<Loader2 class="animate-spin" />
-							{/if}
+											The script will be executed on a worker configured to accept its worker group
+											tag. For instance, you could setup an "highmem", or "gpu" worker group.
+										</Tooltip>
+									</svelte:fragment>
 
-							<h2 class="border-b pb-1 mt-10 mb-4 flex items-center gap-4"
-								>Cache <Toggle
-									size="xs"
-									checked={Boolean(script.cache_ttl)}
-									on:change={() => {
-										if (script.cache_ttl && script.cache_ttl != undefined) {
-											script.cache_ttl = undefined
-										} else {
-											script.cache_ttl = 300
-										}
-									}}
-									options={{
-										right: 'Cache the results for each possible inputs'
-									}}
-								/></h2
-							>
-
-							<div class="flex gap-x-4 shrink flex-col">
-								<div class="text-xs">How long to the keep cache valid</div>
-
-								{#if script.cache_ttl}
-									<SecondsInput bind:seconds={script.cache_ttl} />
-								{:else}
-									<SecondsInput disabled />
-								{/if}
-							</div>
-
-							<h2 class="border-b pb-1 mt-10 mb-4 items-center flex gap-1"
-								>Dedicated Workers<Tooltip
-									>In this mode, the script is meant to be run on dedicated workers that run the
-									script at native speed. Can reach >1500rps per dedicated worker. Only available on
-									enterprise edition and for the Bun language.</Tooltip
-								>
-								<Toggle
-									disabled={!$enterpriseLicense ||
-										isCloudHosted() ||
-										script.language != Script.language.BUN}
-									size="xs"
-									checked={Boolean(script.dedicated_worker)}
-									on:change={() => {
-										if (script.dedicated_worker) {
-											script.dedicated_worker = undefined
-										} else {
-											script.dedicated_worker = true
-										}
-									}}
-									options={{
-										right: 'Script is run on dedicated workers'
-									}}
-								/></h2
-							>
-
-							{#if !isCloudHosted()}
-								<h2 class="border-b pb-1 mt-10 mb-4">
-									Custom env variables
-									<Tooltip
-										documentationLink="https://www.windmill.dev/docs/reference#custom-environment-variables"
-									>
-										Additional static custom env variables to pass to the script.
-									</Tooltip>
-								</h2>
-								<div class="w-full">
-									<span class="text-tertiary text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span>
-									{#if Array.isArray(script.envs ?? [])}
-										{#each script.envs ?? [] as v, i}
-											<div class="flex max-w-md mt-1 w-full items-center">
-												<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
-												<button
-													transition:fade|local={{ duration: 50 }}
-													class="rounded-full p-1 bg-surface/60 duration-200 hover:bg-gray-200"
-													aria-label="Clear"
-													on:click={() => {
-														script.envs && script.envs.splice(i, 1)
-														script.envs = script.envs
+									{#if $workerTags}
+										{#if $workerTags?.length > 0}
+											<div class="max-w-sm">
+												<select
+													bind:value={script.tag}
+													on:change={(e) => {
+														if (script.tag == '') {
+															script.tag = undefined
+														}
 													}}
 												>
-													<X size={14} />
-												</button>
+													{#if script.tag}
+														<option value="">reset to default</option>
+													{:else}
+														<option value="" disabled selected>Worker Group</option>
+													{/if}
+													{#each $workerTags ?? [] as tag (tag)}
+														<option value={tag}>{tag}</option>
+													{/each}
+												</select>
+											</div>
+										{:else}
+											<div class="text-sm text-secondary flex flex-row gap-2">
+												No custom worker group defined on this instance.
+												<a
+													href="https://www.windmill.dev/docs/core_concepts/worker_groups"
+													target="_blank"
+													class="hover:underline"
+												>
+													<div class="flex flex-row gap-2 items-center">
+														See documentation
+														<ExternalLink size="12" />
+													</div>
+												</a>
 											</div>
-										{/each}
-										{#if script.envs && script.envs.length > 0}
-											<div class="pt-2" />
-											<Alert type="warning" title="Not passed in previews"
-												>Static envs variables are not passed in preview but solely on deployed
-												scripts.</Alert
-											>
 										{/if}
+									{:else}
+										<Loader2 class="animate-spin" />
 									{/if}
-								</div>
-								<div class="flex mt-2">
-									<Button
-										variant="border"
-										color="dark"
-										size="xs"
-										btnClasses="mt-1"
-										on:click={() => {
-											if (script.envs == undefined || !Array.isArray(script.envs)) {
-												script.envs = []
+								</Section>
+								<Section label="Cache">
+									<div class="flex gap-2 shrink flex-col">
+										<Toggle
+											size="sm"
+											checked={Boolean(script.cache_ttl)}
+											on:change={() => {
+												if (script.cache_ttl && script.cache_ttl != undefined) {
+													script.cache_ttl = undefined
+												} else {
+													script.cache_ttl = 300
+												}
+											}}
+											options={{
+												right: 'Cache the results for each possible inputs'
+											}}
+										/>
+										<span class="text-secondary text-sm leading-none">
+											How long to the keep cache valid
+										</span>
+										{#if script.cache_ttl}
+											<SecondsInput bind:seconds={script.cache_ttl} />
+										{:else}
+											<SecondsInput disabled />
+										{/if}
+									</div>
+								</Section>
+								<Section label="Dedicated Workers">
+									<Toggle
+										disabled={!$enterpriseLicense ||
+											isCloudHosted() ||
+											script.language != Script.language.BUN}
+										size="sm"
+										checked={Boolean(script.dedicated_worker)}
+										on:change={() => {
+											if (script.dedicated_worker) {
+												script.dedicated_worker = undefined
+											} else {
+												script.dedicated_worker = true
 											}
-											script.envs = script.envs.concat('')
 										}}
-									>
-										<Icon data={faPlus} class="mr-2" />
-										Add item
-									</Button>
-								</div>
-							{/if}
+										options={{
+											right: 'Script is run on dedicated workers'
+										}}
+									/>
+
+									<svelte:fragment slot="header">
+										<Tooltip
+											>In this mode, the script is meant to be run on dedicated workers that run the
+											script at native speed. Can reach >1500rps per dedicated worker. Only
+											available on enterprise edition and for the Bun language.</Tooltip
+										>
+									</svelte:fragment>
+								</Section>
+								{#if !isCloudHosted()}
+									<Section label="Custom env variables">
+										<svelte:fragment slot="header">
+											<Tooltip
+												documentationLink="https://www.windmill.dev/docs/reference#custom-environment-variables"
+											>
+												Additional static custom env variables to pass to the script.
+											</Tooltip>
+										</svelte:fragment>
+										{#if script.envs && script.envs.length > 0}
+											<Alert type="warning" title="Not passed in previews" size="xs">
+												Static envs variables are not passed in preview but solely on deployed
+												scripts.
+											</Alert>
+										{/if}
+										<div class="w-full mt-2">
+											<span class="text-tertiary text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span>
+											{#if Array.isArray(script.envs ?? [])}
+												{#each script.envs ?? [] as v, i}
+													<div class="flex max-w-md mt-1 w-full items-center relative">
+														<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
+														<button
+															transition:fade|local={{ duration: 50 }}
+															class="rounded-full p-1 bg-surface/60 duration-200 hover:bg-gray-200 absolute right-2"
+															aria-label="Clear"
+															on:click={() => {
+																script.envs && script.envs.splice(i, 1)
+																script.envs = script.envs
+															}}
+														>
+															<X size={14} />
+														</button>
+													</div>
+												{/each}
+											{/if}
+										</div>
+										<div class="flex mt-2">
+											<Button
+												variant="border"
+												color="light"
+												size="xs"
+												on:click={() => {
+													if (script.envs == undefined || !Array.isArray(script.envs)) {
+														script.envs = []
+													}
+													script.envs = script.envs.concat('')
+												}}
+											>
+												<div class="flex flex-row gap-1">
+													<Plus size="16" />
+													Add item
+												</div>
+											</Button>
+										</div>
+									</Section>
+								{/if}
+							</div>
 						</TabContent>
 						<TabContent value="ui">
 							<div class="mt-4" />
@@ -624,14 +656,26 @@
 	<div class="flex flex-col h-screen">
 		<div class="flex h-full max-h-12 items-center pl-2.5 pr-6 border-b shadow-sm">
 			<div class="justify-between flex gap-2 lg:gap-8 w-full items-center">
-				<div class="min-w-64 w-full max-w-md">
-					<input
-						type="text"
-						placeholder="Script summary"
-						class="text-sm w-full font-semibold"
-						bind:value={script.summary}
-					/>
+				<div class="flex flex-row gap-2">
+					<div class="center-center">
+						<button
+							on:click={async () => {
+								metadataOpen = true
+							}}
+						>
+							<LanguageIcon lang={script.language} height={20} />
+						</button>
+					</div>
+					<div class="min-w-64 w-full max-w-md">
+						<input
+							type="text"
+							placeholder="Script summary"
+							class="text-sm w-full font-semibold"
+							bind:value={script.summary}
+						/>
+					</div>
 				</div>
+
 				<div class="gap-4 flex">
 					<div class="flex justify-start w-full">
 						<div>
@@ -660,15 +704,7 @@
 						/>
 					</div>
 				</div>
-				<div class="center-center">
-					<button
-						on:click={async () => {
-							metadataOpen = true
-						}}
-					>
-						<LanguageIcon lang={script.language} />
-					</button>
-				</div>
+
 				{#if $enterpriseLicense && initialPath != ''}
 					<Awareness />
 				{/if}
diff --git a/frontend/src/lib/components/Section.svelte b/frontend/src/lib/components/Section.svelte
new file mode 100644
index 0000000000..3ee5615fa0
--- /dev/null
+++ b/frontend/src/lib/components/Section.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let label: string | undefined = undefined
+</script>
+
+<div>
+	<div class="flex flex-row justify-between">
+		<h2 class="text-base font-semibold leading-non mb-2">
+			{label}
+			<slot name="header" />
+		</h2>
+		<slot name="action" />
+	</div>
+
+	<slot />
+</div>
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index cc8ac82c15..496fd640b8 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -16,7 +16,7 @@
 			? 'text-tertiary-inverse'
 			: 'text-tertiary'} {$$props.class} relative"
 	>
-		<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 16} />
+		<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
 	</div>
 	<svelte:fragment slot="text">
 		<slot />
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index 55720735ec..b260fa33ba 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -13,17 +13,16 @@
 	export let fullScreen: boolean = true
 </script>
 
-<div class={classNames('flex flex-col divide-y ', fullScreen ? 'h-screen max-h-screen' : 'h-full')}>
-	<div class="flex justify-between w-full items-center px-2 py-2 gap-2">
-		<div class="flex items-center gap-2 min-w-0">
-			<CloseButton on:close />
-
-			<span class="font-semibold truncate text-primary"
+<div class={classNames('flex flex-col divide-y', fullScreen ? 'h-screen max-h-screen' : 'h-full')}>
+	<div class="flex justify-between w-full items-center px-4 py-2 gap-2">
+		<div class="flex items-center gap-2 justify-between w-full">
+			<span class="font-semibold truncate text-primary !text-lg"
 				>{title ?? ''}
 				{#if tooltip != '' || documentationLink}
 					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
 				{/if}</span
 			>
+			<CloseButton on:close noBg />
 		</div>
 		{#if $$slots.actions}
 			<div class="flex gap-2 items-center justify-end">
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index 179959d6fd..c71ee95c36 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -26,7 +26,7 @@
 
 <button
 	class={twMerge(
-		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-medium text-primary',
+		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-normal text-primary',
 		$selected?.startsWith(value)
 			? 'wm-tab-active'
 			: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index 7171f498d0..b97a255ccb 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -17,6 +17,7 @@
 	export let small: boolean = false
 	export let iconProps: Record<string, any> = {}
 	export let showTooltipIcon: boolean = false
+	export let documentationLink: string | undefined = undefined
 
 	const { select, selected } = getContext<ToggleButtonContext>('ToggleButtonGroup')
 </script>
@@ -26,6 +27,7 @@
 	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
 	disablePopup={tooltip === undefined}
 	disappearTimeout={0}
+	{documentationLink}
 >
 	<Tab
 		{disabled}