diff --git a/Services/client/src/components/FileFormWrapper.vue b/Services/client/src/components/FileFormWrapper.vue
new file mode 100644
index 0000000..7b3dc92
--- /dev/null
+++ b/Services/client/src/components/FileFormWrapper.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import useStorage from '@/stores/storage'
+import FileForm from './FileForm.vue'
+import UploadExistDialog from './UploadExistDialog.vue'
+
+const storageStore = useStorage()
+const { file, currentInfo } = storeToRefs(storageStore)
+const { createFile, updateFile } = storageStore
+
+const fileFormState = ref<boolean>(false)
+const fileFormPath = ref<string>('')
+const fileFormData = ref<{
+  file?: File
+  title?: string
+  description?: string
+  keyword?: string[]
+  category?: string[]
+}>({})
+const fileFormType = ref<'edit' | 'create'>('create')
+const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
+const fileExistNotification = ref<boolean>(false)
+const fileFormComponent = ref<InstanceType<typeof FileForm>>()
+
+function triggerFileCreate() {
+  fileFormType.value = 'create'
+  fileFormData.value = {}
+  fileFormState.value = !fileFormState.value
+}
+
+function triggerFileEdit(
+  value: {
+    title: string
+    description: string
+    keyword: string[]
+    category: string[]
+  },
+  pathname: string,
+) {
+  fileFormState.value = true
+  fileFormType.value = 'edit'
+  fileFormPath.value = pathname
+  fileFormData.value = {
+    title: value.title,
+    description: value.description,
+    keyword: value.keyword,
+    category: value.category,
+  }
+}
+
+defineExpose({
+  triggerFileCreate,
+  triggerFileEdit,
+})
+
+const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
+
+function checkFileExist(name: string) {
+  return Boolean(
+    file.value[currentInfo.value.path].find((v) => v.fileName === name),
+  )
+}
+
+async function submitFileForm(
+  value: {
+    mode: 'create' | 'edit'
+    file?: File
+    title: string
+    description: string
+    keyword: string[]
+    category: string[]
+  },
+  force = false,
+) {
+  currentParam.value = value
+
+  if (
+    value.file &&
+    file.value[currentInfo.value.path].find(
+      (v) => v.fileName === value.file?.name,
+    ) &&
+    !force
+  ) {
+    fileExistNotification.value = true
+    return
+  }
+
+  if (value.mode === 'create' && value.file) {
+    await createFile(value.file, {
+      title: value.title,
+      description: value.description,
+      keyword: value.keyword,
+      category: value.category,
+    })
+  } else {
+    await updateFile(
+      fileFormPath.value,
+      {
+        title: value.title,
+        description: value.description,
+        keyword: value.keyword,
+        category: value.category,
+      },
+      value.file,
+    )
+  }
+  fileFormData.value = {}
+  fileFormState.value = false
+  currentParam.value = undefined
+  fileFormComponent.value?.reset()
+}
+</script>
+
+<template>
+  <file-form
+    ref="fileFormComponent"
+    :mode="fileFormType"
+    :error="fileFormError"
+    v-model:open="fileFormState"
+    v-model:title="fileFormData.title"
+    v-model:description="fileFormData.description"
+    v-model:keyword="fileFormData.keyword"
+    v-model:category="fileFormData.category"
+    @reset="() => (fileFormError = {})"
+    @filechange="
+      (name: string) => (fileFormError.fileExist = checkFileExist(name))
+    "
+    @submit="submitFileForm"
+  />
+  <upload-exist-dialog
+    v-model:notification="fileExistNotification"
+    @confirm="() => currentParam && submitFileForm(currentParam, true)"
+    @cancel="() => (currentParam = undefined)"
+  />
+</template>
diff --git a/Services/client/src/components/FileIcon.vue b/Services/client/src/components/FileIcon.vue
index c8c6957..7c524a5 100644
--- a/Services/client/src/components/FileIcon.vue
+++ b/Services/client/src/components/FileIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useFileInfoStore } from '@/stores/file-info-data'
 import mime from 'mime'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
 const { mimeFileMapping } = useFileInfoStore()
 
@@ -11,44 +11,33 @@ defineProps<{
 }>()
 
 function getIcon(mimeType: string | undefined, fileName: string | undefined) {
-  if (mimeType === undefined) {
-    return 'mdi-file-question-outline'
-  }
+  if (!mimeType) return 'mdi-file-question-outline'
+
+  const extension = mime.getExtension(mimeType)
+
+  if (extension) return mimeFileMapping[mimeType].icon
+  if (fileName && fileName.includes('.')) return 'mdi-file-outline'
 
-  const extFomMime = mime.getExtension(mimeType)
-  if (extFomMime) {
-    return mimeFileMapping[mimeType].icon
-  }
-  if (fileName && fileName.includes('.')) {
-    return 'mdi-file-outline'
-  }
   return 'mdi-file-question-outline'
 }
 
 function getColor(mimeType: string | undefined, fileName: string | undefined) {
-  if (mimeType === undefined) {
-    return 'grey-5'
-  }
+  if (mimeType === undefined) return 'grey-5'
+
+  const extension = mime.getExtension(mimeType)
+
+  if (extension) return mimeFileMapping[mimeType].color
+  if (fileName && fileName.includes('.')) return 'blue-11'
 
-  const extFomMime = mime.getExtension(mimeType)
-  if (extFomMime) {
-    return mimeFileMapping[mimeType].color
-  }
-  if (fileName && fileName.includes('.')) {
-    return 'blue-11'
-  }
   return 'grey-5'
 }
 
