diff --git a/Services/client/src/components/FileIcon.vue b/Services/client/src/components/FileIcon.vue
new file mode 100644
index 0000000..bf31845
--- /dev/null
+++ b/Services/client/src/components/FileIcon.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useFileInfoStore } from '@/stores/file-info-data'
+
+const { mimeFileMapping } = useFileInfoStore()
+
+defineProps<{ fileMimeType: any; size: string }>()
+
+function getIcon(mimeType: string) {
+  if (mimeFileMapping.hasOwnProperty(mimeType)) {
+    return mimeFileMapping[mimeType].icon
+  } else {
+    return 'mdi-file-question-outline'
+  }
+}
+function getColor(mimeType: string) {
+  if (mimeFileMapping.hasOwnProperty(mimeType)) {
+    return mimeFileMapping[mimeType].color
+  } else {
+    return 'blue-11'
+  }
+}
+function getSize(s: string) {
+  if (s === 'preview') {
+    return '6em'
+  }
+}
+</script>
+
+<template>
+  <q-icon
+    :name="getIcon(fileMimeType)"
+    :color="getColor(fileMimeType)"
+    :size="getSize(size)"
+  />
+</template>
diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index ffe8b71..127290a 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/Services/client/src/components/FileItem.vue
@@ -4,7 +4,10 @@ import { storeToRefs } from 'pinia'
 
 import FileItemAction from '@/components/FileItemAction.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
