diff --git a/src/assets/icon/metadata.png b/src/assets/icon/1_metadata.png
similarity index 100%
rename from src/assets/icon/metadata.png
rename to src/assets/icon/1_metadata.png
diff --git a/src/assets/icon/organizational.png b/src/assets/icon/2_organizational.png
similarity index 100%
rename from src/assets/icon/organizational.png
rename to src/assets/icon/2_organizational.png
diff --git a/src/assets/icon/registry.png b/src/assets/icon/3_registry.png
similarity index 100%
rename from src/assets/icon/registry.png
rename to src/assets/icon/3_registry.png
diff --git a/src/assets/icon/registry-employee.png b/src/assets/icon/4_registry-employee.png
similarity index 100%
rename from src/assets/icon/registry-employee.png
rename to src/assets/icon/4_registry-employee.png
diff --git a/src/assets/icon/order.png b/src/assets/icon/5_order.png
similarity index 100%
rename from src/assets/icon/order.png
rename to src/assets/icon/5_order.png
diff --git a/src/assets/icon/recruitmain.png b/src/assets/icon/6_recruitmain.png
similarity index 100%
rename from src/assets/icon/recruitmain.png
rename to src/assets/icon/6_recruitmain.png
diff --git a/src/assets/icon/placement.png b/src/assets/icon/7_placement.png
similarity index 100%
rename from src/assets/icon/placement.png
rename to src/assets/icon/7_placement.png
diff --git a/src/assets/icon/retirement.png b/src/assets/icon/8_retirement.png
similarity index 100%
rename from src/assets/icon/retirement.png
rename to src/assets/icon/8_retirement.png
diff --git a/src/assets/icon/insignia.png b/src/assets/icon/9_insignia.png
similarity index 100%
rename from src/assets/icon/insignia.png
rename to src/assets/icon/9_insignia.png
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 48b59ec..6adda3e 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -12,7 +12,7 @@ const currentRouteName = router.currentRoute.value.name;
 const currentRoute = ref(currentRouteName);
 const text = ref('');
 const tabManu = [
-	{name: 'metadata',label:'ข้อมูลหลัก',path: 'metadata',},
+	{name: 'metadata',label:'ข้อมูลหลัก',path: 'metadata'},
 	{name: 'organizational',label:'โครงสร้างอัตรากำลัง',path: 'organizational'},
 	{name: '3',label:'ทะเบียนประวัติ',path: ''},
 	{name: '4',label:'ทะเบียนประวัติลูกจ้าง',path: ''},
@@ -28,17 +28,17 @@ const tabManu2 = [
 ];
 
 const mainmenu = [
-	{text: 'ข้อมูลหลัก', icon:'mdi-account-outline', path: 'metadata'},
-	{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-group-outline',path: 'organizational'},
-	{text: 'ทะเบียนประวัติ', icon:'mdi-file-account-outline',path: 'organizational'},
-	{text: 'ทะเบียนประวัติลูกจ้าง', icon:'mdi-file-account-outline',path: 'organizational'},
-	{text: 'ออกคำสั่ง', icon:'mdi-file-certificate-outline',path: 'organizational'},
-	{text: 'สรรหา', icon:'mdi-magnify',path: 'organizational'},
-	{text: 'บรรจุ แต่งตั้ง ย้าย โอน', icon:'mdi-account-check',path: 'organizational'},
-	{text: 'พ้นราชการ', icon:'mdi-account-cancel-outline',path: 'organizational'},
-	{text: 'เครื่องราชฯ', icon:'mdi-medal-outline',path: 'organizational'},
-	{text: 'การลา', icon:'mdi-calendar',path: 'organizational'},
-	{text: 'วินัย', icon:'mdi-scale-balance',path: 'organizational'}
+	{text: 'ข้อมูลหลัก',img: new URL('../assets/icon/1_metadata.png', import.meta.url).href , icon:'mdi-account-outline', path: 'metadata'},
+	{text: 'โครงสร้างอัตรากำลัง',img: new URL('../assets/icon/2_organizational.png', import.meta.url).href, icon:'mdi-account-group-outline',path: 'organizational'},
+	{text: 'ทะเบียนประวัติ',img: new URL('../assets/icon/3_registry.png', import.meta.url).href, icon:'mdi-file-account-outline',path: 'organizational'},
+	{text: 'ทะเบียนประวัติลูกจ้าง',img: new URL('../assets/icon/4_registry-employee.png', import.meta.url).href, icon:'mdi-file-account-outline',path: 'organizational'},
+	{text: 'ออกคำสั่ง',img: new URL('../assets/icon/5_order.png', import.meta.url).href, icon:'mdi-file-certificate-outline',path: 'organizational'},
+	{text: 'สรรหา',img: new URL('../assets/icon/6_recruitmain.png', import.meta.url).href, icon:'mdi-magnify',path: 'organizational'},
+	{text: 'บรรจุ แต่งตั้ง ย้าย โอน',img: new URL('../assets/icon/7_placement.png', import.meta.url).href, icon:'mdi-account-check',path: 'organizational'},
+	{text: 'พ้นราชการ',img: new URL('../assets/icon/8_retirement.png', import.meta.url).href, icon:'mdi-account-cancel-outline',path: 'organizational'},
+	{text: 'เครื่องราชฯ',img: new URL('../assets/icon/9_insignia.png', import.meta.url).href, icon:'mdi-medal-outline',path: 'organizational'},
+	/* {text: 'การลา',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-calendar',path: 'organizational'},
+	{text: 'วินัย',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-scale-balance',path: 'organizational'} */
 ];
 
 
@@ -153,8 +153,11 @@ window.onpopstate = function() {
 								:key="index"
 							>
 								<q-card class="connn q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
-									<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/>
-									<div class="q-pt-md">{{ menu.text }} </div>
+									<!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
+									<q-avatar rounded size="60px">
+										<q-img :src="menu.img" />
+									</q-avatar>
+									<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
 								</q-card>
 							</div>	
 							</div>
@@ -259,7 +262,7 @@ window.onpopstate = function() {
 			</q-page>
 			<!-- place QPageScroller at end of page -->
 			<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 50]">
-				<q-btn fab icon="keyboard_arrow_up" color="primary" />
+				<q-btn fab icon="keyboard_arrow_up" color="blue" />
 			</q-page-scroller>
 		</q-page-container>
 	</q-layout>
@@ -345,10 +348,4 @@ window.onpopstate = function() {
 	color: #02A998;
 }
 
-.menu-icon {
-  width: 24px; /* ปรับขนาดตามต้องการ */
-  height: 24px; /* ปรับขนาดตามต้องการ */
-  background-size: cover;
-}
-
 </style>