diff --git a/src/lib/core/refactor/Composer.svelte b/src/lib/core/refactor/Composer.svelte
index c1b5674..052cc9d 100644
--- a/src/lib/core/refactor/Composer.svelte
+++ b/src/lib/core/refactor/Composer.svelte
@@ -17,13 +17,12 @@
 	}
 
 	interface IComposer {
-		layout?: IComposerLayout;
 		id: string;
-		me?: { id: string; do: any; data: any };
-		slot?: string;
+		layout?: IComposerLayout;
 		component?: string;
-		data?: Record<string, any>;
+		slot?: string;
 		children?: IComposer[];
+		data?: Record<string, any>;
 		machine?: any;
 	}
 
@@ -35,11 +34,11 @@
 	$: {
 		layoutStyle = computeLayoutStyle(composer?.layout);
 
-		initializeComposerState(composer);
+		loadComponentAndInitializeState(composer);
 
 		if (composer?.children) {
 			composer.children.forEach((child) => {
-				initializeComposerState(child);
+				loadComponentAndInitializeState(child);
 			});
 		}
 
@@ -52,6 +51,32 @@
 		}
 	}
 
+	async function loadComponentAndInitializeState(component: IComposer) {
+		if (!component) return;
+
+		if (component.id) {
+			component.store = createComposerStore(component.id, component.store || {});
+			if (component.data?.map) {
+				subscribeAndMapQueries(component.id, component.data.map);
+			}
+		}
+
+		if (component.children) {
+			component.children.forEach(loadComponentAndInitializeState);
+		}
+
+		// Load component and service
+		const componentName = component.component || 'FallBack';
+		component.me = {
+			id: component.id,
+			do: {
+				core: coreServices,
+				machine: component.machineService || null
+			}
+		};
+		return await getComponent(componentName);
+	}
+
 	function initializeAndStartMachine(composer: IComposer) {
 		if (composer?.machine) {
 			const machine = Machine(
@@ -85,21 +110,6 @@
         `;
 	}
 
-	function initializeComposerState(child: IComposer) {
-		if (!child) return;
-
-		if (child.id) {
-			child.store = createComposerStore(child.id, child.store || {});
-			if (child.data?.map) {
-				subscribeAndMapQueries(child.id, child.data.map);
-			}
-		}
-
-		if (child.children) {
-			child.children.forEach(initializeComposerState);
-		}
-	}
-
 	onDestroy(() => {
 		unsubscribers.forEach((unsub) => unsub());
 	});
@@ -111,30 +121,17 @@
 		}
 		return FallBack;
 	}
-
-	async function loadComponentAndService(component: IComposer) {
-		const componentName = component.component || 'FallBack';
-		component.me = {
-			id: component.id,
-			do: {
-				core: coreServices,
-				machine: component.machineService || null
-			}
-		};
-		return await getComponent(componentName);
-	}
 </script>
 
 <div
 	class={`grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}`}
 	style={layoutStyle}
 >
-	{#await loadComponentAndService(composer) then Component}
+	{#await loadComponentAndInitializeState(composer) then Component}
 		<svelte:component
 			this={Component}
 			id={composer.id}
 			data={getComposerStore(composer.id)}
-			machine={composer.machine}
 			me={composer.me}
 		/>
 	{/await}
@@ -144,12 +141,11 @@
 				class="grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}"
 				style={`grid-area: ${child.slot}`}
 			>
-				{#await loadComponentAndService(child) then ChildComponent}
+				{#await loadComponentAndInitializeState(child) then ChildComponent}
 					<svelte:component
 						this={ChildComponent}
 						id={child.id}
 						data={getComposerStore(child.id)}
-						machine={child.machine}
 						me={child.me}
 					/>
 					{#if child.children && child.children.length}