diff --git a/api/avatar.js b/api/avatar.js
index 26121f1..9039086 100644
--- a/api/avatar.js
+++ b/api/avatar.js
@@ -7,6 +7,20 @@ export const getAvatarSystemList = async (page = 1) => {
   });
 };
 
+export const getAvatarSystemCategoryList = async () => {
+  return request({
+    url: `/api/blessing/avatar/system/category/list`,
+    method: "GET",
+  });
+};
+
+export const getAvatarSystemListByCategory = async (categoryId, page = 1) => {
+  return request({
+    url: `/api/blessing/avatar/system/list?categoryId=${categoryId}&page=${page}`,
+    method: "GET",
+  });
+};
+
 export const getAvatarDecorList = async (page = 1) => {
   return request({
     url: `/api/blessing/avatar/decor/list?page=${page}`,
diff --git a/pages/avatar/download.vue b/pages/avatar/download.vue
index 15e93c8..642de67 100644
--- a/pages/avatar/download.vue
+++ b/pages/avatar/download.vue
@@ -103,9 +103,8 @@
 <script setup>
 import { ref, computed } from "vue";
 import {
-  getAvatarSystemList,
-  getAvatarDecorList,
-  getAvatarFrameList,
+  getAvatarSystemCategoryList,
+  getAvatarSystemListByCategory,
   avatarDownloadRecord,
 } from "@/api/avatar.js";
 import {
@@ -127,12 +126,8 @@ const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
 const userScore = computed(() => userStore.userInfo.score || 0);
 const downloadCost = ref(20);
 
-const categories = ref([
-  { id: "system", name: "系统头像" },
-  { id: "frame", name: "头像框" },
-  { id: "decor", name: "挂饰" },
-]);
-const currentCategoryId = ref("system");
+const categories = ref([]);
+const currentCategoryId = ref(null);
 const avatars = ref([]);
 const page = ref(1);
 const loading = ref(false);
@@ -198,6 +193,21 @@ const getThumbUrl = (url) => {
   return `${url}?imageView2/1/w/340/h/340/q/80`;
 };
 
+const fetchCategories = async () => {
+  try {
+    const res = await getAvatarSystemCategoryList();
+    const list = Array.isArray(res) ? res : res?.list || [];
+    if (list.length > 0) {
+      categories.value = list;
+      currentCategoryId.value = list[0].id;
+      loadAvatars(true);
+    }
+  } catch (e) {
+    console.error("Failed to fetch categories", e);
+    uni.showToast({ title: "获取分类失败", icon: "none" });
+  }
+};
+
 const switchCategory = (id) => {
   if (currentCategoryId.value === id) return;
   currentCategoryId.value = id;
@@ -211,6 +221,7 @@ const switchCategory = (id) => {
 
 const loadAvatars = async (reset = false) => {
   if (loading.value) return;
+  if (!currentCategoryId.value) return;
   if (reset) {
     page.value = 1;
     hasMore.value = true;
@@ -220,12 +231,10 @@ const loadAvatars = async (reset = false) => {
 
   loading.value = true;
   try {
-    let apiFunc;
-    if (currentCategoryId.value === "system") apiFunc = getAvatarSystemList;
-    else if (currentCategoryId.value === "frame") apiFunc = getAvatarFrameList;
-    else if (currentCategoryId.value === "decor") apiFunc = getAvatarDecorList;
-
-    const res = await apiFunc(page.value);
+    const res = await getAvatarSystemListByCategory(
+      currentCategoryId.value,
+      page.value,
+    );
     const list = res?.list || [];
     hasMore.value = !!res?.hasNext;