diff --git a/Services/client/src/components/DialogDelete.vue b/Services/client/src/components/DialogDelete.vue
index 32bf935..e0c0573 100644
--- a/Services/client/src/components/DialogDelete.vue
+++ b/Services/client/src/components/DialogDelete.vue
@@ -1,9 +1,24 @@
 <script setup lang="ts">
-defineEmits(['confirm', 'cancel'])
+defineEmits(['confirm', 'cancel', 'update:open'])
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+  }>(),
+  {
+    open: false,
+  },
+)
 </script>
 
 <template>
-  <q-dialog persistent transition-show="scale" transition-hide="scale">
+  <q-dialog 
+  persistent 
+  transition-show="scale" 
+  transition-hide="scale"
+  :model-value="props.open"
+  @update:model-value="(v) => $emit('update:open', v)"
+  >
     <q-card style="width: 400px">
       <q-card-section>
         <span class="text-h6">
@@ -21,7 +36,7 @@ defineEmits(['confirm', 'cancel'])
           label="ยกเลิก"
           flat
           v-close-popup
-          @click="() => $emit('cancel')"
+          @click="() => ($emit('update:open', !open))"
         />
 
         <q-btn
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index a7e66c7..d0e9325 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -4,22 +4,25 @@ 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 { useFileInfoStore } from '@/stores/file-info-data'
+import test from 'node:test'
 
 const props = withDefaults(
   defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
   {
     action: false,
-  },
+  }
 )
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
 const { getFileInfo, getFileNameFormat } = useFileInfoStore()
-const { currentFolder, currentFile, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
+const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
+  useTreeDataStore()
+)
 const {
   createFolder,
   editFolder,
@@ -35,10 +38,14 @@ const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-      ? 'inbox'
-      : 'o_folder_open',
+    ? 'inbox'
+    : 'o_folder_open'
 )
 
+const dialogDeleteState = ref<boolean>(false)
+const deleteFormPath = ref<string>('')
+const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
+
 const folderFormState = ref<boolean>(false)
 const folderFormPath = ref<string>('')
 const folderFormData = ref<{
@@ -58,6 +65,18 @@ const fileFormType = ref<'edit' | 'create'>('create')
 const fileFormError = ref<{ fileExist?: boolean }>({})
 const fileExistNotification = ref<boolean>(false)
 
+function triggerFolderDelete(pathname: string) {
+  deleteFormType.value = 'deleteFolder'
+  deleteFormPath.value = pathname
+  dialogDeleteState.value = !dialogDeleteState.value
+}
+
+function triggerFileDelete(pathname: string) {
+  deleteFormType.value = 'deleteFile'
+  deleteFormPath.value = pathname
+  dialogDeleteState.value = !dialogDeleteState.value
+}
+
 function triggerFolderCreate() {
   folderFormType.value = 'create'
   folderFormData.value = {}
@@ -95,7 +114,7 @@ function triggerFileEdit(
     keyword: string
     category: string
   },
-  pathname: string,
+  pathname: string
 ) {
   fileFormState.value = true
   fileFormType.value = 'edit'
@@ -119,7 +138,7 @@ async function submitFileForm(
     keyword: string
     category: string
   },
-  force = false,
+  force = false
 ) {
   currentParam.value = value
 
@@ -144,7 +163,7 @@ async function submitFileForm(
         keyword: value.keyword,
         category: value.category,
       },
-      value.file,
+      value.file
     )
   }
   fileFormData.value = {}
@@ -186,7 +205,7 @@ async function submitFileForm(
           v-if="props.action"
         >
           <file-item-action
-            @delete="() => deleteFolder(value.pathname)"
+            @delete="() => triggerFolderDelete(value.pathname)"
             @edit="() => triggerFolderEdit(value.name, value.pathname)"
           />
         </div>
@@ -292,10 +311,10 @@ async function submitFileForm(
                     keyword: value.keyword.join(','),
                     category: value.category.join(','),
                   },
-                  value.pathname,
+                  value.pathname
                 )
             "