+const { isPreview } = storeToRefs(useFileInfoStore())
+const { getFileInfo } = useFileInfoStore()
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
 
 const { currentFolder, currentFile, currentDept } = storeToRefs(
@@ -113,9 +116,21 @@ const props = withDefaults(
   </div>
   <div class="q-mt-md">
     <div class="q-gutter-md">
-      <div v-for="value in currentFile" :key="value.title" class="inline-block">
+      <div
+        v-for="(value, index) in currentFile"
+        :key="value.title"
+        class="inline-block"
+      >
         <div class="box border-radius-inherit">
-          <q-card flat @click="">
+          <q-card
+            flat
+            @click="
+              () => {
+                getFileInfo(currentFile[index])
+                isPreview = true
+              }
+            "
+          >
             <q-card-section class="column justify-center relative q-px-xl">
               <q-icon name="description" size="6em" color="primary" />
               <div
diff --git a/Services/client/src/components/FileSearched.vue b/Services/client/src/components/FileSearched.vue
index bff404c..bcd654b 100644
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@@ -1,16 +1,31 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
 const { foundFile } = storeToRefs(useSearchDataStore())
+const { isPreview } = storeToRefs(useFileInfoStore())
+const { getFileInfo } = useFileInfoStore()
 </script>
 
 <template>
   <div class="q-mt-md" v-if="foundFile.length > 0">
     <div class="q-gutter-md">
-      <div v-for="value in foundFile" :key="value.title" class="inline-block">
+      <div
+        v-for="(value, index) in foundFile"
+        :key="value.title"
+        class="inline-block"
+      >
         <div class="box border-radius-inherit">
-          <q-card flat @click="">
+          <q-card
+            flat
+            @click="
+              () => {
+                getFileInfo(foundFile[index])
+                isPreview = true
+              }
+            "
+          >
             <q-card-section class="column justify-center relative q-px-xl">
               <q-icon name="description" size="6em" color="primary" />
               <span class="text-center q-pt-md">{{ value.title }}</span>
diff --git a/Services/client/src/components/PageLayout.vue b/Services/client/src/components/PageLayout.vue
index 074aa46..9d9828f 100644
--- a/Services/client/src/components/PageLayout.vue
+++ b/Services/client/src/components/PageLayout.vue
@@ -3,13 +3,16 @@ import { onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useSearchDataStore } from '@/stores/searched-data'
+import { useFileInfoStore } from '@/stores/file-info-data'
 import FileItem from '@/components/FileItem.vue'
 import TreeExplorer from '@/components/TreeExplorer.vue'
 import SearchBar from '@/modules/01_user/components/SearchBar.vue'
 import FileSearched from '@/components/FileSearched.vue'
+import FileDownload from '@/modules/01_user/components/FileDownload.vue'
 
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย', 'ไฟล์']
 
+const { isPreview } = storeToRefs(useFileInfoStore())
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { data, currentDept } = storeToRefs(useTreeDataStore())
 const { getCabinet, gotoParent } = useTreeDataStore()
@@ -62,8 +65,8 @@ onMounted(getCabinet)
       </div>
     </div>
     <div class="col">
-      <!-- <file-download /> -->
-      <div class="bg-white rounded-borders shadow-5 relative">
+      <file-download v-if="isPreview === true"/>
+      <div class="bg-white rounded-borders shadow-5 relative" v-if="isPreview === false">
         <search-bar v-if="mode === 'user'" />
         <div class="bg-white q-pa-md">
           <div class="row items-center justify-between">
@@ -72,12 +75,13 @@ onMounted(getCabinet)
                 flat
                 dense
                 class="q-mr-sm q-px-sm"
-                v-if="currentDept > 0"
+                v-if="currentDept > 0 && isSearch === false"
                 @click="() => gotoParent()"
               >
                 <q-icon name="arrow_back" size="1rem" color="primary"
               /></q-btn>
-              <span>{{ DEPT_NAME[currentDept] }}</span>
+              <span v-if="isSearch === false">{{ DEPT_NAME[currentDept] }}</span>
+              <span v-if="isSearch === true">ผลการค้นหา</span>
               <q-btn
                 v-if="mode === 'admin' && viewMode === 'view_module'"
                 class="q-px-md q-ml-md"
diff --git a/Services/client/src/modules/01_user/components/FileDownload.vue b/Services/client/src/modules/01_user/components/FileDownload.vue
new file mode 100644
index 0000000..b2f7c8b
--- /dev/null
+++ b/Services/client/src/modules/01_user/components/FileDownload.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useFileInfoStore } from '@/stores/file-info-data'
+
+import FileIcon from '@/components/FileIcon.vue'
+
+const { isPreview, fileInfo } = storeToRefs(useFileInfoStore())
+const { getType } = useFileInfoStore()
+const fileIconComp = ref<InstanceType<typeof FileIcon>>()
+</script>
+
+<template>
+  <div class="bg-white rounded-borders shadow-5 relative">
+    <div class="bg-white q-pa-md">
+      <div class="row items-center justify-between">
+        <span class="text-h6">
+          <q-btn
+            flat
+            dense
+            class="q-mr-sm q-px-sm"
+            @click="() => (isPreview = false)"
+          >
+            <q-icon
+              class="pointer"
+              name="arrow_back"
+              size="1em"
+              color="primary"
+            />
+          </q-btn>
+          {{ fileInfo?.title }}</span
+        >
+      </div>
+      <div class="row">
+        <div class="q-pa-sm">
+          <div class="col">
+            <div class="box border-radius-inherit">
+              <q-card flat>
+                <q-card-section class="column justify-center relative q-px-xl">
+                  <file-icon
+                    size="preview"
+                    :fileMimeType="fileInfo?.fileType"
+                    ref="fileIconComp"
+                  />
+                  <div class="absolute" style="top: 0.5rem; right: 0.5rem">
+                    <file-item-action :edit="() => {}" :delete="() => {}" />
+                  </div>
+                  <span class="text-center q-pt-md text-h6">{{
+                    fileInfo?.title
+                  }}</span>
+                </q-card-section>
+              </q-card>
+            </div>
+          </div>
+          <div class="column q-py-md">
+            <q-btn
+              color="primary"
+              label="ดาวน์โหลด"
+              icon="mdi-download"
+              class="q-py-sm"
+            />
+          </div>
+        </div>
+
+        <div class="col q-px-lg q-gutter-md">
+          <div class="row">
+            <div class="col-2">
+              <span>ชื่อไฟล์</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ fileInfo?.fileName }}</span>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row">
+            <div class="col-2">
+              <span>ชื่อเรื่อง</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ fileInfo?.title }}</span>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row">
+            <div class="col-2">
+              <span>รายละเอียด</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ fileInfo?.description }}</span>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row">
+            <div class="col-2">
+              <span>กลุ่ม/หมวดหมู่</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ fileInfo?.category }}</span>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row">
+            <div class="col-2">
+              <span>คำสำคัญ</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ fileInfo?.keyword }}</span>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row">
+            <div class="col-2">
+              <span>ขนาดไฟล์</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ fileInfo?.fileSize }}</span>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row">
+            <div class="col-2">
+              <span>ประเภทไฟล์</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ getType(fileInfo?.fileType) }}</span>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row">
+            <div class="col-2">
+              <span>วันที่อัปโหลด</span>
+            </div>
+            <div class="col-grow">
+              <span class="text-grey">{{ fileInfo?.createdAt }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  border: 2px solid #f1f2f4;
+  border-radius: 8px;
+}
+</style>
diff --git a/Services/client/src/modules/01_user/components/SearchBar.vue b/Services/client/src/modules/01_user/components/SearchBar.vue
index 40e663b..807fa6d 100644
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/Services/client/src/modules/01_user/components/SearchBar.vue
@@ -148,7 +148,7 @@ async function searchSubmit() {
           color="primary"
           label="ค้นหา"
           icon="mdi-magnify"
-          @click="() => searchSubmit()"
+          @click="searchSubmit"
         />
       </div>
     </div>
diff --git a/Services/client/src/stores/file-info-data.ts b/Services/client/src/stores/file-info-data.ts
new file mode 100644
index 0000000..414daf7
--- /dev/null
+++ b/Services/client/src/stores/file-info-data.ts
@@ -0,0 +1,161 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import type { EhrFile } from '@/stores/tree-data'
+
+export interface MimeMap {
+  [key: string]: { icon: string; color: string; type: string }
+}
+
+export const useFileInfoStore = defineStore('info', () => {
+  const fileInfo = ref<EhrFile>()
+  const isPreview = ref<Boolean>(false)
+  const mimeFileMapping: MimeMap = {
+    'application/msword': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.doc',
+    },
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.docx',
+    },
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.template': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.dotx',
+    },
+    'application/vnd.ms-word.document.macroEnabled.12': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.docm',
+    },
+    'application/vnd.ms-word.template.macroEnabled.12': {
+      icon: 'mdi-file-word-outline',
+      color: 'blue-11',
+      type: '.dotm',
+    },
+
+    'application/vnd.ms-excel': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xls',
+    },
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlsx',
+    },
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.template': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xltx',
+    },
+    'application/vnd.ms-excel.sheet.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlsm',
+    },
+    'application/vnd.ms-excel.template.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xltm',
+    },
+    'application/vnd.ms-excel.addin.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlam',
+    },
+    'application/vnd.ms-excel.sheet.binary.macroEnabled.12': {
+      icon: 'mdi-file-excel-outline',
+      color: 'green-12',
+      type: '.xlsb',
+    },
+
+    'application/vnd.ms-powerpoint': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppt',
+    },
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      {
+        icon: 'mdi-file-powerpoint-outline',
+        color: 'orange-12',
+        type: '.pptx',
+      },
+    'application/vnd.openxmlformats-officedocument.presentationml.template': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.potx',
+    },
+    'application/vnd.openxmlformats-officedocument.presentationml.slideshow': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppsx',
+    },
+    'application/vnd.ms-powerpoint.addin.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppam',
+    },
+    'application/vnd.ms-powerpoint.presentation.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.pptm',
+    },
+    'application/vnd.ms-powerpoint.template.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.potm',
+    },
+    'application/vnd.ms-powerpoint.slideshow.macroEnabled.12': {
+      icon: 'mdi-file-powerpoint-outline',
+      color: 'orange-12',
+      type: '.ppsm',
+    },
+
+    'application/pdf': {
+      icon: 'mdi-file-document-outline',
+      color: 'red-12',
+      type: '.pdf',
+    },
+
+    'text/plain': {
+      icon: 'mdi-file-document-outline',
+      color: 'blue-11',
+      type: '.txt',
+    },
+
+    'image/x-png': {
+      icon: 'mdi-file-image-outline',
+      color: 'blue-11',
+      type: '.png',
+    },
+    'image/x-citrix-jpeg': {
+      icon: 'mdi-file-image-outline',
+      color: 'blue-11',
+      type: '.jpg, jpeg',
+    },
+  }
+
+  function getType(mimeType: any) {
+    if (mimeFileMapping.hasOwnProperty(mimeType)) {
+      return mimeFileMapping[mimeType].type
+    } else {
+      return 'unknow type'
+    }
+  }
+
+  async function getFileInfo(data: EhrFile) {
+    fileInfo.value = data
+  }
+
+  return {
+    mimeFileMapping,
+    isPreview,
+    fileInfo,
+    getFileInfo,
+    getType,
+  }
+})