diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index 0bdab60..dfe6959 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -11,11 +11,17 @@
 	}
 </script>
 
-<div class="grid" style="display: grid; {componentsData.layout || ''}">
+<div class="grid h-full w-full" style="display: grid; {componentsData.layout || ''}">
 	{#each componentsData.children as component (component.id)}
 		{#await getComponent(component.componentName) then Component}
 			{#if Component}
-				<svelte:component this={Component} {...component.props} class={component.slot} />
+				<div class="w-full h-full overflow-hidden">
+					<svelte:component
+						this={Component}
+						{...component.props}
+						class=" h-full w-full {component.slot} "
+					/>
+				</div>
 			{:else}
 				<p>Component {component.componentName} not found.</p>
 			{/if}
diff --git a/src/lib/components/Messages.svelte b/src/lib/components/Messages.svelte
index 3c96637..02e9a0c 100644
--- a/src/lib/components/Messages.svelte
+++ b/src/lib/components/Messages.svelte
@@ -15,7 +15,7 @@
 	});
 </script>
 
-<main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
+<main class="p-4 overflow-y-auto h-full w-full">
 	<!-- Your messages, displayed in chronological order -->
 	{#each latestMessages as message}
 		<div class="bg-white p-3 rounded-lg shadow-lg mb-2">