diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index dfc9ca3824..ff81886338 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
@@ -20,14 +21,14 @@
 <span class="{$$props.class} z-auto">
 	<label
 		for={id}
-		class="inline-flex items-center mt-2 duration-200 {disabled
+		class="inline-flex items-center mt-2 duration-50 {disabled
 			? 'grayscale opacity-50'
 			: 'cursor-pointer'}"
 	>
 		{#if Boolean(options?.left)}
 			<span
 				class={twMerge(
-					'mr-2 font-medium duration-200',
+					'mr-2 font-medium duration-50',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
@@ -53,18 +54,19 @@
 				}}
 			/>
 			<div
-				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300
-				peer-checked:after:translate-x-full peer-checked:after:border-white after:content-['']
-				after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300
-				after:border after:rounded-full after:h-5 after:w-5 after:transition-all {color == 'red'
-					? 'peer-checked:bg-red-600'
-					: 'peer-checked:bg-blue-600'}"
+				class={classNames(
+					"transition-all bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-white after:border-white after:border after:rounded-full after:transition-all ",
+					color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
+					size === 'sm'
+						? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
+						: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
+				)}
 			/>
 		</div>
 		{#if Boolean(options?.right)}
 			<span
 				class={twMerge(
-					'ml-2 font-medium duration-200',
+					'ml-2 font-medium duration-50',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 8066543081..57dc09eb61 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -68,6 +68,8 @@
 			hiddenInlineScript.script.doNotRecomputeOnInputChanged = undefined
 		}
 	}
+
+	$: hasScript = hiddenInlineScript?.script?.inlineScript != undefined
 </script>
 
 {#if componentSettings}
@@ -99,6 +101,7 @@
 	<BackgroundScriptSettings
 		bind:script={hiddenInlineScript.script}
 		id={`bg_${hiddenInlineScript.index}`}
+		{hasScript}
 	/>
 
 	<div>
@@ -114,13 +117,6 @@
 				{/key}
 			</PanelSection>
 		{/if}
-
-		{#if hiddenInlineScript.script.inlineScript?.language === 'frontend'}
-			<PanelSection title={`Inputs`}>
-				<div class="text-xs"> Frontend cannot have inputs </div>
-			</PanelSection>
-		{/if}
-
 		<div class="grow shrink" />
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
index 53250ebbd7..ee4bc29a03 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
@@ -43,15 +43,8 @@
 					/>
 				{/if}
 
+				<ToggleButton value="connected" icon={Plug2} iconOnly={clientWidth < 250} label="Connect" />
 				<ToggleButton
-					tooltip="Connect to an output"
-					value="connected"
-					icon={Plug2}
-					iconOnly={clientWidth < 250}
-					label="Connect"
-				/>
-				<ToggleButton
-					tooltip="Compute it with a script/flow"
 					value="runnable"
 					icon={FunctionSquare}
 					iconOnly={clientWidth < 250}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte
index 46bdbebe51..c8cbd0e9af 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte
@@ -4,28 +4,40 @@
 	import ScriptRunConfiguration from './shared/ScriptRunConfiguration.svelte'
 	import BackgroundScriptTriggerBy from './shared/BackgroundScriptTriggerBy.svelte'
 	import { getContext } from 'svelte'
+	import ScriptSettingsSection from './shared/ScriptSettingsSection.svelte'
 
 	export let script: HiddenInlineScript
 	export let id: string
+	export let hasScript: boolean
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 </script>
 
 <div class={'border-y border-gray-200 divide-y'}>
 	<ScriptSettingHeader name={script.name} />
-	<ScriptRunConfiguration
-		bind:autoRefresh={script.autoRefresh}
-		bind:recomputeOnInputChanged={script.recomputeOnInputChanged}
-		canConfigureRecomputeOnInputChanged={script.inlineScript?.language !== 'frontend'}
-		on:updateAutoRefresh={() => {
-			const autoRefresh = !script.autoRefresh
-			if ($runnableComponents?.[id]?.autoRefresh !== autoRefresh && autoRefresh !== undefined) {
-				$runnableComponents[id] = {
-					...$runnableComponents[id],
-					autoRefresh
+
+	{#if hasScript}
+		<ScriptRunConfiguration
+			bind:autoRefresh={script.autoRefresh}
+			bind:recomputeOnInputChanged={script.recomputeOnInputChanged}
+			canConfigureRecomputeOnInputChanged={script.inlineScript?.language !== 'frontend'}
+			on:updateAutoRefresh={() => {
+				const autoRefresh = !script.autoRefresh
+				if ($runnableComponents?.[id]?.autoRefresh !== autoRefresh && autoRefresh !== undefined) {
+					$runnableComponents[id] = {
+						...$runnableComponents[id],
+						autoRefresh
+					}
 				}
-			}
-		}}
-	/>
-	<BackgroundScriptTriggerBy bind:script recomputeOnInputChanged={script.recomputeOnInputChanged} />
+			}}
+		/>
+		<BackgroundScriptTriggerBy
+			bind:script
+			recomputeOnInputChanged={script.recomputeOnInputChanged}
+		/>
+	{:else}
+		<ScriptSettingsSection title="Language selection">
+			<div class="text-xs"> Please configure the language in the inline script panel </div>
+		</ScriptSettingsSection>
+	{/if}
 </div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
index 1a8552d2ee..fb629a7147 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
@@ -2,6 +2,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import ScriptSettingsSection from './ScriptSettingsSection.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 
 	export let autoRefresh: boolean | undefined = false
 	export let recomputeOnInputChanged: boolean | undefined = false
@@ -13,22 +14,21 @@
 
 {#if canConfigureRecomputeOnInputChanged || canConfigureRunOnStart}
 	<ScriptSettingsSection title="Run configuration">
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-1">
 			{#if autoRefresh !== undefined && canConfigureRunOnStart}
 				<div class="flex items-center justify-between w-full">
 					<div class="flex flex-row items-center gap-2 text-xs">
 						Run on start and app refresh
-						<Tooltip>
+						<Tooltip wrapperClass="flex">
 							You may want to disable this so that the background script is only triggered by
 							changes to other values or triggered by another computation on a button (See
 							'Recompute Others')
 						</Tooltip>
 					</div>
-					<input
-						type="checkbox"
+					<Toggle
 						bind:checked={autoRefresh}
-						class="!w-4 !h-4 !rounded-sm"
-						on:click={() => {
+						size="xs"
+						on:change={() => {
 							dispatch('updateAutoRefresh')
 						}}
 					/>
@@ -39,10 +39,13 @@
 					<div class="flex flex-row items-center gap-2 text-xs">
 						Recompute on any input changes
 					</div>
-					<input
-						type="checkbox"
+
+					<Toggle
 						bind:checked={recomputeOnInputChanged}
-						class="!w-4 !h-4 !rounded-sm"
+						size="xs"
+						on:change={() => {
+							dispatch('updateAutoRefresh')
+						}}
 					/>
 				</div>
 			{/if}
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 4b208b8b1c..b00c6807e6 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
@@ -2,9 +2,10 @@
 	import type { ResultAppInput } from '$lib/components/apps/inputType'
 	import type { AppEditorContext } from '$lib/components/apps/types'
 	import { getContext } from 'svelte'
-	import ScriptSettingsSection from './ScriptSettingsSection.svelte'
 	import type { AppComponent } from '../../../component'
 	import { Button } from '$lib/components/common'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { Plus, X } from 'lucide-svelte'
 
 	const { selectedComponentInEditor } = getContext<AppEditorContext>('AppEditorContext')
 
@@ -14,11 +15,15 @@
 	$: checked = Boolean(appInput.transformer)
 </script>
 
-<ScriptSettingsSection
-	title="Transformer"
-	tooltip={"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"}
->
-	<div class="flex gap-1 justify-between items-center">
+<div class="p-2">
+	<div class="text-sm font-semibold justify-between flex flex-row items-center">
+		<div class="flex flex-row items-center gap-2">
+			Transformer
+
+			<Tooltip wrapperClass="flex">
+				{"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"}
+			</Tooltip>
+		</div>
 		<Button
 			size="xs"
 			color={checked ? 'red' : 'light'}
@@ -35,7 +40,15 @@
 				}
 			}}
 		>
-			{checked ? 'Remove' : 'Add a transformer'}
+			<div class="flex flex-row gap-1 items-center">
+				{#if checked}
+					<X size={16} />
+					Remove
+				{:else}
+					<Plus size={16} />
+					Add
+				{/if}
+			</div>
 		</Button>
 	</div>
-</ScriptSettingsSection>
+</div>