diff --git a/Services/client/src/components/FileForm.vue b/Services/client/src/components/FileForm.vue
index 0409aad..5a6f4ea 100644
--- a/Services/client/src/components/FileForm.vue
+++ b/Services/client/src/components/FileForm.vue
@@ -2,8 +2,12 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const storesKeyword = ['test1', 'test2', 'test3', 'test4', 'test5']
-const filterOptions = ref(storesKeyword)
+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<{
@@ -73,10 +77,32 @@ function createkeyword(val, done) {
 function filterkeyword(val, update) {
   update(() => {
     if (val === '') {
-      filterOptions.value = storesKeyword
+      filterDataKeyword.value = storesKeyword
     } else {
       const needle = val.toLowerCase()
-      filterOptions.value = storesKeyword.filter(
+      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')
+
+    }
+  }
+}
+
+function filterCategory(val, update) {
+  update(() => {
+    if (val === '') {
+      filterDataCategory.value = storesCategory
+    } else {
+      const needle = val.toLowerCase()
+      filterDataCategory.value = storesCategory.filter(
         (v) => v.toLowerCase().indexOf(needle) > -1
       )
     }
@@ -135,8 +161,8 @@ const file = ref<File | undefined>()
             error.fileExist
               ? 'พบไฟล์ในระบบ ข้อมูลในระบบจะถูกเขียนทับ'
               : error.fileName2Long
-                ? 'ไม่สามารถเพิ่มไฟล์ที่ชื่อยาวเกิน 85 ตัวอักษรได้'
-                : ''
+              ? 'ไม่สามารถเพิ่มไฟล์ที่ชื่อยาวเกิน 85 ตัวอักษรได้'
+              : ''
           "
         >
           <template v-slot:prepend>
@@ -171,15 +197,28 @@ const file = ref<File | undefined>()
       </section>
 
       <section class="q-mb-md">
-        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
-        <q-input
-          outlined
-          dense
-          class="q-mt-sm"
-          placeholder="เลือกกลุ่ม/หมวดหมู่"
-          :model-value="category"
-          @update:model-value="(v) => $emit('update:category', v)"
-        />
+        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span> 
+        <div class="q-mt-md">
+          <q-select
+            outlined
+            :model-value="category"
+            use-input
+            use-chips
+            multiple
+            input-debounce="0"
+            @new-value="createCategory"
+            :options="filterDataCategory"
+            @filter="filterCategory"
+            style="width: 250px"
+            @update:model-value="(v) => $emit('update:category', v)"
+          >
+            <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>
 
       <section class="q-mb-md">
@@ -187,15 +226,16 @@ const file = ref<File | undefined>()
         <div class="q-mt-md">
           <q-select
             outlined
-            v-model="inputKeyword"
+            :model-value="keyword"
             use-input
             use-chips
             multiple
             input-debounce="0"
             @new-value="createkeyword"
-            :options="filterOptions"
+            :options="filterDataKeyword"
             @filter="filterkeyword"
             style="width: 250px"
+            @update:model-value="(v) => $emit('update:keyword', v)"
           >
             <template v-slot:no-option>
               <q-item>
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 8b17e66..4d4b530 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -30,7 +30,6 @@ const {
   updateFile,
   deleteFile,
   checkFile,
-  checkFileName,
 } = useTreeDataStore()
 
 const currentIcon = computed(() =>
@@ -61,7 +60,7 @@ const fileFormData = ref<{
   category?: string
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
+const fileFormError = ref<{ fileExist?: boolean }>({})
 const fileExistNotification = ref<boolean>(false)
 
 function triggerFolderDelete(pathname: string) {
@@ -134,8 +133,8 @@ async function submitFileForm(
     file?: File
     title: string
     description: string
-    keyword: string
-    category: string
+    keyword: string[]
+    category: string[]
   },
   force = false,
 ) {
@@ -150,8 +149,8 @@ async function submitFileForm(
     await uploadFile(currentPath.value, value.file, {
       title: value.title,
       description: value.description,
-      keyword: value.keyword,
-      category: value.category,
+      keyword: value.keyword.join(''),
+      category: value.category.join(''),
     })
   } else {
     await updateFile(
@@ -159,8 +158,8 @@ async function submitFileForm(
       {
         title: value.title,
         description: value.description,
-        keyword: value.keyword,
-        category: value.category,
+        keyword: value.keyword.join(''),
+        category: value.category.join(''),
       },
       value.file,
     )
@@ -369,12 +368,7 @@ async function submitFileForm(
     v-model:description="fileFormData.description"
     v-model:keyword="fileFormData.keyword"
     v-model:category="fileFormData.category"
-    @filechange="
-      (name: string) => (
-        (fileFormError.fileExist = checkFile(name)),
-        (fileFormError.fileName2Long = checkFileName(name))
-      )
-    "
+    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
     @submit="submitFileForm"
   />