diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 39b96f1de..9712517f2 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -7,6 +7,7 @@ import { scroll, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useMenuDataStore } from "@/stores/menuList";
 import { tokenParsed, logout } from "@/plugins/auth";
+import avatar from "@/assets/avatar_user.jpg";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -251,6 +252,7 @@ onMounted(async () => {
 
   await fetchSys();
   await fetchPermissionsSys();
+  fetchKeycloakPosition();
 
   const user = await tokenParsed();
   if (user) {
@@ -536,6 +538,31 @@ async function fetchPermissionsSys() {
       messageError($q, err);
     });
 }
+
+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;
+    });
+}
 </script>
 
 <!-- โครงเว็บ -->
@@ -716,8 +743,8 @@ async function fetchPermissionsSys() {
               <q-item v-close-popup class="q-pa-none">
                 <q-item-section :avatar="$q.screen.gt.xs">
                   <q-avatar color="grey-3">
-                    <!-- <img src="https://cdn.quasar.dev/img/avatar.png" /> -->
-                    <q-icon name="mdi-account" size="22px" color="grey-7" />
+                    <q-img :src="profileImg" />
+                    <!-- <q-icon name="mdi-account" color="grey-7" v-else /> -->
                   </q-avatar>
                 </q-item-section>
                 <q-item-section class="text-left gt-xs">
@@ -734,8 +761,11 @@ async function fetchPermissionsSys() {
             >
               <div class="column items-center col-12 q-py-md" color="grey-3">
                 <q-avatar size="72px" color="grey-4">
-                  <q-icon name="mdi-account" color="grey-7" />
+                  <q-img :src="profileImg" />
+
+                  <!-- <q-icon name="mdi-account" color="grey-7" /> -->
                   <!-- <img :src="require('@/assets/logo.png')" /> -->
+                  <!-- <img src="https://cdn.quasar.dev/img/avatar.png" /> -->
                 </q-avatar>
                 <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                   {{ fullname }}