diff --git a/src/assets/book.png b/src/assets/book.png
new file mode 100644
index 0000000..d4e9566
Binary files /dev/null and b/src/assets/book.png differ
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6b1518e..3ebd916 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import doc from '@/api/document'
-import cover from '@/assets/cover.png'
+import book from '@/assets/book.png'
 import type { StorageFile, MetadataObject } from '@/interface/response/storage'
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -25,33 +25,59 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="row col-xs-12 col-sm-11 col-md-10 col-lg-9 justify-center">
+  <div class="row col-xs-12 col-sm-10 col-md-12 col-lg-12 justify-center">
     <div class="col-12 text-left">
-      <div class="text-h6 text-weight-bold q-mb-md">{{ metadata?.additionalProp1 }}</div>
-    </div>
-    <div class="row col-12">
-      <div class="col-xs-12 col-sm-4 q-my-sm">
-        <img :src="cover" class="frame" style="object-fit: cover" />
+      <div class="text-h6 text-weight-bold q-mb-md">
+        {{ metadata?.additionalProp1 }}
       </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-12 q-mt-sm">
-              <div class="col-4 text-title">ชื่อเรื่อง</div>
-              <div class="col-8 text-body">{{ metadata?.subject || data?.fileName }}</div>
-            </div>
+    </div>
 
-            <div class="row col-12">
-              <div class="col-4 text-title">เจ้าของผลงาน</div>
-              <div class="col-8 text-body">{{ metadata?.author || data?.author }}</div>
-            </div>
+      <div class="row col-12 relative-position" 
+      :style=" $q.screen.xs ? 'height: 50px'
+              :$q.screen.sm ? 'height: 60px'
+              :$q.screen.md ? 'height: 70px'
+              :$q.screen.gt.lg ? 'height: 120px'
+              : 'height: 60px'
+            "
+      >
+        <q-img
+          :src="book"
+          class="fixed-top absolute-center"
+          :style=" $q.screen.xs ? 'height: auto; max-width: 160px; top: -40px'
+                  :$q.screen.sm ? 'height: auto; max-width: 190px; top: -50px'
+                  :$q.screen.md ? 'height: auto; max-width: 200px; top: -40px'
+                  :$q.screen.gt.lg ? 'height: auto; max-width: 250px; top: -50px'
+                  :'height: auto; max-width: 250px; top: -70px'
+                  "
+        />
+      </div>
 
-            <div class="row col-12">
-              <div class="col-4 text-title">ตำแหน่งที่ได้รับ</div>
-              <div class="col-8 text-body">{{ metadata?.position || '-' }}</div>
+      <div class="row col-12 justify-center q-px-lg">
+        <div
+          class="row col-xs-12 col-sm-9 col-md-8 col-lg-9 q-col-gutter-y-lg text-left"
+        >
+          <div class="col-12 q-my-lg">
+            <div class="text-h5 text-center text-bold q-mb-md">{{ metadata?.subject || data?.fileName }}</div>
+            <div class="text-body text-center">
+              {{ metadata?.author || data?.author }}
             </div>
+          </div>
 
