diff --git a/src/assets/camera.jpg b/src/assets/camera.jpg
new file mode 100644
index 0000000..7d68487
Binary files /dev/null and b/src/assets/camera.jpg differ
diff --git a/src/assets/map1.png b/src/assets/map1.png
new file mode 100644
index 0000000..34d643d
Binary files /dev/null and b/src/assets/map1.png differ
diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index da7bf8c..4d4d994 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -10,41 +10,41 @@
 				<q-card bordered>
 					<div class="col-12 row q-col-gutter-md q-pa-md">
 						<div class="col-xs-12 col-sm-12">
-							<q-card bordered flat>
-								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เรื่องขอโอน</div>
-								<q-separator />
-								<div class="col-12 row q-pa-sm q-col-gutter-sm">
-									<q-input class="col-12" dense outlined v-model="tranferOrg" label="หน่วยงานที่ขอโอนไป" :readonly="routeName != 'addTransfer'" />
-									<q-input class="col-12" dense outlined v-model="noteReason" label="เหตุผล" type="textarea" :readonly="routeName != 'addTransfer'" />
-									<q-separator />
+							<div class="col-12 row q-pa-sm q-col-gutter-sm">
+								<q-input class="col-12" dense outlined v-model="tranferOrg" label="หน่วยงานที่ขอโอนไป" :readonly="routeName != 'addTransfer'" />
+								<q-input class="col-12" dense outlined v-model="noteReason" label="เหตุผล" type="textarea" :readonly="routeName != 'addTransfer'" />
+								<div class="col-12 row">
 									<q-uploader
-										class="col-xs-12 col-sm-12"
+										bordered
+										flat
+										class="col-12"
 										accept=".jpg,.png,.pdf,.csv,.doc"
 										url="http://localhost:4444/upload"
 										label="เอกสารเพิ่มเติม"
+										:color="routeName != 'addTransfer' ? 'grey-8': 'blue'"
 										multiple
+										:disable="routeName != 'addTransfer'"
 										@added="fileUploadDoc"
-										style="max-width: px"
 									/>
-
-									<!-- <q-file
-										class="col-xs-12 col-sm-12"
-										outlined
-										dense
-										multiple
-										v-model="file"
-										label="เอกสารเพิ่มเติม"
-										hide-bottom-space
-										accept=".jpg,.png,.pdf,.csv,.doc"
-										lazy-rules
-										:rules="[val => val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
-									>
-										<template v-slot:prepend>
-											<q-icon name="attach_file" />
-										</template>
-									</q-file> -->
 								</div>
-							</q-card>
+
+								<!-- <q-file
+									class="col-xs-12 col-sm-12"
+									outlined
+									dense
+									multiple
+									v-model="file"
+									label="เอกสารเพิ่มเติม"
+									hide-bottom-space
+									accept=".jpg,.png,.pdf,.csv,.doc"
+									lazy-rules
+									:rules="[val => val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
+								>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file> -->
+							</div>
 						</div>
 					</div>
 					<!-- <div class="col-12 row q-col-gutter-md q-pa-md">
@@ -274,9 +274,9 @@
 								</q-file>
 							</div>
 						</q-card>
-					</div>
-					<q-separator /> -->
-					<div class="row col-12 q-pa-sm" v-if="routeName == 'addTransfer'">
+					</div>-->
+					<q-separator v-if="routeName == 'addTransfer'"/> 
+					<div class="row col-12 q-pa-md" v-if="routeName == 'addTransfer'">
 						<q-space />
 						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอโอน" @click="saveTransfer" />
 					</div>
diff --git a/src/modules/03_leave/views/AddLeave.vue b/src/modules/03_leave/views/AddLeave.vue
index 8dcc1d5..02b297c 100644
--- a/src/modules/03_leave/views/AddLeave.vue
+++ b/src/modules/03_leave/views/AddLeave.vue
@@ -19,125 +19,117 @@
         <q-card bordered>
           <div class="col-12 row q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-sm-12">
-              <q-card bordered flat>
-                <div
-                  class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-8"
+                  dense
+                  outlined
+                  v-model="tranferOrg"
+                  label="สถานที่ยื่นขอลาออกจากราชการ"
+                  :readonly="routeName != 'AddLeave'"
+                />
+                <datepicker
+                  class="col-2"
+                  menu-class-name="modalfix"
+                  v-model="dateCommand"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
                 >
