diff --git a/Services/client/src/components/FileForm.vue b/Services/client/src/components/FileForm.vue
index 2103dd1..bd310ca 100644
--- a/Services/client/src/components/FileForm.vue
+++ b/Services/client/src/components/FileForm.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 
-const storesKeyword = ['test1', 'test2', 'test3', 'test4', 'test5']
-const storesCategory = ['Category1', 'Category2', 'Category3', 'Category4', 'Category5']
+const storesCategory = [
+  'Category1',
+  'Category2',
+  'Category3',
+  'Category4',
+  'Category5',
+]
 
-const filterDataKeyword = ref(storesKeyword)
 const filterDataCategory = ref(storesCategory)
-const inputKeyword = ref<string[]>([])
-const inputCategory = ref<string[]>([])
 
 const props = withDefaults(
   defineProps<{
@@ -27,6 +29,9 @@ const props = withDefaults(
   }
 )
 
+const inputKeyword = ref<string[]>(props.keyword || [])
+const inputCategory = ref<string[]>(props.category || [])
+
 const emit = defineEmits([
   'update:open',
   'update:title',
@@ -67,31 +72,16 @@ function submit() {
 function createkeyword(val, done) {
   if (val.length > 2) {
     if (!inputKeyword.value.includes(val)) {
-      inputKeyword.value.push(val)
       done(val, 'add-unique')
       console.log(inputKeyword.value)
     }
   }
 }
 
-function filterkeyword(val, update) {
-  update(() => {
-    if (val === '') {
-      filterDataKeyword.value = storesKeyword
-    } else {
-      const needle = val.toLowerCase()
-      filterDataKeyword.value = storesKeyword.filter(
-        (v) => v.toLowerCase().indexOf(needle) > -1
-      )
-    }
-  })
-}
-
 function createCategory(val, done) {
   if (val.length > 2) {
     if (!inputCategory.value.includes(val)) {
       done(val, 'add-unique')
-
     }
   }
 }
@@ -179,6 +169,7 @@ const file = ref<File | undefined>()
           class="q-my-sm"
           placeholder="กรอกชื่อเรื่อง"
           :model-value="title"
+          :rules="[(v) => v.length > 3 || 'ชื่อต้องยาวกว่า 3 ตัวอักษร']"
           @update:model-value="(v) => $emit('update:title', v)"
         />
       </section>
@@ -197,7 +188,7 @@ const file = ref<File | undefined>()
       </section>
 
       <section class="q-mb-md">
-        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span> 
+        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
         <div class="q-mt-md">
           <q-select
             outlined
@@ -226,22 +217,16 @@ const file = ref<File | undefined>()
         <div class="q-mt-md">
           <q-select
             outlined
-            :model-value="keyword"
             use-input
             use-chips
             multiple
+            hide-dropdown-icon
             input-debounce="0"
-            @new-value="createkeyword"
-            :options="filterDataKeyword"
-            @filter="filterkeyword"
             style="width: 250px"
+            :model-value="props.keyword"
             @update:model-value="(v) => $emit('update:keyword', v)"
+            @new-value="createkeyword"
           >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> No results </q-item-section>
-              </q-item>
-            </template>
           </q-select>
         </div>
       </section>
diff --git a/Services/client/src/components/FileItemAction.vue b/Services/client/src/components/FileItemAction.vue
index 9ecd858..746e9b3 100644
--- a/Services/client/src/components/FileItemAction.vue
+++ b/Services/client/src/components/FileItemAction.vue
@@ -6,17 +6,17 @@ defineEmits(['edit', 'delete'])
   <q-btn @click.stop icon="more_vert" color="grey" flat dense>
     <q-menu auto-close>
       <q-list dense>
-        <q-item clickable>
-          <q-item-section @click.prevent.stop="() => $emit('edit')">
-            <div class="row items-center">
+        <q-item clickable @click.prevent.stop="() => $emit('edit')">
+          <q-item-section>
+            <div class="row items-center white  ">
               <q-icon name="edit" color="positive" />
               <span class="q-ml-sm">แก้ไข</span>
             </div>
           </q-item-section>
         </q-item>
-        <q-item clickable>
-          <q-item-section @click.prevent.stop="() => $emit('delete')">
-            <div class="row items-center">
+        <q-item clickable @click.prevent.stop="() => $emit('delete')">
+          <q-item-section>
+            <div class="row items-center white ">
               <q-icon name="delete" color="negative" />
               <span class="q-ml-sm">ลบ</span>
             </div>
@@ -26,3 +26,16 @@ defineEmits(['edit', 'delete'])
     </q-menu>
   </q-btn>
 </template>
+
+
+<style scoped>
+.white  {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block; 
+
+}
+</style>
+
+
diff --git a/Services/client/src/components/ListView.vue b/Services/client/src/components/ListView.vue
index 2d39db2..2df0aef 100644
--- a/Services/client/src/components/ListView.vue
+++ b/Services/client/src/components/ListView.vue
@@ -55,14 +55,16 @@ const folderFormData = ref<{
 }>({})
 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
+  keyword?: string[]
+  category?: string[]
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
 
@@ -116,8 +118,8 @@ function triggerFileEdit(
   value: {
     title: string
     description: string
-    keyword: string
-    category: string
+    keyword: string[]
+    category: string[]
   },
   pathname: string
 ) {
@@ -128,19 +130,31 @@ function triggerFileEdit(
     title: value.title,
     description: value.description,
     keyword: value.keyword,
-    category: value.keyword,
+    category: value.category,
   }
 }
 
-async function submitFileForm(value: {
-  mode: 'create' | 'edit'
-  file: File
-  title: string
-  description: string
-  keyword: string
-  category: string
-}) {
-  if (value.mode === 'create') {
+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,
@@ -161,6 +175,7 @@ async function submitFileForm(value: {
   }
   fileFormData.value = {}
   fileFormState.value = false
+  currentParam.value = undefined
 }
 
 const columnsFolder: QTableProps['columns'] = [
diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts
index 759c05a..835e583 100644
--- a/Services/client/src/stores/tree-data.ts
+++ b/Services/client/src/stores/tree-data.ts
@@ -40,9 +40,6 @@ export interface TreeDataFolder {
 
 export const useTreeDataStore = defineStore('changeCabinet', () => {
   const loader = useLoader()
-  const indexToRemove = ref<number>()
-  const fileNameRemove = ref<string>('')
-
   const data = ref<TreeDataFolder[]>([])
   const currentFolder = ref<TreeDataFolder[]>([])
   const currentFile = ref<EhrFile[]>([])
@@ -96,7 +93,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     currentPath.value = pathname
 
     const res = await axiosClient.get<EhrFolder[]>(
-      `${apiEndpoint}${requestPath}`,
+      `${apiEndpoint}${requestPath}`
     )
 
     const list = res.data.map((v) => ({
@@ -248,7 +245,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       description: string
       keyword: string[]
       category: string[]
-    },
+    }
   ) {
     loader.show()
 
@@ -268,7 +265,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       {
         file: file.name,
         ...metadata,
-      },
+      }
     )
 
     if (res && res.data.upload) {
@@ -297,7 +294,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
       keyword: string[]
       category: string[]
     },
-    file?: File,
+    file?: File
   ) {
     loader.show()
 
@@ -312,7 +309,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
 
     const res = await axiosClient.patch<{ upload: string }>(
       `${apiEndpoint}${requestPath}`,
-      { file: file?.name, ...metadata },
+      { file: file?.name, ...metadata }
     )
 
     if (res && res.data.upload) {
@@ -354,7 +351,7 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     await getFile(currentPath.value)
 
     currentFile.value = currentFile.value.filter((v) => v.pathname !== pathname)
-
+    listDataFile.value = currentFile.value
     return loader.hide()
   }