diff --git a/api/system.js b/api/system.js
index 64dcd89..7749d56 100644
--- a/api/system.js
+++ b/api/system.js
@@ -45,3 +45,10 @@ export const viewRecord = async (data) => {
     data,
   });
 };
+
+export const getRecommendList = async (page = 1) => {
+  return request({
+    url: `/api/blessing/recommend/list?page=${page}`,
+    method: "get",
+  });
+};
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 9146bde..a14590d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -69,40 +69,45 @@
       </view>
       <view class="use-grid">
         <view
-          v-for="(card, i) in popularCards"
+          v-for="(card, i) in recommendList"
           :key="i"
           class="use-card"
-          @tap="previewCard(card)"
+          @tap="onCardClick(card)"
         >
           <view class="card-cover-wrap">
-            <image :src="card.cover" class="card-cover" mode="aspectFill" />
-            <view
-              v-if="card.tag"
-              class="card-tag"
-              :class="`tag--${card.tagType || 'default'}`"
-            >
-              {{ card.tag }}
+            <image :src="card.imageUrl" class="card-cover" mode="aspectFill" />
+            <view v-if="card.tag" class="card-tag" :class="`tag--${card.tag}`">
+              {{ getTagText(card.tag) }}
             </view>
           </view>
           <view class="card-info">
             <view class="card-title">{{ card.title }}</view>
-            <view class="card-desc">{{ card.desc }}</view>
+            <view class="card-desc">{{ card.content }}</view>
             <view class="card-footer">
-              <view class="cta-btn" @tap.stop="onCta(card)">
-                {{ card.cta }}
+              <view class="cta-btn" @tap.stop="onCardClick(card)">
+                {{ getCtaText(card.type) }}
               </view>
             </view>
           </view>
         </view>
       </view>
+      <view v-if="loading" class="loading-text">加载中...</view>
+      <view v-if="!hasMore && recommendList.length > 0" class="no-more-text"
+        >没有更多了</view
+      >
     </view>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { onPullDownRefresh, onShareAppMessage } from "@dcloudio/uni-app";
+import {
+  onPullDownRefresh,
+  onShareAppMessage,
+  onReachBottom,
+} from "@dcloudio/uni-app";
 import { getBavBarHeight } from "@/utils/system";
+import { getRecommendList } from "@/api/system";
 
 const countdownText = ref("");
 
@@ -188,6 +193,8 @@ onMounted(() => {
 
   const index = dayOfYear % inspirationList.length;
   dailyGreeting.value = inspirationList[index];
+
+  fetchRecommendList();
 });
 
 const features = ref([
@@ -217,45 +224,81 @@ const features = ref([
   },
 ]);
 
-const popularCards = ref([
-  {
-    title: "招财进宝金框",
-    tag: "热门",
-    tagType: "hot",
-    desc: "2026马年限定汉字金框，金光闪烁，财运亨通。适合送亲友的新春祝福。",
-    cta: "立即制作",
-    cover:
-      "https://file.lihailezzc.com/9a929a32-439f-453b-b603-fda7b04cbe08.png",
-  },
-  {
-    title: "大吉大利卡片",
-    tag: "精选",
-    tagType: "featured",
-    desc: "经典红色大拜年卡片，适合送长辈、老师、同学，传递满满的新春喜气。",
-    cta: "去写祝福",
-    cover:
-      "https://file.lihailezzc.com/b5fe8ffb-5901-48d2-94fb-48191e36cbf5.png",
-  },
-  {
-    title: "合家团圆模板",
-    tag: "爆款",
-    tagType: "hot2",
-    desc: "一键生成合家福贺图，支持换装、特效装饰、朋友圈海报等。",
-    cta: "开始创作",
-    cover:
-      "https://file.lihailezzc.com/91cd1611-bb87-442b-a338-24e9d79e4ee9.png",
-    type: "video",
-  },
-  {
-    title: "福气满满",
-    tag: "新款",
-    tagType: "new",
-    desc: "福字当头，好运连连。送给最爱的人。",
-    cta: "立即制作",
-    cover:
-      "https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png",
-  },
-]);
+const recommendList = ref([]);
+const page = ref(1);
+const hasMore = ref(true);
+const loading = ref(false);
+
+const fetchRecommendList = async (isRefresh = false) => {
+  if (loading.value || (!hasMore.value && !isRefresh)) return;
+  loading.value = true;
+  if (isRefresh) {
+    page.value = 1;
+    hasMore.value = true;
+  }
+  try {
+    const res = await getRecommendList(page.value);
+    const list = res?.list || [];
+    if (isRefresh) {
+      recommendList.value = list;
+    } else {
+      recommendList.value = [...recommendList.value, ...list];
+    }
+
+    if (res.hasNext !== undefined) {
+      hasMore.value = res.hasNext;
+    } else {
+      // Fallback if API doesn't return hasNext
+      if (list.length < 10) hasMore.value = false;
+    }
+
+    if (list.length > 0) {
+      page.value++;
+    } else {
+      hasMore.value = false;
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const getTagText = (tag) => {
+  const map = {
+    hot: "热门",
+    new: "新款",
+    featured: "精选",
+    hot2: "爆款",
+  };
+  return map[tag] || tag;
+};
+
+const getCtaText = (type) => {
+  const map = {
+    frame: "去制作",
+    decor: "去装饰",
+    avatar: "去查看",
+    card: "去写祝福",
+    fortune: "去抽取",
+  };
+  return map[type] || "立即查看";
+};
+
+const onCardClick = (card) => {
+  if (card.scene === "avatar_download") {
+    uni.navigateTo({ url: "/pages/avatar/index" });
+    return;
+  }
+  // Default fallback based on type
+  if (card.type === "card") {
+    uni.switchTab({ url: "/pages/make/index" });
+  } else if (card.type === "fortune") {
+    uni.navigateTo({ url: "/pages/fortune/index" });
+  } else {
+    uni.navigateTo({ url: "/pages/avatar/index" });
+  }
+};
 
 const onFeatureTap = (item) => {
   if (item.type === "fortune") {
@@ -277,20 +320,16 @@ const onFeatureTap = (item) => {
   uni.showToast({ title: `进入：${item.title}`, icon: "none" });
 };
 
-const previewCard = (card) => {
-  uni.previewImage({ urls: [card.cover] });
-};
+onReachBottom(() => {
+  fetchRecommendList();
+});
 
 const onMore = () => {
   uni.showToast({ title: "更多模板即将上线～", icon: "none" });
 };
 
-const onCta = (card) => {
-  // uni.showToast({ title: `${card.cta} · ${card.title}`, icon: "none" });
-  uni.switchTab({ url: "/pages/make/index" });
-};
-
-onPullDownRefresh(() => {
+onPullDownRefresh(async () => {
+  await fetchRecommendList(true);
   setTimeout(() => {
     uni.stopPullDownRefresh();
     uni.showToast({ title: "已为你更新内容", icon: "success" });
@@ -647,4 +686,13 @@ onShareAppMessage(() => {
   border-radius: 999rpx;
   font-weight: 500;
 }
+
+.loading-text,
+.no-more-text {
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+  padding: 20rpx 0;
+  width: 100%;
+}
 </style>