diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 4762cdf..f6d1174 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 import type { QTableProps } from 'quasar'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
+import api from '@/services/HttpService'
 
 import FileIcon from '@/components/FileIcon.vue'
 import DialogDelete from '@/components/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 storageStore = useStorage()
 const { folder, file, currentInfo } = storeToRefs(storageStore)
-const { goto, deleteFolder, deleteFile } = storageStore
+const { goto, deleteFolder, deleteFile, constructUrl } = storageStore
 
 const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
 
@@ -33,7 +33,14 @@ const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
 
+interface ApiResponse {
+  size: string
+}
+
 const deleteState = ref<boolean>(false)
+const open = ref<boolean>(false)
+const sizefolder = ref<string>()
+
 const deletePath = ref<string>('')
 const deleteTarget = ref<'deleteFolder' | 'deleteFile'>()
 const deleteMap = { deleteFolder, deleteFile }
@@ -50,6 +57,37 @@ function triggerFileDelete(pathname: string) {
   deleteState.value = !deleteState.value
 }
 
+function getSizeFolder(constructFolder: string) {
+  const src = constructFolder.split('/').filter(Boolean)
+  const path = src.join('/') + '/'
+  const res = async () => {
+    const response = await api.get(constructUrl(src, false) + '/size')
+    sizefolder.value = response.data.size
+  }
+
+  if (folder.value[currentInfo.value.path]) {
+    const idx = folder.value[currentInfo.value.path].findIndex(
+      (v) => v.pathname === path,
+    )
+
+    if (idx !== -1) {
+      res()
+      if (folder.value[currentInfo.value.path][idx].folderSize) {
+        if (
+          folder.value[currentInfo.value.path][idx].folderSize !=
+          sizefolder.value
+        ) {
+          folder.value[currentInfo.value.path][idx].folderSize =
+            sizefolder.value
+        }
+      } else {
+        folder.value[currentInfo.value.path][idx].folderSize = sizefolder.value
+      }
+    }
+    return getSize(folder.value[currentInfo.value.path][idx].folderSize)
+  }
+}
+
 const colFolder = [
   {
     name: 'name',
@@ -186,18 +224,23 @@ const onRowClick = ((_, row) => {
           <q-td class="justify-center">
             <div>
               <q-icon
-                @click.stop
+                @click.stop="
+                  () => {
+                    open = !open
+                  }
+                "
                 class="q-ma-sm"
                 name="o_info"
                 size="2em"
                 color="primary"
               />
               <q-tooltip
+                :delay="1000"
                 anchor="center left"
                 self="center right"
                 :offset="[5, 1]"
               >
-                {{ data.row.name }}
+                {{ getSizeFolder(data.row.pathname) }}
               </q-tooltip>
             </div>
             <div v-if="props.mode === 'admin'">
@@ -312,7 +355,6 @@ const onRowClick = ((_, row) => {
                     fileFormComponent?.triggerFileEdit(
                       data.row,
                       data.row.pathname,
-                      data.row.fileName,
                     )
                 "
                 id="listViewFileEdit"
diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index 4c7740c..bf80bc7 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -13,6 +13,7 @@ type Path = string
 export interface StorageFolder {
   pathname: string
   name: string
+  folderSize?: string
   createdAt: string
   createdBy: string
 }
@@ -58,6 +59,7 @@ function constructUrl(path: string | string[], append = true) {
           return a
       }
     }, '')
+
   return append
     ? url + ['cabinet', '/drawer', '/folder', '/subfolder'][arr.length]
     : url
@@ -137,7 +139,13 @@ const useStorage = defineStore('storageStore', () => {
 
     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))
+    const res = await api.post<(typeof folder.value)[string]>(
+      `${import.meta.env.VITE_API_ENDPOINT}storage/list`,
+      {
+        operation: 'folder',
+        path: 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),
@@ -149,8 +157,12 @@ const useStorage = defineStore('storageStore', () => {
 
     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',
+    const res = await api.post<(typeof file.value)[string]>(
+      `${import.meta.env.VITE_API_ENDPOINT}storage/list`,
+      {
+        operation: 'file',
+        path: arr,
+      },
     )
     if (res.status === 200 && res.data && Array.isArray(res.data))
       file.value[consistantPath(path)] = res.data.sort((a, b) =>
@@ -192,7 +204,7 @@ const useStorage = defineStore('storageStore', () => {
   socket.on('connect', () => console.info('Socket.io connected.'))
   socket.on('disconnect', () => console.info('Socket.io disconnected.'))
   socket.on(
-    'CreateFolder',
+    'FolderCreate',
     (data: {
       pathname: string
       name: string
@@ -222,7 +234,7 @@ const useStorage = defineStore('storageStore', () => {
   // 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 }) => {
+  socket.on('FolderMove', (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))
@@ -259,7 +271,7 @@ const useStorage = defineStore('storageStore', () => {
       }
     }
   })
-  socket.on('DeleteFolder', (data: { pathname: string }) => {
+  socket.on('FolderDelete', (data: { pathname: string }) => {
     for (let key in folder.value) {
       if (key.startsWith(data.pathname)) {
         delete folder.value[key]
@@ -315,20 +327,17 @@ const useStorage = defineStore('storageStore', () => {
       )
     }
   })
-  socket.on(
-    'FileUpdateMove',
-    (data: { from: StorageFile; to: StorageFile }) => {
-      const arr = data.from.pathname.split('/').filter(Boolean)
-      const path = consistantPath(arr.slice(0, -1))
+  socket.on('FileMove', (data: { from: StorageFile; to: StorageFile }) => {
+    const arr = data.from.pathname.split('/').filter(Boolean)
+    const path = consistantPath(arr.slice(0, -1))
 
-      if (file.value[path]) {
-        const idx = file.value[path].findIndex(
-          (v) => v.pathname === data.from.pathname,
-        )
-        if (idx !== -1) file.value[path][idx] = data.to
-      }
-    },
-  )
+    if (file.value[path]) {
+      const idx = file.value[path].findIndex(
+        (v) => v.pathname === data.from.pathname,
+      )
+      if (idx !== -1) file.value[path][idx] = data.to
+    }
+  })
   socket.on('FileUpdate', (data: StorageFile) => {
     const arr = data.pathname.split('/').filter(Boolean)
     const path = consistantPath(arr.slice(0, -1))
@@ -367,42 +376,67 @@ const useStorage = defineStore('storageStore', () => {
         msg: `พบชื่อ \"${name}\" ซ้ำในระบบ`,
       })
     } else {
-      await api.post(constructUrl(path, true), { name })
+      const arrayPath: string[] = path.split('/').filter(Boolean)
+      await api.post(`${import.meta.env.VITE_API_ENDPOINT}storage/folder`, {
+        path: arrayPath,
+        name: name,
+      })
     }
     loader.hide()
   }
   async function editFolder(name: string, path: string) {
     loader.show()
-    await api.put(constructUrl(path, false), { name })
+    const arrayPath: string[] = path.split('/').filter(Boolean)
+    const beforeName = arrayPath.pop()
+
+    await api.put(`${import.meta.env.VITE_API_ENDPOINT}storage/folder`, {
+      from: {
+        name: beforeName,
+        path: arrayPath,
+      },
+      to: {
+        name: name,
+        path: arrayPath,
+      },
+    })
     loader.hide()
   }
   async function deleteFolder(path: string) {
     loader.show()
-    await api.delete(constructUrl(path, false))
+    await api.delete<(typeof file.value)[string]>(
+      `${import.meta.env.VITE_API_ENDPOINT}storage/folder`,
+      { data: { path: path.split('/').filter(Boolean) } },
+    )
     loader.hide()
   }
 
   type FileMetadata = {
     title?: string
     description?: string
-    keyword?: string[]
     category?: string[]
+    keyword?: 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
+    const arr = path.split('/').filter(Boolean)
+
+    if (arr.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) {
+    const res = await api.post(
+      `${import.meta.env.VITE_API_ENDPOINT}storage/file`,
+      {
+        path: arr,
+        file: file.name,
+        ...data,
+      },
+    )
+    if (res && res.status === 200 && res.data && res.data.uploadUrl) {
       await axios
-        .put(res.data.upload, file, {
+        .put(res.data.uploadUrl, file, {
           headers: { 'Content-Type': file.type },
           onUploadProgress: (e) => console.log(e),
         })
@@ -416,13 +450,29 @@ const useStorage = defineStore('storageStore', () => {
     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 },
+
+    const srcFile = arr.pop()
+
+    const res = await api.put(
+      `${import.meta.env.VITE_API_ENDPOINT}storage/file`,
+      {
+        ...data,
+        from: {
+          file: srcFile,
+          path: arr,
+        },
+        to: file?.name
+          ? {
+              file: file.name,
+              path: arr,
+            }
+          : undefined,
+        upload: !!file,
+      },
     )
-    if (res && res.status === 200 && res.data && res.data.upload) {
+    if (res && res.status === 200 && res.data && res.data.uploadUrl) {
       await axios
-        .put(res.data.upload, file, {
+        .put(res.data.uploadUrl, file, {
           headers: { 'Content-Type': file?.type },
           onUploadProgress: (e) => console.log(e),
         })
@@ -436,9 +486,10 @@ const useStorage = defineStore('storageStore', () => {
     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]}`,
-    )
+
+    await api.delete(`${import.meta.env.VITE_API_ENDPOINT}storage/file`, {
+      data: { path: arr.slice(0, -1), file: arr[arr.length - 1] },
+    })
     loader.hide()
   }
 
@@ -461,6 +512,8 @@ const useStorage = defineStore('storageStore', () => {
     createFile,
     updateFile,
     deleteFile,
+    constructUrl,
+    consistantPath,
   }
 })