diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index fa72ec9..0237222 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -8,6 +8,12 @@
 		layout: '',
 		children: []
 	};
+	$: layoutStyle = `
+        grid-template-areas: ${componentsData.layout.areas};
+        gap: ${componentsData.layout.gap || '0px'};
+        grid-template-columns: ${componentsData.layout.columns || '1fr'};
+        grid-template-rows: ${componentsData.layout.rows || 'auto'};
+    `;
 
 	function initializeComponentState(child) {
 		child.store = createComponentStore(child.id, child.state || {});
@@ -86,7 +92,10 @@
 	}
 </script>
 
-<div class="grid w-full h-full" style="display: grid; {componentsData.layout || ''}">
+<div
+	class={`grid w-full h-full ${componentsData.layout.customTailwind || ''}`}
+	style="display: grid; {layoutStyle}"
+>
 	{#each componentsData.children as component (component.id)}
 		{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
 			{#if Component}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f298f22..ff018a7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,14 +2,12 @@
 	import Composite from '$lib/components/Composite.svelte';
 
 	let componentsData = {
-		layout: `
-			grid-template-areas: 
-			"auth",
-				"header",
-				"main",
-				"footer"
-			grid-template-rows: 1fr 1fr auto;
-		`,
+		layout: {
+			areas: `"nav", "main", "footer"`,
+			gap: '10px',
+			columns: '1fr',
+			template: 'auto 1fr auto'
+		},
 		children: [
 			{
 				id: '1',