diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 1951fda..afda82c 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -121,6 +121,7 @@ const fetchlistNotification = async (index: number, type: string) => {
           timereceive: date2Thai(e.createdAt),
           isOpen: e.isOpen,
           receiveDate: e.receiveDate,
+          payload: e.payload,
         });
       });
       notiList.value.push(...list);
@@ -331,22 +332,57 @@ function onInfo() {
               <div
                 v-for="(item, index) in notiList"
                 :key="index"
-                class="caption"
+                :class="
+                  item.payload
+                    ? 'caption q-pa-xs cursor-pointer'
+                    : 'caption q-pa-xs'
+                "
+                @click.stop.prevent="
+                  item.payload ? $router.push(`/${item.payload}`) : ''
+                "
               >
-                <q-item v-ripple class="mytry q-py-sm" dense>
-                  <q-item-section avatar top style="min-width: 10px">
-                    <q-avatar
-                      rounded
-                      color="primary"
-                      size="25px"
-                      text-color="white"
-                    >
+                <q-item
+                  :class="
+                    !item.isOpen
+                      ? 'mytry q-py-xs my-menu-link'
+                      : 'mytry q-py-xs'
+                  "
+                  :clickable="item.payload !== ''"
+                  :v-ripple="item.payload !== ''"
+                  dense
+                >
+                  <q-item-section avatar top style="min-width: 40px">
+                    <q-avatar color="primary" size="22px" text-color="white">
                       <span class="text-weight-medium text-uppercase">{{
                         item.body[0]
                       }}</span>
                     </q-avatar>
                   </q-item-section>
                   <q-item-section>
+                    <q-item-label caption class="text-black"
+                      >{{ item.body }}
+                      <q-btn
+                        v-if="item.payload !== ''"
+                        size="sm"
+                        flat
+                        round
+                        dense
+                        icon="mdi-link"
+                        color="primary"
+                      ></q-btn>
+                    </q-item-label>
+                    <q-item-label caption class="row items-center text-grey-7">
+                      {{ date2Thai(item.receiveDate) }}
+                      {{
+                        new Date(item.receiveDate).toLocaleTimeString(
+                          "th-TH",
+                          thaiOptions
+                        )
+                      }}
+                      น.</q-item-label
+                    >
+                  </q-item-section>
+                  <!-- <q-item-section>
                     <q-item-label caption class="text-grey-7">
                       {{ date2Thai(item.receiveDate) }}
                       {{
@@ -372,7 +408,7 @@ function onInfo() {
                       style="font-size: 12px"
                       >{{ item.timereceive }}</q-item-label
                     >
-                  </q-item-section>
+                  </q-item-section> -->
                   <div>
                     <q-btn
                       size="sm"