diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index ed650a4..6159ab4 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
+	import Composite from './Composite.svelte'; // Recursive import
 	import components from '$lib/components.ts';
 	import { getContextStore } from '$lib/stores/contextStore.ts';
-	export let componentsData = [];
 
-	// For each component, get or create its context store
-	componentsData.children.forEach((child) => {
-		child.store = getContextStore(child.componentName);
-	});
+	export let componentsData = {
+		layout: '',
+		children: []
+	};
+
+	$: if (componentsData && componentsData.children) {
+		componentsData.children.forEach((child) => {
+			child.store = getContextStore(child.componentName);
+		});
+	}
 
 	async function getComponent(componentName) {
 		if (components[componentName]) {
@@ -37,6 +43,11 @@
 							{/each}
 						</div>
 					{/if}
+
+					<!-- Recursive rendering of children -->
+					{#if component.children && component.children.length}
+						<Composite componentsData={component} />
+					{/if}
 				</div>
 			{:else}
 				<p>Component {component.componentName} not found.</p>
diff --git a/src/lib/components/HelloEarth.svelte b/src/lib/components/HelloEarth.svelte
new file mode 100644
index 0000000..1bb08dd
--- /dev/null
+++ b/src/lib/components/HelloEarth.svelte
@@ -0,0 +1 @@
+<div class="p-12 bg-blue-400">Hello Earth</div>