-            @delete="() => deleteFile(value.pathname)"
+            @delete="() => triggerFileDelete(value.pathname)"
           />
         </div>
         <div
@@ -369,6 +388,15 @@ async function submitFileForm(
     @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>
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 1fb8eb0..0270405 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -5,12 +5,14 @@ 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 FileForm from './FileForm.vue'
 import FolderForm from './FolderForm.vue'
 
 const { getFormatDate, getSize, getType, getFileInfo } = useFileInfoStore()
-const { listDataFile, listDataFolder, currentDept, currentPath } =
-  storeToRefs(useTreeDataStore())
+const { listDataFile, listDataFolder, currentDept, currentPath } = storeToRefs(
+  useTreeDataStore()
+)
 const {
   createFolder,
   editFolder,
@@ -32,18 +34,18 @@ const currentLevel = computed(() =>
   currentDept.value === 0
     ? 'ตู้จัดเก็บเอกสาร'
     : currentDept.value === 1
-      ? 'ลิ้นชัก'
-      : currentDept.value === 2
-        ? 'แฟ้ม'
-        : 'แฟ้มย่อย',
+    ? 'ลิ้นชัก'
+    : currentDept.value === 2
+    ? 'แฟ้ม'
+    : 'แฟ้มย่อย'
 )
 
 const currentIcon = computed(() =>
   currentDept.value === 0
     ? 'mdi-file-cabinet'
     : currentDept.value === 1
-      ? 'inbox'
-      : 'o_folder_open',
+    ? 'inbox'
+    : 'o_folder_open'
 )
 
 const folderFormState = ref<boolean>(false)
@@ -64,6 +66,22 @@ const fileFormData = ref<{
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
 
+const dialogDeleteState = ref<boolean>(false)
+const deleteFormPath = ref<string>('')
+const deleteFormType = ref<'deleteFolder' | 'deleteFile'>()
+
+function triggerFolderDelete(pathname: string) {
+  deleteFormType.value = 'deleteFolder'
+  deleteFormPath.value = pathname
+  dialogDeleteState.value = !dialogDeleteState.value
+}
+
+function triggerFileDelete(pathname: string) {
+  deleteFormType.value = 'deleteFile'
+  deleteFormPath.value = pathname
+  dialogDeleteState.value = !dialogDeleteState.value
+}
+
 function triggerFolderCreate() {
   folderFormType.value = 'create'
   folderFormData.value = {}
@@ -101,7 +119,7 @@ function triggerFileEdit(
     keyword: string
     category: string
   },
-  pathname: string,
+  pathname: string
 ) {
   fileFormState.value = true
   fileFormType.value = 'edit'
@@ -138,7 +156,7 @@ async function submitFileForm(value: {
         keyword: value.keyword,
         category: value.category,
       },
-      value.file,
+      value.file
     )
   }
   fileFormData.value = {}
@@ -295,7 +313,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 @click.stop="
                   triggerFolderEdit(
                     actionsRow.row.name,
-                    actionsRow.row.pathname,
+                    actionsRow.row.pathname
                   )
                 "
               />
@@ -304,7 +322,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 color="negative"
                 dense
                 icon="delete"
-                @click.stop="deleteFolder(actionsRow.row.pathname)"
+                @click.stop="triggerFolderDelete(actionsRow.row.pathname)"
               />
             </div>
           </q-td>
@@ -395,7 +413,7 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
                 color="negative"
                 dense
                 icon="delete"
-                @click="() => deleteFile(actionsRow.row.pathname)"
+                @click="() => triggerFileDelete(actionsRow.row.pathname)"
               />
             </div>
           </q-td>
@@ -424,6 +442,15 @@ const onRowClick = (evt: Event, row: TreeDataFolder, index: number) => {
     v-model:name="folderFormData.name"
     @submit="submitFolderForm"
   />
+
+  <dialog-delete
+    v-model:open="dialogDeleteState"
+    @confirm="
+      () =>
+        deleteFormType &&
+        (deleteFolder(deleteFormPath), deleteFile(deleteFormPath))
+    "
+  />
 </template>
 
 <style lang="scss" scoped>