diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 5b6dea7eb2..4570324afd 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -151,7 +151,9 @@
 					}}
 				>
 					{#if isStaticTemplate(inputCat)}
-						<ToggleButton light position="left" value="static" size="xs">Template</ToggleButton>
+						<ToggleButton light position="left" value="static" size="xs">
+							{'${} '}Templatable</ToggleButton
+						>
 					{:else}
 						<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
 					{/if}
diff --git a/frontend/src/lib/components/ObjectResourceInput.svelte b/frontend/src/lib/components/ObjectResourceInput.svelte
index f71720e852..0d71498353 100644
--- a/frontend/src/lib/components/ObjectResourceInput.svelte
+++ b/frontend/src/lib/components/ObjectResourceInput.svelte
@@ -60,27 +60,23 @@
 	$: value && valueToPath()
 </script>
 
-<div class="flex flex-col w-full flex-wrap gap-x-2 gap-y-0.5">
-	<div class="shrink flex flex-row justify-center">
-		<div>
-			<ToggleButtonGroup
-				bind:selected={option}
-				on:selected={(e) => {
-					if (e.detail === 'resource') {
-						resourceToValue()
-					} else {
-						argToValue()
-					}
-				}}
-			>
-				<ToggleButton light position="left" value="resource" size="xs"
-					>Resource ({resourceTypeName})</ToggleButton
-				>
-				<ToggleButton light position="right" value="raw" size="xs">Raw</ToggleButton>
-			</ToggleButtonGroup>
-		</div>
-	</div>
-	<div>
+<div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
+	<ToggleButtonGroup
+		col
+		bind:selected={option}
+		on:selected={(e) => {
+			if (e.detail === 'resource') {
+				resourceToValue()
+			} else {
+				argToValue()
+			}
+		}}
+	>
+		<ToggleButton light position="center" value="resource" size="xs">Resource</ToggleButton>
+		<ToggleButton light position="center" value="raw" size="xs">Raw</ToggleButton>
+	</ToggleButtonGroup>
+
+	<div class="grow flex items-center">
 		{#if option == 'resource'}
 			<ResourcePicker
 				on:refresh={() => loadSchema(format)}
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 336b71a6e6..f0d6b2cd59 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -16,6 +16,7 @@
 	import autosize from 'svelte-autosize'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import AppConnect from './AppConnect.svelte'
+	import { faSave } from '@fortawesome/free-solid-svg-icons'
 
 	let path = ''
 	let initialPath = ''
@@ -240,7 +241,9 @@
 				</Button>
 			{:else}
 				<Button variant="border" on:click={() => (step = 1)}>Back</Button>
-				<Button on:click={resourceAction} disabled={!isValid}>Save</Button>
+				<Button startIcon={{ icon: faSave }} on:click={resourceAction} disabled={!isValid}
+					>Save</Button
+				>
 			{/if}
 		</span>
 	</DrawerContent>
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 2707d3edab..4d0a5d928b 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
-<div class="flex flex-row gap-x-1">
+<div class="flex flex-row gap-x-1 w-full">
 	<Select
 		bind:justValue={value}
 		items={collection}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index e68a1adca7..bff3cf1778 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -194,7 +194,7 @@
 								classes: 'animate-none'
 							}}
 						>
-							{#if testIsLoading}Running{:else}Test <Kbd class="ml-4">Ctrl+Enter</Kbd>{/if}
+							{#if testIsLoading}Running{:else}Test <Kbd class="ml-4 text-5xs">Ctrl+Enter</Kbd>{/if}
 						</Button>
 					{/if}
 				</div>
diff --git a/frontend/src/lib/components/common/toggleButton/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton/ToggleButtonGroup.svelte
index 5497554727..83c912cd37 100644
--- a/frontend/src/lib/components/common/toggleButton/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton/ToggleButtonGroup.svelte
@@ -11,6 +11,7 @@
 
 	export let selected: any
 	const dispatch = createEventDispatcher()
+	export let col = false
 
 	$: setSelected(selected)
 
@@ -30,6 +31,6 @@
 	})
 </script>
 
-<div class="flex w-full rounded-md shadow-sm" role="group">
+<div class:flex-col={col} class="flex rounded-md shadow-sm" role="group">
 	<slot />
 </div>
diff --git a/frontend/src/lib/components/flows/CreateActions.svelte b/frontend/src/lib/components/flows/CreateActions.svelte
index 0723785f21..107088ebcc 100644
--- a/frontend/src/lib/components/flows/CreateActions.svelte
+++ b/frontend/src/lib/components/flows/CreateActions.svelte
@@ -48,7 +48,7 @@
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<ButtonPopup size="sm" startIcon={{ icon: faPlus }} href="/flows/add">
+	<ButtonPopup size="md" startIcon={{ icon: faPlus }} href="/flows/add">
 		<svelte:fragment slot="main">New Flow</svelte:fragment>
 		<ButtonPopupItem on:click={() => drawers.hub?.openDrawer()}>
 			Import flow from WindmillHub
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index 16ac31d01f..ba370acd7c 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -17,7 +17,7 @@
 	let pick_existing: 'workspace' | 'hub' = 'hub'
 </script>
 