-                  ลาออก
-                </div>
-                <q-separator />
-                <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                  <q-input
-                    class="col-8"
-                    dense
-                    outlined
-                    v-model="tranferOrg"
-                    label="สถานที่ยื่นขอลาออกจากราชการ"
-                    :readonly="routeName != 'AddLeave'"
-                  />
-                  <datepicker
-                    class="col-2"
-                    menu-class-name="modalfix"
-                    v-model="dateCommand"
-                    :locale="'th'"
-                    autoApply
-                    readonly
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        readonly
-                        dense
-                        class="full-width datepicker"
-                        :model-value="
-                          dateCommand != null ? date2Thai(dateCommand) : null
-                        "
-                        :label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
-                        :rules="[
-                          (val) =>
-                            !!val ||
-                            `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
-                        ]"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                  <datepicker
-                    class="col-2"
-                    menu-class-name="modalfix"
-                    v-model="dateLeave"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="routeName != 'AddLeave'"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        :readonly="routeName != 'AddLeave'"
-                        class="full-width datepicker"
-                        :model-value="
-                          dateLeave != null ? date2Thai(dateLeave) : null
-                        "
-                        :label="`${'วันที่ขอลาออกจากราชการ'}`"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
-                        ]"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                  <q-input
-                    class="col-12"
-                    dense
-                    outlined
-                    v-model="noteReason"
-                    label="เหตุผลที่ลาออกจากราชการ"
-                    type="textarea"
-                    :readonly="routeName != 'AddLeave'"
-                  />
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      readonly
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        dateCommand != null ? date2Thai(dateCommand) : null
+                      "
+                      :label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
+                      :rules="[
+                        (val) =>
+                          !!val ||
+                          `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  class="col-2"
+                  menu-class-name="modalfix"
+                  v-model="dateLeave"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  :readonly="routeName != 'AddLeave'"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      :readonly="routeName != 'AddLeave'"
+                      class="full-width datepicker"
+                      :model-value="
+                        dateLeave != null ? date2Thai(dateLeave) : null
+                      "
+                      :label="`${'วันที่ขอลาออกจากราชการ'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="noteReason"
+                  label="เหตุผลที่ลาออกจากราชการ"
+                  type="textarea"
+                  :readonly="routeName != 'AddLeave'"
+                />
 
-                  <q-separator />
-                </div>
-              </q-card>
+              </div>
             </div>
           </div>
-          <div class="row col-12 q-pa-sm" v-if="routeName == 'AddLeave'">
+          <q-separator v-if="routeName == 'AddLeave'"/> 
+          <div class="row col-12 q-pa-md" v-if="routeName == 'AddLeave'">
             <q-space />
             <q-btn
               unelevated
