diff --git a/components/AvantageExample.vue b/components/AvantageExample.vue
new file mode 100644
index 0000000..0877414
--- /dev/null
+++ b/components/AvantageExample.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import TheFeatureGrid from "~~/components/elements/TheFeatureMapGrid.vue";
+import TheBillboard from "~~/components/elements/TheBillboard.vue";
+</script>
+
+<template>
+  <div class="">
+    <div class="py-12 theme-mode dark:bg-black">
+      <div class="max-w-9xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center md:flex align-center md:justify-center  ">
+          <TheBillboard />
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-center dark:bg-gray-900 bg-gray-200">
+      <TheFeatureGrid />
+    </div>
+  </div>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 26abdf0..98a89f3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,19 +1,3 @@
-<script setup lang="ts">
-import TheFeatureGrid from "~~/components/elements/TheFeatureMapGrid.vue";
-import TheBillboard from "~~/components/elements/TheBillboard.vue";
-</script>
-
 <template>
-  <div class="">
-    <div class="py-12 theme-mode dark:bg-black">
-      <div class="max-w-9xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center md:flex align-center md:justify-center  ">
-          <TheBillboard />
-        </div>
-      </div>
-    </div>
-    <div class="flex justify-center dark:bg-gray-900 bg-gray-200">
-      <TheFeatureGrid />
-    </div>
-  </div>
-</template>
\ No newline at end of file
+  <AvantageExample/>
+</template>