diff --git a/src/views/home.vue b/src/views/home.vue
index b758a67..07cb5e0 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -120,10 +120,126 @@ onMounted(async () => {
       });
   }
 });
+
+const cards = ref<any[]>([
+  {
+    label: "ระบบบริการเจ้าของข้อมูล",
+    img: "https://bma-sso.frappet.synology.me/images/screen1.png",
+    page: "user",
+    url: "urlUser",
+  },
+  {
+    label: "ระบบลงเวลาปฏิบัติราชการ",
+    img: "https://bma-sso.frappet.synology.me/images/screen2.png",
+    page: "checkin",
+    url: "urlCheckin",
+  },
+  {
+    label: "ระบบบริหารจัดการ",
+    img: "https://bma-sso.frappet.synology.me/images/screen3.png",
+    page: "mgt",
+    url: "urlMgt",
+  },
+  {
+    label: "ระบบแอดมิน",
+    img: "https://bma-sso.frappet.synology.me/images/screen4.png",
+    page: "admin",
+    url: "urlAdmin",
+  },
+]);
 </script>
 
 <template>
-  <div class="q-ma-md">
+  <div class="q-pa-xl">
+    <section class="vh-100">
+      <!-- Background Image -->
+      <div class="bg-img h-50 fixed-top" style="z-index: -1">
+        <img
+          alt=""
+          src="https://bma-sso.frappet.synology.me/images/line2.png"
+          class="img_absolute_line"
+        />
+      </div>
+
+      <q-toolbar class="text-primary">
+        <div class="row items-center q-px-md q-py-sm">
+          <q-img
+            src="https://bma-sso.frappet.synology.me/images/sso.png"
+            style="width: 80px"
+          />
+          <div class="text-white q-ml-md">
+            <div class="text-grey-5 text-caption">
+              Bangkok Metropolitan Administration
+            </div>
+            <div class="text-bold">Single Sign-On</div>
+          </div>
+        </div>
+        <q-space />
+        <div class="row items-center">
+          <div class="text-white q-mr-md">{{ fullname }}</div>
+          <q-btn
+            flat
+            dense
+            color="white"
+            icon="logout"
+            label="ออกจากระบบ"
+            @click="logout"
+          />
+        </div>
+      </q-toolbar>
+
+      <!-- Title Section -->
+      <div class="text-white text-center q-mt-lg">
+        <div class="text-h5 text-bold">
+          ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+        </div>
+        <div class="text-caption q-mt-sm">
+          Human Resource Management System (HRMS)
+        </div>
+      </div>
+
+      <!-- Card Section -->
+      <div class="q-pa-lg q-mt-lg">
+        <div class="row justify-center q-gutter-md">
+          <q-card
+            v-for="(card, index) in cards"
+            :key="index"
+            bordered
+            :class="index % 2 === 0 ? 'my-card' : 'my-card card-right'"
+          >
+            <q-img :src="card.img" />
+
+            <q-card-section>
+              <div class="row col-12">
+                <q-btn
+                  outline
+                  class="full-width"
+                  color="primary"
+                  :label="card.label"
+                  @click="
+                    goPage(
+                      card.page,
+                      card.page === 'user'
+                        ? urlUser
+                        : card.page === 'checkin'
+                        ? urlCheckin
+                        : card.page === 'mgt'
+                        ? urlMgt
+                        : card.page === 'admin'
+                        ? urlAdmin
+                        : ''
+                    )
+                  "
+                />
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <!-- <div class="q-ma-md">
     <div class="row">
       {{ fullname }}
       <q-btn @click="logout()" class="btn_logout">