-function getIconSize(s: string) {
-  type SizeMapping = {
-    [key: string]: string
-  }
-  const sizeMapping: SizeMapping = {
+function getIconSize(size: string) {
+  const sizeMapping = {
     preview: '6em',
     list: '2em',
   }
-  return sizeMapping[s]
+  return sizeMapping[size as keyof typeof sizeMapping]
 }
 </script>
 
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 23d8e19..0a14030 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -2,233 +2,109 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
-import FileIcon from '@/components/FileIcon.vue'
-import FileItemAction from '@/components/FileItemAction.vue'
-import DialogDelete from '@/components/DialogDelete.vue'
-import FileForm from './FileForm.vue'
-import FolderForm from './FolderForm.vue'
-import UploadExistDialog from './UploadExistDialog.vue'
-import { useTreeDataStore } from '@/stores/tree-data'
+import FileIcon from './FileIcon.vue'
+import FileItemAction from './FileItemAction.vue'
+import DialogDelete from './DialogDelete.vue'
+import FileFormWrapper from './FileFormWrapper.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
+
 import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
+const TREE_LEVEL_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
 const props = withDefaults(
   defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
-  {
-    action: false,
-  },
+  { action: false },
 )
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
-const {
-  createFolder,
-  editFolder,
-  getFolder,
-  deleteFolder,
-  uploadFile,
-  updateFile,
-  deleteFile,
-  checkFile,
-  checkFileName,
-  refaceFile,
-} = useTreeDataStore()
+
+const storageStore = useStorage()
+const { folder, file, currentInfo } = storeToRefs(storageStore)
+const { goto, deleteFolder, deleteFile } = storageStore
+
+const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
+
+const deleteState = ref<boolean>(false)
+const deletePath = ref<string>('')
+const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
+const deleteMap = { deleteFolder, deleteFile }
 
 const currentIcon = computed(() =>
-  currentDept.value === 0
+  currentInfo.value.dept === 0
     ? 'mdi-file-cabinet'
-    : currentDept.value === 1
+    : currentInfo.value.dept === 1
       ? 'o_inbox'
       : 'o_folder_open',
 )
 
-const dialogDeleteState = ref<boolean>(false)
-const deleteFormPath = ref<string>('')
-const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
-
-const folderFormState = ref<boolean>(false)
-const folderFormPath = ref<string>('')
-const folderFormData = ref<{
-  name?: string
-}>({})
-const folderFormType = ref<'edit' | 'create'>('create')
-const fileFormState = ref<boolean>(false)
-const fileFormPath = ref<string>('')
-const fileFormData = ref<{
-  file?: File
-  title?: string
-  description?: string
-  keyword?: string[]
-  category?: string[]
-}>({})
-const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
-const fileExistNotification = ref<boolean>(false)
-const fileFormComponent = ref<InstanceType<typeof FileForm>>()
-
 function triggerFolderDelete(pathname: string) {
-  deleteFormType.value = 'deleteFolder'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteTarget.value = 'deleteFolder'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 
 function triggerFileDelete(pathname: string) {
-  deleteFormType.value = 'deleteFile'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
-}
-
-function triggerFolderCreate() {
-  folderFormType.value = 'create'
-  folderFormData.value = {}
-  folderFormState.value = !folderFormState.value
-}
-
-function triggerFolderEdit(name: string, pathname: string) {
-  folderFormType.value = 'edit'
-  folderFormPath.value = pathname
-  folderFormData.value.name = name
-  folderFormState.value = true
-}
-
-async function submitFolderForm(value: {
-  mode: 'create' | 'edit'
-  name: string
-}) {
-  if (value.mode === 'create') {
-    await createFolder(value.name)
-  } else {
-    await editFolder(value.name, folderFormPath.value)
-  }
-}
-
-function triggerFileCreate() {
-  fileFormType.value = 'create'
-  fileFormData.value = {}
-  fileFormState.value = !fileFormState.value
-}
-
-function triggerFileEdit(
-  value: {
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  pathname: string,
-) {
-  fileFormState.value = true
-  fileFormType.value = 'edit'
-  fileFormPath.value = pathname
-  fileFormData.value = {
-    title: value.title,
-    description: value.description,
-    keyword: value.keyword,
-    category: value.category,
-  }
-}
-
-const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
-
-async function submitFileForm(
-  value: {
-    mode: 'create' | 'edit'
-    file?: File
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  force = false,
-) {
-  currentParam.value = value
-
-  if (value.file && checkFile(value.file.name) && !force) {
-    fileExistNotification.value = true
-    return
-  }
-
-  if (value.mode === 'create' && value.file) {
-    await uploadFile(currentPath.value, value.file, {
-      title: value.title,
-      description: value.description,
-      keyword: value.keyword,
-      category: value.category,
-    })
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  } else {
-    await updateFile(
-      fileFormPath.value,
-      {
-        title: value.title,
-        description: value.description,
-        keyword: value.keyword,
-        category: value.category,
-      },
-      value.file,
-    )
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  }
-  fileFormData.value = {}
-  fileFormState.value = false
-  currentParam.value = undefined
-  fileFormComponent.value?.reset()
+  deleteTarget.value = 'deleteFile'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 </script>
 
 <template>
-  <div class="text-h6 q-mt-md" v-if="currentDept > 2">
+  <file-form-wrapper ref="fileFormComponent" />
+  <folder-form-wrapper ref="folderFormComponent" />
+  <dialog-delete
+    v-model:open="deleteState"
+    @confirm="() => deleteTarget && deleteMap[deleteTarget](deletePath)"
+  />
+
+  <div
+    class="text-h6 q-mt-md"
+    v-if="currentInfo.dept > 2 && currentInfo.dept < 4"
+  >
     <div class="flex justify-between items-center">
-      <div>{{ DEPT_NAME[currentDept] }}</div>
+      <div>{{ TREE_LEVEL_NAME[currentInfo.dept] }}</div>
       <q-btn
-        v-if="currentDept != 4 && action"
         outline
         push
+        dense
+        id="listViewFolderCreate"
         class="q-px-md q-ml-md"
-        :label="'สร้าง' + DEPT_NAME[currentDept]"
         type="submit"
         color="primary"
-        dense
         icon="add"
-        @click.stop="() => triggerFolderCreate()"
-        id="listViewFolderCreate"
+        v-if="action"
+        :label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
+        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
       />
     </div>
   </div>
-  <div class="grid q-mt-md">
-    <div v-for="value in currentFolder" :data-pathname="value.pathname">
+  <div
+    class="grid q-mt-md"
+    v-if="currentInfo.dept < 4 && folder[currentInfo.path]"
+  >
+    <div
+      v-for="value in folder[currentInfo.path]"
+      :data-pathname="value.pathname"
+    >
       <div
+        class="box"
         :style="{
           position: 'relative',
           display: 'flex',
           gap: '0.5rem',
-          flexDirection: currentDept > 2 ? 'row' : 'column',
           alignItems: 'center',
-          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+          flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
+          padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
         }"
-        class="box"
-        @click="
-          () => {
-            ;(folderFormState = false), getFolder(value.pathname)
-          }
-        "
+        @click="() => goto(value.pathname)"
       >
         <div class="q-px-md flex items-center justify-center">
           <q-icon
             :name="currentIcon"
-            :size="currentDept > 2 ? '3em' : '6em'"
+            :size="currentInfo.dept > 2 ? '3em' : '6em'"
             color="primary"
             class="col"
           />
@@ -236,40 +112,46 @@ async function submitFileForm(
         <div
           class="absolute flex items-center justify-center"
           style="top: 0.5rem; right: 0.5rem"
-          :style="{ bottom: currentDept > 2 ? '0.5rem' : 'unset' }"
           v-if="props.action"
+          :style="{ bottom: currentInfo.dept > 2 ? '0.5rem' : 'unset' }"
         >
           <file-item-action
             :nameId="value.pathname"
             @delete="() => triggerFolderDelete(value.pathname)"
-            @edit="() => triggerFolderEdit(value.name, value.pathname)"
+            @edit="
+              () =>
+                folderFormComponent?.triggerFolderEdit(
+                  value.name,
+                  value.pathname,
+                )
+            "
           />
         </div>
         <div
           class="text-overflow-handle block text-center"
-          :class="{
-            'q-px-md': currentDept < 3,
-            'q-pr-xl': currentDept > 2,
-          }"
           style="max-width: 100%"
+          :class="{
+            'q-px-md': currentInfo.dept < 3,
+            'q-pr-xl': currentInfo.dept > 2,
+          }"
         >
           {{ value.name }}
         </div>
       </div>
     </div>
-    <div v-if="props.action && currentDept < 4">
+    <div v-if="props.action && currentInfo.dept < 4">
       <div
+        id="triggerFolderCreateFileItem"
         class="dashed"
         :style="{
           position: 'relative',
           display: 'flex',
           gap: '0.5rem',
-          flexDirection: currentDept > 2 ? 'row' : 'column',
           alignItems: 'center',
-          padding: currentDept > 2 ? '.5rem 0' : '.5rem',
+          flexDirection: currentInfo.dept > 2 ? 'row' : 'column',
+          padding: currentInfo.dept > 2 ? '.5rem 0' : '.5rem',
         }"
-        @click.stop="() => triggerFolderCreate()"
-        id="triggerFolderCreateFileItem"
+        @click.stop="() => folderFormComponent?.triggerFolderCreate()"
       >
         <div
           class="q-px-md flex items-center justify-center"
@@ -277,17 +159,17 @@ async function submitFileForm(
         >
           <q-icon
             :name="currentIcon"
-            :size="currentDept > 2 ? '3em' : '6em'"
+            :size="currentInfo.dept > 2 ? '3em' : '6em'"
             color="primary"
             class="col"
           />
           <q-btn
             round
-            :dense="currentDept > 2"
             color="white"
             size="10px"
             style="position: absolute; bottom: 0"
-            :style="{ right: currentDept > 2 ? '.5rem' : '1rem' }"
+            :dense="currentInfo.dept > 2"
+            :style="{ right: currentInfo.dept > 2 ? '.5rem' : '1rem' }"
           >
             <q-icon name="add" color="primary" size="1.5rem" />
           </q-btn>
@@ -295,60 +177,58 @@ async function submitFileForm(
         <div
           class="text-overflow-handle block text-center"
           :class="{
-            'q-px-md': currentDept < 3,
-            'q-pr-xl': currentDept > 2,
+            'q-px-md': currentInfo.dept < 3,
+            'q-pr-xl': currentInfo.dept > 2,
           }"
           style="max-width: 100%"
         >
-          สร้าง{{ DEPT_NAME[currentDept] }}
+          สร้าง{{ TREE_LEVEL_NAME[currentInfo.dept] }}
         </div>
       </div>
     </div>
   </div>
-  <div style="grid-column: 1 / span 5" class="q-mt-md" v-if="currentDept > 2">
+  <div
+    style="grid-column: 1 / span 5"
+    class="q-mt-md"
+    v-if="currentInfo.dept > 2 && file[currentInfo.path]"
+  >
     <div class="flex justify-between">
       <div>
         <span class="text-h6 q-mr-md">เอกสาร</span>
         <span class="text-body text-grey"
-          >จำนวน {{ currentFile.length }} รายการ</span
+          >จำนวน {{ file[currentInfo.path].length }} รายการ</span
         >
       </div>
       <q-btn
         outline
         push
-        v-if="action"
+        dense
+        id="listViewFileCreate"
         class="q-px-md q-ml-md"
         label="สร้างเอกสาร"
         type="submit"
         color="primary"
-        dense
         icon="add"
-        @click.stop="() => triggerFileCreate()"
-        id="listViewFileCreate"
+        v-if="action"
+        @click.stop="() => fileFormComponent?.triggerFileCreate()"
       />
     </div>
   </div>
   <div class="grid q-mt-md">
-    <div v-for="(value, index) in currentFile" :data-pathname="value.pathname">
+    <div
+      v-for="(value, index) in file[currentInfo.path]"
+      :data-pathname="value.pathname"
+    >
       <div
-        :style="{
-          position: 'relative',
-          display: 'flex',
-          gap: '0.5rem',
-          flexDirection: 'column',
-          alignItems: 'center',
-          padding: '1rem',
-          maxWidth: '100%',
-        }"
         class="box"
-        @click="() => getFileInfo(value)"
         :id="`getFileInfoFileItem${index}`"
+        @click="() => getFileInfo(value)"
       >
         <div class="q-px-md flex items-center justify-center">
           <file-icon
             size="preview"
-            :fileMimeType="value.fileType ? value.fileType : 'unknow'"
-            :fileName="value.fileName ? value.fileName : 'unknow'"
+            :fileMimeType="value.fileType ? value.fileType : '-'"
+            :fileName="value.fileName ? value.fileName : '-'"
           />
         </div>
         <div
@@ -360,7 +240,7 @@ async function submitFileForm(
             :nameId="value.pathname"
             @edit="
               () =>
-                triggerFileEdit(
+                fileFormComponent?.triggerFileEdit(
                   {
                     title: value.title,
                     description: value.description,
@@ -381,8 +261,10 @@ async function submitFileForm(
         </div>
       </div>
     </div>
-    <div v-if="props.action && currentDept > 2">
+    <div v-if="props.action && currentInfo.dept > 2">
       <div
+        id="triggerFileCreateFileItem"
+        class="dashed"
         :style="{
           display: 'flex',
           gap: '0.5rem',
@@ -391,9 +273,7 @@ async function submitFileForm(
           padding: '1rem',
           maxWidth: '100%',
         }"
-        class="dashed"
-        @click.stop="() => triggerFileCreate()"
-        id="triggerFileCreateFileItem"
+        @click.stop="() => fileFormComponent?.triggerFileCreate()"
       >
         <div
           class="q-px-md flex items-center justify-center"
@@ -418,55 +298,19 @@ async function submitFileForm(
       </div>
     </div>
   </div>
-
-  <file-form
-    ref="fileFormComponent"
-    :mode="fileFormType"
-    :error="fileFormError"
-    v-model:open="fileFormState"
-    v-model:title="fileFormData.title"
-    v-model:description="fileFormData.description"
-    v-model:keyword="fileFormData.keyword"
-    v-model:category="fileFormData.category"
-    @reset="() => (fileFormError = {})"
-    @filechange="
-      (name: string) => (
-        (fileFormError.fileExist = checkFile(name)),
-        (fileFormError.fileName2Long = checkFileName(name))
-      )
-    "
-    @submit="submitFileForm"
-  />
-
-  <folder-form
-    :mode="folderFormType"
-    :tree="DEPT_NAME[currentDept]"
-    v-if="currentDept < 4"
-    v-model:open="folderFormState"
-    v-model:name="folderFormData.name"
-    @submit="submitFolderForm"
-  />
-
-  <upload-exist-dialog
-    v-model:notification="fileExistNotification"
-    @confirm="() => currentParam && submitFileForm(currentParam, true)"
-    @cancel="() => (currentParam = undefined)"
-  />
-
-  <dialog-delete
-    v-model:open="dialogDeleteState"
-    @confirm="
-      () =>
-        deleteFormType &&
-        { deleteFolder, deleteFile }[deleteFormType](deleteFormPath)
-    "
-  />
 </template>
 
 <style lang="scss" scoped>
 .box {
   border: 2px solid $separator-color;
   border-radius: 8px;
+  position: relative;
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+  max-width: 100%;
   cursor: pointer;
 }
 
@@ -483,20 +327,6 @@ async function submitFileForm(
   margin: auto auto;
 }
 
-.add-button {
-  position: absolute;
-  top: 50%;
-  right: 30%;
-  background-color: white;
-}
-
-.add-button-folder-level {
-  position: absolute;
-  left: 30px;
-  top: 22px;
-  background-color: white;
-}
-
 .text-overflow-handle {
   overflow: hidden;
   white-space: nowrap;
diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue
index 160c765..a7b062b 100644
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { useSearchDataStore } from '@/stores/searched-data'
-import { useFileInfoStore } from '@/stores/file-info-data'
-import { useTreeDataStore } from '@/stores/tree-data'
-
-import DialogDelete from './DialogDelete.vue'
-import UploadExistDialog from './UploadExistDialog.vue'
-import FileForm from './FileForm.vue'
-import FileItemAction from '@/components/FileItemAction.vue'
-import FileIcon from '@/components/FileIcon.vue'
-
 import type { QTableProps } from 'quasar'
 import { onMounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
+import DialogDelete from './DialogDelete.vue'
+import FileFormWrapper from './FileFormWrapper.vue'
+import FileItemAction from '@/components/FileItemAction.vue'
+import FileIcon from '@/components/FileIcon.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -24,30 +23,22 @@ const props = withDefaults(
 )
 const { foundFile, isActFoundFile } = storeToRefs(useSearchDataStore())
 const { getFileInfo, getSize, getType } = useFileInfoStore()
-const { updateFile, deleteFile, checkFile } = useTreeDataStore()
+
+const storageStore = useStorage()
+const { deleteFile } = storageStore
+
+const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
+
 const keywordList = ref<string[]>([])
 const categoryList = ref<string[]>([])
 const selectKeyword = ref<string[]>([])
 const selectCategory = ref<string[]>([])
 const filterFoundFile = ref<any>()
 
-const fileExistNotification = ref<boolean>(false)
-const fileFormError = ref<{ fileExist?: boolean }>({})
 const deleteFormType = ref<'deleteFile'>('deleteFile')
 const dialogDeleteState = ref<boolean>(false)
 const deleteFormPath = ref<string>('')
 
-const fileFormType = ref<'edit'>('edit')
-const fileFormState = ref<boolean>(false)
-const fileFormPath = ref<string>('')
-const fileFormData = ref<{
-  file?: File
-  title?: string
-  description?: string
-  keyword?: string[]
-  category?: string[]
-}>({})
-
 const columns: QTableProps['columns'] = [
   {
     name: 'name',
@@ -84,66 +75,6 @@ const columns: QTableProps['columns'] = [
   },
 ]
 
-const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
-
-async function submitFileForm(
-  value: {
-    mode: 'create' | 'edit'
-    file?: File
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  force = false,
-) {
-  currentParam.value = value
-  if (value.file && checkFile(value.file.name) && !force) {
-    fileExistNotification.value = true
-    return
-  }
-
-  if (value.mode === 'edit') {
-    await updateFile(
-      fileFormPath.value,
-      {
-        title: value.title,
-        description: value.description,
-        keyword: value.keyword,
-        category: value.category,
-      },
-      value.file,
-    )
-    setTimeout(() => {
-      isActFoundFile.value = true
-    }, 400)
-  }
-
-  fileFormData.value = {}
-  fileFormState.value = false
-  currentParam.value = undefined
-}
-
-function triggerFileEdit(
-  value: {
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  pathname: string,
-) {
-  fileFormState.value = true
-  fileFormType.value = 'edit'
-  fileFormPath.value = pathname
-  fileFormData.value = {
-    title: value.title,
-    description: value.description,
-    keyword: value.keyword,
-    category: value.category,
-  }
-}
-
 function triggerFileDelete(pathname: string) {
   deleteFormType.value = 'deleteFile'
   deleteFormPath.value = pathname
@@ -161,36 +92,30 @@ function confirmDelete() {
 }
 
 function filterSearch() {
-  function updateList() {
-    keywordList.value = []
-    categoryList.value = []
-    foundFile.value.forEach((obj) => {
-      obj.keyword.forEach((keyword) => {
-        if (!keywordList.value.includes(keyword)) {
-          keywordList.value.push(keyword)
-        }
-      })
-      obj.category.forEach((category) => {
-        if (!categoryList.value.includes(category)) {
-          categoryList.value.push(category)
-        }
-      })
+  keywordList.value = []
+  categoryList.value = []
+  foundFile.value.forEach((obj) => {
+    obj.keyword.forEach((keyword) => {
+      if (!keywordList.value.includes(keyword)) {
+        keywordList.value.push(keyword)
+      }
     })
-  }
+    obj.category.forEach((category) => {
+      if (!categoryList.value.includes(category)) {
+        categoryList.value.push(category)
+      }
+    })
+  })
 
-  function filterArray() {
-    if (!(selectKeyword.value.length || selectCategory.value.length)) {
-      filterFoundFile.value = foundFile.value
-    } else {
-      filterFoundFile.value = foundFile.value.filter(
-        (entry) =>
-          entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
-          entry.category.some((kw) => selectCategory.value.includes(kw)),
-      )
-    }
+  if (!(selectKeyword.value.length || selectCategory.value.length)) {
+    filterFoundFile.value = foundFile.value
+  } else {
+    filterFoundFile.value = foundFile.value.filter(
+      (entry) =>
+        entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
+        entry.category.some((kw) => selectCategory.value.includes(kw)),
+    )
   }
-  updateList()
-  filterArray()
 }
 
 watch(
@@ -208,6 +133,9 @@ onMounted(() => {
 </script>
 
 <template>
+  <file-form-wrapper ref="fileFormComponent" />
+  <dialog-delete v-model:open="dialogDeleteState" @confirm="confirmDelete" />
+
   <div class="row grid q-py-md q-gutter-sm">
     <q-select
       outlined
@@ -265,7 +193,7 @@ onMounted(() => {
               :nameId="value.pathname"
               @edit="
                 () =>
-                  triggerFileEdit(
+                  fileFormComponent?.triggerFileEdit(
                     {
                       title: value.title,
                       description: value.description,
@@ -344,7 +272,11 @@ onMounted(() => {
               dense
               icon="o_edit"
               @click="
-                () => triggerFileEdit(actionData.row, actionData.row.pathname)
+                () =>
+                  fileFormComponent?.triggerFileEdit(
+                    actionData.row,
+                    actionData.row.pathname,
+                  )
               "
               id="listViewFileEdit"
             />
@@ -365,26 +297,6 @@ onMounted(() => {
   <div class="q-mt-md" v-if="foundFile.length == 0">
     <span>ไม่พบรายการที่ค้นหา</span>
   </div>
-
-  <file-form
-    :mode="fileFormType"
-    :error="fileFormError"
-    v-model:open="fileFormState"
-    v-model:title="fileFormData.title"
-    v-model:description="fileFormData.description"
-    v-model:keyword="fileFormData.keyword"
-    v-model:category="fileFormData.category"
-    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
-    @submit="submitFileForm"
-  />
-
-  <upload-exist-dialog
-    v-model:notification="fileExistNotification"
-    @confirm="() => currentParam && submitFileForm(currentParam, true)"
-    @cancel="() => (currentParam = undefined)"
-  />
-
-  <dialog-delete v-model:open="dialogDeleteState" @confirm="confirmDelete" />
 </template>
 
 <style scoped lang="scss">
diff --git a/Services/client/src/components/FolderFormWrapper.vue b/Services/client/src/components/FolderFormWrapper.vue
new file mode 100644
index 0000000..5f42442
--- /dev/null
+++ b/Services/client/src/components/FolderFormWrapper.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import useStorage from '@/stores/storage'
+import FolderForm from './FolderForm.vue'
+
+const storageStore = useStorage()
+const { file, currentInfo } = storeToRefs(storageStore)
+const { createFolder, editFolder } = storageStore
+
+const folderFormState = ref<boolean>(false)
+const folderFormPath = ref<string>('')
+const folderFormData = ref<{
+  name?: string
+}>({})
+const folderFormType = ref<'edit' | 'create'>('create')
+
+function triggerFolderCreate() {
+  folderFormType.value = 'create'
+  folderFormData.value = {}
+  folderFormState.value = !folderFormState.value
+}
+
+function triggerFolderEdit(name: string, pathname: string) {
+  folderFormType.value = 'edit'
+  folderFormPath.value = pathname
+  folderFormData.value.name = name
+  folderFormState.value = true
+}
+
+defineExpose({
+  triggerFolderCreate,
+  triggerFolderEdit,
+})
+
+async function submitFolderForm(value: {
+  mode: 'create' | 'edit'
+  name: string
+}) {
+  if (value.mode === 'create') {
+    await createFolder(value.name)
+  } else {
+    await editFolder(value.name, folderFormPath.value)
+  }
+}
+</script>
+
+<template>
+  <folder-form
+    :mode="folderFormType"
+    :tree="
+      (['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const)[currentInfo.dept]
+    "
+    v-if="currentInfo.dept < 4"
+    v-model:open="folderFormState"
+    v-model:name="folderFormData.name"
+    @submit="submitFolderForm"
+  />
+</template>
diff --git a/Services/client/src/components/FullLoader.vue b/Services/client/src/components/FullLoader.vue
index 3e4bbc4..089a3b6 100644
--- a/Services/client/src/components/FullLoader.vue
+++ b/Services/client/src/components/FullLoader.vue
@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import { watch, ref } from 'vue'
 
-const props = defineProps({
-  visibility: Boolean,
-})
+const props = defineProps({ visibility: Boolean })
+const visible = ref<boolean>(props.visibility)
 
-const loaderVisibility = ref<boolean>(props.visibility)
-
-watch(props, () => (loaderVisibility.value = props.visibility))
+watch(props, () => (visible.value = props.visibility))
 </script>
 
 <template>
-  <q-inner-loading :showing="loaderVisibility" class="loader">
+  <q-inner-loading :showing="visible" class="loader">
     <q-spinner-cube size="80px" color="primary" />
   </q-inner-loading>
 </template>
 
-<style lang="sass">
-.loader
-    z-index: 1000
+<style lang="scss">
+.loader {
+  z-index: 1000;
+}
 </style>
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index e9d558e..73080a7 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -1,340 +1,188 @@
 <script lang="ts" setup>
+import type { QTableProps } from 'quasar'
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import type { QTableProps } from 'quasar'
-import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
-import { useFileInfoStore } from '@/stores/file-info-data'
+
 import FileIcon from '@/components/FileIcon.vue'
 import DialogDelete from '@/components/DialogDelete.vue'
-import UploadExistDialog from './UploadExistDialog.vue'
-import FileForm from './FileForm.vue'
-import FolderForm from './FolderForm.vue'
+import FileFormWrapper from './FileFormWrapper.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
+
+import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
+const storageStore = useStorage()
+const { folder, file, currentInfo } = storeToRefs(storageStore)
+const { goto, deleteFolder, deleteFile } = storageStore
 
 const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
-const { listDataFile, listDataFolder, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
-const {
-  createFolder,
-  editFolder,
-  getFolder,
-  deleteFolder,
-  uploadFile,
-  updateFile,
-  deleteFile,
-  checkFile,
-  refaceFile,
-} = useTreeDataStore()
 
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
+const fileFormComponent = ref<InstanceType<typeof FileFormWrapper>>()
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
+
+const currentIcon = computed(() =>
+  currentInfo.value.dept === 0
+    ? 'mdi-file-cabinet'
+    : currentInfo.value.dept === 1
+      ? 'inbox'
+      : 'o_folder_open',
+)
+const TREE_LEVEL_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 
 const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
-const currentLevel = computed(() =>
-  currentDept.value === 0
-    ? 'ตู้จัดเก็บเอกสาร'
-    : currentDept.value === 1
-      ? 'ลิ้นชัก'
-      : currentDept.value === 2
-        ? 'แฟ้ม'
-        : 'แฟ้มย่อย',
-)
-
-const currentIcon = computed(() =>
-  currentDept.value === 0
-    ? 'mdi-file-cabinet'
-    : currentDept.value === 1
-      ? 'inbox'
-      : 'o_folder_open',
-)
-
-const folderFormState = ref<boolean>(false)
-const folderFormPath = ref<string>('')
-const folderFormData = ref<{
-  name?: string
-}>({})
-const folderFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean }>({})
-const fileExistNotification = ref<boolean>(false)
-
-const fileFormState = ref<boolean>(false)
-const fileFormPath = ref<string>('')
-const fileFormData = ref<{
-  file?: File
-  title?: string
-  description?: string
-  keyword?: string[]
-  category?: string[]
-}>({})
-const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormComponent = ref<InstanceType<typeof FileForm>>()
-
-const dialogDeleteState = ref<boolean>(false)
-const deleteFormPath = ref<string>('')
-const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
+const deleteState = ref<boolean>(false)
+const deletePath = ref<string>('')
+const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
+const deleteMap = { deleteFolder, deleteFile }
 
 function triggerFolderDelete(pathname: string) {
-  deleteFormType.value = 'deleteFolder'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteTarget.value = 'deleteFolder'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 
 function triggerFileDelete(pathname: string) {
-  deleteFormType.value = 'deleteFile'
-  deleteFormPath.value = pathname
-  dialogDeleteState.value = !dialogDeleteState.value
+  deleteTarget.value = 'deleteFile'
+  deletePath.value = pathname
+  deleteState.value = !deleteState.value
 }
 
-function triggerFolderCreate() {
-  folderFormType.value = 'create'
-  folderFormData.value = {}
-  folderFormState.value = !folderFormState.value
-}
-
-function triggerFolderEdit(name: string, pathname: string) {
-  folderFormType.value = 'edit'
-  folderFormPath.value = pathname
-  folderFormData.value.name = name
-  folderFormState.value = true
-}
-
-async function submitFolderForm(value: {
-  mode: 'create' | 'edit'
-  name: string
-}) {
-  if (value.mode === 'create') {
-    await createFolder(value.name)
-  } else {
-    await editFolder(value.name, folderFormPath.value)
-  }
-}
-
-function triggerFileCreate() {
-  fileFormType.value = 'create'
-  fileFormData.value = {}
-  fileFormState.value = !fileFormState.value
-}
-
-function triggerFileEdit(
-  value: {
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  pathname: string,
-) {
-  fileFormState.value = true
-  fileFormType.value = 'edit'
-  fileFormPath.value = pathname
-  fileFormData.value = {
-    title: value.title,
-    description: value.description,
-    keyword: value.keyword,
-    category: value.category,
-  }
-}
-
-const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
-
-async function submitFileForm(
-  value: {
-    mode: 'create' | 'edit'
-    file?: File
-    title: string
-    description: string
-    keyword: string[]
-    category: string[]
-  },
-  force = false,
-) {
-  currentParam.value = value
-
-  if (value.file && checkFile(value.file.name) && !force) {
-    fileExistNotification.value = true
-    return
-  }
-
-  if (value.mode === 'create' && value.file) {
-    await uploadFile(currentPath.value, value.file, {
-      title: value.title,
-      description: value.description,
-      keyword: value.keyword,
-      category: value.category,
-    })
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  } else {
-    await updateFile(
-      fileFormPath.value,
-      {
-        title: value.title,
-        description: value.description,
-        keyword: value.keyword,
-        category: value.category,
-      },
-      value.file,
-    )
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 3000)
-
-    setTimeout(() => {
-      refaceFile(currentPath.value)
-    }, 10000)
-  }
-  fileFormData.value = {}
-  fileFormState.value = false
-  currentParam.value = undefined
-  fileFormComponent.value?.reset()
-}
-
-const columnsFolder: QTableProps['columns'] = [
+const colFolder = [
   {
     name: 'name',
     required: true,
     label: 'ชื่อ',
     align: 'left',
-    field: (row) => row.name,
-    format: (val) => `${val}`,
+    field: 'name',
     sortable: true,
-    style: 'width: 1000px',
   },
   {
     name: 'createdBy',
-    align: 'center',
     label: 'สร้างโดย',
+    align: 'center',
     field: 'createdBy',
-    style: 'width: 20px',
     sortable: true,
   },
   {
     name: 'createdAt',
-    align: 'center',
     label: 'วันที่สร้าง',
+    align: 'center',
     field: 'createdAt',
     sortable: true,
-    style: 'width: 20px',
   },
   {
     name: 'actions',
     align: 'center',
     label: '',
     field: '',
-    style: 'width: 5px',
   },
-]
+] satisfies QTableProps['columns']
 
-const columnsFile: QTableProps['columns'] = [
+const colFile = [
   {
     name: 'name',
-    required: true,
     label: 'ชื่อไฟล์',
     align: 'left',
-    field: (row) => row.fileName,
-    format: (val) => `${val}`,
+    field: 'fileName',
     sortable: true,
-    style: 'width: 200px',
   },
   {
     name: 'title',
-    align: 'center',
     label: 'ชื่อเรื่อง',
+    align: 'center',
     field: 'title',
-    style: 'width: 200px',
-
     sortable: true,
   },
   {
     name: 'fileType',
-    align: 'center',
     label: 'ประเภทของไฟล์',
+    align: 'center',
     field: 'fileType',
     sortable: true,
-    style: 'width: 200px',
   },
   {
     name: 'actions',
     align: 'center',
     label: '',
     field: '',
-    style: 'width: 20px',
   },
-]
+] satisfies QTableProps['columns']
 
-const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
-  getFolder(row.pathname)
-}
+const onRowClick = ((_, row) => {
+  goto(row.pathname)
+}) satisfies QTableProps['onRowClick']
 </script>
 
 <template>
+  <file-form-wrapper ref="fileFormComponent" />
+  <folder-form-wrapper ref="folderFormComponent" />
+  <dialog-delete
+    v-model:open="deleteState"
+    @confirm="() => deleteTarget && deleteMap[deleteTarget](deletePath)"
+  />
   <div class="q-mt-md">
     <div class="q-gutter-sm">
       <div
         class="flex flex-break d justify-between space-between"
-        v-if="currentDept >= 1 && props.mode == 'admin' && currentDept != 4"
+        v-if="
+          currentInfo.dept >= 1 &&
+          currentInfo.dept < 4 &&
+          props.mode === 'admin'
+        "
       >
         <div>
-          <span class="text-h6">{{ currentLevel }}</span>
+          <span class="text-h6">{{ TREE_LEVEL_NAME[currentInfo.dept] }}</span>
         </div>
         <div>
           <q-btn
             outline
             push
+            dense
             class="q-px-md q-ml-md"
-            :label="'สร้าง' + currentLevel"
             type="submit"
             color="primary"
-            dense
             icon="add"
-            @click.stop="() => triggerFolderCreate()"
             id="listViewFolderCreate"
+            :label="'สร้าง' + TREE_LEVEL_NAME[currentInfo.dept]"
+            @click.stop="() => folderFormComponent?.triggerFolderCreate()"
           />
         </div>
       </div>
-
       <q-table
         flat
         bordered
-        :rows="listDataFolder"
-        :columns="columnsFolder"
-        :pagination="{
-          rowsPerPage: 20,
-        }"
-        @row-click="onRowClick"
         row-key="name"
         class="cursor"
-        v-if="currentDept != 4"
+        v-if="currentInfo.dept !== 4"
+        :pagination="{ rowsPerPage: 20 }"
+        :rows="folder[currentInfo.path]"
+        :columns="colFolder"
+        @row-click="onRowClick"
       >
-        <template v-slot:body-cell-name="nameRow">
-          <q-td style="width: 50%">
+        <template v-slot:body-cell-name="data">
+          <q-td>
             <q-icon :name="currentIcon" size="2em" color="primary" />
-            {{ nameRow.row.name }}
+            {{ data.row.name }}
           </q-td>
         </template>
-        <template v-slot:body-cell-createdBy="createdByRow">
-          <q-td>
-            <div class="justify-center center-content">
-              {{ createdByRow.row.createdBy }}
-            </div>
+        <template v-slot:body-cell-createdBy="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">
+              {{ data.row.createdBy }}
+            </span>
           </q-td>
         </template>
-        <template v-slot:body-cell-createdAt="createdAtRow">
-          <q-td>
-            <div class="justify-center">
-              {{ getFormatDate(createdAtRow.row.createdAt) }}
-            </div>
+        <template v-slot:body-cell-createdAt="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">
+              {{ getFormatDate(data.row.createdAt) }}
+            </span>
           </q-td>
         </template>
-        <template v-slot:body-cell-actions="actionsRow">
+        <template v-slot:body-cell-actions="data">
           <q-td class="justify-center">
             <div>
               <q-icon
@@ -349,32 +197,31 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ actionsRow.row.name }}
+                {{ data.row.name }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
               <q-btn
                 flat
-                color="positive"
                 dense
+                id="listViewFolderEdit"
                 icon="o_edit"
+                color="positive"
                 @click.stop="
-                  triggerFolderEdit(
-                    actionsRow.row.name,
-                    actionsRow.row.pathname,
+                  folderFormComponent?.triggerFolderEdit(
+                    data.row.name,
+                    data.row.pathname,
                   )
                 "
-                id="listViewFolderEdit"
               />
-
               <q-btn
                 flat
-                color="negative"
                 dense
-                :data-testid="actionsRow.row.name"
-                icon="mdi-trash-can-outline"
-                @click.stop="triggerFolderDelete(actionsRow.row.pathname)"
                 id="listViewFolderDelete"
+                color="negative"
+                icon="mdi-trash-can-outline"
+                :data-testid="data.row.name"
+                @click.stop="triggerFolderDelete(data.row.pathname)"
               />
             </div>
           </q-td>
@@ -382,74 +229,62 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
       </q-table>
     </div>
   </div>
-
-  <div class="q-mt-md" v-if="currentDept >= 3">
+  <div class="q-mt-md" v-if="currentInfo.dept >= 3">
     <div class="q-gutter-sm">
-      <div class="flex flex-break d justify-between space-between">
-        <div>
-          <span class="text-h6">เอกสาร</span>
-        </div>
+      <div class="flex flex-break justify-between space-between">
+        <div><span class="text-h6">เอกสาร</span></div>
         <div>
           <q-btn
-            v-if="props.mode == 'admin'"
             outline
             push
+            dense
+            id="listViewFileCreate"
             class="q-px-md q-ml-md"
             label="สร้างเอกสาร"
             type="submit"
             color="primary"
-            dense
             icon="add"
-            @click.stop="() => triggerFileCreate()"
-            id="listViewFileCreate"
+            v-if="props.mode == 'admin'"
+            @click.stop="() => fileFormComponent?.triggerFileCreate()"
           />
         </div>
       </div>
       <q-table
         flat
         bordered
-        :rows="listDataFile"
-        :columns="columnsFile"
-        row-key="name"
-        :pagination="{
-          rowsPerPage: 20,
-        }"
         class="cursor"
+        row-key="name"
+        :rows="file[currentInfo.path]"
+        :columns="colFile"
+        :pagination="{ rowsPerPage: 20 }"
       >
-        <template v-slot:body-cell-name="nameRow">
+        <template v-slot:body-cell-name="data">
           <q-td
-            style="width: 50%"
-            @click="
-              () => {
-                currentDept >= 3
-                  ? getFileInfo(nameRow.row)
-                  : getFolder(nameRow.row.pathname)
-              }
-            "
             id="listViewGetFileInfo"
+            style="width: 50%"
+            @click="() => getFileInfo(data.row)"
           >
             <file-icon
               size="list"
-              :fileMimeType="
-                nameRow.row.fileType ? nameRow.row.fileType : 'unknown'
-              "
-              :fileName="
-                nameRow.row.fileName ? nameRow.row.fileName : 'unknown'
-              "
+              :fileMimeType="data.row.fileType || '-'"
+              :fileName="data.row.fileName || '-'"
             />
-            {{ nameRow.row.fileName }}
+            {{ data.row.fileName }}
           </q-td>
         </template>
-
-        <template v-slot:body-cell-fileType="fileTypeRow">
-          <q-td>
-            <div class="justify-center">
-              {{ getType(fileTypeRow.row.fileType, fileTypeRow.row.fileName) }}
-            </div>
+        <template v-slot:body-cell-title="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">{{ data.row.title }}</span>
           </q-td>
         </template>
-
-        <template v-slot:body-cell-actions="actionsRow">
+        <template v-slot:body-cell-fileType="data">
+          <q-td class="text-center">
+            <span class="sort-icon-offset-margin">
+              {{ getType(data.row.fileType, data.row.fileName) }}
+            </span>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-actions="data">
           <q-td class="justify-center">
             <div>
               <q-icon
@@ -463,7 +298,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ getSize(actionsRow.row.fileSize) }}
+                {{ getSize(data.row.fileSize) }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
@@ -473,17 +308,21 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 dense
                 icon="o_edit"
                 @click.stop="
-                  () => triggerFileEdit(actionsRow.row, actionsRow.row.pathname)
+                  () =>
+                    fileFormComponent?.triggerFileEdit(
+                      data.row,
+                      data.row.pathname,
+                    )
                 "
                 id="listViewFileEdit"
               />
               <q-btn
                 flat
-                color="negative"
                 dense
-                icon="mdi-trash-can-outline"
-                @click.stop="() => triggerFileDelete(actionsRow.row.pathname)"
                 id="listViewFileDelete"
+                color="negative"
+                icon="mdi-trash-can-outline"
+                @click.stop="() => triggerFileDelete(data.row.pathname)"
               />
             </div>
           </q-td>
@@ -491,44 +330,6 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
       </q-table>
     </div>
   </div>
-
-  <file-form
-    ref="fileFormComponent"
-    :mode="fileFormType"
-    :error="fileFormError"
-    v-model:open="fileFormState"
-    v-model:title="fileFormData.title"
-    v-model:description="fileFormData.description"
-    v-model:keyword="fileFormData.keyword"
-    v-model:category="fileFormData.category"
-    @reset="() => (fileFormError = {})"
-    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
-    @submit="submitFileForm"
-  />
-
-  <folder-form
-    :mode="folderFormType"
-    :tree="DEPT_NAME[currentDept]"
-    v-if="currentDept < 4"
-    v-model:open="folderFormState"
-    v-model:name="folderFormData.name"
-    @submit="submitFolderForm"
-  />
-
-  <upload-exist-dialog
-    v-model:notification="fileExistNotification"
-    @confirm="() => currentParam && submitFileForm(currentParam, true)"
-    @cancel="() => (currentParam = undefined)"
-  />
-
-  <dialog-delete
-    v-model:open="dialogDeleteState"
-    @confirm="
-      () =>
-        deleteFormType &&
-        (deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
-    "
-  />
 </template>
 
 <style lang="scss" scoped>
@@ -538,7 +339,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
   align-items: center;
 }
 
-.center-content {
+.sort-icon-offset-margin {
   margin-right: 18px;
 }
 
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 2400efd..dc5ed29 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useTreeDataStore } from '@/stores/tree-data'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 
@@ -9,54 +8,32 @@ import FileItem from './FileItem.vue'
 import TreeExplorer from './TreeExplorer.vue'
 import FileSearched from './FileSearched.vue'
 import ListView from './ListView.vue'
-import FolderForm from './FolderForm.vue'
+import FolderFormWrapper from './FolderFormWrapper.vue'
 import GlobalErrorDialog from './GlobalErrorDialog.vue'
 
 import SearchBar from '@/modules/01_user/components/SearchBar.vue'
 import FileDownload from '@/modules/01_user/components/FileDownload.vue'
+import useStorage from '@/stores/storage'
 
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
-
-const { isFilePreview } = storeToRefs(useFileInfoStore())
-const { isSearch } = storeToRefs(useSearchDataStore())
-const { data, currentDept, currentPath } = storeToRefs(useTreeDataStore())
-const { createFolder, getCabinet, gotoParent, getFolder } = useTreeDataStore()
-
-const viewMode = ref<'view_list' | 'view_module'>('view_list')
 const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
-const folderFormState = ref<boolean>(false)
-const folderFormType = ref<'edit' | 'create'>('create')
-const folderFormData = ref<{
-  name?: string
-}>({})
+const { isFilePreview } = storeToRefs(useFileInfoStore())
+const { isSearch } = storeToRefs(useSearchDataStore())
 
-function triggerFolderCreate() {
-  folderFormType.value = 'create'
-  folderFormData.value = {}
-  folderFormState.value = !folderFormState.value
-}
+const storageStore = useStorage()
+const { tree, currentInfo } = storeToRefs(storageStore)
+const { goto, gotoParent } = storageStore
 
-async function submitFolderForm(value: {
-  mode: 'create' | 'edit'
-  name: string
-}) {
-  if (value.mode === 'create') {
-    await createFolder(value.name)
-  }
-}
+const viewMode = ref<'view_list' | 'view_module'>('view_list')
 
-onMounted(async () => {
-  await getCabinet()
-
-  const sessionCurrentPath = sessionStorage.getItem('currentPath')
-
-  if (sessionCurrentPath) await getFolder(sessionCurrentPath)
-})
+const folderFormComponent = ref<InstanceType<typeof FolderFormWrapper>>()
 </script>
 <template>
+  <folder-form-wrapper ref="folderFormComponent" />
+  <global-error-dialog />
+
   <section id="header" class="q-px-md q-pt-md q-pb-none">
     <div class="q-my-md row items-center">
       <div class="col">
@@ -81,8 +58,7 @@ onMounted(async () => {
             class="block q-my-sm text-weight-bold pointer"
             @click="
               () => {
-                currentPath = ''
-                getFolder(currentPath)
+                goto()
                 isSearch = false
                 isFilePreview = false
               }
@@ -95,13 +71,13 @@ onMounted(async () => {
             flat
             color="primary"
             icon="add"
-            @click.stop="() => triggerFolderCreate()"
             data-testid="createFolder"
+            @click.stop="() => folderFormComponent?.triggerFolderCreate()"
           />
         </div>
         <q-separator />
         <div class="q-pa-md">
-          <tree-explorer :data="data" :level="1" />
+          <tree-explorer :data="tree" />
         </div>
       </div>
     </div>
@@ -120,54 +96,57 @@ onMounted(async () => {
                   flat
                   dense
                   class="q-mr-sm q-px-sm"
-                  v-if="isSearch == true || currentDept > 0"
+                  v-if="isSearch || currentInfo.dept > 0"
                   @click="
                     () => {
-                      isSearch
-                        ? (isSearch = false)
-                        : ((folderFormState = false), gotoParent())
+                      isSearch ? (isSearch = false) : gotoParent()
                     }
                   "
                 >
                   <q-icon name="arrow_back" size="1rem" color="primary" />
                 </q-btn>
-                <span v-if="isSearch === true">ผลการค้นหา</span>
-                <q-breadcrumbs v-if="isSearch === false" active-color="primary">
+                <span v-if="isSearch">ผลการค้นหา</span>
+                <q-breadcrumbs
+                  v-if="!isSearch"
+                  active-color="grey"
+                  separator-color="grey"
+                >
                   <q-breadcrumbs-el
-                    v-if="currentPath === '/' || !currentPath"
+                    v-if="currentInfo.path === '/' || !currentInfo.path"
                     label="ตู้เอกสารทั้งหมด"
                   />
                   <q-btn
-                    v-if="
-                      mode === 'admin' &&
-                      viewMode === 'view_module' &&
-                      currentDept === 0
-                    "
+                    dense
+                    id="createFolder"
                     class="q-px-md q-ml-md al"
                     label="สร้างตู้เก็บเอกสาร"
                     type="submit"
                     color="primary"
-                    dense
                     icon="add"
-                    @click.stop="() => triggerFolderCreate()"
-                    id="createFolder"
+                    v-if="
+                      mode === 'admin' &&
+                      viewMode === 'view_module' &&
+                      currentInfo.dept === 0
+                    "
+                    @click.stop="
+                      () => folderFormComponent?.triggerFolderCreate()
+                    "
                   />
                   <q-breadcrumbs-el
-                    class="text-primary pointer"
-                    v-for="(fragments, index) in currentPath
+                    class="pointer"
+                    v-for="(fragments, index) in currentInfo.path
                       .split('/')
                       .filter(Boolean)"
                     :label="fragments"
                     @click="
                       () => {
-                        currentPath =
-                          currentPath
+                        goto(
+                          currentInfo.path
                             .split('/')
                             .filter(Boolean)
                             .slice(0, index + 1)
-                            .join('/') + '/'
-
-                        getFolder(currentPath)
+                            .join('/') + '/',
+                        )
                       }
                     "
                   />
@@ -178,15 +157,16 @@ onMounted(async () => {
               <q-btn
                 flat
                 dense
+                id="getFolder"
                 color="blue-grey-2"
                 icon="refresh"
                 class="q-mr-sm"
-                @click="() => getFolder(currentPath)"
-                id="getFolder"
+                @click="() => goto(currentInfo.path, true)"
               />
               <q-btn
                 flat
                 dense
+                id="viewMode"
                 color="blue-grey-2"
                 :icon="viewMode"
                 @click="
@@ -195,7 +175,6 @@ onMounted(async () => {
                       viewMode === 'view_list' ? 'view_module' : 'view_list'
                   }
                 "
-                id="viewMode"
               />
             </div>
           </div>
@@ -203,15 +182,15 @@ onMounted(async () => {
             <file-searched
               :viewMode="viewMode"
               :action="props.mode === 'admin'"
-              v-if="isSearch === true"
+              v-if="isSearch"
             />
             <file-item
               :viewMode="viewMode"
               :action="props.mode === 'admin'"
-              v-if="isSearch === false && viewMode === 'view_list'"
+              v-if="!isSearch && viewMode === 'view_list'"
             />
             <list-view
-              v-if="isSearch === false && viewMode === 'view_module'"
+              v-if="!isSearch && viewMode === 'view_module'"
               :mode="mode"
             />
           </div>
@@ -219,17 +198,6 @@ onMounted(async () => {
       </div>
     </div>
   </section>
-
-  <folder-form
-    :mode="folderFormType"
-    :tree="DEPT_NAME[currentDept]"
-    v-if="currentDept < 4"
-    v-model:open="folderFormState"
-    v-model:name="folderFormData.name"
-    @submit="submitFolderForm"
-  />
-
-  <global-error-dialog />
 </template>
 
 <style lang="scss" scoped>
diff --git a/Services/client/src/components/Profile.vue b/Services/client/src/components/Profile.vue
index 9b365b0..ba2d4a3 100644
--- a/Services/client/src/components/Profile.vue
+++ b/Services/client/src/components/Profile.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { getUsername, logout } from '@/services/KeyCloakService'
 import { ref } from 'vue'
-const dropdownOpen = ref<boolean>(false)
-const accountName = ref<string>(getUsername())
+const dropdown = ref<boolean>(false)
+const name = ref<string>(getUsername())
 </script>
 
 <template>
   <div
-    @click="() => (dropdownOpen = !dropdownOpen)"
+    @click="() => (dropdown = !dropdown)"
     class="row q-px-xs cursor"
     id="app-toolbar-title"
   >
@@ -19,20 +19,28 @@ const accountName = ref<string>(getUsername())
 
     <div>
       <div class="row q-pl-sm">
-        <span class="text-body1" style="font-size:13px">
-          {{ accountName }}
+        <span class="text-body1" style="font-size: 13px">
+          {{ name }}
         </span>
       </div>
       <div class="row q-pl-sm">
-        <span class="text-caption text-grey" style="font-size:10px"> เจ้าหน้าที่ </span>
+        <span class="text-caption text-grey" style="font-size: 10px">
+          เจ้าหน้าที่
+        </span>
       </div>
     </div>
   </div>
-  <q-btn-dropdown stretch flat v-model="dropdownOpen">
+  <q-btn-dropdown stretch flat v-model="dropdown">
     <q-list>
       <q-item clickable v-close-popup tabindex="0" @click="() => logout()">
         <q-item-section avatar>
-          <q-avatar icon="logout" color="primary" text-color="white" caption>
+          <q-avatar
+            caption
+            icon="logout"
+            color="primary"
+            text-color="white"
+            size="1.5rem"
+          >
           </q-avatar>
         </q-item-section>
         <q-item-section>
diff --git a/Services/client/src/components/TreeExplorer.vue b/Services/client/src/components/TreeExplorer.vue
index 5f39987..ab87b95 100644
--- a/Services/client/src/components/TreeExplorer.vue
+++ b/Services/client/src/components/TreeExplorer.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
 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 useStorage from '@/stores/storage'
 
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { isFilePreview } = storeToRefs(useFileInfoStore())
-const { getFolder } = useTreeDataStore()
+const store = useStorage()
 
 const props = withDefaults(
   defineProps<{
-    data: TreeDataFolder[]
-    level: number
+    data: typeof store.tree
+    level?: number
   }>(),
   {
-    level: 0,
+    level: 1,
   },
 )
 </script>
 
 <template>
   <div>
-    <q-list v-for="folder in data" class="rounded-borders">
+    <q-list v-for="v in data" class="rounded-borders">
       <q-expansion-item
         @click="
           () => {
-            getFolder(folder.pathname, false)
+            store.goto(v.pathname)
             isSearch = false
             isFilePreview = false
           }
@@ -40,13 +40,12 @@ const props = withDefaults(
               ? 'inbox'
               : 'o_folder_open'
         "
-        :label="folder.name"
-        class="text-overflow-handle"
-        v-model="folder.status"
+        :label="v.name"
+        class="text-overflow-handle active"
       >
         <tree-explorer
-          v-if="folder.folder"
-          :data="folder.folder"
+          v-if="v.folder"
+          :data="v.folder"
           :level="props.level + 1"
         />
       </q-expansion-item>
@@ -55,7 +54,7 @@ const props = withDefaults(
 </template>
 
 <style lang="scss" scoped>
-:deep(.q-item[aria-expanded='true']) {
+.active :deep(.q-item[aria-expanded='true']) {
   color: $primary;
 }
 
diff --git a/Services/client/src/modules/01_user/components/FileDownload.vue b/Services/client/src/modules/01_user/components/FileDownload.vue
index 1320c9c..8acc2c6 100644
--- a/Services/client/src/modules/01_user/components/FileDownload.vue
+++ b/Services/client/src/modules/01_user/components/FileDownload.vue
@@ -3,7 +3,7 @@ import axios from 'axios'
 import { storeToRefs } from 'pinia'
 import axiosClient from '@/services/HttpService'
 
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 import { useFileInfoStore } from '@/stores/file-info-data'
 
 import FileIcon from '@/components/FileIcon.vue'
@@ -25,7 +25,7 @@ async function downloadSubmit(path: string | undefined) {
       formatPath = `cabinet/${cabinet}/drawer/${drawer}/folder/${folder}/subfolder/${subfolder}/file/${file}`
     }
 
-    const res = await axiosClient.get<EhrFile & { download: string }>(
+    const res = await axiosClient.get<StorageFile & { download: string }>(
       `${import.meta.env.VITE_API_ENDPOINT}${formatPath}`,
     )
     await axios
diff --git a/Services/client/src/modules/01_user/components/SearchBar.vue b/Services/client/src/modules/01_user/components/SearchBar.vue
index 6a53141..17841e7 100644
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/Services/client/src/modules/01_user/components/SearchBar.vue
@@ -4,7 +4,7 @@ import { storeToRefs } from 'pinia'
 import axiosClient from '@/services/HttpService'
 import mime from 'mime'
 
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useLoader } from '@/stores/loader'
 
@@ -92,7 +92,7 @@ async function searchSubmit() {
 
     try {
       loaderStore.show()
-      const res = await axiosClient.post<EhrFile[]>(
+      const res = await axiosClient.post<StorageFile[]>(
         `${import.meta.env.VITE_API_ENDPOINT}/search`,
         submitSearchData.value,
       )
diff --git a/Services/client/src/services/HttpService.ts b/Services/client/src/services/HttpService.ts
index 7839276..de912b3 100644
--- a/Services/client/src/services/HttpService.ts
+++ b/Services/client/src/services/HttpService.ts
@@ -2,8 +2,6 @@ import axios from 'axios'
 import { getToken } from './KeyCloakService'
 import { useErrorStore } from '@/stores/error'
 
-const error = useErrorStore()
-
 const instance = axios.create()
 
 instance.interceptors.request.use(async (config) => {
@@ -14,6 +12,7 @@ instance.interceptors.request.use(async (config) => {
 instance.interceptors.response.use(
   (res) => res,
   (err) => {
+    const error = useErrorStore()
     const status = err.response.status
     const data = err.response.data
 
diff --git a/Services/client/src/services/KeyCloakService.ts b/Services/client/src/services/KeyCloakService.ts
index 8c7ce11..dfa2662 100644
--- a/Services/client/src/services/KeyCloakService.ts
+++ b/Services/client/src/services/KeyCloakService.ts
@@ -2,15 +2,20 @@ import Keycloak from 'keycloak-js'
 
 const keycloak = new Keycloak('/keycloak.json')
 
-export async function login(cb?: (...args: any[]) => void) {
-  const auth = await keycloak
-    .init({
-      onLoad: 'login-required',
-      responseMode: 'query',
-      checkLoginIframe: false,
-    })
-    .catch((e) => console.dir(e))
+let init = false
 
+export async function login(cb?: (...args: any[]) => void) {
+  const auth = !init
+    ? await keycloak
+        .init({
+          onLoad: 'login-required',
+          responseMode: 'query',
+          checkLoginIframe: false,
+        })
+        .catch((e) => console.dir(e))
+    : await keycloak.login().catch((e) => console.dir(e))
+
+  if (auth) init = true
   if (auth && cb) cb()
 }
 
diff --git a/Services/client/src/stores/file-info-data.ts b/Services/client/src/stores/file-info-data.ts
index f030f9f..6729ee9 100644
--- a/Services/client/src/stores/file-info-data.ts
+++ b/Services/client/src/stores/file-info-data.ts
@@ -2,19 +2,19 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import mime from 'mime'
 
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 
 export interface MimeMap {
   [key: string]: { icon: string; color: string }
 }
-export interface TypeSetting {
+export interface IconMap {
   [key: string]: { icon: string; color: string }
 }
 
 export const useFileInfoStore = defineStore('info', () => {
-  const fileInfo = ref<EhrFile>()
   const isFilePreview = ref<Boolean>(false)
-  const fileIcon: TypeSetting = {
+  const fileInfo = ref<StorageFile>()
+  const fileIcon: IconMap = {
     word: { icon: 'mdi-file-word-outline', color: 'blue-11' },
     excel: { icon: 'mdi-file-excel-outline', color: 'green-4' },
     powerpoint: { icon: 'mdi-file-powerpoint-outline', color: 'orange-4' },
@@ -23,103 +23,55 @@ export const useFileInfoStore = defineStore('info', () => {
     image: { icon: 'mdi-file-image-outline', color: 'blue-11' },
   }
   const mimeFileMapping: MimeMap = {
-    'application/msword': {
-      ...fileIcon.word,
-    },
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
-      ...fileIcon.word,
-    },
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
-      ...fileIcon.word,
-    },
-    'application/vnd.ms-word.document.macroEnabled.12': {
-      ...fileIcon.word,
-    },
-    'application/vnd.ms-word.template.macroEnabled.12': {
-      ...fileIcon.word,
-    },
-
-    'application/vnd.ms-excel': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.template': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.sheet.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.template.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.addin.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-    'application/vnd.ms-excel.sheet.binary.macroEnabled.12': {
-      ...fileIcon.excel,
-    },
-
-    'application/vnd.ms-powerpoint': {
-      ...fileIcon.powerpoint,
-    },
+    'application/msword': fileIcon.word,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      fileIcon.word,
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.template':
+      fileIcon.word,
+    'application/vnd.ms-word.document.macroEnabled.12': fileIcon.word,
+    'application/vnd.ms-word.template.macroEnabled.12': fileIcon.word,
+    'application/vnd.ms-excel': fileIcon.excel,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      fileIcon.excel,
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.template':
+      fileIcon.excel,
+    'application/vnd.ms-excel.sheet.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-excel.template.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-excel.addin.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-excel.sheet.binary.macroEnabled.12': fileIcon.excel,
+    'application/vnd.ms-powerpoint': fileIcon.powerpoint,
     'application/vnd.openxmlformats-officedocument.presentationml.presentation':
-      {
-        ...fileIcon.powerpoint,
-      },
-    'application/vnd.openxmlformats-officedocument.presentationml.template': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.openxmlformats-officedocument.presentationml.slideshow': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.addin.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.presentation.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.template.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-    'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': {
-      ...fileIcon.powerpoint,
-    },
-
-    'application/pdf': {
-      ...fileIcon.pdf,
-    },
-
-    'text/plain': {
-      ...fileIcon.txt,
-    },
-
-    'image/png': {
-      ...fileIcon.image,
-    },
-    'image/jpeg': {
-      ...fileIcon.image,
-    },
+      fileIcon.powerpoint,
+    'application/vnd.openxmlformats-officedocument.presentationml.template':
+      fileIcon.powerpoint,
+    'application/vnd.openxmlformats-officedocument.presentationml.slideshow':
+      fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.addin.macroEnabled.12': fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.presentation.macroEnabled.12':
+      fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.template.macroEnabled.12':
+      fileIcon.powerpoint,
+    'application/vnd.ms-powerpoint.slideshow.macroEnabled.12':
+      fileIcon.powerpoint,
+    'application/pdf': fileIcon.pdf,
+    'text/plain': fileIcon.txt,
+    'image/png': fileIcon.image,
+    'image/jpeg': fileIcon.image,
   }
 
   function getType(
     mimeType: string | undefined,
     fileName: string | undefined,
   ): string {
-    if (mimeType === undefined) {
-      return 'ไม่ทราบประเภท'
+    if (mimeType === undefined) return 'ไม่ทราบประเภท'
+
+    const extension = mime.getExtension(mimeType)
+
+    if (extension) return '.' + extension
+    if (fileName && fileName.includes('.')) {
+      return fileName.substring(fileName.lastIndexOf('.'))
     }
 
-    const extFomMime = mime.getExtension(mimeType)
-    if (extFomMime) {
-      return '.' + extFomMime
-    }
-    if (fileName && fileName.includes('.')) {
-      const dotIndex = fileName.lastIndexOf('.')
-      const extension = fileName.substring(dotIndex)
-      return extension
-    }
     return 'ไม่ทราบประเภท'
   }
 
@@ -136,20 +88,19 @@ export const useFileInfoStore = defineStore('info', () => {
   }
 
   function getSize(size: string | undefined): string {
-    if (size === undefined) {
-      return 'ไม่ทราบขนาด'
-    }
+    if (size === undefined) return 'ไม่ทราบขนาด'
+
     const units = ['B', 'KB', 'MB', 'GB', 'TB']
+
     let i = 0
     let sizeNumber = parseFloat(size)
-    while (sizeNumber >= 1024 && i < units.length - 1) {
+    while (sizeNumber >= 1024 && i++ < units.length - 1) {
       sizeNumber /= 1024
-      i++
     }
     return sizeNumber.toFixed(2) + ' ' + units[i]
   }
 
-  function getFileInfo(data: EhrFile) {
+  function getFileInfo(data: StorageFile) {
     isFilePreview.value = true
     fileInfo.value = data
   }
diff --git a/Services/client/src/stores/searched-data.ts b/Services/client/src/stores/searched-data.ts
index 371f406..93d088a 100644
--- a/Services/client/src/stores/searched-data.ts
+++ b/Services/client/src/stores/searched-data.ts
@@ -1,45 +1,45 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { EhrFile } from '@/stores/tree-data'
+import type { StorageFile } from '@/stores/storage'
 
-export interface searchData {
+export interface Search {
   field: string
   value: string
 }
 
-export interface advSearchDataRow {
+export interface AdvancedSearch {
   op: 'AND' | 'OR'
   field: 'title' | 'keyword'
   value: string
 }
 
-export interface advSearchDataField {
+export interface AdvancedSearchFields {
   keyword: string[]
   description: string
 }
 
 export const useSearchDataStore = defineStore('searched', () => {
-  const foundFile = ref<EhrFile[]>([])
+  const foundFile = ref<StorageFile[]>([])
   const isAdvSearchCall = ref<boolean>(false)
   const isSearch = ref<Boolean>(false)
   const isActFoundFile = ref<Boolean>(false)
-  const searchData = ref<searchData>({
+  const searchData = ref<Search>({
     field: 'title',
     value: '',
   })
-  const advSearchDataRow = ref<advSearchDataRow[]>([
+  const advSearchDataRow = ref<AdvancedSearch[]>([
     {
       op: 'AND',
       field: 'title',
       value: '',
     },
   ])
-  const advSearchDataField = ref<advSearchDataField>({
+  const advSearchDataField = ref<AdvancedSearchFields>({
     keyword: [],
     description: '',
   })
 
-  async function getFoundFile(data: EhrFile[]) {
+  async function getFoundFile(data: StorageFile[]) {
     foundFile.value = data
   }
 
diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
new file mode 100644
index 0000000..ee6d2b8
--- /dev/null
+++ b/Services/client/src/stores/storage.ts
@@ -0,0 +1,362 @@
+import { computed, reactive, ref } from 'vue'
+import { defineStore } from 'pinia'
+import { io } from 'socket.io-client'
+import axios from 'axios'
+
+import api from '@/services/HttpService'
+
+import { useLoader } from './loader'
+
+type Path = string
+
+export interface StorageFolder {
+  pathname: string
+  name: string
+  createdAt: string
+  createdBy: string
+}
+
+export interface StorageFile {
+  pathname: string
+  path: string
+  fileName: string
+  fileSize: string
+  fileType: string
+  title: string
+  description: string
+  category: string[]
+  keyword: string[]
+  updatedAt: string
+  updatedBy: string
+  createdAt: string
+  createdBy: string
+}
+
+export interface Structure extends StorageFolder {
+  folder: Structure[]
+  file: StorageFile[]
+}
+
+type Tree = Structure[]
+
+function constructUrl(path: string | string[], append = true) {
+  const arr = Array.isArray(path) ? path : path.split('/').filter(Boolean)
+  const url =
+    import.meta.env.VITE_API_ENDPOINT +
+    arr.reduce<string>((a, v, i) => {
+      switch (String(i)) {
+        case '0':
+          return `cabinet/${v}`
+        case '1':
+          return `${a}/drawer/${v}`
+        case '2':
+          return `${a}/folder/${v}`
+        case '3':
+          return `${a}/subfolder/${v}`
+        default:
+          return a
+      }
+    }, '')
+  return append
+    ? url + ['cabinet', '/drawer', '/folder', '/subfolder'][arr.length]
+    : url
+}
+
+function consistantPath(path: string | string[]) {
+  return Array.isArray(path)
+    ? path.join('/') + '/'
+    : path.split('/').filter(Boolean).join('/') + '/'
+}
+
+const useStorage = defineStore('storageStore', () => {
+  const loader = useLoader()
+  const init = ref<boolean>(false)
+  const folder = ref<Record<Path, StorageFolder[]>>({})
+  const file = ref<Record<Path, StorageFile[]>>({})
+  const tree = computed(() => {
+    let structure: Tree = []
+
+    // parse list of folder and list of file into tree
+    Object.entries(folder.value).forEach(([key, value]) => {
+      const arr = key.split('/').filter(Boolean)
+
+      // Once run then it is init
+      if (!init.value) init.value = true
+
+      if (arr.length === 0) {
+        structure = value.map((v) => ({
+          pathname: v.pathname,
+          name: v.name,
+          createdAt: v.createdAt,
+          createdBy: v.createdBy,
+          folder: [],
+          file: [],
+        }))
+      } else {
+        let current: Structure | undefined
+
+        // traverse into tree
+        arr.forEach((v, i) => {
+          current =
+            i === 0
+              ? structure.find((x) => x.name === v)
+              : current?.folder.find((x) => x.name === v)
+        })
+
+        // set data in tree (object is references to the same object)
+        if (current) {
+          current.folder = value.map((v) => ({
+            pathname: v.pathname,
+            name: v.name,
+            createdAt: v.createdAt,
+            createdBy: v.createdBy,
+            folder: [],
+            file: [],
+          }))
+          current.file = file.value[key] ?? []
+        }
+      }
+    })
+
+    console.log(structure, folder.value, file.value)
+    return structure
+  })
+  const currentInfo = reactive<{
+    path: string
+    dept: number
+  }>({
+    path: '',
+    dept: 0,
+  })
+
+  if (!init.value) goto(sessionStorage.getItem('path') || '')
+
+  async function getStorage(path: string = '') {
+    const arr = path.split('/').filter(Boolean)
+
+    if (arr.length >= 4) return // this system does not have more than 4 level
+
+    const res = await api.get<(typeof folder.value)[string]>(constructUrl(arr))
+    if (res.status === 200 && res.data && Array.isArray(res.data))
+      folder.value[consistantPath(path)] = res.data.sort((a, b) =>
+        a.pathname.localeCompare(b.pathname),
+      )
+  }
+
+  async function getStorageFile(path: string = '') {
+    const arr = path.split('/').filter(Boolean)
+
+    if (arr.length < 3) return // file in this system only lives in level 3 and 4
+
+    const res = await api.get<(typeof file.value)[string]>(
+      constructUrl(arr, false) + '/file',
+    )
+    if (res.status === 200 && res.data && Array.isArray(res.data))
+      file.value[consistantPath(path)] = res.data.sort((a, b) =>
+        a.pathname.localeCompare(b.pathname),
+      )
+  }
+
+  async function goto(path: string = '', force = false) {
+    loader.show()
+    const arr = path.split('/').filter(Boolean)
+
+    // get all parent to the root structure
+    // this will also triggher init structure as it get root structure
+    for (let i = 0; i < arr.length; i++) {
+      const current = consistantPath(arr.slice(0, i - arr.length))
+      if (!folder.value[current] || force) await getStorage(current)
+    }
+
+    path = consistantPath(path)
+
+    // only get this path once, after that will get from socket.io-client instead
+    if (!folder.value[path] || force) await getStorage(path)
+    if (!file.value[path] || force) await getStorageFile(path)
+
+    currentInfo.path = path
+    currentInfo.dept = path.split('/').filter(Boolean).length
+    sessionStorage.setItem('path', path)
+    loader.hide()
+  }
+
+  async function gotoParent() {
+    const arr = currentInfo.path.split('/').filter(Boolean)
+    await goto(consistantPath(arr.slice(0, -1)))
+  }
+
+  // socket.io zone
+  const socket = io('http://localhost:25565')
+
+  socket.on('connect', () => console.info('Socket.io connected.'))
+  socket.on('disconnect', () => console.info('Socket.io disconnected.'))
+  socket.on('CreateFolder', (data: { pathname: string }) => {
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = consistantPath(arr.slice(0, -1))
+
+    if (folder.value[path]) {
+      folder.value[path].push({
+        pathname: data.pathname,
+        name: arr[arr.length - 1],
+        createdAt: 'n/a',
+        createdBy: 'n/a',
+      })
+      folder.value[path].sort((a, b) => a.pathname.localeCompare(b.pathname))
+    }
+  })
+  // NOTE:
+  // API planned to make new endpoint that can move and rename in one go.
+  // Need to change if api handle move and rename file instead of just edit.
+  socket.on('EditFolder', (data: { from: string; to: string }) => {
+    const src = data.from.split('/').filter(Boolean)
+    const dst = data.to.split('/').filter(Boolean)
+    const path = consistantPath(src.slice(0, -1))
+
+    if (folder.value[path]) {
+      const val = folder.value[path].find((v) => v.pathname === data.from)
+
+      if (val) {
+        val.pathname = data.to
+        val.name = dst[dst.length - 1]
+      }
+    }
+
+    const regex = new RegExp(`^${data.from}`)
+
+    for (let key in folder.value) {
+      if (key.startsWith(data.from)) {
+        folder.value[key.replace(regex, data.to)] = folder.value[key].map(
+          (v) => {
+            v.pathname = v.pathname.replace(regex, data.to)
+            return v
+          },
+        )
+        delete folder.value[key]
+      }
+    }
+    for (let key in file.value) {
+      if (key.startsWith(data.from)) {
+        file.value[key.replace(regex, data.to)] = file.value[key].map((v) => {
+          v.pathname = v.pathname.replace(regex, data.to)
+          return v
+        })
+        delete file.value[key]
+      }
+    }
+  })
+  socket.on('DeleteFolder', (data: { pathname: string }) => {
+    for (let key in folder.value) {
+      if (key.startsWith(data.pathname)) {
+        delete folder.value[key]
+      }
+    }
+
+    const arr = data.pathname.split('/').filter(Boolean)
+    const path = consistantPath(arr.slice(0, -1))
+
+    if (folder.value[path]) {
+      folder.value[path] = folder.value[path].filter(
+        (v) => v.pathname !== data.pathname,
+      )
+    }
+  })
+
+  async function createFolder(name: string, path: string = currentInfo.path) {
+    loader.show()
+    await api.post(constructUrl(path, true), { name })
+    loader.hide()
+  }
+  async function editFolder(name: string, path: string) {
+    loader.show()
+    await api.put(constructUrl(path, false), { name })
+    loader.hide()
+  }
+  async function deleteFolder(path: string) {
+    loader.show()
+    await api.delete(constructUrl(path, false))
+    loader.hide()
+  }
+
+  type FileMetadata = {
+    title?: string
+    description?: string
+    keyword?: string[]
+    category?: string[]
+  }
+  async function createFile(
+    file: File,
+    data: FileMetadata,
+    path: string = currentInfo.path,
+  ) {
+    if (path.split('/').filter(Boolean).length < 3) return // the system only allow file to live in level 3 and 4
+
+    loader.show()
+    const res = await api.post(constructUrl(path, false) + '/file', {
+      file: file.name,
+      ...data,
+    })
+    if (res && res.status === 201 && res.data && res.data.upload) {
+      await axios
+        .put(res.data.upload, file, {
+          headers: { 'Content-Type': file.type },
+          onUploadProgress: (e) => console.log(e),
+        })
+        .catch((e) => console.error(e))
+    }
+    loader.hide()
+  }
+  async function updateFile(pathname: string, data: FileMetadata, file?: File) {
+    const arr = pathname.split('/')
+
+    if (arr.length < 4) return // the system only allow file to live in level 3 and 4
+
+    loader.show()
+    const res = await api.patch(
+      constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
+      { file: file?.name, ...data },
+    )
+    if (res && res.status === 201 && res.data && res.data.upload) {
+      await axios
+        .put(res.data.upload, file, {
+          headers: { 'Content-Type': file?.type },
+          onUploadProgress: (e) => console.log(e),
+        })
+        .catch((e) => console.error(e))
+    }
+    loader.hide()
+  }
+  async function deleteFile(pathname: string) {
+    const arr = pathname.split('/')
+
+    if (arr.length < 4) return // the system only allow file to live in level 3 and 4
+
+    loader.show()
+    await api.delete(
+      constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
+    )
+    loader.hide()
+  }
+
+  return {
+    // information
+    currentInfo,
+    folder,
+    file,
+    tree,
+    // fetch
+    getStorage,
+    getStorageFile,
+    // traverse
+    goto,
+    gotoParent,
+    // operation
+    createFolder,
+    editFolder,
+    deleteFolder,
+    createFile,
+    updateFile,
+    deleteFile,
+  }
+})
+
+export default useStorage
diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts
index a55f60c..3f8e624 100644
--- a/Services/client/src/stores/tree-data.ts
+++ b/Services/client/src/stores/tree-data.ts
@@ -45,8 +45,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
   const currentFile = ref<EhrFile[]>([])
   const currentPath = ref<string>('')
   const currentDept = ref<number>(0)
-  const listDataFolder = ref<TreeDataFolder[]>()
-  const listDataFile = ref<EhrFile[]>()
+  const listDataFolder = ref<TreeDataFolder[]>([])
+  const listDataFile = ref<EhrFile[]>([])
   async function getCabinet() {
     const res = await axiosClient.get<EhrFolder[]>(`${apiEndpoint}cabinet`)
 
@@ -242,7 +242,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
   async function uploadFile(
     pathname: string,
     file: File,
-    metadata: {
+    newData: {
       title: string
       description: string
       keyword: string[]
@@ -266,7 +266,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       `${apiEndpoint}${requestPath}`,
       {
         file: file.name,
-        ...metadata,
+        ...newData,
       },
     )
 
@@ -290,7 +290,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
 
   async function updateFile(
     pathname: string,
-    metadata: {
+    newData: {
       title: string
       description: string
       keyword: string[]
@@ -311,7 +311,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
 
     const res = await axiosClient.patch<{ upload: string }>(
       `${apiEndpoint}${requestPath}`,
-      { file: file?.name, ...metadata },
+      { file: file?.name, ...newData },
     )
 
     if (res && res.data.upload) {
@@ -385,6 +385,127 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     listDataFile.value = currentFile.value
   }
 
+  function updateEditFolder(
+    data: TreeDataFolder[],
+    targetPathname: string,
+
+    newPath: string,
+  ): TreeDataFolder[] {
+    return data.map((item) => {
+      if (item.pathname === targetPathname) {
+        const pathArray: string[] = newPath.split('/').filter(Boolean)
+        item.pathname = newPath
+        item.name = pathArray[pathArray.length - 1]
+      }
+
+      if (item.folder) {
+        return {
+          ...item,
+          folder: updateEditFolder(item.folder, targetPathname, newPath),
+        }
+      }
+
+      return item
+    })
+  }
+
+  function updateDeleteFolder(
+    data: TreeDataFolder[],
+    targetPathname: string,
+  ): TreeDataFolder[] {
+    return data
+      .filter((item) => item.pathname !== targetPathname)
+      .map((item) => {
+        if (item.folder) {
+          item.folder = updateDeleteFolder(item.folder, targetPathname)
+          if (item.folder.length === 0) item.folder = []
+        }
+
+        return item
+      })
+  }
+
+  function updateCreateFolder(
+    data: TreeDataFolder[],
+    pathArrayLength: number,
+    pathfolder: string,
+    targetPathname: string,
+    newData: TreeDataFolder,
+  ): TreeDataFolder[] {
+    let updatedData: TreeDataFolder[] = []
+
+    if (pathArrayLength === 1) {
+      updatedData.push(newData)
+    }
+
+    for (const item of data) {
+      if (item.pathname === pathfolder) {
+        updatedData.push({
+          ...item,
+          folder: [...(item.folder || []), newData],
+        })
+      } else {
+        updatedData.push({
+          ...item,
+          folder: item.folder
+            ? updateCreateFolder(
+                item.folder,
+                pathArrayLength,
+                pathfolder,
+                targetPathname,
+                newData,
+              )
+            : [],
+        })
+      }
+    }
+
+    return updatedData
+  }
+
+  function updateDeleteFile(
+    data: EhrFile[],
+    targetPathname: string,
+  ): EhrFile[] {
+    return data.filter((item) => item.pathname !== targetPathname)
+  }
+
+  function updateNewFile(
+    data: EhrFile[],
+    targetPathname: string,
+    newData: EhrFile,
+  ): EhrFile[] {
+    let isUpdated = false
+
+    const updatedData = data.map((item) => {
+      if (item.pathname === targetPathname) {
+        isUpdated = true
+
+        return {
+          ...item,
+          pathname: newData.pathname,
+          fileName: newData.fileName,
+          fileSize: newData.fileSize,
+          fileType: newData.fileType,
+          title: newData.title,
+          description: newData.description,
+          category: newData.category,
+          keyword: newData.keyword,
+          updatedAt: newData.updatedAt,
+          updatedBy: newData.updatedBy,
+          createdAt: newData.createdAt,
+          createdBy: newData.createdBy,
+        }
+      }
+      return item
+    })
+    if (!isUpdated) {
+      updatedData.push(newData)
+    }
+
+    return updatedData
+  }
+
   return {
     data,
     currentFolder,
@@ -405,5 +526,10 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     checkFile,
     checkFileName,
     refaceFile,
+    updateEditFolder,
+    updateDeleteFolder,
+    updateCreateFolder,
+    updateDeleteFile,
+    updateNewFile,
   }
 })
diff --git a/Services/client/src/views/MainLayout.vue b/Services/client/src/views/MainLayout.vue
index d9246cb..148e316 100644
--- a/Services/client/src/views/MainLayout.vue
+++ b/Services/client/src/views/MainLayout.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { useLoader } from '@/stores/loader'
 import { storeToRefs } from 'pinia'
+
+import { useLoader } from '@/stores/loader'
+import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
+import useStorage from '@/stores/storage'
+
 import profile from '@/components/Profile.vue'
-import { useTreeDataStore } from '@/stores/tree-data'
-import { useSearchDataStore } from '@/stores/searched-data';
-import { useFileInfoStore } from '@/stores/file-info-data';
-const { currentPath } = storeToRefs(useTreeDataStore())
+
 const { isFilePreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
-const { getFolder } = useTreeDataStore()
-const loaderStore = useLoader()
-const { loader } = storeToRefs(loaderStore)
+const { loader } = storeToRefs(useLoader())
+const { goto } = useStorage()
 </script>
 
 <template>
@@ -22,20 +23,14 @@ const { loader } = storeToRefs(loaderStore)
           src="@/assets/logo-edm.png"
           spinner-color="white"
           style="height: 45px; max-width: 45px"
-          @click="
-            () => {
-              currentPath = ''
-              getFolder(currentPath)
-            }
-          "
+          @click="() => goto()"
         />
         <div
           class="column q-px-md pointer"
           id="app-toolbar-title"
           @click="
             () => {
-              currentPath = ''
-              getFolder(currentPath)
+              goto()
               isSearch = false
               isFilePreview = false
             }
diff --git a/Services/server/src/controllers/cabinetController.ts b/Services/server/src/controllers/cabinetController.ts
index 8d20f3f..c9b541c 100644
--- a/Services/server/src/controllers/cabinetController.ts
+++ b/Services/server/src/controllers/cabinetController.ts
@@ -78,17 +78,23 @@ export class CabinetController extends Controller {
       name: string;
     },
   ) {
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
+
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }
diff --git a/Services/server/src/controllers/drawerController.ts b/Services/server/src/controllers/drawerController.ts
index 1311697..a761fd5 100644
--- a/Services/server/src/controllers/drawerController.ts
+++ b/Services/server/src/controllers/drawerController.ts
@@ -93,17 +93,23 @@ export class DrawerController extends Controller {
       throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
     }
 
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
+
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }
diff --git a/Services/server/src/controllers/fileController.ts b/Services/server/src/controllers/fileController.ts
index 6baec35..1535974 100644
--- a/Services/server/src/controllers/fileController.ts
+++ b/Services/server/src/controllers/fileController.ts
@@ -23,6 +23,7 @@ import { StorageFile } from "../interfaces/storage-fs";
 import HttpError from "../interfaces/http-error";
 
 import { copyCond, pathExist, replaceIllegalChars } from "../utils/minio";
+import { getInstance } from "../lib/websocket";
 
 const DEFAULT_BUCKET = process.env.MINIO_BUCKET;
 const DEFAULT_INDEX = process.env.ELASTICSEARCH_INDEX;
@@ -200,6 +201,9 @@ export class FileController extends Controller {
       refresh: "wait_for",
     });
 
+    const io = getInstance();
+    io?.emit("FileUploadRequest", metadata);
+
     return {
       ...body,
       createdAt: metadata.createdAt,
@@ -288,6 +292,10 @@ export class FileController extends Controller {
 
         if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
           const { _index: index, _id: id } = search.hits.hits[0];
+          const meta = {
+            updatedAt: new Date().toISOString(),
+            updatedBy: request.user.preferred_username ?? "n/a",
+          };
           await esClient
             .update({
               index,
@@ -297,12 +305,24 @@ export class FileController extends Controller {
                 pathname: destination,
                 path: basePath,
                 fileName: replaceIllegalChars(file),
-                updatedAt: new Date().toISOString(),
-                updatedBy: request.user.preferred_username ?? "n/a",
+                ...meta,
               },
               refresh: "wait_for",
             })
             .then(() => minioClient.removeObject(DEFAULT_BUCKET!, pathname));
+
+          const io = getInstance();
+          io?.emit("FileUpdateMove", {
+            from: search.hits.hits[0]._source,
+            to: {
+              ...search.hits.hits[0]._source,
+              ...metadata,
+              pathname: destination,
+              path: basePath,
+              fileName: replaceIllegalChars(file),
+              ...meta,
+            },
+          });
         } else {
           await minioClient.removeObject(DEFAULT_BUCKET!, pathname);
         }
@@ -317,16 +337,25 @@ export class FileController extends Controller {
 
       if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
         const { _index: index, _id: id } = search.hits.hits[0];
+        const meta = {
+          updatedAt: new Date().toISOString(),
+          updatedBy: request.user.preferred_username ?? "n/a",
+        };
         await esClient.update({
           index,
           id,
-          doc: {
-            ...metadata,
-            updatedAt: new Date().toISOString(),
-            updatedBy: request.user.preferred_username ?? "n/a",
-          },
+          doc: { ...metadata, ...meta },
           refresh: "wait_for",
         });
+
+        const updated: StorageFile = {
+          ...search.hits.hits[0]._source,
+          ...metadata,
+          ...meta,
+        };
+
+        const io = getInstance();
+        io?.emit("FileUpdate", updated);
       }
     }
 
diff --git a/Services/server/src/controllers/folderController.ts b/Services/server/src/controllers/folderController.ts
index 06bd264..358cb23 100644
--- a/Services/server/src/controllers/folderController.ts
+++ b/Services/server/src/controllers/folderController.ts
@@ -98,17 +98,23 @@ export class FolderController extends Controller {
       throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
     }
 
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
+
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }
@@ -185,7 +191,7 @@ export class FolderController extends Controller {
 
     const io = getInstance();
     io?.emit("EditFolder", {
-      from: `${cabinetName}/${drawerName}/${folderName}`,
+      from: `${cabinetName}/${drawerName}/${folderName}/`,
       to: `${cabinetName}/${drawerName}/${replaceIllegalChars(body.name)}/`,
     });
 
diff --git a/Services/server/src/controllers/subFolderController.ts b/Services/server/src/controllers/subFolderController.ts
index 1454aa6..8e02751 100644
--- a/Services/server/src/controllers/subFolderController.ts
+++ b/Services/server/src/controllers/subFolderController.ts
@@ -96,18 +96,23 @@ export class SubFolderController extends Controller {
     if (!(await pathExist(DEFAULT_BUCKET!, basePath))) {
       throw new HttpError(HttpStatusCode.NOT_FOUND, "ไม่พบตำแหน่งที่ต้องการสร้างลิ้นชัก");
     }
+    const meta = {
+      createdAt: new Date().toISOString(),
+      createdBy: request.user.preferred_username,
+    };
 
     const created = await minioClient
-      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, {
-        createdAt: new Date().toISOString(),
-        createdBy: request.user.preferred_username,
-      })
+      .putObject(DEFAULT_BUCKET!, `${basePath}${replaceIllegalChars(body.name)}/.keep`, "", 0, meta)
       .catch((e) => console.error(e));
 
     if (!created) throw new Error("เกิดข้อผิดพลาดกับระบบจัดการไฟล์");
 
     const io = getInstance();
-    io?.emit("CreateFolder", { pathname: `${basePath}${replaceIllegalChars(body.name)}/` });
+    io?.emit("CreateFolder", {
+      pathname: `${basePath}${replaceIllegalChars(body.name)}/`,
+      name: replaceIllegalChars(body.name),
+      ...meta,
+    });
 
     return this.setStatus(HttpStatusCode.CREATED);
   }
diff --git a/Services/server/src/controllers/subFolderFileController.ts b/Services/server/src/controllers/subFolderFileController.ts
index 717a87e..b66aca3 100644
--- a/Services/server/src/controllers/subFolderFileController.ts
+++ b/Services/server/src/controllers/subFolderFileController.ts
@@ -23,6 +23,7 @@ import { StorageFile } from "../interfaces/storage-fs";
 import HttpError from "../interfaces/http-error";
 
 import { copyCond, pathExist, replaceIllegalChars } from "../utils/minio";
+import { getInstance } from "../lib/websocket";
 
 const DEFAULT_BUCKET = process.env.MINIO_BUCKET;
 const DEFAULT_INDEX = process.env.ELASTICSEARCH_INDEX;
@@ -206,6 +207,9 @@ export class SubFolderFileController extends Controller {
       refresh: "wait_for",
     });
 
+    const io = getInstance();
+    io?.emit("FileUploadRequest", metadata);
+
     return {
       ...body,
       createdAt: metadata.createdAt,
@@ -292,7 +296,10 @@ export class SubFolderFileController extends Controller {
             query: { match: { pathname } },
           })
           .catch((e) => console.error(e));
-
+        const meta = {
+          updatedAt: new Date().toISOString(),
+          updatedBy: request.user.preferred_username ?? "n/a",
+        };
         if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
           const { _index: index, _id: id } = search.hits.hits[0];
           await esClient
@@ -304,12 +311,24 @@ export class SubFolderFileController extends Controller {
                 pathname: destination,
                 path: basePath,
                 fileName: replaceIllegalChars(file),
-                updatedAt: new Date().toISOString(),
-                updatedBy: request.user.preferred_username ?? "n/a",
+                ...meta,
               },
               refresh: "wait_for",
             })
             .then(() => minioClient.removeObject(DEFAULT_BUCKET!, pathname));
+
+          const io = getInstance();
+          io?.emit("FileUpdateMove", {
+            from: search.hits.hits[0]._source,
+            to: {
+              ...search.hits.hits[0]._source,
+              ...metadata,
+              pathname: destination,
+              path: basePath,
+              fileName: replaceIllegalChars(file),
+              ...meta,
+            },
+          });
         } else {
           await minioClient.removeObject(DEFAULT_BUCKET!, pathname);
         }
@@ -324,6 +343,10 @@ export class SubFolderFileController extends Controller {
 
       if (search && search.hits.hits.length > 0 && search.hits.hits[0]._source) {
         const { _index: index, _id: id } = search.hits.hits[0];
+        const meta = {
+          updatedAt: new Date().toISOString(),
+          updatedBy: request.user.preferred_username ?? "n/a",
+        };
         await esClient.update({
           index,
           id,
@@ -334,6 +357,14 @@ export class SubFolderFileController extends Controller {
           },
           refresh: "wait_for",
         });
+        const updated: StorageFile = {
+          ...search.hits.hits[0]._source,
+          ...metadata,
+          ...meta,
+        };
+
+        const io = getInstance();
+        io?.emit("FileUpdate", updated);
       }
     }
 
diff --git a/Services/server/src/rabbitmq/handler.ts b/Services/server/src/rabbitmq/handler.ts
index 568596c..9d8b5c0 100644
--- a/Services/server/src/rabbitmq/handler.ts
+++ b/Services/server/src/rabbitmq/handler.ts
@@ -144,7 +144,7 @@ async function handleNotFoundRecord(
   if (!result) return false;
 
   const io = getInstance();
-  io?.emit("FileUpdate", metadata);
+  io?.emit("FileUpload", metadata);
 
   return true;
 }
@@ -170,7 +170,7 @@ async function handleFoundRecord(
   if (!result) return false;
 
   const io = getInstance();
-  io?.emit("FileUpdate", metadata);
+  io?.emit("FileUpload", metadata);
 
   return true;
 }