diff --git a/src/modules/04_checkin/router.ts b/src/modules/04_checkin/router.ts
new file mode 100644
index 0000000..6b7c6a2
--- /dev/null
+++ b/src/modules/04_checkin/router.ts
@@ -0,0 +1,28 @@
+/**
+ * Router Checkin
+ */
+
+const Checkin = () => import("@/modules/04_checkin/views/Checkin.vue");
+
+/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
+ */
+export default [
+  {
+    path: "/check-in",
+    name: "Checkin",
+    component: Checkin,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
+  /* {
+    path: "/check-out",
+    name: "Checkout",
+    component: Checkout,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  }, */
+];
diff --git a/src/modules/04_checkin/views/Checkin.vue b/src/modules/04_checkin/views/Checkin.vue
new file mode 100644
index 0000000..331f717
--- /dev/null
+++ b/src/modules/04_checkin/views/Checkin.vue
@@ -0,0 +1,112 @@
+<template>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn
+					icon="mdi-arrow-left"
+					unelevated
+					round
+					dense
+					flat
+					color="primary"
+					class="q-mr-sm"
+					@click="router.go(-1)"
+				/>
+				เช็คอิน
+			</div>
+			<div class="col-12">
+				<q-card bordered class="q-pa-md">
+					<div class="col-12 row justify-center q-pb-sm">
+						<div class="col-xs-12 col-sm-10 text-h6 text-primary text-center text-weight-bold">เวลาในขณะนี้</div>
+						<div class="row col-12 justify-center q-py-md">
+							<div class="colunm">
+								<div class="text-h2 text-weight-bold">{{ formattedH }}<span class="q-ma-md">:</span></div>
+								<div>ชั่วโมง</div>
+							</div>
+							<div class="colunm">
+								<div class="text-h2 text-weight-bold">{{ formattedM }}<span class="q-ma-md">:</span></div>
+								<div>นาที</div>
+							</div>
+							<div class="colunm">
+								<div class="text-h2 text-weight-bold">{{ formattedS }} </div>
+								<div>วินาที</div>
+							</div>
+						</div>
+						<!-- <div class="col-12 text-center text-weight-medium items-center text-dark q-pt-md"><q-icon color="primary" name="mdi-calendar-outline" class="q-mr-sm"/>วันที่ {{dateNow}}</div> -->
+						<div class="col-12 row q-col-gutter-md">
+							<div class="col-12 col-sm-8">
+								<q-card bordered flat class="col-12 bg-grey-3">
+									<q-img src="@/assets/map1.png" :style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"> </q-img>
+								</q-card>
+							</div>
+							<div class="col-12 col-sm-4">
+								<q-card flat class="col-12 bg-grey-3 items-center row" :style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'">
+									<div class="column col-12" v-if="!camera">
+										<div class="text-center"><q-icon name="mdi-image-off-outline" size="100px" color="grey-7" /></div>
+										<div class="text-center q-pt-md text-grey-7">ไม่มีรูปภาพ</div>
+									</div>
+									<q-img v-else src="@/assets/camera.jpg" :style="$q.screen.gt.xs ? 'height: 400px;' : 'height: 220px;'"> </q-img>
+									<div class="absolute-bottom-right q-ma-md">
+										<q-btn round push icon="mdi-camera" size="md" color="positive" @click="photo()" />
+									</div>
+								</q-card>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 text-right q-pt-md" v-if="camera">
+						<q-btn label="ยืนยันเวลาเข้างาน" color="blue" push size="16px" :class="$q.screen.gt.xs ? 'q-px-md' : 'full-width'" @click="confirm" />
+					</div>
+				</q-card>
+			</div>
+		</div>
+	</div>
+	
+	<q-dialog v-model="dialogTime">
+		<q-card class="q-px-lg full-width">
+			<q-card-section>
+				<div class="text-h6 text-center q-pt-md">เวลาเข้างานของคุณคือ</div>
+			</q-card-section>
+			<q-card-section style="max-height: 50vh">
+				<div class="row col-12 justify-center q-pb-md">
+					<div class="text-h2 text-weight-bold">{{ formattedH }}<span class="q-ma-md">:</span></div>
+					<div class="text-h2 text-weight-bold">{{ formattedM }}</div>
+				</div>
+			</q-card-section>
+
+			<q-card-actions align="center" class="q-mb-md">
+				<q-btn push label="ตกลง" color="primary" v-close-popup />
+			</q-card-actions>
+		</q-card>
+	</q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import moment, { Moment } from 'moment'
+
+const router = useRouter();
+const $q = useQuasar();
+const diff = ref({});
+const timer = ref(undefined);
+const dateNow = ref(new Date());
+const google = ref(null);
+const map = ref(null);
+const camera = ref(false);
+const dialogTime = ref(false);
+
+const photo = () =>  { camera.value = true };
+const confirm = () => { dialogTime.value = true };
+
+var date = Date.now()
+let formattedH = (moment(date)).format('HH')
+let formattedM = (moment(date)).format('mm')
+let formattedS = (moment(date)).format('ss')
+
+const time = new Date().toLocaleTimeString();
+
+</script>
+
+<style></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index a41df9c..0459c07 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,7 +5,7 @@ const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue")
 
 import ModuleTransfer from "@/modules/02_transfer/router.ts"
 import ModuleLeave from "@/modules/03_leave/router.ts"
-
+import ModuleCheckin from "@/modules/04_checkin/router.ts"
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak"
 
@@ -28,6 +28,7 @@ const router = createRouter({
 				},
 				...ModuleTransfer,
 				...ModuleLeave,
+				...ModuleCheckin
 			],
 		},
 	],
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 77b3ca8..7823bb4 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -73,7 +73,7 @@ const doLogout = () => {
 				<div v-if="$q.screen.gt.xs">
 					<q-tabs v-model="tab" align="justify" indicator-color="transparent" active-color="white bg-white-btn border-100" dense inline-label class="text-grey-5 tabsHome">
 						<q-tab class="border-100" name="dashboard" label="หน้าแรก" icon="mdi-view-dashboard-outline" @click="router.push(`/`)" />
-						<q-tab class="border-100" name="time" label="ลงเวลางาน" icon="mdi-map-marker-check-outline" />
+						<q-tab class="border-100" name="time" label="ลงเวลางาน" icon="mdi-map-marker-check-outline" @click="router.push(`/check-in`)"/>
 						<q-tab class="border-100" name="leave" label="การลา" icon="mdi-calendar-blank-outline" />
 					</q-tabs>
 				</div>
@@ -148,8 +148,8 @@ const doLogout = () => {
 		<q-footer class="bg-top" v-if="!$q.screen.gt.xs">
 			<q-toolbar style="padding: 2% 2%">
 				<div class="row col-12 justify-around">
-					<q-btn flat round class="bg-white-btn" color="white" icon="mdi-view-dashboard-outline" />
-					<q-btn flat round color="white" icon="mdi-map-marker-check-outline" />
+					<q-btn flat round class="bg-white-btn" color="white" icon="mdi-view-dashboard-outline"  @click="router.push(`/`)"/>
+					<q-btn flat round color="white" icon="mdi-map-marker-check-outline"  @click="router.push(`/check-in`)"/>
 					<q-btn flat round color="white" icon="mdi-calendar-blank-outline" />
 					<q-btn flat round color="white" icon="mdi-account-outline" />
 				</div>