diff --git a/src/api/api.message.ts b/src/api/api.message.ts
new file mode 100644
index 0000000..34e20b2
--- /dev/null
+++ b/src/api/api.message.ts
@@ -0,0 +1,8 @@
+import env from "./index";
+
+const message = `${env.API_URI}/message`;
+
+export default {
+    msgNotificate: `${message}/my-notifications`,
+    msgInbox: `${message}/my-inboxes`,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 539475a..f585606 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -4,12 +4,14 @@
 import testtest from "./api/test/api.test"
 import retirementResign from "./api/leave/api.leave"
 import placementTransfer from "./api/transfer/api.transfer"
+import message from "./api/api.message"
 
 
 const API = {
 	...testtest,
 	...retirementResign,
-    ...placementTransfer
+	...placementTransfer,
+	...message
 }
 
 export default {
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index be29cd3..2fa8fb2 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -1,182 +1,271 @@
 <script setup lang="ts">
-import { ref, Static } from "vue"
-const link = ref<number>(1)
-import { useQuasar } from "quasar"
-import router from "@/router"
+import { ref, onMounted, Static } from "vue";
+const link = ref<number>(1);
+import { useQuasar } from "quasar";
+import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
-const $q = useQuasar()
-const fullname = ref<string>("ธัญลักษณ์")
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  date2Thai,
+} = mixin;
+
+const fullname = ref<string>("ธัญลักษณ์");
 const inboxList = ref<any>([
-	{
-		no: 1,
-		sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-		subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-		timereceive: "13/12/2565",
-		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-		ratingModel: 0,
-	},
-	{
-		no: 2,
-		sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-		subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-		timereceive: "13/12/2565",
-		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-		ratingModel: 1,
-	},
-	{
-		no: 3,
-		sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-		subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-		timereceive: "13/12/2565",
-		body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-		ratingModel: 0,
-	},
-])
+  //   {
+  //     no: 1,
+  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
+  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
+  //     timereceive: "13/12/2565",
+  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
+  //     ratingModel: 0,
+  //   },
+]);
 const items = ref<any>([
-	{
-		icon: "mdi-account-group-outline",
-		title: "แผนผังองค์กร",
-		sub: "ดูแผนผังองค์กร",
-		color: "blue-3",
-		path: "",
-		active: false,
-	},
-	{
-		icon: "mdi-clipboard-account-outline",
-		title: "ประเมินผล",
-		sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
-		color: "lime-4",
-		path: "",
-		active: false,
-	},
-	{
-		icon: "mdi-calendar-account-outline",
-		title: "การลา",
-		sub: "ดู/ลงเวลา ทำเรื่องลา",
-		color: "cyan-3",
-		path: "",
-		active: false,
-	},
-	{
-		icon: "mdi-folder-account-outline",
-		title: "ผลงาน",
-		sub: "ดูผลงาน",
-		color: "light-green-3",
-		path: "",
-		active: false,
-	},
-	{
-		icon: "mdi-account-arrow-right-outline",
-		title: "ขอโอน",
-		sub: "ทำเรื่องขอโอนย้าย",
-		color: "deep-purple-3",
-		path: "/transfer",
-		active: false,
-	},
-	{
-		icon: "mdi-account-remove-outline",
-		title: "ลาออก",
-		sub: "ทำเรื่องลาออก",
-		color: "orange-3",
-		path: "/leave",
-		active: false,
-	},
-])
+  {
+    icon: "mdi-account-group-outline",
+    title: "แผนผังองค์กร",
+    sub: "ดูแผนผังองค์กร",
+    color: "blue-3",
+    path: "",
+    active: false,
+  },
+  {
+    icon: "mdi-clipboard-account-outline",
+    title: "ประเมินผล",
+    sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
+    color: "lime-4",
+    path: "",
+    active: false,
+  },
+  {
+    icon: "mdi-calendar-account-outline",
+    title: "การลา",
+    sub: "ดู/ลงเวลา ทำเรื่องลา",
+    color: "cyan-3",
+    path: "",
+    active: false,
+  },
+  {
+    icon: "mdi-folder-account-outline",
+    title: "ผลงาน",
+    sub: "ดูผลงาน",
+    color: "light-green-3",
+    path: "",
+    active: false,
+  },
+  {
+    icon: "mdi-account-arrow-right-outline",
+    title: "ขอโอน",
+    sub: "ทำเรื่องขอโอนย้าย",
+    color: "deep-purple-3",
+    path: "/transfer",
+    active: false,
+  },
+  {
+    icon: "mdi-account-remove-outline",
+    title: "ลาออก",
+    sub: "ทำเรื่องลาออก",
+    color: "orange-3",
+    path: "/leave",
+    active: false,
+  },
+]);
+onMounted(async () => {
+  await fetchlistInbox();
+});
+const fetchlistInbox = async () => {
+  showLoader();
+  await http
+    .get(config.API.msgInbox)
+    .then((res) => {
+      let data = res.data.result;
+      console.log(data);
+      let listItem: any = [];
+      data.map((e: any) => {
+        listItem.push({
+          no: e.id ?? "",
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"
+              : e.createdFullName,
+          subject: e.subject ?? "",
+          timereceive: date2Thai(e.createdAt),
+          body: e.body ?? "",
+          ratingModel: 0,
+        });
+      });
+      inboxList.value = listItem;
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const transferToPage = (path?: string) => {
-	router.push(`${path}`)
-}
+  router.push(`${path}`);
+};
 </script>
 <template>
-	<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
-		<div class="col-12 row" v-if="!$q.screen.gt.xs">
-			<div class="text-white text-weight-light text-18px">สวัสดี, {{ fullname }}</div>
-			<div style="color: #ffffff" class="text-18px text-weight-medium col-12">ระบบทรัพยากรบุคคล</div>
-		</div>
-		<div class="col-xs-12 col-sm-12 col-md-9">
-			<div class="row justify-start q-col-gutter-md">
-				<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
-					<q-card bordered @click="transferToPage(item.path)" class="noactive col-12">
-						<div class="col-12">
-							<q-avatar :color="item.color" text-color="white" :size="$q.screen.gt.xs ? '55px' : '40px'">
-								<q-icon :name="item.icon" :size="$q.screen.gt.xs ? '28px' : '20px'" color="black" />
-							</q-avatar>
-						</div>
-						<div class="q-pt-md col-12 text-left text-18px">{{ item.title }}</div>
-						<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px">{{ item.sub }}</div>
-					</q-card>
-				</div>
-			</div>
-		</div>
-		<div class="col-xs-12 col-sm-12 col-md-3 row">
-			<q-card flat bordered :style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'" class="q-pb-md col-12">
-				<div class="col-12 row q-pa-md">
-					<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
-					<q-space />
-					<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
-				</div>
-				<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
-					<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
-						<q-item-section>
-							<q-item-label>{{ contact.sender }}</q-item-label>
-							<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
-						</q-item-section>
+  <div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
+    <div class="col-12 row" v-if="!$q.screen.gt.xs">
+      <div class="text-white text-weight-light text-18px">
+        สวัสดี, {{ fullname }}
+      </div>
+      <div style="color: #ffffff" class="text-18px text-weight-medium col-12">
+        ระบบทรัพยากรบุคคล
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-9">
+      <div class="row justify-start q-col-gutter-md">
+        <div
+          class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
+          v-for="(item, j) in items"
+          :key="j"
+        >
+          <q-card
+            bordered
+            @click="transferToPage(item.path)"
+            class="noactive col-12"
+          >
+            <div class="col-12">
+              <q-avatar
+                :color="item.color"
+                text-color="white"
+                :size="$q.screen.gt.xs ? '55px' : '40px'"
+              >
+                <q-icon
+                  :name="item.icon"
+                  :size="$q.screen.gt.xs ? '28px' : '20px'"
+                  color="black"
+                />
+              </q-avatar>
+            </div>
+            <div class="q-pt-md col-12 text-left text-18px">
+              {{ item.title }}
+            </div>
+            <div
+              class="col-12 text-left text-grey text-weight-regular gt-xs"
+              style="font-size: 14px"
+            >
+              {{ item.sub }}
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-3 row">
+      <q-card
+        flat
+        bordered
+        :style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'"
+        class="q-pb-md col-12"
+      >
+        <div class="col-12 row q-pa-md">
+          <div class="text-subtitle1 text-weight-bold text-dark">
+            กล่องข้อความ
+          </div>
+          <q-space />
+          <q-btn
+            dense
+            icon="mdi-dots-vertical"
+            color="grey-6"
+            size="11px"
+            flat
+          />
+        </div>
+        <q-list
+          v-for="(contact, index) in inboxList"
+          :key="index"
+          class="q-px-md"
+        >
+          <q-item
+            clickable
+            v-ripple
+            class="q-py-md q-mb-sm my-menu"
+            :active="link === contact.no"
+            @click="link = contact.no"
+            active-class="my-menu-link"
+          >
+            <q-item-section>
+              <q-item-label>{{ contact.sender }}</q-item-label>
+              <q-item-label caption class="text-grey-6" lines="2">{{
+                contact.subject
+              }}</q-item-label>
+            </q-item-section>
 
-						<q-item-section side top>
-							<q-item-label caption>{{ contact.timereceive }}</q-item-label>
-						</q-item-section>
-					</q-item>
-				</q-list>
-				<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
-					<div class="text-yellow-10">
-						<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
-						ไม่พบข้อความ
-					</div>
-				</q-banner>
-			</q-card>
-		</div>
-	</div>
+            <q-item-section side top>
+              <q-item-label caption>{{ contact.timereceive }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+        <q-banner
+          rounded
+          class="bg-amber-1 text-center q-mx-sm"
+          v-if="inboxList.length < 1"
+        >
+          <div class="text-yellow-10">
+            <q-icon
+              name="mdi-alert-box"
+              class="q-mx-xs"
+              size="sm"
+              color="yellow-10"
+            />
+            ไม่พบข้อความ
+          </div>
+        </q-banner>
+      </q-card>
+    </div>
+  </div>
 </template>
 <style>
 .my-menu-link {
-	color: #1bb19b;
-	background: #ebf9f7 !important;
-	font-weight: 600;
-	border-radius: 10px;
+  color: #1bb19b;
+  background: #ebf9f7 !important;
+  font-weight: 600;
+  border-radius: 10px;
 }
 .my-menu-link .q-hoverable {
-	border-radius: 10px;
+  border-radius: 10px;
 }
 .my-menu {
-	background: #f1f0f04a;
-	border-radius: 10px;
+  background: #f1f0f04a;
+  border-radius: 10px;
 }
 .q-card {
-	border-radius: 12px;
+  border-radius: 12px;
 }
 .text-18px {
-	font-size: 1.25em;
+  font-size: 1.25em;
 }
 .noactive {
-	color: #35473c;
-	border-radius: 12px;
-	padding: 10%;
-	transition: 0.1s ease;
-	opacity: 1;
-	cursor: pointer;
+  color: #35473c;
+  border-radius: 12px;
+  padding: 10%;
+  transition: 0.1s ease;
+  opacity: 1;
+  cursor: pointer;
 }
 .noactive:hover {
-	background: #ebf9f7;
-	color: #1bb19b !important;
-	font-weight: 600;
-	border: 1px solid #6dbdb142;
+  background: #ebf9f7;
+  color: #1bb19b !important;
+  font-weight: 600;
+  border: 1px solid #6dbdb142;
 }
 .disabledcard {
-	color: rgba(209, 209, 209, 0.733) !important;
-	border-color: rgba(207, 207, 207, 0.322) !important;
-	box-shadow: none !important;
-	border-radius: 12px;
-	cursor: no-drop !important;
-	padding: 10%;
+  color: rgba(209, 209, 209, 0.733) !important;
+  border-color: rgba(207, 207, 207, 0.322) !important;
+  box-shadow: none !important;
+  border-radius: 12px;
+  cursor: no-drop !important;
+  padding: 10%;
 }
 </style>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index bddd5fb..c7519fe 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,213 +1,368 @@
 <script setup lang="ts">
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { onMounted, ref, watch } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useQuasar } from "quasar"
-import keycloak from "@/plugins/keycloak"
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import keycloak from "@/plugins/keycloak";
+import { useCounterMixin } from "@/stores/mixin";
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 
-const $q = useQuasar()
-const link = ref<string>("")
+const $q = useQuasar();
 
-const fullname = ref<string>("นางสาวธัญลักษณ์ รอดกูล")
-const notiList = [
-	{
-		id: 1,
-		sender: "นัดหมาย",
-		body: "เพิ่มการนัดหมาย",
-		timereceive: "13/06/2566",
-	},
-	{
-		id: 1,
-		sender: "นัดหมาย",
-		body: "เพิ่มการนัดหมาย",
-		timereceive: "14/06/2566",
-	},
-]
-const notiTrigger = ref(false)
-const currentRouteName = router.currentRoute.value.name
-const tab = ref(currentRouteName)
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const fullname = ref<string>("");
+const notiList = ref<any>([]);
+const notiTrigger = ref(false);
+const currentRouteName = router.currentRoute.value.name;
+const tab = ref(currentRouteName);
+const link = ref<string>("");
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-	console.log(config.API.gettttt)
-})
+  await fetchlistNotification();
+  if (keycloak.tokenParsed != null) {
+    fullname.value = keycloak.tokenParsed.name;
+  }
+});
+
+const fetchlistNotification = async () => {
+  await http
+    .get(config.API.msgNotificate)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: any[] = [];
+      data.map((e: any) => {
+        list.push({
+          id: e.id,
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"[0]
+              : e.createdFullName[0],
+          body: e.body ?? "",
+          timereceive: date2Thai(e.createdAt),
+        });
+      });
+      notiList.value = list;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
 
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
-	$q.dialog({
-		title: "ยืนยันการออกจากระบบ",
-		message: `ต้องการออกจากระบบใช้หรือไม่?`,
-		cancel: "ยกเลิก",
-		ok: "ยืนยัน",
-		persistent: true,
-	}).onOk(() => {
-		keycloak.logout()
-	})
-}
+  $q.dialog({
+    title: "ยืนยันการออกจากระบบ",
+    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  }).onOk(() => {
+    keycloak.logout();
+  });
+};
 </script>
 <!-- โครงเว็บ -->
 <template>
