diff --git a/src/assets/cover.png b/src/assets/cover.png
new file mode 100644
index 0000000..e4df1a3
Binary files /dev/null and b/src/assets/cover.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index 172b1ec..9d3da1b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,23 +2,23 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 /* import HomeView from '@/views/HomeView.vue' */
 
-const MainLayout = () => import("@/views/MainLayout.vue");
-const HomeView = () => import("@/views/HomeView.vue");
+const MainLayout = () => import('@/views/MainLayout.vue')
+const HomeView = () => import('@/views/HomeView.vue')
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: '/:id',
       name: 'home',
       component: MainLayout,
-      children:[
+      children: [
         {
-          path: "/",
-          name: "HomeView",
+          path: '/:id',
+          name: 'HomeView',
           component: HomeView,
         },
-      ]
+      ],
     },
     {
       path: '/:pathMatch(.*)*',
@@ -31,8 +31,8 @@ const router = createRouter({
   ],
 })
 
-router.beforeEach((to, from, next) => {
-    next();
+router.beforeEach((_to, _from, next) => {
+  next()
 })
 
 export default router
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2da31b8..cc2df7e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,51 +1,128 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import doc from '@/api/document'
+import cover from '@/assets/cover.png'
+import type { StorageFile } from '@/interface/response/storage'
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const data = ref<StorageFile & { downloadUrl: string }>()
+const metadata = ref<{ [key: string]: string }>()
+
+const route = useRoute()
+
+onMounted(async () => {
+  const result = await doc.info(
+    'เล่ม 2',
+    route.params.id as string,
+    '1-เอกสาร 2'
+  )
+
+  if (result) {
+    data.value = result
+    metadata.value = result.description
+      ? JSON.parse(result.description)
+      : undefined
+    console.log(result)
+    console.log(result)
+  }
+})
+</script>
 
 <template>
   <div class="row col-xs-12 col-sm-11 col-md-10 col-lg-9 justify-center">
     <div class="col-12 text-left">
-      <div class="text-h6 text-weight-bold q-mb-md">วิธีชนะมิตรและจูงใจคน</div>
+      <div class="text-h6 text-weight-bold q-mb-md">{{ data?.fileName }}</div>
     </div>
     <div class="row col-12">
       <div class="col-xs-12 col-sm-4 q-my-sm">
-        <iframe src="https://drive.google.com/file/d/1yaSwM6hsXphmMX5N0q-v8-HUCkhSvqg4/preview" class="frame" allow="autoplay"></iframe>
+        <img :src="cover" class="frame" style="object-fit: cover" />
       </div>
       <div class="col-xs-12 col-sm-8 q-px-md">
         <div class="row col-12 justify-center">
-          <div class="row col-xs-12 col-sm-10 q-col-gutter-y-lg text-left ">
+          <div class="row col-xs-12 col-sm-10 q-col-gutter-y-lg text-left">
             <div class="row col-12 q-mt-sm">
               <div class="col-4 text-title">ชื่อเรื่อง</div>
-              <div class="col-8 text-body">วิธีชนะมิตรและจูงใจคน</div>
+              <div class="col-8 text-body">{{ data?.title || '-' }}</div>
             </div>
 
             <div class="row col-12">
               <div class="col-4 text-title">เจ้าของผลงาน</div>
-              <div class="col-8 text-body">ธัญลักษณ์ รอดกูล</div>
+              <div class="col-8 text-body">{{ metadata?.author || '-' }}</div>
             </div>
 
             <div class="row col-12">
               <div class="col-4 text-title">กลุ่ม/หมวดหมู่</div>
-              <div class="col-8 text-body">ศิลปะ</div>
+              <div class="col-8 text-body">
+                {{
+                  (data &&
+                    data.category.length > 0 &&
+                    data.category.join(', ')) ||
+                  '-'
+                }}
+              </div>
             </div>
 
             <div class="row col-12">
               <div class="col-4 text-title">คำสำคัญ</div>
-              <div class="col-8 text-body">ศิลปะ , ภาพวาด</div>
+              <div class="col-8 text-body">
+                {{
+                  (data &&
+                    data.keyword.length > 0 &&
+                    data.keyword.join(', ')) ||
+                  '-'
+                }}
+              </div>
             </div>
 
             <div class="row col-12">
               <div class="col-4 text-title">ขนาดไฟล์</div>
-              <div class="col-8 text-body">753.55 KB</div>
+              <div class="col-8 text-body">
+                {{ data && doc.util.formatBytes(data.fileSize) }}
+              </div>
             </div>
 
             <div class="row col-12">
               <div class="col-4 text-title">วันที่อัปโหลด</div>
-              <div class="col-8 text-body">9 พ.ย. 2566</div>
+              <div class="col-8 text-body">
+                {{
+                  data &&
+                  new Date(data.createdAt).toLocaleDateString('th', {
+                    day: 'numeric',
+                    month: 'short',
+                    year: 'numeric',
+                  })
+                }}
+              </div>
             </div>
 
             <div class="col-12 row">
-              <q-btn color="primary" rounded size="md" unelevated class="col-6 btn">
-                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="23" viewBox="0 0 22 23" fill="none">
-                  <path d="M1.83334 11.5H3.66668V16.0833H18.3333V11.5H20.1667V16.0833C20.1667 17.1008 19.3508 17.9167 18.3333 17.9167H3.66668C2.65834 17.9167 1.83334 17.1008 1.83334 16.0833V11.5ZM11 14.25L16.0875 9.24501L14.7858 7.95251L11.9167 10.8125V2.33334H10.0833V10.8125L7.22334 7.95251L5.92168 9.25418L11 14.25Z" fill="white"/>
+              <q-btn
+                unelevated
+                rounded
+                color="primary"
+                size="md"
+                class="col-6 btn"
+                @click="
+                  () =>
+                    data &&
+                    doc.util.download(
+                      data.downloadUrl,
+                      data.fileName,
+                      data.fileType
+                    )
+                "
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="22"
+                  height="23"
+                  viewBox="0 0 22 23"
+                  fill="none"
+                >
+                  <path
+                    d="M1.83334 11.5H3.66668V16.0833H18.3333V11.5H20.1667V16.0833C20.1667 17.1008 19.3508 17.9167 18.3333 17.9167H3.66668C2.65834 17.9167 1.83334 17.1008 1.83334 16.0833V11.5ZM11 14.25L16.0875 9.24501L14.7858 7.95251L11.9167 10.8125V2.33334H10.0833V10.8125L7.22334 7.95251L5.92168 9.25418L11 14.25Z"
+                    fill="white"
+                  />
                 </svg>
                 <span class="q-pl-md">ดาว์นโหลด</span>
               </q-btn>
@@ -57,24 +134,24 @@
   </div>
 </template>
 
-<style >
- .frame {
+<style>
+.frame {
   width: 100%;
   height: 500px;
-  border: 1px solid #C8D3DB !important;
+  border: 1px solid #c8d3db !important;
   border-radius: 5px;
   background-color: white;
   box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.537);
- }
- .text-title{
-  color: #35473C;
+}
+.text-title {
+  color: #35473c;
   font-weight: 600;
- }
- .text-body{
+}
+.text-body {
   color: #818181;
- }
- .btn{
+}
+.btn {
   margin-top: 50px;
   box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
- }
+}
 </style>