diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 3b8a68f..cf9db03 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -15,11 +15,8 @@ const props = withDefaults(
     action: false,
   }
 )
-
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
-
-const { isPreview } = storeToRefs(useFileInfoStore())
-const { getFileInfo } = useFileInfoStore()
+const { getFileInfo, getFileNameFormat } = useFileInfoStore()
 const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
   useTreeDataStore()
 )
@@ -108,13 +105,6 @@ function triggerFileEdit(
   }
 }
 
-function getFileNameFormat(fileName: string): string {
-  const dotIndex = fileName.lastIndexOf('.')
-  const fileNameOnly = fileName.substring(0, dotIndex)
-
-  return fileNameOnly
-}
-
 async function submitFileForm(value: {
   mode: 'create' | 'edit'
   file: File
@@ -278,10 +268,7 @@ async function submitFileForm(value: {
       class="inline-block"
     >
       <div class="box border-radius-inherit">
-        <q-card
-          flat
-          @click="() => (getFileInfo(currentFile[index]), (isPreview = true))"
-        >
+        <q-card flat @click="() => getFileInfo(currentFile[index])">
           <q-card-section class="column justify-center relative q-px-xl">
             <file-icon
               size="preview"
diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue
index 32d849d..1c7ce4d 100644
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@@ -5,7 +5,6 @@ import { useFileInfoStore } from '@/stores/file-info-data'
 import FileIcon from '@/components/FileIcon.vue'
 
 const { foundFile } = storeToRefs(useSearchDataStore())
-const { isPreview } = storeToRefs(useFileInfoStore())
 const { getFileInfo } = useFileInfoStore()
 </script>
 
@@ -23,7 +22,6 @@ const { getFileInfo } = useFileInfoStore()
             @click="
               () => {
                 getFileInfo(foundFile[index])
-                isPreview = true
               }
             "
           >
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 956ae91..e1f8f12 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -8,7 +8,7 @@ import FileIcon from '@/components/FileIcon.vue'
 import FileForm from './FileForm.vue'
 import FolderForm from './FolderForm.vue'
 
-const { getFormatDate, getSize, getType } = useFileInfoStore()
+const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
 const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
   useTreeDataStore()
 )
@@ -348,7 +348,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
             style="width: 50%"
             @click="
               () => {
-                getFolder(nameRow.row.pathname)
+                currentDept >= 3 ? getFileInfo(nameRow.row) : getFolder(nameRow.row.pathname);
               }
             "
           >
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 6f5ae94..f2a8d98 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -14,7 +14,7 @@ import FolderForm from './FolderForm.vue'
 
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
-const { isPreview } = storeToRefs(useFileInfoStore())
+const { isFilePreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { data, currentDept } = storeToRefs(useTreeDataStore())
 const { createFolder, getCabinet, gotoParent } = useTreeDataStore()
@@ -89,10 +89,10 @@ onMounted(getCabinet)
       </div>
     </div>
     <div class="col">
-      <file-download v-if="isPreview === true" />
+      <file-download v-if="isFilePreview === true" />
       <div
         class="bg-white rounded-borders shadow-5 relative"
-        v-if="isPreview === false"
+        v-if="isFilePreview === false"
       >
         <search-bar v-if="mode === 'user'" />
         <div class="bg-white q-pa-md">
diff --git a/Services/client/src/components/TreeExplorer.vue b/Services/client/src/components/TreeExplorer.vue
index 7b17bf6..df684c6 100644
--- a/Services/client/src/components/TreeExplorer.vue
+++ b/Services/client/src/components/TreeExplorer.vue
@@ -3,11 +3,9 @@ import { storeToRefs } from 'pinia'
 import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
-import { computed } from '@vue/reactivity'
-import FolderForm from './FolderForm.vue'
 
 const { isSearch } = storeToRefs(useSearchDataStore())
-const { isPreview } = storeToRefs(useFileInfoStore())
+const { isFilePreview } = storeToRefs(useFileInfoStore())
 const { getFolder } = useTreeDataStore()
 
 const props = withDefaults(
@@ -31,7 +29,7 @@ const MAX_NAME_LENGTH = 20
           () => {
             getFolder(folder.pathname, false)
             isSearch = false
-            isPreview = false
+            isFilePreview = false
           }
         "
         :header-inset-level="level * 0.25"
diff --git a/Services/client/src/modules/01_user/components/FileDownload.vue b/Services/client/src/modules/01_user/components/FileDownload.vue
index a2b9c82..d46c6c3 100644
--- a/Services/client/src/modules/01_user/components/FileDownload.vue
+++ b/Services/client/src/modules/01_user/components/FileDownload.vue
@@ -7,8 +7,8 @@ import { useFileInfoStore } from '@/stores/file-info-data'
 
 import FileIcon from '@/components/FileIcon.vue'
 
-const { isPreview, fileInfo } = storeToRefs(useFileInfoStore())
-const { getType, getFormatDate, getSize } = useFileInfoStore()
+const { isFilePreview, fileInfo } = storeToRefs(useFileInfoStore())
+const { getType, getFormatDate, getSize, getFileNameFormat } = useFileInfoStore()
 
 async function downloadSubmit(path: any) {
   const [cabinet, drawer, folder, file] = path.split('/')
@@ -47,7 +47,7 @@ async function downloadSubmit(path: any) {
             flat
             dense
             class="q-mr-sm q-px-sm"
-            @click="() => (isPreview = false)"
+            @click="() => (isFilePreview = false)"
           >
             <q-icon
               class="pointer"
@@ -56,7 +56,7 @@ async function downloadSubmit(path: any) {
               color="primary"
             />
           </q-btn>
-          {{ fileInfo?.title }}</span
+          {{ getFileNameFormat(fileInfo?.fileName) }}</span
         >
       </div>
       <div class="row">
@@ -70,7 +70,7 @@ async function downloadSubmit(path: any) {
                     :fileMimeType="fileInfo?.fileType"
                   />
                   <span class="text-center q-pt-md text-h6">{{
-                    fileInfo?.title
+                    getFileNameFormat(fileInfo?.fileName)
                   }}</span>
                 </q-card-section>
               </q-card>
diff --git a/Services/client/src/stores/file-info-data.ts b/Services/client/src/stores/file-info-data.ts
index fa1d1a6..4ccac65 100644
--- a/Services/client/src/stores/file-info-data.ts
+++ b/Services/client/src/stores/file-info-data.ts
@@ -12,7 +12,7 @@ export interface TypeSetting {
 
 export const useFileInfoStore = defineStore('info', () => {
   const fileInfo = ref<EhrFile>()
-  const isPreview = ref<Boolean>(false)
+  const isFilePreview = ref<Boolean>(false)
   const file: TypeSetting = {
     word: { icon: 'mdi-file-word-outline', color: 'blue-11' },
     excel: { icon: 'mdi-file-excel-outline', color: 'green-4' },
@@ -126,13 +126,14 @@ export const useFileInfoStore = defineStore('info', () => {
     },
   }
 
-  function getType(mimeType: any): string {
-    return mimeType && mimeFileMapping.hasOwnProperty(mimeType)
-      ? mimeFileMapping[mimeType].type
-      : 'unknown type'
+  function getType(mimeType: string | undefined): string {
+    if (mimeType === undefined) {
+      return 'unknown type'
+    }
+    return mimeFileMapping[mimeType].type
   }
 
-  function getFormatDate(dateTime: any): string {
+  function getFormatDate(dateTime: string | undefined): string {
     if (dateTime === undefined) {
       return 'unknown date'
     }
@@ -144,30 +145,43 @@ export const useFileInfoStore = defineStore('info', () => {
     })
   }
 
-  function getSize(size: any): string {
+  function getFileNameFormat(fileName: string | undefined): string {
+    if (fileName === undefined) {
+      return 'unknow name'
+    }
+    const dotIndex = fileName.lastIndexOf('.')
+    const fileNameOnly = fileName.substring(0, dotIndex)
+
+    return fileNameOnly
+  }
+
+  function getSize(size: string | undefined): string {
     if (size === undefined) {
       return 'unknow size'
     }
     const units = ['B', 'KB', 'MB', 'GB', 'TB']
     let i = 0
-    while (size >= 1024 && i < units.length - 1) {
-      size /= 1024
+    let sizeNumber = parseFloat(size)
+    while (sizeNumber >= 1024 && i < units.length - 1) {
+      sizeNumber /= 1024
       i++
     }
-    return size.toFixed(2) + ' ' + units[i]
+    return sizeNumber.toFixed(2) + ' ' + units[i]
   }
 
   async function getFileInfo(data: EhrFile) {
+    isFilePreview.value = true
     fileInfo.value = data
   }
 
   return {
     mimeFileMapping,
-    isPreview,
+    isFilePreview,
     fileInfo,
-    getSize,
     getType,
     getFormatDate,
+    getFileNameFormat,
+    getSize,
     getFileInfo,
   }
 })