diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6c19dcb..b8d0053 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,193 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-12">
-      <q-card flat class="row col-12 cardNone">
-        Publish
-      </q-card>
+  <div class="div">
+    <div class="bgGrey">
+      <img
+        loading="lazy"
+        src="https://cdn.builder.io/api/v1/image/assets/TEMP/8059506daf32efc681465813bc7bdd3b52e3bafa93cfd733b357d6043617f3f8?"
+        class="img"
+      />
+    </div>
+    <div class="text-h6 text-weight-bold">วิธีชนะมิตรและจูงใจคน</div>
+    <q-card bordered class="col-12">
+      <q-img
+        loading="lazy"
+        src="https://laz-img-sg.alicdn.com/p/6f38dbbe4df6e0b10d1c7ce97f2c9d3e.jpg"
+        class="col-12 q-px-md q-pb-md"
+        max-width="100%"
+      />
+      <q-card-section class="q-pt-md q-pb-md">
+        <div class="row items-stretch">
+          <div class="col-6">
+            <div class="row q-mt-md">
+              <div class="col-4 text-bold" style="color: black">ชื่อเรื่อง</div>
+              <div class="col-8 text-body" style="color: #818181">
+                วิธีชนะมิตรและจูงใจคน
+              </div>
+            </div>
+
+            <div class="row q-mt-md">
+              <div class="col-4 text-bold" style="color: black">
+                เจ้าของผลงาน
+              </div>
+              <div class="col-8 text-body" style="color: #818181">
+                ธัญลักษณ์ รอดกูล
+              </div>
+            </div>
+
+            <div class="row q-mt-md">
+              <div class="col-4 text-bold" style="color: black">
+                กลุ่ม/หมวดหมู่
+              </div>
+              <div class="col-8 text-body" style="color: #818181">ศิลปะ</div>
+            </div>
+
+            <div class="row q-mt-md">
+              <div class="col-4 text-bold" style="color: black">คำสำคัญ</div>
+              <div class="col-8 text-body" style="color: #818181">
+                ศิลปะ , ภาพวาด
+              </div>
+            </div>
+
+            <div class="row q-mt-md">
+              <div class="col-4 text-bold" style="color: black">ขนาดไฟล์</div>
+              <div class="col-8 text-body" style="color: #818181">
+                753.55 KB
+              </div>
+            </div>
+
+            <div class="row q-mt-md">
+              <div class="col-4 text-bold" style="color: black">
+                วันที่อัปโหลด
+              </div>
+              <div class="col-8 text-body" style="color: #818181">
+                9 พ.ย. 2566
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+    <div class="whiteBox">
+      <div class="download">
+        <div class="div-22">
+          <img
+            loading="lazy"
+            src="https://cdn.builder.io/api/v1/image/assets/TEMP/86b98ddb5efca7fc0aefa9aeee8ae044e878760140eadaef9e252787edfa6285?"
+            class="img-3"
+          />
+          <div class="div-23">ดาว์นโหลด</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.div {
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
+  background-color: #f7f9fa;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+.bgGrey {
+  box-shadow: 0px 4px 20px 0px rgba(224, 235, 240, 0.4);
+  background-color: #273238;
+  align-self: stretch;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 27px 60px;
+}
+@media (max-width: 991px) {
+  .bgGrey {
+    max-width: 100%;
+    padding: 0 20px;
+  }
+}
+.img {
+  aspect-ratio: 1.31;
+  object-fit: contain;
+  object-position: center;
+  width: 47px;
+  fill: #fff;
+  overflow: hidden;
+  max-width: 100%;
+}
+.img-2 {
+  aspect-ratio: 0.71;
+  object-fit: contain;
+  object-position: center;
+  max-width: 50%;
+  overflow: hidden;
+  flex-grow: 1;
+  flex-basis: 0%;
+}
+@media (max-width: 991px) {
+  .img-2 {
+    max-width: 100%;
+  }
+}
+.whiteBox {
+  box-shadow: 0px 4px 22px 0px rgba(200, 211, 219, 0.22);
+  background-color: #fff;
+  align-self: stretch;
+  display: flex;
+  margin-top: -277px;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 50px 60px;
+}
+@media (max-width: 991px) {
+  .whiteBox {
+    max-width: 100%;
+    margin-top: -200px;
+    padding: 0 20px;
+  }
+}
+.download {
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid #00aa86;
+  background-color: #00aa86;
+  display: flex;
+  width: 495px;
+  max-width: 100%;
+  flex-direction: column;
+  margin: 17px 0 308px 153px;
+  padding: 13px 60px;
+}
+@media (max-width: 991px) {
+  .download {
+    margin-bottom: 40px;
+    padding: 0 20px;
+  }
+}
+.div-22 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.img-3 {
+  aspect-ratio: 1;
+  object-fit: contain;
+  object-position: center;
+  width: 22px;
+  overflow: hidden;
+  max-width: 100%;
+  margin: auto 0;
+}
+.div-23 {
+  color: #fff;
+  letter-spacing: 0.04px;
+  align-self: stretch;
+  font: 400 18px Noto Sans, sans-serif;
+}
+</style>