diff --git a/Services/client/src/components/FolderForm.vue b/Services/client/src/components/FolderForm.vue
index d6d89fd..1383dd2 100644
--- a/Services/client/src/components/FolderForm.vue
+++ b/Services/client/src/components/FolderForm.vue
@@ -14,13 +14,16 @@ const props = withDefaults(
 )
 
 const emit = defineEmits(['update:open', 'update:name', 'submit'])
-const offensiveWord = ref<boolean>(false)
+const offensiveWord = ref<boolean>()
+const errorMessage = ref<string>('')
+const inputNull = ref<boolean>(false)
 
 function checkOffensiveWord(input: string) {
   return /[\\?%:|"<>#]/.test(input)
 }
 
 function reset() {
+  offensiveWord.value = undefined
   emit('update:name', undefined)
 }
 
@@ -34,8 +37,9 @@ function keydown(e: KeyboardEvent) {
 function submit() {
   emit('submit', {
     mode: props.mode,
-    name: props.name,
+    name: props.name?.trim(),
   })
+
   emit('update:open', !open), reset()
 }
 
@@ -59,10 +63,10 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
     <q-form @submit.prevent="submit" v-if="open">
       <q-toolbar class="q-mb-md q-pa-none">
         <q-toolbar-title>
-          <span class="text-weight-bold" v-if="mode === 'create'">
+          <span class="text-weight-bold text-primary" v-if="mode === 'create'">
             สร้าง{{ tree }}
           </span>
-          <span class="text-weight-bold" v-if="mode === 'edit'">
+          <span class="text-weight-bold text-primary" v-if="mode === 'edit'">
             แก้ไข{{ tree }}
           </span>
         </q-toolbar-title>
@@ -75,7 +79,6 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
           color="red"
           @click="
             () => {
-              offensiveWord = false
               $emit('update:open', !open)
             }
           "
@@ -91,9 +94,14 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
           dense
           class="q-my-sm"
           placeholder="กรอกชื่อ"
-          :model-value="name"
-          error-message="คำต้องห้านจะเปลี่ยนเป็น - เมื่อกดสร้าง"
+          :model-value="props.name"
+          :error-message="
+            !!props.name
+              ? 'คำต้องห้านจะเปลี่ยนเป็น - เมื่อกดสร้าง'
+              : 'โปรดกรอกข้อมูล'
+          "
           :error="offensiveWord"
+          :rules="[(v) => !!props.name]"
           @update:model-value="
             (v) => {
               $emit('update:name', v)
@@ -113,7 +121,6 @@ onUnmounted(() => window.addEventListener('keydown', keydown))
           flat
           @click="
             () => {
-              offensiveWord = false
               $emit('update:open', false), reset()
             }
           "