diff --git a/src/lib/componentLoader.ts b/src/lib/componentLoader.ts
new file mode 100644
index 0000000..d814e90
--- /dev/null
+++ b/src/lib/componentLoader.ts
@@ -0,0 +1,10 @@
+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`);
+});
+
+export default components;
diff --git a/src/lib/components.ts b/src/lib/components.ts
deleted file mode 100644
index ab9a02a..0000000
--- a/src/lib/components.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import componentNames from 'virtual:components-list';
-
-const components = {};
-
-componentNames.forEach(name => {
-    components[name] = () => import(`$lib/components/${name}.svelte`);
-});
-
-export default components;
\ No newline at end of file
diff --git a/src/lib/components/AuthSig.svelte b/src/lib/components/AuthSig.svelte
index 2e8b692..00cb90c 100644
--- a/src/lib/components/AuthSig.svelte
+++ b/src/lib/components/AuthSig.svelte
@@ -2,7 +2,6 @@
 	import { onMount } from 'svelte';
 	import { checkAndSignAuthMessage } from '@lit-protocol/lit-node-client';
 	import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
-	import Send from '$lib/Send.svelte';
 
 	let authSig = null;
 	let error = null;
diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index 6159ab4..e8faa79 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Composite from './Composite.svelte'; // Recursive import
-	import components from '$lib/components.ts';
+	import components from '$lib/componentLoader';
 	import { getContextStore } from '$lib/stores/contextStore.ts';
 
 	export let componentsData = {
diff --git a/src/lib/components/HelloEarth.svelte b/src/lib/components/HelloEarth/HelloEarth.svelte
similarity index 100%
rename from src/lib/components/HelloEarth.svelte
rename to src/lib/components/HelloEarth/HelloEarth.svelte
diff --git a/vite.config.ts b/vite.config.ts
index 4fe4be6..d148f65 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,22 @@ import { defineConfig } from 'vite';
 import * as fs from 'fs';
 import { resolve } from 'path';
 
+// Utility function to get all .svelte files from a directory recursively
+function getRecursiveSvelteFiles(dir) {
+	const dirents = fs.readdirSync(dir, { withFileTypes: true });
+	const files = Array.from(dirents).flatMap((dirent) => {
+		const res = resolve(dir, dirent.name);
+		if (dirent.isDirectory()) {
+			return getRecursiveSvelteFiles(res);
+		} else if (res.endsWith('.svelte')) {
+			return [res];
+		} else {
+			return [];
+		}
+	});
+	return files;
+}
+
 export default defineConfig({
 	plugins: [
 		sveltekit(),
@@ -15,9 +31,15 @@ export default defineConfig({
 			load(id) {
 				if (id === 'virtual:components-list') {
 					const componentsDir = resolve(__dirname, 'src/lib/components');
-					const components = fs.readdirSync(componentsDir)
-						.filter(f => f.endsWith('.svelte'))
-						.map(f => f.replace('.svelte', ''));
+					const componentsFiles = getRecursiveSvelteFiles(componentsDir);
+
+					const components = componentsFiles.map(file =>
+						file
+							.replace(componentsDir, '')
+							.replace(/\.svelte$/, '')
+							.replace(/\\/g, '/') // Fix Windows path separators
+							.slice(1) // Remove leading "/"
+					);
 
 					return `export default ${JSON.stringify(components)};`;
 				}