diff --git a/frontend/src/lib/components/jobs/JobProgressBar.svelte b/frontend/src/lib/components/jobs/JobProgressBar.svelte
index 4b4684e32a..875b36d494 100644
--- a/frontend/src/lib/components/jobs/JobProgressBar.svelte
+++ b/frontend/src/lib/components/jobs/JobProgressBar.svelte
@@ -2,38 +2,45 @@
 	import { type Job } from '$lib/gen'
 	import ProgressBar from '../progressBar/ProgressBar.svelte'
 
-	export let job: Job | undefined = undefined
-	export let compact: boolean = false;
-	/// Progress of currently running job
-	export let scriptProgress: number | undefined = undefined;
-	// Removes `Step 1` and replaces it with `Running` 
-	export let hideStepTitle: boolean = false
-
-	let error: number | undefined = undefined
-	let index = 0
-	let subIndex: number = 0
-	let subLength: number  = 100
-	let length = 1
-	let nextInProgress = false
-
-	$: if (job) updateJobProgress(job);
-	$: subIndex = scriptProgress ?? 0;
-
-	function updateJobProgress(job: Job) { 
-		if (!job['running'] && !job['success']){
-			error = 0;			
-		}	else {
-			error = undefined;			
-		}		
-		// Anything that is success automatically gets 100% progress
-		if (job['success'] && scriptProgress)	
-			index = 1, subLength = 0, subIndex = 0, scriptProgress = 100;				
+	interface Props {
+		job?: Job | undefined
+		compact?: boolean
+		/// Progress of currently running job
+		scriptProgress?: number | undefined
+		// Removes `Step 1` and replaces it with `Running`
+		hideStepTitle?: boolean
+		class?: string
 	}
 
-	let resetP: any
+	let {
+		job = undefined,
+		compact = $bindable(false),
+		scriptProgress = $bindable(undefined),
+		hideStepTitle = $bindable(false),
+		class: className = $bindable('')
+	}: Props = $props()
+
+	let error: number | undefined = $state(undefined)
+	let index = $state(0)
+	let subIndex: number = $state(0)
+	let subLength: number = $state(100)
+	let length = $state(1)
+	let nextInProgress = false
+
+	let progressBar: ProgressBar | undefined = $state(undefined)
+	function updateJobProgress(job: Job) {
+		if (!job['running'] && !job['success']) {
+			error = 0
+		} else {
+			error = undefined
+		}
+		// Anything that is success automatically gets 100% progress
+		if (job['success'] && scriptProgress)
+			((index = 1), (subLength = 0), (subIndex = 0), (scriptProgress = 100))
+	}
 
 	export function reset() {
-		resetP?.()
+		progressBar?.resetP()
 		error = undefined
 		subIndex = 0
 		subLength = 100
@@ -42,17 +49,23 @@
 		scriptProgress = undefined
 	}
 
+	$effect(() => {
+		if (job) updateJobProgress(job)
+	})
+	$effect(() => {
+		subIndex = scriptProgress ?? 0
+	})
 </script>
 
 <ProgressBar
-	bind:resetP
+	bind:this={progressBar}
 	{length}
 	{index}
 	{nextInProgress}
 	{subLength}
 	{subIndex}
 	{error}
-	class={$$props.class}
-	bind:compact
-	bind:hideStepTitle
+	class={className}
+	{compact}
+	{hideStepTitle}
 />