diff --git a/docs/content/index.yml b/docs/content/index.yml
index 3eccbb81..d00988d8 100644
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -10,7 +10,7 @@ sections:
   - title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
     slot: features
     class: 'dark:bg-gradient-to-b from-gray-900 to-gray-950/50 dark:lg:bg-none dark:lg:bg-gray-950/50'
-    features:
+    cards:
       - title: Color Palette
         description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
         icon: i-heroicons-swatch
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 1ab642ca..ef2b4318 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -60,9 +60,9 @@
       <template #features>
         <ULandingGrid class="lg:-mb-20 lg:auto-rows-[3rem]">
           <ULandingCard
-            v-for="(feature, subIndex) of section.features"
+            v-for="(card, subIndex) of section.cards"
             :key="subIndex"
-            v-bind="feature"
+            v-bind="card"
             :ui="{
               background: 'dark:bg-gray-900/50 dark:lg:bg-gradient-to-b from-gray-700/50 to-gray-950/50',
               body: {
@@ -72,13 +72,13 @@
             }"
             class="flex flex-col"
           >
-            <div v-if="feature.image">
+            <div v-if="card.image">
               <UColorModeImage
-                :light="`${feature.image.path}-light.svg`"
-                :dark="`${feature.image.path}-dark.svg`"
-                :width="feature.image.width"
-                :height="feature.image.height"
-                :alt="feature.title"
+                :light="`${card.image.path}-light.svg`"
+                :dark="`${card.image.path}-dark.svg`"
+                :width="card.image.width"
+                :height="card.image.height"
+                :alt="card.title"
                 class="object-cover w-full"
               />
             </div>