diff --git a/src/components/home/MenuItem.vue b/src/components/home/MenuItem.vue
index 4c1df5ba..e2371908 100644
--- a/src/components/home/MenuItem.vue
+++ b/src/components/home/MenuItem.vue
@@ -39,7 +39,7 @@ function navigateTo(destination: string) {
       @click="navigateTo(v.value)"
     >
       <AppCircle
-        :class="`q-pa-sm menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
+        :class="`q-pa-md menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
         :bordered="$q.dark.isActive"
       >
         <q-icon size="3rem" :name="v.icon" />
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 5d767572..52dbc46a 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -38,3 +38,7 @@ $separator-dark-color: var(--border-color);
     border-color: var(--border-color);
   }
 }
+
+.q-menu {
+  box-shadow: var(--shadow-2) !important;
+}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index aa301ddb..69a8623c 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -2,16 +2,78 @@
 import { ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
+import { getName, getRole, logout } from 'src/services/keycloak';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
 
+interface NotificationButton {
+  item: string;
+  color: string;
+  active: boolean;
+}
+
+interface Notification {
+  id: string;
+  title: string;
+  content: string;
+  read: boolean;
+}
+
 const $q = useQuasar();
 const loaderStore = useLoader();
 
 const { visible } = storeToRefs(loaderStore);
 
 const leftDrawerOpen = ref($q.screen.gt.sm);
+const filterUnread = ref(false);
+const unread = ref<number>(1);
+const notiOpen = ref(false);
+const notiMenu = ref<NotificationButton[]>([
+  {
+    item: 'ทั้งหมด',
+    color: 'noti-switch-on',
+    active: true,
+  },
+  {
+    item: 'ยังไม่ได้อ่าน',
+    color: 'noti-switch-off',
+    active: false,
+  },
+]);
+const notification = ref<Notification[]>([
+  {
+    id: '1',
+    title: 'test',
+    content: 'test',
+    read: false,
+  },
+  {
+    id: '2',
+    title: 'test',
+    content: 'test',
+    read: false,
+  },
+]);
+
+function setActive(button: NotificationButton) {
+  notiMenu.value = notiMenu.value.map((current) => ({
+    item: current.item,
+    color: current.item !== button.item ? 'noti-switch-off' : 'noti-switch-on',
+    active: current.item === button.item,
+  }));
+  if (button.item === 'ยังไม่ได้อ่าน') {
+    // noti.value?.result &&
+    filterUnread.value = true;
+  }
+  if (button.item === 'ทั้งหมด') {
+    filterUnread.value = false;
+  }
+}
+
+function doLogout() {
+  logout();
+}
 </script>
 
 <template>
@@ -22,22 +84,178 @@ const leftDrawerOpen = ref($q.screen.gt.sm);
           round
           unelevated
           id="drawer-toggler"
-          icon="mdi-backburger"
+          :icon="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
           :class="{ bordered: $q.dark.isActive }"
           class="surface-2"
           style="color: var(--gray-6)"
           @click="leftDrawerOpen = !leftDrawerOpen"
         />
-        <q-btn
-          round
-          unelevated
-          id="drawer-toggler"
-          icon="mdi-switch"
-          :class="{ bordered: $q.dark.isActive }"
-          class="surface-2"
-          style="color: var(--gray-6)"
-          @click="$q.dark.toggle()"
-        />
+
+        <!-- notification -->
+        <div class="q-gutter-x-md row items-end">
+          <q-btn
+            round
+            dense
+            flat
+            class="noti-circle"
+            :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
+            style="color: var(--surface-1)"
+          >
+            <q-icon name="mdi-bell" size="20px" />
+            <q-badge v-if="unread !== 0" rounded floating color="negative">
+              {{ unread }}
+            </q-badge>
+
+            <q-menu
+              :offset="[0, 10]"
+              anchor="bottom middle"
+              self="top middle"
+              style="width: 300px"
+              @before-hide="notiOpen = false"
+            >
+              <div class="q-px-md q-py-sm row col-12 items-center">
+                <div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
+                <q-space />
+              </div>
+              <div class="q-px-md q-pb-md q-gutter-x-md">
+                <q-btn
+                  rounded
+                  padding="0px 10px"
+                  class="text-weight-medium"
+                  v-for="(btn, index) in notiMenu"
+                  :flat="!btn.active"
+                  :unelevated="btn.active"
+                  :key="index"
+                  :label="btn.item"
+                  :class="btn.color"
+                  @click="setActive(btn)"
+                />
+              </div>
+              <q-infinite-scroll :offset="250">
+                <div class="caption cursor-pointer">
+                  <q-item
+                    dense
+                    clickable
+                    class="q-py-sm"
+                    v-ripple
+                    v-for="item in notification"
+                    :key="item.id"
+                  >
+                    <q-avatar
+                      color="positive"
+                      style="height: 30px; width: 30px"
+                    >
+                      <q-icon color="white" name="mdi-check" />
+                    </q-avatar>
+
+                    <div class="col-6 column text-caption q-pl-md ellipsis">
+                      <span class="block ellipsis full-width text-weight-bold">
+                        {{ item.title }}
+                      </span>
+                      <span class="block ellipsis full-width text-stone">
+                        {{ item.content }}
+                      </span>
+                    </div>
+                    <span align="right" class="col text-caption text-stone">
+                      <!-- {{ moment(item.createdAt).fromNow() }} -->
+                      5 s
+                    </span>
+                    <q-tooltip
+                      anchor="top middle"
+                      self="bottom middle"
+                      :delay="1000"
+                      :offset="[10, 10]"
+                    >
+                      {{ item.content }}
+                    </q-tooltip>
+                  </q-item>
+                </div>
+                <!-- <template v-slot:loading>
+                  <div
+                    class="text-center q-my-md"
+                    v-if="noti && noti?.result.length < noti?.total"
+                  >
+                    <q-spinner-dots color="primary" size="40px" />
+                  </div>
+                </template> -->
+              </q-infinite-scroll>
+            </q-menu>
+          </q-btn>
+
+          <!-- User -->
+          <q-btn-dropdown
+            rounded
+            dense
+            flat
+            no-caps
+            color="dark"
+            class="q-pa-none account-menu-down dropdown-menu"
+          >
+            <template v-slot:label>
+              <q-item dense class="q-pa-none">
+                <q-item-section
+                  avatar
+                  class="q-pa-none"
+                  style="min-width: 30px"
+                >
+                  <q-avatar class="bg-primary" />
+                </q-item-section>
+                <q-item-section
+                  class="text-left text-dark q-pa-none q-px-md"
+                  v-if="$q.screen.gt.xs"
+                >
+                  <q-item-label class="text-caption column">
+                    <span class="text-weight-bold q-pb-xs text-primary">
+                      {{ getName() }}
+                    </span>
+                    <div style="font-size: 11px; color: var(--foreground)">
+                      {{ getRole()?.includes('admin') ? 'Admin' : 'User' }}
+                    </div>
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
+
+            <q-list class="dropdown-menu">
+              <q-item clickable>
+                <q-item-section avatar style="min-width: 30px">
+                  <q-icon
+                    color="secondary"
+                    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 @click="doLogout()">
+                <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>ออกจากระบบ</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+
+          <!-- theme -->
+          <q-btn
+            round
+            unelevated
+            id="drawer-toggler"
+            icon="mdi-switch"
+            :class="{ bordered: $q.dark.isActive }"
+            class="surface-2"
+            style="color: var(--gray-6)"
+            @click="$q.dark.toggle()"
+          />
+        </div>
       </div>
     </q-header>
 
@@ -52,3 +270,37 @@ const leftDrawerOpen = ref($q.screen.gt.sm);
     <global-loading :visibility="visible" />
   </q-layout>
 </template>
+
+<style scoped>
+.text-stone {
+  --_color: var(--stone-5);
+  color: var(--_color);
+}
+
+.noti-circle {
+  --_color: var(--stone-5);
+  background-color: var(--_color);
+
+  &.dark {
+    --_color: var(--stone-9);
+  }
+}
+
+.noti-switch-on {
+  --_bg-color: var(--blue-0);
+  --_color: var(--blue-6);
+  background-color: var(--_bg-color);
+  color: var(--_color);
+}
+
+.noti-switch-off {
+  --_color: var(--stone-6);
+  color: var(--_color);
+}
+
+.account-menu-down {
+  & ::before {
+    color: var(--foreground);
+  }
+}
+</style>