diff --git a/frontend-h5/src/components/MajorCategoryCard.vue b/frontend-h5/src/components/MajorCategoryCard.vue
index 228a869..f48b0ae 100644
--- a/frontend-h5/src/components/MajorCategoryCard.vue
+++ b/frontend-h5/src/components/MajorCategoryCard.vue
@@ -2,9 +2,12 @@
 defineProps({ label: String, value: String, active: Boolean })
 </script>
 <template>
-  <div class="aspect-square rounded-card shadow-card flex flex-col items-center justify-center transition active:scale-[0.98] cursor-pointer"
+  <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="text-3xl font-semibold">{{ label.slice(0,1) }}</div>
-    <div class="mt-2 text-sm">{{ label }}</div>
+    <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>
+    <div class="text-base font-medium">{{ label }}</div>
   </div>
 </template>