diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index 14def36..0941198 100644
--- a/src/interface/index/Main.ts
+++ b/src/interface/index/Main.ts
@@ -1,49 +1,55 @@
 interface DataOption {
-  id: string
-  name: string
+  id: string;
+  name: string;
+}
+
+interface DateCards {
+  label: string;
+  img: string;
+  page: string;
 }
 
 interface DataDateMonthObject {
-  month: number
-  year: number
+  month: number;
+  year: number;
 }
 interface FormRef {
-  date: object | null
-  reason: object | null
-  [key: string]: any
+  date: object | null;
+  reason: object | null;
+  [key: string]: any;
 }
 interface notiType {
-  id: string
-  sender: string
-  body: string
-  timereceive: Date
-  isOpen: boolean
+  id: string;
+  sender: string;
+  body: string;
+  timereceive: Date;
+  isOpen: boolean;
 }
 
 interface LocationObject {
-  latitude: number
-  longitude: number
+  latitude: number;
+  longitude: number;
 }
 
 interface Pagination {
-  sortBy: string | null
-  descending: boolean
-  page: number
-  rowsPerPage: number | undefined
+  sortBy: string | null;
+  descending: boolean;
+  page: number;
+  rowsPerPage: number | undefined;
 }
 interface DataCheckIn {
-  checkInDate: string
-  checkInDateTime: string
-  checkInId: string
-  checkInLocation: string
-  checkInStatus: string
-  checkInTime: string
-  checkOutLocation: string
-  checkOutStatus: string
-  checkOutTime: string
-  editReason: string
-  editStatus: string
-  isEdit: boolean
+  checkInDate: string;
+  checkInDateTime: string;
+  checkInId: string;
+  checkInLocation: string;
+  checkInStatus: string;
+  checkInTime: string;
+  checkOutLocation: string;
+  checkOutStatus: string;
+  checkOutTime: string;
+  editReason: string;
+  editStatus: string;
+  isEdit: boolean;
 }
 
 export type {
@@ -54,4 +60,5 @@ export type {
   LocationObject,
   Pagination,
   DataCheckIn,
-}
+  DateCards,
+};
diff --git a/src/views/home.vue b/src/views/home.vue
index 1b1fd9a..986c751 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -7,6 +7,12 @@ import axios from "axios";
 import config from "@/app.config";
 
 import CustomComponent from "@/components/CustomDialog.vue";
+import screen1 from "@/assets/screen1.png";
+import screen2 from "@/assets/screen2.png";
+import screen3 from "@/assets/screen3.png";
+import screen4 from "@/assets/screen4.png";
+
+import type { DateCards } from "@/interface/index/Main";
 
 const $q = useQuasar();
 
@@ -15,6 +21,29 @@ const urlUser = import.meta.env.VITE_URL_USER ?? "";
 const urlMgt = import.meta.env.VITE_URL_MGT ?? "";
 const urlCheckin = import.meta.env.VITE_URL_CHECKIN ?? "";
 
+const cards = ref<DateCards[]>([
+  {
+    label: "ระบบบริการเจ้าของข้อมูล",
+    img: screen1,
+    page: "user",
+  },
+  {
+    label: "ระบบลงเวลาปฏิบัติราชการ",
+    img: screen2,
+    page: "checkin",
+  },
+  {
+    label: "ระบบบริหารจัดการ",
+    img: screen3,
+    page: "mgt",
+  },
+  {
+    label: "ระบบแอดมิน",
+    img: screen4,
+    page: "admin",
+  },
+]);
+
 const token = ref<any>("");
 const refreshToken = ref<any>("");
 const fullname = computed(() => {
@@ -121,33 +150,6 @@ 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>
@@ -161,14 +163,12 @@ const cards = ref<any[]>([
   </div>
 
   <div class="row justify-center">
-    <div class="col-9 q-pa-xl">
+    <div class="col-md-8 col-sm-12">
       <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">
+          <q-img src="@/assets/sso.png" style="width: 80px" />
+
+          <div class="text-white q-ml-md" v-if="$q.screen.gt.md">
             <div class="text-grey-5 text-caption">
               Bangkok Metropolitan Administration
             </div>
@@ -177,18 +177,24 @@ const cards = ref<any[]>([
         </div>
         <q-space />
         <div class="row items-center q-col-gutter-md">
-          <div class="text-white">{{ fullname }}</div>
+          <div class="text-white">
+            {{ fullname }}
+          </div>
           <div>
-            <q-btn @click="logout()" class="btn_logout">
-              ออกจากระบบ <i class="mdi mdi-logout"></i>
+            <q-btn
+              @click="logout()"
+              class="btn_logout"
+              icon="mdi-logout"
+              :label="$q.screen.gt.md ? 'ออกจากระบบ' : ''"
+            >
             </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 class="text-white text-center" style="margin-top: 80px">
+        <div class="text-bold" :class="!$q.screen.gt.sm ? '' : 'text-h5'">
           ระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
         </div>
         <div class="text-caption q-mt-sm">
@@ -196,11 +202,15 @@ const cards = ref<any[]>([
         </div>
       </div>
 
-      <!-- Card Section justify-center-->
-      <div class="q-mt-xl">
-        <div class="row q-col-gutter-md">
+      <!-- Card Section -->
+      <div
+        class="q-mt-xl"
+        :class="!$q.screen.gt.md ? 'row justify-center' : ''"
+      >
+        <div class="q-col-gutter-md" :class="$q.screen.gt.md ? 'row' : ''">
           <div class="col" v-for="(card, index) in cards" :key="index">
             <q-card
+              :style="!$q.screen.gt.md ? 'width: 300px' : ''"
               bordered
               class="my-card"
               :class="
@@ -248,14 +258,14 @@ const cards = ref<any[]>([
       </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%" />
@@ -292,10 +302,6 @@ const cards = ref<any[]>([
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อ hover */
 }
 
-.card-left {
-  transform: translateY(-5px);
-}
-
 .card-right {
   transform: translateY(30px); /* เลื่อนการ์ดลงเล็กน้อย */
 }