diff --git a/frontend/src/app.css b/frontend/src/app.css
index 209efdeb7d..26507e3933 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -77,6 +77,11 @@ html {
 		@apply rounded-sm;
 	}
 
+	.blue-button {
+		@apply bg-blue-500 !important;
+		@apply hover:bg-blue-700 !important;
+	}
+
 	.default-button {
 		/*this styling does not impact the Dropdown component */
 		@apply bg-blue-500;
diff --git a/frontend/src/lib/components/CenteredPage.svelte b/frontend/src/lib/components/CenteredPage.svelte
index c1b34503be..fad015cc7b 100644
--- a/frontend/src/lib/components/CenteredPage.svelte
+++ b/frontend/src/lib/components/CenteredPage.svelte
@@ -1,5 +1,5 @@
 <div class="max-w-screen-lg flex grow w-full h-full xl:-ml-20">
-	<div class="grow w-full h-full">
+	<div class="grow w-full h-full mt-4">
 		<slot />
 	</div>
 </div>
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 19e981a66b..8b549c5dff 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -10,10 +10,13 @@
 		sendUserToast,
 		setQueryWithoutLoad
 	} from '$lib/utils'
-	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
+	import { faPlay } from '@fortawesome/free-solid-svg-icons'
+	import { Breadcrumb, BreadcrumbItem, Button } from 'flowbite-svelte'
 	import { onMount } from 'svelte'
+	import Icon from 'svelte-awesome'
 	import { OFFSET } from './CronInput.svelte'
 	import FlowEditor from './FlowEditor.svelte'
+	import FlowPreviewContent from './FlowPreviewContent.svelte'
 	import { flowStore, mode } from './flows/flowStore'
 	import { flowToMode } from './flows/utils'
 
@@ -26,6 +29,8 @@
 	let scheduleEnabled
 	let scheduleCron: string
 
+	let previewOpen = false
+
 	$: step = Number($page.url.searchParams.get('step')) || 1
 
 	async function createSchedule(path: string) {
@@ -127,69 +132,95 @@
 	})
 </script>
 
