diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 65b7564..4285180 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -30,6 +30,7 @@ const {
   updateFile,
   deleteFile,
   checkFile,
+  checkFileName,
   refaceFile,
 } = useTreeDataStore()
 
@@ -61,7 +62,7 @@ const fileFormData = ref<{
   category?: string[]
 }>({})
 const fileFormType = ref<'edit' | 'create'>('create')
-const fileFormError = ref<{ fileExist?: boolean }>({})
+const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
 const fileExistNotification = ref<boolean>(false)
 
 function triggerFolderDelete(pathname: string) {
@@ -386,7 +387,12 @@ async function submitFileForm(
     v-model:keyword="fileFormData.keyword"
     v-model:category="fileFormData.category"
     @reset="() => (fileFormError = {})"
-    @filechange="(name: string) => (fileFormError.fileExist = checkFile(name))"
+    @filechange="
+      (name: string) => (
+        (fileFormError.fileExist = checkFile(name)),
+        (fileFormError.fileName2Long = checkFileName(name))
+      )
+    "
     @submit="submitFileForm"
   />
 
diff --git a/Services/client/src/modules/01_user/components/AdvancedSearch.vue b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
index abf184c..a01a384 100644
--- a/Services/client/src/modules/01_user/components/AdvancedSearch.vue
+++ b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
@@ -96,7 +96,7 @@ function clearAdvSearchData() {
           <div class="row items-center" style="width: 45px; height: 45px">
             <q-btn
               dense
-              color="teal"
+              color="teal-5"
               icon="mdi-plus"
               v-if="index === advSearchDataRow.length - 1"
               @click="addAdvSearchData"
@@ -135,6 +135,7 @@ function clearAdvSearchData() {
               @keydown.enter.prevent="searchSubmit()"
               ><template v-slot:append>
                 <q-icon
+                  v-if="item.value"
                   name="close"
                   @click="() => (item.value = '')"
                   class="cursor-pointer"
@@ -172,24 +173,34 @@ function clearAdvSearchData() {
               outlined
               dense
               v-model="advSearchDataField.keyword"
-              placeholder="คำสำคัญ"
               use-input
               use-chips
               multiple
               hide-dropdown-icon
               input-debounce="0"
-              new-value-mode="add"
-            />
+              new-value-mode="add-unique"
+              ><template v-slot:prepend
+                ><span class="text-subtitle2">คำสำคัญ:</span></template
+              ></q-select
+            >
           </div>
           <div class="col-12 col-md-grow">
             <q-input
               id="advSearchDes"
               dense
               outlined
-              placeholder="รายละเอียด"
               @keydown.enter.prevent="searchSubmit()"
               v-model="advSearchDataField.description"
-            />
+              ><template v-slot:prepend
+                ><span class="text-subtitle2">รายละเอียด:</span></template
+              ><template v-slot:append>
+                <q-icon
+                  v-if="advSearchDataField.description"
+                  name="close"
+                  @click="() => (advSearchDataField.description = '')"
+                  class="cursor-pointer"
+                /> </template
+            ></q-input>
           </div>
         </div>
       </div>
diff --git a/Services/client/src/modules/01_user/components/SearchBar.vue b/Services/client/src/modules/01_user/components/SearchBar.vue
index 824bfde..e8bef10 100644
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/Services/client/src/modules/01_user/components/SearchBar.vue
@@ -8,8 +8,10 @@ import { useSearchDataStore } from '@/stores/searched-data'
 import { useLoader } from '@/stores/loader'
 
 import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
 const loaderStore = useLoader()
+const { isFilePreview } = storeToRefs(useFileInfoStore())
 const {
   isSearch,
   isAdvSearchCall,
@@ -37,6 +39,7 @@ const props = defineProps<{
 }>()
 
 async function searchSubmit() {
+  isFilePreview.value = false
   if (searchData.value.value.trim() !== '') {
     submitSearchData.value = { AND: [], OR: [] }
     if (props.mode === 'admin') {
@@ -46,6 +49,14 @@ async function searchSubmit() {
           value: searchData.value.value,
         })
       })
+      submitSearchData.value.OR.push({
+        field: 'fileName',
+        value: searchData.value.value,
+      })
+      submitSearchData.value.OR.push({
+        field: 'fileType',
+        value: searchData.value.value,
+      })
     } else {
       submitSearchData.value.OR.push({
         field: searchData.value.field,
@@ -85,6 +96,8 @@ async function searchSubmit() {
         `${import.meta.env.VITE_API_ENDPOINT}/search`,
         submitSearchData.value,
       )
+      console.log(submitSearchData)
+
       getFoundFile(res.data)
       isSearch.value = true
     } catch (error) {
@@ -153,6 +166,7 @@ watch(
           >
             <template v-slot:append>
               <q-icon
+                v-if="searchData.value"
                 name="close"
                 @click="() => ((searchData.value = ''), (isSearch = false))"
                 class="cursor-pointer"