diff --git a/src/components/home/MenuItem.vue b/src/components/home/MenuItem.vue
index e2371908..c32e7cea 100644
--- a/src/components/home/MenuItem.vue
+++ b/src/components/home/MenuItem.vue
@@ -11,6 +11,7 @@ defineProps<{
     icon: string;
     title: string;
     caption: string;
+    isax?: boolean;
     color:
       | 'green'
       | 'red'
@@ -42,7 +43,14 @@ function navigateTo(destination: string) {
         :class="`q-pa-md menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
         :bordered="$q.dark.isActive"
       >
-        <q-icon size="3rem" :name="v.icon" />
+        <i v-if="v.isax" :class="`isax ${v.icon}`" style="font-size: 3rem" />
+        <iconify-icon
+          v-else
+          size="3rem"
+          :icon="v.icon"
+          width="3rem"
+          height="3rem"
+        />
       </AppCircle>
       <div class="column items-center q-mt-md text-center">
         <span style="font-weight: var(--font-weight-8)">{{ v.title }}</span>
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 80c434b5..7adfe6c7 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -14,21 +14,23 @@ const menu = [
   },
   {
     value: 'personnel-management',
-    icon: 'mdi-account',
+    icon: 'isax-frame5',
     color: 'cyan',
     title: 'จัดการบุคลากร',
     caption: 'จัดการคนภายในองค์กร',
+    isax: true,
   },
   {
     value: '',
-    icon: 'mdi-account',
+    icon: 'isax-frame5',
     color: 'cyan',
     title: 'จัดการลูกค้า',
     caption: 'จัดการคนภายในองค์กร',
+    isax: true,
   },
   {
     value: '',
-    icon: 'mdi-truck',
+    icon: 'heroicons-truck-solid',
     color: 'orange',
     title: 'สินค้าและบริการ',
     caption: 'รายการสินค้าและบริการ',
@@ -42,38 +44,42 @@ const menu = [
   },
   {
     value: '',
-    icon: 'mdi-monitor',
+    icon: 'isax-device-message5',
     color: 'purple',
     title: 'รายการคำขอ',
     caption: 'แสดงรายการคำขอ',
+    isax: true,
   },
   {
     value: '',
-    icon: 'mdi-receipt-text',
+    icon: 'isax-receipt-2-15',
     color: 'red',
     title: 'ใบสั่งซื้อ',
     caption: 'รายการใบสั่งซื้อ',
+    isax: true,
   },
   {
     value: '',
-    icon: 'mdi-package',
+    icon: 'material-symbols:box',
     color: 'camo',
     title: 'ใบรับสินค้า',
     caption: 'รายการใบรับสินค้า',
   },
   {
     value: '',
-    icon: 'mdi-currency-usd',
+    icon: 'isax-dollar-circle4',
     color: 'lime',
     title: 'การจัดการการเงิน',
     caption: 'รายการบัญชีทั้งหมด',
+    isax: true,
   },
   {
     value: '',
-    icon: 'mdi-view-dashboard',
+    icon: 'isax-element-35',
     color: 'cyan',
     title: 'Dashboard',
     caption: 'แสดงข้อมูลสถิติ',
+    isax: true,
   },
   {
     value: '',
@@ -110,7 +116,6 @@ const menu = [
 <template>
   <!-- <PersonCard :list="person" class="q-mb-md" /> -->
   <MenuItem :list="menu" />
-
   <!-- <div class="row">
     <users-detail-card-component class="q-pa-md" v-for="v in [1, 2]" :key="v" />
   </div> -->