diff --git a/src/api/api.checkin.ts b/src/api/api.checkin.ts
index 15ab966..49143ca 100644
--- a/src/api/api.checkin.ts
+++ b/src/api/api.checkin.ts
@@ -1,9 +1,13 @@
 import env from './index'
 const leave = `${env.API_URI}/leave`
+const urlFile = `${env.API_URI}/salary`
 
 export default {
   checkin: () => `${leave}/check-in`,
   checkTime: () => `${leave}/check-time`,
 
   keycloakLogSSO: `${env.API_URI}/org/keycloak/log/sso`,
+  keycloakPosition: () => `${env.API_URI}/org/profile/keycloak/position`,
+  fileByFile: (name: string, group: string, id: string, fileName: string) =>
+    `${urlFile}/file/${name}/${group}/${id}/${fileName}`,
 }
diff --git a/src/assets/avatar_user.jpg b/src/assets/avatar_user.jpg
new file mode 100644
index 0000000..bcf5bdb
Binary files /dev/null and b/src/assets/avatar_user.jpg differ
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 8f12d7e..b897a8e 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 
 import http from '@/plugins/http'
 import config from '@/app.config'
+import avatar from '@/assets/avatar_user.jpg'
 import { logout, tokenParsed } from '@/plugins/auth'
 import { useCounterMixin } from '@/stores/mixin'
 
@@ -153,6 +154,33 @@ function getLandingUrl() {
   }
 }
 
+/** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
+async function fetchKeycloakPosition() {
+  await http
+    .get(config.API.keycloakPosition())
+    .then(async (res) => {
+      const data = await res.data.result
+      //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
+      if (data.avatarName) {
+        await getImg(data.profileId, data.avatarName)
+      } else {
+        profileImg.value = avatar
+      }
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+}
+
+const profileImg = ref<string>('')
+async function getImg(id: string, pathName: string) {
+  await http
+    .get(config.API.fileByFile('ทะเบียนประวัติ', 'โปรไฟล์', id, pathName))
+    .then((res) => {
+      profileImg.value = res.data.downloadUrl
+    })
+}
+
 watch(
   () => notiTrigger.value,
   () => {
@@ -169,6 +197,7 @@ watch(
 
 onMounted(async () => {
   fetchTotolNotificate()
+  fetchKeycloakPosition()
   const checkTokenParsed = await tokenParsed()
   if (checkTokenParsed != null) {
     fullName.value = checkTokenParsed.name
@@ -318,20 +347,18 @@ onMounted(async () => {
             </div>
           </q-menu>
         </q-btn>
-        <q-btn
-          round
-          dense
-          color="white"
-          flat
-          icon="account_circle"
-          style="font-size: 16px"
-        >
+
+        <q-btn round dense color="white" flat style="font-size: 16px">
+          <q-avatar size="30px">
+            <q-img :src="profileImg" spinner-color="white" />
+          </q-avatar>
           <q-menu style="width: 250px">
             <div class="column items-center col-12 q-py-md" color="grey-3">
-              <!-- <q-avatar size="72px" color="grey-4"> -->
-              <q-icon color="primary" name="account_circle" size="32px" />
-              <!-- <img :src="require('@/assets/logo.png')" /> -->
-              <!-- </q-avatar> -->
+              <q-avatar size="72px" color="grey-4">
+                <!-- <q-icon color="primary" name="account_circle" size="32px" /> -->
+                <q-img :src="profileImg" spinner-color="black" />
+                <!-- <img :src="require('@/assets/logo.png')" /> -->
+              </q-avatar>
               <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                 {{ fullName }}
               </div>