diff --git a/Services/client/src/stores/storage.ts b/Services/client/src/stores/storage.ts
index a975cc8..0cfe8a9 100644
--- a/Services/client/src/stores/storage.ts
+++ b/Services/client/src/stores/storage.ts
@@ -1,6 +1,7 @@
 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'
 
@@ -117,7 +118,8 @@ const useStorage = defineStore('storageStore', () => {
     path: '',
     dept: 1,
   })
-  if (!init.value) goto()
+
+  if (!init.value) goto(sessionStorage.getItem('path') || '')
 
   async function getStorage(path: string = '') {
     const arr = path.split('/').filter(Boolean)
@@ -161,6 +163,7 @@ const useStorage = defineStore('storageStore', () => {
 
     currentInfo.path = path
     currentInfo.dept = path.split('/').filter(Boolean).length
+    sessionStorage.setItem('path', path)
     loader.hide()
   }
 
@@ -239,12 +242,72 @@ const useStorage = defineStore('storageStore', () => {
   }
   async function editFolder(name: string, path: string) {
     loader.show()
-    await api.put(constructUrl(path), { name })
+    await api.put(constructUrl(path, false), { name })
     loader.hide()
   }
   async function deleteFolder(path: string) {
     loader.show()
-    await api.delete(constructUrl(path))
+    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.patch(
+      constructUrl(arr.slice(0, -1), false) + `/file/${arr[arr.length - 1]}`,
+    )
     loader.hide()
   }
 
@@ -264,6 +327,9 @@ const useStorage = defineStore('storageStore', () => {
     createFolder,
     editFolder,
     deleteFolder,
+    createFile,
+    updateFile,
+    deleteFile,
   }
 })