diff --git a/Frontend-Learner/pages/index.vue b/Frontend-Learner/pages/index.vue
index 7c804579..bcb5380c 100644
--- a/Frontend-Learner/pages/index.vue
+++ b/Frontend-Learner/pages/index.vue
@@ -59,6 +59,19 @@ const loadData = async () => {
     }
 }
 
+const getCategoryIcon = (categoryName: string) => {
+   if (!categoryName) return 'o_category'
+   const text = categoryName.toLowerCase()
+   
+   if (text.includes('ออกแบบ') || text.includes('design')) return 'o_palette'
+   if (text.includes('โปรแกรม') || text.includes('code') || text.includes('dev')) return 'o_terminal'
+   if (text.includes('ธุรกิจ') || text.includes('business') || text.includes('การตลาด') || text.includes('market')) return 'o_storefront'
+   if (text.includes('ภาษา') || text.includes('language')) return 'o_language'
+   if (text.includes('ข้อมูล') || text.includes('data')) return 'o_analytics'
+   
+   return 'o_interests'
+}
+
 const goBrowse = (slug: string) => {
     navigateTo({ path: '/browse', query: { category: slug } })
 }
@@ -274,7 +287,7 @@ onMounted(() => {
               :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-200 text-slate-700 hover:border-slate-300'"
               @click="selectedCategory = category.slug"
             >
-              <q-icon :name="category.icon || 'o_label'" size="20px" class="mr-1" />
+              <q-icon :name="getCategoryIcon(getLocalizedText(category.name))" size="20px" class="mr-1" />
               {{ getLocalizedText(category.name) }}
             </button>
           </div>