diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 5df0a74f..d6501fe1 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -422,6 +422,7 @@ async function fetchBranchById(id: string) {
     const resAttachment = await branchStore.fetchListAttachment(res.id);
 
     if (resAttachment) {
+
       currentAttachmentList.value = await Promise.all(
         resAttachment.map(async (v) => {
           return {
@@ -2016,6 +2017,7 @@ watch(currentHq, () => {
             id="form-attachment"
             class="q-mb-xl"
             :auto-save="currentId !== ''"
+            :readonly="formType === 'view'"
             branch
             v-model="currentAttachmentList"
             @save="
@@ -2368,22 +2370,9 @@ watch(currentHq, () => {
               class="q-mb-xl"
               id="info-attachment"
               branch
+              v-model="currentAttachmentList"
+              :readonly="formType === 'view'"
               :file="currentAttachmentList"
-              :tree-file="
-                Object.values(
-                  currentAttachmentList.reduce<
-                    Record<string, { label: string; file: { label: string }[] }>
-                  >((a, b) => {
-                    if (b.name && !a[b.name]) {
-                      a[b.name] = {
-                        label: b.name,
-                        file: [],
-                      };
-                    }
-                    return a;
-                  }, {}) || {},
-                )
-              "
               @save="
                 async (_group, file) => {
                   if (file) {
diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts
index 1fb1e33c..6394b805 100644
--- a/src/stores/branch/index.ts
+++ b/src/stores/branch/index.ts
@@ -7,9 +7,10 @@ import { Pagination } from '../types';
 import { BankBook, Branch, BranchCreate } from './types';
 import { BranchContact } from '../branch-contact/types';
 import { User } from '../user/types';
-
 type BranchId = string;
 
+import { manageAttachment } from '../utils';
+
 const useBranchStore = defineStore('api-branch', () => {
   const flowStore = useFlowStore();
   const data = ref<Pagination<(Branch & { branch?: Branch[] })[]>>({
@@ -20,7 +21,7 @@ const useBranchStore = defineStore('api-branch', () => {
   });
   const map = ref<Record<BranchId, Branch & { contact?: BranchContact[] }>>({});
   const contact: Record<BranchId, BranchContact[]> = {};
-
+  const attachmentManager = manageAttachment(api, 'branch');
   watch(data, () => {
     data.value.result.forEach((v) => {
       map.value[v.id] = v;
@@ -170,7 +171,11 @@ const useBranchStore = defineStore('api-branch', () => {
       fileItem.forEach(async (v) => {
         if (v.file === undefined) return;
 
-        await putAttachment(res.data.id, v.file);
+        await attachmentManager.putAttachment({
+          parentId: res.data.id,
+          name: v.file.name,
+          file: v.file,
+        });
       });
     }
 
@@ -398,34 +403,40 @@ const useBranchStore = defineStore('api-branch', () => {
   }
 
   async function fetchListAttachment(branchId: string) {
-    const res = await api.get<string[]>(`branch/${branchId}/attachment`);
+    const res = await attachmentManager.listAttachment({ parentId: branchId });
 
-    if (res.status === 200) {
-      return res.data;
+    if (res) {
+      return res;
     }
   }
 
   async function fetchByIdAttachment(branchId: string, name: string) {
-    const res = await api.get<string>(`branch/${branchId}/attachment/${name}`);
+    const res = await attachmentManager.getAttachment({
+      parentId: branchId,
+      name: name,
+    });
 
-    if (res.status === 200) {
-      return res.data;
+    if (res) {
+      console.log(res);
+      return res;
     }
   }
 
   async function putAttachment(branchId: string, file: File) {
-    await api
-      .put(`branch/${branchId}/attachment/${file.name}`, file, {
-        headers: { 'Content-Type': file.type },
-        onUploadProgress: (e) => console.log(e),
-      })
-      .catch((e) => console.error(e));
+    await attachmentManager.putAttachment({
+      parentId: branchId,
+      name: file.name,
+      file: file,
+    });
   }
 
   async function deleteByIdAttachment(branchId: string, name: string) {
-    const res = await api.delete(`branch/${branchId}/attachment/${name}`);
+    const res = await attachmentManager.delAttachment({
+      parentId: branchId,
+      name: name,
+    });
 
-    if (res.status === 204) {
+    if (res) {
       return true;
     }