diff --git a/README.md b/README.md
index 579ee97..bf53288 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# BMA ระบบลงเวลาเข้า-ออกงาน
+# HRMS ระบบลงเวลาเข้า-ออกงาน
 
 ## Project setup
 
diff --git a/index.html b/index.html
index 52d9075..4828cc4 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BMA ระบบลงเวลาเข้า-ออกงาน</title>
+    <title>HRMS ระบบลงเวลาเข้า-ออกงาน</title>
     <style>
       html,
       body,
@@ -20,10 +20,10 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
     <script src="https://js.arcgis.com/4.19/"></script>
-    <link
+    <!-- <link
       rel="stylesheet"
       href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
     />
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58&libraries=places"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58&libraries=places"></script> -->
   </body>
 </html>
diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index aaeac0f..9bed6e4 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -199,22 +199,62 @@ onMounted(async () => {
 <template>
   <!-- Loading skeleton -->
   <div v-if="!poiPlaceName" class="col-12">
-    <q-skeleton height="35vh" width="100%" class="bg-grey-4" />
+    <q-skeleton
+      :height="$q.screen.gt.xs ? '35vh' : '45px'"
+      width="100%"
+      :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
+      class="bg-grey-4"
+    />
   </div>
 
-  <q-card v-show="poiPlaceName" bordered flat class="col-12 bg-grey-2 shadow-0">
-    <div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
+  <q-card
+    v-show="poiPlaceName"
+    bordered
+    flat
+    class="col-12 bg-grey-2 shadow-0"
+    :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
+  >
+    <div v-if="$q.screen.gt.xs">
+      <div id="mapViewDisplay" style="height: 35vh; pointer-events: none"></div>
 
-    <div
-      :class="
-        $q.screen.gt.xs
-          ? 'q-pa-xs text-weight-medium text-grey-8'
-          : 'q-pa-xs text-weight-medium text-grey-8'
-      "
-    >
-      พื้นที่ใกล้เคียง
-      <span class="q-px-sm">:</span>
-      {{ poiPlaceName }}
+      <div
+        :class="
+          $q.screen.gt.xs
+            ? 'q-pa-xs text-weight-medium text-grey-8'
+            : 'q-pa-xs text-weight-medium text-grey-8'
+        "
+      >
+        พื้นที่ใกล้เคียง
+        <span class="q-px-sm">:</span>
+        {{ poiPlaceName }}
+      </div>
     </div>
+
+    <q-card v-else style="border-radius: 20px">
+      <q-expansion-item
+        class="shadow-1 overflow-hidden bg-grey-4 text-left"
+        style="border-radius: 20px"
+        dense
+        default-opened
+      >
+        <template v-slot:header>
+          <q-item-section avatar class="q-pr-none expanAS">
+            <q-avatar icon="mdi-map-marker" />
+          </q-item-section>
+
+          <q-item-section>
+            {{ poiPlaceName }}
+          </q-item-section>
+        </template>
+
+        <div id="mapViewDisplay" style="height: 20vh"></div>
+      </q-expansion-item>
+    </q-card>
   </q-card>
 </template>
+
+<style>
+.expanAS.q-item__section--avatar {
+  min-width: 40px !important;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index de8d3f1..23e3edb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,7 +13,7 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'main',
       component: MainView,
       children: [
         {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f098690..da900af 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -50,6 +50,8 @@ const Thai = ref<Date>(dateNow.value)
 const formattedS = ref()
 const formattedM = ref()
 const formattedH = ref()
+const formattedHH = ref()
+const formattedA = ref()
 
 /** function อัพเดทเวลา*/
 function updateClock() {
@@ -57,9 +59,14 @@ function updateClock() {
   const hh = moment(date).format('HH')
   const mm = moment(date).format('mm')
   const ss = moment(date).format('ss')
+  const HH = moment(date).format('hh')
+  const A = moment(date).format('a')
+
   formattedS.value = ss
   formattedM.value = mm
   formattedH.value = hh
+  formattedHH.value = HH
+  formattedA.value = A
 }
 setInterval(updateClock, 1000)
 
@@ -254,11 +261,17 @@ function updateWorkplace() {
  */
 const getClass = (val: boolean) => {
   return {
-    'bg-primary text-white col-12 row items-center q-px-md q-py-sm': val,
-    'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm': !val,
+    'bg-primary text-white col-12 row items-center q-px-md q-py-sm ': val,
+    'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm ': !val,
   }
 }
 
+const getClassXS = (val: boolean) => {
+  return {
+    'bg-topIn text-white q-pa-lg col-12 row': val,
+    'bg-topOut text-white q-pa-lg col-12 row': !val,
+  }
+}
 const inQueue = ref<boolean>(false)
 
 async function fetchCheckStatus() {
@@ -312,252 +325,445 @@ onMounted(async () => {
 </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">
-        <!-- <q-header elevated class="bg-purple"> -->
-        <q-toolbar :class="getClass(stetusCheckin)">
-          <div class="row col-12 justify-center">
-            <!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
-              ลงเวลาเข้างาน
-            </strong> -->
-            <!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
-            <strong v-if="!stetusCheckin && inQueue" style="font-size: 1rem">
-              ลงเวลาออกงาน (ระบบกำลังประมวลผล)
-            </strong>
+  <q-page :style="$q.screen.xs ? 'padding-top: 90px' : ''">
+    <div class="col-12 row justify-center">
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-card
+          flat
+          :class="
+            $q.screen.gt.xs ? 'row col-12 cardNone' : 'row col-12 bg-grey-2'
+          "
+        >
+          <!-- <q-header elevated class="bg-purple"> -->
+          <div :class="getClass(stetusCheckin)" class="gt-xs">
+            <div class="col">
+              <div class="row col-12 justify-center q-py-sm text-subtitle1">
+                <!-- <strong v-if="stetusCheckin" style="font-size: 1rem">
+                    ลงเวลาเข้างาน
+                  </strong> -->
+                <!-- <strong v-else style="font-size: 1rem">ลงเวลาออกงาน</strong> -->
+                <strong v-if="!stetusCheckin && inQueue">
+                  ลงเวลาออกงาน (ระบบกำลังประมวลผล)
+                </strong>
 
-            <strong
-              v-else-if="stetusCheckin && inQueue"
-              style="font-size: 1rem"
-            >
-              ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
-            </strong>
+                <strong v-else-if="stetusCheckin && inQueue">
+                  ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
+                </strong>
 
-            <strong
-              v-else-if="stetusCheckin && !inQueue"
-              style="font-size: 1rem"
-            >
-              ลงเวลาเข้างาน
-            </strong>
+                <strong v-else-if="stetusCheckin && !inQueue">
+                  ลงเวลาเข้างาน
+                </strong>
 
-            <strong v-else style="font-size: 1rem"> ลงเวลาออกงาน </strong>
-          </div>
-        </q-toolbar>
-        <div class="col-12 text-grey-9">
-          <div class="col-12 row justify-center">
-            <div class="col-12 row q-pt-md justify-center">
-              <div
-                class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
-              >
-                {{ date2Thai(Thai) }}
-              </div>
-              <div class="row col-12 justify-center q-py-sm">
-                <div class="colunm">
-                  <div class="text-h3 text-weight-bold">
-                    {{ formattedH }}<span class="q-ma-md">:</span>
-                  </div>
-                </div>
-                <div class="colunm">
-                  <div class="text-h3 text-weight-bold">
-                    {{ formattedM }}<span class="q-ma-md">:</span>
-                  </div>
-                </div>
-                <div class="colunm">
-                  <div class="text-h3 text-weight-bold">{{ formattedS }}</div>
-                </div>
+                <strong v-else> ลงเวลาออกงาน </strong>
               </div>
             </div>
-            <div class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row">
-              <div class="col-xs-12 col-sm-8">
-                <div class="col-12">
-                  <MapCheck @update:location="updateLocation" />
-                </div>
-                <!-- <AscMaps /> -->
-              </div>
-              <div class="col-xs-12 col-sm-4">
-                <q-card flat bordered class="card-container">
-                  <div
-                    v-if="!cameraIsOn && img == null"
-                    class="preview-placeholder"
-                    @click="() => !isDisabledCheckTime && openCamera()"
-                  >
-                    <div class="text-center">
-                      <q-icon
-                        name="photo_camera"
-                        color="blue-grey-3"
-                        size="100px"
-                        class="center-icon"
-                      />
-                    </div>
-                  </div>
-                  <div class="col-12 row items-center">
-                    <!-- แสดงกล้องตอนกดถ่ายภาพ -->
-
-                    <Camera
-                      :resolution="{ width: photoWidth, height: photoHeight }"
-                      ref="camera"
-                      :autoplay="false"
-                      :style="!img ? 'display: block' : 'display: none'"
-                    />
-
-                    <!-- แสดงรูปเมื่อกด capture -->
-                    <div v-if="img" class="image-container">
-                      <q-img :src="img" class="image-element"></q-img>
-                    </div>
-
-                    <div
-                      v-if="cameraIsOn"
-                      class="absolute-bottom-right q-ma-md"
-                    >
-                      <q-btn
-                        v-if="img == null"
-                        round
-                        push
-                        icon="photo_camera"
-                        size="md"
-                        color="positive"
-                        @click="capturePhoto"
-                      />
-                      <q-btn
-                        v-else
-                        round
-                        push
-                        icon="refresh"
-                        size="md"
-                        color="negative"
-                        @click="refreshPhoto"
-                      />
-                    </div>
-                  </div>
-                </q-card>
-              </div>
-
-              <div
-                v-if="!isDisabledCheckTime"
-                class="col-xs-12 col-sm-12 items-center"
-              >
-                <q-card
-                  bordered
-                  flat
-                  :class="
-                    $q.screen.gt.xs
-                      ? 'q-px-md q-py-sm row items-center  shadow-0'
-                      : 'q-pa-md row items-center  shadow-0'
-                  "
+          </div>
+          <div class="col-12 text-grey-9">
+            <div class="col-12 row justify-center">
+              <div class="col-12 row q-pt-md justify-center gt-xs">
+                <div
+                  class="col-xs-12 col-sm-10 text-h6 text-center text-weight-bold"
                 >
-                  <div class="text-weight-bold">สถานที่ทำงาน</div>
-                  <div
+                  {{ date2Thai(Thai) }}
+                </div>
+                <div class="row col-12 justify-center q-py-sm">
+                  <div class="colunm">
+                    <div class="text-h3 text-weight-bold">
+                      {{ formattedH }}<span class="q-ma-md">:</span>
+                    </div>
+                  </div>
+                  <div class="colunm">
+                    <div class="text-h3 text-weight-bold">
+                      {{ formattedM }}<span class="q-ma-md">:</span>
+                    </div>
+                  </div>
+                  <div class="colunm">
+                    <div class="text-h3 text-weight-bold">{{ formattedS }}</div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg"
+              >
+                <div class="col-xs-12 col-sm-8 gt-xs">
+                  <div class="col-12">
+                    <MapCheck
+                      v-if="$q.screen.gt.xs"
+                      @update:location="updateLocation"
+                    />
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-card
                     :class="
-                      $q.screen.gt.xs
-                        ? 'row q-gutter-md q-pl-md col-sm-6 col-md-3'
-                        : 'column col-12'
+                      $q.screen.xs ? 'card-container-xs' : 'card-container'
                     "
                   >
-                    <q-radio
-                      v-model="workplace"
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      val="in-place"
-                      label="ในสถานที่"
-                      @update:model-value="updateWorkplace"
-                    />
-                    <q-radio
-                      v-model="workplace"
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      val="off-site"
-                      label="นอกสถานที่"
-                      @update:model-value="updateWorkplace"
-                    />
+                    <div
+                      v-if="!cameraIsOn && img == null"
+                      class="preview-placeholder"
+                      @click="() => !isDisabledCheckTime && openCamera()"
+                    >
+                      <div class="text-center">
+                        <q-icon
+                          name="mdi-camera"
+                          color="blue-grey-3"
+                          size="100px"
+                          class="center-icon"
+                        />
+                      </div>
+                    </div>
+                    <div class="col-12 row items-center">
+                      <!-- แสดงกล้องตอนกดถ่ายภาพ -->
+
+                      <Camera
+                        :resolution="{ width: photoWidth, height: photoHeight }"
+                        ref="camera"
+                        :autoplay="false"
+                        :style="!img ? 'display: block' : 'display: none'"
+                      />
+
+                      <!-- แสดงรูปเมื่อกด capture -->
+                      <div v-if="img" class="image-container">
+                        <q-img :src="img" class="image-element"></q-img>
+                      </div>
+
+                      <div v-if="cameraIsOn">
+                        <div
+                          v-if="$q.screen.gt.xs"
+                          class="absolute-bottom-right q-ma-md"
+                        >
+                          <q-btn
+                            v-if="img == null"
+                            round
+                            push
+                            icon="photo_camera"
+                            size="md"
+                            color="positive"
+                            @click="capturePhoto"
+                          />
+                          <q-btn
+                            v-else
+                            round
+                            push
+                            icon="refresh"
+                            size="md"
+                            color="negative"
+                            @click="refreshPhoto"
+                          />
+                        </div>
+                        <div v-else>
+                          <div
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
+                            <q-btn
+                              round
+                              v-if="img == null"
+                              icon="photo_camera"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="capturePhoto"
+                              unelevated
+                            />
+                            <q-btn
+                              v-else
+                              round
+                              icon="refresh"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="refreshPhoto"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+
+                <!-- กรอกข้อมูล หน้ามือถือ -->
+                <div class="col-12 row q-col-gutter-y-md" v-if="$q.screen.xs">
+                  <div class="col-12" v-if="!isDisabledCheckTime">
+                    <q-card
+                      flat
+                      bordered
+                      class="row col-12"
+                      style="border-radius: 10px"
+                    >
+                      <q-input
+                        v-model="remark"
+                        filled
+                        label="กรอกหมายเหตุ"
+                        input-style="border-radius: 10px 10px 0 0;"
+                        class="col-12"
+                        bg-color="white"
+                      />
+                      <div class="col-12"><q-separator /></div>
+                      <q-btn-toggle
+                        v-model="workplace"
+                        @update:model-value="updateWorkplace"
+                        spread
+                        no-caps
+                        toggle-color="blue-grey-10"
+                        color="white"
+                        text-color="black"
+                        class="col-12"
+                        style="min-height: 3em"
+                        size="15px"
+                        :options="[
+                          { label: 'ในสถานที่', value: 'in-place' },
+                          { label: 'นอกสถานที่', value: 'off-site' },
+                        ]"
+                      />
+                    </q-card>
+                  </div>
+                  <div class="col-12" v-if="workplace == 'off-site'">
+                    <q-card class="col-12">
+                      <q-select
+                        ref="modelRef"
+                        filled
+                        v-model="model"
+                        :options="options"
+                        label="เลือกสถานที่"
+                        bg-color="white"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        lazy-rules
+                        @update:model-value="selectLocation()"
+                        hide-bottom-space
+                      />
+                    </q-card>
                   </div>
                   <div
-                    class="col-xs-12 col-sm-6 col-md-4"
-                    v-if="workplace == 'off-site'"
-                  >
-                    <q-select
-                      ref="modelRef"
-                      dense
-                      class="q-ml-md"
-                      outlined
-                      v-model="model"
-                      :options="options"
-                      prefix="ระบุสถานที่ :"
-                      :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
-                      lazy-rules
-                      @update:model-value="selectLocation()"
-                      hide-bottom-space
-                    />
-                  </div>
-                  <div
-                    class="col-xs-12 col-sm-6 col-md-4"
+                    class="col-12"
                     v-if="model == 'อื่นๆ' && workplace === 'off-site'"
                   >
-                    <q-input
-                      ref="useLocationRef"
-                      dense
-                      class="q-ml-md"
-                      outlined
-                      v-model="useLocation"
-                      label="ระบุสถานที่"
-                      :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
-                      lazy-rules
-                    />
+                    <q-card class="col-12">
+                      <q-input
+                        ref="useLocationRef"
+                        filled
+                        v-model="useLocation"
+                        label="ระบุสถานที่"
+                        bg-color="white"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        hide-bottom-space
+                        lazy-rules
+                      />
+                    </q-card>
                   </div>
-                </q-card>
-              </div>
 
-              <div v-if="!isDisabledCheckTime" class="col-xs-12 col-sm-12">
-                <q-card
-                  bordered
-                  flat
+                  <div class="col-12" v-if="$q.screen.xs">
+                    <MapCheck @update:location="updateLocation" />
+                  </div>
+                </div>
+                <!-- กรอกข้อมูล หน้ามือถือ -->
+
+                <div
+                  v-if="!isDisabledCheckTime"
+                  class="col-xs-12 col-sm-12 items-center gt-xs"
+                >
+                  <q-card
+                    bordered
+                    flat
+                    :class="
+                      $q.screen.gt.xs
+                        ? 'q-px-md q-py-sm row items-center  shadow-0'
+                        : 'q-pa-md row items-center  shadow-0'
+                    "
+                  >
+                    <div class="text-weight-bold">สถานที่ทำงาน</div>
+                    <div
+                      :class="
+                        $q.screen.gt.xs
+                          ? 'row q-gutter-md q-pl-md col-sm-6 col-md-3'
+                          : 'column col-12'
+                      "
+                    >
+                      <q-radio
+                        v-model="workplace"
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        val="in-place"
+                        label="ในสถานที่"
+                        @update:model-value="updateWorkplace"
+                      />
+                      <q-radio
+                        v-model="workplace"
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        val="off-site"
+                        label="นอกสถานที่"
+                        @update:model-value="updateWorkplace"
+                      />
+                    </div>
+                    <div
+                      class="col-xs-12 col-sm-6 col-md-4"
+                      v-if="workplace == 'off-site'"
+                    >
+                      <q-select
+                        ref="modelRef"
+                        dense
+                        class="q-ml-md"
+                        outlined
+                        v-model="model"
+                        :options="options"
+                        prefix="ระบุสถานที่ :"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        lazy-rules
+                        @update:model-value="selectLocation()"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div
+                      class="col-xs-12 col-sm-6 col-md-4"
+                      v-if="model == 'อื่นๆ' && workplace === 'off-site'"
+                    >
+                      <q-input
+                        ref="useLocationRef"
+                        dense
+                        class="q-ml-md"
+                        outlined
+                        v-model="useLocation"
+                        label="ระบุสถานที่"
+                        :rules="[(val:string) => !!val || 'กรุณาระบุสถานที่']"
+                        lazy-rules
+                      />
+                    </div>
+                  </q-card>
+                </div>
+
+                <div
+                  v-if="!isDisabledCheckTime"
+                  class="col-xs-12 col-sm-12 gt-xs"
+                >
+                  <q-card
+                    bordered
+                    flat
+                    :class="
+                      $q.screen.gt.xs
+                        ? 'q-px-md q-py-sm row items-center  shadow-0'
+                        : 'q-pa-md row items-center  shadow-0'
+                    "
+                  >
+                    <div class="text-weight-bold">หมายเหตุ</div>
+                    <div class="col-12 q-pt-sm">
+                      <q-input outlined v-model="remark" lazy-rules dense />
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-if="!isDisabledCheckTime && $q.screen.gt.xs"
+              class="col-12 text-right"
+            >
+              <q-separator />
+              <div class="col-12 q-pa-md">
+                <p
                   :class="
                     $q.screen.gt.xs
-                      ? 'q-px-md q-py-sm row items-center  shadow-0'
-                      : 'q-pa-md row items-center  shadow-0'
+                      ? 'text-red text-caption '
+                      : 'text-red text-caption text-center'
                   "
                 >
-                  <div class="text-weight-bold">หมายเหตุ</div>
-                  <div class="col-12 q-pt-sm">
-                    <q-input outlined v-model="remark" lazy-rules dense />
-                  </div>
-                </q-card>
+                  *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
+                </p>
+                <q-btn
+                  :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+                  :color="img == null ? 'grey-6' : 'primary'"
+                  push
+                  size="18px"
+                  :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
+                  :disable="camera && img ? false : true"
+                  @click="validateForm"
+                  :loading="inQueue"
+                />
               </div>
             </div>
-          </div>
 
-          <div v-if="!isDisabledCheckTime" class="col-12 text-right">
-            <q-separator />
-            <div class="col-12 q-pa-md">
-              <p
-                :class="
-                  $q.screen.gt.xs
-                    ? 'text-red text-caption '
-                    : 'text-red text-caption text-center'
-                "
-              >
-                *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
-              </p>
-              <q-btn
-                :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
-                :color="img == null ? 'grey-6' : 'primary'"
-                push
-                size="18px"
-                :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
-                :disable="camera && img ? false : true"
-                @click="validateForm"
-                :loading="inQueue"
-              />
+            <div v-if="isDisabledCheckTime && $q.screen.gt.xs" class="col-12">
+              <q-separator />
+              <div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
             </div>
           </div>
+        </q-card>
+      </div>
+    </div>
+  </q-page>
 
-          <div v-else class="col-12">
-            <q-separator />
-            <div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
+  <!--  top page sticky  หน้ามือถือ-->
+  <q-page-sticky expand position="top" v-if="$q.screen.xs">
+    <div :class="getClassXS(stetusCheckin)">
+      <div class="col">
+        <div class="row col-12 justify-right items-center text-body1">
+          <strong v-if="!stetusCheckin && inQueue">
+            ลงเวลาออกงาน (ระบบกำลังประมวลผล)
+          </strong>
+
+          <strong v-else-if="stetusCheckin && inQueue">
+            ลงเวลาเข้างาน (ระบบกำลังประมวลผล)
+          </strong>
+
+          <strong v-else-if="stetusCheckin && !inQueue"> ลงเวลาเข้างาน </strong>
+
+          <strong v-else> ลงเวลาออกงาน </strong>
+        </div>
+        <div
+          class="text-white text-body2 row col-12"
+          style="line-height: 1.5rem"
+        >
+          {{ date2Thai(Thai) }}
+        </div>
+      </div>
+      <div class="col-6 row items-center">
+        <div class="row col-12 justify-end">
+          <div class="colunm">
+            <div class="text-h4 text-weight-bold">
+              {{ formattedH }}<span class="q-ma-xs">:</span>
+            </div>
+          </div>
+          <div class="colunm">
+            <div class="text-h4 text-weight-bold">
+              {{ formattedM }}<span class="q-ma-xs">:</span>
+            </div>
+          </div>
+          <div class="colunm">
+            <div class="text-h4 text-weight-bold">{{ formattedS }}</div>
           </div>
         </div>
-      </q-card>
+      </div>
     </div>
-  </div>
+  </q-page-sticky>
+
+  <!--  footer  หน้ามือถือ-->
+  <q-footer reveal v-if="$q.screen.xs" class="bg-grey-2">
+    <q-separator />
+    <div v-if="!isDisabledCheckTime" class="col-12 q-pa-md">
+      <p
+        :class="
+          $q.screen.gt.xs
+            ? 'text-red text-caption '
+            : 'text-red text-caption text-center'
+        "
+      >
+        *หมายเหตุ คลิกลงเวลาเข้างานแล้วระบบจะลงเวลาทันที
+      </p>
+      <q-btn
+        :label="stetusCheckin ? 'ลงเวลาเข้างาน' : 'ลงเวลาออกงาน'"
+        :color="img == null ? 'grey-6' : 'primary'"
+        push
+        size="18px"
+        :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width q-pa-sm'"
+        :disable="camera && img ? false : true"
+        @click="validateForm"
+        :loading="inQueue"
+      />
+    </div>
+    <div v-if="isDisabledCheckTime" class="col-12">
+      <q-separator />
+      <div class="text-red q-pa-md text-left">*{{ msgCheckTime }}</div>
+    </div>
+  </q-footer>
 
   <!-- แสดงการลงเวลา -->
   <q-dialog v-model="modalTime" persistent>
@@ -619,8 +825,18 @@ onMounted(async () => {
   position: relative;
   overflow: hidden;
   height: autu; /* Adjust as needed */
-  background: #f6f5f5;
+  background: #f5f5f5;
   height: 35vh !important;
+  box-shadow: none !important;
+  border: 1px solid #ededed;
+}
+.card-container-xs {
+  position: relative;
+  overflow: hidden;
+  height: autu; /* Adjust as needed */
+  background: #ffffff;
+  height: 35vh !important;
+  border-radius: 10px;
 }
 .image-container {
   position: absolute;
@@ -641,4 +857,22 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
+
+.bg-topOut {
+  background: rgb(39, 50, 56);
+  background: linear-gradient(
+    175deg,
+    rgba(39, 50, 56, 1) 76%,
+    rgba(198, 40, 40, 1) 100%
+  );
+}
+
+.bg-topIn {
+  background: rgb(39, 50, 56);
+  background: linear-gradient(
+    175deg,
+    rgba(39, 50, 56, 1) 76%,
+    rgba(2, 169, 152, 1) 100%
+  );
+}
 </style>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 6cf7bd4..14df40d 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -27,9 +27,9 @@ const router = useRouter()
 const $q = useQuasar()
 
 // landing page config url
-const configParam = {
-  landingPageUrl: import.meta.env.VITE_URL_LANDING,
-}
+// const configParam = {
+//   landingPageUrl: import.meta.env.VITE_URL_LANDING,
+// }
 
 const modalReset = ref<boolean>(false) //ตัวแปร popup reset password
 const fullName = ref<string>('') //ชื่อผู้ใช้งาน
@@ -160,7 +160,7 @@ function onLoad(index: number, done: Function) {
 }
 
 // landing page redirect
-const landingPageUrl = ref<string>(configParam.landingPageUrl)
+// const landingPageUrl = ref<string>(configParam.landingPageUrl)
 
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
@@ -517,7 +517,7 @@ onMounted(async () => {
         :style="
           $q.screen.gt.xs
             ? 'padding: 1.8% 2%; margin-top: -200px;'
-            : 'padding: 5% 4%; margin-top: -200px;'
+            : 'padding: 0% 0%; margin-top: -200px;'
         "
       >
         <router-view :key="$route.fullPath" />