-<div class="flex flex-col max-w-screen-lg w-full mb-96 px-8">
-	<!-- Nav between steps-->
-	<div class="justify-between flex flex-row w-full">
-		<Breadcrumb>
-			<BreadcrumbItem>
-				<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
-					Flow Editor
-				</button>
-			</BreadcrumbItem>
-			<BreadcrumbItem>
-				<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
-					UI customisation
-				</button>
-			</BreadcrumbItem>
-		</Breadcrumb>
-		<div class="flex flex-row-reverse ml-2">
-			{#if step == 1}
-				<button
-					disabled={pathError != ''}
-					class="default-button px-6 max-h-8"
-					on:click={() => changeStep(2)}
-				>
-					Next
-				</button>
-				<button
-					disabled={pathError != ''}
-					class="default-button-secondary px-6 max-h-8 mr-2"
-					on:click={saveFlow}
-				>
-					Save
-				</button>
+<div class="flex flex-row w-full h-full justify-between">
+	<div class="flex flex-col max-w-screen-md mb-96 m-auto">
+		<div class="mx-4">
+			<!-- Nav between steps-->
+			<div class="justify-between flex flex-row w-full my-4">
+				<Breadcrumb>
+					<BreadcrumbItem>
+						<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
+							Flow Editor
+						</button>
+					</BreadcrumbItem>
+					<BreadcrumbItem>
+						<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
+							UI customisation
+						</button>
+					</BreadcrumbItem>
+				</Breadcrumb>
+				<div class="flex flex-row-reverse ml-2">
+					{#if step == 1}
+						<button
+							disabled={pathError != ''}
+							class="default-button px-6 max-h-8"
+							on:click={() => changeStep(2)}
+						>
+							Next
+						</button>
+						<button
+							disabled={pathError != ''}
+							class="default-button-secondary px-6 max-h-8 mr-2"
+							on:click={saveFlow}
+						>
+							Save
+						</button>
+					{:else}
+						<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
+					{/if}
+				</div>
+			</div>
+			<div class="flex flex-row-reverse">
+				<span class="my-1 text-sm text-gray-500 italic">
+					{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
+					{$flowStore?.path}
+				</span>
+			</div>
+
+			<!-- metadata -->
+
+			{#if $flowStore}
+				{#if step === 1}
+					<FlowEditor
+						bind:pathError
+						bind:initialPath
+						bind:scheduleEnabled
+						bind:scheduleCron
+						bind:scheduleArgs
+					/>
+				{:else if step === 2}
+					<ScriptSchema
+						synchronizedHeader={false}
+						bind:summary={$flowStore.summary}
+						bind:description={$flowStore.description}
+						bind:schema={$flowStore.schema}
+					/>
+				{/if}
 			{:else}
-				<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
+				<p>Loading</p>
 			{/if}
 		</div>
 	</div>
-	<div class="flex flex-row-reverse">
-		<span class="my-1 text-sm text-gray-500 italic">
-			{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
-			{$flowStore?.path}
-		</span>
+
+	<Button
+		size="lg"
+		pill
+		on:click={() => (previewOpen = !previewOpen)}
+		class={`blue-button fixed bottom-10 right-10 ${previewOpen ? 'hidden' : ''}`}
+	>
+		Preview flow
+		<Icon data={faPlay} class="ml-2" />
+	</Button>
+
+	<div class={`relative h-screen w-1/3 ${previewOpen ? '' : 'hidden'}`}>
+		<div class="absolute top-0 h-full">
+			<div class="fixed border-l-2 right-0 h-screen w-1/3">
+				<FlowPreviewContent
+					flow={$flowStore}
+					bind:args={scheduleArgs}
+					on:close={() => (previewOpen = !previewOpen)}
+				/>
+			</div>
+		</div>
 	</div>
-
-	<!-- metadata -->
-
-	{#if $flowStore}
-		{#if step === 1}
-			<FlowEditor
-				bind:pathError
-				bind:initialPath
-				bind:scheduleEnabled
-				bind:scheduleCron
-				bind:scheduleArgs
-			/>
-		{:else if step === 2}
-			<ScriptSchema
-				synchronizedHeader={false}
-				bind:summary={$flowStore.summary}
-				bind:description={$flowStore.description}
-				bind:schema={$flowStore.schema}
-			/>
-		{/if}
-	{:else}
-		<p>Loading</p>
-	{/if}
 </div>
diff --git a/frontend/src/lib/components/FlowEditor.svelte b/frontend/src/lib/components/FlowEditor.svelte
index 6c45196677..5f446bdebf 100644
--- a/frontend/src/lib/components/FlowEditor.svelte
+++ b/frontend/src/lib/components/FlowEditor.svelte
@@ -69,7 +69,7 @@
 		{/each}
 		<Button
 			disabled={pathIsEmpty($flowStore.path)}
-			color="blue"
+			class="blue-button"
 			on:click={() => {
 				addModule()
 				open = $flowStore?.value.modules.length - 1
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
new file mode 100644
index 0000000000..98467e57dc
--- /dev/null
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { Job, JobService, type Flow } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
+	import { sendUserToast, truncateRev } from '$lib/utils'
+	import { faClose } from '@fortawesome/free-solid-svg-icons'
+	import { Button } from 'flowbite-svelte'
+	import { createEventDispatcher, onDestroy } from 'svelte'
+	import Icon from 'svelte-awesome'
+	import FlowJobResult from './FlowJobResult.svelte'
+	import FlowStatusViewer from './FlowStatusViewer.svelte'
+	import SchemaForm from './SchemaForm.svelte'
+
+	const dispatch = createEventDispatcher()
+
+	export let flow: Flow
+	export let args: Record<string, any> = {}
+
+	let intervalId: NodeJS.Timer
+	let job: Job | undefined
+	let jobs = []
+	let jobId: string
+	let isValid: boolean = false
+
+	$: dispatch('change', jobs)
+
+	export async function runPreview(args: Record<string, any>) {
+		intervalId && clearInterval(intervalId)
+
+		jobId = await JobService.runFlowPreview({
+			workspace: $workspaceStore ?? '',
+			requestBody: {
+				args,
+				value: flow.value,
+				path: flow.path
+			}
+		})
+		jobs = []
+		intervalId = setInterval(loadJob, 1000)
+		sendUserToast(`started preview ${truncateRev(jobId, 10)}`)
+	}
+
+	async function loadJob() {
+		try {
+			job = await JobService.getJob({ workspace: $workspaceStore!, id: jobId })
+			if (job?.type == 'CompletedJob') {
+				clearInterval(intervalId)
+			}
+		} catch (err) {
+			sendUserToast(err, true)
+		}
+	}
+
+	onDestroy(() => {
+		intervalId && clearInterval(intervalId)
+	})
+</script>
+
+<div class="flex flex-col space-y-4 h-screen bg-white ">
+	<div class="flex flex-col space-y-4 p-6 border-b-2">
+		<div class="flex justify-between">
+			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow Preview</h3>
+
+			<Button color="alternative" on:click={() => dispatch('close')}>
+				<Icon data={faClose} />
+			</Button>
+		</div>
+		<SchemaForm schema={flow.schema} bind:isValid bind:args />
+		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md"
+			>Preview
+		</Button>
+	</div>
+	<div class="h-full overflow-y-auto mb-16">
+		{#if job}
+			<div class="w-full">
+				<FlowStatusViewer {job} bind:jobs />
+			</div>
+			{#if `result` in job}
+				<FlowJobResult {job} />
+			{/if}
+		{/if}
+	</div>
+</div>
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index eabd733a88..19ae3b0e4b 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons'
 	import { scriptPathToHref, truncateRev } from '$lib/utils'
+	import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons'
 
 	import Icon from 'svelte-awesome'
 	import { check } from 'svelte-awesome/icons'
 
 	import { CompletedJob, FlowStatusModule, JobService, QueuedJob } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import JobStatus from './JobStatus.svelte'
 	import FlowJobResult from './FlowJobResult.svelte'
+	import JobStatus from './JobStatus.svelte'
 
 	export let job: QueuedJob | CompletedJob
 	export let jobs: (CompletedJob | CompletedJob[] | undefined)[] = []
@@ -74,29 +74,28 @@
 	$: $workspaceStore && job && loadResults()
 </script>
 
-<div class="flow-root w-full p-4">
-	<div class="flex flex-row-reverse">
+<div class="flow-root w-full p-6">
+	<div class="flex ">
 		{#if job}
 			<div class="flex-col">
-				<a href="/run/{job?.id}" class="font-medium text-blue-600"
-					>{truncateRev(job?.id ?? '', 10)}</a
-				>
-				<div>
-					<JobStatus {job} />
-				</div>
+				<a href="/run/{job?.id}" class="font-medium text-blue-600">
+					{truncateRev(job?.id ?? '', 10)}
+				</a>
 			</div>
 		{/if}
 	</div>
+	<JobStatus {job} />
 
 	<p class="text-gray-500 mb-6 w-full text-center">
 		Step
-		<span class="font-medium text-gray-900"
-			>{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}</span
-		>
+		<span class="font-medium text-gray-900">
+			{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}
+		</span>
 		out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
 		<span class="mt-4" />
 	</p>
-	<ul class="-mb-8 w-full">
+
+	<ul class="w-full">
 		{#each job?.raw_flow?.modules ?? [] as mod, i}
 			<li class="w-full">
 				<div class="relative pb-8 w-full">
@@ -162,17 +161,18 @@
 									{#if job.flow_status?.modules[i].forloop_jobs}
 										{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
 											<div class="flex flex-col">
-												<a href="/run/{job}" class="font-medium text-blue-600"
-													>{truncateRev(job ?? '', 10)}</a
-												>
+												<a href="/run/{job}" class="font-medium text-blue-600">
+													{truncateRev(job ?? '', 10)}
+												</a>
 											</div>
 										{/each}
 									{:else if job.flow_status?.modules[i].job}
 										<a
 											href="/run/{job.flow_status?.modules[i].job}"
 											class="font-medium text-blue-600"
-											>{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}</a
 										>
+											{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}
+										</a>
 									{/if}
 								</div>
 							</div>
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 4ca79a68d1..b451824f87 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -182,7 +182,7 @@
 				<div slot="actions">
 					<div on:click={() => overlays[argName]?.focus('connect')}>
 						<Tooltip placement="bottom" content="Input connect">
-							<Button color="blue" size="sm" class="h-8">
+							<Button size="sm" class="blue-button h-8">
 								<Icon data={faChain} />
 							</Button>
 						</Tooltip>
diff --git a/frontend/src/lib/components/JobStatus.svelte b/frontend/src/lib/components/JobStatus.svelte
index bf34286601..bd16a12a9f 100644
--- a/frontend/src/lib/components/JobStatus.svelte
+++ b/frontend/src/lib/components/JobStatus.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+	import { displayDate, forLater, msToSec } from '$lib/utils'
 	import {
 		faCalendar,
+		faCheck,
 		faCircle,
 		faClock,
 		faHourglassHalf,
 		faTimes
 	} from '@fortawesome/free-solid-svg-icons'
-	import { displayDate, forLater, msToSec } from '$lib/utils'
 
 	import Icon from 'svelte-awesome'
-	import { check } from 'svelte-awesome/icons'
 
 	import type { CompletedJob, QueuedJob } from '$lib/gen'
+	import { Badge } from 'flowbite-svelte'
 
 	const SMALL_ICON_SCALE = 0.7
 
@@ -19,32 +20,39 @@
 </script>
 
 {#if job && 'success' in job && job.success}
-	<Icon class="text-green-600" data={check} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Succeeded {job.is_skipped ? '(Skipped)' : ''}</span>
-	<div>
-		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
-			>Job ran in {msToSec(job.duration_ms)}
-			s</span
-		>
-	</div>
+	<Badge large color="green">
+		<Icon data={faCheck} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Succeeded {job.is_skipped ? '(Skipped)' : ''}
+	</Badge>
+
+	<Badge large>
+		<Icon data={faHourglassHalf} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Job ran in {msToSec(job.duration_ms)} s
+	</Badge>
 {:else if job && 'success' in job}
-	<Icon class="text-red-700" data={faTimes} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Failed</span>
-	<div>
-		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
-			>Job ran in {msToSec(job.duration_ms)}
-			s</span
-		>
-	</div>
+	<Badge large color="red">
+		<Icon data={faTimes} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Failed
+	</Badge>
+	<Badge large>
+		<Icon data={faHourglassHalf} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Job ran in {msToSec(job.duration_ms)}s
+	</Badge>
 {:else if job && 'running' in job && job.running}
-	<Icon class="text-yellow-500" data={faCircle} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Running</span>
+	<Badge large color="yellow">
+		<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Running
+	</Badge>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
-	<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Scheduled for {displayDate(job.scheduled_for)}</span>
+	<Badge>
+		<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Scheduled for {displayDate(job.scheduled_for)}
+	</Badge>
 {:else if job && 'running' in job}
-	<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Queued</span>
+	<Badge>
+		<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Queued
+	</Badge>
 {:else}
 	<Icon class="text-gray-200" data={faCircle} scale={SMALL_ICON_SCALE} />
 {/if}
diff --git a/frontend/src/lib/components/ObjectResourceInput.svelte b/frontend/src/lib/components/ObjectResourceInput.svelte
index 1c97b4ac41..dfaab5b1d7 100644
--- a/frontend/src/lib/components/ObjectResourceInput.svelte
+++ b/frontend/src/lib/components/ObjectResourceInput.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { ResourceService } from '$lib/gen'
 
-	import ResourcePicker from './ResourcePicker.svelte'
 	import { workspaceStore } from '$lib/stores'
-	import SchemaForm from './SchemaForm.svelte'
 	import RadioButton from './RadioButton.svelte'
+	import ResourcePicker from './ResourcePicker.svelte'
+	import SchemaForm from './SchemaForm.svelte'
 
 	export let format: string
 	export let value: any
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index 22153d30d5..f577b87f0e 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -144,7 +144,7 @@
 				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
 				schemaModal.openModal()
 			}}
-			color="blue"
+			class="blue-button"
 		>
 			<Icon data={faPlus} class="mr-1" />
 			Add argument
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 0b39e92d84..4d60804b6f 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -96,7 +96,7 @@
 <div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
+		<div class="justify-between flex flex-row drop-shadow-sm w-full mt-4">
 			<div class="wizard-nav flex flex-row w-full">
 				<button
 					class="{step === 1
@@ -279,7 +279,6 @@
 	/* .wizard-nav {
 		@apply w-1/2 sm:w-1/4;
 	} */
-
 	.wizard-nav button {
 		max-height: 30px;
 	}
diff --git a/frontend/src/lib/components/flows/FlowSettings.svelte b/frontend/src/lib/components/flows/FlowSettings.svelte
index aabde27a63..93cb7ba58b 100644
--- a/frontend/src/lib/components/flows/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/FlowSettings.svelte
@@ -4,7 +4,6 @@
 	import { Dropdown, DropdownItem } from 'flowbite-svelte'
 	import Icon from 'svelte-awesome'
 	import Editor from '../Editor.svelte'
-	import FlowPreview from '../FlowPreview.svelte'
 	import FlowViewer from '../FlowViewer.svelte'
 	import Modal from '../Modal.svelte'
 	import RadioButton from '../RadioButton.svelte'
@@ -129,31 +128,29 @@
 				rows="1"
 			/>
 		</label>
-	</div>
 
-	<div class="mx-6">
-		<RadioButton
-			options={[
-				[
-					{
-						title: 'UI or webhook triggered',
-						desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
-					},
-					'push'
-				],
-				[
-					{
-						title: 'Watching changes regularly',
-						desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
-					},
-					'pull'
-				]
-			]}
-			bind:value={$mode}
-		/>
-	</div>
-	{#if $mode == 'pull'}
-		<div class="p-4">
+		<div class="mt-4">
+			<RadioButton
+				options={[
+					[
+						{
+							title: 'UI or webhook triggered',
+							desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
+						},
+						'push'
+					],
+					[
+						{
+							title: 'Watching changes regularly',
+							desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
+						},
+						'pull'
+					]
+				]}
+				bind:value={$mode}
+			/>
+		</div>
+		{#if $mode == 'pull'}
 			<CollapseLink text="set primary schedule" open={true}>
 				<Tooltip>
 					The primary schedule of a flow is simply a schedule that has the same name as a flow. It
@@ -177,15 +174,6 @@
 				</div>
 				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
 			</CollapseLink>
-		</div>
-	{/if}
-
-	<div class="p-6">
-		<FlowPreview
-			mode={$mode}
-			flow={$flowStore}
-			i={$flowStore?.value.modules.length}
-			bind:args={scheduleArgs}
-		/>
+		{/if}
 	</div>
 </FlowBox>
diff --git a/frontend/src/routes/__layout@root.svelte b/frontend/src/routes/__layout@root.svelte
index 24dad814c9..795e49df80 100644
--- a/frontend/src/routes/__layout@root.svelte
+++ b/frontend/src/routes/__layout@root.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+	import { goto } from '$app/navigation'
+	import { OpenAPI } from '$lib/gen'
+	import { logout } from '$lib/logout'
+	import { superadmin, userStore, usersWorkspaceStore, workspaceStore } from '$lib/stores'
+	import { clickOutside } from '$lib/utils'
 	import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
 	import {
 		faBookOpen,
@@ -21,11 +26,6 @@
 	import { onMount } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import '../app.css'
-	import { OpenAPI } from '$lib/gen'
-	import { superadmin, userStore, usersWorkspaceStore, workspaceStore } from '$lib/stores'
-	import { clickOutside } from '$lib/utils'
-	import { logout } from '$lib/logout'
-	import { goto } from '$app/navigation'
 
 	OpenAPI.WITH_CREDENTIALS = true
 
@@ -342,9 +342,9 @@
 		</ul>
 	</nav>
 	<div
-		class="bg-white antialiased text-gray-900 pt-4 {isCollapsed
-			? 'pl-12'
-			: 'pl-44'} pr-8 flex h-full max-w-screen flex-col items-center"
+		class="bg-white antialiased text-gray-900 {isCollapsed
+			? 'pl-8'
+			: 'pl-36'} flex h-full max-w-screen flex-col items-center"
 	>
 		<slot />
 	</div>