diff --git a/src/lib/components/examples/Flows.svelte b/src/lib/components/examples/Flows.svelte
index 75d9b1c..934549d 100644
--- a/src/lib/components/examples/Flows.svelte
+++ b/src/lib/components/examples/Flows.svelte
@@ -1,7 +1,5 @@
 <script>
 	import { Stepper, Step } from '@skeletonlabs/skeleton';
-	import { form, field } from 'svelte-forms';
-	import { required, between } from 'svelte-forms/validators';
 
 	let step = 1;
 	let name = '';
diff --git a/src/lib/core/componentLoader.ts b/src/lib/core/componentLoader.ts
index d814e90..8adc38c 100644
--- a/src/lib/core/componentLoader.ts
+++ b/src/lib/core/componentLoader.ts
@@ -3,8 +3,12 @@ import componentNames from 'virtual:components-list';
 const components = {};
 
 componentNames.forEach(path => {
-    const name = path.split('/').pop();  // Extract just the file name from the path
-    components[name] = () => import( /* @vite-ignore */ `/src/lib/components/${path}.svelte`);
+    // Ensure imports start with ./ or ../ and end with a file extension
+    const name = path.split('/').pop(); // Extract just the file name from the path
+    const componentPath = `../components/${path}.svelte`; // Update the path as per your file structure
+
+    // Suppress warning for dynamic import
+    components[name] = () => import(/* @vite-ignore */ componentPath);
 });
 
 export default components;
diff --git a/src/lib/core/dataLoader.ts b/src/lib/core/dataLoader.ts
index 726bd53..8183763 100644
--- a/src/lib/core/dataLoader.ts
+++ b/src/lib/core/dataLoader.ts
@@ -7,7 +7,7 @@ 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 => {
+    import(/* @vite-ignore */ `../data/${src}.ts`).then(module => {
         // Here, explicitly extract the required data or function from the module
         const moduleData = module[src] || module.default;
 
diff --git a/src/lib/core/servicesLoader.ts b/src/lib/core/servicesLoader.ts
index cf25137..b287962 100644
--- a/src/lib/core/servicesLoader.ts
+++ b/src/lib/core/servicesLoader.ts
@@ -1,10 +1,11 @@
+// servicesLoader.ts
 import serviceNames from 'virtual:services-list';
 
 const services: { [key: string]: Function } = {};
 
 serviceNames.forEach(path => {
     const serviceName = path.split('/').pop().replace('.ts', '');
-    services[serviceName] = () => import(/* @vite-ignore */ `/src/lib/services/${path}`)
+    services[serviceName] = () => import(/* @vite-ignore */ `../services/${path}.ts`)
         .then(mod => {
             console.log(`Loaded service ${serviceName} with the following properties:`, Object.keys(mod));
             if (mod.default) return mod.default;
@@ -13,4 +14,3 @@ serviceNames.forEach(path => {
 });
 
 export default services;
-
diff --git a/src/routes/validation/+page.svelte b/src/routes/test/+page.svelte
similarity index 72%
rename from src/routes/validation/+page.svelte
rename to src/routes/test/+page.svelte
index 09c407d..f2de5cb 100644
--- a/src/routes/validation/+page.svelte
+++ b/src/routes/test/+page.svelte
@@ -2,8 +2,8 @@
 	import Composite from '$lib/core/Composite.svelte';
 
 	let composite = {
-		id: 'validationexample',
-		component: 'Form'
+		id: 'test',
+		component: 'Flows'
 	};
 </script>