diff --git a/src/lib/components/Recipies/machines/recipeMachine.ts b/src/lib/components/Recipies/machines/recipeMachine.ts
index 2798391..97a7ed4 100644
--- a/src/lib/components/Recipies/machines/recipeMachine.ts
+++ b/src/lib/components/Recipies/machines/recipeMachine.ts
@@ -1,6 +1,5 @@
 // src/lib/components/Recipies/machines/authMachine.ts
 import { createMachine } from 'xstate';
-import { formMachine } from './formMachine';
 
 export const recipeMachine = createMachine(
     {
diff --git a/src/lib/components/examples/HelloEarth.svelte b/src/lib/components/examples/HelloEarth.svelte
deleted file mode 100644
index 2347aac..0000000
--- a/src/lib/components/examples/HelloEarth.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-	export let services;
-	export let store;
-
-	let isStoreLoaded = false;
-
-	$: if (services && services.helloEarthAlert) {
-		// services.helloEarthAlert.alertMe();
-	}
-	$: if (services.core) {
-		// services.core.testAlert();
-	}
-
-	$: if ($store) isStoreLoaded = true;
-</script>
-
-{#if isStoreLoaded}
-	<div class="container p-12">
-		<h1 class="h1">
-			{#if $store.title}{$store.title}{/if}
-		</h1>
-		<h2 class="py-6 h2">
-			{#if $store.description}{$store.description}{/if}
-		</h2>
-		<h3 class="mt-4 h3">Wallet Address</h3>
-		{#if $store.pkpWallet}
-			<p>{$store.pkpWallet.address}</p>
-		{/if}
-
-		<h4 class="mt-4 h4">store: hello (init default)</h4>
-		{#if $store.hello}{$store.hello}{/if}
-		<h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
-		{#if $store.hello2}{$store.hello2}{/if}
-
-		<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
-		{#if $store.todos}
-			<dl class="list-dl">
-				{#each $store.todos as todo}
-					<div>
-						<span class="flex-auto">
-							<dd>{todo.text}</dd>
-						</span>
-					</div>
-				{/each}
-			</dl>
-		{/if}
-	</div>
-{:else}
-	<div class="container">
-		<p>Loading...</p>
-	</div>
-{/if}
diff --git a/src/lib/components/examples/UserForm.svelte b/src/lib/components/examples/UserForm.svelte
deleted file mode 100644
index caf9b8e..0000000
--- a/src/lib/components/examples/UserForm.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	import { superForm } from 'sveltekit-superforms/client';
-	import { UserSchema } from '$lib/types/UserSchema';
-	import currentStep from './Recipies.svelte';
-
-	const initialFormData = { name: '', email: '' };
-
-	const { form, errors, validate, constraints } = superForm(initialFormData, {
-		validators: UserSchema,
-		warnings: {
-			noValidationAndConstraints: false
-		},
-		validationMethod: 'oninput',
-		clearOnSubmit: 'errors-and-message'
-	});
-
-	async function handleSubmit() {
-		const validationResult = await validate();
-
-		if (validationResult.valid) {
-			console.log(form);
-			currentStep.update((val) => val + 1); // move to the next step
-		}
-	}
-</script>
-
-<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">Name</label>
-		{/if}
-
-		<input
-			name="name"
-			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}
-			{...constraints.name}
-		/>
-	</div>
-
-	<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">Email</label>
-		{/if}
-
-		<input
-			name="email"
-			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}
-			{...constraints.email}
-		/>
-	</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 || $errors.email}
-	>
-		Submit
-	</button>
-</form>
diff --git a/src/lib/components/maschines/SignIn.svelte b/src/lib/components/maschines/SignIn.svelte
deleted file mode 100644
index 9f01321..0000000
--- a/src/lib/components/maschines/SignIn.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<!-- src/lib/components/machines/SignIn.svelte -->
-<script lang="ts">
-	import { useMachine } from '@xstate/svelte';
-	import { SignInMachine } from './signInMachine';
-	import { superForm } from 'sveltekit-superforms/client';
-	import { HelloUserSchema } from '$lib/types/HelloUserSchema';
-
-	const { state, send } = useMachine(SignInMachine);
-
-	const initialFormData = {
-		email: '',
-		name: ''
-	};
-
-	const { form, errors, validate, constraints } = superForm(initialFormData, {
-		validators: HelloUserSchema,
-		warnings: {
-			noValidationAndConstraints: false
-		},
-		validationMethod: 'oninput',
-		clearOnSubmit: 'errors-and-message'
-	});
-
-	async function handleNext(field) {
-		const validationResult = await validate(field);
-		if (validationResult.valid) {
-			send({ type: 'NEXT', value: form[field] });
-		}
-	}
-</script>
-
-{#if $state.matches('notSignedIn')}
-	<button on:click={() => send('START')}>Start Sign In</button>
-{:else if $state.matches('email')}
-	<div>
-		<label for="email">Email:</label>
-		<input id="email" type="email" bind:value={form.email} {...constraints.email} />
-		{#if errors.email}<span>{$errors.email}</span>{/if}
-		<button on:click={() => handleNext('email')}>Next</button>
-	</div>
-{:else if $state.matches('name')}
-	<div>
-		<label for="name">Name:</label>
-		<input id="name" type="text" bind:value={form.name} {...constraints.name} />
-		{#if errors.name}<span>{$errors.name}</span>{/if}
-		<button on:click={() => handleNext('name')}>Next</button>
-	</div>
-{:else if $state.matches('signedIn')}
-	<!-- <Composite id="account" component="Account" /> -->account signed in
-{/if}
diff --git a/src/lib/components/maschines/signInMachine.ts b/src/lib/components/maschines/signInMachine.ts
deleted file mode 100644
index 5324dab..0000000
--- a/src/lib/components/maschines/signInMachine.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// src/lib/components/machines/SignInMachine.ts
-import { createMachine, assign } from 'xstate';
-
-export const SignInMachine = createMachine({
-    id: 'signIn',
-    initial: 'notSignedIn',
-    context: {
-        email: '',
-        name: ''
-    },
-    states: {
-        notSignedIn: {
-            on: { START: 'email' }
-        },
-        email: {
-            on: {
-                NEXT: {
-                    target: 'name',
-                    actions: assign({ email: (_, event) => event.value })
-                }
-            }
-        },
-        name: {
-            on: {
-                NEXT: {
-                    target: 'signedIn',
-                    actions: assign({ name: (_, event) => event.value })
-                }
-            }
-        },
-        signedIn: {
-            type: 'final'
-        }
-    }
-});
\ No newline at end of file
diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index dda5c9f..275343c 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/src/lib/components/refactor/ComposerForm.svelte
@@ -70,6 +70,7 @@
 </script>
 
 <div class="w-full p-6 border-2 border-red-500">
+	My ID is: {$me.id} <br />
 	My state is: {$me.state}
 	{#if $successMessage}
 		<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
diff --git a/src/lib/components/refactor/ComposerGraph.svelte b/src/lib/components/refactor/ComposerGraph.svelte
index bc3cfa0..84478e6 100644
--- a/src/lib/components/refactor/ComposerGraph.svelte
+++ b/src/lib/components/refactor/ComposerGraph.svelte
@@ -2,7 +2,7 @@
 	export let me;
 </script>
 
-<div class="flex flex-col h-screen border-2 border-green-500">
+<div class="flex flex-col w-full h-full border-2 border-green-500">
 	<section class="p-8 h-96">
 		<p>My ID is: {$me.id}</p>
 
diff --git a/src/lib/components/refactor/ComposerCharly.svelte b/src/lib/components/refactor/ComposerQueries.svelte
similarity index 100%
rename from src/lib/components/refactor/ComposerCharly.svelte
rename to src/lib/components/refactor/ComposerQueries.svelte
diff --git a/src/lib/core/refactor/Composer.svelte b/src/lib/core/refactor/Composer.svelte
index 5d63e3c..f45ee75 100644
--- a/src/lib/core/refactor/Composer.svelte
+++ b/src/lib/core/refactor/Composer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import Composer from './Composer.svelte';
-	import FallBack from './FallBack.svelte';
 	import components from '$lib/core/componentLoader';
 	import { createComposerStore, getComposerStore } from './composerStores';
 	import { coreServices } from './coreServices';
@@ -116,8 +115,8 @@
 		return `
             grid-template-areas: ${layout.areas};
             ${layout.gap ? `gap: ${layout.gap};` : ''}
-            ${layout.columns ? `grid-template-columns: ${layout.columns};` : ''}
-            ${layout.rows ? `grid-template-rows: ${layout.rows};` : ''}
+            ${layout.columns ? `grid-template-columns: ${layout.columns};` : '1fr'}
+            ${layout.rows ? `grid-template-rows: ${layout.rows};` : '1fr'}
         `;
 	}
 
@@ -130,7 +129,6 @@
 			const module = await components[componentName]();
 			return module.default;
 		}
-		return FallBack;
 	}
 </script>
 
diff --git a/src/lib/core/refactor/FallBack.svelte b/src/lib/core/refactor/FallBack.svelte
deleted file mode 100644
index c4fb85e..0000000
--- a/src/lib/core/refactor/FallBack.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<script>
-	export let id;
-	console.log(`FallBack component rendered with id ${id}`);
-</script>
\ No newline at end of file
diff --git a/src/routes/composer/+page.svelte b/src/routes/composer/+page.svelte
index 62f3fa2..5f398bb 100644
--- a/src/routes/composer/+page.svelte
+++ b/src/routes/composer/+page.svelte
@@ -5,30 +5,17 @@
 
 	let composer = {
 		id: 'ComposerParent',
-		machine: {
-			initial: 'NOTREADY',
-			states: {
-				NOTREADY: {
-					on: { TOGGLE: 'READY' }
-				},
-				READY: {
-					on: { TOGGLE: 'NOTREADY' }
-				}
-			}
-		},
 		layout: {
 			columns: '1fr 1fr',
-			rows: 'auto 1fr',
 			areas: `
-				"topleft topright"
-				"mainleft mainright"
+				"left right"
 			`
 		},
 		children: [
 			{
-				id: 'ComposerCharly',
-				component: 'ComposerCharly',
-				slot: 'mainright',
+				id: 'ComposerQueries',
+				component: 'ComposerQueries',
+				slot: 'right',
 				data: {
 					map: {
 						todos: queryTodos,
@@ -55,49 +42,10 @@
 					}
 				}
 			},
-			{
-				id: 'ComposerBob',
-				component: 'ComposerBob',
-				slot: 'topleft',
-				machine: {
-					initial: 'READY',
-					states: {
-						NOTREADY: {
-							on: { TOGGLE: 'READY' }
-						},
-						READY: {
-							on: { TOGGLE: 'NOTREADY' }
-						}
-					}
-				}
-			},
-			{
-				id: 'ComposerAlice',
-				component: 'ComposerAlice',
-				slot: 'topright',
-				machine: {
-					initial: 'RED',
-					states: {
-						GREEN: {
-							on: { SWITCH: 'YELLOW' }
-						},
-						YELLOW: {
-							on: { SWITCH: 'RED' }
-						},
-						RED: {
-							on: { SWITCH: 'GREEN' }
-						}
-					},
-					on: {
-						READY: 'GREEN',
-						NOTREADY: 'RED'
-					}
-				}
-			},
 			{
 				id: 'ComposerForm',
 				component: 'ComposerForm',
-				slot: 'mainleft',
+				slot: 'left',
 				machine: {
 					id: 'validation',
 					initial: 'notValidated',
diff --git a/src/routes/graphql/+page.gql b/src/routes/composer/graphql/+page.gql
similarity index 100%
rename from src/routes/graphql/+page.gql
rename to src/routes/composer/graphql/+page.gql
diff --git a/src/routes/composer/graphql/+page.svelte b/src/routes/composer/graphql/+page.svelte
new file mode 100644
index 0000000..346fcc3
--- /dev/null
+++ b/src/routes/composer/graphql/+page.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Composer from '$lib/core/refactor/Composer.svelte';
+	import { onMount } from 'svelte';
+	import type { PageData } from '../../test/$houdini';
+
+	export let data: PageData;
+
+	let composer;
+
+	$: ({ queryTest } = data);
+
+	onMount(async () => {
+		composer = await {
+			id: 'ComposerGraph',
+			component: 'ComposerGraph',
+			data: {
+				gql: {
+					test: $queryTest.data
+				}
+			},
+			machine: {
+				initial: 'LOADING',
+				states: {
+					LOADING: {
+						on: {
+							TOGGLE: {
+								target: 'READY'
+							}
+						}
+					},
+					READY: {
+						on: {
+							TOGGLE: {
+								target: 'LOADING'
+							}
+						}
+					}
+				}
+			}
+		};
+	});
+</script>
+
+<Composer {composer} />
diff --git a/src/routes/composer/stateToState/+page.svelte b/src/routes/composer/stateToState/+page.svelte
new file mode 100644
index 0000000..ee1d48c
--- /dev/null
+++ b/src/routes/composer/stateToState/+page.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import Composer from '$lib/core/refactor/Composer.svelte';
+
+	let composer = {
+		id: 'ComposerParent',
+		layout: {
+			rows: '1fr 1fr',
+			areas: `
+				"top"
+                "bottom"
+			`
+		},
+		children: [
+			{
+				id: 'ComposerBob',
+				component: 'ComposerBob',
+				slot: 'top',
+				machine: {
+					initial: 'READY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerAlice',
+				component: 'ComposerAlice',
+				slot: 'bottom',
+				machine: {
+					initial: 'RED',
+					states: {
+						GREEN: {
+							on: { SWITCH: 'YELLOW' }
+						},
+						YELLOW: {
+							on: { SWITCH: 'RED' }
+						},
+						RED: {
+							on: { SWITCH: 'GREEN' }
+						}
+					},
+					on: {
+						READY: 'GREEN',
+						NOTREADY: 'RED'
+					}
+				}
+			}
+		]
+	};
+</script>
+
+<Composer {composer} />
diff --git a/src/routes/graphql/+page.svelte b/src/routes/graphql/+page.svelte
deleted file mode 100644
index 6a9e433..0000000
--- a/src/routes/graphql/+page.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-	import Composer from '$lib/core/refactor/Composer.svelte';
-	import { onMount } from 'svelte';
-	import type { PageData } from '../test/$houdini';
-
-	export let data: PageData;
-
-	let composer;
-
-	$: ({ queryTest } = data);
-
-	onMount(async () => {
-		composer = await {
-			id: 'ComposerParent',
-			machine: {
-				initial: 'NOTREADY',
-				states: {
-					NOTREADY: {
-						on: { TOGGLE: 'READY' }
-					},
-					READY: {
-						on: { TOGGLE: 'NOTREADY' }
-					}
-				}
-			},
-			children: [
-				{
-					id: 'ComposerGraph',
-					component: 'ComposerGraph',
-					data: {
-						gql: {
-							test: $queryTest.data
-						}
-					},
-					machine: {
-						initial: 'LOADING',
-						states: {
-							LOADING: {
-								on: {
-									TOGGLE: {
-										target: 'READY'
-									}
-								}
-							},
-							READY: {
-								on: {
-									TOGGLE: {
-										target: 'LOADING'
-									}
-								}
-							}
-						}
-					}
-				}
-			]
-		};
-	});
-</script>
-
-<Composer {composer} />