@@ -131,14 +247,14 @@ onMounted(async () => {
       </q-btn>
     </div>
     <div class="row">
-      <div class="col-4">
+       <div class="col-4">
         <img src="@/assets/screen1.png" style="width: 100%" />
         <div class="h-100 py-3">
           <a @click="goPage('user', urlUser)" class="link">
             ระบบบริการเจ้าของข้อมูล
           </a>
         </div>
-      </div>
+      </div> 
 
       <div class="col-4">
         <img src="@/assets/screen2.png" style="width: 100%" />
@@ -163,11 +279,196 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <style lang="scss" scoped>
-.link {
+.my-card {
+  min-width: 300px;
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 12px; /* มุมโค้งมน */
+  transition: all 0.3s ease; /* ทำให้การเปลี่ยนแปลงดูนุ่มนวล */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อ hover */
+}
+
+.card-left {
+  transform: translateY(-5px);
+}
+
+.card-right {
+  transform: translateY(30px); /* เลื่อนการ์ดลงเล็กน้อย */
+}
+
+.navbar_toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 0px solid rgb(255, 255, 255);
+  border-radius: 0.375rem;
+  transition: box-shadow 0.15s ease-in-out;
+}
+.navbar_toggler:hover {
+  background-color: #00ffc8a1;
+  transition: 0.8s;
+  box-shadow: rgba(255, 255, 255, 0.16) 0px 10px 36px 0px,
+    rgba(255, 255, 255, 0.06) 0px 0px 0px 1px;
+}
+.navbar_toggler_icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background-image: var(--bs-navbar-toggler-icon-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+.h_txt {
+  font-size: 24px;
+  font-weight: 600;
+}
+.s_txt {
+  font-size: 16px;
+  font-weight: 300;
+}
+.btn_logout {
+  text-align: center;
+  text-decoration: none;
+  background-color: rgba(255, 255, 255, 0.2);
   cursor: pointer;
+  border: 0;
+  padding: 8px 10px 8px 10px;
+  border-radius: 50px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+  width: 250px;
+}
+.btn_logout:hover {
+  color: #fff;
+  background-color: #00ffc8a1;
+  transition: 0.8s;
+  box-shadow: rgba(255, 255, 255, 0.16) 0px 10px 36px 0px,
+    rgba(255, 255, 255, 0.06) 0px 0px 0px 1px;
+}
+
+.img_absolute_line {
+  position: absolute;
+  height: 100%;
+  width: auto;
+  left: 0;
+  bottom: 0;
+}
+.txt_detail {
+  color: #c0c0c0;
+}
+.img_absolute {
+  position: absolute;
+  top: -170px;
+}
+.d_over {
+  display: none;
+}
+.btn_custom {
+  background-color: #00aa86;
+  cursor: pointer;
+  border: 0;
+  padding: 8px 0 8px 0;
+  border-radius: 12px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 500;
+}
+.btn_custom:hover {
+  background-color: #00ca9f;
+}
+.bg-img {
+  background: rgb(30, 50, 49);
+  background: linear-gradient(
+    90deg,
+    rgba(30, 50, 49, 1) 0%,
+    rgba(20, 120, 99, 1) 100%
+  );
+  min-height: 480px;
+}
+body {
+  font-family: "Noto Sans Thai", sans-serif !important;
+}
+.h-custom {
+  height: calc(100% - 73px);
+}
+@media only screen and (max-width: 450px) {
+  .h-custom {
+    height: 100%;
+  }
+  .h_txt {
+    font-size: 14px;
+  }
+  .s_txt {
+    font-size: 12px;
+  }
+}
+
+@media only screen and (min-width: 451px) and (max-width: 600px) {
+  .h_txt {
+    font-size: 20px;
+  }
+  .s_txt {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 991px) {
+  /* Up to medium screens */
+
+  .bg_md {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 20px;
+  }
+  .d_over {
+    display: block;
+  }
+  .txt_detail {
+    color: #949494;
+    font-size: 12px;
+  }
+}
+@media only screen and (max-width: 1399px) and (min-width: 1201px) {
+  .box_info {
+    max-height: 280px;
+    width: 280px;
+  }
+  .bg-img {
+    min-height: 468px;
+  }
+}
+@media only screen and (max-width: 1200px) and (min-width: 1101px) {
+  .box_info {
+    max-height: 260px;
+    width: 260px;
+  }
+  .bg-img {
+    min-height: 456px;
+  }
+  .position_box {
+    position: absolute;
+    top: -30px;
+  }
+}
+@media only screen and (max-width: 1100px) and (min-width: 992px) {
+  .box_info {
+    max-height: 240px;
+    width: 240px;
+  }
+  .bg-img {
+    min-height: 456px;
+  }
+  .position_box {
+    position: absolute;
+    top: -18px;
+  }
 }
 </style>