-	<q-layout view="hHh LpR fFr">
-		<!-- header -->
-		<q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
-			<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'">
-				<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
-					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" />
-					<div class="row q-ml-md items-center q-pt-xs">
-						<div style="color: #ffffff; letter-spacing: 1px; line-height: 10px" class="text-body2 text-weight-bolder col-12">ระบบ<span class="text-primary">ทรัพยากรบุคคล</span></div>
-						<div class="text-caption text-white">กรุงเทพมหานคร</div>
-					</div>
-				</div>
-				<div v-else class="row items-center">
-					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
-				</div>
-				<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="Checkin" 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>
-				<q-space />
-				<!-- Notification -->
-				<q-btn round dense flat size="13px" :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'" :color="notiList.length === 0 ? 'grey-6' : 'grey-8'" :disable="notiList.length === 0">
-					<q-icon name="mdi-bell-outline" size="22px" color="white" />
-					<q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length }}</q-badge>
-					<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
-						<div class="q-px-md q-py-sm row col-12 items-center">
-							<div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
-							<q-space />
-							<q-btn label="ล้างข้อมูล" color="pink" dense class="text-caption" flat />
-						</div>
+  <q-layout view="hHh LpR fFr">
+    <!-- header -->
+    <q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
+      <q-toolbar
+        class="q-my-xs items-center"
+        :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
+      >
+        <div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
+          <q-img
+            src="@/assets/logo.png"
+            spinner-color="white"
+            style="height: 35px; max-width: 35px"
+          />
+          <div class="row q-ml-md items-center q-pt-xs">
+            <div
+              style="color: #ffffff; letter-spacing: 1px; line-height: 10px"
+              class="text-body2 text-weight-bolder col-12"
+            >
+              ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
+            </div>
+            <div class="text-caption text-white">กรุงเทพมหานคร</div>
+          </div>
+        </div>
+        <div v-else class="row items-center">
+          <img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
+        </div>
+        <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="Checkin"
+              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>
+        <q-space />
+        <!-- Notification -->
+        <q-btn
+          round
+          dense
+          flat
+          size="13px"
+          :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'"
+          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
+          :disable="notiList.length === 0"
+        >
+          <q-icon name="mdi-bell-outline" size="22px" color="white" />
+          <q-badge
+            rounded
+            v-show="notiList.length > 0"
+            color="negative"
+            text-color="white"
+            floating
+            >{{ notiList.length }}</q-badge
+          >
+          <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
+            <div class="q-px-md q-py-sm row col-12 items-center">
+              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
+              <q-space />
+              <q-btn
+                label="ล้างข้อมูล"
+                color="pink"
+                dense
+                class="text-caption"
+                flat
+              />
+            </div>
 
