diff --git a/src/components/Greeting.svelte b/src/components/Greeting.svelte
new file mode 100644
index 0000000..6ad0a03
--- /dev/null
+++ b/src/components/Greeting.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let greetings: Array<string>
+	let greeting = greetings[(Math.floor(Math.random() * greetings.length))]
+</script>
+
+<p>{greeting}</p>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5b7b933..8a35ceb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,11 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import Greeting from "../components/Greeting.svelte"
 ---
 
 <Layout title="bitbloxhub's website">
 	<main class="m-auto p-6 max-w-6xl text-left">
 		<h1 class="text-5xl font-extrabold m-0">Welcome to bitbloxhub's website</h1>
+		<Greeting client:load greetings={["hello", "welcome", "good evening", "こんにちは", "こんばんは"]}></Greeting>
 	</main>
 </Layout>