-<div class="space-y-4 p-4 h-full flex flex-col">
+<div class="p-4 h-full flex flex-col">
 	{#if !failureModule}
 		<div class="center-center">
 			<div class="max-w-min">
@@ -46,89 +46,93 @@
 			</div>
 		</div>
 	{/if}
-	<h3>
+	<h3 class="pb-2">
 		Inline new
 		<Tooltip>
 			Embed a script directly inside a flow instead of saving the script into your workspace for
 			reuse. You can always save an inline script later.
 		</Tooltip>
 	</h3>
-	<div class="flex flex-row flex-wrap gap-2">
-		<FlowScriptPicker
-			label="Typescript"
-			lang={Script.language.DENO}
-			on:click={() => {
-				dispatch('new', {
-					language: RawScript.language.DENO,
-					kind,
-					subkind: 'flow'
-				})
-			}}
-		/>
-
-		<FlowScriptPicker
-			label="Python"
-			lang={Script.language.PYTHON3}
-			on:click={() => {
-				dispatch('new', {
-					language: RawScript.language.PYTHON3,
-					kind,
-					subkind: kind
-				})
-			}}
-		/>
-
-		{#if kind != 'approval'}
+	<div class="flex flex-row">
+		<div class="flex flex-row flex-wrap gap-2">
 			<FlowScriptPicker
-				label="Go"
-				lang={Script.language.GO}
+				label="Typescript"
+				lang={Script.language.DENO}
 				on:click={() => {
 					dispatch('new', {
-						language: RawScript.language.GO,
-						kind,
-						subkind: 'flow'
-					})
-				}}
-			/>
-		{/if}
-
-		{#if kind == 'script'}
-			<FlowScriptPicker
-				label="Bash"
-				lang={Script.language.BASH}
-				on:click={() => {
-					dispatch('new', {
-						language: RawScript.language.BASH,
+						language: RawScript.language.DENO,
 						kind,
 						subkind: 'flow'
 					})
 				}}
 			/>
 
-			{#if !failureModule}
+			<FlowScriptPicker
+				label="Python"
+				lang={Script.language.PYTHON3}
+				on:click={() => {
+					dispatch('new', {
+						language: RawScript.language.PYTHON3,
+						kind,
+						subkind: kind
+					})
+				}}
+			/>
+
+			{#if kind != 'approval'}
 				<FlowScriptPicker
-					label={`PostgreSQL`}
-					lang="pgsql"
-					on:click={() =>
-						dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+					label="Go"
+					lang={Script.language.GO}
+					on:click={() => {
+						dispatch('new', {
+							language: RawScript.language.GO,
+							kind,
+							subkind: 'flow'
+						})
+					}}
 				/>
 			{/if}
-		{/if}
+
+			{#if kind == 'script'}
+				<FlowScriptPicker
+					label="Bash"
+					lang={Script.language.BASH}
+					on:click={() => {
+						dispatch('new', {
+							language: RawScript.language.BASH,
+							kind,
+							subkind: 'flow'
+						})
+					}}
+				/>
+
+				{#if !failureModule}
+					<FlowScriptPicker
+						label={`PostgreSQL`}
+						lang="pgsql"
+						on:click={() =>
+							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+					/>
+				{/if}
+			{/if}
+		</div>
 	</div>
 
-	<h3 class="pt-4">Use pre-made</h3>
-	<div class="max-w-min">
-		<ToggleButtonGroup bind:selected={pick_existing}>
-			<ToggleButton position="left" value="hub" size="xs">
-				<WindmillIcon white={pick_existing == 'hub'} height="16px" width="16px" /><div
-					class="mr-1"
-				/>Hub
-			</ToggleButton>
-			<ToggleButton position="right" value="workspace" size="xs" startIcon={{ icon: faBuilding }}>
-				Workspace
-			</ToggleButton>
-		</ToggleButtonGroup>
-	</div>
+	<div class="flex flex-row gap-x-2 mt-8 mb-2"
+		><h3>Use pre-made</h3>
+		<div class="max-w-min">
+			<ToggleButtonGroup bind:selected={pick_existing}>
+				<ToggleButton position="left" value="hub" size="xs">
+					<WindmillIcon white={pick_existing == 'hub'} height="16px" width="16px" /><div
+						class="mr-1"
+					/>Hub
+				</ToggleButton>
+				<ToggleButton position="right" value="workspace" size="xs" startIcon={{ icon: faBuilding }}>
+					Workspace
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div></div
+	>
 	{#if pick_existing == 'hub'}
 		<PickHubScript {kind} on:pick />
 	{:else}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 1654686c43..e368f592fb 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -163,7 +163,7 @@
 				style="max-height: calc(100% - {totalTopGap}px) !important;"
 			>
 				<Splitpanes horizontal>
-					<Pane size={50} minSize={20}>
+					<Pane size={flowModule.value.type === 'script' ? 30 : 50} minSize={20}>
 						{#if flowModule.value.type === 'rawscript'}
 							<div class="h-full">
 								<Editor
@@ -192,7 +192,7 @@
 							<FlowModuleScript path={flowModule.value.path} />
 						{/if}
 					</Pane>
-					<Pane size={50} minSize={20}>
+					<Pane size={flowModule.value.type === 'script' ? 70 : 30} minSize={20}>
 						<Tabs bind:selected>
 							<Tab value="inputs"><span class="font-semibold">Step Input</span></Tab>
 							<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>
diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
index 3c5c5d1e69..63dd1bdf0e 100644
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -32,7 +32,7 @@
 			previewOpen = !previewOpen
 		}}
 		size="sm"
-		endIcon={{ icon: faPlay }}
+		startIcon={{ icon: faPlay }}
 	>
 		Test flow
 	</Button>
@@ -46,7 +46,7 @@
 				previewMode = 'upTo'
 				previewOpen = !previewOpen
 			}}
-			endIcon={{ icon: faPlay }}
+			startIcon={{ icon: faPlay }}
 		>
 			Test up to
 			<Badge baseClass="ml-1" color="indigo">
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
index 7adb1cdcbb..a17495079e 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
@@ -13,7 +13,7 @@
 
 <Button
 	{disabled}
-	btnClasses="h-24 w-24 truncate"
+	btnClasses="w-24 truncate"
 	on:click
 	size="sm"
 	spacingSize="md"
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
index cd7ac76505..d98edb9b3e 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
@@ -37,11 +37,11 @@
 </script>
 
 <div class="flex flex-col min-h-0">
-	<div class="w-12/12 pb-4">
+	<div class="w-12/12 pb-2">
 		<input type="text" placeholder="Search script" bind:value={itemsFilter} class="search-item" />
 	</div>
 
-	<div class="gap-2 w-full flex flex-wrap pb-4">
+	<div class="gap-2 w-full flex flex-wrap pb-2">
 		{#each apps as app}
 			<Badge
 				class="cursor-pointer"
@@ -67,18 +67,10 @@
 								dispatch('pick', obj)
 							}}
 						>
-							<div class="mr-2 text-sm text-left truncate w-24  shrink-0">
+							<div class="mr-2 text-sm text-left truncate w-36  shrink-0">
 								<IconedResourceType after={true} silent={false} name={obj['app']} />
 							</div>
-							<div class="flex flex-col">
-								<div class="text-sm font-semibold flex flex-col">
-									<span class="mr-2 text-left">{obj['summary'] ?? ''}</span>
-									<span class="font-normal text-xs text-left italic overflow-hidden"
-										>{obj['path'] ?? ''}</span
-									>
-								</div>
-								<div class="text-xs font-light italic text-left">{obj['description'] ?? ''}</div>
-							</div>
+							<div class="mr-2 text-left">{obj['summary'] ?? ''}</div>
 						</button>
 					</li>
 				{/each}
diff --git a/frontend/src/lib/components/scripts/CreateActions.svelte b/frontend/src/lib/components/scripts/CreateActions.svelte
index 10c902dd61..02dd572dd9 100644
--- a/frontend/src/lib/components/scripts/CreateActions.svelte
+++ b/frontend/src/lib/components/scripts/CreateActions.svelte
@@ -46,7 +46,7 @@
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<ButtonPopup size="sm" startIcon={{ icon: faPlus }} href="/scripts/add">
+	<ButtonPopup size="md" startIcon={{ icon: faPlus }} href="/scripts/add">
 		<svelte:fragment slot="main">New Script</svelte:fragment>
 		<ButtonPopupItem on:click={() => drawers.hub?.openDrawer()}>
 			Import script from WindmillHub
diff --git a/frontend/src/routes/groups.svelte b/frontend/src/routes/groups.svelte
index cd45d887cb..9ac602af27 100644
--- a/frontend/src/routes/groups.svelte
+++ b/frontend/src/routes/groups.svelte
@@ -79,7 +79,7 @@
 				placeholder="New group name"
 				bind:value={newGroupName}
 			/>
-			<Button size="sm" startIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
+			<Button size="md" startIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
 				New&nbsp;group
 			</Button>
 		</div>
diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte
index a2b4e4d811..4971198de9 100644
--- a/frontend/src/routes/index.svelte
+++ b/frontend/src/routes/index.svelte
@@ -8,7 +8,7 @@
 	import ScriptGettingStarted from '$lib/components/landing/ScriptGettingStarted.svelte'
 	import { FlowService, Job, JobService, Script, ScriptService, type Flow } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { Skeleton } from '$lib/components/common'
+	import { Alert, Skeleton } from '$lib/components/common'
 
 	let scripts: Script[] = []
 	let flows: Flow[] = []
@@ -57,7 +57,17 @@
 
 <CenteredPage>
 	<h1 class="flex items-center min-h-[48px] font-black my-4">Home</h1>
-	<div class="space-y-12">
+	<div class="space-y-8">
+		{#if $workspaceStore == 'demo'}
+			<Alert title="Demo workspace">The demo workspace shared in which all users get invited.</Alert
+			>
+		{:else if $workspaceStore == 'starter'}
+			<Alert title="Demo workspace"
+				>The starter workspace has all its elements (variables, resources, scripts, flows) shared
+				across all other workspaces. Useful to seed workspace with common elements within your
+				organization.</Alert
+			>
+		{/if}
 		<div>
 			<h2 class="border-b mb-4 py-2">
 				<span class="text-black-gradient">Scripts</span>
diff --git a/frontend/src/routes/resources.svelte b/frontend/src/routes/resources.svelte
index 462607c86e..25e4835d72 100644
--- a/frontend/src/routes/resources.svelte
+++ b/frontend/src/routes/resources.svelte
@@ -30,7 +30,8 @@
 		faShare,
 		faTrash,
 		faCircle,
-		faChain
+		faChain,
+		faSave
 	} from '@fortawesome/free-solid-svg-icons'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
@@ -202,7 +203,7 @@
 		</div>
 		<div slot="submission">
 			{#if typeDrawerMode === 'create'}
-				<Button on:click={addResourceType}>Save</Button>
+				<Button startIcon={{ icon: faSave }} on:click={addResourceType}>Save</Button>
 			{/if}
 		</div>
 	</DrawerContent>
@@ -214,10 +215,10 @@
 		tooltip="Save and permission rich objects (JSON) including credentials obtained through OAuth."
 	>
 		<div class="flex flex-row space-x-4">
-			<Button size="sm" startIcon={{ icon: faChain }} on:click={() => appConnect.open()}>
+			<Button size="md" startIcon={{ icon: faChain }} on:click={() => appConnect.open()}>
 				Connect an API
 			</Button>
-			<Button size="sm" startIcon={{ icon: faPlus }} on:click={() => resourceEditor?.initNew()}>
+			<Button size="md" startIcon={{ icon: faPlus }} on:click={() => resourceEditor?.initNew()}>
 				Add a resource
 			</Button>
 		</div>
@@ -335,7 +336,7 @@
 		primary={false}
 		tooltip="Schema and label to filter resources by type"
 	>
-		<Button size="sm" startIcon={{ icon: faPlus }} on:click={startNewType}>Add a type</Button>
+		<Button size="md" startIcon={{ icon: faPlus }} on:click={startNewType}>Add a type</Button>
 	</PageHeader>
 
 	{#if loading.types}
diff --git a/frontend/src/routes/schedules.svelte b/frontend/src/routes/schedules.svelte
index 7622378d3c..46156d60c9 100644
--- a/frontend/src/routes/schedules.svelte
+++ b/frontend/src/routes/schedules.svelte
@@ -65,7 +65,7 @@
 
 <CenteredPage>
 	<PageHeader title="Schedules" tooltip="Trigger Scripts and Flows according to a cron schedule">
-		<Button size="sm" startIcon={{ icon: faPlus }} href="/schedule/add">New&nbsp;schedule</Button>
+		<Button size="md" startIcon={{ icon: faPlus }} href="/schedule/add">New&nbsp;schedule</Button>
 	</PageHeader>
 	<div class="mt-10 mb-40">
 		{#if loading}
diff --git a/frontend/src/routes/variables.svelte b/frontend/src/routes/variables.svelte
index afb1e933c2..59492bcb6a 100644
--- a/frontend/src/routes/variables.svelte
+++ b/frontend/src/routes/variables.svelte
@@ -79,7 +79,7 @@
 		title="Variables"
 		tooltip="Save and permission strings to be reused in Scripts and Flows."
 	>
-		<Button size="sm" startIcon={{ icon: faPlus }} on:click={() => variableEditor.initNew()}>
+		<Button size="md" startIcon={{ icon: faPlus }} on:click={() => variableEditor.initNew()}>
 			New&nbsp;variable
 		</Button>
 	</PageHeader>