diff --git a/.gitignore b/.gitignore
index 661897c..2d6b407 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,3 @@ node_modules
 .output
 .env
 dist
-public/registry.js
diff --git a/plugins/1-copy-components.ts b/plugins/1-copy-components.ts
new file mode 100644
index 0000000..cd9f804
--- /dev/null
+++ b/plugins/1-copy-components.ts
@@ -0,0 +1,11 @@
+import * as fs from "fs";
+export default defineNitroPlugin(async () => {
+  console.log("Copying components to public folder...");
+  const rawKeys = await useStorage().getKeys("/assets/components");
+  rawKeys.forEach(async (key) => {
+    const cleanKey = key.replace("assets:components:", "");
+    const content = await useStorage().getItem(key);
+    if (!fs.existsSync("./public/.output")) fs.mkdirSync("./public/.output");
+    fs.writeFileSync(`./public/.output/${cleanKey}`, content.toString());
+  });
+});
diff --git a/plugins/register-components.ts b/plugins/2-register-components.ts
similarity index 56%
rename from plugins/register-components.ts
rename to plugins/2-register-components.ts
index 1e80f36..de9668a 100644
--- a/plugins/register-components.ts
+++ b/plugins/2-register-components.ts
@@ -1,7 +1,4 @@
 import * as fs from "fs";
-/**
- build registry of custom elements
- */
 
 export default defineNitroPlugin(async () => {
   console.log("Building registry of custom elements...");
@@ -9,31 +6,21 @@ export default defineNitroPlugin(async () => {
   const keys = rawKeys.map((key) => key.replace("assets:components:", ""));
   console.log("Found components:", keys);
   const imports = keys.map((key, index) => {
-    return `import C${index} from "/components/${key}"`;
+    return `import C${index} from "./${key}"`;
   });
 
-  const registryObject = `
-  const registry = {
+  const registryObject = `const registry = {
     ${keys
       .map((key, index) => {
         const name = key.replace(".js", "").replace(".ts", "");
         return `"${name}": C${index}`;
       })
-      .join(",")}
-  }`;
+      .join(",")}}`;
 
-  const customElementsDefine = `
-  Object.keys(registry).forEach((key) => {
-    if (window?.hasOwnProperty("customElements"))
-      customElements.define(key, registry[key]);
-  })`;
+  const customElementsDefine = `Object.keys(registry).forEach((key) => {if(window?.hasOwnProperty("customElements"))customElements.define(key, registry[key]);})`;
 
   fs.writeFileSync(
-    "./public/registry.js",
+    "./public/.output/registry.js",
     [...imports, registryObject, customElementsDefine].join(";")
   );
 });
-
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
diff --git a/public/components/hello-world.js b/public/components/hello-world.js
deleted file mode 100644
index b670be1..0000000
--- a/public/components/hello-world.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import WebComponent from "https://unpkg.com/web-component-base/index.js";
-
-export default class HelloWorld extends WebComponent {
-  name = "";
-  static properties = ["name"];
-
-  onInit() {
-    console.log(`Greeting for ${this.name} initialized`);
-    let count = 0;
-    this.onclick = () => {
-      console.log("Clicked!");
-      this.name = `I was clicked ${++count} times`;
-      this.render();
-    };
-    this.setAttribute("title", "Click me please");
-  }
-
-  get template() {
-    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
-  }
-}
diff --git a/src/components/clickable-text.js b/src/components/clickable-text.js
new file mode 100644
index 0000000..0236936
--- /dev/null
+++ b/src/components/clickable-text.js
@@ -0,0 +1,10 @@
+import WebComponent from "https://unpkg.com/web-component-base/index.js";
+
+export default class ClickableText extends WebComponent {
+  onInit() {
+    this.onclick = () => alert("Thank you for clicking the text!");
+  }
+  get template() {
+    return `<span style="cursor:pointer">Click me too!</span>`;
+  }
+}
diff --git a/src/pages/index.html b/src/pages/index.html
index 50b9ca7..26cd5a4 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -4,10 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hello Nitro</title>
-    <script type="module" src="registry.js"></script>
+    <script type="module" src="./.output/registry.js"></script>
   </head>
   <body>
-    <hello-world name="Ayo" />
+    <div>
+      <hello-world name="Ayo"></hello-world>
+    </div>
+    <span>some text</span>
+    <clickable-text></clickable-text>
     <script>
       const helloWorld = document.querySelector("hello-world");
       setTimeout(() => {