diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index ce059f9..132c60e 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -15,12 +15,13 @@ const props = withDefaults(
   defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
   {
     action: false,
-  },
+  }
 )
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo, getFileNameFormat } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
+const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
+  useTreeDataStore()
+)
 const {
   createFolder,
   editFolder,
@@ -30,14 +31,15 @@ const {
   updateFile,
   deleteFile,
   checkFile,
+  refaceFile,
 } = useTreeDataStore()
 
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-      ? 'inbox'
-      : 'o_folder_open',
+    ? 'inbox'
+    : 'o_folder_open'
 )
 
 const dialogDeleteState = ref<boolean>(false)
@@ -112,7 +114,7 @@ function triggerFileEdit(
     keyword: string[]
     category: string[]
   },
-  pathname: string,
+  pathname: string
 ) {
   fileFormState.value = true
   fileFormType.value = 'edit'
@@ -136,7 +138,7 @@ async function submitFileForm(
     keyword: string[]
     category: string[]
   },
-  force = false,
+  force = false
 ) {
   currentParam.value = value
 
@@ -152,6 +154,13 @@ async function submitFileForm(
       keyword: value.keyword,
       category: value.category,
     })
+    setTimeout(() => {
+      refaceFile(currentPath.value)
+    }, 3000)
+
+    setTimeout(() => {
+      refaceFile(currentPath.value)
+    }, 10000)
   } else {
     await updateFile(
       fileFormPath.value,
@@ -161,7 +170,7 @@ async function submitFileForm(
         keyword: value.keyword,
         category: value.category,
       },
-      value.file,
+      value.file
     )
   }
   fileFormData.value = {}
@@ -313,7 +322,7 @@ async function submitFileForm(
                     keyword: value.keyword,
                     category: value.category,
                   },
-                  value.pathname,
+                  value.pathname
                 )
             "
             @delete="() => triggerFileDelete(value.pathname)"
diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts
index 835e583..0eba398 100644
--- a/Services/client/src/stores/tree-data.ts
+++ b/Services/client/src/stores/tree-data.ts
@@ -363,6 +363,26 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     return fileName.length >= 85
   }
 
+  async function refaceFile(pathname: string) {
+    const pathArray: string[] = pathname.split('/').filter(Boolean)
+
+    if (pathArray.length <= 2) {
+      currentFile.value = []
+      return loader.hide()
+    }
+
+    let requestPath = `cabinet/${pathArray[0]}/drawer/${pathArray[1]}`
+    if (pathArray.length >= 3) requestPath += `/folder/${pathArray[2]}`
+    if (pathArray.length >= 4) requestPath += `/subfolder/${pathArray[3]}`
+    requestPath += '/file'
+
+    const res = await axiosClient.get<EhrFile[]>(`${apiEndpoint}${requestPath}`)
+
+    currentFile.value = res.data
+
+    listDataFile.value = currentFile.value
+  }
+
   return {
     data,
     currentFolder,
@@ -382,5 +402,6 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     editFolder,
     checkFile,
     checkFileName,
+    refaceFile,
   }
 })