-						<q-list style="min-width: 300px" v-for="(n, index) in notiList" :key="index">
-							<q-item v-ripple class="mytry q-py-sm" dense>
-								<q-item-section avatar top style="min-width: 40px">
-									<q-avatar rounded color="primary" size="25px" text-color="white">
-										<span class="text-weight-medium text-uppercase">{{ n.sender[0] }}</span>
-									</q-avatar>
-								</q-item-section>
-								<q-item-section>
-									<q-item-label caption class="text-black">{{ n.body }}</q-item-label>
-									<q-item-label caption class="row items-center text-grey-7" style="font-size: 12px">{{ n.timereceive }}</q-item-label>
-								</q-item-section>
-								<div>
-									<q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs" v-close-popup></q-btn>
-								</div>
-							</q-item>
-							<q-separator class="q-my-xs" color="grey-2" v-if="index + 1 < notiList.length" :key="index" />
-						</q-list>
-					</q-menu>
-				</q-btn>
+            <q-list
+              style="min-width: 300px"
+              v-for="(n, index) in notiList"
+              :key="index"
+            >
+              <q-item v-ripple class="mytry q-py-sm" dense>
+                <q-item-section avatar top style="min-width: 40px">
+                  <q-avatar
+                    rounded
+                    color="primary"
+                    size="25px"
+                    text-color="white"
+                  >
+                    <span class="text-weight-medium text-uppercase">{{
+                      n.sender[0]
+                    }}</span>
+                  </q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label caption class="text-black">{{
+                    n.body
+                  }}</q-item-label>
+                  <q-item-label
+                    caption
+                    class="row items-center text-grey-7"
+                    style="font-size: 12px"
+                    >{{ n.timereceive }}</q-item-label
+                  >
+                </q-item-section>
+                <div>
+                  <q-btn
+                    size="sm"
+                    unelevated
+                    dense
+                    icon="mdi-close"
+                    class="mybtn q-mx-xs"
+                    v-close-popup
+                  ></q-btn>
+                </div>
+              </q-item>
+              <q-separator
+                class="q-my-xs"
+                color="grey-2"
+                v-if="index + 1 < notiList.length"
+                :key="index"
+              />
+            </q-list>
+          </q-menu>
+        </q-btn>
 
