diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index 45aabd0..ffe8b71 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -12,8 +12,19 @@ const { currentFolder, currentFile, currentDept } = storeToRefs(
 )
 const { getFolder, createFolder, editFolder } = useTreeDataStore()
 const drawer = ref<boolean>(false)
+const drawerFile = ref<boolean>(false)
 const drawerStatus = ref<'edit' | 'create'>('create')
 const input = ref<string>('')
+const inputFile = ref<File>()
+const fileTitle = ref<string>('')
+const fileDesc = ref<string>('')
+const fileCategory = ref<string>('')
+const optionsCategory = [
+  { label: 'ศิลปะ', value: 'art' },
+  { label: 'ภาพวาด', value: 'drawing' },
+  { label: 'ภาษาไทย', value: 'thai' },
+]
+const fileKeyword = ref<string>('')
 const editPathname = ref<string>('')
 const currentIcon = computed(() =>
   currentDept.value === 0
@@ -64,7 +75,12 @@ const props = withDefaults(
           </q-card>
         </div>
       </div>
-      <div class="inline-block" v-if="props.action && currentDept < 4">
+      <div
+        class="inline-block"
+        v-if="props.action && currentDept < 4"
+        tabindex="0"
+        @keydown.esc="() => (drawer = false)"
+      >
         <div class="dashed border-radius-inherit">
           <q-card
             flat
@@ -72,6 +88,7 @@ const props = withDefaults(
               () => {
                 drawer = !drawer
                 drawerStatus = 'create'
+                drawerFile = false
               }
             "
           >
@@ -115,7 +132,15 @@ const props = withDefaults(
       </div>
       <div class="inline-block" v-if="props.action && currentDept > 2">
         <div class="dashed border-radius-inherit">
-          <q-card flat @click="() => (drawer = !drawer)">
+          <q-card
+            flat
+            @click="
+              () => {
+                drawerFile = !drawerFile
+                drawer = false
+              }
+            "
+          >
             <q-card-section class="column justify-center relative q-px-xl">
               <q-icon
                 name="description"
@@ -142,8 +167,25 @@ const props = withDefaults(
     :width="300"
     :breakpoint="500"
     overlay
+    behavior="mobile"
+    tabindex="0"
+    @keydown.esc="
+      () => {
+        drawer = false
+        input = ''
+      }
+    "
+    @keyup.enter="
+      () => {
+        drawer = false
+        drawerStatus === 'create'
+          ? createFolder(input)
+          : editFolder(input, editPathname)
+        input = ''
+      }
+    "
   >
-    <q-toolbar class="q-mb-md q-pa-none">
+    <q-toolbar class="q-mb-md q-pa-none" @keydown.esc="() => (drawer = false)">
       <q-toolbar-title>
         <span class="text-weight-bold" v-if="drawerStatus == 'edit'"
           >แก้ไขชื่อ{{ DEPT_NAME[currentDept] }}</span
@@ -159,7 +201,7 @@ const props = withDefaults(
         icon="close"
         v-close-popup
         color="red"
-        @click="drawer = !drawer"
+        @click="() => (drawer = !drawer)"
       />
     </q-toolbar>
     <span class="text-weight-bold">ชื่อ{{ DEPT_NAME[currentDept] }}</span>
@@ -187,6 +229,85 @@ const props = withDefaults(
       "
     />
   </q-drawer>
+  <q-drawer
+    class="q-pa-md"
+    side="right"
+    v-model="drawerFile"
+    bordered
+    :width="300"
+    :breakpoint="500"
+    overlay
+  >
+    <q-toolbar class="q-mb-md q-pa-none">
+      <q-toolbar-title>
+        <span class="text-weight-bold">สร้างเอกสาร</span>
+      </q-toolbar-title>
+      <q-btn
+        flat
+        round
+        dense
+        icon="close"
+        v-close-popup
+        color="red"
+        @click="() => (drawerFile = !drawerFile)"
+      />
+    </q-toolbar>
+    <span class="text-weight-bold">อัพโหลดไฟล์</span>
+    <q-input
+      model-value="inputfile"
+      class="q-my-md"
+      outlined
+      type="file"
+      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
+      dense
+    />
+    <span class="text-weight-bold">ชื่อเรื่อง</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileTitle"
+      placeholder="กรอกชื่อเรื่อง"
+      dense
+    />
+    <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      type="textarea"
+      v-model="fileDesc"
+      placeholder="กรอกรายละเอียด"
+      dense
+    />
+    <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
+    <q-select
+      class="q-my-md"
+      outlined
+      :options="optionsCategory"
+      v-model="fileCategory"
+      placeholder="เลือกกลุ่ม/หมวดหมู่"
+      dense
+    />
+    <span class="text-weight-bold">คำสำคัญ</span>
+    <q-input
+      class="q-my-md"
+      outlined
+      v-model="fileKeyword"
+      placeholder="กรอกคำสำคัญ"
+      dense
+    />
+    <q-btn
+      class="q-px-md"
+      label="บันทึก"
+      type="submit"
+      color="primary"
+      dense
+      @click="
+        () => {
+          drawerFile = !drawerFile
+        }
+      "
+    />
+  </q-drawer>
 </template>
 
 <style lang="scss" scoped>