diff --git a/frontend-h5/src/components/MajorCategoryCard.vue b/frontend-h5/src/components/MajorCategoryCard.vue
index f48b0ae..f488690 100644
--- a/frontend-h5/src/components/MajorCategoryCard.vue
+++ b/frontend-h5/src/components/MajorCategoryCard.vue
@@ -1,13 +1,16 @@
 <script setup>
-defineProps({ label: String, value: String, active: Boolean })
+defineProps({ label: String, value: String, active: Boolean, bg: String })
 </script>
 <template>
-  <div class="h-20 px-4 rounded-card shadow-card flex items-center gap-3 transition active:scale-[0.98] cursor-pointer"
-    :class="active ? 'bg-brand text-white' : 'bg-white text-neutral-800'">
-    <div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl font-semibold shrink-0"
-      :class="active ? 'bg-white/15' : 'bg-brand/10 text-brand'">
-      {{ label.slice(0,1) }}
+  <div class="relative h-[100px] rounded-card shadow-card overflow-hidden cursor-pointer transition active:scale-[0.98]">
+    <img :src="bg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
+    <div class="absolute inset-0"
+      :class="active
+        ? 'bg-gradient-to-tr from-brand/85 via-brand/70 to-brand/40'
+        : 'bg-gradient-to-tr from-black/55 via-black/35 to-black/10'"></div>
+    <div class="relative h-full px-4 flex items-end pb-3 text-white">
+      <div class="text-lg font-semibold tracking-wide drop-shadow-sm">{{ label }}</div>
+      <div v-if="active" class="ml-auto self-start mt-3 w-2 h-2 rounded-full bg-white"></div>
     </div>
-    <div class="text-base font-medium">{{ label }}</div>
   </div>
 </template>
diff --git a/frontend-h5/src/views/Home.vue b/frontend-h5/src/views/Home.vue
index 7da8536..df905b1 100644
--- a/frontend-h5/src/views/Home.vue
+++ b/frontend-h5/src/views/Home.vue
@@ -20,6 +20,13 @@ const fallbackMajors = [
   { value: 'decoration', label: '装修' },
 ]
 
+const majorBg = {
+  architecture: 'https://picsum.photos/seed/mat3-architecture/600/300',
+  landscape: 'https://picsum.photos/seed/mat3-landscape/600/300',
+  equipment: 'https://picsum.photos/seed/mat3-equipment/600/300',
+  decoration: 'https://picsum.photos/seed/mat3-decoration/600/300',
+}
+
 const tree = ref([])
 const loading = ref(true)
 const selected = ref(ui.selectedMajor)
@@ -61,7 +68,7 @@ const onLogout = () => { auth.logout(); router.replace('/login') }
 
     <section class="p-4 grid grid-cols-2 gap-3">
       <MajorCategoryCard v-for="m in majors" :key="m.value"
-        :label="m.label" :value="m.value" :active="selected === m.value"
+        :label="m.label" :value="m.value" :bg="majorBg[m.value]" :active="selected === m.value"
         @click="onSelect(m.value)" />
     </section>