-            <!-- <div class="row col-12">
+          <!-- <div class="row col-12">
+            <div class="col-4 text-title text-left">เจ้าของผลงาน</div>
+            <div class="col-8 text-body text-right">
+              {{ metadata?.author || data?.author }}
+            </div>
+          </div> -->
+
+          <div class="row col-12">
+            <div class="col-4 text-title text-left">ตำแหน่งที่ได้รับ</div>
+            <div class="col-8 text-body text-right">
+              {{ metadata?.position || '-' }}
+            </div>
+          </div>
+
+          <!-- <div class="row col-12">
               <div class="col-4 text-title">กลุ่ม/หมวดหมู่</div>
               <div class="col-8 text-body">
                 {{
@@ -63,7 +89,7 @@ onMounted(async () => {
               </div>
             </div> -->
 
-            <!-- <div class="row col-12">
+          <!-- <div class="row col-12">
               <div class="col-4 text-title">คำสำคัญ</div>
               <div class="col-8 text-body">
                 {{
@@ -75,63 +101,60 @@ onMounted(async () => {
               </div>
             </div> -->
 
-            <div class="row col-12">
-              <div class="col-4 text-title">ขนาดไฟล์</div>
-              <div class="col-8 text-body">
-                {{ data && doc.util.formatBytes(data.fileSize) }}
-              </div>
+          <div class="row col-12">
+            <div class="col-4 text-title text-left">ขนาดไฟล์</div>
+            <div class="col-8 text-body text-right">
+              {{ 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">
-                {{
-                  data &&
-                  new Date(data.createdAt).toLocaleDateString('th', {
-                    day: 'numeric',
-                    month: 'short',
-                    year: 'numeric',
-                  })
-                }}
-              </div>
+          <div class="row col-12">
+            <div class="col-4 text-title text-left">วันที่อัปโหลด</div>
+            <div class="col-8 text-body text-right">
+              {{
+                data &&
+                new Date(data.createdAt).toLocaleDateString('th', {
+                  day: 'numeric',
+                  month: 'short',
+                  year: 'numeric',
+                })
+              }}
             </div>
+          </div>
+          <div class="col-12 q-mb-md q-mt-lg">
+            <q-separator color="grey-6" />
+          </div>
+          <div class="col-12 row justify-center">
 
-            <div class="col-12 row">
-              <q-btn
-                unelevated
-                rounded
-                color="primary"
-                size="md"
-                class="col-6 btn"
-                @click="
-                  () =>
-                    data &&
-                    doc.util.download(
-                      data.downloadUrl,
-                      data.fileName,
-                    )
-                "
+            <q-btn
+              unelevated
+              color="primary"
+              size="md"
+              class="col-12 btn"
+              @click="
+                () => data && doc.util.download(data.downloadUrl, data.fileName)
+              "
+              style="border-radius:10px ;"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="22"
+                height="23"
+                viewBox="0 0 22 23"
+                fill="none"
               >
-                <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>
-            </div>
+                <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>
           </div>
         </div>
       </div>
     </div>
-  </div>
+
 </template>
 
 <style>
@@ -151,7 +174,7 @@ onMounted(async () => {
   color: #818181;
 }
 .btn {
-  margin-top: 50px;
   box-shadow: 0px 4px 10px 0px rgba(120, 207, 197, 0.721);
 }
+
 </style>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index df50059..25cd9c0 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,45 +1,65 @@
 <script setup lang="ts">
-import { ref} from "vue";
-import { useRouter } from "vue-router";
-import { useQuasar } from "quasar";
-const router = useRouter();
-const $q = useQuasar();
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+const router = useRouter()
+const $q = useQuasar()
 const tab = ref('')
-
 </script>
 <!-- โครงเว็บ -->
 <template>
-	<q-layout view="hHh LpR fFr" class="">		
-		<!-- header -->
-		<q-header flat class="text-dark col-12 bgHeader" height-hint="7">
-			<q-toolbar class="items-center row justify-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
-				<div class="row items-center no-wrap cursor-pointer">
-					<svg xmlns="http://www.w3.org/2000/svg" width="35" viewBox="0 0 47 36" fill="none">
-						<path d="M42.7273 1.05882C40.3559 0.317647 37.7495 0 35.25 0C31.0841 0 26.5977 0.847059 23.5 3.17647C20.4023 0.847059 15.9159 0 11.75 0C7.58409 0 3.09773 0.847059 0 3.17647V34.2C0 34.7294 0.534091 35.2588 1.06818 35.2588C1.28182 35.2588 1.38864 35.1529 1.60227 35.1529C4.48636 33.7765 8.65227 32.8235 11.75 32.8235C15.9159 32.8235 20.4023 33.6706 23.5 36C26.3841 34.2 31.6182 32.8235 35.25 32.8235C38.775 32.8235 42.4068 33.4588 45.3977 35.0471C45.6114 35.1529 45.7182 35.1529 45.9318 35.1529C46.4659 35.1529 47 34.6235 47 34.0941V3.17647C45.7182 2.22353 44.3295 1.58824 42.7273 1.05882ZM42.7273 29.6471C40.3773 28.9059 37.8136 28.5882 35.25 28.5882C31.6182 28.5882 26.3841 29.9647 23.5 31.7647V7.41177C26.3841 5.61176 31.6182 4.23529 35.25 4.23529C37.8136 4.23529 40.3773 4.55294 42.7273 5.29412V29.6471Z" fill="white"/>
-					</svg>
-				</div>
-			</q-toolbar>
-		</q-header>
+  <q-layout view="hHh LpR fFr" class="bg-top" style="">
+    <!-- header -->
+    <q-header flat class="text-dark col-12 bgHeader" height-hint="7">
+      <q-toolbar
+        class="items-center row justify-center"
+        :style="$q.screen.gt.sm ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
+      >
+        <div class="row items-center no-wrap cursor-pointer">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="35"
+            viewBox="0 0 47 36"
+            fill="none"
+          >
+            <path
+              d="M42.7273 1.05882C40.3559 0.317647 37.7495 0 35.25 0C31.0841 0 26.5977 0.847059 23.5 3.17647C20.4023 0.847059 15.9159 0 11.75 0C7.58409 0 3.09773 0.847059 0 3.17647V34.2C0 34.7294 0.534091 35.2588 1.06818 35.2588C1.28182 35.2588 1.38864 35.1529 1.60227 35.1529C4.48636 33.7765 8.65227 32.8235 11.75 32.8235C15.9159 32.8235 20.4023 33.6706 23.5 36C26.3841 34.2 31.6182 32.8235 35.25 32.8235C38.775 32.8235 42.4068 33.4588 45.3977 35.0471C45.6114 35.1529 45.7182 35.1529 45.9318 35.1529C46.4659 35.1529 47 34.6235 47 34.0941V3.17647C45.7182 2.22353 44.3295 1.58824 42.7273 1.05882ZM42.7273 29.6471C40.3773 28.9059 37.8136 28.5882 35.25 28.5882C31.6182 28.5882 26.3841 29.9647 23.5 31.7647V7.41177C26.3841 5.61176 31.6182 4.23529 35.25 4.23529C37.8136 4.23529 40.3773 4.55294 42.7273 5.29412V29.6471Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </q-toolbar>
+    </q-header>
 
-		<div class="bg-top"  :style="$q.screen.gt.xs ? 'height: 440px;': 'height: 400px;'" />
-		<!-- end header -->
+    <!-- end header -->
 
-		<q-page-container class="q-pb-md">
-			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -420px; min-height: 100%;': 'padding: 5% 4%; margin-top: -400px;'">
-				<div class="col-12 row justify-center">
-					<router-view :key="$route.fullPath" />
-				</div>
-			</q-page>
-		</q-page-container>
-	</q-layout>
+    <q-page-container>
+      <div class="row justify-center">
+        <div
+          class="bg-white"
+          :style="
+            $q.screen.xs ? 'padding: 5% 4%; margin:130px 0 0 0; min-height: calc(100vh - 180px); min-width:100vw;'
+              : $q.screen.sm ? 'padding: 5% 4%; margin:200px 0 0 0; min-height: calc(100vh - 250px); min-width:100vw;'
+              : $q.screen.md ? 'padding: 1.8% 2%; margin:200px 250px 0 250px; min-height: calc(100vh - 250px); max-width:700px;'
+              : $q.screen.gt.lg ? 'padding: 1.8% 2%; margin:200px 250px 0 250px; min-height: calc(100vh - 270px); max-width:700px;'
+              : 'padding: 1.8% 2%; margin:200px 250px 0 250px; min-height: calc(100vh - 260px); max-width:700px;'
+          "
+        >
+          <div class="col-12">
+            <router-view :key="$route.fullPath" />
+          </div>
+        </div>
+      </div>
+    </q-page-container>
+  </q-layout>
 </template>
 
 <style>
-.border-100{
-	border-radius: 100px;
+.border-100 {
+  border-radius: 100px;
 }
-.bg-header{
- 	background:rgba(39, 50, 56, 0)8 !important;
+.bg-header {
+  background: rgba(39, 50, 56, 0) 8 !important;
 }
 
 .q-card {
@@ -49,20 +69,20 @@ const tab = ref('')
 .q-menu {
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
-.q-field--outlined .q-field__control{
-	border-radius: 5px;
+.q-field--outlined .q-field__control {
+  border-radius: 5px;
 }
 .q-field--outlined .q-field__control:before {
-  border-color: #C8D3DB;
+  border-color: #c8d3db;
 }
-.q-field--outlined .q-icon{
-	color: #7474747f;
+.q-field--outlined .q-icon {
+  color: #7474747f;
 }
-.bgHeader{
-	background: #273238;
-	box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.40);
+.bgHeader {
+  background: #273238;
+  box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.4);
 }
-.bg-top{
-	background: #F7F9FA;
+.bg-top {
+  background: #eaeaea;
 }
 </style>