diff --git a/src/views/home.vue b/src/views/home.vue
index 309fec4..1b1fd9a 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -121,10 +121,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">
+  <!-- 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>
+
+  <div class="row justify-center">
+    <div class="col-9 q-pa-xl">
+      <q-toolbar style="padding: 0px">
+        <div class="row items-center 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" v-if="$q.screen.md">
+            <div class="text-grey-5 text-caption">
+              Bangkok Metropolitan Administration
+            </div>
+            <div class="text-bold text-left">Single Sign-On</div>
+          </div>
+        </div>
+        <q-space />
+        <div class="row items-center q-col-gutter-md">
+          <div class="text-white">{{ fullname }}</div>
+          <div>
+            <q-btn @click="logout()" class="btn_logout">
+              ออกจากระบบ <i class="mdi mdi-logout"></i>
+            </q-btn>
+          </div>
+        </div>
+      </q-toolbar>
+
+      <!-- Title Section -->
+      <div class="text-white text-center" style="margin-top: 30px">
+        <div class="text-h5 text-bold">
+          ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
+        </div>
+        <div class="text-caption q-mt-sm">
+          Human Resource Management System (HRMS)
+        </div>
+      </div>
+
+      <!-- Card Section justify-center-->
+      <div class="q-mt-xl">
+        <div class="row q-col-gutter-md">
+          <div class="col" v-for="(card, index) in cards" :key="index">
+            <q-card
+              bordered
+              class="my-card"
+              :class="
+                $q.screen.gt.md ? (index % 2 === 0 ? '' : '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>
+      </div>
+    </div>
+  </div>
+
+  <!-- <div class="q-ma-md">
     <div class="row">
       {{ fullname }}
       <q-btn @click="logout()" class="btn_logout">
@@ -132,14 +248,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%" />
@@ -164,11 +280,61 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <style lang="scss" scoped>
-.link {
+.my-card {
+  width: 100%;
+  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); /* เลื่อนการ์ดลงเล็กน้อย */
+}
+
+.btn_logout {
+  text-align: center;
+  text-decoration: none;
+  background-color: rgba(255, 255, 255, 0.2);
   cursor: pointer;
+  border: 0;
+
+  border-radius: 50px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+}
+.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;
+}
+
+.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;
 }
 </style>