diff --git a/app.vue b/app.vue
index d61ca2c..c5f8626 100644
--- a/app.vue
+++ b/app.vue
@@ -1,3 +1,4 @@
 <template>
-  <RayButton>Click me!</RayButton>
+  <RayButton>test</RayButton>
+  <RayInput/>
 </template>
diff --git a/components/ray/Button.vue b/components/elements/Button.vue
similarity index 100%
rename from components/ray/Button.vue
rename to components/elements/Button.vue
diff --git a/components/forms/Input.vue b/components/forms/Input.vue
new file mode 100644
index 0000000..f0343ac
--- /dev/null
+++ b/components/forms/Input.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <input placeholder="test from rayine" class="rounded-lg border border-neutral-200 px-2 py-1" />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5804824..82f5ee6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,12 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@nuxtjs/tailwindcss"]
-})
\ No newline at end of file
+  modules: ["@nuxtjs/tailwindcss"],
+  components: [
+    {
+      path: "./components",
+      prefix: "Ray",
+      pathPrefix: false,
+    },
+  ],
+});
diff --git a/package.json b/package.json
index a9a11c0..700e11a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "my-nuxt-layer",
+  "name": "rayine-layer",
   "type": "module",
   "version": "0.0.1",
   "main": "./nuxt.config.ts",