diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 25c07dadd1..ddd0967427 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -242,6 +242,8 @@
 	</div>
 </div>
 
-<Drawer bind:open={previewOpen} size="800px">
-	<FlowPreviewContent bind:args={previewArgs} on:close={() => (previewOpen = !previewOpen)} />
-</Drawer>
+{#if $flowStateStore && $flowStore}
+	<Drawer bind:open={previewOpen} size="800px">
+		<FlowPreviewContent bind:args={previewArgs} on:close={() => (previewOpen = !previewOpen)} />
+	</Drawer>
+{/if}
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 4ce3600a75..7b94510a1e 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -11,7 +11,6 @@
 	import { flowStore } from './flows/flowStore'
 	import { runFlowPreview } from './flows/utils'
 	import FlowStatusViewer from './FlowStatusViewer.svelte'
-	import ProgressBar from './ProgressBar.svelte'
 	import SchemaForm from './SchemaForm.svelte'
 
 	export let args: Record<string, any> = {}
@@ -23,7 +22,7 @@
 	let intervalState: 'idle' | 'canceled' | 'done' | 'running' = 'idle'
 
 	$: newFlow = flowStateToFlow($flowStateStore, $flowStore)
-	$: steps = newFlow.value.modules.length
+	$: steps = newFlow?.value.modules.length ?? 0
 
 	const dispatch = createEventDispatcher()
 
diff --git a/frontend/src/routes/flows/add.svelte b/frontend/src/routes/flows/add.svelte
index f09ac5dacb..6822a7863b 100644
--- a/frontend/src/routes/flows/add.svelte
+++ b/frontend/src/routes/flows/add.svelte
@@ -12,11 +12,14 @@
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { initFlow } from '$lib/components/flows/flowStore'
 	import { FlowService, type Flow } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
 	import { decodeState, emptySchema, sendUserToast } from '$lib/utils'
 
 	const initialState = $page.url.searchParams.get('state')
 	const hubId = $page.url.searchParams.get('hub')
 
+	const templatePath = $page.url.searchParams.get('template')
+
 	async function loadFlow() {
 		let flow: Flow =
 			initialState != undefined
@@ -32,7 +35,16 @@
 						schema: emptySchema()
 				  }
 
-		if (hubId) {
+		if (templatePath) {
+			const template = await FlowService.getFlowByPath({
+				workspace: $workspaceStore!,
+				path: templatePath
+			})
+			Object.assign(flow, template)
+			flow = flow
+			$page.url.searchParams.delete('template')
+			sendUserToast('Code & arguments have been loaded from template.')
+		} else if (hubId) {
 			const hub = (await FlowService.getHubFlowById({ id: Number(hubId) })).flow
 			Object.assign(flow, hub)
 			flow = flow
diff --git a/frontend/src/routes/flows/get/[...path].svelte b/frontend/src/routes/flows/get/[...path].svelte
index e7d4333a15..70376386d2 100644
--- a/frontend/src/routes/flows/get/[...path].svelte
+++ b/frontend/src/routes/flows/get/[...path].svelte
@@ -24,7 +24,8 @@
 		faList,
 		faCalendar,
 		faShare,
-		faGlobe
+		faGlobe,
+		faCodeFork
 	} from '@fortawesome/free-solid-svg-icons'
 
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -162,6 +163,15 @@
 							<span class="pl-1">Edit</span>
 						</div>
 					</a>
+					<a
+						class="inline-flex items-center default-button bg-transparent hover:bg-blue-500 text-blue-700 font-normal hover:text-white py-0 px-1 border-blue-500 hover:border-transparent rounded"
+						href="/flows/add?template={flow.path}"
+					>
+						<div class="inline-flex items-center justify-center">
+							<Icon class="text-blue-500" data={faCodeFork} scale={0.5} />
+							<span class="pl-1">Use as template/Fork</span>
+						</div>
+					</a>
 				</div>
 				<div class="px-1">
 					<a