diff --git a/src/lib/components/examples/Recipies.svelte b/src/lib/components/examples/Recipies.svelte
index 0f49c14..b5f6df2 100644
--- a/src/lib/components/examples/Recipies.svelte
+++ b/src/lib/components/examples/Recipies.svelte
@@ -5,6 +5,7 @@
 	import { TreeSchema } from '$lib/types/TreeSchema';
 	import { writable, get } from 'svelte/store';
 	import { createUser } from './userService';
+	import { derived } from 'svelte/store';
 
 	const initialFormData = { name: '', age: '' };
 
@@ -150,127 +151,123 @@
 	const { state, send } = useMachine(stateMachine);
 
 	$: {
-		// Reactively update the form validation status based on the errors
 		isFormValid.set(Object.keys(get(errors)).length === 0);
 	}
+
+	const possibleActions = derived(state, ($state) =>
+		Object.keys(stateMachine.states[$state.value]?.on || {})
+	);
 </script>
 
-<main>
-	<h1 class="text-2xl">
-		{$state.value in stateMachine.states && stateMachine.states[$state.value].meta
-			? stateMachine.states[$state.value].meta.title
-			: 'Unknown state'}
-	</h1>
-	<p>
-		{$state.value in stateMachine.states ? stateMachine.states[$state.value].meta.description : ''}
-	</p>
-
-	{#if $state.value === 'start'}
-		<button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('NEXT')}>
-			Next
-		</button>
-	{:else if $state.value === 'name'}
-		<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
-			<div class="mb-4">
-				{#if $errors.name}
-					<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
-				{:else}
-					<label for="name" class="block mb-2 font-semibold text-white"
-						>{$state.value in stateMachine.states
-							? stateMachine.states[$state.value].meta.fieldLabel
-							: ''}</label
-					>
-				{/if}
-
-				<input
-					name={$state.value}
-					type="text"
-					class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-					bind:value={$form.name}
-					aria-invalid={$errors.name ? 'true' : undefined}
-					{...$state.context.constraints}
-				/>
-			</div>
-			<button
-				type="submit"
-				class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-				disabled={$errors.name}
-				on:click={() => send('NEXT')}
-			>
-				Next
-			</button>
-		</form>
-	{:else if $state.value === 'email'}
-		<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
-			<div class="mb-4">
-				{#if $errors.email}
-					<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
-				{:else}
-					<label for="email" class="block mb-2 font-semibold text-white"
-						>{$state.value in stateMachine.states
-							? stateMachine.states[$state.value].meta.fieldLabel
-							: ''}</label
-					>
-				{/if}
-
-				<input
-					name={$state.value}
-					type="email"
-					class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-					bind:value={$form.email}
-					aria-invalid={$errors.email ? 'true' : undefined}
-					{...$state.context.constraints}
-				/>
-			</div>
-			<button
-				type="submit"
-				class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-				disabled={$errors.email}
-				on:click={() => send('NEXT')}
-			>
-				Next
-			</button>
-		</form>
-	{:else if $state.value === 'summary'}
-		<p>Name: {$form.name}</p>
-		<p>Email: {$form.email}</p>
-		<button
-			class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
-			on:click={() => {
-				console.log('Submit button clicked');
-				send('SUBMIT');
-			}}
-		>
-			Submit
-		</button>
-	{:else if $state.value === 'submitting'}
-		<!-- You can optionally add a spinner or some visual indication here -->
-	{:else if $state.value === 'success'}
-		<p>Thank you for your submission!</p>
-		<button class="px-4 py-2 mt-4 text-white bg-green-500 rounded" on:click={() => send('RESTART')}>
-			Start Again
-		</button>
-	{:else if $state.value === 'failure'}
-		<p class="text-red-500">
-			Error: {$state.context.error?.message || 'An unknown error occurred.'}
-		</p>
-		<button class="px-4 py-2 mt-4 text-white bg-red-500 rounded" on:click={() => send('RESTART')}>
-			Try Again
-		</button>
-	{/if}
-</main>
-
-<!-- this is our new button -->
-<div>
-	{#if $state.value in stateMachine.states && stateMachine.states[$state.value].on.NEXT}
-		<button
-			class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
-			on:click={() => send('NEXT')}
-			disabled={$errors[$state.value]}
-		>
+<main class="flex items-center justify-center w-full h-full">
+	<div class="w-full max-w-lg">
+		<h1 class="text-2xl">
+			{$state.value in stateMachine.states && stateMachine.states[$state.value].meta
+				? stateMachine.states[$state.value].meta.title
+				: 'Unknown state'}
+		</h1>
+		<p>
 			{$state.value in stateMachine.states
-				? stateMachine.states[$state.value].meta.buttonLabel
+				? stateMachine.states[$state.value].meta.description
 				: ''}
-		</button>
-	{/if}
-</div>
+		</p>
+
+		{#if $state.value === 'start'}Welcome{:else if $state.value === 'name'}
+			<form on:submit|preventDefault={handleSubmit} class="w-full max-w-lg">
+				<div class="mb-4">
+					{#if $errors.name}
+						<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
+					{:else}
+						<label for="name" class="block mb-2 font-semibold text-white"
+							>{$state.value in stateMachine.states
+								? stateMachine.states[$state.value].meta.fieldLabel
+								: ''}</label
+						>
+					{/if}
+
+					<input
+						name={$state.value}
+						type="text"
+						class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+						bind:value={$form.name}
+						aria-invalid={$errors.name ? 'true' : undefined}
+						{...$state.context.constraints}
+					/>
+				</div>
+			</form>
+		{:else if $state.value === 'email'}
+			<form on:submit|preventDefault={handleSubmit} class="w-full max-w-lg">
+				<div class="mb-4">
+					{#if $errors.email}
+						<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
+					{:else}
+						<label for="email" class="block mb-2 font-semibold text-white"
+							>{$state.value in stateMachine.states
+								? stateMachine.states[$state.value].meta.fieldLabel
+								: ''}</label
+						>
+					{/if}
+
+					<input
+						name={$state.value}
+						type="email"
+						class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+						bind:value={$form.email}
+						aria-invalid={$errors.email ? 'true' : undefined}
+						{...$state.context.constraints}
+					/>
+				</div>
+			</form>
+		{:else if $state.value === 'summary'}
+			<p>Name: {$form.name}</p>
+			<p>Email: {$form.email}</p>
+		{:else if $state.value === 'submitting'}
+			Add spinner here
+		{:else if $state.value === 'success'}
+			<p>Thank you for your submission!</p>
+		{:else if $state.value === 'failure'}
+			<p class="text-red-500">
+				Error: {$state.context.error?.message || 'An unknown error occurred.'}
+			</p>
+		{/if}
+		{#if possibleActions}
+			<div class="flex justify-between">
+				{#each $possibleActions as action (action)}
+					{#if action === 'BACK'}
+						<button
+							class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
+							on:click={() => send(action)}
+						>
+							{action}
+						</button>
+					{/if}
+				{/each}
+
+				{#each $possibleActions as action (action)}
+					{#if action !== 'NEXT' && action !== 'BACK'}
+						<button
+							class="px-4 py-2 mx-auto mt-4 text-white bg-blue-500 rounded"
+							on:click={() => send(action)}
+						>
+							{action}
+						</button>
+					{/if}
+				{/each}
+
+				{#each $possibleActions as action (action)}
+					{#if action === 'NEXT'}
+						<button
+							class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
+							on:click={() => send(action)}
+							disabled={$errors[$state.value] || $state.context.constraints[$state.value]}
+						>
+							{$state.value in stateMachine.states
+								? stateMachine.states[$state.value].meta.buttonLabel
+								: ''}
+						</button>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</div>
+</main>