diff --git a/components/Navbar.vue b/components/Navbar.vue
index cb061d113f..2703adee5a 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -77,6 +77,10 @@
         id="NavChainSelect"
         class="navbar-chain custom-navbar-item"
         data-cy="chain-select" />
+      <NotificationBoxButton
+        v-if="account"
+        :show-label="isMobile"
+        @closeBurgerMenu="closeBurgerMenu" />
       <template v-if="isMobile">
         <MobileLanguageOption v-if="!account" />
         <MobileExpandableSection
@@ -150,6 +154,7 @@ import ChainSelectDropdown from '~/components/navbar/ChainSelectDropdown.vue'
 import StatsDropdown from '~/components/navbar/StatsDropdown.vue'
 import MobileNavbarProfile from '~/components/navbar/MobileNavbarProfile.vue'
 import ConnectWalletButton from '~/components/shared/ConnectWalletButton.vue'
+import NotificationBoxButton from '~/components/navbar/NotificationBoxButton.vue'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import { BModalConfig } from 'buefy/types/components'
 import type Vue from 'vue'
diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
new file mode 100644
index 0000000000..69c829ee2a
--- /dev/null
+++ b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -0,0 +1,267 @@
+<template>
+  <div
+    class="notification-modal-container theme-background-color border-left is-flex is-flex-direction-column">
+    <header
+      class="py-4 px-2rem is-flex is-justify-content-space-between border-bottom mb-4">
+      <span class="control-label is-size-6 has-text-weight-bold">
+        {{ $t('notification.notifications') }}
+      </span>
+      <a class="is-flex is-align-items-center" @click="emit('close')">
+        <NeoIcon icon="close" />
+      </a>
+    </header>
+    <div class="px-0 pt-0 pb-3 theme-background-color">
+      <div class="notification-filter theme-background-color px-2rem pb-5">
+        <div
+          class="is-flex is-justify-content-space-between is-align-items-center pb-4">
+          <span> {{ $t('notification.filters') }} </span>
+          <NeoButton
+            v-if="!showFilter"
+            no-shadow
+            class="button-rounded"
+            @click.native="showFilter = !showFilter">
+            {{ $t('notification.add') }}
+            <NeoIcon icon="plus" size="small" />
+          </NeoButton>
+          <NeoButton
+            v-else
+            no-shadow
+            class="button-rounded"
+            @click.native="showFilter = !showFilter">
+            {{ $t('notification.done') }}
+            <NeoIcon icon="check" size="small" />
+          </NeoButton>
+        </div>
+        <div v-if="showFilter" class="filter-option">
+          <div
+            v-if="collections.length > 0"
+            class="is-flex is-flex-direction-column pb-4">
+            <span class="is-size-7 has-text-grey mb-2">
+              {{ $t('notification.byCollection') }}
+            </span>
+            <div class="is-flex is-flex-wrap-wrap filter-list">
+              <div
+                v-for="(item, index) in collections"
+                :key="`${item}-${index}`"
+                class="filter-item rounded is-clickable px-3 mr-1 py-1 mb-1 no-wrap"
+                :class="{
+                  activated: collectionFilter?.id === item.id,
+                }"
+                @click="toggleCollectionFilter(item)">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+          <div class="is-flex is-flex-direction-column pb-4">
+            <span class="is-size-7 has-text-grey mb-2">{{
+              $t('notification.byEvent')
+            }}</span>
+            <div class="is-flex is-flex-wrap-wrap filter-list">
+              <div
+                v-for="event in eventTypes"
+                :key="event"
+                class="filter-item rounded is-clickable px-3 mr-1 py-1 no-wrap"
+                :class="{
+                  activated: eventFilter.includes(event),
+                }"
+                @click="toggleEventFilter(event)">
+                {{ getInteractionName(event) }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="!showFilter && !isFilterEmpty" class="filter-option">
+          <div class="is-flex filter-display-list pb-3 is-flex-wrap-wrap">
+            <NeoTag
+              v-if="collectionFilter"
+              class="no-wrap mr-1 mb-1 rounded"
+              @close="collectionFilter = null">
+              {{ collectionFilter.name }}
+            </NeoTag>
+            <NeoTag
+              v-for="event in eventFilter"
+              :key="event"
+              class="no-wrap mb-1 mr-1 rounded"
+              @close="toggleEventFilter(event)">
+              {{ getInteractionName(event) }}
+            </NeoTag>
+          </div>
+        </div>
+      </div>
+      <div v-if="displayedEvents.length === 0" class="empty-tip">
+        <p>{{ $t('notification.emptyTipLine1') }}</p>
+        <p>{{ $t('notification.emptyTipLine2') }}</p>
+      </div>
+      <div v-else class="is-flex is-flex-direction-column">
+        <NotificationItem
+          v-for="(event, index) in displayedEvents"
+          :key="`${event.id}-${index}`"
+          :event="event" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Event, FilterOption } from './types'
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+import NeoTag from '@/components/shared/gallery/NeoTag.vue'
+
+import NotificationItem from './NotificationItem.vue'
+import {
+  Interaction,
+  getInteractionName,
+  useNotification,
+} from './useNotification'
+
+const { $store } = useNuxtApp()
+
+const eventTypes = ref<string[]>([
+  Interaction.SALE,
+  Interaction.OFFER,
+  Interaction.ACCEPTED_OFFER,
+])
+
+const collections = ref<FilterOption[]>([])
+const allEvents = ref<Event[]>([])
+
+const collectionFilter = ref<FilterOption | null>(null)
+const toggleCollectionFilter = (target: FilterOption) => {
+  if (collectionFilter.value?.id === target.id) {
+    collectionFilter.value = null
+  } else {
+    collectionFilter.value = target
+  }
+}
+
+const eventFilter = ref<string[]>([])
+const toggleEventFilter = (target) => {
+  const index = eventFilter.value.findIndex((x) => x === target)
+  if (index === -1) {
+    eventFilter.value.push(target)
+  } else {
+    eventFilter.value.splice(index, 1)
+  }
+}
+
+const showFilter = ref(false)
+const isFilterEmpty = computed(
+  () => !collectionFilter.value && eventFilter.value.length === 0
+)
+
+const displayedEvents = ref<Event[]>([])
+
+const doSearch = () => {
+  displayedEvents.value = allEvents.value.filter(
+    (item) =>
+      (!collectionFilter.value ||
+        collectionFilter.value.id === item.nft.collection?.id) &&
+      (eventFilter.value.length === 0 ||
+        eventFilter.value.some((x) => x === item.interaction))
+  )
+}
+
+const getNotifications = () => {
+  const { collections: collectionData, events: allEventsData } =
+    useNotification($store.getters.getAuthAddress)
+  collections.value = collectionData as unknown as FilterOption[]
+  allEvents.value = allEventsData as unknown as Event[]
+}
+
+watch(allEvents, doSearch, {
+  immediate: true,
+})
+
+watch(collectionFilter, doSearch, { deep: true })
+watch(eventFilter, doSearch, { deep: true })
+
+watch(() => $store.getters.currentUrlPrefix, getNotifications, {
+  immediate: true,
+})
+const emit = defineEmits(['close'])
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+.py-2rem {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.px-2rem {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.rounded {
+  border-radius: 2rem;
+  overflow: hidden;
+}
+.notification-box-modal {
+  .notification-modal-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    padding-top: 83px;
+    max-width: 360px;
+    width: 100%;
+    @include mobile {
+      padding-top: 58px;
+      max-width: 100vw;
+    }
+
+    .modal-card-head {
+      background: unset;
+    }
+
+    .notification-filter {
+      flex-shrink: 0;
+      flex-grow: 0;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      & > div:last-child {
+        @include ktheme() {
+          border-bottom: 1px solid theme('k-grey');
+        }
+      }
+
+      .filter-item {
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .filter-list {
+        .filter-item {
+          @include ktheme() {
+            border: 1px solid theme('k-shade');
+            &:hover {
+              border-color: theme('border-color');
+            }
+            &.activated {
+              color: theme('black');
+              background-color: theme('k-shade');
+            }
+          }
+        }
+      }
+    }
+    .empty-tip {
+      @include ktheme() {
+        color: theme('k-grey');
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.notification-box-modal {
+  .modal-content {
+    border: none !important;
+    box-shadow: none !important;
+  }
+  .modal-background {
+    background-color: rgba(0, 0, 0, 0.17) !important;
+  }
+}
+</style>
diff --git a/components/common/NotificationBox/NotificationItem.vue b/components/common/NotificationBox/NotificationItem.vue
new file mode 100644
index 0000000000..ea48f7918a
--- /dev/null
+++ b/components/common/NotificationBox/NotificationItem.vue
@@ -0,0 +1,115 @@
+<template>
+  <nuxt-link
+    :to="`/${urlPrefix}/gallery/${event.nft.id}`"
+    class="is-flex notify-item">
+    <img
+      v-if="avatar"
+      :src="avatar"
+      :alt="displayName"
+      class="border image is-48x48" />
+    <img
+      v-else
+      src="/placeholder.webp"
+      :alt="displayName"
+      class="border image is-48x48" />
+    <div class="notify-content ml-5 is-flex is-flex-direction-column">
+      <div class="is-flex is-justify-content-space-between">
+        <NeoTooltip
+          :label="displayName"
+          :append-to-body="false"
+          class="nft-name mr-4 has-text-weight-bold">
+          <div class="is-ellipsis">
+            {{ displayName }}
+          </div>
+        </NeoTooltip>
+        <div class="nft-price is-ellipsis">
+          <Money :value="event.meta" />
+        </div>
+      </div>
+      <div class="is-flex is-justify-content-space-between">
+        <div>
+          <div class="height-50px is-flex is-align-items-center">
+            <div
+              class="event-type mr-4 border is-size-7 is-justify-content-center py-1 is-flex is-align-items-center"
+              :class="[
+                getInteractionColor(event.interaction),
+                event.interaction === Interaction.ACCEPTED_OFFER
+                  ? 'px-2'
+                  : 'px-4',
+              ]">
+              {{ getInteractionName(event.interaction) }}
+            </div>
+          </div>
+        </div>
+        <div class="is-ellipsis">
+          {{ formatToNow(new Date(event.timestamp), false) }}
+        </div>
+      </div>
+    </div>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+import { Event } from './types'
+import { NeoTooltip } from '@kodadot1/brick'
+import {
+  Interaction,
+  getInteractionColor,
+  getInteractionName,
+} from './useNotification'
+import { InteractionWithNFT } from '@/composables/collectionActivity/types'
+import Money from '@/components/shared/format/ChainMoney.vue'
+import { formatToNow } from '@/utils/format/time'
+import { getNFTAvatar } from '@/components/collection/activity/events/eventRow/common'
+const { urlPrefix } = usePrefix()
+const props = defineProps<{
+  event: Event
+}>()
+const avatar = ref<string>()
+onMounted(() => {
+  getAvatar()
+})
+const getAvatar = async () => {
+  if (props.event) {
+    avatar.value = await getNFTAvatar(
+      props.event as unknown as InteractionWithNFT
+    )
+  }
+}
+const displayName = computed(
+  () => props.event.nft.meta.name || props.event.nft.id
+)
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/abstracts/variables';
+
+.notify-item {
+  padding: 0.75rem 2rem;
+  &:hover {
+    @include ktheme() {
+      color: theme('text-color');
+      background-color: theme('k-accentlight2');
+    }
+  }
+  img {
+    object-fit: cover;
+  }
+}
+.notify-content {
+  flex: 1;
+  overflow: visible;
+}
+.nft-price {
+  overflow: auto;
+}
+.nft-name {
+  width: 0;
+  flex: 1;
+}
+.event-type {
+  line-height: 0.75rem;
+  border-radius: 2rem;
+  white-space: nowrap;
+}
+</style>
diff --git a/components/common/NotificationBox/types.ts b/components/common/NotificationBox/types.ts
new file mode 100644
index 0000000000..50362a088e
--- /dev/null
+++ b/components/common/NotificationBox/types.ts
@@ -0,0 +1,14 @@
+import type { CarouselNFT } from '@/components/base/types'
+import type { Interaction } from '@/components/rmrk/service/scheme'
+export type FilterOption = {
+  id: string
+  name: string
+}
+
+export declare interface Event extends Interaction {
+  nft: CarouselNFT & {
+    meta: {
+      name: string
+    }
+  }
+}
diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
new file mode 100644
index 0000000000..f56698121c
--- /dev/null
+++ b/components/common/NotificationBox/useNotification.ts
@@ -0,0 +1,85 @@
+import { Event, FilterOption } from './types'
+import { Interaction as _Interaction } from '@kodadot1/minimark'
+import { sortedEventByDate } from '@/utils/sorting'
+
+export const Interaction = {
+  SALE: _Interaction.BUY,
+  OFFER: 'CREATE',
+  ACCEPTED_OFFER: 'ACCEPT',
+}
+
+export const getInteractionName = (key: string) => {
+  const { $i18n } = useNuxtApp()
+  const nameMap = {
+    [Interaction.SALE]: $i18n.t('filters.sale'),
+    [Interaction.OFFER]: $i18n.t('filters.offer'),
+    [Interaction.ACCEPTED_OFFER]: $i18n.t('filters.acceptedOffer'),
+  }
+
+  return nameMap[key]
+}
+
+export const getInteractionColor = (key: string) => {
+  const colorMap = {
+    [Interaction.SALE]: 'k-pink',
+    [Interaction.OFFER]: 'k-greenaccent',
+    [Interaction.ACCEPTED_OFFER]: 'k-blueaccent',
+  }
+
+  return colorMap[key]
+}
+
+export const useNotification = (account: string) => {
+  const { apiInstance } = useApi()
+  const collections = ref<FilterOption[]>([])
+  const events = ref<Event[]>([])
+
+  async function currentBlock() {
+    const api = await apiInstance.value
+    const block = await api.rpc.chain.getHeader()
+    return block.number.toNumber()
+  }
+
+  const { data: collectionData } = useGraphql({
+    queryName: 'collectionByAccount',
+    variables: {
+      account,
+    },
+  })
+
+  const { data: eventData } = useGraphql({
+    queryName: 'notificationsByAccount',
+    variables: {
+      account,
+    },
+  })
+
+  watch(collectionData, (result) => {
+    collections.value = result.collectionEntities ?? []
+  })
+
+  watch(eventData, async (result) => {
+    const currentBlockNumber = await currentBlock()
+    const offerEvents = result.offerEvents
+      .map((event) => ({
+        ...event,
+        nft: {
+          ...event.offer.nft,
+        },
+      }))
+      .filter(
+        (event) =>
+          event.interaction === Interaction.OFFER &&
+          Number(event.offer.expiration) < Number(currentBlockNumber)
+      )
+    events.value = sortedEventByDate(
+      [...result.events, ...offerEvents],
+      'ASC'
+    ) as unknown as Event[]
+  })
+
+  return {
+    collections,
+    events,
+  }
+}
diff --git a/components/common/NotificationBox/useNotificationBox.ts b/components/common/NotificationBox/useNotificationBox.ts
new file mode 100644
index 0000000000..2cd3f05155
--- /dev/null
+++ b/components/common/NotificationBox/useNotificationBox.ts
@@ -0,0 +1,7 @@
+import NotificationBoxModal from './NotificationBoxModal.vue'
+
+export const NotificationBoxModalConfig = {
+  component: NotificationBoxModal,
+  canCancel: ['outside'],
+  customClass: 'notification-box-modal',
+}
diff --git a/components/navbar/NotificationBoxButton.vue b/components/navbar/NotificationBoxButton.vue
new file mode 100644
index 0000000000..e731b61a6f
--- /dev/null
+++ b/components/navbar/NotificationBoxButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <a class="navbar-item" @click.stop="toggleNotificationModal">
+    <span v-if="props.showLabel">{{ $t('notification.notifications') }}</span>
+    <NeoIcon ref="root" icon="bell" class="icon" />
+  </a>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon } from '@kodadot1/brick'
+import { NotificationBoxModalConfig } from '@/components/common/NotificationBox/useNotificationBox'
+import { BModalComponent, BModalConfig } from 'buefy/types/components'
+import type Vue from 'vue'
+import { ModalProgrammatic as Modal } from 'buefy'
+const root = ref<Vue<Record<string, string>>>()
+const props = defineProps<{
+  showLabel: boolean
+}>()
+const emit = defineEmits(['closeBurgerMenu'])
+const modal = ref<BModalComponent | null>()
+function toggleNotificationModal() {
+  emit('closeBurgerMenu')
+  if (modal.value) {
+    modal.value.close()
+    modal.value = null
+  } else {
+    modal.value = Modal.open({
+      parent: root?.value,
+      onCancel: () => {
+        modal.value = null
+      },
+      ...NotificationBoxModalConfig,
+    } as unknown as BModalConfig)
+  }
+}
+</script>
diff --git a/locales/en.json b/locales/en.json
index 533d5967d8..0eb1f4cefc 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1288,17 +1288,29 @@
     "uploadDesc": "Upload Description File (Optional)"
   },
   "filters": {
+    "buy": "Buy",
     "sale": "Sale",
     "offer": "Offer",
+    "acceptedOffer": "Accepted offer",
     "listing": "Listing",
     "mint": "Mint",
     "transfer": "Transfer"
   },
-  "redirect":{
-    "title":"Leaving Kodadot",
-    "leavingTips":"You are going outside KodaDot to external website",
-    "safetyTips":"Be sure that it's safe!",
-    "continue":"Continue",
-    "stay":"Stay"
+  "redirect": {
+    "title": "Leaving Kodadot",
+    "leavingTips": "You are going outside KodaDot to external website",
+    "safetyTips": "Be sure that it's safe!",
+    "continue": "Continue",
+    "stay": "Stay"
+  },
+  "notification": {
+    "notifications": "Notifications",
+    "filters": "Filters",
+    "add": "Add",
+    "done": "Done",
+    "byCollection": "By collection",
+    "byEvent": "By event",
+    "emptyTipLine1": "Don't wait for notifications,",
+    "emptyTipLine2": "make your own buzz with your art."
   }
 }
diff --git a/queries/subsquid/general/collectionByAccount.graphql b/queries/subsquid/general/collectionByAccount.graphql
new file mode 100644
index 0000000000..88a32bcadd
--- /dev/null
+++ b/queries/subsquid/general/collectionByAccount.graphql
@@ -0,0 +1,9 @@
+query collectionByAccount($account: String!) {
+  collectionEntities(
+    where: { currentOwner_eq: $account }
+    orderBy: blockNumber_DESC
+  ) {
+    id
+    name
+  }
+}
diff --git a/queries/subsquid/general/notificationsByAccount.graphql b/queries/subsquid/general/notificationsByAccount.graphql
new file mode 100644
index 0000000000..f5c1a94649
--- /dev/null
+++ b/queries/subsquid/general/notificationsByAccount.graphql
@@ -0,0 +1,44 @@
+#import "../../fragments/subsquidNft.graphql"
+
+query notificationsByAccount($account: String!, $limit: Int = 30) {
+  # get sale event
+  events(
+    limit: $limit
+    where: { currentOwner_eq: $account, interaction_eq: BUY }
+    orderBy: timestamp_DESC
+  ) {
+    id
+    interaction
+    timestamp
+    currentOwner
+    meta
+    nft {
+      ...subsquidNft
+    }
+  }
+  # get offer and offer_accept events
+  offerEvents(
+    limit: $limit
+    where: {
+      currentOwner_eq: $account
+      AND: { interaction_eq: CREATE, offer: { status_eq: ACTIVE } }
+      OR: {
+        caller_eq: $account
+        AND: { interaction_eq: ACCEPT, offer: { status_eq: ACCEPTED } }
+      }
+    }
+    orderBy: timestamp_DESC
+  ) {
+    id
+    interaction
+    timestamp
+    currentOwner
+    meta
+    offer {
+      expiration
+      nft {
+        ...subsquidNft
+      }
+    }
+  }
+}
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index 2e3e3015fe..07e6191444 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -180,3 +180,5 @@ $body-family: $family-primary;
 
 $fluid-container-padding: 2.5rem;
 $fluid-container-padding-mobile: 1.25rem;
+
+$tooltip-content-zindex: 999;
\ No newline at end of file
diff --git a/styles/global.scss b/styles/global.scss
index a962919cc3..d7f6484c88 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -304,6 +304,11 @@ hr {
     border-top: 1px solid theme('border-color');
   }
 }
+.border-left {
+  @include ktheme() {
+    border-left: 1px solid theme('border-color');
+  }
+}
 .border {
   @include ktheme() {
     border: 1px solid theme('border-color');
diff --git a/utils/format/time.ts b/utils/format/time.ts
index 7ffe0b83cb..69f69da386 100644
--- a/utils/format/time.ts
+++ b/utils/format/time.ts
@@ -35,6 +35,6 @@ export const endDate = (seconds: number): string => {
   return parseDate(addSeconds(new Date(), seconds))
 }
 
-export const formatToNow = (date: Date): string => {
-  return formatDistanceToNowStrict(new Date(date), { addSuffix: true })
+export const formatToNow = (date: Date, addSuffix = true): string => {
+  return formatDistanceToNowStrict(new Date(date), { addSuffix })
 }