-				<!-- User -->
-				<q-btn-dropdown v-if="$q.screen.gt.xs" rounded dense flat :class="$q.screen.gt.xs ? 'bg-white-btn' : ''" color="white" class="q-pr-sm border-10" dropdown-icon="mdi-chevron-down">
-					<template v-slot:label>
-						<q-item dense v-close-popup class="q-pa-none q-pl-xs">
-							<q-item-section avatar class="q-pa-none" style="min-width: 30px">
-								<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px" />
-							</q-item-section>
-							<q-item-section class="text-left text-white q-pa-none q-pl-sm">
-								<q-item-label class="text-caption text-weight-medium">{{ fullname }}</q-item-label>
-							</q-item-section>
-						</q-item>
-					</template>
-					<q-list>
-						<q-item clickable v-close-popup>
-							<q-item-section avatar style="min-width: 30px">
-								<q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
-							</q-item-section>
-							<q-item-section><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section>
-						</q-item>
+        <!-- User -->
+        <q-btn-dropdown
+          v-if="$q.screen.gt.xs"
+          rounded
+          dense
+          flat
+          :class="$q.screen.gt.xs ? 'bg-white-btn' : ''"
+          color="white"
+          class="q-pr-sm border-10"
+          dropdown-icon="mdi-chevron-down"
+        >
+          <template v-slot:label>
+            <q-item dense v-close-popup class="q-pa-none q-pl-xs">
+              <q-item-section avatar class="q-pa-none" style="min-width: 30px">
+                <q-img
+                  src="@/assets/avatar_user.jpg"
+                  class="border-100"
+                  spinner-color="white"
+                  style="height: 30px; max-width: 30px"
+                />
+              </q-item-section>
+              <q-item-section class="text-left text-white q-pa-none q-pl-sm">
+                <q-item-label class="text-caption text-weight-medium">{{
+                  fullname
+                }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
+          <q-list>
+            <q-item clickable v-close-popup>
+              <q-item-section avatar style="min-width: 30px">
+                <q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
+              </q-item-section>
+              <q-item-section
+                ><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section
+              >
+            </q-item>
 
-						<q-item clickable v-close-popup>
-							<q-item-section avatar style="min-width: 30px">
-								<q-icon color="primary" size="18px" name="mdi-logout-variant" />
-							</q-item-section>
-							<q-item-section><q-item-label @click="doLogout">ออกจากระบบ</q-item-label></q-item-section>
-						</q-item>
-					</q-list>
-				</q-btn-dropdown>
-				<div v-else class="q-ml-sm" style="width: 30px">
-					<q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white" style="height: 30px; max-width: 30px" />
-				</div>
-			</q-toolbar>
-		</q-header>
-		<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'" />
-		<!-- end header -->
+            <q-item clickable v-close-popup>
+              <q-item-section avatar style="min-width: 30px">
+                <q-icon color="primary" size="18px" name="mdi-logout-variant" />
+              </q-item-section>
+              <q-item-section
+                ><q-item-label @click="doLogout"
+                  >ออกจากระบบ</q-item-label
+                ></q-item-section
+              >
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+        <div v-else class="q-ml-sm" style="width: 30px">
+          <q-img
+            src="@/assets/avatar_user.jpg"
+            class="border-100"
+            spinner-color="white"
+            style="height: 30px; max-width: 30px"
+          />
+        </div>
+      </q-toolbar>
+    </q-header>
+    <div
+      class="bg-top"
+      :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'"
+    />
+    <!-- end header -->
 
-		<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"  @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>
-			</q-toolbar>
-		</q-footer>
+    <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"
+            @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>
+      </q-toolbar>
+    </q-footer>
 
-		<q-page-container class="bg-grey-2 q-pb-md">
-			<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -200px;' : 'padding: 5% 4%; margin-top: -200px;'">
-				<router-view :key="$route.fullPath" />
-			</q-page>
-		</q-page-container>
-	</q-layout>
+    <q-page-container class="bg-grey-2 q-pb-md">
+      <q-page
+        :style="
+          $q.screen.gt.xs
+            ? 'padding: 1.8% 2%; margin-top: -200px;'
+            : 'padding: 5% 4%; margin-top: -200px;'
+        "
+      >
+        <router-view :key="$route.fullPath" />
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
 <style>
 .bg-drawer {
-	background: #242a3d;
+  background: #242a3d;
 }
 .menu {
-	padding-bottom: 5px;
-	padding-top: 5px;
+  padding-bottom: 5px;
+  padding-top: 5px;
 }
 .tabsHome .q-tab__icon {
-	font-size: 18px;
+  font-size: 18px;
 }
 .border-100 {
-	border-radius: 100px;
+  border-radius: 100px;
 }
 .bg-top {
-	background: #273238;
+  background: #273238;
 }
 .header-br {
-	border-bottom: 1px solid #fdfdfd31;
+  border-bottom: 1px solid #fdfdfd31;
 }
 .menuActive {
-	background: #1e2234;
-	border-radius: 0 100px 100px 0;
-	margin-right: 4%;
+  background: #1e2234;
+  border-radius: 0 100px 100px 0;
+  margin-right: 4%;
 }
 .q-card {
-	box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
-	border: 1px solid #eeeded;
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+  border: 1px solid #eeeded;
 }
 .q-menu {
-	box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 .toptitle {
-	font-size: 1.2rem;
-	font-weight: bold;
-	margin-bottom: 1.2%;
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 1.2%;
 }
 .q-field--outlined .q-field__control {
-	border-radius: 5px;
+  border-radius: 5px;
 }
 .q-field--outlined .q-field__control:before {
-	border-color: #c8d3db;
+  border-color: #c8d3db;
 }
 .q-field--outlined .q-icon {
-	color: #7474747f;
+  color: #7474747f;
 }
 </style>