diff --git a/src/lib/components/HelloEarth/HelloEarth.svelte b/src/lib/components/HelloEarth/HelloEarth.svelte
index bafef9b..18b314d 100644
--- a/src/lib/components/HelloEarth/HelloEarth.svelte
+++ b/src/lib/components/HelloEarth/HelloEarth.svelte
@@ -1,6 +1,5 @@
 <script>
 	import { onMount } from 'svelte';
-
 	export let services;
 	export let store;
 
@@ -13,6 +12,10 @@
 	});
 </script>
 
-{#if $store && $store.pkpWallet.address}
-	<div class="p-12 bg-blue-400">Hello Earth {JSON.stringify($store.pkpWallet.address)}</div>
+<!-- Only render the div when $store.pkpWallet is defined -->
+{#if $store}
+	<div class="p-12 bg-blue-400">Hello Earth {$store.pkpWallet.address}</div>
+{:else}
+	<!-- You can display a loader or placeholder content here -->
+	<div>Loading...</div>
 {/if}
diff --git a/src/lib/core/Composite.svelte b/src/lib/core/Composite.svelte
index aa0900c..ada9583 100644
--- a/src/lib/core/Composite.svelte
+++ b/src/lib/core/Composite.svelte
@@ -27,13 +27,20 @@
 
 	$: layoutStyle = composite?.layout
 		? `
-grid-template-areas: ${composite.layout.areas};
-${composite.layout.gap ? `gap: ${composite.layout.gap};` : ''}
-${composite.layout.columns ? `grid-template-columns: ${composite.layout.columns};` : ''}
-${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
-`
+		grid-template-areas: ${composite.layout.areas};
+		${composite.layout.gap ? `gap: ${composite.layout.gap};` : ''}
+		${composite.layout.columns ? `grid-template-columns: ${composite.layout.columns};` : ''}
+		${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
+		`
 		: '';
 
+	$: if (composite?.children) {
+		composite.children.forEach((child) => {
+			initializeCompositeState(child);
+			mapAndSubscribe(child);
+		});
+	}
+
 	function initializeCompositeState(child: IComposite) {
 		if (child.id) {
 			child.store = createCompositeStore(child.id, child.store || {});
@@ -44,10 +51,6 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 		}
 	}
 
-	$: if (composite && composite.children) {
-		composite.children.forEach(initializeCompositeState);
-	}
-
 	function mapAndSubscribe(component: IComposite) {
 		console.log('Mapping and subscribing for:', component.id);
 
@@ -80,10 +83,6 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 		}
 	}
 
-	$: if (composite && composite.children) {
-		composite.children.forEach(mapAndSubscribe);
-	}
-
 	async function getComponent(componentName: string) {
 		if (components[componentName]) {
 			const module = await components[componentName]();
@@ -112,18 +111,13 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 		}
 		return loadedServices;
 	}
-	// Additional utility function to get component and service props
+
 	async function loadComponentAndService(component: IComposite) {
 		return await Promise.all([getComponent(component.component), getServiceProps(component)]);
 	}
 </script>
 
-<div
-	class={composite?.layout
-		? `grid w-full h-full ${composite.layout.tailwindClasses}`
-		: 'grid w-full h-full'}
-	style={layoutStyle}
->
+<div class={`grid w-full h-full ${composite?.layout?.tailwindClasses || ''}`} style={layoutStyle}>
 	{#if composite && 'component' in composite}
 		{#await loadComponentAndService(composite) then [Component, serviceProps]}
 			{#if Component}
@@ -141,7 +135,7 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 
 	{#if composite?.children}
 		{#each composite.children as child (child.id)}
-			<div class={`w-full h-full overflow-hidden`} style={`grid-area: ${child.slot}`}>
+			<div class="w-full h-full overflow-hidden" style={`grid-area: ${child.slot}`}>
 				{#await loadComponentAndService(child) then [ChildComponent, childServiceProps]}
 					{#if ChildComponent}
 						<svelte:component