diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index bdff1d8d..d9e67e80 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -10,7 +10,7 @@ import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
-import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';
+import DetailBranchDrawerComponent from 'src/components/01_branch-management/DetailBranchDrawerComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
 import TableCardComponent from 'src/components/01_branch-management/TableCardComponent.vue';
 
@@ -22,6 +22,17 @@ import {
   BranchCreate,
 } from 'src/stores/branch/types';
 
+const test = ref<File>();
+
+const profileFile = ref<File | undefined>(undefined);
+const inputFile = document.createElement('input');
+inputFile.type = 'file';
+inputFile.accept = 'image/*';
+
+inputFile.addEventListener('change', (e) => {
+  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
+});
+
 const branchStore = useBranchStore();
 const branchContactStore = useBranchContactStore();
 
@@ -51,10 +62,10 @@ const optionsFilter: string[] = [
   'สถานะ',
 ];
 
+const urlQrCode = ref<string | boolean>(false);
 const formDataContact = ref<BranchContactCreate>({
   lineId: '',
   telephoneNo: '',
-  qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
 });
 
 const formType = ref<'edit' | 'create' | 'delete'>('create');
@@ -121,8 +132,9 @@ function clearData() {
   formDataContact.value = {
     lineId: '',
     telephoneNo: '',
-    qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
   };
+
+  profileFile.value = undefined;
 }
 function openDialog() {
   modal.value = true;
@@ -251,10 +263,10 @@ async function fetchFormEditBranchContact(id: string) {
   if (result) {
     const resultFilter = result.result.filter((v) => v.branchId === id);
     currentBranchContactIdEdit.value = resultFilter[0].id;
+    urlQrCode.value = resultFilter[0].qrCodeImageUrl;
     formDataContact.value = {
       lineId: resultFilter[0].lineId,
       telephoneNo: resultFilter[0].telephoneNo,
-      qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
     };
   }
 }
@@ -269,7 +281,11 @@ async function submitForm(
     if (typeSubmit === 'create') {
       const result = await branchStore.create(inputBranchCreate);
       if (result) {
-        await branchContactStore.create(result.id, inputBranchContactCreate);
+        await branchContactStore.create(
+          result.id,
+          inputBranchContactCreate,
+          profileFile.value as File,
+        );
         getTree();
         modal.value = false;
         return;
@@ -281,6 +297,7 @@ async function submitForm(
         currentBranchIdEdit.value,
         currentBranchContactIdEdit.value,
         inputBranchContactCreate,
+        profileFile.value ? profileFile.value : undefined,
       );
 
       getTree();
@@ -296,7 +313,11 @@ async function submitForm(
     if (typeSubmit === 'create') {
       const result = await branchStore.create(inputBranchCreate);
       if (result) {
-        await branchContactStore.create(result.id, inputBranchContactCreate);
+        await branchContactStore.create(
+          result.id,
+          inputBranchContactCreate,
+          profileFile.value as File,
+        );
         getTree();
         modal.value = false;
         return;
@@ -668,7 +689,7 @@ onMounted(async () => {
     </AppBox>
   </div>
 
-  <DeatailsBranchDrawerComponent
+  <DetailBranchDrawerComponent
     v-model:open="openBranchDrawer"
     :data="showCurrentBranch as Branch"
   />
@@ -763,7 +784,13 @@ onMounted(async () => {
           class="q-pa-md column items-center justify-center full-width"
         >
           <div class="col q-pb-md" style="opacity: 0.3">
+            <q-img
+              v-if="urlQrCode"
+              :src="urlQrCode as string"
+              style="width: 100px; height: 100px"
+            />
             <q-btn
+              v-else
               unelevated
               class="bg-white"
               style="border: 3px solid grey; border-radius: 6px"
@@ -781,6 +808,7 @@ onMounted(async () => {
               unelevated
               rounded
               label="อัปโหลด QR Code"
+              @click="inputFile.click()"
             ></q-btn>
           </div>
         </div>