diff --git a/src/lib/components/refactor/ComposerCharly.svelte b/src/lib/components/refactor/ComposerCharly.svelte
index ae0b6de..a0296b1 100644
--- a/src/lib/components/refactor/ComposerCharly.svelte
+++ b/src/lib/components/refactor/ComposerCharly.svelte
@@ -1,29 +1,64 @@
 <script>
+	import { coreServices } from '$lib/core/refactor/coreServices';
+	import { queryMessages } from '$lib/data/queryMessages';
+	import { queryTodos } from '$lib/data/queryTodos';
+	import { createMessage } from '$lib/services/messages/messages';
 	export let me;
 	export let data;
 
-	function toggle() {
-		me.do.machine.send('TOGGLE');
+	function sendMessage() {
+		const randomNumber = Math.floor(Math.random() * 100) + 1;
+		const messageData = {
+			text: `test ${randomNumber}`,
+			sender: 'ComposerCharly',
+			type: 'text'
+		};
+		createMessage(messageData);
+	}
+
+	let todos;
+	queryTodos.subscribe((value) => {
+		todos = value;
+	});
+
+	let messages;
+	queryMessages.subscribe((value) => {
+		messages = value;
+	});
+
+	$: {
+		const queryMap = {
+			todos: todos,
+			messages: messages
+		};
+
+		Object.entries(queryMap).forEach(([name, data]) => {
+			if (data) {
+				coreServices.mutateStore(me.id, { [name]: data });
+			}
+		});
 	}
 </script>
 
-<div class="w-full h-full border-2 border-green-500">
-	<p>My ID is: {me.id}</p>
-	my state is {$data.state}
-	<h1 class="h1">I am charly</h1>
-	my data.context.hello prop: {JSON.stringify($data.context.hello)}
-	<br />
-	<button
-		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
-		on:click={toggle}
-	>
-		Toggle
-	</button>
-	<div class="p-8 overflow-scroll h-1/2">
-		{#if $data.context.messages}
-			{#each $data.context.messages as message}
+<div class="flex flex-col h-screen">
+	<section class=" h-96">
+		{#if $data.store.todos}
+			{#each $data.store.todos as todo}
+				<p>{todo.text}</p>
+			{/each}
+		{/if}
+	</section>
+	<section class="flex-grow overflow-y-auto">
+		{#if $data.store.messages}
+			{#each $data.store.messages as message}
 				<p>{message.text}</p>
 			{/each}
 		{/if}
-	</div>
+	</section>
+	<button
+		class="self-center px-4 py-2 mb-4 font-bold text-white rounded hover:bg-blue-700"
+		on:click={sendMessage}
+	>
+		Send
+	</button>
 </div>
diff --git a/src/lib/components/refactor/ComposerWrap.svelte b/src/lib/components/refactor/ComposerWrap.svelte
index 7acf2d0..582fe73 100644
--- a/src/lib/components/refactor/ComposerWrap.svelte
+++ b/src/lib/components/refactor/ComposerWrap.svelte
@@ -3,6 +3,7 @@
 	import { assign } from 'xstate';
 	import { queryMessages } from '$lib/data/queryMessages';
 	import { get } from 'svelte/store';
+	import { coreServices } from '$lib/core/refactor/coreServices';
 
 	let composer = {
 		id: 'ComposerParent',
@@ -30,18 +31,15 @@
 				id: 'ComposerCharly',
 				component: 'ComposerCharly',
 				slot: 'aside',
-				data: {},
 				machine: {
 					initial: 'LOADING',
-					context: {
-						hello: 'start',
-						messages: []
-					},
+					// context: {
+					// 	hello: 'start',
+					// 	messages: []
+					// },
 					states: {
 						LOADING: {
-							entry: assign({
-								messages: (context, event) => get(queryMessages)
-							}),
+							entry: () => {},
 							on: {
 								TOGGLE: {
 									target: 'READY'
diff --git a/src/lib/core/refactor/ComposerComponent.svelt b/src/lib/core/refactor/ComposerComponent.svelt
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/core/refactor/ComposerComponent.svelte b/src/lib/core/refactor/ComposerComponent.svelte
new file mode 100644
index 0000000..d8ab0f4
--- /dev/null
+++ b/src/lib/core/refactor/ComposerComponent.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { getComposerStore } from './composerStores';
+	import { Machine, interpret } from 'xstate';
+
+	export let composer;
+	export let Component;
+	export let loadedServices;
+	let machineService;
+
+	$: {
+		if (composer?.machine) {
+			const machine = Machine({ ...composer.machine, id: composer.id });
+			machineService = interpret(machine).onTransition((state) => {
+				getComposerStore(composer.id).update((storeValue) => ({
+					...storeValue,
+					machine: { state: state.value }
+				}));
+			});
+			machineService.start();
+			composer.machineService = machineService;
+		}
+	}
+
+	onDestroy(() => {
+		machineService?.stop();
+	});
+</script>
+
+<svelte:component
+	this={Component}
+	id={composer.id}
+	store={getComposerStore(composer.id)}
+	machine={composer.machine}
+	services={loadedServices}
+	machineService={composer.machineService}
+	me={composer.me}
+/>
diff --git a/src/lib/core/refactor/coreServices.ts b/src/lib/core/refactor/coreServices.ts
index d511078..9d94b5e 100644
--- a/src/lib/core/refactor/coreServices.ts
+++ b/src/lib/core/refactor/coreServices.ts
@@ -2,14 +2,14 @@
 import { getComposerStore } from './composerStores';
 
 export const coreServices = {
-    // mutateData: (storeID: string, value: any) => {
-    //     const store = getComposerStore(storeID);
-    //     console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
-    //     store.update(storeData => {
-    //         storeData.context = value;
-    //         return storeData;
-    //     });
-    // },
+    mutateStore: (storeID: string, value: any) => {
+        const store = getComposerStore(storeID);
+        console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
+        store.update(storeData => {
+            storeData.store = { ...storeData.store, ...value };
+            return storeData;
+        });
+    },
     subscribeData: (storeID: string) => {
         const store = getComposerStore(storeID);
         return store;
diff --git a/src/lib/core/refactor/dataLoader.ts b/src/lib/core/refactor/dataLoader.ts
new file mode 100644
index 0000000..d537c26
--- /dev/null
+++ b/src/lib/core/refactor/dataLoader.ts
@@ -0,0 +1,16 @@
+// dataLoader.ts
+import { writable } from 'svelte/store';
+import dataSources from 'virtual:data-sources-list';
+
+// The store that holds the data sets
+export const dataStore = writable({});
+
+// Dynamically import the data modules and assign them to the store
+dataSources.forEach(src => {
+    import(`/src/lib/data/${src}.ts`).then(module => {
+        // Here, explicitly extract the required data or function from the module
+        const moduleData = module[src] || module.default;
+
+        dataStore.update(store => ({ ...store, [src]: moduleData }));
+    });
+});
\ No newline at end of file
diff --git a/src/lib/data/queryTodos.ts b/src/lib/data/queryTodos.ts
index f3539d9..637810d 100644
--- a/src/lib/data/queryTodos.ts
+++ b/src/lib/data/queryTodos.ts
@@ -4,14 +4,17 @@ import { writable } from 'svelte/store';
 export const queryTodos = writable([
     {
         id: "id1",
-        text: "todo 1"
+        text: "todo 1",
+        type: "x"
     },
     {
         id: "id2",
-        text: "todo 2"
+        text: "todo 2",
+        type: "x"
     },
     {
         id: "id3",
-        text: "todo 3"
+        text: "todo 3",
+        type: "z"
     }
 ]);