diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 6abdd0676f..dbeebfa6f7 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -359,7 +359,6 @@
 		loadingDraft = false
 	}
 
-	let loadingJobs: boolean = $state(false)
 	onMount(() => {
 		setSavedraftCb?.(() => saveDraft())
 	})
@@ -1144,7 +1143,9 @@
 					}}
 					{forceTestTab}
 					{highlightArg}
-					{loadingJobs}
+					onRunPreview={() => {
+						flowPreviewButtons?.openPreview(true)
+					}}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 1eba9db49f..8d9b0af8cb 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -36,7 +36,7 @@
 		onEditInput?: ((moduleId: string, key: string) => void) | undefined
 		forceTestTab?: Record<string, boolean>
 		highlightArg?: Record<string, string | undefined>
-		loadingJobs?: boolean
+		onRunPreview?: () => void
 	}
 
 	let {
@@ -53,7 +53,8 @@
 		onTestUpTo = undefined,
 		onEditInput = undefined,
 		forceTestTab,
-		highlightArg
+		highlightArg,
+		onRunPreview = () => {}
 	}: Props = $props()
 
 	let flowModuleSchemaMap: FlowModuleSchemaMap | undefined = $state()
@@ -129,6 +130,7 @@
 					{onDeployTrigger}
 					{forceTestTab}
 					{highlightArg}
+					{onRunPreview}
 				/>
 			{/if}
 		</Pane>
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 41b3d15827..566b2cddbf 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -27,6 +27,7 @@
 		onDeployTrigger?: (trigger: Trigger) => void
 		forceTestTab?: Record<string, boolean>
 		highlightArg?: Record<string, string | undefined>
+		onRunPreview?: () => void
 	}
 
 	let {
@@ -37,7 +38,8 @@
 		savedFlow = undefined,
 		onDeployTrigger = () => {},
 		forceTestTab,
-		highlightArg
+		highlightArg,
+		onRunPreview
 	}: Props = $props()
 
 	const {
@@ -82,6 +84,7 @@
 			showCaptureHint.set(true)
 		}}
 		on:applyArgs
+		{onRunPreview}
 	/>
 {:else if $selectedId === 'Result'}
 	<p class="p-4 text-secondary">The result of the flow will be the result of the last node.</p>
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 1c3ce16070..421d2e050b 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -4,7 +4,6 @@
 	import { getContext, tick, untrack } from 'svelte'
 	import FlowCard from '../common/FlowCard.svelte'
 	import type { FlowEditorContext } from '../types'
-	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import JsonInputs from '$lib/components/JsonInputs.svelte'
 	import { convert } from '@redocly/json-to-json-schema'
 	import { sendUserToast } from '$lib/toast'
@@ -27,7 +26,6 @@
 		Check
 	} from 'lucide-svelte'
 	import CaptureIcon from '$lib/components/triggers/CaptureIcon.svelte'
-	import FlowPreviewContent from '$lib/components/FlowPreviewContent.svelte'
 	import FlowInputEditor from './FlowInputEditor.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import CaptureButton from '$lib/components/triggers/CaptureButton.svelte'
@@ -48,9 +46,10 @@
 	interface Props {
 		noEditor: boolean
 		disabled: boolean
+		onRunPreview?: () => void
 	}
 
-	let { noEditor, disabled }: Props = $props()
+	let { noEditor, disabled, onRunPreview }: Props = $props()
 
 	const {
 		flowStore,
@@ -76,7 +75,6 @@
 	let runDisabled: boolean = $state(false)
 	let editableSchemaForm: EditableSchemaForm | undefined = $state(undefined)
 	let savedPreviewArgs: Record<string, any> | undefined = $state(undefined)
-	let preventEscape = $state(false)
 	let isValid = $state(true)
 
 	function updateEditPanelSize(size: number | undefined) {
@@ -193,9 +191,6 @@
 		return { required: [], properties: {}, ...convert(parsed) }
 	}
 
-	let flowPreviewContent: FlowPreviewContent | undefined = $state()
-	let previewOpen = $state(false)
-
 	function handleKeydown(event: KeyboardEvent) {
 		if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
 			runPreview()
@@ -211,8 +206,7 @@
 		if (previewArguments) {
 			previewArgs.val = structuredClone($state.snapshot(previewArguments))
 		}
-		previewOpen = true
-		flowPreviewContent?.test()
+		onRunPreview?.()
 	}
 
 	function updatePreviewSchemaAndArgs(payload: any) {
@@ -359,18 +353,6 @@
 <!-- Add svelte:window to listen for keyboard events -->
 <svelte:window onkeydown={handleKeydown} />
 
-<Drawer bind:open={previewOpen} alwaysOpen size="75%" {preventEscape}>
-	<FlowPreviewContent
-		bind:this={flowPreviewContent}
-		open={previewOpen}
-		previewMode="whole"
-		on:close={() => {
-			previewOpen = false
-		}}
-		bind:preventEscape
-	/>
-</Drawer>
-
 <FlowCard {noEditor} title="Flow Input">
 	{#if !disabled}
 		<div class="py-2 px-4 h-full">
diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
index 8784ebc2e7..80708fea50 100644
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -4,7 +4,7 @@
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import FlowPreviewContent from '$lib/components/FlowPreviewContent.svelte'
 	import type { Job } from '$lib/gen'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, tick } from 'svelte'
 
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
@@ -26,6 +26,7 @@
 	export async function openPreview(test: boolean = false) {
 		if (!previewOpen) {
 			previewOpen = true
+			await tick()
 			flowPreviewContent?.refresh()
 			if (!test) return
 		}